@lightspeed/crane 1.1.0 → 1.1.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 (51) hide show
  1. package/dist/app.d.mts +198 -11
  2. package/dist/app.d.ts +198 -11
  3. package/dist/app.mjs +1 -1
  4. package/dist/cli.mjs +22 -11
  5. package/package.json +5 -2
  6. package/template/footers/example-footer/ExampleFooter.vue +40 -1
  7. package/template/footers/example-footer/component/LegalLinks.vue +20 -0
  8. package/template/footers/example-footer/component/ReportAbuse.vue +18 -0
  9. package/template/footers/example-footer/entity/color.ts +4 -0
  10. package/template/footers/{settings/translations.ts → example-footer/settings/content.ts} +0 -2
  11. package/template/footers/example-footer/settings/design.ts +11 -0
  12. package/template/footers/example-footer/settings/translations.ts +12 -0
  13. package/template/footers/example-footer/showcases/1.ts +2 -0
  14. package/template/footers/example-footer/showcases/translations.ts +9 -0
  15. package/template/footers/example-footer/type.ts +2 -2
  16. package/template/headers/example-header/ExampleHeader.vue +39 -7
  17. package/template/headers/example-header/assets/account_icon.svg +11 -0
  18. package/template/headers/example-header/assets/cart.svg +20 -0
  19. package/template/headers/example-header/assets/lightspeed_logo.png +0 -0
  20. package/template/headers/example-header/assets/search.svg +13 -0
  21. package/template/headers/example-header/component/Account.vue +20 -0
  22. package/template/headers/example-header/component/Cart.vue +64 -0
  23. package/template/headers/example-header/component/Logo.vue +95 -0
  24. package/template/headers/example-header/component/NavigationMenu.vue +53 -0
  25. package/template/headers/example-header/component/SearchForm.vue +89 -0
  26. package/template/headers/example-header/settings/content.ts +9 -0
  27. package/template/headers/example-header/settings/design.ts +23 -0
  28. package/template/headers/example-header/settings/translations.ts +9 -0
  29. package/template/headers/example-header/showcases/1.ts +40 -0
  30. package/template/headers/example-header/showcases/2.ts +42 -0
  31. package/template/headers/example-header/showcases/translations.ts +17 -0
  32. package/template/headers/example-header/type.ts +2 -2
  33. package/template/package.json +3 -2
  34. package/template/sections/example-section/component/image/ImagesGrid.vue +18 -37
  35. package/template/sections/example-section/settings/content.ts +53 -55
  36. package/template/sections/example-section/settings/translations.ts +27 -24
  37. package/template/sections/example-section/showcases/1.ts +143 -103
  38. package/template/sections/example-section/showcases/2.ts +127 -103
  39. package/template/sections/example-section/showcases/translations.ts +4 -0
  40. package/template/shared/LanguageSelector.vue +75 -0
  41. package/template/templates/template.ts +128 -104
  42. package/types.d.ts +262 -152
  43. package/template/footers/example-footer/component/SampleComponent.vue +0 -11
  44. package/template/footers/settings/content.ts +0 -1
  45. package/template/footers/settings/design.ts +0 -1
  46. package/template/headers/example-header/component/SampleComponent.vue +0 -11
  47. package/template/headers/settings/content.ts +0 -1
  48. package/template/headers/settings/design.ts +0 -1
  49. package/template/headers/settings/layout.ts +0 -1
  50. package/template/headers/settings/translations.ts +0 -5
  51. /package/template/{footers → headers/example-header}/settings/layout.ts +0 -0
package/template/sections/example-section/showcases/2.ts CHANGED
@@ -13,117 +13,141 @@ export default {
13
13
  type: 'INPUTBOX',
14
14
  text: '$label.showcase_2.section_title.text',
15
15
  },
