@platecms/delta-vue 0.13.0 → 1.3.0

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 (10) hide show
  1. package/__generated__/graphql.ts +490 -108
  2. package/package.json +5 -5
  3. package/src/components/editor/EditorGridPlacement.vue +16 -3
  4. package/src/components/editor/controls/EditorControlsContainer.vue +160 -83
  5. package/src/components/placeholders/EmptyGridPlacements.vue +49 -22
  6. package/src/components/placeholders/MissingExperienceComponent.vue +15 -8
  7. package/src/views/ExperienceEditorView.vue +14 -6
  8. package/src/views/ExperienceView.vue +3 -3
  9. package/src/views/NotFoundView.vue +22 -5
  10. package/src/components/atoms/icon/FontAwesomeIcon.vue +0 -21
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@platecms/delta-vue",
3
- "version": "0.13.0",
3
+ "version": "1.3.0",
4
4
  "description": "Plugin to connect to the Plate Delta CMS in a Vue application.",
5
5
  "license": "UNLICENSED",
6
6
  "publishConfig": {
@@ -23,10 +23,10 @@
23
23
  "./styles.css": "./src/styles.css"
24
24
  },
25
25
  "dependencies": {
26
- "@platecms/delta-cast": "0.13.0",
27
- "@platecms/delta-castscript": "0.13.0",
28
- "@platecms/delta-client": "0.13.0",
29
- "@platecms/delta-plate-resource-notation": "0.13.0",
26
+ "@platecms/delta-cast": "1.3.0",
27
+ "@platecms/delta-castscript": "1.3.0",
28
+ "@platecms/delta-client": "1.3.0",
29
+ "@platecms/delta-plate-resource-notation": "1.3.0",
30
30
  "@graphql-codegen/cli": "5.0.7",
31
31
  "@graphql-typed-document-node/core": "3.2.0",
32
32
  "axios": "1.11.0",
package/src/components/editor/EditorGridPlacement.vue CHANGED
@@ -61,7 +61,7 @@ function handleMouseUp() {
61
61
  }"
62
62
  @mousemove="throttleHandleMouseOver"
63
63
  >
64
- <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'top'" class="dv:animate-pulse dv:outline-2 dv:outline-offset-2 dv:outline-gray-800 dv:outline-dashed">
64
+ <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'top'" class="editor-grid-placement-target">
65
65
  <RenderLibraryComponent :building-block="buildingBlockToCreate">
66
66
  <template v-slot:missing-component="slotProps">
67
67
  <MissingExperienceComponent v-if="slotProps.data" :building-block="slotProps.data" />
@@ -71,7 +71,7 @@ function handleMouseUp() {
71
71
 
72
72
  <EditorExperienceComponent :experience-component="gridPlacement.experienceComponent as Draft<ExperienceComponent>" :grid-placement="gridPlacement" :rows="rows" />
73
73
 
74
- <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'bottom'" class="dv:animate-pulse dv:outline-2 dv:outline-offset-2 dv:outline-gray-800 dv:outline-dashed">
74
+ <div v-if="isInsideTarget && mode === 'drag' && mousePosition === 'bottom'" class="editor-grid-placement-target">
75
75
  <RenderLibraryComponent :building-block="buildingBlockToCreate">
76
76
  <template v-slot:missing-component="slotProps">
77
77
  <MissingExperienceComponent v-if="slotProps.data" :building-block="slotProps.data" />
@@ -81,6 +81,19 @@ function handleMouseUp() {
81
81
  </div>
82
82
  </template>
83
83
 
84
- <style scoped>
84
+ <style scoped lang="scss">
85
+ .editor-grid-placement-target {
86
+ outline: 2px dashed #1f2937;
87
+ outline-offset: 2px;
88
+ animation: pulse 2s cubic-bezier(.4,0,.6,1)infinite;
89
+ @keyframes pulse {
90
+ 0% {
91
+ opacity: 1;
92
+ }
93
+ 50% {
94
+ opacity: 0.5;
95
+ }
96
+ }
97
+ }
85
98
 
86
99
  </style>
package/src/components/editor/controls/EditorControlsContainer.vue CHANGED
@@ -10,7 +10,6 @@ import {
10
10
  WindowConnector
11
11
  } from "@platecms/delta-client/utils"
12
12
  import type {ExperienceComponent} from "../../../../__generated__/graphql";
13
- import FontAwesomeIcon from '../../atoms/icon/FontAwesomeIcon.vue';
14
13
 
15
14
  const connector = inject<WindowConnector>('connector')
16
15
  const mode = inject<'edit' | 'drag' | 'preview'>('mode', 'preview')
@@ -23,98 +22,176 @@ defineProps<{
23
22
  </script>
24
23
 
25
24
  <template>
26
- <div class="dv:relative dv:group/controls dv:hover:outline-2 dv:outline-gray-800 dv:hover:-outline-offset-2 dv:hover:bg-gray-200 hover:dv:outline-gray-800 hover:dv:outline-dashed dv:z-40 dv:cursor-pointer">
27
- <slot />
28
-
29
- <div class="dv:hidden dv:group-hover/controls:flex dv:absolute dv:z-50 dv:top-0 dv:w-full dv:items-center dv:justify-center">
30
- <div class="dv:rounded-b-md dv:bg-gray-800 dv:px-6 dv:py-2 dv:text-white dv:text-xs">
31
- <p>
32
- {{ experienceComponent.buildingBlock?.slug ?? 'No slug' }}
33
- </p>
34
- </div>
25
+ <div class="editor-container">
26
+ <div class="editor-container-content">
27
+ <slot />
35
28
  </div>
36
- <div v-if="experienceComponent.isDraft" class="delta-snapshot-ignore dv:absolute dv:top-4 dv:right-4">
37
- <div class="dv:px-3 dv:h-8 dv:bg-gray-800 dv:text-white dv:text-xs dv:flex dv:flex-col dv:gap-2 dv:items-center dv:justify-center dv:rounded-full">
38
- <p>
39
- Draft
40
- </p>
41
- </div>
29
+ <div v-if="experienceComponent.isDraft" class="delta-snapshot-ignore editor-container-draft">
30
+ Draft
42
31
  </div>
43
- <div v-if="mode === 'edit'" class="delta-snapshot-ignore dv:absolute dv:left-4 dv:top-4 dv:flex dv:gap-2 dv:z-50">
44
- <!-- Edit button -->
45
- <div
46
- @click="connector?.send({
47
- type: ConnectorEventType.EXPERIENCE_COMPONENT_EDIT,
48
- payload: {
49
- uuid: experienceComponent.uuid,
50
- prn: experienceComponent.prn
51
- }
52
- } as ExperienceComponentEditEvent)"
53
- class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
54
- >
55
- <FontAwesomeIcon :icon="['fal', 'pencil']" />
32
+ <div class="editor-container-controls delta-snapshot-ignore">
33
+ <div class="editor-container-controls-label">
34
+ {{ experienceComponent.buildingBlock?.slug ?? 'No slug' }}
56
35
  </div>
36
+ <div v-if="mode === 'edit'" class="editor-container-controls-buttons">
37
+ <!-- Edit button -->
38
+ <div
39
+ @click="connector?.send({
40
+ type: ConnectorEventType.EXPERIENCE_COMPONENT_EDIT,
41
+ payload: {
42
+ uuid: experienceComponent.uuid,
43
+ prn: experienceComponent.prn
44
+ }
45
+ } as ExperienceComponentEditEvent)"
46
+ class="editor-container-controls-button"
47
+ >
48
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
49
+ <!-- !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
50
+ <path fill="#fff" d="M100.4 417.2C104.5 402.6 112.2 389.3 123 378.5L304.2 197.3L338.1 163.4C354.7 180 389.4 214.7 442.1 267.4L476 301.3L442.1 335.2L260.9 516.4C250.2 527.1 236.8 534.9 222.2 539L94.4 574.6C86.1 576.9 77.1 574.6 71 568.4C64.9 562.2 62.6 553.3 64.9 545L100.4 417.2zM156 413.5C151.6 418.2 148.4 423.9 146.7 430.1L122.6 517L209.5 492.9C215.9 491.1 221.7 487.8 226.5 483.2L155.9 413.5zM510 267.4C493.4 250.8 458.7 216.1 406 163.4L372 129.5C398.5 103 413.4 88.1 416.9 84.6C430.4 71 448.8 63.4 468 63.4C487.2 63.4 505.6 71 519.1 84.6L554.8 120.3C568.4 133.9 576 152.3 576 171.4C576 190.5 568.4 209 554.8 222.5C551.3 226 536.4 240.9 509.9 267.4z"/>
51
+ </svg>
52
+ </div>
57
53
 
