@lightspeed/crane 3.3.0 → 3.4.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.
- package/CHANGELOG.md +33 -0
- package/UPGRADE.md +14 -0
- package/dist/cli.mjs +45 -61
- package/package.json +3 -2
- package/template/layouts/catalog/example-catalog/settings/design.ts +229 -1
- package/template/layouts/catalog/example-catalog/settings/layout.ts +1 -0
- package/template/layouts/catalog/example-catalog/settings/translations.ts +285 -1
- package/template/layouts/category/example-category/Main.vue +2 -1
- package/template/layouts/category/example-category/settings/design.ts +229 -1
- package/template/layouts/category/example-category/settings/layout.ts +1 -0
- package/template/layouts/category/example-category/settings/translations.ts +285 -1
- package/template/layouts/product/example-product/Main.vue +2 -1
- package/template/layouts/product/example-product/settings/layout.ts +1 -0
- package/template/preview/assets/close.svg +3 -0
- package/template/preview/assets/crane-logo.svg +16 -0
- package/template/preview/sections/preview.html +99 -1
- package/template/preview/shared/preview.ts +6 -4
- package/template/preview/vite.config.js +1 -0
- package/template/reference/sections/intro-slider/settings/translations.ts +1 -0
- package/template/sections/example-section/component/image/Image.vue +4 -3
- package/template/footers/example-footer/entity/color.ts +0 -4
- package/template/reference/sections/featured-products/entity/color.ts +0 -4
- package/template/reference/sections/intro-slider/entity/color.ts +0 -4
- package/template/reference/sections/trending-categories/entity/color.ts +0 -4
- package/template/sections/example-section/entity/color.ts +0 -4
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
|
|
11
11
|
<!-- Bootstrap and Fonts -->
|
|
12
12
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
13
|
-
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
13
|
+
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
14
14
|
|
|
15
15
|
<style>
|
|
16
16
|
.top-bar {
|
|
@@ -31,10 +31,108 @@
|
|
|
31
31
|
font-size: 30px;
|
|
32
32
|
margin: 0;
|
|
33
33
|
}
|
|
34
|
+
|
|
35
|
+
.extension-banner {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: space-between;
|
|
39
|
+
width: 100%;
|
|
40
|
+
height: 56px;
|
|
41
|
+
box-sizing: border-box;
|
|
42
|
+
border-bottom: 1px solid #3A1AFE;
|
|
43
|
+
background: rgba(134, 157, 255, 0.16);
|
|
44
|
+
padding: 10px 40px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.extension-banner-left {
|
|
48
|
+
display: flex;
|
|
49
|
+
width: 180px;
|
|
50
|
+
align-items: center;
|
|
51
|
+
gap: 10px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.extension-banner-close {
|
|
55
|
+
display: flex;
|
|
56
|
+
align-items: center;
|
|
57
|
+
justify-content: center;
|
|
58
|
+
background: none;
|
|
59
|
+
border: none;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
padding: 4px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.extension-banner-close:hover {
|
|
65
|
+
opacity: 0.7;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.extension-banner-center {
|
|
69
|
+
flex: 1;
|
|
70
|
+
display: flex;
|
|
71
|
+
align-items: center;
|
|
72
|
+
justify-content: center;
|
|
73
|
+
gap: 8px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.extension-banner-text {
|
|
77
|
+
color: #1E1E21;
|
|
78
|
+
text-align: center;
|
|
79
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
80
|
+
font-family: 'Lato', sans-serif;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
font-style: normal;
|
|
83
|
+
font-weight: 400;
|
|
84
|
+
line-height: 20px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.extension-banner .btn-install {
|
|
88
|
+
flex-shrink: 0;
|
|
89
|
+
width: 131px;
|
|
90
|
+
height: 36px;
|
|
91
|
+
min-width: 80px;
|
|
92
|
+
background: #3A1AFE;
|
|
93
|
+
color:#FFF;
|
|
94
|
+
border: none;
|
|
95
|
+
border-radius: 8px;
|
|
96
|
+
padding: 8px 12px;
|
|
97
|
+
font-variant-numeric: lining-nums tabular-nums;
|
|
98
|
+
font-family: 'Lato', sans-serif;
|
|
99
|
+
font-size: 14px;
|
|
100
|
+
font-style: normal;
|
|
101
|
+
font-weight: 700;
|
|
102
|
+
line-height: 20px;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
white-space: nowrap;
|
|
105
|
+
text-decoration: none;
|
|
106
|
+
text-align: center;
|
|
107
|
+
display: inline-flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
gap: 2px;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.extension-banner .btn-install:hover {
|
|
114
|
+
opacity: 0.9;
|
|
115
|
+
}
|
|
34
116
|
</style>
|
|
35
117
|
</head>
|
|
36
118
|
<body>
|
|
37
119
|
|
|
120
|
+
<!-- Extension Install Banner -->
|
|
121
|
+
<div id="extensionBanner" class="extension-banner">
|
|
122
|
+
<div class="extension-banner-left">
|
|
123
|
+
<button class="extension-banner-close" onclick="document.getElementById('extensionBanner').style.display='none'" aria-label="Close banner">
|
|
124
|
+
<img src="../assets/close.svg" alt="Close" width="14" height="14">
|
|
125
|
+
</button>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="extension-banner-center">
|
|
128
|
+
<img src="../assets/crane-logo.svg" alt="Crane" width="28" height="28">
|
|
129
|
+
<span class="extension-banner-text">
|
|
130
|
+
Install the Crane DevTools by Lightspeed from the Chrome Web Store and preview the full theme or selected sections live in the Instant Site Editor with no deployment needed.
|
|
131
|
+
</span>
|
|
132
|
+
</div>
|
|
133
|
+
<a class="btn-install" href="https://chromewebstore.google.com/detail/crane-devtools/dlfmlicbfjebcgpboleillocookdkifo" target="_blank" rel="noopener noreferrer">Install Extension</a>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
38
136
|
<!-- Top Bar -->
|
|
39
137
|
<div class="top-bar">
|
|
40
138
|
<span class="label-text">Section Preview |</span>
|
|
@@ -343,20 +343,22 @@ function processImage(component: any, blockType: BlockType, blockName: string, k
|
|
|
343
343
|
`http://${distFolderPath}/${blockType}/${blockName}/assets/` :
|
|
344
344
|
`${distFolderPath}/${blockType}/${blockName}/assets/`;
|
|
345
345
|
|
|
346
|
-
const
|
|
346
|
+
const imageData = component.defaults?.imageData || component.imageData;
|
|
347
|
+
const set = imageData?.set;
|
|
347
348
|
const newSet = {
|
|
348
349
|
'cropped-webp-100x200': { url: assetLocation + set?.MOBILE_WEBP_LOW_RES.url },
|
|
349
350
|
'cropped-webp-1000x2000': { url: assetLocation + set?.MOBILE_WEBP_HI_RES.url },
|
|
350
351
|
'webp-200x200': { url: assetLocation + set?.WEBP_LOW_RES.url },
|
|
351
352
|
'webp-2000x2000': { url: assetLocation + set?.WEBP_HI_2X_RES.url },
|
|
352
353
|
};
|
|
353
|
-
|
|
354
|
+
const result = {
|
|
354
355
|
[key]: {
|
|
355
356
|
set: newSet,
|
|
356
|
-
...(
|
|
357
|
-
...(
|
|
357
|
+
...(imageData?.borderInfo && { borderInfo: imageData.borderInfo }),
|
|
358
|
+
...(imageData && { bucket: {} }),
|
|
358
359
|
},
|
|
359
360
|
};
|
|
361
|
+
return result;
|
|
360
362
|
} catch (error) {
|
|
361
363
|
console.error(`[Preview] Failed to process image "${key}":`, error);
|
|
362
364
|
return {};
|
|
@@ -23,6 +23,7 @@ export default defineConfig({
|
|
|
23
23
|
server.httpServer?.once('listening', () => {
|
|
24
24
|
const baseUrl = `http://localhost:${server.config.server.port || 5173}`;
|
|
25
25
|
console.log('Preview URL: ', baseUrl + '/preview/sections/preview.html\n');
|
|
26
|
+
console.log('To preview changes live in the IS Editor, make sure Crane Extension is installed.');
|
|
26
27
|
console.log('🛑 Press Ctrl+C to stop the local server 🛑\n');
|
|
27
28
|
});
|
|
28
29
|
},
|
|
@@ -9,6 +9,7 @@ export default translation.init({
|
|
|
9
9
|
'$label.section_tagline.label': 'Tagline',
|
|
10
10
|
'$label.section_tagline.placeholder': 'This label will be displayed above the title',
|
|
11
11
|
'$label.section_button.label': 'Button',
|
|
12
|
+
'$label.section_button.title': 'Button title',
|
|
12
13
|
'$label.section_image_text.label': 'Image title',
|
|
13
14
|
'$label.section_image.label': 'Image',
|
|
14
15
|
|
|
@@ -38,12 +38,12 @@
|
|
|
38
38
|
<script setup lang="ts">
|
|
39
39
|
import { computed, toRefs } from 'vue';
|
|
40
40
|
import {
|
|
41
|
+
OverlayType,
|
|
41
42
|
useImageElementDesign,
|
|
42
43
|
useTextareaElementDesign,
|
|
43
44
|
useLayoutElementDesign,
|
|
44
45
|
} from '@lightspeed/crane-api';
|
|
45
46
|
import { Design } from '../../type.ts';
|
|
46
|
-
import { ColorType } from '../../entity/color.ts';
|
|
47
47
|
|
|
48
48
|
function getColor(color: string) {
|
|
49
49
|
return `${color}20`;
|
|
@@ -75,10 +75,11 @@ const overlayConfig = computed(() => ({
|
|
|
75
75
|
}));
|
|
76
76
|
|
|
77
77
|
const overlayStyle = computed(() => {
|
|
78
|
-
|
|
78
|
+
const overlayType: OverlayType | undefined = imageDesign.overlay?.type;
|
|
79
|
+
if (imageDesign.visible && overlayType === OverlayType.GRADIENT) {
|
|
79
80
|
return { background: overlayConfig.value.gradientOverlay };
|
|
80
81
|
}
|
|
81
|
-
if (imageDesign.visible &&
|
|
82
|
+
if (imageDesign.visible && overlayType === OverlayType.SOLID) {
|
|
82
83
|
return { background: overlayConfig.value.solidOverlay };
|
|
83
84
|
}
|
|
84
85
|
return {};
|