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

Split docs into multiple pages

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-07-24 18:28:09 +03:00
parent e0aef1da99
commit dce2d303ab
10 changed files with 313 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/.vitepress/config.js
View File

@@ -8,11 +8,29 @@ export default defineConfig({
lastUpdated: true,
themeConfig: {
nav: [
{ text: 'Guide', link: '/guide' },
{ text: 'Github', link: 'https://github.com/anatolykopyl/vue-three-d-mockup' }
{ text: 'Guide', link: '/guide/' },
],
sidebar: [
{
text: 'Guide',
items: [
{ text: 'Introduction', link: '/guide/' },
{ text: 'Screen from assets', link: '/guide/screen-from-assets' },
{ text: 'Video as screen', link: '/guide/video-as-screen' },
{ text: 'Multiple mockups', link: '/guide/multiple-mockups' },
{ text: 'Theming', link: '/guide/theming' },
{ text: 'Props', link: '/guide/props' },
]
}
],
footer: {
message: 'Released under the GPL-3.0 license.',
}
},
socialLinks: [
{
icon: 'github',
link: 'https://github.com/anatolykopyl/vue-three-d-mockup'
}
]
}
})

191
docs/guide.md
View File

@@ -1,191 +0,0 @@
# Guide
## Installation
```bash
npm install vue-three-d-mockup
```
## Usage
<script setup>
import { ref } from 'vue';
import Mockup from '../src/Mockup.vue'
import screenImage from './assets/screen.png';
import screenVideo from './assets/screen.mp4';
const videoElement = ref(null);
const vidReady = ref(false);
</script>
<Mockup
style="width: 100%; height: 400px;"
:screen="screenImage"
/>
### Simple example
`screen.png` is a static asset in the public folder.
```vue
<template>
<Mockup screen="screen.png" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
</script>
```
### Using assets as the screen
- #### In vite powered projects
```vue
<template>
<Mockup :screen="screenImage" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
import screenImage from './assets/screen.png';
</script>
```
- #### In vue-cli powered projects
```vue
<template>
<Mockup :screen="require('./assets/screen.png')" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
</script>
```
### Multiple phones
<Mockup
style="width: 100%; height: 400px;"
:screen="[screenImage, screenImage]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
/>
```vue
<template>
<Mockup
:screen="[screenImage, screenImage]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
/>
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
import screenImage from './assets/screen.png';
</script>
```
### Video
<Mockup
v-if="vidReady"
style="width: 100%; height: 400px;"
:screen="videoElement"
/>
<div>
<video
:src="screenVideo"
ref="videoElement"
@canplay="vidReady = true"
muted
autoplay
loop
style="
position: fixed;
top: 0;
left: 0;
visibility: hidden;
"
></video>
</div>
```vue
<template>
<Mockup
v-if="vidReady"
:screen="videoElement"
/>
<video
:src="screenVideo"
ref="videoElement"
@canplay="vidReady = true"
muted
autoplay
loop
style="
position: fixed;
top: 0;
left: 0;
visibility: hidden;
"
></video>
</template>
<script setup>
import { ref } from 'vue';
import Mockup from 'vue-three-d-mockup';
import screenVideo from './assets/screen.mp4';
const videoElement = ref(null);
const vidReady = ref(false);
</script>
```
## Avaliable props
| Prop | Type | Required | Default | Description |
| ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `screen` | String \| Element \| Array | `true` | none | Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. When using the latter there are [caveats](#caveats). Can also be an array of any of the options above. |
| `lightClr` | String | `false` | `"white"` | Color of the light as a CSS-style string. |
| `phoneClr` | String | `false` | `"white"` | Color of the phone as a CSS-style string. |
| `position` | Object \| Array | `false` | `{ x: 0, y: 0, z: 0 }` | The position of the phone. Can also be an array if multiple screens specified. | |
| `rotation` | Object \| Array | `false` | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified. |
## Caveats
- The `screen` prop is unreactive, so when using it as a video
it's important to only render the `Mockup` element when the video
is loaded. Check out the examples above to see how
to do this.
- The video on the model will not be shown if the original `<video>`
element is hidden with `display: none`, so use `visibility: hidden`
instead.
- The video may not be autoplaying if the original `<video>` element
is scrolled off screen.
- Even with the mentioned above workarounds, the video may not be
working in Safari.

31
docs/guide/index.md Normal file
View File

@@ -0,0 +1,31 @@
# Introduction
## Installation
```bash
npm install vue-three-d-mockup
```
## Simple usage example
<script setup>
import Mockup from '../../src/Mockup.vue'
import screenImage from '../assets/screen.png';
</script>
<Mockup
style="width: 100%; height: 400px;"
:screen="screenImage"
/>
`screen.png` is a static asset in the public folder.
```vue
<template>
<Mockup screen="screen.png" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
</script>
```

50
docs/guide/multiple-mockups.md Normal file
View File

@@ -0,0 +1,50 @@
# Multiple mockups
<script setup>
import Mockup from '../../src/Mockup.vue'
import screenImage from '../assets/screen.png';
</script>
<Mockup
style="width: 100%; height: 400px;"
:screen="[screenImage, screenImage]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
/>
## Code example
```vue
<template>
<Mockup
:screen="[screenImage, screenImage]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
/>
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
import screenImage from './assets/screen.png';
</script>
```

35
docs/guide/props.md Normal file
View File

@@ -0,0 +1,35 @@
# Props
## `screen`
Path to an image that will be displayed on the phones screen or the `<video>` element displayed on the phones screen. Can also be an array of any of the options above.
- Type: `String | Element | Array[String | Element]`
- Required: `true`
## `lightClr`
Color of the light as a CSS-style string.
- Type: `String`
- Required: `false`
- Default: `"white"`
## `phoneClr`
Color of the phone as a CSS-style string.
- Type: `String`
- Required: `false`
- Default: `"white"`
## `position`
The position of the phone. Can also be an array if multiple screens specified.
- Type: `Object | Array[Object]`
- Required: `false`
- Default: `{ x: 0, y: 0, z: 0 }`
## `rotation`
The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified.
- Type: `Object | Array[Object]`
- Required: `false`
- Default: `{ x: -0.2, y: 0.3, z: 0.06 }`

26
docs/guide/screen-from-assets.md Normal file
View File

@@ -0,0 +1,26 @@
# Screen image from `assets` folder
## In Vite powered projects
```vue
<template>
<Mockup :screen="screenImage" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
import screenImage from './assets/screen.png';
</script>
```
## In Vue CLI powered projects
```vue
<template>
<Mockup :screen="require('./assets/screen.png')" />
</template>
<script setup>
import Mockup from 'vue-three-d-mockup';
</script>
```

62
docs/guide/theming.md Normal file
View File

@@ -0,0 +1,62 @@
# Theming
<script setup>
import { ref } from 'vue';
import Mockup from '../../src/Mockup.vue'
import screenImage from '../assets/screen.png';
const darkTheme = ref(true);
</script>
<Mockup
style="width: 100%; height: 400px;"
:screen="screenImage"
:phoneClr="darkTheme ? '#fff' : '#222'"
:key="darkTheme"
/>
<div>
<button
class="button"
@click="darkTheme = !darkTheme"
>
Toggle theme
</button>
Theme: {{ darkTheme ? 'dark' : 'light' }}
</div>
<style scoped>
.button {
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
background-color: var(--vp-c-brand);
border: 1px solid var(--vp-c-brand);
color: var(--vp-c-white);
text-decoration: none;
font-size: 16px;
margin: 0 8px;
}
</style>
The `phoneClr` and `lightClr` 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 `Mockup` a key.
## Code example
```vue
<template>
<Mockup
screen="screen.png"
:phoneClr="darkTheme ? '#fff' : '#222'"
:key="darkTheme"
/>
</template>
<script setup>
import { ref } from 'vue';
import Mockup from 'vue-three-d-mockup';
const darkTheme = ref(true);
</script>
```

87
docs/guide/video-as-screen.md Normal file
View File

@@ -0,0 +1,87 @@
# Video as screen
<script setup>
import { ref } from 'vue';
import Mockup from '../../src/Mockup.vue'
import screenVideo from '../assets/screen.mp4';
const videoElement = ref(null);
const vidReady = ref(false);
</script>
<Mockup
v-if="vidReady"
style="width: 100%; height: 400px;"
:screen="videoElement"
/>
<div>
<video
:src="screenVideo"
ref="videoElement"
@canplay="vidReady = true"
muted
autoplay
loop
style="
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
"
></video>
</div>
The `screen` prop accepts a `video` element.
The `screen` prop is unreactive, so when using it as a video
it's important to only render the `Mockup` element when the video
is loaded. Check out the code example to see how to do this.
::: warning
The video will not be visible on the model if it is set to `display: none` or `visibility: hidden`.
Use `opacity: 0; pointer-events: none;` on the `<video>` element for best browser compatability.
:::
::: warning
The video may not be autoplaying if the original `<video>` element is scrolled off screen.
Some browsers check for viewport intersection so it may be best to set the video position to `fixed`.
:::
## Code example
```vue
<template>
<Mockup
v-if="vidReady"
:screen="videoElement"
/>
<video
:src="screenVideo"
ref="videoElement"
@canplay="vidReady = true"
muted
autoplay
loop
style="
position: fixed;
top: 0;
left: 0;
opacity: 0;
pointer-events: none;
"
></video>
</template>
<script setup>
import { ref } from 'vue';
import Mockup from 'vue-three-d-mockup';
import screenVideo from './assets/screen.mp4';
const videoElement = ref(null);
const vidReady = ref(false);
</script>
```

2
docs/index.md
View File

@@ -22,7 +22,7 @@ import screenImage from './assets/screen.png';
<div class="buttons">
<a
href="/vue-three-d-mockup/guide"
href="/vue-three-d-mockup/guide/"
class="buttons__button"
>
Guide

88
src/Demo.vue
View File

@@ -1,88 +0,0 @@
<template>
<div>
<h1>
vue-three-d-mockup
</h1>
<Mockup
v-if="vidReady"
class="mockup"
:screen="[$refs.video, screenImage]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
/>
<!-- <Mockup
class="mockup"
:screen="require('./assets/screen.png')"
/> -->
<video
:src="screenVideo"
ref="video"
@canplay="vidReady = true"
muted
autoplay
loop
/>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue';
import screenImage from './assets/screen.png';
import screenVideo from './assets/screen.mp4';
export default {
data() {
return {
vidReady: false,
};
},
components: {
Mockup: defineAsyncComponent(() => import('./Mockup.vue')),
},
setup() {
return {
screenImage,
screenVideo,
};
}
};
</script>
<style>
html, body {
height: 100%;
}
body {
font-family: sans-serif;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
video {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
}
.mockup {
width: 800px;
height: 500px;
}
</style>