deploy: d2e5b83ad9

assets/guide_index.md.5522df1a.js

@@ -6,4 +6,4 @@ import{M as a}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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":1676666961000}'),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};

assets/guide_index.md.5522df1a.lean.js

@@ -1 +1 @@
-import{M as a}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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.5c49fc9b.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":1676666961000}'),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};

assets/guide_multiple-mockups.md.49a01da7.js

@@ -20,4 +20,4 @@ import{M as l}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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":1676666961000}'),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};

assets/guide_multiple-mockups.md.49a01da7.lean.js

@@ -1 +1 @@
-import{M as l}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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.5c49fc9b.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":1676666961000}'),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};

assets/guide_props.md.9117c1b5.js

@@ -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":1676666925000}'),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":1676666961000}'),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};

assets/guide_props.md.9117c1b5.lean.js

@@ -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":1676666925000}'),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":1676666961000}'),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};

assets/guide_screen-from-assets.md.dc47062a.js

@@ -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":1676666925000}'),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":1676666961000}'),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>

assets/guide_screen-from-assets.md.dc47062a.lean.js

@@ -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":1676666925000}'),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":1676666961000}'),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};

assets/guide_theming.md.20e55f57.js

@@ -0,0 +1,15 @@
+import{M as o}from"./chunks/Mockup.5c49fc9b.js";import{s as p}from"./chunks/screen.fc899083.js";import{r as b,o as e,c as d,a as s,g as c,u as r,f as l,t as f,_ as v,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-6f8b1b4a"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[l("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D(`<p data-v-6f8b1b4a>The <code data-v-6f8b1b4a>phoneClr</code> and <code data-v-6f8b1b4a>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-6f8b1b4a>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-6f8b1b4a>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-6f8b1b4a>#</a></h2><div class="language-vue" data-v-6f8b1b4a><span class="copy" data-v-6f8b1b4a></span><pre data-v-6f8b1b4a><code data-v-6f8b1b4a><span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>&lt;</span><span style="color:#F07178;" data-v-6f8b1b4a>template</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&gt;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#A6ACCD;" data-v-6f8b1b4a>  </span><span style="color:#89DDFF;" data-v-6f8b1b4a>&lt;</span><span style="color:#FFCB6B;" data-v-6f8b1b4a>Mockup</span><span style="color:#89DDFF;" data-v-6f8b1b4a> </span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>    </span><span style="color:#C792EA;" data-v-6f8b1b4a>screen</span><span style="color:#89DDFF;" data-v-6f8b1b4a>=</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&quot;</span><span style="color:#C3E88D;" data-v-6f8b1b4a>screen.png</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&quot;</span><span style="color:#89DDFF;" data-v-6f8b1b4a> </span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>    :</span><span style="color:#C792EA;" data-v-6f8b1b4a>phoneClr</span><span style="color:#89DDFF;" data-v-6f8b1b4a>=</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&quot;</span><span style="color:#A6ACCD;" data-v-6f8b1b4a>darkTheme</span><span style="color:#89DDFF;" data-v-6f8b1b4a> ? </span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#C3E88D;" data-v-6f8b1b4a>#fff</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#89DDFF;" data-v-6f8b1b4a> : </span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#C3E88D;" data-v-6f8b1b4a>#222</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;&quot;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>    :</span><span style="color:#C792EA;" data-v-6f8b1b4a>key</span><span style="color:#89DDFF;" data-v-6f8b1b4a>=</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&quot;</span><span style="color:#A6ACCD;" data-v-6f8b1b4a>darkTheme</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&quot;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>  /&gt;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>&lt;/</span><span style="color:#F07178;" data-v-6f8b1b4a>template</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&gt;</span></span>
+<span class="line" data-v-6f8b1b4a></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>&lt;</span><span style="color:#F07178;" data-v-6f8b1b4a>script</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#C792EA;" data-v-6f8b1b4a>setup</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&gt;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;font-style:italic;" data-v-6f8b1b4a>import</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#89DDFF;" data-v-6f8b1b4a>{</span><span style="color:#F07178;" data-v-6f8b1b4a> </span><span style="color:#A6ACCD;" data-v-6f8b1b4a>ref</span><span style="color:#F07178;" data-v-6f8b1b4a> </span><span style="color:#89DDFF;" data-v-6f8b1b4a>}</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#89DDFF;font-style:italic;" data-v-6f8b1b4a>from</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#C3E88D;" data-v-6f8b1b4a>vue</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#89DDFF;" data-v-6f8b1b4a>;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;font-style:italic;" data-v-6f8b1b4a>import</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-6f8b1b4a>from</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#C3E88D;" data-v-6f8b1b4a>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&#39;</span><span style="color:#89DDFF;" data-v-6f8b1b4a>;</span></span>
+<span class="line" data-v-6f8b1b4a></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#C792EA;" data-v-6f8b1b4a>const</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> darkTheme </span><span style="color:#89DDFF;" data-v-6f8b1b4a>=</span><span style="color:#A6ACCD;" data-v-6f8b1b4a> </span><span style="color:#82AAFF;" data-v-6f8b1b4a>ref</span><span style="color:#A6ACCD;" data-v-6f8b1b4a>(</span><span style="color:#FF9CAC;" data-v-6f8b1b4a>true</span><span style="color:#A6ACCD;" data-v-6f8b1b4a>)</span><span style="color:#89DDFF;" data-v-6f8b1b4a>;</span></span>
+<span class="line" data-v-6f8b1b4a><span style="color:#89DDFF;" data-v-6f8b1b4a>&lt;/</span><span style="color:#F07178;" data-v-6f8b1b4a>script</span><span style="color:#89DDFF;" data-v-6f8b1b4a>&gt;</span></span>
+<span class="line" data-v-6f8b1b4a></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":1676666961000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=b(!0);return(_,n)=>(e(),d("div",null,[C,s("p",null,[(e(),c(o,{style:{width:"100%",height:"400px"},screen:r(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]=A=>a.value=!a.value)}," Toggle theme "),l(" Theme: "+f(a.value?"dark":"light"),1)]),u]))}});var E=v(m,[["__scopeId","data-v-6f8b1b4a"]]);export{x as __pageData,E as default};

assets/guide_theming.md.20e55f57.lean.js

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

assets/guide_theming.md.ed654303.js

@@ -1,15 +0,0 @@
-import{M as l}from"./chunks/Mockup.5c49fc9b.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 f,f as e,t as v,_ as b,d as D,p as F,h as y}from"./app.06d4fed4.js";const i=t=>(F("data-v-06f8abd3"),t=t(),y(),t),C=i(()=>s("h1",{id:"theming",tabindex:"-1"},[e("Theming "),s("a",{class:"header-anchor",href:"#theming","aria-hidden":"true"},"#")],-1)),u=D(`<p data-v-06f8abd3>The <code data-v-06f8abd3>phoneClr</code> and <code data-v-06f8abd3>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-06f8abd3>Mockup</code> a key.</p><h2 id="code-example" tabindex="-1" data-v-06f8abd3>Code example <a class="header-anchor" href="#code-example" aria-hidden="true" data-v-06f8abd3>#</a></h2><div class="language-vue" data-v-06f8abd3><span class="copy" data-v-06f8abd3></span><pre data-v-06f8abd3><code data-v-06f8abd3><span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>&lt;</span><span style="color:#F07178;" data-v-06f8abd3>template</span><span style="color:#89DDFF;" data-v-06f8abd3>&gt;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#A6ACCD;" data-v-06f8abd3>  </span><span style="color:#89DDFF;" data-v-06f8abd3>&lt;</span><span style="color:#FFCB6B;" data-v-06f8abd3>Mockup</span><span style="color:#89DDFF;" data-v-06f8abd3> </span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>    </span><span style="color:#C792EA;" data-v-06f8abd3>screen</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>&quot;</span><span style="color:#C3E88D;" data-v-06f8abd3>screen.png</span><span style="color:#89DDFF;" data-v-06f8abd3>&quot;</span><span style="color:#89DDFF;" data-v-06f8abd3> </span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>    :</span><span style="color:#C792EA;" data-v-06f8abd3>phoneClr</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>&quot;</span><span style="color:#A6ACCD;" data-v-06f8abd3>darkTheme</span><span style="color:#89DDFF;" data-v-06f8abd3> ? </span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#C3E88D;" data-v-06f8abd3>#fff</span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#89DDFF;" data-v-06f8abd3> : </span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#C3E88D;" data-v-06f8abd3>#222</span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;&quot;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>    :</span><span style="color:#C792EA;" data-v-06f8abd3>key</span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#89DDFF;" data-v-06f8abd3>&quot;</span><span style="color:#A6ACCD;" data-v-06f8abd3>darkTheme</span><span style="color:#89DDFF;" data-v-06f8abd3>&quot;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>  /&gt;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>&lt;/</span><span style="color:#F07178;" data-v-06f8abd3>template</span><span style="color:#89DDFF;" data-v-06f8abd3>&gt;</span></span>
-<span class="line" data-v-06f8abd3></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>&lt;</span><span style="color:#F07178;" data-v-06f8abd3>script</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#C792EA;" data-v-06f8abd3>setup</span><span style="color:#89DDFF;" data-v-06f8abd3>&gt;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>import</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>{</span><span style="color:#F07178;" data-v-06f8abd3> </span><span style="color:#A6ACCD;" data-v-06f8abd3>ref</span><span style="color:#F07178;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>}</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>from</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#C3E88D;" data-v-06f8abd3>vue</span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>import</span><span style="color:#A6ACCD;" data-v-06f8abd3> Mockup </span><span style="color:#89DDFF;font-style:italic;" data-v-06f8abd3>from</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#C3E88D;" data-v-06f8abd3>vue-three-d-mockup</span><span style="color:#89DDFF;" data-v-06f8abd3>&#39;</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
-<span class="line" data-v-06f8abd3></span>
-<span class="line" data-v-06f8abd3><span style="color:#C792EA;" data-v-06f8abd3>const</span><span style="color:#A6ACCD;" data-v-06f8abd3> darkTheme </span><span style="color:#89DDFF;" data-v-06f8abd3>=</span><span style="color:#A6ACCD;" data-v-06f8abd3> </span><span style="color:#82AAFF;" data-v-06f8abd3>ref</span><span style="color:#A6ACCD;" data-v-06f8abd3>(</span><span style="color:#FF9CAC;" data-v-06f8abd3>true</span><span style="color:#A6ACCD;" data-v-06f8abd3>)</span><span style="color:#89DDFF;" data-v-06f8abd3>;</span></span>
-<span class="line" data-v-06f8abd3><span style="color:#89DDFF;" data-v-06f8abd3>&lt;/</span><span style="color:#F07178;" data-v-06f8abd3>script</span><span style="color:#89DDFF;" data-v-06f8abd3>&gt;</span></span>
-<span class="line" data-v-06f8abd3></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":1676666925000}'),h={name:"guide/theming.md"},m=Object.assign(h,{setup(t){const a=p(!0);return(_,n)=>(d(),c("div",null,[C,s("p",null,[(d(),r(l,{style:{width:"100%",height:"400px"},screen:f(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]=A=>a.value=!a.value)}," Toggle theme "),e(" Theme: "+v(a.value?"dark":"light"),1)]),u]))}});var E=b(m,[["__scopeId","data-v-06f8abd3"]]);export{x as __pageData,E as default};

assets/guide_theming.md.ed654303.lean.js

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

assets/guide_video-as-screen.md.e6ce2840.js

@@ -29,4 +29,4 @@ import{M as p}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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":1676666961000}'),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};

assets/guide_video-as-screen.md.e6ce2840.lean.js

@@ -1 +1 @@
-import{M as p}from"./chunks/Mockup.5c49fc9b.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":1676666925000}'),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.5c49fc9b.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":1676666961000}'),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};

