@tailor-cms/tce-preview-runtime 0.0.30 → 0.1.0-beta.2

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 (5) hide show
  1. package/package.json +13 -12
  2. package/src/components/MainLayout.vue +4 -1
  3. package/src/components/PreviewPanel.vue +28 -38
  4. package/{index.html → src/index.html} +1 -1
  5. package/vite.config.ts +10 -5
package/package.json CHANGED
@@ -1,19 +1,20 @@
1
1
  {
2
2
  "name": "@tailor-cms/tce-preview-runtime",
3
- "version": "0.0.30",
3
+ "version": "0.1.0-beta.2",
4
4
  "dependencies": {
5
- "@mdi/font": "^7.0.96",
5
+ "@mdi/font": "7.2.96",
6
6
  "@vitejs/plugin-vue": "4.3.4",
7
- "@vueuse/core": "^9.1.1",
8
- "ky": "^0.31.4",
9
- "split.js": "^1.6.4",
10
- "typescript": "^5.1.6",
11
- "vite": "^4.4.9",
12
- "vite-plugin-vuetify": "^1.0.2",
13
- "vue": "^3.3.4",
14
- "vue-tsc": "^0.39.5",
15
- "vue3-ts-jsoneditor": "^2.9.0",
16
- "vuetify": "^3.3.14"
7
+ "@vueuse/core": "10.4.1",
8
+ "ky": "1.0.1",
9
+ "sass": "1.68.0",
10
+ "split.js": "1.6.5",
11
+ "typescript": "5.2.2",
12
+ "vite": "4.4.9",
13
+ "vite-plugin-vuetify": "1.0.2",
14
+ "vue": "3.3.4",
15
+ "vue-tsc": "1.8.13",
16
+ "vue3-ts-jsoneditor": "2.9.0",
17
+ "vuetify": "3.3.17"
17
18
  },
18
19
  "devDependencies": {
19
20
  "@tailor-cms/eslint-config": "0.0.2"
package/src/components/MainLayout.vue CHANGED
@@ -33,7 +33,10 @@ onMounted(() => {
33
33
  direction: 'vertical',
34
34
  sizes: [70, 30],
35
35
  });
36
- setTimeout(() => (isLoaded.value = true), isFirstBoot ? 25000 : 5000);
36
+ setTimeout(() => {
37
+ isLoaded.value = true;
38
+ if (isFirstBoot) document.location.reload();
39
+ }, isFirstBoot ? 25000 : 5000);
37
40
  });
38
41
  </script>
39
42
 
package/src/components/PreviewPanel.vue CHANGED
@@ -1,55 +1,45 @@
1
1
  <template>
2
2
  <div v-show="isLoaded" class="d-flex flex-grow-1 preview-panel">
3
- <iframe
4
- :id="PANELS.EDIT"
5
- ref="editPanel"
6
- frameBorder="0"
7
- sandbox="allow-scripts"
8
- src="http://localhost:8010"
9
- title="Edit component container"
10
- >
11
- </iframe>
12
- <iframe
13
- :id="PANELS.DISPLAY"
14
- ref="displayPanel"
15
- frameBorder="0"
16
- sandbox="allow-scripts"
17
- src="http://localhost:8020"
18
- title="Display component container"
19
- >
20
- </iframe>
3
+ <div :id="PANELS.EDIT" class="d-flex flex-1-1-50">
4
+ <iframe
5
+ :key="`author-${isLoaded ? new Date().getTime() : 0}`"
6
+ frameBorder="0"
7
+ sandbox="allow-scripts"
8
+ src="http://localhost:8010"
9
+ title="Edit component container"
10
+ class="flex-1-1-100"
11
+ >
12
+ </iframe>
13
+ </div>
14
+ <div :id="PANELS.DISPLAY" class="d-flex flex-1-1-50">
15
+ <iframe
16
+ :key="`display-${isLoaded ? new Date().getTime() : 0}`"
17
+ frameBorder="0"
18
+ sandbox="allow-scripts"
19
+ src="http://localhost:8020"
20
+ title="Display component container"
21
+ class="flex-1-1-100"
22
+ >
23
+ </iframe>
24
+ </div>
21
25
  </div>
22
26
  </template>
23
27
 
24
28
  <script setup lang="ts">
25
- import { onMounted, ref, watch } from 'vue';
29
+ import { onMounted } from 'vue';
26
30
  import Split from 'split.js';
27
31
 
28
32
  import { PANELS, useGlobalState } from '../state';
29
33
 
30
- const props = defineProps<{ isLoaded: Boolean }>();
31
-
32
- const editPanel = ref(null);
33
- const displayPanel = ref(null);
34
34
  const { previewPanelSplit } = useGlobalState();
35
35
 
36
- onMounted(() => {
36
+ defineProps<{ isLoaded: Boolean }>();
37
+
38
+ const initPanels = () => {
37
39
  previewPanelSplit.value = Split([`#${PANELS.EDIT}`, `#${PANELS.DISPLAY}`], {
38
40
  minSize: [0, 0],
39
41
  });
40
- });
41
-
42
- watch(props.isLoaded, (isLoaded) => {
43
- if (!isLoaded) return;
44
- reloadPreview();
45
- });
46
-
47
- const reloadPreview = () => {
48
- /* eslint-disable */
49
- // @ts-ignore
50
- editPanel.value.src = editPanel.value.src;
51
- // @ts-ignore
52
- displayPanel.value.src = displayPanel.value.src;
53
- /* eslint-enable */
54
42
  };
43
+
44
+ onMounted(() => initPanels());
55
45
  </script>
package/{index.html → src/index.html} RENAMED
@@ -8,6 +8,6 @@
8
8
  </head>
9
9
  <body class="overflow-hidden">
10
10
  <div id="app"></div>
11
- <script type="module" src="/src/main.ts"></script>
11
+ <script type="module" src="./main.ts"></script>
12
12
  </body>
13
13
  </html>
package/vite.config.ts CHANGED
@@ -3,9 +3,14 @@ import vue from '@vitejs/plugin-vue';
3
3
  import vuetify from 'vite-plugin-vuetify';
4
4
 
5
5
  // https://vitejs.dev/config/
6
- export default defineConfig({
7
- server: {
8
- port: 8080,
9
- },
10
- plugins: [vue(), vuetify({ autoImport: true })],
6
+ export default defineConfig(({ mode }): any => {
7
+ return {
8
+ root: './src',
9
+ server: {
10
+ port: 8080,
11
+ },
12
+ logLevel: 'warn',
13
+ optimizeDeps: { entries: ['./src/main.js'] },
14
+ plugins: [vue(), vuetify({ autoImport: true })],
15
+ };
11
16
  });