This commit is contained in:
anatolykopyl
2022-07-24 15:38:24 +00:00
parent 631c658874
commit 68e3e1608a
28 changed files with 74 additions and 74 deletions

View File

@@ -6,4 +6,4 @@ import{M as a}from"./chunks/Mockup.ce849057.js";import{s as e}from"./chunks/scre
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,2),h=JSON.parse('{"title":"Introduction","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Simple usage example","slug":"simple-usage-example"}],"relativePath":"guide/index.md","lastUpdated":1658676489000}'),i={name:"guide/index.md"},m=Object.assign(i,{setup(d){return(D,F)=>(n(),l("div",null,[c,p("p",null,[t(a,{style:{width:"100%",height:"400px"},screen:o(e)},null,8,["screen"])]),r]))}});export{h as __pageData,m as default};
<span class="line"></span></code></pre></div>`,2),h=JSON.parse('{"title":"Introduction","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Simple usage example","slug":"simple-usage-example"}],"relativePath":"guide/index.md","lastUpdated":1658677066000}'),i={name:"guide/index.md"},m=Object.assign(i,{setup(d){return(D,F)=>(n(),l("div",null,[c,p("p",null,[t(a,{style:{width:"100%",height:"400px"},screen:o(e)},null,8,["screen"])]),r]))}});export{h as __pageData,m as default};

View File

@@ -1 +1 @@
import{M as a}from"./chunks/Mockup.ce849057.js";import{s as e}from"./chunks/screen.fc899083.js";import{o as n,c as l,a as p,b as t,u as o,d as s}from"./app.06d4fed4.js";const c=s("",4),r=s("",2),h=JSON.parse('{"title":"Introduction","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Simple usage example","slug":"simple-usage-example"}],"relativePath":"guide/index.md","lastUpdated":1658676489000}'),i={name:"guide/index.md"},m=Object.assign(i,{setup(d){return(D,F)=>(n(),l("div",null,[c,p("p",null,[t(a,{style:{width:"100%",height:"400px"},screen:o(e)},null,8,["screen"])]),r]))}});export{h as __pageData,m as default};
import{M as a}from"./chunks/Mockup.ce849057.js";import{s as e}from"./chunks/screen.fc899083.js";import{o as n,c as l,a as p,b as t,u as o,d as s}from"./app.06d4fed4.js";const c=s("",4),r=s("",2),h=JSON.parse('{"title":"Introduction","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Simple usage example","slug":"simple-usage-example"}],"relativePath":"guide/index.md","lastUpdated":1658677066000}'),i={name:"guide/index.md"},m=Object.assign(i,{setup(d){return(D,F)=>(n(),l("div",null,[c,p("p",null,[t(a,{style:{width:"100%",height:"400px"},screen:o(e)},null,8,["screen"])]),r]))}});export{h as __pageData,m as default};

View File

@@ -20,4 +20,4 @@ import{M as l}from"./chunks/Mockup.ce849057.js";import{s as a}from"./chunks/scre
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Mockup </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vue-three-d-mockup</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> screenImage </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./assets/screen.png</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,2),_=JSON.parse('{"title":"Multiple mockups","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/multiple-mockups.md","lastUpdated":1658676489000}'),D={name:"guide/multiple-mockups.md"},A=Object.assign(D,{setup(y){return(i,u)=>(p(),o("div",null,[r,s("p",null,[e(l,{style:{width:"100%",height:"400px"},screen:[n(a),n(a)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),F]))}});export{_ as __pageData,A as default};
<span class="line"></span></code></pre></div>`,2),_=JSON.parse('{"title":"Multiple mockups","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/multiple-mockups.md","lastUpdated":1658677066000}'),D={name:"guide/multiple-mockups.md"},A=Object.assign(D,{setup(y){return(i,u)=>(p(),o("div",null,[r,s("p",null,[e(l,{style:{width:"100%",height:"400px"},screen:[n(a),n(a)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),F]))}});export{_ as __pageData,A as default};

View File

@@ -1 +1 @@
import{M as l}from"./chunks/Mockup.ce849057.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as p,c as o,a as s,b as e,u as n,f as t,d as c}from"./app.06d4fed4.js";const r=s("h1",{id:"multiple-mockups",tabindex:"-1"},[t("Multiple mockups "),s("a",{class:"header-anchor",href:"#multiple-mockups","aria-hidden":"true"},"#")],-1),F=c("",2),_=JSON.parse('{"title":"Multiple mockups","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/multiple-mockups.md","lastUpdated":1658676489000}'),D={name:"guide/multiple-mockups.md"},A=Object.assign(D,{setup(y){return(i,u)=>(p(),o("div",null,[r,s("p",null,[e(l,{style:{width:"100%",height:"400px"},screen:[n(a),n(a)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),F]))}});export{_ as __pageData,A as default};
import{M as l}from"./chunks/Mockup.ce849057.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as p,c as o,a as s,b as e,u as n,f as t,d as c}from"./app.06d4fed4.js";const r=s("h1",{id:"multiple-mockups",tabindex:"-1"},[t("Multiple mockups "),s("a",{class:"header-anchor",href:"#multiple-mockups","aria-hidden":"true"},"#")],-1),F=c("",2),_=JSON.parse('{"title":"Multiple mockups","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/multiple-mockups.md","lastUpdated":1658677066000}'),D={name:"guide/multiple-mockups.md"},A=Object.assign(D,{setup(y){return(i,u)=>(p(),o("div",null,[r,s("p",null,[e(l,{style:{width:"100%",height:"400px"},screen:[n(a),n(a)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),F]))}});export{_ as __pageData,A as default};

View File

@@ -1 +1 @@
import{_ as e,o,c as i,d as t}from"./app.06d4fed4.js";const _=JSON.parse('{"title":"Props","description":"","frontmatter":{},"headers":[{"level":2,"title":"screen","slug":"screen"},{"level":2,"title":"lightClr","slug":"lightclr"},{"level":2,"title":"phoneClr","slug":"phoneclr"},{"level":2,"title":"position","slug":"position"},{"level":2,"title":"rotation","slug":"rotation"}],"relativePath":"guide/props.md","lastUpdated":1658676489000}'),a={name:"guide/props.md"},l=t('<h1 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-hidden="true">#</a></h1><h2 id="screen" tabindex="-1"><code>screen</code> <a class="header-anchor" href="#screen" aria-hidden="true">#</a></h2><p>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. Can also be an array of any of the options above.</p><ul><li>Type: <code>String | Element | Array[String | Element]</code></li><li>Required: <code>true</code></li></ul><h2 id="lightclr" tabindex="-1"><code>lightClr</code> <a class="header-anchor" href="#lightclr" aria-hidden="true">#</a></h2><p>Color of the light as a CSS-style string.</p><ul><li>Type: <code>String</code></li><li>Required: <code>false</code></li><li>Default: <code>&quot;white&quot;</code></li></ul><h2 id="phoneclr" tabindex="-1"><code>phoneClr</code> <a class="header-anchor" href="#phoneclr" aria-hidden="true">#</a></h2><p>Color of the phone as a CSS-style string.</p><ul><li>Type: <code>String</code></li><li>Required: <code>false</code></li><li>Default: <code>&quot;white&quot;</code></li></ul><h2 id="position" tabindex="-1"><code>position</code> <a class="header-anchor" href="#position" aria-hidden="true">#</a></h2><p>The position of the phone. Can also be an array if multiple screens specified.</p><ul><li>Type: <code>Object | Array[Object]</code></li><li>Required: <code>false</code></li><li>Default: <code>{ x: 0, y: 0, z: 0 }</code></li></ul><h2 id="rotation" tabindex="-1"><code>rotation</code> <a class="header-anchor" href="#rotation" aria-hidden="true">#</a></h2><p>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</p><ul><li>Type: <code>Object | Array[Object]</code></li><li>Required: <code>false</code></li><li>Default: <code>{ x: -0.2, y: 0.3, z: 0.06 }</code></li></ul>',16),r=[l];function d(c,n,s,h,p,u){return o(),i("div",null,r)}var g=e(a,[["render",d]]);export{_ as __pageData,g as default};
import{_ as e,o,c as i,d as t}from"./app.06d4fed4.js";const _=JSON.parse('{"title":"Props","description":"","frontmatter":{},"headers":[{"level":2,"title":"screen","slug":"screen"},{"level":2,"title":"lightClr","slug":"lightclr"},{"level":2,"title":"phoneClr","slug":"phoneclr"},{"level":2,"title":"position","slug":"position"},{"level":2,"title":"rotation","slug":"rotation"}],"relativePath":"guide/props.md","lastUpdated":1658677066000}'),a={name:"guide/props.md"},l=t('<h1 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-hidden="true">#</a></h1><h2 id="screen" tabindex="-1"><code>screen</code> <a class="header-anchor" href="#screen" aria-hidden="true">#</a></h2><p>Path to an image that will be displayed on the phones screen or the <code>&lt;video&gt;</code> element displayed on the phones screen. Can also be an array of any of the options above.</p><ul><li>Type: <code>String | Element | Array[String | Element]</code></li><li>Required: <code>true</code></li></ul><h2 id="lightclr" tabindex="-1"><code>lightClr</code> <a class="header-anchor" href="#lightclr" aria-hidden="true">#</a></h2><p>Color of the light as a CSS-style string.</p><ul><li>Type: <code>String</code></li><li>Required: <code>false</code></li><li>Default: <code>&quot;white&quot;</code></li></ul><h2 id="phoneclr" tabindex="-1"><code>phoneClr</code> <a class="header-anchor" href="#phoneclr" aria-hidden="true">#</a></h2><p>Color of the phone as a CSS-style string.</p><ul><li>Type: <code>String</code></li><li>Required: <code>false</code></li><li>Default: <code>&quot;white&quot;</code></li></ul><h2 id="position" tabindex="-1"><code>position</code> <a class="header-anchor" href="#position" aria-hidden="true">#</a></h2><p>The position of the phone. Can also be an array if multiple screens specified.</p><ul><li>Type: <code>Object | Array[Object]</code></li><li>Required: <code>false</code></li><li>Default: <code>{ x: 0, y: 0, z: 0 }</code></li></ul><h2 id="rotation" tabindex="-1"><code>rotation</code> <a class="header-anchor" href="#rotation" aria-hidden="true">#</a></h2><p>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</p><ul><li>Type: <code>Object | Array[Object]</code></li><li>Required: <code>false</code></li><li>Default: <code>{ x: -0.2, y: 0.3, z: 0.06 }</code></li></ul>',16),r=[l];function d(c,n,s,h,p,u){return o(),i("div",null,r)}var g=e(a,[["render",d]]);export{_ as __pageData,g as default};

View File

@@ -1 +1 @@
import{_ as e,o,c as i,d as t}from"./app.06d4fed4.js";const _=JSON.parse('{"title":"Props","description":"","frontmatter":{},"headers":[{"level":2,"title":"screen","slug":"screen"},{"level":2,"title":"lightClr","slug":"lightclr"},{"level":2,"title":"phoneClr","slug":"phoneclr"},{"level":2,"title":"position","slug":"position"},{"level":2,"title":"rotation","slug":"rotation"}],"relativePath":"guide/props.md","lastUpdated":1658676489000}'),a={name:"guide/props.md"},l=t("",16),r=[l];function d(c,n,s,h,p,u){return o(),i("div",null,r)}var g=e(a,[["render",d]]);export{_ as __pageData,g as default};
import{_ as e,o,c as i,d as t}from"./app.06d4fed4.js";const _=JSON.parse('{"title":"Props","description":"","frontmatter":{},"headers":[{"level":2,"title":"screen","slug":"screen"},{"level":2,"title":"lightClr","slug":"lightclr"},{"level":2,"title":"phoneClr","slug":"phoneclr"},{"level":2,"title":"position","slug":"position"},{"level":2,"title":"rotation","slug":"rotation"}],"relativePath":"guide/props.md","lastUpdated":1658677066000}'),a={name:"guide/props.md"},l=t("",16),r=[l];function d(c,n,s,h,p,u){return o(),i("div",null,r)}var g=e(a,[["render",d]]);export{_ as __pageData,g as default};

View File

@@ -1,4 +1,4 @@
import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658676489000}'),p={name:"guide/screen-from-assets.md"},l=e(`<h1 id="screen-image-from-assets-folder" tabindex="-1">Screen image from <code>assets</code> folder <a class="header-anchor" href="#screen-image-from-assets-folder" aria-hidden="true">#</a></h1><h2 id="in-vite-powered-projects" tabindex="-1">In Vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h2><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658677066000}'),p={name:"guide/screen-from-assets.md"},l=e(`<h1 id="screen-image-from-assets-folder" tabindex="-1">Screen image from <code>assets</code> folder <a class="header-anchor" href="#screen-image-from-assets-folder" aria-hidden="true">#</a></h1><h2 id="in-vite-powered-projects" tabindex="-1">In Vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h2><div class="language-vue"><span class="copy"></span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">Mockup</span><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">screen</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>

View File

@@ -1 +1 @@
import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658676489000}'),p={name:"guide/screen-from-assets.md"},l=e("",5),o=[l];function t(r,c,D,F,i,y){return a(),n("div",null,o)}var C=s(p,[["render",t]]);export{u as __pageData,C as default};
import{_ as s,o as a,c as n,d as e}from"./app.06d4fed4.js";const u=JSON.parse('{"title":"Screen image from assets folder","description":"","frontmatter":{},"headers":[{"level":2,"title":"In Vite powered projects","slug":"in-vite-powered-projects"},{"level":2,"title":"In Vue CLI powered projects","slug":"in-vue-cli-powered-projects"}],"relativePath":"guide/screen-from-assets.md","lastUpdated":1658677066000}'),p={name:"guide/screen-from-assets.md"},l=e("",5),o=[l];function t(r,c,D,F,i,y){return a(),n("div",null,o)}var C=s(p,[["render",t]]);export{u as __pageData,C as default};

View File

@@ -1,15 +0,0 @@
import{M as l}from"./chunks/Mockup.ce849057.js";import{s as o}from"./chunks/screen.fc899083.js";import{r as p,o as d,c,a as s,g as r,u as v,f as e,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-d89b4156"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F(`<p data-v-d89b4156>The <code data-v-d89b4156>phoneClr</code> and <code data-v-d89b4156>lightClr</code> props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the <code data-v-d89b4156>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-d89b4156>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-d89b4156>#</a></h2><div class="language-vue" data-v-d89b4156><span class="copy" data-v-d89b4156></span><pre data-v-d89b4156><code data-v-d89b4156><span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156>&lt;</span><span style="color:#F07178;" data-v-d89b4156>template</span><span style="color:#89DDFF;" data-v-d89b4156>&gt;</span></span>
<span class="line" data-v-d89b4156><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#89DDFF;" data-v-d89b4156>&lt;</span><span style="color:#FFCB6B;" data-v-d89b4156>Mockup</span><span style="color:#89DDFF;" data-v-d89b4156> </span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156> </span><span style="color:#C792EA;" data-v-d89b4156>screen</span><span style="color:#89DDFF;" data-v-d89b4156>=</span><span style="color:#89DDFF;" data-v-d89b4156>&quot;</span><span style="color:#C3E88D;" data-v-d89b4156>screen.png</span><span style="color:#89DDFF;" data-v-d89b4156>&quot;</span><span style="color:#89DDFF;" data-v-d89b4156> </span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156> :</span><span style="color:#C792EA;" data-v-d89b4156>phoneClr</span><span style="color:#89DDFF;" data-v-d89b4156>=</span><span style="color:#89DDFF;" data-v-d89b4156>&quot;</span><span style="color:#A6ACCD;" data-v-d89b4156>darkTheme</span><span style="color:#89DDFF;" data-v-d89b4156> ? </span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#C3E88D;" data-v-d89b4156>#fff</span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#89DDFF;" data-v-d89b4156> : </span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#C3E88D;" data-v-d89b4156>#222</span><span style="color:#89DDFF;" data-v-d89b4156>&#39;&quot;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156> :</span><span style="color:#C792EA;" data-v-d89b4156>key</span><span style="color:#89DDFF;" data-v-d89b4156>=</span><span style="color:#89DDFF;" data-v-d89b4156>&quot;</span><span style="color:#A6ACCD;" data-v-d89b4156>darkTheme</span><span style="color:#89DDFF;" data-v-d89b4156>&quot;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156> /&gt;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156>&lt;/</span><span style="color:#F07178;" data-v-d89b4156>template</span><span style="color:#89DDFF;" data-v-d89b4156>&gt;</span></span>
<span class="line" data-v-d89b4156></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156>&lt;</span><span style="color:#F07178;" data-v-d89b4156>script</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#C792EA;" data-v-d89b4156>setup</span><span style="color:#89DDFF;" data-v-d89b4156>&gt;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;font-style:italic;" data-v-d89b4156>import</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#89DDFF;" data-v-d89b4156>{</span><span style="color:#F07178;" data-v-d89b4156> </span><span style="color:#A6ACCD;" data-v-d89b4156>ref</span><span style="color:#F07178;" data-v-d89b4156> </span><span style="color:#89DDFF;" data-v-d89b4156>}</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#89DDFF;font-style:italic;" data-v-d89b4156>from</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#C3E88D;" data-v-d89b4156>vue</span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#89DDFF;" data-v-d89b4156>;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;font-style:italic;" data-v-d89b4156>import</span><span style="color:#A6ACCD;" data-v-d89b4156> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-d89b4156>from</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#C3E88D;" data-v-d89b4156>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-d89b4156>&#39;</span><span style="color:#89DDFF;" data-v-d89b4156>;</span></span>
<span class="line" data-v-d89b4156></span>
<span class="line" data-v-d89b4156><span style="color:#C792EA;" data-v-d89b4156>const</span><span style="color:#A6ACCD;" data-v-d89b4156> darkTheme </span><span style="color:#89DDFF;" data-v-d89b4156>=</span><span style="color:#A6ACCD;" data-v-d89b4156> </span><span style="color:#82AAFF;" data-v-d89b4156>ref</span><span style="color:#A6ACCD;" data-v-d89b4156>(</span><span style="color:#FF9CAC;" data-v-d89b4156>true</span><span style="color:#A6ACCD;" data-v-d89b4156>)</span><span style="color:#89DDFF;" data-v-d89b4156>;</span></span>
<span class="line" data-v-d89b4156><span style="color:#89DDFF;" data-v-d89b4156>&lt;/</span><span style="color:#F07178;" data-v-d89b4156>script</span><span style="color:#89DDFF;" data-v-d89b4156>&gt;</span></span>
<span class="line" data-v-d89b4156></span></code></pre></div>`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658676489000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=p(!0);return(A,n)=>(d(),c("div",null,[u,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:v(o),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-d89b4156"]]);export{x as __pageData,E as default};

View File

@@ -1 +0,0 @@
import{M as l}from"./chunks/Mockup.ce849057.js";import{s as o}from"./chunks/screen.fc899083.js";import{r as p,o as d,c,a as s,g as r,u as v,f as e,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-d89b4156"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F("",3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658676489000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=p(!0);return(A,n)=>(d(),c("div",null,[u,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:v(o),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-d89b4156"]]);export{x as __pageData,E as default};

View File

@@ -0,0 +1,15 @@
import{M as o}from"./chunks/Mockup.ce849057.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as d,o as e,c,a as s,g as r,u as v,f as l,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-4512b10a"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F(`<p data-v-4512b10a>The <code data-v-4512b10a>phoneClr</code> and <code data-v-4512b10a>lightClr</code> props are not reactive, and are intended to be set when the component is mounted. But if you want to you still can force a rerender by giving the <code data-v-4512b10a>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-4512b10a>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-4512b10a>#</a></h2><div class="language-vue" data-v-4512b10a><span class="copy" data-v-4512b10a></span><pre data-v-4512b10a><code data-v-4512b10a><span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a>&lt;</span><span style="color:#F07178;" data-v-4512b10a>template</span><span style="color:#89DDFF;" data-v-4512b10a>&gt;</span></span>
<span class="line" data-v-4512b10a><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#89DDFF;" data-v-4512b10a>&lt;</span><span style="color:#FFCB6B;" data-v-4512b10a>Mockup</span><span style="color:#89DDFF;" data-v-4512b10a> </span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a> </span><span style="color:#C792EA;" data-v-4512b10a>screen</span><span style="color:#89DDFF;" data-v-4512b10a>=</span><span style="color:#89DDFF;" data-v-4512b10a>&quot;</span><span style="color:#C3E88D;" data-v-4512b10a>screen.png</span><span style="color:#89DDFF;" data-v-4512b10a>&quot;</span><span style="color:#89DDFF;" data-v-4512b10a> </span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a> :</span><span style="color:#C792EA;" data-v-4512b10a>phoneClr</span><span style="color:#89DDFF;" data-v-4512b10a>=</span><span style="color:#89DDFF;" data-v-4512b10a>&quot;</span><span style="color:#A6ACCD;" data-v-4512b10a>darkTheme</span><span style="color:#89DDFF;" data-v-4512b10a> ? </span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#C3E88D;" data-v-4512b10a>#fff</span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#89DDFF;" data-v-4512b10a> : </span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#C3E88D;" data-v-4512b10a>#222</span><span style="color:#89DDFF;" data-v-4512b10a>&#39;&quot;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a> :</span><span style="color:#C792EA;" data-v-4512b10a>key</span><span style="color:#89DDFF;" data-v-4512b10a>=</span><span style="color:#89DDFF;" data-v-4512b10a>&quot;</span><span style="color:#A6ACCD;" data-v-4512b10a>darkTheme</span><span style="color:#89DDFF;" data-v-4512b10a>&quot;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a> /&gt;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a>&lt;/</span><span style="color:#F07178;" data-v-4512b10a>template</span><span style="color:#89DDFF;" data-v-4512b10a>&gt;</span></span>
<span class="line" data-v-4512b10a></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a>&lt;</span><span style="color:#F07178;" data-v-4512b10a>script</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#C792EA;" data-v-4512b10a>setup</span><span style="color:#89DDFF;" data-v-4512b10a>&gt;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;font-style:italic;" data-v-4512b10a>import</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#89DDFF;" data-v-4512b10a>{</span><span style="color:#F07178;" data-v-4512b10a> </span><span style="color:#A6ACCD;" data-v-4512b10a>ref</span><span style="color:#F07178;" data-v-4512b10a> </span><span style="color:#89DDFF;" data-v-4512b10a>}</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#89DDFF;font-style:italic;" data-v-4512b10a>from</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#C3E88D;" data-v-4512b10a>vue</span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#89DDFF;" data-v-4512b10a>;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;font-style:italic;" data-v-4512b10a>import</span><span style="color:#A6ACCD;" data-v-4512b10a> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-4512b10a>from</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#C3E88D;" data-v-4512b10a>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-4512b10a>&#39;</span><span style="color:#89DDFF;" data-v-4512b10a>;</span></span>
<span class="line" data-v-4512b10a></span>
<span class="line" data-v-4512b10a><span style="color:#C792EA;" data-v-4512b10a>const</span><span style="color:#A6ACCD;" data-v-4512b10a> darkTheme </span><span style="color:#89DDFF;" data-v-4512b10a>=</span><span style="color:#A6ACCD;" data-v-4512b10a> </span><span style="color:#82AAFF;" data-v-4512b10a>ref</span><span style="color:#A6ACCD;" data-v-4512b10a>(</span><span style="color:#FF9CAC;" data-v-4512b10a>true</span><span style="color:#A6ACCD;" data-v-4512b10a>)</span><span style="color:#89DDFF;" data-v-4512b10a>;</span></span>
<span class="line" data-v-4512b10a><span style="color:#89DDFF;" data-v-4512b10a>&lt;/</span><span style="color:#F07178;" data-v-4512b10a>script</span><span style="color:#89DDFF;" data-v-4512b10a>&gt;</span></span>
<span class="line" data-v-4512b10a></span></code></pre></div>`,3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658677066000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=d(!0);return(A,n)=>(e(),c("div",null,[u,s("p",null,[(e(),r(o,{style:{width:"100%",height:"400px"},screen:v(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-4512b10a"]]);export{x as __pageData,E as default};

View File

@@ -0,0 +1 @@
import{M as o}from"./chunks/Mockup.ce849057.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as d,o as e,c,a as s,g as r,u as v,f as l,t as b,_ as D,d as F,p as y,h as i}from"./app.06d4fed4.js";const C=t=>(y("data-v-4512b10a"),t=t(),i(),t),u=C(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),h=F("",3),x=JSON.parse('{"title":"Theming","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/theming.md","lastUpdated":1658677066000}'),m={name:"guide/theming.md"},_=Object.assign(m,{setup(t){const a=d(!0);return(A,n)=>(e(),c("div",null,[u,s("p",null,[(e(),r(o,{style:{width:"100%",height:"400px"},screen:v(p),phoneClr:a.value?"#fff":"#222",key:a.value},null,8,["screen","phoneClr"]))]),s("div",null,[s("button",{class:"button",onClick:n[0]||(n[0]=g=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+b(a.value?"dark":"light"),1)]),h]))}});var E=D(_,[["__scopeId","data-v-4512b10a"]]);export{x as __pageData,E as default};

View File

@@ -29,4 +29,4 @@ import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> videoElement </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> vidReady </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">ref</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658676489000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
<span class="line"></span></code></pre></div>`,6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658677066000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};

View File

@@ -1 +1 @@
import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as s,g as c,i as r,u as i,f as D,d as y}from"./app.06d4fed4.js";var F="/vue-three-d-mockup/assets/screen.273a9703.mp4";const d=s("h1",{id:"video-as-screen",tabindex:"-1"},[D("Video as screen "),s("a",{class:"header-anchor",href:"#video-as-screen","aria-hidden":"true"},"#")],-1),C=["src"],A=y("",6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658676489000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};
import{M as p}from"./chunks/Mockup.ce849057.js";import{r as o,o as l,c as t,a as s,g as c,i as r,u as i,f as D,d as y}from"./app.06d4fed4.js";var F="/vue-three-d-mockup/assets/screen.273a9703.mp4";const d=s("h1",{id:"video-as-screen",tabindex:"-1"},[D("Video as screen "),s("a",{class:"header-anchor",href:"#video-as-screen","aria-hidden":"true"},"#")],-1),C=["src"],A=y("",6),_=JSON.parse('{"title":"Video as screen","description":"","frontmatter":{},"headers":[{"level":2,"title":"Code example","slug":"code-example"}],"relativePath":"guide/video-as-screen.md","lastUpdated":1658677066000}'),u={name:"guide/video-as-screen.md"},g=Object.assign(u,{setup(m){const n=o(null),a=o(!1);return(v,e)=>(l(),t("div",null,[d,s("p",null,[a.value?(l(),c(p,{key:0,style:{width:"100%",height:"400px"},screen:n.value},null,8,["screen"])):r("",!0)]),s("div",null,[s("video",{src:i(F),ref_key:"videoElement",ref:n,onCanplay:e[0]||(e[0]=f=>a.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",opacity:"0","pointer-events":"none"}},null,40,C)]),A]))}});export{_ as __pageData,g as default};

View File

@@ -1 +0,0 @@
import{M as e}from"./chunks/Mockup.ce849057.js";import{s as t}from"./chunks/screen.fc899083.js";import{o as a,c as d,a as s,b as _,u as c,_ as o,d as n}from"./app.06d4fed4.js";const r=n('<h1 class="heading" data-v-6d4ec9dd> Vue 3D Mockup </h1><p class="tagline" data-v-6d4ec9dd> Create interactive 3D mockups with ease. </p><div class="buttons" data-v-6d4ec9dd><a href="/vue-three-d-mockup/guide/" class="buttons__button" data-v-6d4ec9dd> Guide </a><a href="https://github.com/anatolykopyl/vue-three-d-mockup" class="buttons__button buttons__button--secondary" data-v-6d4ec9dd> Github </a></div>',3),f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md","lastUpdated":1658676489000}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(a(),d("div",null,[s("main",null,[_(e,{class:"mockup",screen:c(t)},null,8,["screen"]),r])]))}});var k=o(i,[["__scopeId","data-v-6d4ec9dd"]]);export{f as __pageData,k as default};

View File

@@ -1 +0,0 @@
import{M as e}from"./chunks/Mockup.ce849057.js";import{s as t}from"./chunks/screen.fc899083.js";import{o as a,c as d,a as s,b as _,u as c,_ as o,d as n}from"./app.06d4fed4.js";const r=n("",3),f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md","lastUpdated":1658676489000}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(a(),d("div",null,[s("main",null,[_(e,{class:"mockup",screen:c(t)},null,8,["screen"]),r])]))}});var k=o(i,[["__scopeId","data-v-6d4ec9dd"]]);export{f as __pageData,k as default};

View File

@@ -0,0 +1 @@
import{M as e}from"./chunks/Mockup.ce849057.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as t,c as s,a as _,b as o,u as d,_ as c,d as n}from"./app.06d4fed4.js";const r=n('<h1 class="heading" data-v-26a94d12> Vue 3D Mockup </h1><p class="tagline" data-v-26a94d12> Create interactive 3D mockups with ease. </p><div class="buttons" data-v-26a94d12><a href="/vue-three-d-mockup/guide/" class="buttons__button" data-v-26a94d12> Guide </a><a href="https://github.com/anatolykopyl/vue-three-d-mockup" class="buttons__button buttons__button--secondary" data-v-26a94d12> Github </a></div>',3),f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md","lastUpdated":1658677066000}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:d(a)},null,8,["screen"]),r])]))}});var k=c(i,[["__scopeId","data-v-26a94d12"]]);export{f as __pageData,k as default};

View File

@@ -0,0 +1 @@
import{M as e}from"./chunks/Mockup.ce849057.js";import{s as a}from"./chunks/screen.fc899083.js";import{o as t,c as s,a as _,b as o,u as d,_ as c,d as n}from"./app.06d4fed4.js";const r=n("",3),f=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home"},"headers":[],"relativePath":"index.md","lastUpdated":1658677066000}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(e,{class:"mockup",screen:d(a)},null,8,["screen"]),r])]))}});var k=c(i,[["__scopeId","data-v-26a94d12"]]);export{f as __pageData,k as default};

File diff suppressed because one or more lines are too long