16
- image_text_1: {
17
- type: 'TEXTAREA',
18
- text: '$label.showcase_2.image_text_1.text',
19
- },
20
- image_text_2: {
21
- type: 'TEXTAREA',
22
- text: '$label.showcase_2.image_text_2.text',
23
- },
24
- image_text_3: {
25
- type: 'TEXTAREA',
26
- text: '$label.showcase_2.image_text_3.text',
27
- },
28
- image_text_4: {
29
- type: 'TEXTAREA',
30
- text: '$label.showcase_2.image_text_4.text',
31
- },
32
- image_content_1: {
33
- type: 'IMAGE',
34
- imageData: {
35
- set: {
36
- LOW_RES: {
37
- url: 'new_tshirts_collection_mobile_low.jpeg',
38
- },
39
- MOBILE_WEBP_LOW_RES: {
40
- url: 'new_tshirts_collection_mobile_low.jpeg',
41
- },
42
- MOBILE_WEBP_HI_RES: {
43
- url: 'new_tshirts_collection_mobile_high.jpeg',
44
- },
45
- WEBP_LOW_RES: {
46
- url: 'new_tshirts_collection_pc_low.jpeg',
47
- },
48
- WEBP_HI_2X_RES: {
49
- url: 'new_tshirts_collection_pc_high.jpeg',
16
+
17
+ images: {
18
+ type: 'DECK',
19
+ cards: [
20
+ {
21
+ settings: {
22
+ image_text: {
23
+ type: 'TEXTAREA',
24
+ text: '$label.showcase_2.image_text_1.text',
25
+ },
26
+ image_content: {
27
+ type: 'IMAGE',
28
+ imageData: {
29
+ set: {
30
+ LOW_RES: {
31
+ url: 'new_tshirts_collection_mobile_low.jpeg',
32
+ },
33
+ MOBILE_WEBP_LOW_RES: {
34
+ url: 'new_tshirts_collection_mobile_low.jpeg',
35
+ },
36
+ MOBILE_WEBP_HI_RES: {
37
+ url: 'new_tshirts_collection_mobile_high.jpeg',
38
+ },
39
+ WEBP_LOW_RES: {
40
+ url: 'new_tshirts_collection_pc_low.jpeg',
41
+ },
42
+ WEBP_HI_2X_RES: {
43
+ url: 'new_tshirts_collection_pc_high.jpeg',
44
+ },
45
+ },
46
+ borderInfo: {},
47
+ },
48
+ },
49
+ image_link: {
50
+ type: 'INPUTBOX',
51
+ text: '$label.showcase_2.image_link_1.text',
52
+ },
50
53
  },
51
54
  },
52
- borderInfo: {},
53
- },
54
- },
55
- image_content_2: {
56
- type: 'IMAGE',
57
- imageData: {
58
- set: {
59
- LOW_RES: {
60
- url: 'autumn_looks_mobile_low.jpeg',
61
- },
62
- MOBILE_WEBP_LOW_RES: {
63
- url: 'autumn_looks_mobile_low.jpeg',
64
- },
65
- MOBILE_WEBP_HI_RES: {
66
- url: 'autumn_looks_mobile_high.jpeg',
67
- },
68
- WEBP_LOW_RES: {
69
- url: 'autumn_looks_pc_low.jpeg',
70
- },
71
- WEBP_HI_2X_RES: {
72
- url: 'autumn_looks_pc_high.jpeg',
55
+ {
56
+ settings: {
57
+ image_text: {
58
+ type: 'TEXTAREA',
59
+ text: '$label.showcase_2.image_text_2.text',
60
+ },
61
+ image_content: {
62
+ type: 'IMAGE',
63
+ imageData: {
64
+ set: {
65
+ LOW_RES: {
66
+ url: 'autumn_looks_mobile_low.jpeg',
67
+ },
68
+ MOBILE_WEBP_LOW_RES: {
69
+ url: 'autumn_looks_mobile_low.jpeg',
70
+ },
71
+ MOBILE_WEBP_HI_RES: {
72
+ url: 'autumn_looks_mobile_high.jpeg',
73
+ },
74
+ WEBP_LOW_RES: {
75
+ url: 'autumn_looks_pc_low.jpeg',
76
+ },
77
+ WEBP_HI_2X_RES: {
78
+ url: 'autumn_looks_pc_high.jpeg',
79
+ },
80
+ },
81
+ borderInfo: {},
82
+ },
83
+ },
73
84
  },
74
85
  },
75
- borderInfo: {},
76
- },
77
- },
78
- image_content_3: {
79
- type: 'IMAGE',
80
- imageData: {
81
- set: {
82
- LOW_RES: {
83
- url: 'bianka_wardrobe_mobile_low.jpeg',
84
- },
85
- MOBILE_WEBP_LOW_RES: {
86
- url: 'bianka_wardrobe_mobile_low.jpeg',
87
- },
88
- MOBILE_WEBP_HI_RES: {
89
- url: 'bianka_wardrobe_mobile_high.jpeg',
90
- },
91
- WEBP_LOW_RES: {
92
- url: 'bianka_wardrobe_pc_low.jpeg',
93
- },
94
- WEBP_HI_2X_RES: {
95
- url: 'bianka_wardrobe_pc_high.jpeg',
86
+
87
+ {
88
+ settings: {
89
+ image_text: {
90
+ type: 'TEXTAREA',
91
+ text: '$label.showcase_2.image_text_3.text',
92
+ },
93
+ image_content: {
94
+ type: 'IMAGE',
95
+ imageData: {
96
+ set: {
97
+ LOW_RES: {
98
+ url: 'bianka_wardrobe_mobile_low.jpeg',
99
+ },
100
+ MOBILE_WEBP_LOW_RES: {
101
+ url: 'bianka_wardrobe_mobile_low.jpeg',
102
+ },
103
+ MOBILE_WEBP_HI_RES: {
104
+ url: 'bianka_wardrobe_mobile_high.jpeg',
105
+ },
106
+ WEBP_LOW_RES: {
107
+ url: 'bianka_wardrobe_pc_low.jpeg',
108
+ },
109
+ WEBP_HI_2X_RES: {
110
+ url: 'bianka_wardrobe_pc_high.jpeg',
111
+ },
112
+ },
113
+ borderInfo: {},
114
+ },
115
+ },
96
116
  },
97
117
  },
98
- borderInfo: {},
99
- },
100
- },
101
- image_content_4: {
102
- type: 'IMAGE',
103
- imageData: {
104
- set: {
105
- LOW_RES: {
106
- url: 'story_of_jane_mobile_low.jpeg',
107
- },
108
- MOBILE_WEBP_LOW_RES: {
109
- url: 'story_of_jane_mobile_low.jpeg',
110
- },
111
- MOBILE_WEBP_HI_RES: {
112
- url: 'story_of_jane_mobile_high.jpeg',
113
- },
114
- WEBP_LOW_RES: {
115
- url: 'story_of_jane_pc_low.jpeg',
116
- },
117
- WEBP_HI_2X_RES: {
118
- url: 'story_of_jane_pc_high.jpeg',
118
+
119
+ {
120
+ settings: {
121
+ image_text: {
122
+ type: 'TEXTAREA',
123
+ text: '$label.showcase_2.image_text_4.text',
124
+ },
125
+ image_content: {
126
+ type: 'IMAGE',
127
+ imageData: {
128
+ set: {
129
+ LOW_RES: {
130
+ url: 'story_of_jane_mobile_low.jpeg',
131
+ },
132
+ MOBILE_WEBP_LOW_RES: {
133
+ url: 'story_of_jane_mobile_low.jpeg',
134
+ },
135
+ MOBILE_WEBP_HI_RES: {
136
+ url: 'story_of_jane_mobile_high.jpeg',
137
+ },
138
+ WEBP_LOW_RES: {
139
+ url: 'story_of_jane_pc_low.jpeg',
140
+ },
141
+ WEBP_HI_2X_RES: {
142
+ url: 'story_of_jane_pc_high.jpeg',
143
+ },
144
+ },
145
+ borderInfo: {},
146
+ },
147
+ },
119
148
  },
120
149
  },
121
- borderInfo: {},
122
- },
123
- },
124
- image_link_1: {
125
- type: 'TEXTAREA',
126
- text: '$label.showcase_2.image_link_1.text',
150
+ ],
127
151
  },
128
152
  },
129
153
  design: {
package/template/sections/example-section/showcases/translations.ts CHANGED
@@ -10,6 +10,9 @@ export default {
10
10
  '$label.showcase_1.image_text_3.text': 'Summer accessories',
11
11
  '$label.showcase_1.image_text_4.text': 'Trending footwear',
12
12
  '$label.showcase_1.image_link_1.text': '/products',
13
+
14
+ '$label.card_button_title': 'Card button',
15
+
13
16
  '$label.showcase_2.blockName': 'Reference section — Apparel',
14
17
  '$label.showcase_2.section_title.text': 'Trending collections',
15
18
  '$label.showcase_2.image_text_1.text': 'New t-shirts collection',
@@ -31,6 +34,7 @@ export default {
31
34
  '$label.showcase_1.image_text_3.text': 'Zomeraccessoires',
32
35
  '$label.showcase_1.image_text_4.text': 'Trending schoenen',
33
36
  '$label.showcase_1.image_link_1.text': '/products',
37
+
34
38
  '$label.showcase_2.blockName': 'Referentiesectie — Kleding',
35
39
  '$label.showcase_2.section_title.text': 'Trending collecties',
36
40
  '$label.showcase_2.image_text_1.text': 'Nieuwe t-shirtscollectie',
package/template/shared/LanguageSelector.vue ADDED
@@ -0,0 +1,75 @@
1
+ <template>
2
+ <client-only>
3
+ <div :key="sortedLanguages.length" class="language-selector language-selector--row">
4
+ <template v-for="language in sortedLanguages" :key="`${language.code}-${language.selected}`">
5
+ <a
6
+ tabindex="0"
7
+ role="button"
8
+ :aria-label="language.code.toUpperCase()"
9
+ :class="[
10
+ 'language-selector-link',
11
+ { 'language-selector-link--active': language.selected },
12
+ ]"
13
+ @click="navigateToTranslationPage(language)"
14
+ >
15
+ {{ language.code.toUpperCase() }}
16
+ </a>
17
+ </template>
18
+ </div>
19
+ </client-only>
20
+ </template>
21
+
22
+ <script setup lang="ts">
23
+ import { useVueBaseProps } from '@lightspeed/crane';
24
+ import { computed } from 'vue';
25
+ import { Design } from '../headers/example-header/type.ts';
26
+
27
+ const baseProps = useVueBaseProps<unknown, Design>();
28
+ const externalContent = computed(() => baseProps.externalContent?.value as ExternalContentData);
29
+ const isPreviewMode = computed(() => externalContent.value?.isPreviewMode ?? false);
30
+ const sortedLanguages = computed(() => (externalContent.value?.languages
31
+ ? [...externalContent.value.languages].sort((a, b) => {
32
+ if (a.main && !b.main) return -1;
33
+ if (!a.main && b.main) return 1;
34
+ return 0;
35
+ })
36
+ : []));
37
+
38
+ const navigateToTranslationPage = (language: Language) => {
39
+ if (language.selected || isPreviewMode.value) {
40
+ return;
41
+ }
42
+ if (language.url !== undefined) {
43
+ window.open(language.url, '_self');
44
+ }
45
+ };
46
+ </script>
47
+
48
+ <style scoped lang="scss">
49
+ .language-selector {
50
+ display: flex;
51
+ }
52
+
53
+ .language-selector-link {
54
+ padding: 8px;
55
+ color: black;
56
+ cursor: pointer;
57
+ text-decoration: none;
58
+ letter-spacing: 0.5px;
59
+ }
60
+
61
+ .language-selector-link--active {
62
+ cursor: default;
63
+ font-weight: bold;
64
+ color: black;
65
+ text-decoration: underline;
66
+ }
67
+
68
+ .language-selector-link:not(:last-child)::after {
69
+ content: " ·";
70
+ position: absolute;
71
+ width: 0;
72
+ padding-left: 5px;
73
+ font-family: unset;
74
+ }
75
+ </style>
package/template/templates/template.ts CHANGED
@@ -34,117 +34,141 @@ export default {
34
34
  type: 'INPUTBOX',
35
35
  text: '$label.template_standard_showcase_1.section_title.text',
36
36
  },
37
- image_text_1: {
38
- type: 'TEXTAREA',
39
- text: '$label.showcase_2.image_text_1.text',
40
- },
41
- image_text_2: {
42
- type: 'TEXTAREA',
43
- text: '$label.showcase_2.image_text_2.text',
44
- },
45
- image_text_3: {
46
- type: 'TEXTAREA',
47
- text: '$label.showcase_2.image_text_3.text',
48
- },
49
- image_text_4: {
50
- type: 'TEXTAREA',
51
- text: '$label.showcase_2.image_text_4.text',
52
- },
53
- image_content_1: {
54
- type: 'IMAGE',
55
- imageData: {
56
- set: {
57
- LOW_RES: {
58
- url: 'new_tshirts_collection_mobile_low.jpeg',
59
- },
60
- MOBILE_WEBP_LOW_RES: {
61
- url: 'new_tshirts_collection_mobile_low.jpeg',
62
- },
63
- MOBILE_WEBP_HI_RES: {
64
- url: 'new_tshirts_collection_mobile_high.jpeg',
65
- },
66
- WEBP_LOW_RES: {
67
- url: 'new_tshirts_collection_pc_low.jpeg',
68
- },
69
- WEBP_HI_2X_RES: {
70
- url: 'new_tshirts_collection_pc_high.jpeg',
37
+
38
+ images: {
39
+ type: 'DECK',
40
+ cards: [
41
+ {
42
+ settings: {
43
+ image_text: {
44
+ type: 'TEXTAREA',
45
+ text: '$label.showcase_2.image_text_1.text',
46
+ },
47
+ image_content: {
48
+ type: 'IMAGE',
49
+ imageData: {
50
+ set: {
51
+ LOW_RES: {
52
+ url: 'new_tshirts_collection_mobile_low.jpeg',
53
+ },
54
+ MOBILE_WEBP_LOW_RES: {
55
+ url: 'new_tshirts_collection_mobile_low.jpeg',
56
+ },
57
+ MOBILE_WEBP_HI_RES: {
58
+ url: 'new_tshirts_collection_mobile_high.jpeg',
59
+ },
60
+ WEBP_LOW_RES: {
61
+ url: 'new_tshirts_collection_pc_low.jpeg',
62
+ },
63
+ WEBP_HI_2X_RES: {
64
+ url: 'new_tshirts_collection_pc_high.jpeg',
65
+ },
66
+ },
67
+ borderInfo: {},
68
+ },
69
+ },
70
+ image_link: {
71
+ type: 'INPUTBOX',
72
+ text: '$label.showcase_2.image_link_1.text',
73
+ },
71
74
  },
72
75
  },
73
- borderInfo: {},
74
- },
75
- },
76
- image_content_2: {
77
- type: 'IMAGE',
78
- imageData: {
79
- set: {
80
- LOW_RES: {
81
- url: 'autumn_looks_mobile_low.jpeg',
82
- },
83
- MOBILE_WEBP_LOW_RES: {
84
- url: 'autumn_looks_mobile_low.jpeg',
85
- },
86
- MOBILE_WEBP_HI_RES: {
87
- url: 'autumn_looks_mobile_high.jpeg',
88
- },
89
- WEBP_LOW_RES: {
90
- url: 'autumn_looks_pc_low.jpeg',
91
- },
92
- WEBP_HI_2X_RES: {
93
- url: 'autumn_looks_pc_high.jpeg',
76
+ {
77
+ settings: {
78
+ image_text: {
79
+ type: 'TEXTAREA',
80
+ text: '$label.showcase_2.image_text_2.text',
81
+ },
82
+ image_content: {
83
+ type: 'IMAGE',
84
+ imageData: {
85
+ set: {
86
+ LOW_RES: {
87
+ url: 'autumn_looks_mobile_low.jpeg',
88
+ },
89
+ MOBILE_WEBP_LOW_RES: {
90
+ url: 'autumn_looks_mobile_low.jpeg',
91
+ },
92
+ MOBILE_WEBP_HI_RES: {
93
+ url: 'autumn_looks_mobile_high.jpeg',
94
+ },
95
+ WEBP_LOW_RES: {
96
+ url: 'autumn_looks_pc_low.jpeg',
97
+ },
98
+ WEBP_HI_2X_RES: {
99
+ url: 'autumn_looks_pc_high.jpeg',
100
+ },
101
+ },
102
+ borderInfo: {},
103
+ },
104
+ },
94
105
  },
95
106
  },
96
- borderInfo: {},
97
- },
98
- },
99
- image_content_3: {
100
- type: 'IMAGE',
101
- imageData: {
102
- set: {
103
- LOW_RES: {
104
- url: 'bianka_wardrobe_mobile_low.jpeg',
105
- },
106
- MOBILE_WEBP_LOW_RES: {
107
- url: 'bianka_wardrobe_mobile_low.jpeg',
108
- },
109
- MOBILE_WEBP_HI_RES: {
110
- url: 'bianka_wardrobe_mobile_high.jpeg',
111
- },
112
- WEBP_LOW_RES: {
113
- url: 'bianka_wardrobe_pc_low.jpeg',
114
- },
115
- WEBP_HI_2X_RES: {
116
- url: 'bianka_wardrobe_pc_high.jpeg',
107
+
108
+ {
109
+ settings: {
110
+ image_text: {
111
+ type: 'TEXTAREA',
112
+ text: '$label.showcase_2.image_text_3.text',
113
+ },
114
+ image_content: {
115
+ type: 'IMAGE',
116
+ imageData: {
117
+ set: {
118
+ LOW_RES: {
119
+ url: 'bianka_wardrobe_mobile_low.jpeg',
120
+ },
121
+ MOBILE_WEBP_LOW_RES: {
122
+ url: 'bianka_wardrobe_mobile_low.jpeg',
123
+ },
124
+ MOBILE_WEBP_HI_RES: {
125
+ url: 'bianka_wardrobe_mobile_high.jpeg',
126
+ },
127
+ WEBP_LOW_RES: {
128
+ url: 'bianka_wardrobe_pc_low.jpeg',
129
+ },
130
+ WEBP_HI_2X_RES: {
131
+ url: 'bianka_wardrobe_pc_high.jpeg',
132
+ },
133
+ },
134
+ borderInfo: {},
135
+ },
136
+ },
117
137
  },
118
138
  },
119
- borderInfo: {},
120
- },
121
- },
122
- image_content_4: {
123
- type: 'IMAGE',
124
- imageData: {
125
- set: {
126
- LOW_RES: {
127
- url: 'story_of_jane_mobile_low.jpeg',
128
- },
129
- MOBILE_WEBP_LOW_RES: {
130
- url: 'story_of_jane_mobile_low.jpeg',
131
- },
132
- MOBILE_WEBP_HI_RES: {
133
- url: 'story_of_jane_mobile_high.jpeg',
134
- },
135
- WEBP_LOW_RES: {
136
- url: 'story_of_jane_pc_low.jpeg',
137
- },
138
- WEBP_HI_2X_RES: {
139
- url: 'story_of_jane_pc_high.jpeg',
139
+
140
+ {
141
+ settings: {
142
+ image_text: {
143
+ type: 'TEXTAREA',
144
+ text: '$label.showcase_2.image_text_4.text',
145
+ },
146
+ image_content: {
147
+ type: 'IMAGE',
148
+ imageData: {
149
+ set: {
150
+ LOW_RES: {
151
+ url: 'story_of_jane_mobile_low.jpeg',
152
+ },
153
+ MOBILE_WEBP_LOW_RES: {
154
+ url: 'story_of_jane_mobile_low.jpeg',
155
+ },
156
+ MOBILE_WEBP_HI_RES: {
157
+ url: 'story_of_jane_mobile_high.jpeg',
158
+ },
159
+ WEBP_LOW_RES: {
160
+ url: 'story_of_jane_pc_low.jpeg',
161
+ },
162
+ WEBP_HI_2X_RES: {
163
+ url: 'story_of_jane_pc_high.jpeg',
164
+ },
165
+ },
166
+ borderInfo: {},
167
+ },
168
+ },
140
169
  },
141
170
  },
142
- borderInfo: {},
143
- },
144
- },
145
- image_link_1: {
146
- type: 'TEXTAREA',
147
- text: '$label.showcase_2.image_link_1.text',
171
+ ],
148
172
  },
149
173
  },
150
174
  design: {
@@ -174,7 +198,7 @@ export default {
174
198
  },
175
199
  },
176
200
  layoutId: 'Caption_Under_Image',
177
- blockName: '$label.showcase_1.blockName',
201
+ blockName: '$label.showcase_2.blockName',
178
202
  },
179
203
  },
180
204
  {