assets/index.md.4e8a773e.js

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

assets/index.md.4e8a773e.lean.js

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

assets/index.md.c3469036.js

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

assets/index.md.c3469036.lean.js

@@ -0,0 +1 @@
+import{M as a}from"./chunks/Mockup.5c49fc9b.js";import{s as e}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":1676666961000}'),u={name:"index.md"},i=Object.assign(u,{setup(l){return(p,m)=>(t(),s("div",null,[_("main",null,[o(a,{class:"mockup",screen:d(e)},null,8,["screen"]),r])]))}});var k=c(i,[["__scopeId","data-v-a45b4ad2"]]);export{f as __pageData,k as default};

guide/index.html

@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Introduction | Vue 3D Mockup</title>
     <meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
-    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.b1355a34.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.fc899083.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_index.md.18ac5963.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_index.md.5522df1a.lean.js">
     
     <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
   </head>
@@ -22,8 +22,8 @@
 <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></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:48:45.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><!----></div><div class="pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Screen from assets</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
+<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><!----></div><div class="pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Screen from assets</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"18ac5963\",\"guide_multiple-mockups.md\":\"43c754e5\",\"guide_props.md\":\"93160904\",\"guide_screen-from-assets.md\":\"c3495c6d\",\"guide_theming.md\":\"ed654303\",\"guide_video-as-screen.md\":\"8e8290b1\",\"index.md\":\"4e8a773e\"}")</script>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
     
   </body>

