docs_vue2/components/OneDemo.vue

344 lines
6.9 KiB
Vue
Raw Normal View History

2020-08-13 11:47:56 +08:00
<template>
<article
class="one-demo"
:class="{ codeExpanded }"
2020-08-13 11:47:56 +08:00
>
<section class="demo">
<browser-window
v-if="browser"
:url="browser"
width="calc(100% - 40px)"
2020-08-13 11:47:56 +08:00
height="400px"
>
<slot/>
</browser-window>
<slot v-else/>
</section>
<section
v-if="$slots.desc"
class="desc"
>
<slot name="desc"/>
</section>
2021-09-15 19:19:09 +08:00
<section class="actions">
<veui-button
2021-09-19 15:34:14 +08:00
v-tooltip="t('playInCodeSandbox')"
2021-09-15 19:19:09 +08:00
ui="icon"
2021-09-19 15:34:14 +08:00
@click="play('CodeSandbox')"
2021-09-15 19:19:09 +08:00
>
2021-11-20 13:22:48 +08:00
<veui-icon name="one-demo-codesandbox"/>
2021-09-19 15:34:14 +08:00
</veui-button>
<veui-button
v-tooltip="t('playInStackBlitz')"
ui="icon"
@click="play('StackBlitz')"
2021-11-20 13:22:48 +08:00
>
<veui-icon name="one-demo-stackblitz"/>
</veui-button>
2021-09-15 19:19:09 +08:00
<veui-button
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
2021-09-15 19:19:09 +08:00
ui="icon"
@click="codeExpanded = !codeExpanded"
2021-09-15 19:19:09 +08:00
>
<veui-icon
2021-09-19 15:34:14 +08:00
scale="1.2"
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
/>
2021-09-15 19:19:09 +08:00
</veui-button>
2022-02-23 20:19:58 +08:00
<veui-button
v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
class="toggle-editor"
ui="text"
@click="editing = !editing"
>
Live
</veui-button>
2021-10-25 20:18:05 +08:00
<one-edit-link
class="edit"
variant="quiet"
2022-02-23 20:19:58 +08:00
type="demo"
2021-10-25 20:18:05 +08:00
:path="path"
/>
2021-09-15 19:19:09 +08:00
</section>
2020-08-13 11:47:56 +08:00
<section
v-if="$slots.source"
ref="source"
class="source"
:style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
2020-08-13 11:47:56 +08:00
>
2022-02-24 14:38:23 +08:00
<div class="source-toolbar">
<veui-button
v-tooltip="t('@onelive.copyCode')"
ui="icon reverse"
@click="copy"
>
<veui-icon name="copy"/>
</veui-button>
</div>
2020-08-13 11:47:56 +08:00
<slot name="source"/>
</section>
2021-11-20 13:22:48 +08:00
<transition name="editor">
<one-repl
v-if="editing"
class="one-demo-editor"
:class="{
'one-demo-editor-shrink': !editorExpanded
}"
2021-11-20 13:22:48 +08:00
:code="code"
:expanded="editorExpanded"
:browser="!!browser"
@close="handleEditorClose"
@toggle="handleEditorToggle"
2021-11-20 13:22:48 +08:00
/>
</transition>
2020-08-13 11:47:56 +08:00
</article>
</template>
<script>
2022-02-24 14:38:23 +08:00
import Vue from 'vue'
2021-09-15 19:19:09 +08:00
import { Button, Icon } from 'veui'
import tooltip from 'veui/directives/tooltip'
2021-11-20 13:22:48 +08:00
import modal from 'veui/managers/modal'
2020-08-13 11:47:56 +08:00
import i18n from 'veui/mixins/i18n'
2022-02-24 14:38:23 +08:00
import toast from 'veui/plugins/toast'
2020-08-13 11:47:56 +08:00
import { BrowserWindow } from 'vue-windows'
import { getLocale } from '../common/i18n'
2021-09-19 15:34:14 +08:00
import { play } from '../common/play'
2021-10-25 20:18:05 +08:00
import OneEditLink from './OneEditLink'
2021-11-21 01:52:20 +08:00
import OneRepl from './OneRepl'
2022-02-24 14:38:23 +08:00
import 'veui-theme-dls-icons/copy'
Vue.use(toast)
2020-08-13 11:47:56 +08:00
export default {
name: 'one-demo',
2021-09-15 19:19:09 +08:00
directives: {
tooltip
},
2020-08-13 11:47:56 +08:00
components: {
2021-09-15 19:19:09 +08:00
'veui-button': Button,
2020-08-13 11:47:56 +08:00
'veui-icon': Icon,
2021-10-25 20:18:05 +08:00
BrowserWindow,
2021-11-20 13:22:48 +08:00
OneEditLink,
2021-11-21 01:52:20 +08:00
OneRepl
2020-08-13 11:47:56 +08:00
},
mixins: [i18n],
props: {
2021-10-25 20:18:05 +08:00
browser: String,
path: String
2020-08-13 11:47:56 +08:00
},
data () {
return {
2021-11-20 13:22:48 +08:00
code: '',
2020-08-13 11:47:56 +08:00
sourceHeight: 0,
codeExpanded: false,
editing: false,
editorExpanded: true
}
},
computed: {
lock () {
return this.editing && this.editorExpanded
2020-08-13 11:47:56 +08:00
}
},
watch: {
lock (value) {
2021-11-20 13:22:48 +08:00
if (value) {
modal.open()
} else {
modal.close()
}
2020-08-13 11:47:56 +08:00
}
},
mounted () {
let source = this.$refs.source
let style = source.style
style.height = ''
style.height = source.offsetHeight
this.sourceHeight = source.offsetHeight
style.height = '0'
2021-11-20 13:22:48 +08:00
2022-02-24 14:38:23 +08:00
this.code = this.$refs.source?.querySelector('pre')?.textContent || ''
2021-09-15 19:19:09 +08:00
},
methods: {
2021-09-19 15:34:14 +08:00
play (vendor) {
let locale = getLocale(this.$route.path)
2021-09-19 15:34:14 +08:00
play(this.$refs.source.textContent, { locale, vendor })
},
2022-02-24 14:38:23 +08:00
async copy () {
try {
await navigator.clipboard.writeText(this.code)
this.$toast.success(this.t('@onelive.copySuccess'))
} catch (e) {
this.$toast.error(this.t('@onelive.copyFailed'))
}
},
handleEditorClose () {
this.editing = false
},
handleEditorToggle (val) {
this.editorExpanded = val
2021-09-15 19:19:09 +08:00
}
2020-08-13 11:47:56 +08:00
}
}
2021-09-15 19:19:09 +08:00
Icon.register({
2021-09-15 20:23:08 +08:00
'one-demo-code': {
2021-09-15 19:19:09 +08:00
width: 24,
height: 24,
2021-11-20 13:22:48 +08:00
d:
'M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6l6 6l1.4-1.4zm5.2 0l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6l-1.4-1.4z'
2021-09-15 19:19:09 +08:00
},
2021-09-15 20:23:08 +08:00
'one-demo-code-off': {
2021-09-15 19:19:09 +08:00
width: 24,
height: 24,
2021-11-20 13:22:48 +08:00
d:
'M19.17 12l-4.58-4.59L16 6l6 6l-3.59 3.59L17 14.17L19.17 12zM1.39 4.22l4.19 4.19L2 12l6 6l1.41-1.41L4.83 12L7 9.83l12.78 12.78l1.41-1.41L2.81 2.81L1.39 4.22z'
2021-09-15 19:19:09 +08:00
},
2021-09-19 15:34:14 +08:00
'one-demo-codesandbox': {
2021-09-15 19:19:09 +08:00
width: 32,
height: 32,
2021-11-20 13:22:48 +08:00
d:
'M2.667 8l13.938-8l13.943 8l.12 15.932L16.605 32L2.667 24zm2.786 3.307v6.344l4.458 2.479v4.688l5.297 3.063V16.85zm22.318 0l-9.755 5.542V27.88l5.292-3.063v-4.682l4.464-2.484zM6.844 8.802l9.74 5.526l9.76-5.573l-5.161-2.932l-4.547 2.594l-4.573-2.625z'
2021-09-19 15:34:14 +08:00
},
'one-demo-stackblitz': {
width: 28,
height: 28,
2021-11-20 13:22:48 +08:00
d:
'M12.747 16.273h-7.46L18.925 1.5l-3.671 10.227h7.46L9.075 26.5l3.671-10.227z'
2021-09-15 19:19:09 +08:00
}
})
2020-08-13 11:47:56 +08:00
</script>
<style src="vue-windows/dist/vue-windows.css"></style>
<style lang="stylus" scoped>
.one-demo
overflow hidden
.demo
border 1px solid #eee
2021-07-19 20:12:14 +08:00
border-top-left-radius 4px
border-top-right-radius 4px
2020-08-13 11:47:56 +08:00
padding 30px
& >>> .style-module_body__14MV-
transform translate(0, 0)
padding 0
2020-08-13 11:47:56 +08:00
.desc
border 1px solid #eee
padding 18px 20px
background-color #fcfcfc
.source
2022-02-24 14:38:23 +08:00
position relative
2021-07-19 20:12:14 +08:00
overflow hidden
2020-08-13 11:47:56 +08:00
transition height 0.3s
& >>> pre
margin-top 0
margin-bottom 0
border-top-right-radius 0
border-top-left-radius 0
2021-07-19 20:12:14 +08:00
2020-08-13 11:47:56 +08:00
.desc
.source >>> pre
2021-09-15 19:19:09 +08:00
.actions
2020-08-13 11:47:56 +08:00
margin-top -1px
2021-09-15 19:19:09 +08:00
.actions
2020-08-13 11:47:56 +08:00
position relative
display flex
justify-content center
align-items center
line-height 2
width 100%
2021-09-15 19:19:09 +08:00
height 48px
2020-08-13 11:47:56 +08:00
border 1px solid #eee
2021-07-19 20:12:14 +08:00
border-bottom-left-radius 4px
border-bottom-right-radius 4px
2020-08-13 11:47:56 +08:00
background-color #fff
transition background-color 0.3s
outline none
.codeExpanded &
border-radius 0
2022-02-23 20:19:58 +08:00
.veui-button:not(.toggle-editor)
2021-09-15 19:19:09 +08:00
font-size 18px
.veui-button + .veui-button
2021-09-19 15:34:14 +08:00
margin-left 12px
2021-10-25 20:18:05 +08:00
.edit
position absolute
right 30px
top 50%
transform translateY(-50%)
font-size 12px
2021-11-20 13:22:48 +08:00
.one-demo-editor
position fixed
top 0
left 0
right 0
bottom 0
z-index 10
background-color #fff
transition bottom 0.1s, box-shadow 0.2s
&-shrink
bottom 50vh
box-shadow 0 0 4px #0006
2021-11-20 13:22:48 +08:00
.editor-enter-active
.editor-leave-active
transform-origin 50% 50%
transition all 0.3s
.editor-enter
.editor-leave-to
opacity 0
transform scale(0.99) translateY(3px)
2022-02-23 20:19:58 +08:00
.toggle-editor
height 20px
padding 0 3px
font-weight 600
2021-11-20 13:22:48 +08:00
2022-02-23 20:19:58 +08:00
&::after
content none !important
&
&:hover
&[data-focus-visible-added]
&:active
border 1.5px solid currentColor !important
2021-11-20 13:22:48 +08:00
2022-02-23 20:19:58 +08:00
&[data-focus-visible-added]
border-color #0052cc !important
box-shadow 0 0 0 2px rgba(0, 102, 255, 0.2) !important
2022-02-24 14:38:23 +08:00
.source-toolbar
position absolute
top 12px
right 28px
display flex
align-items center
.veui-button[ui~="icon"][ui~="reverse"]
color #ebedf5
&:hover
&[data-focus-visible-added]
color #f6f7fa
&:active
color #fff
2022-02-23 20:19:58 +08:00
@media (max-width 480px)
2021-11-20 13:22:48 +08:00
.toggle-editor
display none
2020-08-13 11:47:56 +08:00
</style>