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

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.
Files changed (3) hide show
  1. package/package.json +2 -2
  2. package/src/components/MainLayout.vue +33 -12
  3. package/src/components/SplashLoader.vue +113 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tailor-cms/tce-preview-runtime",
3
- "version": "0.0.21",
3
+ "version": "0.0.23",
4
4
  "dependencies": {
5
5
  "@mdi/font": "^7.0.96",
6
6
  "@vitejs/plugin-vue": "4.3.4",
@@ -22,7 +22,7 @@
22
22
  "access": "public"
23
23
  },
24
24
  "scripts": {
25
- "dev": "vite",
25
+ "dev": "vite --open",
26
26
  "build": "vue-tsc --noEmit && vite build",
27
27
  "serve": "vite preview",
28
28
  "lint": "eslint --ext .js,.ts,.vue .",
package/src/components/MainLayout.vue CHANGED
@@ -1,9 +1,10 @@
1
1
  <script setup lang="ts">
2
- import { onMounted } from 'vue';
2
+ import { onMounted, ref } from 'vue';
3
3
  import JsonEditor from 'vue3-ts-jsoneditor';
4
4
  import Split from 'split.js';
5
5
 
6
6
  import { PANELS, useGlobalState } from '../state';
7
+ import VueSplash from './SplashLoader.vue';
7
8
 
8
9
  // TODO: Enforce order
9
10
  // const SERVER_PROP_ORDER = [
@@ -24,27 +25,45 @@ import { PANELS, useGlobalState } from '../state';
24
25
  // ];
25
26
 
26
27
  const props = defineProps<{ element: any }>();
28
+
29
+ const isLoaded = ref(false);
30
+ const editPanel = ref(null);
31
+ const displayPanel = ref(null);
32
+
27
33
  const { isDark, splitJs } = useGlobalState();
28
34
 
35
+ const reloadPreview = () => {
36
+ setTimeout(() => {
37
+ editPanel.value.src = editPanel.value.src;
38
+ displayPanel.value.src = displayPanel.value.src;
39
+ }, 2000);
40
+ };
41
+
29
42
  onMounted(() => {
30
- // Component preview split
31
- splitJs.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
32
- minSize: [0, 0],
33
- });
34
- // Client/server vertical split
35
- Split([`#panelTop`, `#panelBottom`], {
36
- direction: 'vertical',
37
- sizes: [70, 30],
38
- });
43
+ setTimeout(() => {
44
+ isLoaded.value = true;
45
+ reloadPreview();
46
+ // Client/server vertical split
47
+ Split([`#panelTop`, `#panelBottom`], {
48
+ direction: 'vertical',
49
+ sizes: [70, 30],
50
+ });
51
+ // Component preview split
52
+ splitJs.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
53
+ minSize: [0, 0],
54
+ });
55
+ }, 6000);
39
56
  });
40
57
  </script>
41
58
 
42
59
  <template>
43
60
  <main :class="{ 'dark-theme': isDark }">
44
- <div id="panelTop" class="d-flex panel">
61
+ <VueSplash v-show="!isLoaded" color="#00bfa5" />
62
+ <div v-show="isLoaded" id="panelTop" class="d-flex panel">
45
63
  <div class="d-flex flex-grow-1">
46
64
  <iframe
47
65
  :id="PANELS.EDIT"
66
+ ref="editPanel"
48
67
  frameBorder="0"
49
68
  sandbox="allow-scripts"
50
69
  src="http://localhost:8010"
@@ -53,6 +72,7 @@ onMounted(() => {
53
72
  </iframe>
54
73
  <iframe
55
74
  :id="PANELS.DISPLAY"
75
+ ref="displayPanel"
56
76
  frameBorder="0"
57
77
  sandbox="allow-scripts"
58
78
  src="http://localhost:8020"
@@ -61,12 +81,13 @@ onMounted(() => {
61
81
  </iframe>
62
82
  </div>
63
83
  </div>
64
- <div id="panelBottom" class="panel">
84
+ <div v-show="isLoaded" id="panelBottom" class="panel">
65
85
  <v-tabs density="compact" hide-slider>
66
86
  <v-tab>Server state</v-tab>
67
87
  </v-tabs>
68
88
  <div class="pa-5">
69
89
  <JsonEditor
90
+ v-if="isLoaded"
70
91
  :main-menu-bar="false"
71
92
  :status-bar="false"
72
93
  :value="props.element"
package/src/components/SplashLoader.vue ADDED
@@ -0,0 +1,113 @@
1
+ <template>
2
+ <transition name="fade">
3
+ <div
4
+ :class="['vue-splash', { 'vue-splash--fixed': fixed }]"
5
+ :style="containerStyle"
6
+ >
7
+ <div>
8
+ <div class="vue-splash__anim">
9
+ <img :src="logo" :style="imageStyle" alt="Logo" />
10
+ </div>
11
+ <div class="vue-splash__text text-body-1">
12
+ <div>Booting Teaching Element Kit....</div>
13
+ <div class="font-weight-bold">Alpha preview v0.0.1</div>
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </transition>
18
+ </template>
19
+
20
+ <script lang="ts">
21
+ import logoUrl from '../assets/logo.png';
22
+
23
+ export default {
24
+ props: {
25
+ logo: {
26
+ type: String,
27
+ default: logoUrl,
28
+ },
29
+ color: {
30
+ type: String,
31
+ default: '#00bfa5',
32
+ },
33
+ backgroundColor: {
34
+ type: String,
35
+ default: '',
36
+ },
37
+ },
38
+ computed: {
39
+ imageStyle: () => ({ width: '88px' }),
40
+ containerStyle() {
41
+ return {
42
+ backgroundColor: this.backgroundColor || '#fff',
43
+ };
44
+ },
45
+ },
46
+ created() {
47
+ this.setColor();
48
+ },
49
+ methods: {
50
+ setColor() {
51
+ document.documentElement.style.setProperty('--splash-color', this.color);
52
+ },
53
+ },
54
+ };
55
+ </script>
56
+
57
+ <style lang="scss" scoped>
58
+ $splash-color: var(--splash-color);
59
+
60
+ .vue-splash {
61
+ flex: 1;
62
+ width: 100%;
63
+ height: 100%;
64
+ display: flex;
65
+ align-items: center;
66
+ justify-content: center;
67
+
68
+ &--fixed {
69
+ top: 0;
70
+ left: 0;
71
+ right: 0;
72
+ bottom: 0;
73
+ width: 100%;
74
+ height: 100%;
75
+ position: fixed;
76
+ background-color: white;
77
+ }
78
+ }
79
+
80
+ .vue-splash__anim {
81
+ text-align: center;
82
+ animation: splashAnimation 1.3s infinite;
83
+
84
+ img {
85
+ margin: auto;
86
+ }
87
+ }
88
+
89
+ .vue-splash__text {
90
+ margin-top: 50px;
91
+ font-size: 1rem;
92
+ text-align: center;
93
+ }
94
+
95
+ @keyframes splashAnimation {
96
+ 0% {
97
+ filter: drop-shadow(0px 0px 0px $splash-color);
98
+ }
99
+ 100% {
100
+ filter: drop-shadow(0px 0px 200px $splash-color);
101
+ }
102
+ }
103
+
104
+ .fade-enter-active,
105
+ .fade-leave-active {
106
+ transition: opacity 0.3s;
107
+ }
108
+
109
+ .fade-enter,
110
+ .fade-leave-to {
111
+ opacity: 0;
112
+ }
113
+ </style>