@tailor-cms/tce-preview-runtime 1.3.2 → 2.0.0-beta.1

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 (9) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/package.json +13 -13
  3. package/src/components/AppBar.vue +20 -26
  4. package/src/components/BottomPanel.vue +17 -16
  5. package/src/components/MutationList.vue +2 -2
  6. package/src/components/PreviewPanel.vue +1 -1
  7. package/src/components/SplashLoader.vue +2 -2
  8. package/src/main.ts +6 -1
  9. package/README.md +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @tailor-cms/tce-preview-runtime
2
2
 
3
+ ## 2.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - Upgrade to Vuetify 4, add procedures, isEmpty state and autosave support for Question elements.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+ - @tailor-cms/cek-common@2.0.0
13
+
3
14
  ## 1.3.2
4
15
 
5
16
  ### Patch Changes
package/package.json CHANGED
@@ -2,28 +2,28 @@
2
2
  "name": "@tailor-cms/tce-preview-runtime",
3
3
  "description": "Preview content element client side runtime",
4
4
  "author": "Studion <info@gostudion.com>",
5
- "version": "1.3.2",
5
+ "version": "2.0.0-beta.1",
6
6
  "type": "module",
7
7
  "dependencies": {
8
8
  "@mdi/font": "7.4.47",
9
- "@vitejs/plugin-vue": "6.0.0",
10
- "@vueuse/core": "13.5.0",
9
+ "@vitejs/plugin-vue": "6.0.5",
10
+ "@vueuse/core": "14.2.1",
11
11
  "date-fns": "^4.1.0",
12
- "lodash-es": "^4.17.21",
13
- "sass": "1.89.2",
12
+ "lodash-es": "^4.17.23",
13
+ "sass": "1.98.0",
14
14
  "split.js": "1.6.5",
15
- "stringify-object": "^5.0.0",
16
- "typescript": "5.8.3",
17
- "vite": "7.0.3",
18
- "vite-plugin-vuetify": "2.1.1",
19
- "vue": "3.5.17",
20
- "vuetify": "3.9.0",
21
- "@tailor-cms/cek-common": "^1.3.2"
15
+ "stringify-object": "^6.0.0",
16
+ "typescript": "5.9.3",
17
+ "vite": "8.0.0",
18
+ "vite-plugin-vuetify": "2.1.3",
19
+ "vue": "3.5.30",
20
+ "vuetify": "4.0.2",
21
+ "@tailor-cms/cek-common": "^2.0.0-beta.1"
22
22
  },
23
23
  "devDependencies": {
24
24
  "@types/lodash-es": "^4.17.12",
25
25
  "@types/stringify-object": "^4.0.5",
26
- "@tailor-cms/eslint-config": "^1.1.2"
26
+ "@tailor-cms/eslint-config": "^2.0.0-beta.1"
27
27
  },
