@tailor-cms/tce-preview-runtime 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @tailor-cms/tce-preview-runtime
+
+## 0.5.1
+
+### Patch Changes
+
+- Updated dependencies.

package/package.json

@@ -1,26 +1,27 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
-    "@mdi/font": "7.2.96",
-    "@vitejs/plugin-vue": "4.3.4",
-    "@vueuse/core": "10.4.1",
-    "date-fns": "^3.2.0",
-    "ky": "1.0.1",
+    "@mdi/font": "7.4.47",
+    "@vitejs/plugin-vue": "5.2.1",
+    "@vueuse/core": "12.5.0",
+    "date-fns": "^4.1.0",
+    "ky": "1.7.4",
     "lodash": "^4.17.21",
-    "sass": "1.68.0",
+    "sass": "1.84.0",
     "split.js": "1.6.5",
-    "typescript": "5.2.2",
-    "universal-cookie": "^6.1.3",
-    "vite": "4.4.9",
-    "vite-plugin-vuetify": "1.0.2",
-    "vue": "3.3.4",
-    "vue-tsc": "1.8.13",
-    "vue3-ts-jsoneditor": "2.9.0",
-    "vuetify": "3.4.0"
+    "stringify-object": "^5.0.0",
+    "typescript": "5.7.3",
+    "universal-cookie": "^7.2.2",
+    "vite": "6.1.0",
+    "vite-plugin-vuetify": "2.1.0",
+    "vue": "3.5.13",
+    "vue-tsc": "2.2.0",
+    "vuetify": "3.7.11"
   },
   "devDependencies": {
+    "@types/stringify-object": "^4.0.5",
     "@tailor-cms/eslint-config": "0.0.2"
   },
   "publishConfig": {

package/src/App.vue

@@ -70,7 +70,7 @@ async function resetState() {
 </script>
 
 <template>
-  <v-app>
+  <VApp>
     <AppBar />
     <MainLayout
       :element="element"
@@ -79,7 +79,7 @@ async function resetState() {
       @reset-element="resetElement"
       @reset-state="resetState"
     />
-  </v-app>
+  </VApp>
 </template>
 
 <style>

package/src/components/AppBar.vue

@@ -1,48 +1,49 @@
 <script setup lang="ts">
 import logoUrl from '../assets/logo.png';
 import { useGlobalState } from '../state';
+import { version } from './../../package.json';
 
 const { showEdit, showDisplay, showBothComponents } = useGlobalState();
 </script>
 
 <template>
-  <v-app-bar color="blue-grey-darken-4" elevation="6">
+  <VAppBar color="blue-grey-darken-4" elevation="6">
     <template #prepend>
-      <v-app-bar-nav-icon class="ml-2">
+      <VAppBarNavIcon class="ml-2">
         <img :src="logoUrl" alt="Tailor logo" width="36" />
-      </v-app-bar-nav-icon>
+      </VAppBarNavIcon>
     </template>
-    <v-app-bar-title class="ml-2">
+    <VAppBarTitle class="ml-2">
       Content Element Kit
-      <v-chip
+      <VChip
         class="ml-3 mb-1 text-body-2"
         color="#23F48B"
         density="compact"
         variant="tonal"
       >
-        0.4.0
-      </v-chip>
-    </v-app-bar-title>
-    <v-spacer />
-    <v-btn-toggle class="mr-4" density="compact">
-      <v-btn @click="showEdit">
+        {{ version }}
+      </VChip>
+    </VAppBarTitle>
+    <VSpacer />
+    <VBtnToggle class="mr-4" density="compact">
+      <VBtn @click="showEdit">
         <span>Authoring</span>
-        <v-icon end>mdi-pencil</v-icon>
-      </v-btn>
-      <v-btn @click="showDisplay">
+        <VIcon end>mdi-pencil</VIcon>
+      </VBtn>
+      <VBtn @click="showDisplay">
         <span>End-user</span>
-        <v-icon end>mdi-fullscreen</v-icon>
-      </v-btn>
-      <v-btn @click="showBothComponents">
+        <VIcon end>mdi-fullscreen</VIcon>
+      </VBtn>
+      <VBtn @click="showBothComponents">
         <span>Both</span>
-        <v-icon end>mdi-math-norm-box</v-icon>
-      </v-btn>
-    </v-btn-toggle>
-    <v-btn href="https://github.com/tailor-cms/tce-template" icon>
-      <v-icon>mdi-github</v-icon>
-    </v-btn>
-    <v-btn href="https://tailor-cms.github.io/xt/" icon>
-      <v-icon>mdi-book-outline</v-icon>
-    </v-btn>
-  </v-app-bar>
+        <VIcon end>mdi-math-norm-box</VIcon>
+      </VBtn>
+    </VBtnToggle>
+    <VBtn href="https://github.com/tailor-cms/tce-template" icon>
+      <VIcon>mdi-github</VIcon>
+    </VBtn>
+    <VBtn href="https://tailor-cms.github.io/xt/" icon>
+      <VIcon>mdi-book-outline</VIcon>
+    </VBtn>
+  </VAppBar>
 </template>

package/src/components/BottomPanel.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-show="isLoaded">
-    <v-tabs v-model="state.selectedTab">
-      <v-tab :value="1">
+    <VTabs v-model="state.selectedTab">
+      <VTab :value="1">
         <VChip append-icon="mdi-pen" class="mr-2" color="indigo" size="small">
           {{ state.elementHistory.length }}
         </VChip>
         Authoring history
-      </v-tab>
-      <v-tab :value="2">
+      </VTab>
+      <VTab :value="2">
         <VChip
           append-icon="mdi-account"
           class="mr-2"
@@ -17,14 +17,14 @@
           {{ state.userInteractions.length }}
         </VChip>
         End-User state history
-      </v-tab>
-    </v-tabs>
+      </VTab>
+    </VTabs>
     <div class="pa-6">
-      <v-window v-model="state.selectedTab">
-        <v-window-item :value="1">
+      <VWindow v-model="state.selectedTab">
+        <VWindowItem :value="1">
           <VBtn
             class="mb-4"
-            color="indigo-darken-4"
+            color="indigoDarken4"
             variant="tonal"
             @click="$emit('resetElement')"
           >
@@ -32,11 +32,11 @@
             Reset content element
           </VBtn>
           <MutationList :changes="state.elementHistory" />
-        </v-window-item>
-        <v-window-item :value="2">
+        </VWindowItem>
+        <VWindowItem :value="2">
           <VBtn
             class="mb-4"
-            color="indigo-darken-4"
+            color="indigoDarken4"
             variant="tonal"
             @click="$emit('resetState')"
           >
@@ -44,8 +44,8 @@
             Reset state context
           </VBtn>
           <MutationList :changes="state.userInteractions" />
-        </v-window-item>
-      </v-window>
+        </VWindowItem>
+      </VWindow>
     </div>
   </div>
 </template>

package/src/components/MutationList.vue

@@ -2,32 +2,30 @@
   <VDataIterator :items="changes" :items-per-page="50" expand-on-click>
     <template #default="{ items, isExpanded, toggleExpand }">
       <template v-for="(item, index) in items" :key="item.raw.id">
-        <v-card
+        <VCard
           :disabled="index === 0"
           :ripple="false"
           class="mb-1"
-          @click="toggleExpand(item)"
+          @click="toggleExpand(item as any)"
         >
-          <v-card-title class="d-flex align-center">
+          <VCardTitle class="d-flex align-center">
             <v-icon color="orange-darken-3" icon="mdi-update" size="18" start />
             <div class="text-body-1">{{ item.raw.title }}</div>
-          </v-card-title>
-          <v-card-text v-if="isExpanded(item) || index === 0">
-            <JsonEditor
-              :main-menu-bar="false"
-              :status-bar="false"
-              :value="item.raw.data"
-              mode="text"
-            />
-          </v-card-text>
-        </v-card>
+          </VCardTitle>
+          <VCardText
+            v-show="isExpanded(item as any) || index === 0"
+            class="text-indigo-darken-4 bg-blue-grey-lighten-5 py-2 ma-3"
+          >
+            <pre>{{ stringifyObject(item.raw.data, { indent: '  ' }) }}</pre>
+          </VCardText>
+        </VCard>
       </template>
     </template>
   </VDataIterator>
 </template>
 
 <script setup lang="ts">
-import JsonEditor from 'vue3-ts-jsoneditor';
+import stringifyObject from 'stringify-object';
 
 defineProps<{ changes: any[] }>();
 </script>

package/src/components/SplashLoader.vue

@@ -12,7 +12,7 @@
             :model-value="progress"
             class="my-3"
           />
-          <div class="font-weight-bold">Beta preview v0.4.0</div>
+          <div class="font-weight-bold">Beta preview v{{ version }}</div>
         </div>
       </div>
     </div>
@@ -21,6 +21,7 @@
 
 <script lang="ts">
 import logoUrl from '../assets/logo.png';
+import { version } from './../../package.json';
 
 export default {
   props: {
@@ -49,6 +50,9 @@ export default {
     interval: 0,
     progress: 0,
   }),
+  computed: {
+    version: () => version,
+  },
   mounted() {
     this.setColor();
     if (!this.isFirstBoot) return;

package/vite.config.ts

@@ -33,10 +33,6 @@ export default defineConfig((): any => {
       },
     },
     logLevel: 'warn',
-    optimizeDeps: {
-      include: ['universal-cookie'],
-      entries: ['./src/main.js'],
-    },
     plugins: [vue(), vuetify({ autoImport: true })],
   };
 });