@tailor-cms/tce-preview-runtime 0.0.23 → 0.0.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.0.23",
+  "version": "0.0.27",
   "dependencies": {
     "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "4.3.4",

package/src/components/AppBar.vue

@@ -7,23 +7,28 @@ const { isDark, toggleDark, showEdit, showDisplay, showBothComponents } =
 </script>
 
 <template>
-  <v-app-bar :color="isDark ? '#29292f' : 'grey-lighten-5'">
+  <v-app-bar :color="isDark ? 'grey-darken-4' : 'grey-lighten-4'" elevation="1">
     <template #prepend>
-      <v-app-bar-nav-icon class="ml-3">
-        <v-avatar :color="isDark ? 'transparent' : '#29292f'" size="48">
-          <img :src="logoUrl" alt="Tailor logo" width="30" />
-        </v-avatar>
+      <v-app-bar-nav-icon class="ml-2">
+        <img :src="logoUrl" alt="Tailor logo" width="24" />
       </v-app-bar-nav-icon>
     </template>
-    <v-app-bar-title class="ml-3 font-weight-bold">Dev Kit</v-app-bar-title>
+    <v-app-bar-title class="ml-1 font-weight-bold">
+      Content Element Kit
+      <span class="pl-1 text-body-2 font-weight-bold">0.0.1</span>
+    </v-app-bar-title>
     <v-spacer />
-    <v-btn-toggle class="mr-4" density="compact" borderless>
+    <v-btn-toggle
+      :variant="isDark ? 'flat' : 'tonal'"
+      class="mr-4"
+      density="compact"
+    >
       <v-btn @click="showEdit">
         <span>Edit</span>
         <v-icon end>mdi-pencil</v-icon>
       </v-btn>
       <v-btn @click="showDisplay">
-        <span>Preview</span>
+        <span>Display</span>
         <v-icon end>mdi-fullscreen</v-icon>
       </v-btn>
       <v-btn @click="showBothComponents">
@@ -31,7 +36,7 @@ const { isDark, toggleDark, showEdit, showDisplay, showBothComponents } =
         <v-icon end>mdi-math-norm-box</v-icon>
       </v-btn>
     </v-btn-toggle>
-    <v-btn href="https://github.com/tailor-cms/t-xt" icon>
+    <v-btn href="https://github.com/tailor-cms/tce-template" icon>
       <v-icon>mdi-github</v-icon>
     </v-btn>
     <v-btn icon @click.prevent="toggleDark()">

package/src/components/BottomPanel.vue

@@ -0,0 +1,44 @@
+<template>
+  <div v-show="isLoaded">
+    <v-tabs density="compact" hide-slider>
+      <v-tab>Server state</v-tab>
+    </v-tabs>
+    <div class="pa-6">
+      <JsonEditor
+        v-if="isLoaded"
+        :main-menu-bar="false"
+        :status-bar="false"
+        :value="orderKeys(props.element)"
+        mode="text"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import JsonEditor from 'vue3-ts-jsoneditor';
+
+const props = defineProps<{ element: any; isLoaded: Boolean }>();
+
+const orderKeys = (val: any) => {
+  return [
+    'id',
+    'uid',
+    'type',
+    'position',
+    'data',
+    'meta',
+    'refs',
+    'contentId',
+    'contentSignature',
+    'linked',
+    'detached',
+    'createdAt',
+    'updatedAt',
+    'deletedAt',
+  ].reduce((acc: any, key: string) => {
+    acc[key] = val[key];
+    return acc;
+  }, {});
+};
+</script>

package/src/components/MainLayout.vue

@@ -1,100 +1,37 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
-import JsonEditor from 'vue3-ts-jsoneditor';
 import Split from 'split.js';
 
-import { PANELS, useGlobalState } from '../state';
-import VueSplash from './SplashLoader.vue';
-
-// TODO: Enforce order
-// const SERVER_PROP_ORDER = [
-//   'id',
-//   'uid',
-//   'type',
-//   'position',
-//   'data',
-//   'meta',
-//   'refs',
-//   'contentId',
-//   'contentSignature',
-//   'linked',
-//   'detached',
-//   'createdAt',
-//   'updatedAt',
-//   'deletedAt',
-// ];
+import BottomPanel from './BottomPanel.vue';
+import PreviewPanel from './PreviewPanel.vue';
+import SplashLoader from './SplashLoader.vue';
+import { useGlobalState } from '../state';
 
 const props = defineProps<{ element: any }>();
 
+const { isDark } = useGlobalState();
 const isLoaded = ref(false);
-const editPanel = ref(null);
-const displayPanel = ref(null);
-
-const { isDark, splitJs } = useGlobalState();
-
-const reloadPreview = () => {
-  setTimeout(() => {
-    editPanel.value.src = editPanel.value.src;
-    displayPanel.value.src = displayPanel.value.src;
-  }, 2000);
-};
 
 onMounted(() => {
-  setTimeout(() => {
-    isLoaded.value = true;
-    reloadPreview();
-    // Client/server vertical split
-    Split([`#panelTop`, `#panelBottom`], {
-      direction: 'vertical',
-      sizes: [70, 30],
-    });
-    // Component preview split
-    splitJs.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
-      minSize: [0, 0],
-    });
-  }, 6000);
+  // Client/server vertical split
+  Split([`#panelTop`, `#panelBottom`], {
+    direction: 'vertical',
+    sizes: [70, 30],
+  });
+  setTimeout(() => (isLoaded.value = true), 5000);
 });
 </script>
 
 <template>
   <main :class="{ 'dark-theme': isDark }">
