feat: add shrink/expand for live editor
This commit is contained in:
Justineo
parent
e1d2eec15c
commit
1aebcf32ab
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<article
|
||||
class="one-demo"
|
||||
:class="{ expanded }"
|
||||
:class="{ codeExpanded }"
|
||||
>
|
||||
<section class="demo">
|
||||
<browser-window
|
||||
@ -36,25 +36,25 @@
|
||||
<veui-icon name="one-demo-stackblitz"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t('expandEditor')"
|
||||
v-tooltip="t(editing ? 'closeEditor' : 'openEditor')"
|
||||
class="toggle-editor"
|
||||
ui="icon"
|
||||
@click="editing = true"
|
||||
@click="editing = !editing"
|
||||
>
|
||||
<veui-icon
|
||||
scale="1.2"
|
||||
:name="expanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
:name="editing ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
v-tooltip="t(expanded ? 'hideCode' : 'showCode')"
|
||||
v-tooltip="t(codeExpanded ? 'hideCode' : 'showCode')"
|
||||
class="toggle-source"
|
||||
ui="icon"
|
||||
@click="expanded = !expanded"
|
||||
@click="codeExpanded = !codeExpanded"
|
||||
>
|
||||
<veui-icon
|
||||
scale="1.2"
|
||||
:name="expanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
:name="codeExpanded ? 'one-demo-code-off' : 'one-demo-code'"
|
||||
/>
|
||||
</veui-button>
|
||||
<one-edit-link
|
||||
@ -67,7 +67,7 @@
|
||||
v-if="$slots.source"
|
||||
ref="source"
|
||||
class="source"
|
||||
:style="{ height: expanded ? `${sourceHeight || 0}px` : '0' }"
|
||||
:style="{ height: codeExpanded ? `${sourceHeight || 0}px` : '0' }"
|
||||
>
|
||||
<slot name="source"/>
|
||||
</section>
|
||||
@ -75,8 +75,13 @@
|
||||
<one-repl
|
||||
v-if="editing"
|
||||
class="one-demo-editor"
|
||||
:class="{
|
||||
'one-demo-editor-shrink': !editorExpanded
|
||||
}"
|
||||
:code="code"
|
||||
@close="editing = false"
|
||||
:expanded="editorExpanded"
|
||||
@close="handleEditorClose"
|
||||
@toggle="handleEditorToggle"
|
||||
/>
|
||||
</transition>
|
||||
</article>
|
||||
@ -114,12 +119,18 @@ export default {
|
||||
return {
|
||||
code: '',
|
||||
sourceHeight: 0,
|
||||
expanded: false,
|
||||
editing: false
|
||||
codeExpanded: false,
|
||||
editing: false,
|
||||
editorExpanded: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lock () {
|
||||
return this.editing && this.editorExpanded
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
editing (value) {
|
||||
lock (value) {
|
||||
if (value) {
|
||||
modal.open()
|
||||
} else {
|
||||
@ -141,6 +152,12 @@ export default {
|
||||
play (vendor) {
|
||||
let locale = getLocale(this.$route.path)
|
||||
play(this.$refs.source.textContent, { locale, vendor })
|
||||
},
|
||||
handleEditorClose () {
|
||||
this.editing = false
|
||||
},
|
||||
handleEditorToggle (val) {
|
||||
this.editorExpanded = val
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -220,7 +237,7 @@ Icon.register({
|
||||
transition background-color 0.3s
|
||||
outline none
|
||||
|
||||
.expanded &
|
||||
.codeExpanded &
|
||||
border-radius 0
|
||||
|
||||
.veui-button
|
||||
@ -244,6 +261,11 @@ Icon.register({
|
||||
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
|
||||
|
||||
.editor-enter-active
|
||||
.editor-leave-active
|
||||
|
||||
@ -65,6 +65,7 @@
|
||||
class="live-preview"
|
||||
>
|
||||
<v-live-preview
|
||||
class="editor-preview"
|
||||
:code="transformedCode"
|
||||
:requires="imports"
|
||||
:check-variable-availability="false"
|
||||
@ -347,6 +348,9 @@ export default {
|
||||
box-shadow 0 0 0 0 rgba(255, 255, 255, 1)
|
||||
animation pulse 2s infinite
|
||||
|
||||
.editor-preview
|
||||
overflow auto
|
||||
|
||||
.editor-error
|
||||
position absolute
|
||||
bottom 16px
|
||||
|
||||
@ -3,6 +3,13 @@
|
||||
<header class="header">
|
||||
<h1>{{ t('liveEdit') }}</h1>
|
||||
<section class="actions">
|
||||
<veui-button
|
||||
v-tooltip="t(expanded ? 'shrinkEditor' : 'expandEditor')"
|
||||
ui="strong icon xl"
|
||||
@click="handleToggle"
|
||||
>
|
||||
<veui-icon :name="expanded ? 'one-repl-shrink' : 'one-repl-expand'"/>
|
||||
</veui-button>
|
||||
<veui-button
|
||||
ui="strong text"
|
||||
@click="handleClose"
|
||||
@ -19,13 +26,18 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Button, Loading } from 'veui'
|
||||
import { Button, Loading, Icon } from 'veui'
|
||||
import tooltip from 'veui/directives/tooltip'
|
||||
import i18n from 'veui/mixins/i18n'
|
||||
|
||||
export default {
|
||||
name: 'one-repl',
|
||||
directives: {
|
||||
tooltip
|
||||
},
|
||||
components: {
|
||||
'veui-button': Button,
|
||||
'veui-icon': Icon,
|
||||
'one-live': () => ({
|
||||
component: import('./OneLive'),
|
||||
loading: {
|
||||
@ -47,14 +59,33 @@ export default {
|
||||
code: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
expanded: Boolean
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.$emit('close')
|
||||
},
|
||||
handleToggle () {
|
||||
this.$emit('toggle', !this.expanded)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Icon.register({
|
||||
'one-repl-shrink': {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M7.41 18.59L8.83 20L12 16.83L15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4L12 7.17L8.83 4L7.41 5.41L12 10l4.59-4.59z'
|
||||
},
|
||||
'one-repl-expand': {
|
||||
width: 24,
|
||||
height: 24,
|
||||
d:
|
||||
'M12 5.83L15.17 9l1.41-1.41L12 3L7.41 7.59L8.83 9L12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15L12 18.17z'
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@ -81,11 +112,12 @@ export default {
|
||||
display flex
|
||||
justify-content flex-end
|
||||
flex 1 1 auto
|
||||
gap 24px
|
||||
|
||||
.editor:not(.loading)
|
||||
position relative
|
||||
flex 1 1 auto
|
||||
height calc(100vh - 48px)
|
||||
height calc(100% - 48px)
|
||||
|
||||
& >>> .live-preview
|
||||
padding 24px 36px
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
"author": "guyiling <guyiling@baidu.com>",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run docs && HOST=0.0.0.0 nuxt & node -r esm ./one/build/watch.js",
|
||||
"dev": "npm run docs && NODE_OPTIONS=--max_old_space_size=4096 HOST=0.0.0.0 nuxt & node -r esm ./one/build/watch.js",
|
||||
"build": "NODE_ENV=production npm run docs && nuxt build",
|
||||
"docs": "node -r esm ./one/build/generate.js",
|
||||
"start": "nuxt start",
|
||||
"generate": "npm run docs && nuxt generate",
|
||||
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
|
||||
"precommit": "npm run lint",
|
||||
"daemon": "NODE_ENV=production HOST=0.0.0.0 forever start -p . -a -l ./logs/forever.log -o ./logs/access.log -e ./logs/error.log app.js",
|
||||
"serve": "NODE_ENV=production PORT=80 HOST=0.0.0.0 forever -p . -a -l ./logs/forever.log -o ./logs/access.log -e ./logs/error.log app.js",
|
||||
"daemon": "NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=production HOST=0.0.0.0 forever start -p . -a -l ./logs/forever.log -o ./logs/access.log -e ./logs/error.log app.js",
|
||||
"serve": "NODE_OPTIONS=--max_old_space_size=4096 NODE_ENV=production PORT=80 HOST=0.0.0.0 forever -p . -a -l ./logs/forever.log -o ./logs/access.log -e ./logs/error.log app.js",
|
||||
"stop": "forever stop app.js",
|
||||
"restart": "npm run stop && npm run serve",
|
||||
"update:veui": "npm i -D {veui-loader,veui,veui-theme-dls,babel-plugin-veui,veui-theme-dls-icons}@latest"
|
||||
|
||||
@ -5,7 +5,8 @@ i18n.register(
|
||||
{
|
||||
showCode: '显示代码',
|
||||
hideCode: '隐藏代码',
|
||||
expandEditor: '展开实时编辑',
|
||||
openEditor: '打开实时编辑',
|
||||
closeEditor: '关闭实时编辑',
|
||||
playInCodeSandbox: '在 CodeSandbox 中打开',
|
||||
playInStackBlitz: '在 StackBlitz 中打开'
|
||||
},
|
||||
@ -19,7 +20,8 @@ i18n.register(
|
||||
{
|
||||
showCode: 'Show code',
|
||||
hideCode: 'Hide code',
|
||||
expandEditor: 'Expand Live editor',
|
||||
openEditor: 'Open Live editor',
|
||||
closeEditor: 'Close Live editor',
|
||||
playInCodeSandbox: 'Open in CodeSandbox',
|
||||
playInStackBlitz: 'Open in StackBlitz'
|
||||
},
|
||||
@ -65,6 +67,8 @@ i18n.register(
|
||||
i18n.register(
|
||||
'zh-Hans',
|
||||
{
|
||||
expandEditor: '展开编辑器',
|
||||
shrinkEditor: '收缩编辑器',
|
||||
exit: '退出',
|
||||
liveEdit: '实时编辑'
|
||||
},
|
||||
@ -76,6 +80,8 @@ i18n.register(
|
||||
i18n.register(
|
||||
'en-US',
|
||||
{
|
||||
expandEditor: 'Expand editor',
|
||||
shrinkEditor: 'Shrink editor',
|
||||
exit: 'Exit',
|
||||
liveEdit: 'Live Edit'
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user