guide/multiple-mockups.html

@@ -5,11 +5,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Multiple mockups | Vue 3D Mockup</title>
     <meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
-    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.b1355a34.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/screen.fc899083.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_multiple-mockups.md.43c754e5.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_multiple-mockups.md.49a01da7.lean.js">
     
     <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
   </head>
@@ -36,8 +36,8 @@
 <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></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:48:45.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Video as screen</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/theming.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Theming</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
+<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Video as screen</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/theming.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Theming</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"18ac5963\",\"guide_multiple-mockups.md\":\"43c754e5\",\"guide_props.md\":\"93160904\",\"guide_screen-from-assets.md\":\"c3495c6d\",\"guide_theming.md\":\"ed654303\",\"guide_video-as-screen.md\":\"8e8290b1\",\"index.md\":\"4e8a773e\"}")</script>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
     
   </body>

guide/screen-from-assets.html

@@ -5,9 +5,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Screen image from assets folder | Vue 3D Mockup</title>
     <meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
-    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.b1355a34.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_screen-from-assets.md.c3495c6d.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_screen-from-assets.md.dc47062a.lean.js">
     
     <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
   </head>
@@ -27,8 +27,8 @@
 <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></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:48:45.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Introduction</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Video as screen</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
+<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Introduction</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/video-as-screen.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Video as screen</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"18ac5963\",\"guide_multiple-mockups.md\":\"43c754e5\",\"guide_props.md\":\"93160904\",\"guide_screen-from-assets.md\":\"c3495c6d\",\"guide_theming.md\":\"ed654303\",\"guide_video-as-screen.md\":\"8e8290b1\",\"index.md\":\"4e8a773e\"}")</script>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
     
   </body>

