rename

docs/src/components/LiveDemo/CustomLayout.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="live-demo">
+  <div class="live-editor">
-    <div class="live-demo__preview">
+    <div class="live-editor__preview">
       <slot name="preview" />
     </div>
-    <div class="live-demo__editor">
+    <div class="live-editor__editor">
       <slot name="editor" />
     </div>
   </div>
@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.live-demo {
+.live-editor {
   background-color: $colorWhite;
   overflow: hidden;
   border-radius: 0.5rem;

docs/src/components/LiveDemo/index.vue

@@ -1,30 +1,13 @@
 <template>
   <div class="live-demo">
-    <template v-if="mainFile">
+    <template v-if="file">
       <div class="live-demo__preview">
         <vue-live
-          :code="mainFile.content"
+          :code="file.content"
           :layout="CustomLayout"
           :requires="requires"
-          @error="(e) => handleError(e)"
         />
       </div>
-      <div class="live-demo__source" v-if="showSource">
-        <div class="live-demo__tabs" v-if="showFileNames">
-          <button
-            class="live-demo__tab"
-            :class="{ 'is-active': currentIndex === index}"
-            v-for="(file, index) in files"
-            :key="index"
-            @click="currentIndex = index"
-          >
-            {{ file.name }}
-          </button>
-        </div>
-        <div class="live-demo__code" v-if="activeFile" :key="activeFile.path">
-          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
-        </div>
-      </div>
       <div class="live-demo__meta">
         <div class="live-demo__name">
           Demo/{{ name }}
@@ -44,12 +27,10 @@
 import collect from 'collect.js'
 import { VueLive } from 'vue-live'
 import * as starterKit from '@tiptap/vue-starter-kit'
-import Prism from '~/components/Prism'
 import CustomLayout from './CustomLayout'
 
 export default {
   components: {
-    Prism,
     VueLive,
   },
 
@@ -58,11 +39,6 @@ export default {
       type: String,
       required: true,
     },
-
-    showSource: {
-      type: Boolean,
-      default: true,
-    },
   },
 
   data() {
@@ -81,25 +57,8 @@ export default {
   },
 
   computed: {
-    mainFile() {
+    file() {
-      const file = this.files
+      return this.files[0]
-        .find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
-
-      if (!file) {
-        return
-      }
-
-      return file
-
-      // return require(`~/demos/${file.path}`).default
-    },
-
-    showFileNames() {
-      return this.files.length > 1
-    },
-
-    activeFile() {
-      return this.files[this.currentIndex]
     },
 
     githubUrl() {
@@ -109,23 +68,15 @@ export default {
 
   mounted() {
     this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
-      .filter(path => path.startsWith(`./${this.name}`))
+      .filter(path => path.startsWith(`./${this.name}/index.vue`))
       .map(path => path.replace('./', ''))
       .map(path => {
-        const extension = path.split('.').pop()
-
         return {
           path,
           name: path.replace(`${this.name}/`, ''),
           content: require(`!!raw-loader!~/demos/${path}`).default,
-          extension,
-          highlight: this.syntax[extension] || extension,
         }
       })
-      .filter(item => {
-        return ['vue', 'jsx', 'scss'].includes(item.extension)
-      })
-      .sortBy(item => item.path.split('/').length)
       .toArray()
   },
 }