@gem-sdk/core 1.31.8 → 1.31.14
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/dist/cjs/helpers/background.js +18 -2
- package/dist/cjs/helpers/colors.js +1 -0
- package/dist/cjs/helpers/compose-advance-style.js +48 -0
- package/dist/cjs/index.js +4 -0
- package/dist/esm/helpers/background.js +18 -2
- package/dist/esm/helpers/colors.js +1 -0
- package/dist/esm/helpers/compose-advance-style.js +45 -1
- package/dist/esm/index.js +1 -1
- package/dist/types/index.d.ts +5983 -1
- package/package.json +1 -1
|
@@ -49,11 +49,27 @@ const getBgImageByDevice = (background, device, options)=>{
|
|
|
49
49
|
const isBgVideo = background?.[device]?.type === 'video';
|
|
50
50
|
if (isBgVideo) return;
|
|
51
51
|
const backupFileKey = background?.[device]?.image?.backupFileKey;
|
|
52
|
-
const
|
|
52
|
+
const storage = background?.[device]?.image?.storage;
|
|
53
|
+
let imageByDevice = background?.[device]?.image?.src;
|
|
54
|
+
let newBackupFilekey = backupFileKey;
|
|
55
|
+
const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
|
|
56
|
+
/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp))$/)?.[1];
|
|
57
|
+
if (shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
58
|
+
newBackupFilekey = shopifyHandleName;
|
|
59
|
+
}
|
|
60
|
+
if (storage === 'FILE_CONTENT') {
|
|
61
|
+
if (options?.liquid && newBackupFilekey) {
|
|
62
|
+
imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
if (storage === 'THEME' || !storage) {
|
|
66
|
+
if (options?.liquid && newBackupFilekey) {
|
|
67
|
+
imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
53
70
|
if (typeof imageByDevice === 'string') {
|
|
54
71
|
return `url(${imageByDevice})`;
|
|
55
72
|
}
|
|
56
|
-
return;
|
|
57
73
|
};
|
|
58
74
|
const getStyleBgPosition = (background)=>{
|
|
59
75
|
const bgPosition = {
|
|
@@ -155,6 +155,7 @@ const getSingleColorVariable = (color)=>{
|
|
|
155
155
|
return `var(--g-c-${color}, ${color})`;
|
|
156
156
|
};
|
|
157
157
|
function isColor(color) {
|
|
158
|
+
if (!color || typeof color !== 'string') return false;
|
|
158
159
|
return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
|
|
159
160
|
}
|
|
160
161
|
const getGlobalColorStyle = (data)=>{
|
|
@@ -215,6 +215,54 @@ const splitStyle = (keys, style = {})=>{
|
|
|
215
215
|
restStyle
|
|
216
216
|
];
|
|
217
217
|
};
|
|
218
|
+
const filterAttrInStyle = (style, filterKeys)=>{
|
|
219
|
+
if (!style || !filterKeys) return {};
|
|
220
|
+
const newStyle = {
|
|
221
|
+
...style
|
|
222
|
+
};
|
|
223
|
+
Object.entries(newStyle).forEach(([key])=>{
|
|
224
|
+
if (!filterKeys.includes(key)) {
|
|
225
|
+
delete newStyle[key];
|
|
226
|
+
}
|
|
227
|
+
});
|
|
228
|
+
return newStyle;
|
|
229
|
+
};
|
|
230
|
+
const removeAttrInStyle = (style, filterKeys)=>{
|
|
231
|
+
if (!style || !filterKeys) return {};
|
|
232
|
+
const newStyle = {
|
|
233
|
+
...style
|
|
234
|
+
};
|
|
235
|
+
Object.entries(newStyle).forEach(([key])=>{
|
|
236
|
+
if (filterKeys.includes(key)) {
|
|
237
|
+
delete newStyle[key];
|
|
238
|
+
}
|
|
239
|
+
});
|
|
240
|
+
return newStyle;
|
|
241
|
+
};
|
|
242
|
+
const filterCornerInStyle = (style)=>{
|
|
243
|
+
const cornerKeys = [
|
|
244
|
+
'--bblr',
|
|
245
|
+
'--bbrr',
|
|
246
|
+
'--btlr',
|
|
247
|
+
'--btrr'
|
|
248
|
+
];
|
|
249
|
+
return filterAttrInStyle(style, cornerKeys);
|
|
250
|
+
};
|
|
251
|
+
const removePaddingYInStyle = (style)=>{
|
|
252
|
+
const keys = [
|
|
253
|
+
'--pt',
|
|
254
|
+
'--pt-tablet',
|
|
255
|
+
'--pt-mobile',
|
|
256
|
+
'--pb',
|
|
257
|
+
'--pb-tablet',
|
|
258
|
+
'--pb-mobile'
|
|
259
|
+
];
|
|
260
|
+
return removeAttrInStyle(style, keys);
|
|
261
|
+
};
|
|
218
262
|
|
|
219
263
|
exports.composeAdvanceStyle = composeAdvanceStyle;
|
|
264
|
+
exports.filterAttrInStyle = filterAttrInStyle;
|
|
265
|
+
exports.filterCornerInStyle = filterCornerInStyle;
|
|
266
|
+
exports.removeAttrInStyle = removeAttrInStyle;
|
|
267
|
+
exports.removePaddingYInStyle = removePaddingYInStyle;
|
|
220
268
|
exports.splitStyle = splitStyle;
|
package/dist/cjs/index.js
CHANGED
|
@@ -249,6 +249,10 @@ exports.generateCollectionQueryKey = query.generateCollectionQueryKey;
|
|
|
249
249
|
exports.generateProductQueryKey = query.generateProductQueryKey;
|
|
250
250
|
exports.generateProductsQueryKey = query.generateProductsQueryKey;
|
|
251
251
|
exports.composeAdvanceStyle = composeAdvanceStyle.composeAdvanceStyle;
|
|
252
|
+
exports.filterAttrInStyle = composeAdvanceStyle.filterAttrInStyle;
|
|
253
|
+
exports.filterCornerInStyle = composeAdvanceStyle.filterCornerInStyle;
|
|
254
|
+
exports.removeAttrInStyle = composeAdvanceStyle.removeAttrInStyle;
|
|
255
|
+
exports.removePaddingYInStyle = composeAdvanceStyle.removePaddingYInStyle;
|
|
252
256
|
exports.splitStyle = composeAdvanceStyle.splitStyle;
|
|
253
257
|
exports.composePositionLineHeight = iconList.composePositionLineHeight;
|
|
254
258
|
exports.composePostionIconList = iconList.composePostionIconList;
|
|
@@ -47,11 +47,27 @@ const getBgImageByDevice = (background, device, options)=>{
|
|
|
47
47
|
const isBgVideo = background?.[device]?.type === 'video';
|
|
48
48
|
if (isBgVideo) return;
|
|
49
49
|
const backupFileKey = background?.[device]?.image?.backupFileKey;
|
|
50
|
-
const
|
|
50
|
+
const storage = background?.[device]?.image?.storage;
|
|
51
|
+
let imageByDevice = background?.[device]?.image?.src;
|
|
52
|
+
let newBackupFilekey = backupFileKey;
|
|
53
|
+
const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
|
|
54
|
+
/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp))$/)?.[1];
|
|
55
|
+
if (shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
56
|
+
newBackupFilekey = shopifyHandleName;
|
|
57
|
+
}
|
|
58
|
+
if (storage === 'FILE_CONTENT') {
|
|
59
|
+
if (options?.liquid && newBackupFilekey) {
|
|
60
|
+
imageByDevice = `{{ "${newBackupFilekey.replace('.jpeg', '.jpg')}" | file_url }}`;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (storage === 'THEME' || !storage) {
|
|
64
|
+
if (options?.liquid && newBackupFilekey) {
|
|
65
|
+
imageByDevice = `{{ "${newBackupFilekey}" | asset_url }}`;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
51
68
|
if (typeof imageByDevice === 'string') {
|
|
52
69
|
return `url(${imageByDevice})`;
|
|
53
70
|
}
|
|
54
|
-
return;
|
|
55
71
|
};
|
|
56
72
|
const getStyleBgPosition = (background)=>{
|
|
57
73
|
const bgPosition = {
|
|
@@ -153,6 +153,7 @@ const getSingleColorVariable = (color)=>{
|
|
|
153
153
|
return `var(--g-c-${color}, ${color})`;
|
|
154
154
|
};
|
|
155
155
|
function isColor(color) {
|
|
156
|
+
if (!color || typeof color !== 'string') return false;
|
|
156
157
|
return color?.startsWith('#') || color?.startsWith('rgb') || color?.startsWith('hsl') || color?.startsWith('transparent');
|
|
157
158
|
}
|
|
158
159
|
const getGlobalColorStyle = (data)=>{
|
|
@@ -213,5 +213,49 @@ const splitStyle = (keys, style = {})=>{
|
|
|
213
213
|
restStyle
|
|
214
214
|
];
|
|
215
215
|
};
|
|
216
|
+
const filterAttrInStyle = (style, filterKeys)=>{
|
|
217
|
+
if (!style || !filterKeys) return {};
|
|
218
|
+
const newStyle = {
|
|
219
|
+
...style
|
|
220
|
+
};
|
|
221
|
+
Object.entries(newStyle).forEach(([key])=>{
|
|
222
|
+
if (!filterKeys.includes(key)) {
|
|
223
|
+
delete newStyle[key];
|
|
224
|
+
}
|
|
225
|
+
});
|
|
226
|
+
return newStyle;
|
|
227
|
+
};
|
|
228
|
+
const removeAttrInStyle = (style, filterKeys)=>{
|
|
229
|
+
if (!style || !filterKeys) return {};
|
|
230
|
+
const newStyle = {
|
|
231
|
+
...style
|
|
232
|
+
};
|
|
233
|
+
Object.entries(newStyle).forEach(([key])=>{
|
|
234
|
+
if (filterKeys.includes(key)) {
|
|
235
|
+
delete newStyle[key];
|
|
236
|
+
}
|
|
237
|
+
});
|
|
238
|
+
return newStyle;
|
|
239
|
+
};
|
|
240
|
+
const filterCornerInStyle = (style)=>{
|
|
241
|
+
const cornerKeys = [
|
|
242
|
+
'--bblr',
|
|
243
|
+
'--bbrr',
|
|
244
|
+
'--btlr',
|
|
245
|
+
'--btrr'
|
|
246
|
+
];
|
|
247
|
+
return filterAttrInStyle(style, cornerKeys);
|
|
248
|
+
};
|
|
249
|
+
const removePaddingYInStyle = (style)=>{
|
|
250
|
+
const keys = [
|
|
251
|
+
'--pt',
|
|
252
|
+
'--pt-tablet',
|
|
253
|
+
'--pt-mobile',
|
|
254
|
+
'--pb',
|
|
255
|
+
'--pb-tablet',
|
|
256
|
+
'--pb-mobile'
|
|
257
|
+
];
|
|
258
|
+
return removeAttrInStyle(style, keys);
|
|
259
|
+
};
|
|
216
260
|
|
|
217
|
-
export { composeAdvanceStyle, splitStyle };
|
|
261
|
+
export { composeAdvanceStyle, filterAttrInStyle, filterCornerInStyle, removeAttrInStyle, removePaddingYInStyle, splitStyle };
|
package/dist/esm/index.js
CHANGED
|
@@ -58,7 +58,7 @@ export { composeSize, composeSizeCss, genSizeClass, getAspectRatioGlobalSize, ge
|
|
|
58
58
|
export { composeShadowCss, getStyleShadow, getStyleShadowState, parseValueWithUnit } from './helpers/shadow.js';
|
|
59
59
|
export { GRADIENT_BGR_KEY, composeBackgroundCss, getBgImageByDevice, getGradientBgrStyleByDevice, getGradientBgrStyleForButton, getStyleBackgroundByDevice, makeFixedBgAttachment } from './helpers/background.js';
|
|
60
60
|
export { generateCollectionQueryKey, generateProductQueryKey, generateProductsQueryKey } from './helpers/query.js';
|
|
61
|
-
export { composeAdvanceStyle, splitStyle } from './helpers/compose-advance-style.js';
|
|
61
|
+
export { composeAdvanceStyle, filterAttrInStyle, filterCornerInStyle, removeAttrInStyle, removePaddingYInStyle, splitStyle } from './helpers/compose-advance-style.js';
|
|
62
62
|
export { composePositionLineHeight, composePostionIconList } from './helpers/icon-list.js';
|
|
63
63
|
export { useAddToCart } from './hooks/cart/use-add-to-cart.js';
|
|
64
64
|
export { useCartData } from './hooks/cart/use-cart-data.js';
|