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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tailor-cms/tce-preview-runtime",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "dependencies": {
     "@lukeed/uuid": "^2.0.1",
     "@mdi/font": "7.2.96",
@@ -11,13 +11,13 @@
     "lodash": "^4.17.21",
     "sass": "1.68.0",
     "split.js": "1.6.5",
+    "stringify-object": "^5.0.0",
     "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"
   },
   "devDependencies": {

package/src/components/AppBar.vue

@@ -1,6 +1,7 @@
 <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>
@@ -20,7 +21,7 @@ const { showEdit, showDisplay, showBothComponents } = useGlobalState();
         density="compact"
         variant="tonal"
       >
-        0.4.0
+        {{ version }}
       </v-chip>
     </v-app-bar-title>
     <v-spacer />

package/src/components/MutationList.vue

@@ -12,13 +12,11 @@
             <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-show="isExpanded(item) || index === 0"
+            class="text-indigo-darken-4 bg-blue-grey-lighten-5 py-2 ma-3"
+          >
+            <pre>{{ stringifyObject(item.raw.data, { indent: '  ' }) }}</pre>
           </v-card-text>
         </v-card>
       </template>
@@ -27,7 +25,7 @@
 </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;