58
- <!-- Remove button -->
59
- <div
60
- @click="connector?.send({
61
- type: ConnectorEventType.EXPERIENCE_COMPONENT_REMOVE,
62
- payload: {
63
- uuid: experienceComponent.uuid,
64
- prn: experienceComponent.prn
65
- }
66
- } as ExperienceComponentRemoveEvent)"
67
- class="delta-snapshot-ignore dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
68
- >
69
- <FontAwesomeIcon :icon="['fal', 'trash-can']" />
70
- </div>
71
-
72
- <!-- Move Up button -->
73
- <div
74
- v-if="(row ?? 1) > 1"
75
- @click="connector?.send({
76
- type: ConnectorEventType.GRID_PLACEMENT_UP,
77
- payload: {
78
- uuid: experienceComponent.uuid,
79
- prn: experienceComponent.prn
80
- }
81
- } as GridPlacementUpEvent)"
82
- class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
83
- >
84
- <FontAwesomeIcon :icon="['fal', 'arrow-up']" />
85
- </div>
54
+ <!-- Remove button -->
55
+ <div
56
+ @click="connector?.send({
57
+ type: ConnectorEventType.EXPERIENCE_COMPONENT_REMOVE,
58
+ payload: {
59
+ uuid: experienceComponent.uuid,
60
+ prn: experienceComponent.prn
61
+ }
62
+ } as ExperienceComponentRemoveEvent)"
63
+ class="editor-container-controls-button"
64
+ >
65
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
66
+ <!-- !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
67
+ <path fill="#fff" d="M262.2 48C248.9 48 236.9 56.3 232.2 68.8L216 112L120 112C106.7 112 96 122.7 96 136C96 149.3 106.7 160 120 160L520 160C533.3 160 544 149.3 544 136C544 122.7 533.3 112 520 112L424 112L407.8 68.8C403.1 56.3 391.2 48 377.8 48L262.2 48zM128 208L128 512C128 547.3 156.7 576 192 576L448 576C483.3 576 512 547.3 512 512L512 208L464 208L464 512C464 520.8 456.8 528 448 528L192 528C183.2 528 176 520.8 176 512L176 208L128 208zM288 280C288 266.7 277.3 256 264 256C250.7 256 240 266.7 240 280L240 456C240 469.3 250.7 480 264 480C277.3 480 288 469.3 288 456L288 280zM400 280C400 266.7 389.3 256 376 256C362.7 256 352 266.7 352 280L352 456C352 469.3 362.7 480 376 480C389.3 480 400 469.3 400 456L400 280z"/>
68
+ </svg>
69
+ </div>
86
70
 