-    <VueSplash v-show="!isLoaded" color="#00bfa5" />
-    <div v-show="isLoaded" id="panelTop" class="d-flex panel">
-      <div class="d-flex flex-grow-1">
-        <iframe
-          :id="PANELS.EDIT"
-          ref="editPanel"
-          frameBorder="0"
-          sandbox="allow-scripts"
-          src="http://localhost:8010"
-          title="Edit component container"
-        >
-        </iframe>
-        <iframe
-          :id="PANELS.DISPLAY"
-          ref="displayPanel"
-          frameBorder="0"
-          sandbox="allow-scripts"
-          src="http://localhost:8020"
-          title="Display component container"
-        >
-        </iframe>
-      </div>
-    </div>
-    <div v-show="isLoaded" id="panelBottom" class="panel">
-      <v-tabs density="compact" hide-slider>
-        <v-tab>Server state</v-tab>
-      </v-tabs>
-      <div class="pa-5">
-        <JsonEditor
-          v-if="isLoaded"
-          :main-menu-bar="false"
-          :status-bar="false"
-          :value="props.element"
-          mode="text"
-        />
-      </div>
-    </div>
+    <SplashLoader v-show="!isLoaded" />
+    <PreviewPanel id="panelTop" :is-loaded="isLoaded" />
+    <BottomPanel
+      id="panelBottom"
+      :element="props.element"
+      :is-loaded="isLoaded"
+      class="preview-panel"
+    />
   </main>
 </template>
 
