@tailor-cms/tce-preview-runtime 0.0.15 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tailor-cms/tce-preview-runtime",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.17",
|
|
4
4
|
"dependencies": {
|
|
5
5
|
"@mdi/font": "^7.0.96",
|
|
6
6
|
"@vitejs/plugin-vue": "^3.0.3",
|
|
7
7
|
"@vueuse/core": "^9.1.1",
|
|
8
8
|
"ky": "^0.31.4",
|
|
9
|
-
"sort-object-keys": "^1.1.3",
|
|
10
9
|
"split.js": "^1.6.4",
|
|
11
10
|
"typescript": "^5.1.6",
|
|
12
11
|
"vite": "^3.0.7",
|
|
13
12
|
"vite-plugin-vuetify": "^1.0.2",
|
|
14
13
|
"vue": "^3.2.37",
|
|
15
|
-
"vue-json-pretty": "^2.2.4",
|
|
16
14
|
"vue-tsc": "^0.39.5",
|
|
15
|
+
"vue3-ts-jsoneditor": "^2.9.0",
|
|
17
16
|
"vuetify": "^3.3.14"
|
|
18
17
|
},
|
|
19
18
|
"devDependencies": {
|
|
@@ -7,10 +7,10 @@ const { isDark, toggleDark, showEdit, showDisplay, showBothComponents } =
|
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<template>
|
|
10
|
-
<v-app-bar :color="isDark ? '
|
|
10
|
+
<v-app-bar :color="isDark ? '#29292f' : 'grey-lighten-5'">
|
|
11
11
|
<template #prepend>
|
|
12
12
|
<v-app-bar-nav-icon class="ml-3">
|
|
13
|
-
<v-avatar :color="isDark ? '
|
|
13
|
+
<v-avatar :color="isDark ? 'transparent' : '#29292f'" size="48">
|
|
14
14
|
<img :src="logoUrl" alt="Tailor logo" width="30" />
|
|
15
15
|
</v-avatar>
|
|
16
16
|
</v-app-bar-nav-icon>
|
|
@@ -1,44 +1,30 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import 'vue
|
|
3
|
-
|
|
4
|
-
import * as sortObject from 'sort-object-keys';
|
|
5
|
-
import { onMounted, ref, watch } from 'vue';
|
|
2
|
+
import { onMounted } from 'vue';
|
|
3
|
+
import JsonEditor from 'vue3-ts-jsoneditor';
|
|
6
4
|
import Split from 'split.js';
|
|
7
|
-
import VueJsonPretty from 'vue-json-pretty';
|
|
8
|
-
|
|
9
|
-
const SERVER_PROP_ORDER = [
|
|
10
|
-
'id',
|
|
11
|
-
'uid',
|
|
12
|
-
'type',
|
|
13
|
-
'position',
|
|
14
|
-
'data',
|
|
15
|
-
'meta',
|
|
16
|
-
'refs',
|
|
17
|
-
'contentId',
|
|
18
|
-
'contentSignature',
|
|
19
|
-
'linked',
|
|
20
|
-
'detached',
|
|
21
|
-
'createdAt',
|
|
22
|
-
'updatedAt',
|
|
23
|
-
'deletedAt',
|
|
24
|
-
];
|
|
25
5
|
|
|
26
6
|
import { PANELS, useGlobalState } from '../state';
|
|
27
7
|
|
|
28
|
-
|
|
29
|
-
const
|
|
8
|
+
// TODO: Enforce order
|
|
9
|
+
// const SERVER_PROP_ORDER = [
|
|
10
|
+
// 'id',
|
|
11
|
+
// 'uid',
|
|
12
|
+
// 'type',
|
|
13
|
+
// 'position',
|
|
14
|
+
// 'data',
|
|
15
|
+
// 'meta',
|
|
16
|
+
// 'refs',
|
|
17
|
+
// 'contentId',
|
|
18
|
+
// 'contentSignature',
|
|
19
|
+
// 'linked',
|
|
20
|
+
// 'detached',
|
|
21
|
+
// 'createdAt',
|
|
22
|
+
// 'updatedAt',
|
|
23
|
+
// 'deletedAt',
|
|
24
|
+
// ];
|
|
30
25
|
|
|
31
26
|
const props = defineProps<{ element: any }>();
|
|
32
27
|
const { isDark, splitJs } = useGlobalState();
|
|
33
|
-
const backgroundColor = ref('');
|
|
34
|
-
|
|
35
|
-
watch(
|
|
36
|
-
isDark,
|
|
37
|
-
(value) => {
|
|
38
|
-
backgroundColor.value = value ? DARK_BACKGROUND : LIGHT_BACKGROUND;
|
|
39
|
-
},
|
|
40
|
-
{ immediate: true },
|
|
41
|
-
);
|
|
42
28
|
|
|
43
29
|
onMounted(() => {
|
|
44
30
|
// Component preview split
|
|
@@ -55,11 +41,10 @@ onMounted(() => {
|
|
|
55
41
|
|
|
56
42
|
<template>
|
|
57
43
|
<main :class="{ 'dark-theme': isDark }">
|
|
58
|
-
<div id="panelTop" class="d-flex">
|
|
44
|
+
<div id="panelTop" class="d-flex panel">
|
|
59
45
|
<div class="d-flex flex-grow-1">
|
|
60
46
|
<iframe
|
|
61
47
|
:id="PANELS.EDIT"
|
|
62
|
-
:style="{ backgroundColor }"
|
|
63
48
|
frameBorder="0"
|
|
64
49
|
sandbox="allow-scripts"
|
|
65
50
|
src="http://localhost:8010"
|
|
@@ -68,7 +53,6 @@ onMounted(() => {
|
|
|
68
53
|
</iframe>
|
|
69
54
|
<iframe
|
|
70
55
|
:id="PANELS.DISPLAY"
|
|
71
|
-
:style="{ backgroundColor }"
|
|
72
56
|
frameBorder="0"
|
|
73
57
|
sandbox="allow-scripts"
|
|
74
58
|
src="http://localhost:8020"
|
|
@@ -77,12 +61,17 @@ onMounted(() => {
|
|
|
77
61
|
</iframe>
|
|
78
62
|
</div>
|
|
79
63
|
</div>
|
|
80
|
-
<div id="panelBottom"
|
|
64
|
+
<div id="panelBottom" class="panel">
|
|
81
65
|
<v-tabs density="compact" hide-slider>
|
|
82
66
|
<v-tab>Server state</v-tab>
|
|
83
67
|
</v-tabs>
|
|
84
68
|
<div class="pa-5">
|
|
85
|
-
<
|
|
69
|
+
<JsonEditor
|
|
70
|
+
:main-menu-bar="false"
|
|
71
|
+
:status-bar="false"
|
|
72
|
+
:value="props.element"
|
|
73
|
+
mode="text"
|
|
74
|
+
/>
|
|
86
75
|
</div>
|
|
87
76
|
</div>
|
|
88
77
|
</main>
|
|
@@ -91,6 +80,10 @@ onMounted(() => {
|
|
|
91
80
|
<style>
|
|
92
81
|
main {
|
|
93
82
|
height: calc(100vh - var(--nav-height));
|
|
83
|
+
|
|
84
|
+
.panel {
|
|
85
|
+
background-color: #eceff1;
|
|
86
|
+
}
|
|
94
87
|
}
|
|
95
88
|
|
|
96
89
|
.gutter {
|
|
@@ -114,5 +107,10 @@ main {
|
|
|
114
107
|
.gutter.gutter-vertical {
|
|
115
108
|
background-color: #333;
|
|
116
109
|
}
|
|
110
|
+
|
|
111
|
+
.jse-theme-dark .cm-content,
|
|
112
|
+
.jse-theme-dark .cm-gutters {
|
|
113
|
+
background-color: #29292f !important;
|
|
114
|
+
}
|
|
117
115
|
}
|
|
118
116
|
</style>
|