87
- <!-- Move Down button -->
88
- <div
89
- v-if="(row ?? 1) <( (rows ?? 1))"
90
- @click="connector?.send({
91
- type: ConnectorEventType.GRID_PLACEMENT_DOWN,
92
- payload: {
93
- uuid: experienceComponent.uuid,
94
- prn: experienceComponent.prn
95
- }
96
- } as GridPlacementDownEvent)"
97
- class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer"
98
- >
99
- <FontAwesomeIcon :icon="['fal', 'arrow-down']" />
100
- </div>
71
+ <!-- Move Up button -->
72
+ <div
73
+ v-if="(row ?? 1) > 1"
74
+ @click="connector?.send({
75
+ type: ConnectorEventType.GRID_PLACEMENT_UP,
76
+ payload: {
77
+ uuid: experienceComponent.uuid,
78
+ prn: experienceComponent.prn
79
+ }
80
+ } as GridPlacementUpEvent)"
81
+ class="editor-container-controls-button"
82
+ >
83
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
84
+ <!-- !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
85
+ <path fill="#fff" d="M342.6 81.4C330.1 68.9 309.8 68.9 297.3 81.4L137.3 241.4C124.8 253.9 124.8 274.2 137.3 286.7C149.8 299.2 170.1 299.2 182.6 286.7L288 181.3L288 552C288 569.7 302.3 584 320 584C337.7 584 352 569.7 352 552L352 181.3L457.4 286.7C469.9 299.2 490.2 299.2 502.7 286.7C515.2 274.2 515.2 253.9 502.7 241.4L342.7 81.4z"/>
86
+ </svg>
87
+ </div>
101
88
 