guide/video-as-screen.html

@@ -5,10 +5,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>Video as screen | Vue 3D Mockup</title>
     <meta name="description" content="📱 A 3D phone mockup component to showcase your apps">
-    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.b1355a34.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.8cc43a03.css">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.5c49fc9b.js">
     <link rel="modulepreload" href="/vue-three-d-mockup/assets/app.06d4fed4.js">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_video-as-screen.md.8e8290b1.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_video-as-screen.md.e6ce2840.lean.js">
     
     <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
   </head>
@@ -44,8 +44,8 @@
 <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></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:48:45.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Screen from assets</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/multiple-mockups.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Multiple mockups</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
+<span class="line"></span></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-79ca2460 data-v-04568844><div class="edit-info" data-v-04568844><!----><div class="last-updated" data-v-04568844><p class="VPLastUpdated" data-v-04568844 data-v-0ce8c960>Last updated: <time datatime="2023-02-17T20:49:21.000Z" data-v-0ce8c960></time></p></div></div><div class="prev-next" data-v-04568844><div class="pager" data-v-04568844><a class="pager-link prev" href="/vue-three-d-mockup/guide/screen-from-assets.html" data-v-04568844><span class="desc" data-v-04568844>Previous page</span><span class="title" data-v-04568844>Screen from assets</span></a></div><div class="has-prev pager" data-v-04568844><a class="pager-link next" href="/vue-three-d-mockup/guide/multiple-mockups.html" data-v-04568844><span class="desc" data-v-04568844>Next page</span><span class="title" data-v-04568844>Multiple mockups</span></a></div></div></footer><!--[--><!--]--></div></div></div></div></div><footer class="VPFooter has-sidebar" data-v-6b5fd0a9 data-v-5b331722><div class="container" data-v-5b331722><p class="message" data-v-5b331722>Released under the GPL-3.0 license.</p><p class="copyright" data-v-5b331722></p></div></footer><!--[--><!--]--></div></div>
-    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"18ac5963\",\"guide_multiple-mockups.md\":\"43c754e5\",\"guide_props.md\":\"93160904\",\"guide_screen-from-assets.md\":\"c3495c6d\",\"guide_theming.md\":\"ed654303\",\"guide_video-as-screen.md\":\"8e8290b1\",\"index.md\":\"4e8a773e\"}")</script>
+    <script>__VP_HASH_MAP__ = JSON.parse("{\"guide_index.md\":\"5522df1a\",\"guide_multiple-mockups.md\":\"49a01da7\",\"guide_props.md\":\"9117c1b5\",\"guide_screen-from-assets.md\":\"dc47062a\",\"guide_theming.md\":\"20e55f57\",\"guide_video-as-screen.md\":\"e6ce2840\",\"index.md\":\"c3469036\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
     
   </body>

hashmap.json

@@ -1 +1 @@
-{"guide_index.md":"18ac5963","guide_multiple-mockups.md":"43c754e5","guide_props.md":"93160904","guide_screen-from-assets.md":"c3495c6d","guide_theming.md":"ed654303","guide_video-as-screen.md":"8e8290b1","index.md":"4e8a773e"}
+{"guide_index.md":"5522df1a","guide_multiple-mockups.md":"49a01da7","guide_props.md":"9117c1b5","guide_screen-from-assets.md":"dc47062a","guide_theming.md":"20e55f57","guide_video-as-screen.md":"e6ce2840","index.md":"c3469036"}