deploy: 5fb213d148

assets/guide_index.md.4946aaa4.js

@@ -1,4 +1,4 @@
-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(`<h1 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-hidden="true">#</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h2><div class="language-bash"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm install vue-three-d-mockup</span></span>
+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(`<h1 id="introduction" tabindex="-1">Introduction <a class="header-anchor" href="#introduction" aria-hidden="true">#</a></h1><h2 id="installation" tabindex="-1">Installation <a class="header-anchor" href="#installation" aria-hidden="true">#</a></h2><div class="language-bash"><span class="copy"></span><pre><code><span class="line"><span style="color:#A6ACCD;">npm install vue-three-d-mockup</span></span>
 <span class="line"></span></code></pre></div><h2 id="simple-usage-example" tabindex="-1">Simple usage example <a class="header-anchor" href="#simple-usage-example" aria-hidden="true">#</a></h2>`,4),r=s(`<p><code>screen.png</code> is a static asset in the public folder.</p><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:#C3E88D;">screen.png</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>
@@ -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":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};
+<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":1676667111000}'),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.4946aaa4.lean.js

@@ -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":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};
+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":1676667111000}'),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.224315f1.js

@@ -1,4 +1,4 @@
-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(`<h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" 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{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(`<h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" 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>
 <span class="line"><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:#89DDFF;">[</span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">, </span><span style="color:#A6ACCD;">screenImage</span><span style="color:#89DDFF;">]</span><span style="color:#89DDFF;">&quot;</span></span>
 <span class="line"><span style="color:#89DDFF;">    :</span><span style="color:#C792EA;">position</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[</span></span>
@@ -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":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};
+<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":1676667111000}'),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.224315f1.lean.js

@@ -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":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};
+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":1676667111000}'),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.fab33777.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":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};
+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":1676667111000}'),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.fab33777.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":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};
+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":1676667111000}'),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.23516bf8.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":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>
+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":1676667111000}'),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.23516bf8.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":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};
+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":1676667111000}'),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.139da6a3.js

@@ -1,15 +0,0 @@
-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};

assets/guide_theming.md.139da6a3.lean.js

@@ -1 +0,0 @@
-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};

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

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

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

@@ -1,4 +1,4 @@
-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(`<p>The <code>screen</code> prop accepts a <code>video</code> element.</p><p>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the code example to see how to do this.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video will not be visible on the model if it is set to <code>display: none</code> or <code>visibility: hidden</code>. Use <code>opacity: 0; pointer-events: none;</code> on the <code>&lt;video&gt;</code> element for best browser compatability.</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen. Some browsers check for viewport intersection so it may be best to set the video position to <code>fixed</code>.</p></div><h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" 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{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(`<p>The <code>screen</code> prop accepts a <code>video</code> element.</p><p>The <code>screen</code> prop is unreactive, so when using it as a video it&#39;s important to only render the <code>Mockup</code> element when the video is loaded. Check out the code example to see how to do this.</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video will not be visible on the model if it is set to <code>display: none</code> or <code>visibility: hidden</code>. Use <code>opacity: 0; pointer-events: none;</code> on the <code>&lt;video&gt;</code> element for best browser compatability.</p></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen. Some browsers check for viewport intersection so it may be best to set the video position to <code>fixed</code>.</p></div><h2 id="code-example" tabindex="-1">Code example <a class="header-anchor" href="#code-example" 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>
 <span class="line"><span style="color:#89DDFF;">    </span><span style="color:#C792EA;">v-if</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;">&quot;</span></span>
 <span class="line"><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;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
@@ -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":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};
+<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":1676667111000}'),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.f76daff7.lean.js

@@ -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":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};
+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":1676667111000}'),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.22f881e8.js

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

assets/index.md.22f881e8.lean.js

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

assets/index.md.aa2f0de7.js

@@ -1 +0,0 @@
-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};

assets/index.md.aa2f0de7.lean.js

@@ -1 +0,0 @@
-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};

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.4245d65e.css">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.ce849057.js">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.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.fec8e219.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_index.md.4946aaa4.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="2022-07-24T15:37:46.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\":\"fec8e219\",\"guide_multiple-mockups.md\":\"bbf319eb\",\"guide_props.md\":\"3d12cef2\",\"guide_screen-from-assets.md\":\"d8d2acd1\",\"guide_theming.md\":\"139da6a3\",\"guide_video-as-screen.md\":\"a1b1b910\",\"index.md\":\"aa2f0de7\"}")</script>
+<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:51:51.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\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</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.4245d65e.css">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.ce849057.js">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.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.bbf319eb.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_multiple-mockups.md.224315f1.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="2022-07-24T15:37:46.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\":\"fec8e219\",\"guide_multiple-mockups.md\":\"bbf319eb\",\"guide_props.md\":\"3d12cef2\",\"guide_screen-from-assets.md\":\"d8d2acd1\",\"guide_theming.md\":\"139da6a3\",\"guide_video-as-screen.md\":\"a1b1b910\",\"index.md\":\"aa2f0de7\"}")</script>
+<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:51:51.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\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</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.4245d65e.css">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.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.d8d2acd1.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_screen-from-assets.md.23516bf8.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="2022-07-24T15:37:46.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\":\"fec8e219\",\"guide_multiple-mockups.md\":\"bbf319eb\",\"guide_props.md\":\"3d12cef2\",\"guide_screen-from-assets.md\":\"d8d2acd1\",\"guide_theming.md\":\"139da6a3\",\"guide_video-as-screen.md\":\"a1b1b910\",\"index.md\":\"aa2f0de7\"}")</script>
+<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:51:51.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\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</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.4245d65e.css">
-    <link rel="modulepreload" href="/vue-three-d-mockup/assets/chunks/Mockup.ce849057.js">
+    <link rel="stylesheet" href="/vue-three-d-mockup/assets/style.1117dbd9.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.a1b1b910.lean.js">
+    <link rel="modulepreload" href="/vue-three-d-mockup/assets/guide_video-as-screen.md.f76daff7.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="2022-07-24T15:37:46.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\":\"fec8e219\",\"guide_multiple-mockups.md\":\"bbf319eb\",\"guide_props.md\":\"3d12cef2\",\"guide_screen-from-assets.md\":\"d8d2acd1\",\"guide_theming.md\":\"139da6a3\",\"guide_video-as-screen.md\":\"a1b1b910\",\"index.md\":\"aa2f0de7\"}")</script>
+<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:51:51.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\":\"4946aaa4\",\"guide_multiple-mockups.md\":\"224315f1\",\"guide_props.md\":\"fab33777\",\"guide_screen-from-assets.md\":\"23516bf8\",\"guide_theming.md\":\"867cf905\",\"guide_video-as-screen.md\":\"f76daff7\",\"index.md\":\"22f881e8\"}")</script>
     <script type="module" async src="/vue-three-d-mockup/assets/app.06d4fed4.js"></script>
     
   </body>

hashmap.json

@@ -1 +1 @@
-{"guide_index.md":"fec8e219","guide_multiple-mockups.md":"bbf319eb","guide_props.md":"3d12cef2","guide_screen-from-assets.md":"d8d2acd1","guide_theming.md":"139da6a3","guide_video-as-screen.md":"a1b1b910","index.md":"aa2f0de7"}
+{"guide_index.md":"4946aaa4","guide_multiple-mockups.md":"224315f1","guide_props.md":"fab33777","guide_screen-from-assets.md":"23516bf8","guide_theming.md":"867cf905","guide_video-as-screen.md":"f76daff7","index.md":"22f881e8"}