@gem-sdk/core 1.5.17 → 1.5.23
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/components/AddOn.js +7 -7
- package/dist/cjs/components/ComponentWrapper.js +14 -8
- package/dist/cjs/components/ComponentWrapperPreview.js +55 -46
- package/dist/cjs/components/Empty.js +1 -1
- package/dist/cjs/components/Render.js +50 -13
- package/dist/cjs/components/Render.liquid.js +81 -57
- package/dist/cjs/components/RenderBlock.js +41 -8
- package/dist/cjs/components/RenderPreview.js +51 -13
- package/dist/cjs/components/RenderSection.js +11 -7
- package/dist/cjs/components/constant.js +24 -24
- package/dist/cjs/contexts/AddonContext.js +25 -14
- package/dist/cjs/contexts/BuilderComponent.js +23 -19
- package/dist/cjs/contexts/BuilderContext.js +25 -19
- package/dist/cjs/contexts/BuilderPreviewContext.js +349 -341
- package/dist/cjs/contexts/CartLineContext.js +19 -14
- package/dist/cjs/contexts/CollectionContext.js +21 -13
- package/dist/cjs/contexts/ProductContext.js +136 -115
- package/dist/cjs/contexts/ProductListContext.js +21 -13
- package/dist/cjs/contexts/SectionContext.js +41 -37
- package/dist/cjs/contexts/ShopContext.js +54 -31
- package/dist/cjs/graphql/fragments/analytic.generated.js +1 -1
- package/dist/cjs/graphql/fragments/collection-detail.generated.js +1 -1
- package/dist/cjs/graphql/fragments/collection-product.generated.js +1 -1
- package/dist/cjs/graphql/fragments/custom-code.generated.js +1 -1
- package/dist/cjs/graphql/fragments/data-seo.generated.js +1 -1
- package/dist/cjs/graphql/fragments/media.generated.js +1 -1
- package/dist/cjs/graphql/fragments/product-little.generated.js +1 -1
- package/dist/cjs/graphql/fragments/product-option-value.generated.js +1 -1
- package/dist/cjs/graphql/fragments/product-option.generated.js +1 -1
- package/dist/cjs/graphql/fragments/product.generated.js +1 -1
- package/dist/cjs/graphql/fragments/published-custom-section.generated.js +1 -1
- package/dist/cjs/graphql/fragments/published-page-section.generated.js +1 -1
- package/dist/cjs/graphql/fragments/published-theme-page.generated.js +1 -1
- package/dist/cjs/graphql/fragments/published-theme-style.generated.js +1 -1
- package/dist/cjs/graphql/fragments/selected-option.generated.js +1 -1
- package/dist/cjs/graphql/fragments/variant.generated.js +1 -1
- package/dist/cjs/graphql/mutations/page-view-up.generated.js +1 -1
- package/dist/cjs/graphql/queries/products.generated.js +1 -1
- package/dist/cjs/graphql/queries/store-property.generated.js +1 -1
- package/dist/cjs/helpers/GlobalEvent.js +12 -10
- package/dist/cjs/helpers/background.js +96 -96
- package/dist/cjs/helpers/borders.js +123 -127
- package/dist/cjs/helpers/clone-deep.js +1 -1
- package/dist/cjs/helpers/cls.js +11 -15
- package/dist/cjs/helpers/colors.js +121 -156
- package/dist/cjs/helpers/compose-advance-style.js +115 -121
- package/dist/cjs/helpers/constant.js +16 -11
- package/dist/cjs/helpers/css-variable.js +2 -2
- package/dist/cjs/helpers/email.js +3 -3
- package/dist/cjs/helpers/flatten-connection.js +4 -5
- package/dist/cjs/helpers/get-resonsive-value.js +24 -25
- package/dist/cjs/helpers/get-shortname.js +87 -87
- package/dist/cjs/helpers/is-browser.js +2 -2
- package/dist/cjs/helpers/is-defined.js +2 -2
- package/dist/cjs/helpers/is-empty-children.js +2 -2
- package/dist/cjs/helpers/layout.js +9 -10
- package/dist/cjs/helpers/load-script.js +26 -27
- package/dist/cjs/helpers/make-style.js +77 -86
- package/dist/cjs/helpers/normalize-builder-data.js +18 -12
- package/dist/cjs/helpers/prefetch-queries.js +72 -52
- package/dist/cjs/helpers/product.js +25 -29
- package/dist/cjs/helpers/queries/get-collection.js +179 -167
- package/dist/cjs/helpers/queries/get-product-by-slug.js +103 -94
- package/dist/cjs/helpers/queries/get-product.js +121 -106
- package/dist/cjs/helpers/queries/get-products.js +137 -125
- package/dist/cjs/helpers/radius.js +78 -81
- package/dist/cjs/helpers/render.js +56 -56
- package/dist/cjs/helpers/shadow.js +38 -38
- package/dist/cjs/helpers/size.js +12 -13
- package/dist/cjs/helpers/spacing.js +35 -37
- package/dist/cjs/helpers/tracking/fpixel.js +21 -22
- package/dist/cjs/helpers/tracking/gtag.js +84 -90
- package/dist/cjs/helpers/tracking/tiktokpixel.js +12 -12
- package/dist/cjs/helpers/typography.js +2 -2
- package/dist/cjs/hooks/cart/use-add-to-cart.js +10 -10
- package/dist/cjs/hooks/cart/use-cart-data.js +18 -16
- package/dist/cjs/hooks/cart/use-cart-discount-codes-update.js +10 -10
- package/dist/cjs/hooks/cart/use-cart-note-update.js +10 -10
- package/dist/cjs/hooks/cart/use-create-cart.js +12 -12
- package/dist/cjs/hooks/cart/use-remove-cart-item.js +10 -10
- package/dist/cjs/hooks/cart/use-update-cart-item.js +10 -10
- package/dist/cjs/hooks/shop/use-collection-query.js +12 -6
- package/dist/cjs/hooks/shop/use-product-query.js +12 -6
- package/dist/cjs/hooks/shop/use-products-query.js +14 -6
- package/dist/cjs/hooks/shop.js +86 -67
- package/dist/cjs/hooks/use-current-device.js +14 -16
- package/dist/cjs/hooks/use-lazy-video.js +7 -7
- package/dist/cjs/hooks/useCartId.js +35 -27
- package/dist/cjs/hooks/useCartLine.js +2 -2
- package/dist/cjs/hooks/useCartUI.js +37 -31
- package/dist/cjs/hooks/useCollection.js +2 -2
- package/dist/cjs/hooks/useFetchHandle.js +6 -6
- package/dist/cjs/hooks/useFormatMoney.js +11 -7
- package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/dist/cjs/hooks/useLoadScript.js +22 -20
- package/dist/cjs/hooks/useMoney.js +59 -42
- package/dist/cjs/hooks/usePrevious.js +12 -10
- package/dist/cjs/hooks/useProduct.js +92 -69
- package/dist/cjs/hooks/useProductList.js +11 -11
- package/dist/cjs/hooks/useSuspenseFetch.js +20 -17
- package/dist/cjs/hooks/useSwatchesOptions.js +32 -30
- package/dist/cjs/types/global-style.js +9 -2
- package/dist/esm/components/AddOn.js +7 -7
- package/dist/esm/components/ComponentWrapper.js +14 -8
- package/dist/esm/components/ComponentWrapperPreview.js +55 -46
- package/dist/esm/components/Empty.js +1 -1
- package/dist/esm/components/Render.js +50 -13
- package/dist/esm/components/Render.liquid.js +81 -57
- package/dist/esm/components/RenderBlock.js +41 -8
- package/dist/esm/components/RenderPreview.js +51 -13
- package/dist/esm/components/RenderSection.js +11 -7
- package/dist/esm/components/constant.js +24 -24
- package/dist/esm/contexts/AddonContext.js +26 -15
- package/dist/esm/contexts/BuilderComponent.js +24 -20
- package/dist/esm/contexts/BuilderContext.js +26 -20
- package/dist/esm/contexts/BuilderPreviewContext.js +350 -342
- package/dist/esm/contexts/CartLineContext.js +20 -15
- package/dist/esm/contexts/CollectionContext.js +22 -14
- package/dist/esm/contexts/ProductContext.js +137 -116
- package/dist/esm/contexts/ProductListContext.js +22 -14
- package/dist/esm/contexts/SectionContext.js +42 -38
- package/dist/esm/contexts/ShopContext.js +55 -32
- package/dist/esm/graphql/fragments/analytic.generated.js +1 -1
- package/dist/esm/graphql/fragments/collection-detail.generated.js +1 -1
- package/dist/esm/graphql/fragments/collection-product.generated.js +1 -1
- package/dist/esm/graphql/fragments/custom-code.generated.js +1 -1
- package/dist/esm/graphql/fragments/data-seo.generated.js +1 -1
- package/dist/esm/graphql/fragments/media.generated.js +1 -1
- package/dist/esm/graphql/fragments/product-little.generated.js +1 -1
- package/dist/esm/graphql/fragments/product-option-value.generated.js +1 -1
- package/dist/esm/graphql/fragments/product-option.generated.js +1 -1
- package/dist/esm/graphql/fragments/product.generated.js +1 -1
- package/dist/esm/graphql/fragments/published-custom-section.generated.js +1 -1
- package/dist/esm/graphql/fragments/published-page-section.generated.js +1 -1
- package/dist/esm/graphql/fragments/published-theme-page.generated.js +1 -1
- package/dist/esm/graphql/fragments/published-theme-style.generated.js +1 -1
- package/dist/esm/graphql/fragments/selected-option.generated.js +1 -1
- package/dist/esm/graphql/fragments/variant.generated.js +1 -1
- package/dist/esm/graphql/mutations/page-view-up.generated.js +1 -1
- package/dist/esm/graphql/queries/products.generated.js +1 -1
- package/dist/esm/graphql/queries/store-property.generated.js +1 -1
- package/dist/esm/helpers/GlobalEvent.js +12 -10
- package/dist/esm/helpers/background.js +96 -96
- package/dist/esm/helpers/borders.js +123 -127
- package/dist/esm/helpers/clone-deep.js +1 -1
- package/dist/esm/helpers/cls.js +11 -15
- package/dist/esm/helpers/colors.js +121 -156
- package/dist/esm/helpers/compose-advance-style.js +115 -121
- package/dist/esm/helpers/constant.js +16 -11
- package/dist/esm/helpers/css-variable.js +2 -2
- package/dist/esm/helpers/email.js +3 -3
- package/dist/esm/helpers/flatten-connection.js +4 -5
- package/dist/esm/helpers/get-resonsive-value.js +24 -25
- package/dist/esm/helpers/get-shortname.js +87 -87
- package/dist/esm/helpers/is-browser.js +2 -2
- package/dist/esm/helpers/is-defined.js +2 -2
- package/dist/esm/helpers/is-empty-children.js +2 -2
- package/dist/esm/helpers/layout.js +9 -10
- package/dist/esm/helpers/load-script.js +26 -27
- package/dist/esm/helpers/make-style.js +77 -86
- package/dist/esm/helpers/normalize-builder-data.js +18 -12
- package/dist/esm/helpers/prefetch-queries.js +72 -52
- package/dist/esm/helpers/product.js +25 -29
- package/dist/esm/helpers/queries/get-collection.js +179 -167
- package/dist/esm/helpers/queries/get-product-by-slug.js +103 -94
- package/dist/esm/helpers/queries/get-product.js +121 -106
- package/dist/esm/helpers/queries/get-products.js +137 -125
- package/dist/esm/helpers/radius.js +78 -81
- package/dist/esm/helpers/render.js +56 -56
- package/dist/esm/helpers/shadow.js +38 -38
- package/dist/esm/helpers/size.js +12 -13
- package/dist/esm/helpers/spacing.js +35 -37
- package/dist/esm/helpers/tracking/fpixel.js +21 -22
- package/dist/esm/helpers/tracking/gtag.js +84 -90
- package/dist/esm/helpers/tracking/tiktokpixel.js +12 -12
- package/dist/esm/helpers/typography.js +2 -2
- package/dist/esm/hooks/cart/use-add-to-cart.js +10 -10
- package/dist/esm/hooks/cart/use-cart-data.js +18 -16
- package/dist/esm/hooks/cart/use-cart-discount-codes-update.js +10 -10
- package/dist/esm/hooks/cart/use-cart-note-update.js +10 -10
- package/dist/esm/hooks/cart/use-create-cart.js +12 -12
- package/dist/esm/hooks/cart/use-remove-cart-item.js +10 -10
- package/dist/esm/hooks/cart/use-update-cart-item.js +10 -10
- package/dist/esm/hooks/shop/use-collection-query.js +12 -6
- package/dist/esm/hooks/shop/use-product-query.js +12 -6
- package/dist/esm/hooks/shop/use-products-query.js +14 -6
- package/dist/esm/hooks/shop.js +86 -67
- package/dist/esm/hooks/use-current-device.js +14 -16
- package/dist/esm/hooks/use-lazy-video.js +7 -7
- package/dist/esm/hooks/useCartId.js +35 -27
- package/dist/esm/hooks/useCartLine.js +2 -2
- package/dist/esm/hooks/useCartUI.js +37 -31
- package/dist/esm/hooks/useCollection.js +2 -2
- package/dist/esm/hooks/useFetchHandle.js +6 -6
- package/dist/esm/hooks/useFormatMoney.js +11 -7
- package/dist/esm/hooks/useIsomorphicLayoutEffect.js +1 -1
- package/dist/esm/hooks/useLoadScript.js +22 -20
- package/dist/esm/hooks/useMoney.js +59 -42
- package/dist/esm/hooks/usePrevious.js +12 -10
- package/dist/esm/hooks/useProduct.js +92 -69
- package/dist/esm/hooks/useProductList.js +11 -11
- package/dist/esm/hooks/useSuspenseFetch.js +20 -17
- package/dist/esm/hooks/useSwatchesOptions.js +32 -30
- package/dist/esm/types/global-style.js +9 -2
- package/dist/types/index.d.ts +30 -2
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ const ProductsEdgeDetail = `
|
|
|
13
13
|
...ProductSelect
|
|
14
14
|
}
|
|
15
15
|
}
|
|
16
|
-
`;
|
|
16
|
+
`;
|
|
17
17
|
const ProductsDocument = `
|
|
18
18
|
query products($first: Int, $where: ProductWhereInput, $firstMedia: Int, $orderBy: ProductOrder, $after: Cursor, $firstVariant: Int, $afterVariant: Cursor, $afterMedia: Cursor, $orderByMedia: MediaOrder) {
|
|
19
19
|
products(first: $first, where: $where, orderBy: $orderBy, after: $after) {
|
|
@@ -1,13 +1,15 @@
|
|
|
1
|
-
const globalEvent = {
|
|
2
|
-
subscribe(callback) {
|
|
3
|
-
document.addEventListener('onDispatch', (e)
|
|
4
|
-
},
|
|
5
|
-
dispatch(data) {
|
|
6
|
-
document.dispatchEvent(new CustomEvent('onDispatch', {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
const globalEvent = {
|
|
2
|
+
subscribe (callback) {
|
|
3
|
+
document.addEventListener('onDispatch', (e)=>callback(e.detail));
|
|
4
|
+
},
|
|
5
|
+
dispatch (data) {
|
|
6
|
+
document.dispatchEvent(new CustomEvent('onDispatch', {
|
|
7
|
+
detail: data
|
|
8
|
+
}));
|
|
9
|
+
},
|
|
10
|
+
remove (callback) {
|
|
11
|
+
document.removeEventListener('onDispatch', callback);
|
|
12
|
+
}
|
|
11
13
|
};
|
|
12
14
|
|
|
13
15
|
export { globalEvent as default };
|
|
@@ -1,102 +1,102 @@
|
|
|
1
1
|
import { isColor } from './colors.js';
|
|
2
2
|
import { makeStyleResponsive } from './make-style.js';
|
|
3
3
|
|
|
4
|
-
const getStyleBackgroundByDevice = (background)
|
|
5
|
-
if (!background) {
|
|
6
|
-
return {};
|
|
7
|
-
}
|
|
8
|
-
return {
|
|
9
|
-
...getStyleBgColor(background),
|
|
10
|
-
...getStyleBgImage(background),
|
|
11
|
-
...getStyleBgPosition(background),
|
|
12
|
-
...getStyleBgSize(background),
|
|
13
|
-
...getStyleBgRepeat(background),
|
|
14
|
-
...getStyleBgAttachment(background)
|
|
15
|
-
};
|
|
16
|
-
};
|
|
17
|
-
const getStyleBgColor = (background)
|
|
18
|
-
const bgColor = {
|
|
19
|
-
desktop: getBgColorByDevice(background, 'desktop'),
|
|
20
|
-
tablet: getBgColorByDevice(background, 'tablet'),
|
|
21
|
-
mobile: getBgColorByDevice(background, 'mobile')
|
|
22
|
-
};
|
|
23
|
-
return makeStyleResponsive('bgc', bgColor);
|
|
24
|
-
};
|
|
25
|
-
const getBgColorByDevice = (background, device)
|
|
26
|
-
return getColor(background?.[device]?.color);
|
|
27
|
-
};
|
|
28
|
-
const getColor = (color)
|
|
29
|
-
if (!color) {
|
|
30
|
-
return;
|
|
31
|
-
}
|
|
32
|
-
if (isColor(color?.toString())) {
|
|
33
|
-
return color;
|
|
34
|
-
}
|
|
35
|
-
return `var(--g-c-${color})`;
|
|
36
|
-
};
|
|
37
|
-
const getStyleBgImage = (background)
|
|
38
|
-
const bgImage = {
|
|
39
|
-
// desktop:
|
|
40
|
-
// background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
|
|
41
|
-
// tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
|
|
42
|
-
// mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
|
|
43
|
-
desktop: getBgImageByDevice(background, 'desktop'),
|
|
44
|
-
tablet: getBgImageByDevice(background, 'tablet'),
|
|
45
|
-
mobile: getBgImageByDevice(background, 'mobile')
|
|
46
|
-
};
|
|
47
|
-
return makeStyleResponsive('bgi', bgImage);
|
|
48
|
-
};
|
|
49
|
-
const getBgImageByDevice = (background, device)
|
|
50
|
-
const imageByDevice = background?.[device]?.image?.src;
|
|
51
|
-
if (typeof imageByDevice === 'string') {
|
|
52
|
-
return `url(${imageByDevice})`;
|
|
53
|
-
}
|
|
54
|
-
return;
|
|
55
|
-
};
|
|
56
|
-
const getStyleBgPosition = (background)
|
|
57
|
-
const bgPosition = {
|
|
58
|
-
desktop: getBgPositionByDevice(background, 'desktop'),
|
|
59
|
-
tablet: getBgPositionByDevice(background, 'tablet'),
|
|
60
|
-
mobile: getBgPositionByDevice(background, 'mobile')
|
|
61
|
-
};
|
|
62
|
-
return makeStyleResponsive('bgp', bgPosition);
|
|
63
|
-
};
|
|
64
|
-
const getBgPositionByDevice = (background, device)
|
|
65
|
-
const positionByDevice = background?.[device]?.position;
|
|
66
|
-
return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
|
|
67
|
-
};
|
|
68
|
-
const getStyleBgSize = (background)
|
|
69
|
-
const bgSize = {
|
|
70
|
-
desktop: getBgSizeByDevice(background, 'desktop'),
|
|
71
|
-
tablet: getBgSizeByDevice(background, 'tablet'),
|
|
72
|
-
mobile: getBgSizeByDevice(background, 'mobile')
|
|
73
|
-
};
|
|
74
|
-
return makeStyleResponsive('bgs', bgSize);
|
|
75
|
-
};
|
|
76
|
-
const getBgSizeByDevice = (background, device)
|
|
77
|
-
return background?.[device]?.size;
|
|
78
|
-
};
|
|
79
|
-
const getStyleBgRepeat = (background)
|
|
80
|
-
const bgRepeat = {
|
|
81
|
-
desktop: getBgRepeatByDevice(background, 'desktop'),
|
|
82
|
-
tablet: getBgRepeatByDevice(background, 'tablet'),
|
|
83
|
-
mobile: getBgRepeatByDevice(background, 'mobile')
|
|
84
|
-
};
|
|
85
|
-
return makeStyleResponsive('bgr', bgRepeat);
|
|
86
|
-
};
|
|
87
|
-
const getBgRepeatByDevice = (background, device)
|
|
88
|
-
return background?.[device]?.repeat;
|
|
89
|
-
};
|
|
90
|
-
const getStyleBgAttachment = (background)
|
|
91
|
-
const bgAttachment = {
|
|
92
|
-
desktop: getBgAttachmentByDevice(background, 'desktop'),
|
|
93
|
-
tablet: getBgAttachmentByDevice(background, 'tablet'),
|
|
94
|
-
mobile: getBgAttachmentByDevice(background, 'mobile')
|
|
95
|
-
};
|
|
96
|
-
return makeStyleResponsive('bga', bgAttachment);
|
|
97
|
-
};
|
|
98
|
-
const getBgAttachmentByDevice = (background, device)
|
|
99
|
-
return background?.[device]?.attachment;
|
|
4
|
+
const getStyleBackgroundByDevice = (background)=>{
|
|
5
|
+
if (!background) {
|
|
6
|
+
return {};
|
|
7
|
+
}
|
|
8
|
+
return {
|
|
9
|
+
...getStyleBgColor(background),
|
|
10
|
+
...getStyleBgImage(background),
|
|
11
|
+
...getStyleBgPosition(background),
|
|
12
|
+
...getStyleBgSize(background),
|
|
13
|
+
...getStyleBgRepeat(background),
|
|
14
|
+
...getStyleBgAttachment(background)
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
const getStyleBgColor = (background)=>{
|
|
18
|
+
const bgColor = {
|
|
19
|
+
desktop: getBgColorByDevice(background, 'desktop'),
|
|
20
|
+
tablet: getBgColorByDevice(background, 'tablet'),
|
|
21
|
+
mobile: getBgColorByDevice(background, 'mobile')
|
|
22
|
+
};
|
|
23
|
+
return makeStyleResponsive('bgc', bgColor);
|
|
24
|
+
};
|
|
25
|
+
const getBgColorByDevice = (background, device)=>{
|
|
26
|
+
return getColor(background?.[device]?.color);
|
|
27
|
+
};
|
|
28
|
+
const getColor = (color)=>{
|
|
29
|
+
if (!color) {
|
|
30
|
+
return;
|
|
31
|
+
}
|
|
32
|
+
if (isColor(color?.toString())) {
|
|
33
|
+
return color;
|
|
34
|
+
}
|
|
35
|
+
return `var(--g-c-${color})`;
|
|
36
|
+
};
|
|
37
|
+
const getStyleBgImage = (background)=>{
|
|
38
|
+
const bgImage = {
|
|
39
|
+
// desktop:
|
|
40
|
+
// background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
|
|
41
|
+
// tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
|
|
42
|
+
// mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
|
|
43
|
+
desktop: getBgImageByDevice(background, 'desktop'),
|
|
44
|
+
tablet: getBgImageByDevice(background, 'tablet'),
|
|
45
|
+
mobile: getBgImageByDevice(background, 'mobile')
|
|
46
|
+
};
|
|
47
|
+
return makeStyleResponsive('bgi', bgImage);
|
|
48
|
+
};
|
|
49
|
+
const getBgImageByDevice = (background, device)=>{
|
|
50
|
+
const imageByDevice = background?.[device]?.image?.src;
|
|
51
|
+
if (typeof imageByDevice === 'string') {
|
|
52
|
+
return `url(${imageByDevice})`;
|
|
53
|
+
}
|
|
54
|
+
return;
|
|
55
|
+
};
|
|
56
|
+
const getStyleBgPosition = (background)=>{
|
|
57
|
+
const bgPosition = {
|
|
58
|
+
desktop: getBgPositionByDevice(background, 'desktop'),
|
|
59
|
+
tablet: getBgPositionByDevice(background, 'tablet'),
|
|
60
|
+
mobile: getBgPositionByDevice(background, 'mobile')
|
|
61
|
+
};
|
|
62
|
+
return makeStyleResponsive('bgp', bgPosition);
|
|
63
|
+
};
|
|
64
|
+
const getBgPositionByDevice = (background, device)=>{
|
|
65
|
+
const positionByDevice = background?.[device]?.position;
|
|
66
|
+
return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
|
|
67
|
+
};
|
|
68
|
+
const getStyleBgSize = (background)=>{
|
|
69
|
+
const bgSize = {
|
|
70
|
+
desktop: getBgSizeByDevice(background, 'desktop'),
|
|
71
|
+
tablet: getBgSizeByDevice(background, 'tablet'),
|
|
72
|
+
mobile: getBgSizeByDevice(background, 'mobile')
|
|
73
|
+
};
|
|
74
|
+
return makeStyleResponsive('bgs', bgSize);
|
|
75
|
+
};
|
|
76
|
+
const getBgSizeByDevice = (background, device)=>{
|
|
77
|
+
return background?.[device]?.size;
|
|
78
|
+
};
|
|
79
|
+
const getStyleBgRepeat = (background)=>{
|
|
80
|
+
const bgRepeat = {
|
|
81
|
+
desktop: getBgRepeatByDevice(background, 'desktop'),
|
|
82
|
+
tablet: getBgRepeatByDevice(background, 'tablet'),
|
|
83
|
+
mobile: getBgRepeatByDevice(background, 'mobile')
|
|
84
|
+
};
|
|
85
|
+
return makeStyleResponsive('bgr', bgRepeat);
|
|
86
|
+
};
|
|
87
|
+
const getBgRepeatByDevice = (background, device)=>{
|
|
88
|
+
return background?.[device]?.repeat;
|
|
89
|
+
};
|
|
90
|
+
const getStyleBgAttachment = (background)=>{
|
|
91
|
+
const bgAttachment = {
|
|
92
|
+
desktop: getBgAttachmentByDevice(background, 'desktop'),
|
|
93
|
+
tablet: getBgAttachmentByDevice(background, 'tablet'),
|
|
94
|
+
mobile: getBgAttachmentByDevice(background, 'mobile')
|
|
95
|
+
};
|
|
96
|
+
return makeStyleResponsive('bga', bgAttachment);
|
|
97
|
+
};
|
|
98
|
+
const getBgAttachmentByDevice = (background, device)=>{
|
|
99
|
+
return background?.[device]?.attachment;
|
|
100
100
|
};
|
|
101
101
|
|
|
102
102
|
export { getStyleBackgroundByDevice };
|
|
@@ -1,133 +1,129 @@
|
|
|
1
1
|
import { getGlobalColorStateResponsiveStyle, getGlobalColorStateStyle, getGlobalColorStateResponsiveClass, getGlobalColorStateClass } from './colors.js';
|
|
2
2
|
import { makeStyleResponsiveState, makeStyleState } from './make-style.js';
|
|
3
3
|
|
|
4
|
-
const handleConvertBorderStyle = (value)
|
|
5
|
-
if (!value)
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
if (
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
const
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
hover: data?.hover?.color,
|
|
128
|
-
focus: data?.focus?.color,
|
|
129
|
-
};
|
|
130
|
-
return getGlobalColorStateClass('border', newVal);
|
|
4
|
+
const handleConvertBorderStyle = (value)=>{
|
|
5
|
+
if (!value) return undefined;
|
|
6
|
+
if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
|
|
7
|
+
const data = value;
|
|
8
|
+
const newVal = {
|
|
9
|
+
desktop: {
|
|
10
|
+
normal: data.desktop?.normal?.border,
|
|
11
|
+
hover: data.desktop?.hover?.border,
|
|
12
|
+
focus: data.desktop?.focus?.border
|
|
13
|
+
},
|
|
14
|
+
tablet: {
|
|
15
|
+
normal: data.tablet?.normal?.border,
|
|
16
|
+
hover: data.tablet?.hover?.border,
|
|
17
|
+
focus: data.tablet?.focus?.border
|
|
18
|
+
},
|
|
19
|
+
mobile: {
|
|
20
|
+
normal: data.mobile?.normal?.border,
|
|
21
|
+
hover: data.mobile?.hover?.border,
|
|
22
|
+
focus: data.mobile?.focus?.border
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
return makeStyleResponsiveState('bs', newVal);
|
|
26
|
+
}
|
|
27
|
+
const data = value;
|
|
28
|
+
const newVal = {
|
|
29
|
+
normal: data?.normal?.border,
|
|
30
|
+
hover: data?.hover?.border,
|
|
31
|
+
focus: data?.focus?.border
|
|
32
|
+
};
|
|
33
|
+
return makeStyleState('bs', newVal);
|
|
34
|
+
};
|
|
35
|
+
const handleConvertBorderWidth = (value)=>{
|
|
36
|
+
if (!value) return undefined;
|
|
37
|
+
if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
|
|
38
|
+
const data = value;
|
|
39
|
+
const newVal = {
|
|
40
|
+
desktop: {
|
|
41
|
+
normal: data.desktop?.normal?.width,
|
|
42
|
+
hover: data.desktop?.hover?.width,
|
|
43
|
+
focus: data.desktop?.focus?.width
|
|
44
|
+
},
|
|
45
|
+
tablet: {
|
|
46
|
+
normal: data.tablet?.normal?.width,
|
|
47
|
+
hover: data.tablet?.hover?.width,
|
|
48
|
+
focus: data.tablet?.focus?.width
|
|
49
|
+
},
|
|
50
|
+
mobile: {
|
|
51
|
+
normal: data.mobile?.normal?.width,
|
|
52
|
+
hover: data.mobile?.hover?.width,
|
|
53
|
+
focus: data.mobile?.focus?.width
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
return makeStyleResponsiveState('bw', newVal);
|
|
57
|
+
}
|
|
58
|
+
const data = value;
|
|
59
|
+
const newVal = {
|
|
60
|
+
normal: data?.normal?.width,
|
|
61
|
+
hover: data?.hover?.width,
|
|
62
|
+
focus: data?.focus?.width
|
|
63
|
+
};
|
|
64
|
+
return makeStyleState('bw', newVal);
|
|
65
|
+
};
|
|
66
|
+
const handleConvertBorderColor = (value)=>{
|
|
67
|
+
if (!value) return undefined;
|
|
68
|
+
if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
|
|
69
|
+
const data = value;
|
|
70
|
+
const newVal = {
|
|
71
|
+
desktop: {
|
|
72
|
+
normal: data.desktop?.normal?.color,
|
|
73
|
+
hover: data.desktop?.hover?.color,
|
|
74
|
+
focus: data.desktop?.focus?.color
|
|
75
|
+
},
|
|
76
|
+
tablet: {
|
|
77
|
+
normal: data.tablet?.normal?.color,
|
|
78
|
+
hover: data.tablet?.hover?.color,
|
|
79
|
+
focus: data.tablet?.focus?.color
|
|
80
|
+
},
|
|
81
|
+
mobile: {
|
|
82
|
+
normal: data.mobile?.normal?.color,
|
|
83
|
+
hover: data.mobile?.hover?.color,
|
|
84
|
+
focus: data.mobile?.focus?.color
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
return getGlobalColorStateResponsiveStyle('bc', newVal);
|
|
88
|
+
}
|
|
89
|
+
const data = value;
|
|
90
|
+
const newVal = {
|
|
91
|
+
normal: data?.normal?.color,
|
|
92
|
+
hover: data?.hover?.color,
|
|
93
|
+
focus: data?.focus?.color
|
|
94
|
+
};
|
|
95
|
+
return getGlobalColorStateStyle('bc', newVal);
|
|
96
|
+
};
|
|
97
|
+
const handleConvertClassColor = (value)=>{
|
|
98
|
+
if (!value) return undefined;
|
|
99
|
+
if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
|
|
100
|
+
const data = value;
|
|
101
|
+
const newVal = {
|
|
102
|
+
desktop: {
|
|
103
|
+
normal: data.desktop?.normal?.color,
|
|
104
|
+
hover: data.desktop?.hover?.color,
|
|
105
|
+
focus: data.desktop?.focus?.color
|
|
106
|
+
},
|
|
107
|
+
tablet: {
|
|
108
|
+
normal: data.tablet?.normal?.color,
|
|
109
|
+
hover: data.tablet?.hover?.color,
|
|
110
|
+
focus: data.tablet?.focus?.color
|
|
111
|
+
},
|
|
112
|
+
mobile: {
|
|
113
|
+
normal: data.mobile?.normal?.color,
|
|
114
|
+
hover: data.mobile?.hover?.color,
|
|
115
|
+
focus: data.mobile?.focus?.color
|
|
116
|
+
}
|
|
117
|
+
};
|
|
118
|
+
return getGlobalColorStateResponsiveClass('border', newVal);
|
|
119
|
+
}
|
|
120
|
+
const data = value;
|
|
121
|
+
const newVal = {
|
|
122
|
+
normal: data?.normal?.color,
|
|
123
|
+
hover: data?.hover?.color,
|
|
124
|
+
focus: data?.focus?.color
|
|
125
|
+
};
|
|
126
|
+
return getGlobalColorStateClass('border', newVal);
|
|
131
127
|
};
|
|
132
128
|
|
|
133
129
|
export { handleConvertBorderColor, handleConvertBorderStyle, handleConvertBorderWidth, handleConvertClassColor };
|
package/dist/esm/helpers/cls.js
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
|
-
function toVal(mix) {
|
|
2
|
-
if (typeof mix === 'string') {
|
|
3
|
-
return mix;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
function cls(...classes) {
|
|
15
|
-
return classes.map(toVal).filter(Boolean).join(' ');
|
|
1
|
+
function toVal(mix) {
|
|
2
|
+
if (typeof mix === 'string') {
|
|
3
|
+
return mix;
|
|
4
|
+
} else if (typeof mix === 'object' && mix !== null) {
|
|
5
|
+
return Object.keys(mix).filter((key)=>mix[key]).join(' ');
|
|
6
|
+
} else {
|
|
7
|
+
return false;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
function cls(...classes) {
|
|
11
|
+
return classes.map(toVal).filter(Boolean).join(' ');
|
|
16
12
|
}
|
|
17
13
|
|
|
18
14
|
export { cls };
|