anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 04:45:09 +00:00
Code Issues Projects Releases Wiki Activity

deploy: dce2d303ab

Browse Source
This commit is contained in:
anatolykopyl
2022-07-24 15:28:50 +00:00
parent d77831f698
commit 631c658874
33 changed files with 340 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
404.html
View File

File diff suppressed because one or more lines are too long

1
assets/app.06d4fed4.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/app.b6ea30b2.js
View File

File diff suppressed because one or more lines are too long

4
assets/chunks/screen.f0e1a01d.js → assets/chunks/Mockup.ce849057.js
View File

File diff suppressed because one or more lines are too long

1
assets/chunks/screen.fc899083.js Normal file
View File

@@ -0,0 +1 @@
var e="/vue-three-d-mockup/assets/screen.13e2504d.png";export{e as s};

76
assets/guide.md.eb0895a6.js
View File

@@ -1,76 +0,0 @@
import{M as l,s as e}from"./chunks/screen.f0e1a01d.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.b6ea30b2.js";var d="/vue-three-d-mockup/assets/screen.273a9703.mp4";const C=n(`<h1 id="guide" tabindex="-1">Guide <a class="header-anchor" href="#guide" 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="usage" tabindex="-1">Usage <a class="header-anchor" href="#usage" aria-hidden="true">#</a></h2>`,4),h=n(`<h3 id="simple-example" tabindex="-1">Simple example <a class="header-anchor" href="#simple-example" aria-hidden="true">#</a></h3><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>
<span class="line"></span>
<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><h3 id="using-assets-as-the-screen" tabindex="-1">Using assets as the screen <a class="header-anchor" href="#using-assets-as-the-screen" aria-hidden="true">#</a></h3><ul><li><h4 id="in-vite-powered-projects" tabindex="-1">In vite powered projects <a class="header-anchor" href="#in-vite-powered-projects" aria-hidden="true">#</a></h4></li></ul><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>
<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;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><ul><li><h4 id="in-vue-cli-powered-projects" tabindex="-1">In vue-cli powered projects <a class="header-anchor" href="#in-vue-cli-powered-projects" aria-hidden="true">#</a></h4></li></ul><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:#82AAFF;">require</span><span style="color:#89DDFF;">(</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 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>
<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><h3 id="multiple-phones" tabindex="-1">Multiple phones <a class="header-anchor" href="#multiple-phones" aria-hidden="true">#</a></h3>`,9),u=n(`<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>
<span class="line"><span style="color:#89DDFF;"> {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;"> },</span></span>
<span class="line"><span style="color:#89DDFF;"> {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">x</span><span style="color:#89DDFF;">: </span><span style="color:#F78C6C;">50</span></span>
<span class="line"><span style="color:#89DDFF;"> },</span></span>
<span class="line"><span style="color:#89DDFF;"> ]</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">rotation</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">[{}, {</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">y</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.3</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#F07178;">z</span><span style="color:#89DDFF;">: -</span><span style="color:#F78C6C;">0.06</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;"> }]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span></span>
<span class="line"><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>
<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;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><h3 id="video" tabindex="-1">Video <a class="header-anchor" href="#video" aria-hidden="true">#</a></h3>`,2),A=["src"],g=n(`<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>
<span class="line"><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">video</span></span>
<span class="line"><span style="color:#89DDFF;"> :</span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">screenVideo</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">ref</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">videoElement</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> @</span><span style="color:#C792EA;">canplay</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">vidReady</span><span style="color:#89DDFF;"> = </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">muted</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">autoplay</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">loop</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#C3E88D;"> position: fixed;</span></span>
<span class="line"><span style="color:#C3E88D;"> top: 0;</span></span>
<span class="line"><span style="color:#C3E88D;"> left: 0;</span></span>
<span class="line"><span style="color:#C3E88D;"> visibility: hidden;</span></span>
<span class="line"><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> &gt;&lt;/</span><span style="color:#F07178;">video</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>
<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;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ref</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </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</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;"> 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;"> screenVideo </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.mp4</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<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><h2 id="avaliable-props" tabindex="-1">Avaliable props <a class="header-anchor" href="#avaliable-props" aria-hidden="true">#</a></h2><table><thead><tr><th>Prop</th><th>Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>screen</code></td><td>String | Element | Array</td><td><code>true</code></td><td>none</td><td>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. When using the latter there are <a href="#caveats">caveats</a>. Can also be an array of any of the options above.</td></tr><tr><td><code>lightClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the light as a CSS-style string.</td></tr><tr><td><code>phoneClr</code></td><td>String</td><td><code>false</code></td><td><code>&quot;white&quot;</code></td><td>Color of the phone as a CSS-style string.</td></tr><tr><td><code>position</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: 0, y: 0, z: 0 }</code></td><td>The position of the phone. Can also be an array if multiple screens specified.</td></tr><tr><td><code>rotation</code></td><td>Object | Array</td><td><code>false</code></td><td><code>{ x: -0.2, y: 0.3, z: 0.06 }</code></td><td>The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.</td></tr></tbody></table><h2 id="caveats" tabindex="-1">Caveats <a class="header-anchor" href="#caveats" aria-hidden="true">#</a></h2><ul><li>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 examples above to see how to do this.</li><li>The video on the model will not be shown if the original <code>&lt;video&gt;</code> element is hidden with <code>display: none</code>, so use <code>visibility: hidden</code> instead.</li><li>The video may not be autoplaying if the original <code>&lt;video&gt;</code> element is scrolled off screen.</li><li>Even with the mentioned above workarounds, the video may not be working in Safari.</li></ul>`,5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md","lastUpdated":1658667004000}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

1
assets/guide.md.eb0895a6.lean.js
View File

@@ -1 +0,0 @@
import{M as l,s as e}from"./chunks/screen.f0e1a01d.js";import{r as c,o as r,c as F,a as s,b as D,u as a,d as i,e as y,f as n}from"./app.b6ea30b2.js";var d="/vue-three-d-mockup/assets/screen.273a9703.mp4";const C=n("",4),h=n("",9),u=n("",2),A=["src"],g=n("",5),x=JSON.parse('{"title":"Guide","description":"","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation"},{"level":2,"title":"Usage","slug":"usage"},{"level":3,"title":"Simple example","slug":"simple-example"},{"level":3,"title":"Using assets as the screen","slug":"using-assets-as-the-screen"},{"level":3,"title":"Multiple phones","slug":"multiple-phones"},{"level":3,"title":"Video","slug":"video"},{"level":2,"title":"Avaliable props","slug":"avaliable-props"},{"level":2,"title":"Caveats","slug":"caveats"}],"relativePath":"guide.md","lastUpdated":1658667004000}'),v={name:"guide.md"},q=Object.assign(v,{setup(m){const p=c(null),o=c(!1);return(f,t)=>(r(),F("div",null,[C,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:a(e)},null,8,["screen"])]),h,s("p",null,[D(l,{style:{width:"100%",height:"400px"},screen:[a(e),a(e)],position:[{x:-50},{x:50}],rotation:[{},{y:-.3,z:-.06}]},null,8,["screen","rotation"])]),u,s("p",null,[o.value?(r(),i(l,{key:0,style:{width:"100%",height:"400px"},screen:p.value},null,8,["screen"])):y("",!0)]),s("div",null,[s("video",{src:a(d),ref_key:"videoElement",ref:p,onCanplay:t[0]||(t[0]=_=>o.value=!0),muted:"",autoplay:"",loop:"",style:{position:"fixed",top:"0",left:"0",visibility:"hidden"}},null,40,A)]),g]))}});export{x as __pageData,q as default};