102
- <div class="dv:opacity-0 dv:group-hover/controls:opacity-100 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer">
103
- <p class="text-white">
104
- {{ row }}
105
- </p>
106
- </div>
107
- </div>
89
+ <!-- Move Down button -->
90
+ <div
91
+ v-if="(row ?? 1) <( (rows ?? 1))"
92
+ @click="connector?.send({
93
+ type: ConnectorEventType.GRID_PLACEMENT_DOWN,
94
+ payload: {
95
+ uuid: experienceComponent.uuid,
96
+ prn: experienceComponent.prn
97
+ }
98
+ } as GridPlacementDownEvent)"
99
+ class="editor-container-controls-button"
100
+ >
101
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
102
+ <!-- !Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. -->
103
+ <path fill="#fff" d="M297.4 566.6C309.9 579.1 330.2 579.1 342.7 566.6L502.7 406.6C515.2 394.1 515.2 373.8 502.7 361.3C490.2 348.8 469.9 348.8 457.4 361.3L352 466.7L352 96C352 78.3 337.7 64 320 64C302.3 64 288 78.3 288 96L288 466.7L182.6 361.3C170.1 348.8 149.8 348.8 137.3 361.3C124.8 373.8 124.8 394.1 137.3 406.6L297.3 566.6z"/>
104
+ </svg>
105
+ </div>
108
106
 
109
- <!-- Hidden element to create snapshots -->
110
- <div class="delta-snapshot-ignore dv:absolute dv:left-4 dv:top-0 dv:h-full dv:flex dv:items-center dv:justify-center">
111
- <div class="dv:opacity-0 dv:transition-all dv:duration-300 dv:bg-gray-800 dv:w-8 dv:h-8 dv:flex dv:items-center dv:justify-center dv:rounded-sm dv:cursor-pointer">
112
- <FontAwesomeIcon :icon="['fal', 'arrow-from-line']" />
107
+ <div class="editor-container-controls-button">
108
+ <p>{{ row }}</p>
109
+ </div>
113
110
  </div>
114
111
  </div>
115
112
  </div>
116
113
  </template>
117
114
 
