feat: add shrink/expand for live editor

components/OneDemo.vue

@@ -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,16 +67,21 @@
     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>
   <transition name="editor">
     <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

components/OneLive.vue

@@ -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

components/OneRepl.vue

@@ -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

package.json

@@ -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"

plugins/l10n.js

@@ -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'
   },