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

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