118
- <style scoped>
119
-
115
+ <style scoped lang="scss">
116
+ .editor-container {
117
+ display: grid;
118
+ grid-template-areas: "building-block";
119
+ z-index: 40;
120
+ min-height: 3rem;
121
+ cursor: pointer;
122
+ &:hover {
123
+ outline: 2px dashed #1f2937;
124
+ outline-offset: 2px;
125
+ background-color: #E5E7EB;
126
+ .editor-container-wrapper{
127
+ opacity: 1;
128
+ pointer-events: all;
129
+ }
130
+ }
131
+ .editor-container-draft {
132
+ background-color: #1f2937;
133
+ color: #fff;
134
+ border-radius: 5rem;
135
+ padding: 0.5rem 0.75rem 0.3rem;
136
+ grid-area: building-block;
137
+ margin: 1rem 1rem auto auto;
138
+ }
139
+ .editor-container-controls,
140
+ .editor-container-content {
141
+ grid-area: building-block;
142
+ }
143
+ .editor-container-controls {
144
+ position: relative;
145
+ opacity: 0;
146
+ transition: opacity 0.3s ease;
147
+ z-index: 50;
148
+ width: 100%;
149
+ display: flex;
150
+ align-items: flex-start;
151
+ justify-content: center;
152
+ &:hover {
153
+ opacity: 1;
154
+ }
155
+ .editor-container-controls-label {
156
+ background-color: #1f2937;
157
+ color: #fff;
158
+ padding: 6px 12px;
159
+ font-size: 0.75rem;
160
+ font-weight: 600;
161
+ text-align: center;
162
+ border-radius: 0 0 6px 6px;
163
+ position: absolute;
164
+ top: 0;
165
+ margin: 0 auto;
166
+ }
167
+ .editor-container-controls-buttons {
168
+ display: flex;
169
+ gap: 0.5rem;
170
+ position: absolute;
171
+ left: 1rem;
172
+ top: 1rem;
173
+ .editor-container-controls-button {
174
+ background-color: #1f2937;
175
+ color: #fff;
176
+ font-size: 0.75rem;
177
+ font-weight: 600;
178
+ height: 2rem;
179
+ width: 2rem;
180
+ text-align: center;
181
+ display: flex;
182
+ align-items: center;
183
+ justify-content: center;
184
+ border-radius: 0.25rem;
185
+ cursor: pointer;
186
+ svg{
187
+ width: 1.2rem;
188
+ height: 1.2rem;
189
+ }
190
+ p {
191
+ margin: 0 0 -.15rem 0;
192
+ }
193
+ }
194
+ }
195
+ }
196
+ }
120
197
  </style>