28
28
  "publishConfig": {
29
29
  "access": "public"
package/src/components/AppBar.vue CHANGED
@@ -1,41 +1,35 @@
1
1
  <template>
2
- <VAppBar color="blue-grey-darken-4" elevation="6">
2
+ <VAppBar color="blue-grey-darken-4" elevation="3">
3
3
  <template #prepend>
4
4
  <VAppBarNavIcon class="ml-2">
5
5
  <img :src="logoUrl" alt="Tailor logo" width="36" />
6
6
  </VAppBarNavIcon>
7
7
  </template>
8
- <VAppBarTitle class="ml-2">
9
- Content Element Kit
8
+ <VAppBarTitle class="ml-2" text="Content Element Kit">
10
9
  <VChip
11
- class="ml-3 mb-1 text-body-2"
10
+ :text="version"
11
+ class="ml-3 mb-1 text-body-medium"
12
12
  color="#23F48B"
13
13
  density="compact"
14
14
  variant="tonal"
15
- >
16
- {{ version }}
17
- </VChip>
15
+ />
18
16
  </VAppBarTitle>
19
- <VBtnToggle class="mr-4" density="compact">
20
- <VBtn @click="showEdit">
21
- <span>Authoring</span>
22
- <VIcon end>mdi-pencil</VIcon>
23
- </VBtn>
24
- <VBtn @click="showDisplay">
25
- <span>End-user</span>
26
- <VIcon end>mdi-fullscreen</VIcon>
27
- </VBtn>
28
- <VBtn @click="showBothComponents">
29
- <span>Both</span>
30
- <VIcon end>mdi-math-norm-box</VIcon>
31
- </VBtn>
17
+ <VBtnToggle
18
+ base-color="white"
19
+ class="mr-4"
20
+ density="compact"
21
+ variant="tonal"
22
+ >
23
+ <VBtn append-icon="mdi-pencil" text="Authoring" @click="showEdit" />
24
+ <VBtn append-icon="mdi-fullscreen" text="End-user" @click="showDisplay" />
25
+ <VBtn
26
+ append-icon="mdi-math-norm-box"
27
+ text="Both"
28
+ @click="showBothComponents"
29
+ />
32
30
  </VBtnToggle>
33
- <VBtn href="https://github.com/tailor-cms/tce-template" icon>
34
- <VIcon>mdi-github</VIcon>
35
- </VBtn>
36
- <VBtn href="https://tailor-cms.github.io/xt/" icon>
37
- <VIcon>mdi-book-outline</VIcon>
38
- </VBtn>
31
+ <VBtn href="https://github.com/tailor-cms/tce-template" icon="mdi-github" />
32
+ <VBtn href="https://tailor-cms.github.io/xt/" icon="mdi-book-outline" />
39
33
  </VAppBar>
40
34
  </template>
41
35
 
package/src/components/BottomPanel.vue CHANGED
@@ -2,20 +2,23 @@
2
2
  <div>
3
3
  <VTabs v-model="state.selectedTab">
4
4
  <VTab :value="1">
5
- <VChip append-icon="mdi-pen" class="mr-2" color="indigo" size="small">
6
- {{ state.elementHistory.length }}
7
- </VChip>
5
+ <VChip
6
+ :text="state.elementHistory.length"
7
+ append-icon="mdi-pen"
8
+ class="mr-2"
9
+ color="indigo"
10
+ size="small"
11
+ />
8
12
  Authoring history
9
13
  </VTab>
10
14
  <VTab :value="2">
11
15
  <VChip
16
+ :text="state.userInteractions.length"
12
17
  append-icon="mdi-account"
13
18
  class="mr-2"
14
19
  color="green"
15
20
  size="small"
16
- >
17
- {{ state.userInteractions.length }}
18
- </VChip>
21
+ />
19
22
  End-User state history
20
23
  </VTab>
21
24
  </VTabs>
@@ -24,25 +27,23 @@
24
27
  <VWindowItem :value="1" class="authoring-window">
25
28
  <VBtn
26
29
  class="mb-4"
27
- color="indigoDarken4"
30
+ color="indigo-darken-4"
31
+ prepend-icon="mdi-refresh"
32
+ text="Reset content element"
28
33
  variant="tonal"
29
34
  @click="$emit('resetElement')"
30
- >
31
- <VIcon class="mr-2 left">mdi-refresh</VIcon>
32
- Reset content element
33
- </VBtn>
35
+ />
34
36
  <MutationList :changes="state.elementHistory" />
35
37
  </VWindowItem>
36
38
  <VWindowItem :value="2" class="user-state-window">
37
39
  <VBtn
38
40
  class="mb-4"
39
- color="indigoDarken4"
41
+ color="indigo-darken-4"
42
+ prepend-icon="mdi-refresh"
43
+ text="Reset state context"
40
44
  variant="tonal"
41
45
  @click="$emit('resetState')"
42
- >
43
- <VIcon class="mr-2 left">mdi-refresh</VIcon>
44
- Reset state context
45
- </VBtn>
46
+ />
46
47
  <MutationList :changes="state.userInteractions" />
47
48
  </VWindowItem>
48
49
  </VWindow>
package/src/components/MutationList.vue CHANGED
@@ -10,7 +10,7 @@
10
10
  >
11
11
  <VCardTitle class="d-flex align-center">
12
12
  <v-icon color="orange-darken-3" icon="mdi-update" size="18" start />
13
- <div class="text-body-1">{{ item.raw.title }}</div>
13
+ <div class="text-body-large">{{ item.raw.title }}</div>
14
14
  </VCardTitle>
15
15
  <VCardText
16
16
  v-show="isExpanded(item as any) || index === 0"
@@ -32,6 +32,6 @@ defineProps<{ changes: any[] }>();
32
32
 
33
33
  <style scoped lang="scss">
34
34
  .v-card--disabled > :not(.v-card__loader) {
35
- opacity: 1 !important;
35
+ opacity: 1;
36
36
  }
37
37
  </style>
package/src/components/PreviewPanel.vue CHANGED
@@ -45,6 +45,6 @@ onMounted(() => initPanels());
45
45
 
46
46
  <style scoped>
47
47
  iframe {
48
- background: #eceff1 !important;
48
+ background: #eceff1;
49
49
  }
50
50
  </style>
package/src/components/SplashLoader.vue CHANGED
@@ -5,7 +5,7 @@
5
5
  <div class="splash-loader__anim">
6
6
  <img :src="logo" alt="Logo" width="88" />
7
7
  </div>
8
- <div class="splash-loader__text text-body-1">
8
+ <div class="splash-loader__text text-body-large">
9
9
  <div>Booting Content Element Kit....</div>
10
10
  <div class="font-weight-bold">v{{ version }}</div>
11
11
  </div>
@@ -81,7 +81,7 @@ $splash-color: var(--splash-color);
81
81
  transition: opacity 0.3s;
82
82
  }
83
83
 
84
- .fade-enter,
84
+ .fade-enter-from,
85
85
  .fade-leave-to {
86
86
  opacity: 0;
87
87
  }
package/src/main.ts CHANGED
@@ -7,5 +7,10 @@ import { createVuetify } from 'vuetify';
7
7
  import App from './App.vue';
8
8
 
9
9
  createApp(App)
10
- .use(createVuetify({ icons: { defaultSet: 'mdi' } }))
10
+ .use(
11
+ createVuetify({
12
+ theme: { defaultTheme: 'light' },
13
+ icons: { defaultSet: 'mdi' },
14
+ }),
15
+ )
11
16
  .mount('#app');
package/README.md DELETED
@@ -1 +0,0 @@
1
- # Content Element Kit preview