@@ -102,8 +39,9 @@ onMounted(() => {
 main {
   height: calc(100vh - var(--nav-height));
 
-  .panel {
+  .preview-panel {
     background-color: #eceff1;
+    overflow-y: auto;
   }
 }
 
@@ -118,9 +56,9 @@ main {
 }
 
 .gutter.gutter-vertical {
-  cursor: row-resize !important;
+  cursor: row-resize;
   background-color: #fff;
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
 }
 
 .dark-theme {
@@ -128,10 +66,5 @@ main {
   .gutter.gutter-vertical {
     background-color: #333;
   }
-
-  .jse-theme-dark .cm-content,
-  .jse-theme-dark .cm-gutters {
-    background-color: #29292f !important;
-  }
 }
 </style>

package/src/components/PreviewPanel.vue

@@ -0,0 +1,55 @@
+<template>
+  <div v-show="isLoaded" class="d-flex flex-grow-1 preview-panel">
+    <iframe
+      :id="PANELS.EDIT"
+      ref="editPanel"
+      frameBorder="0"
+      sandbox="allow-scripts"
+      src="http://localhost:8010"
+      title="Edit component container"
+    >
+    </iframe>
+    <iframe
+      :id="PANELS.DISPLAY"
+      ref="displayPanel"
+      frameBorder="0"
+      sandbox="allow-scripts"
+      src="http://localhost:8020"
+      title="Display component container"
+    >
+    </iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import Split from 'split.js';
+
+import { PANELS, useGlobalState } from '../state';
+
+const props = defineProps<{ isLoaded: Boolean }>();
+
+const editPanel = ref(null);
+const displayPanel = ref(null);
+const { previewPanelSplit } = useGlobalState();
+
+onMounted(() => {
+  previewPanelSplit.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
+    minSize: [0, 0],
+  });
+});
+
+watch(props.isLoaded, (isLoaded) => {
+  if (!isLoaded) return;
+  reloadPreview();
+});
+
+const reloadPreview = () => {
+  /* eslint-disable */
+  // @ts-ignore
+  editPanel.value.src = editPanel.value.src;
+  // @ts-ignore
+  displayPanel.value.src = displayPanel.value.src;
+  /* eslint-enable */
+};
+</script>

package/src/components/SplashLoader.vue

@@ -1,14 +1,11 @@
 <template>
   <transition name="fade">
-    <div
-      :class="['vue-splash', { 'vue-splash--fixed': fixed }]"
-      :style="containerStyle"
-    >
+    <div :style="{ backgroundColor }" class="splash-loader">
       <div>
-        <div class="vue-splash__anim">
-          <img :src="logo" :style="imageStyle" alt="Logo" />
+        <div class="splash-loader__anim">
+          <img :src="logo" alt="Logo" width="88" />
         </div>
-        <div class="vue-splash__text text-body-1">
+        <div class="splash-loader__text text-body-1">
           <div>Booting Teaching Element Kit....</div>
           <div class="font-weight-bold">Alpha preview v0.0.1</div>
         </div>
@@ -32,15 +29,7 @@ export default {
     },
     backgroundColor: {
       type: String,
-      default: '',
-    },
-  },
-  computed: {
-    imageStyle: () => ({ width: '88px' }),
-    containerStyle() {
-      return {
-        backgroundColor: this.backgroundColor || '#fff',
-      };
+      default: '#fff',
     },
   },
   created() {
@@ -57,27 +46,16 @@ export default {
 <style lang="scss" scoped>
 $splash-color: var(--splash-color);
 
-.vue-splash {
+.splash-loader {
   flex: 1;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-
-  &--fixed {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    background-color: white;
-  }
 }
 
-.vue-splash__anim {
+.splash-loader__anim {
   text-align: center;
   animation: splashAnimation 1.3s infinite;
 
@@ -86,7 +64,7 @@ $splash-color: var(--splash-color);
   }
 }
 
-.vue-splash__text {
+.splash-loader__text {
   margin-top: 50px;
   font-size: 1rem;
   text-align: center;

package/src/state/preview.ts

@@ -14,25 +14,25 @@ export const useGlobalState = createGlobalState(() => {
 
   // Control panels
   const visiblePanels = ref(['EDIT', 'DISPLAY', 'STATE']);
-  const splitJs = ref();
+  const previewPanelSplit = ref();
   const showEdit = () => {
     visiblePanels.value = [PANELS.EDIT];
-    if (splitJs.value) splitJs.value?.setSizes([100, 0]);
+    if (previewPanelSplit.value) previewPanelSplit.value?.setSizes([100, 0]);
   };
   const showDisplay = () => {
     visiblePanels.value = [PANELS.DISPLAY];
-    if (splitJs.value) splitJs.value?.setSizes([0, 100]);
+    if (previewPanelSplit.value) previewPanelSplit.value?.setSizes([0, 100]);
   };
   const showBothComponents = () => {
     visiblePanels.value = [PANELS.EDIT, PANELS.DISPLAY];
-    if (splitJs.value) splitJs.value?.setSizes([50, 50]);
+    if (previewPanelSplit.value) previewPanelSplit.value?.setSizes([50, 50]);
   };
 
   return {
     isDark,
     toggleDark,
     visiblePanels,
-    splitJs,
+    previewPanelSplit,
     showEdit,
     showDisplay,
     showBothComponents,