package/src/components/placeholders/EmptyGridPlacements.vue CHANGED
@@ -33,30 +33,57 @@ function handleMouseUp() {
33
33
  <div @mouseenter="isInsidePlaceholder = true" @mouseleave="isInsidePlaceholder = false" @mouseup="handleMouseUp()">
34
34
  <component v-if="currentComponent && isInsidePlaceholder" :is="currentComponent" :building-block="buildingBlockToCreate" :building-block-field-fulfillments="[]" class="dv:animate-pulse" />
35
35
 
36
- <div v-else class="dv:p-4 dv:h-screen dv:w-full">
37
- <div class="dv:border dv:border-dashed dv:border-[#705ED9] dv:h-full dv:w-full dv:flex dv:flex-col dv:gap-4 dv:items-center dv:justify-center dv:bg-[#EAEAFA] dv:rounded-md">
38
- <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
39
- <rect x="0.5" y="9.5" width="29" height="29" rx="4.5" stroke="#705ED9" stroke-dasharray="2 2"/>
40
- <rect x="9.5" y="0.5" width="29" height="29" rx="4.5" fill="#EAEAFA" stroke="#705ED9"/>
41
- </svg>
42
-
43
- <p v-if="type === 'content-experience'" class="dv:text-center dv:text-[#705ED9]">
44
- Drag experience components from the sidebar to begin <br>
45
- or add a template
46
- </p>
47
-
48
- <p v-else class="dv:text-center dv:text-[#705ED9]">
49
- Drag experience components from the sidebar to begin
50
- </p>
51
-
52
- <button v-if="type === 'content-experience'" @click="connector?.send({ type: ConnectorEventType.BLUEPRINT_OVERLAY_OPEN, payload: null })" class="dv:bg-gradient-to-bl dv:from-primary dv:to-primary-tint dv:px-6 dv:py-3 dv:rounded-md dv:text-white dv:font-medium">
53
- Use template
54
- </button>
55
- </div>
36
+ <div v-else class="empty-grid-placements">
37
+ <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
38
+ <rect x="0.5" y="9.5" width="29" height="29" rx="4.5" stroke="#705ED9" stroke-dasharray="2 2"/>
39
+ <rect x="9.5" y="0.5" width="29" height="29" rx="4.5" fill="#EAEAFA" stroke="#705ED9"/>
40
+ </svg>
41
+
42
+ <p v-if="type === 'content-experience'">
43
+ Drag experience components from the sidebar to begin <br>
44
+ or add a template
45
+ </p>
46
+
47
+ <p v-else>
48
+ Drag experience components from the sidebar to begin
49
+ </p>
50
+
51
+ <button v-if="type === 'content-experience'" @click="connector?.send({ type: ConnectorEventType.BLUEPRINT_OVERLAY_OPEN, payload: null })" class="dv:bg-gradient-to-bl dv:from-primary dv:to-primary-tint dv:px-6 dv:py-3 dv:rounded-md dv:text-white dv:font-medium">
52
+ Use template
53
+ </button>
56
54
  </div>
57
55
  </div>
58
56
  </template>
59
57
 
60
- <style scoped>
61
-
58
+ <style scoped lang="scss">
59
+ .empty-grid-placements {
60
+ font-family: "Roboto", "Calibri", "Arial", sans-serif;
61
+ padding: 1rem;
62
+ height: 100%;
63
+ width: 100%;
64
+ border: 1px dashed #705ED9;
65
+ display: flex;
66
+ flex-direction: column;
67
+ gap: 1rem;
68
+ align-items: center;
69
+ justify-content: center;
70
+ background-color: #EAEAFA;
71
+ border-radius: 0.5rem;
72
+ p {
73
+ text-align: center;
74
+ color: #000;
75
+ }
76
+ .empty-grid-placements-button {
77
+ background: linear-gradient(to left bottom in oklab, rgb(112, 94, 217) 0%, rgb(136, 118, 242) 100%);
78
+ color: #fff;
79
+ padding: 0.7rem 1.2rem;
80
+ border-radius: 0.5rem;
81
+ font-size: 0.875rem;
82
+ font-weight: 600;
83
+ cursor: pointer;
84
+ &:hover {
85
+ background-color: #5243A2;
86
+ }
87
+ }
88
+ }
62
89
  </style>
package/src/components/placeholders/MissingExperienceComponent.vue CHANGED
@@ -7,15 +7,22 @@ defineProps<{
7
7
  </script>
8
8
 
9
9
  <template>
10
- <div class="dv:w-full dv:p-4">
11
- <div class="dv:h-64 dv:flex dv:items-center dv:justify-center dv:border-2 dv:border-dashed">
12
- <p>
13
- Missing component: {{ buildingBlock.slug }}
14
- </p>
15
- </div>
10
+ <div class="missing-experience-component">
11
+ <p>
12
+ Missing component: {{ buildingBlock.slug }}
13
+ </p>
16
14
  </div>
17
15
  </template>
18
16
 
19
- <style scoped>
20
-
17
+ <style scoped lang="scss">
18
+ .missing-experience-component {
19
+ font-family: "Roboto", "Calibri", "Arial", sans-serif;
20
+ padding: 1rem;
21
+ width: 100%;
22
+ height: 16rem;
23
+ display: flex;
24
+ align-items: center;
25
+ justify-content: center;
26
+ border: 1px dashed #000;
27
+ }
21
28
  </style>
package/src/views/ExperienceEditorView.vue CHANGED
@@ -121,10 +121,8 @@ provide('buildingBlockToCreate', buildingBlockToCreate)
121
121
  </script>
122
122
 
123
123
  <template>
124
- <div v-if="!inIframe" class="dv:fixed dv:h-screen dv:w-screen dv:bg-black/90 dv:flex dv:items-center dv:justify-center dv:bg-black bg-black">
125
- <p class="dv:text-white dv:text-center">
126
- The editor does not work without Delta Client. <br> Please connect the editor
127
- </p>
124
+ <div v-if="!inIframe" class="experience-editor-view">
125
+ The editor does not work without Delta Client. <br> Please connect the editor
128
126
  </div>
129
127
 
130
128
  <EditorRootExperienceComponent v-if="rootExperienceComponent" :root-experience-component="rootExperienceComponent" />
@@ -132,6 +130,16 @@ provide('buildingBlockToCreate', buildingBlockToCreate)
132
130
  <EmptyGridPlacements v-if="rootExperienceComponent && !hasGridPlacements && !hasBuildingBlock" :building-block-to-create="buildingBlockToCreate" />
133
131
  </template>
134
132
 
135
- <style scoped>
136
-
133
+ <style scoped lang="scss">
134
+ .experience-editor-view {
135
+ position: fixed;
136
+ height: 100vh;
137
+ width: 100%;
138
+ background-color: rgba(0, 0, 0, 0.9);
139
+ display: flex;
140
+ align-items: center;
141
+ justify-content: center;
142
+ text-align: center;
143
+ color: #fff;
144
+ }
137
145
  </style>
package/src/views/ExperienceView.vue CHANGED
@@ -20,9 +20,9 @@ const axiosErrorResponse: ComputedRef<{ name: string, message: string, statusCod
20
20
 
21
21
 
22
22
  const modeBaseUrlMap: Ref<{ [key in 'dev' | 'acc' | 'prod']: string }> = ref({
23
- dev: 'https://api.dev.getplate.rocks/public-api/content-experiences',
24
- acc: 'https://api.acc.getplate.rocks/public-api/content-experiences',
25
- prod: 'https://api.acc.getplate.rocks/public-api/content-experiences',
23
+ dev: 'https://api.dev.getplate.rocks/content-delivery-api/content-experiences',
24
+ acc: 'https://api.acc.getplate.rocks/content-delivery-api/content-experiences',
25
+ prod: 'https://api.acc.getplate.rocks/content-delivery-api/content-experiences',
26
26
  })
27
27
 
28
28
  const client = axios.create({
package/src/views/NotFoundView.vue CHANGED
@@ -7,11 +7,11 @@ export default defineComponent({
7
7
  </script>
8
8
 
9
9
  <template>
10
- <div class="dv:h-screen dv:w-screen dv:flex dv:flex-col dv:gap-4 dv:items-center dv:justify-center">
11
- <p class="dv:text-[8rem]">
10
+ <div class="not-found-view">
11
+ <p class="not-found-view-number">
12
12
  404
13
13
  </p>
14
- <div class="dv:text-center">
14
+ <div class="not-found-view-content">
15
15
  <h1 class="dv:font-bold">
16
16
  Page not found
17
17
  </h1>
@@ -22,6 +22,23 @@ export default defineComponent({
22
22
  </div>
23
23
  </template>
24
24
 
25
- <style scoped>
26
-
25
+ <style scoped lang="scss">
26
+ .not-found-view {
27
+ height: 100vh;
28
+ width: 100%;
29
+ display: flex;
30
+ flex-direction: column;
31
+ gap: 1rem;
32
+ align-items: center;
33
+ justify-content: center;
34
+ .not-found-view-number {
35
+ font-size: 8rem;
36
+ }
37
+ .not-found-view-content {
38
+ text-align: center;
39
+ h1 {
40
+ font-weight: 700;
41
+ }
42
+ }
43
+ }
27
44
  </style>
package/src/components/atoms/icon/FontAwesomeIcon.vue DELETED
@@ -1,21 +0,0 @@
1
- <script setup lang="ts">
2
- import { computed } from 'vue';
3
-
4
- const props = defineProps<{
5
- icon: [string, string]
6
- className?: string
7
- size?: string
8
- spin?: boolean
9
- }>()
10
-
11
- const iconStyle = computed(() => {
12
- return props.icon[0] === 'fas' ? 'fa-solid' : 'fa-light'
13
- })
14
-
15
- </script>
16
-
17
- <template>
18
- <i
19
- :class="`${iconStyle} fa-${icon[1]} ${className ?? ''} ${size && size !== 'md' ? `text-${size}` : 'text-[16px]'} ${spin ? 'fa-spin' : ''}`"
20
- ></i>
21
- </template>