9
assets/guide_index.md.ed4c9fae.js Normal file
View File

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

1
assets/guide_index.md.ed4c9fae.lean.js Normal file
View File

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

23
assets/guide_multiple-mockups.md.92412f25.js Normal file
View File

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

1
assets/guide_multiple-mockups.md.92412f25.lean.js Normal file
View File

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

1
assets/guide_props.md.4662ed06.js Normal file
View File

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

1
assets/guide_props.md.4662ed06.lean.js Normal file
View File

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

16
assets/guide_screen-from-assets.md.132f12ad.js Normal file
View File

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

1
assets/guide_screen-from-assets.md.132f12ad.lean.js Normal file
View File

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

15
assets/guide_theming.md.063681cb.js Normal file
View File

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

1
assets/guide_theming.md.063681cb.lean.js Normal file
View File

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

32
assets/guide_video-as-screen.md.26864a15.js Normal file
View File

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

1
assets/guide_video-as-screen.md.26864a15.lean.js Normal file
View File

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

1
assets/index.md.6a67d774.js
View File

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

1
assets/index.md.6a67d774.lean.js
View File

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

1
assets/index.md.731a7e0e.js Normal file
View File

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

1
assets/index.md.731a7e0e.lean.js Normal file
View File

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

2
assets/style.fa589dce.css → assets/style.94aee370.css
View File

File diff suppressed because one or more lines are too long

96
guide.html
View File

File diff suppressed because one or more lines are too long

30
guide/index.html Normal file
View File

File diff suppressed because one or more lines are too long

44
guide/multiple-mockups.html Normal file
View File

File diff suppressed because one or more lines are too long

20
guide/props.html Normal file
View File

File diff suppressed because one or more lines are too long

35
guide/screen-from-assets.html Normal file
View File

File diff suppressed because one or more lines are too long

36
guide/theming.html Normal file
View File

File diff suppressed because one or more lines are too long

52
guide/video-as-screen.html Normal file
View File

File diff suppressed because one or more lines are too long

2
hashmap.json
View File

@@ -1 +1 @@
{"guide.md":"eb0895a6","index.md":"6a67d774"}
{"guide_index.md":"ed4c9fae","guide_multiple-mockups.md":"92412f25","guide_props.md":"4662ed06","guide_screen-from-assets.md":"132f12ad","guide_theming.md":"063681cb","guide_video-as-screen.md":"26864a15","index.md":"731a7e0e"}

15
index.html
View File

File diff suppressed because one or more lines are too long