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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.0.21",
+  "version": "0.0.27",
   "dependencies": {
     "@mdi/font": "^7.0.96",
     "@vitejs/plugin-vue": "4.3.4",
@@ -22,7 +22,7 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --open",
     "build": "vue-tsc --noEmit && vite build",
     "serve": "vite preview",
     "lint": "eslint --ext .js,.ts,.vue .",

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,79 +1,37 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-import JsonEditor from 'vue3-ts-jsoneditor';
+import { onMounted, ref } from 'vue';
 import Split from 'split.js';
 
-import { PANELS, useGlobalState } from '../state';
-
-// 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, splitJs } = useGlobalState();
+
+const { isDark } = useGlobalState();
+const isLoaded = ref(false);
 
 onMounted(() => {
-  // Component preview split
-  splitJs.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
-    minSize: [0, 0],
-  });
   // Client/server vertical split
   Split([`#panelTop`, `#panelBottom`], {
     direction: 'vertical',
     sizes: [70, 30],
   });
+  setTimeout(() => (isLoaded.value = true), 5000);
 });
 </script>
 
 <template>
   <main :class="{ 'dark-theme': isDark }">
-    <div id="panelTop" class="d-flex panel">
-      <div class="d-flex flex-grow-1">
-        <iframe
-          :id="PANELS.EDIT"
-          frameBorder="0"
-          sandbox="allow-scripts"
-          src="http://localhost:8010"
-          title="Edit component container"
-        >
-        </iframe>
-        <iframe
-          :id="PANELS.DISPLAY"
-          frameBorder="0"
-          sandbox="allow-scripts"
-          src="http://localhost:8020"
-          title="Display component container"
-        >
-        </iframe>
-      </div>
-    </div>
-    <div id="panelBottom" class="panel">
-      <v-tabs density="compact" hide-slider>
-        <v-tab>Server state</v-tab>
-      </v-tabs>
-      <div class="pa-5">
-        <JsonEditor
-          :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>
 
@@ -81,8 +39,9 @@ onMounted(() => {
 main {
   height: calc(100vh - var(--nav-height));
 
-  .panel {
+  .preview-panel {
     background-color: #eceff1;
+    overflow-y: auto;
   }
 }
 
@@ -97,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 {
@@ -107,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

@@ -0,0 +1,91 @@
+<template>
+  <transition name="fade">
+    <div :style="{ backgroundColor }" class="splash-loader">
+      <div>
+        <div class="splash-loader__anim">
+          <img :src="logo" alt="Logo" width="88" />
+        </div>
+        <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>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import logoUrl from '../assets/logo.png';
+
+export default {
+  props: {
+    logo: {
+      type: String,
+      default: logoUrl,
+    },
+    color: {
+      type: String,
+      default: '#00bfa5',
+    },
+    backgroundColor: {
+      type: String,
+      default: '#fff',
+    },
+  },
+  created() {
+    this.setColor();
+  },
+  methods: {
+    setColor() {
+      document.documentElement.style.setProperty('--splash-color', this.color);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$splash-color: var(--splash-color);
+
+.splash-loader {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.splash-loader__anim {
+  text-align: center;
+  animation: splashAnimation 1.3s infinite;
+
+  img {
+    margin: auto;
+  }
+}
+
+.splash-loader__text {
+  margin-top: 50px;
+  font-size: 1rem;
+  text-align: center;
+}
+
+@keyframes splashAnimation {
+  0% {
+    filter: drop-shadow(0px 0px 0px $splash-color);
+  }
+  100% {
+    filter: drop-shadow(0px 0px 200px $splash-color);
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

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,