@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.
Files changed (206) hide show
  1. package/dist/cjs/components/AddOn.js +7 -7
  2. package/dist/cjs/components/ComponentWrapper.js +14 -8
  3. package/dist/cjs/components/ComponentWrapperPreview.js +55 -46
  4. package/dist/cjs/components/Empty.js +1 -1
  5. package/dist/cjs/components/Render.js +50 -13
  6. package/dist/cjs/components/Render.liquid.js +81 -57
  7. package/dist/cjs/components/RenderBlock.js +41 -8
  8. package/dist/cjs/components/RenderPreview.js +51 -13
  9. package/dist/cjs/components/RenderSection.js +11 -7
  10. package/dist/cjs/components/constant.js +24 -24
  11. package/dist/cjs/contexts/AddonContext.js +25 -14
  12. package/dist/cjs/contexts/BuilderComponent.js +23 -19
  13. package/dist/cjs/contexts/BuilderContext.js +25 -19
  14. package/dist/cjs/contexts/BuilderPreviewContext.js +349 -341
  15. package/dist/cjs/contexts/CartLineContext.js +19 -14
  16. package/dist/cjs/contexts/CollectionContext.js +21 -13
  17. package/dist/cjs/contexts/ProductContext.js +136 -115
  18. package/dist/cjs/contexts/ProductListContext.js +21 -13
  19. package/dist/cjs/contexts/SectionContext.js +41 -37
  20. package/dist/cjs/contexts/ShopContext.js +54 -31
  21. package/dist/cjs/graphql/fragments/analytic.generated.js +1 -1
  22. package/dist/cjs/graphql/fragments/collection-detail.generated.js +1 -1
  23. package/dist/cjs/graphql/fragments/collection-product.generated.js +1 -1
  24. package/dist/cjs/graphql/fragments/custom-code.generated.js +1 -1
  25. package/dist/cjs/graphql/fragments/data-seo.generated.js +1 -1
  26. package/dist/cjs/graphql/fragments/media.generated.js +1 -1
  27. package/dist/cjs/graphql/fragments/product-little.generated.js +1 -1
  28. package/dist/cjs/graphql/fragments/product-option-value.generated.js +1 -1
  29. package/dist/cjs/graphql/fragments/product-option.generated.js +1 -1
  30. package/dist/cjs/graphql/fragments/product.generated.js +1 -1
  31. package/dist/cjs/graphql/fragments/published-custom-section.generated.js +1 -1
  32. package/dist/cjs/graphql/fragments/published-page-section.generated.js +1 -1
  33. package/dist/cjs/graphql/fragments/published-theme-page.generated.js +1 -1
  34. package/dist/cjs/graphql/fragments/published-theme-style.generated.js +1 -1
  35. package/dist/cjs/graphql/fragments/selected-option.generated.js +1 -1
  36. package/dist/cjs/graphql/fragments/variant.generated.js +1 -1
  37. package/dist/cjs/graphql/mutations/page-view-up.generated.js +1 -1
  38. package/dist/cjs/graphql/queries/products.generated.js +1 -1
  39. package/dist/cjs/graphql/queries/store-property.generated.js +1 -1
  40. package/dist/cjs/helpers/GlobalEvent.js +12 -10
  41. package/dist/cjs/helpers/background.js +96 -96
  42. package/dist/cjs/helpers/borders.js +123 -127
  43. package/dist/cjs/helpers/clone-deep.js +1 -1
  44. package/dist/cjs/helpers/cls.js +11 -15
  45. package/dist/cjs/helpers/colors.js +121 -156
  46. package/dist/cjs/helpers/compose-advance-style.js +115 -121
  47. package/dist/cjs/helpers/constant.js +16 -11
  48. package/dist/cjs/helpers/css-variable.js +2 -2
  49. package/dist/cjs/helpers/email.js +3 -3
  50. package/dist/cjs/helpers/flatten-connection.js +4 -5
  51. package/dist/cjs/helpers/get-resonsive-value.js +24 -25
  52. package/dist/cjs/helpers/get-shortname.js +87 -87
  53. package/dist/cjs/helpers/is-browser.js +2 -2
  54. package/dist/cjs/helpers/is-defined.js +2 -2
  55. package/dist/cjs/helpers/is-empty-children.js +2 -2
  56. package/dist/cjs/helpers/layout.js +9 -10
  57. package/dist/cjs/helpers/load-script.js +26 -27
  58. package/dist/cjs/helpers/make-style.js +77 -86
  59. package/dist/cjs/helpers/normalize-builder-data.js +18 -12
  60. package/dist/cjs/helpers/prefetch-queries.js +72 -52
  61. package/dist/cjs/helpers/product.js +25 -29
  62. package/dist/cjs/helpers/queries/get-collection.js +179 -167
  63. package/dist/cjs/helpers/queries/get-product-by-slug.js +103 -94
  64. package/dist/cjs/helpers/queries/get-product.js +121 -106
  65. package/dist/cjs/helpers/queries/get-products.js +137 -125
  66. package/dist/cjs/helpers/radius.js +78 -81
  67. package/dist/cjs/helpers/render.js +56 -56
  68. package/dist/cjs/helpers/shadow.js +38 -38
  69. package/dist/cjs/helpers/size.js +12 -13
  70. package/dist/cjs/helpers/spacing.js +35 -37
  71. package/dist/cjs/helpers/tracking/fpixel.js +21 -22
  72. package/dist/cjs/helpers/tracking/gtag.js +84 -90
  73. package/dist/cjs/helpers/tracking/tiktokpixel.js +12 -12
  74. package/dist/cjs/helpers/typography.js +2 -2
  75. package/dist/cjs/hooks/cart/use-add-to-cart.js +10 -10
  76. package/dist/cjs/hooks/cart/use-cart-data.js +18 -16
  77. package/dist/cjs/hooks/cart/use-cart-discount-codes-update.js +10 -10
  78. package/dist/cjs/hooks/cart/use-cart-note-update.js +10 -10
  79. package/dist/cjs/hooks/cart/use-create-cart.js +12 -12
  80. package/dist/cjs/hooks/cart/use-remove-cart-item.js +10 -10
  81. package/dist/cjs/hooks/cart/use-update-cart-item.js +10 -10
  82. package/dist/cjs/hooks/shop/use-collection-query.js +12 -6
  83. package/dist/cjs/hooks/shop/use-product-query.js +12 -6
  84. package/dist/cjs/hooks/shop/use-products-query.js +14 -6
  85. package/dist/cjs/hooks/shop.js +86 -67
  86. package/dist/cjs/hooks/use-current-device.js +14 -16
  87. package/dist/cjs/hooks/use-lazy-video.js +7 -7
  88. package/dist/cjs/hooks/useCartId.js +35 -27
  89. package/dist/cjs/hooks/useCartLine.js +2 -2
  90. package/dist/cjs/hooks/useCartUI.js +37 -31
  91. package/dist/cjs/hooks/useCollection.js +2 -2
  92. package/dist/cjs/hooks/useFetchHandle.js +6 -6
  93. package/dist/cjs/hooks/useFormatMoney.js +11 -7
  94. package/dist/cjs/hooks/useIsomorphicLayoutEffect.js +1 -1
  95. package/dist/cjs/hooks/useLoadScript.js +22 -20
  96. package/dist/cjs/hooks/useMoney.js +59 -42
  97. package/dist/cjs/hooks/usePrevious.js +12 -10
  98. package/dist/cjs/hooks/useProduct.js +92 -69
  99. package/dist/cjs/hooks/useProductList.js +11 -11
  100. package/dist/cjs/hooks/useSuspenseFetch.js +20 -17
  101. package/dist/cjs/hooks/useSwatchesOptions.js +32 -30
  102. package/dist/cjs/types/global-style.js +9 -2
  103. package/dist/esm/components/AddOn.js +7 -7
  104. package/dist/esm/components/ComponentWrapper.js +14 -8
  105. package/dist/esm/components/ComponentWrapperPreview.js +55 -46
  106. package/dist/esm/components/Empty.js +1 -1
  107. package/dist/esm/components/Render.js +50 -13
  108. package/dist/esm/components/Render.liquid.js +81 -57
  109. package/dist/esm/components/RenderBlock.js +41 -8
  110. package/dist/esm/components/RenderPreview.js +51 -13
  111. package/dist/esm/components/RenderSection.js +11 -7
  112. package/dist/esm/components/constant.js +24 -24
  113. package/dist/esm/contexts/AddonContext.js +26 -15
  114. package/dist/esm/contexts/BuilderComponent.js +24 -20
  115. package/dist/esm/contexts/BuilderContext.js +26 -20
  116. package/dist/esm/contexts/BuilderPreviewContext.js +350 -342
  117. package/dist/esm/contexts/CartLineContext.js +20 -15
  118. package/dist/esm/contexts/CollectionContext.js +22 -14
  119. package/dist/esm/contexts/ProductContext.js +137 -116
  120. package/dist/esm/contexts/ProductListContext.js +22 -14
  121. package/dist/esm/contexts/SectionContext.js +42 -38
  122. package/dist/esm/contexts/ShopContext.js +55 -32
  123. package/dist/esm/graphql/fragments/analytic.generated.js +1 -1
  124. package/dist/esm/graphql/fragments/collection-detail.generated.js +1 -1
  125. package/dist/esm/graphql/fragments/collection-product.generated.js +1 -1
  126. package/dist/esm/graphql/fragments/custom-code.generated.js +1 -1
  127. package/dist/esm/graphql/fragments/data-seo.generated.js +1 -1
  128. package/dist/esm/graphql/fragments/media.generated.js +1 -1
  129. package/dist/esm/graphql/fragments/product-little.generated.js +1 -1
  130. package/dist/esm/graphql/fragments/product-option-value.generated.js +1 -1
  131. package/dist/esm/graphql/fragments/product-option.generated.js +1 -1
  132. package/dist/esm/graphql/fragments/product.generated.js +1 -1
  133. package/dist/esm/graphql/fragments/published-custom-section.generated.js +1 -1
  134. package/dist/esm/graphql/fragments/published-page-section.generated.js +1 -1
  135. package/dist/esm/graphql/fragments/published-theme-page.generated.js +1 -1
  136. package/dist/esm/graphql/fragments/published-theme-style.generated.js +1 -1
  137. package/dist/esm/graphql/fragments/selected-option.generated.js +1 -1
  138. package/dist/esm/graphql/fragments/variant.generated.js +1 -1
  139. package/dist/esm/graphql/mutations/page-view-up.generated.js +1 -1
  140. package/dist/esm/graphql/queries/products.generated.js +1 -1
  141. package/dist/esm/graphql/queries/store-property.generated.js +1 -1
  142. package/dist/esm/helpers/GlobalEvent.js +12 -10
  143. package/dist/esm/helpers/background.js +96 -96
  144. package/dist/esm/helpers/borders.js +123 -127
  145. package/dist/esm/helpers/clone-deep.js +1 -1
  146. package/dist/esm/helpers/cls.js +11 -15
  147. package/dist/esm/helpers/colors.js +121 -156
  148. package/dist/esm/helpers/compose-advance-style.js +115 -121
  149. package/dist/esm/helpers/constant.js +16 -11
  150. package/dist/esm/helpers/css-variable.js +2 -2
  151. package/dist/esm/helpers/email.js +3 -3
  152. package/dist/esm/helpers/flatten-connection.js +4 -5
  153. package/dist/esm/helpers/get-resonsive-value.js +24 -25
  154. package/dist/esm/helpers/get-shortname.js +87 -87
  155. package/dist/esm/helpers/is-browser.js +2 -2
  156. package/dist/esm/helpers/is-defined.js +2 -2
  157. package/dist/esm/helpers/is-empty-children.js +2 -2
  158. package/dist/esm/helpers/layout.js +9 -10
  159. package/dist/esm/helpers/load-script.js +26 -27
  160. package/dist/esm/helpers/make-style.js +77 -86
  161. package/dist/esm/helpers/normalize-builder-data.js +18 -12
  162. package/dist/esm/helpers/prefetch-queries.js +72 -52
  163. package/dist/esm/helpers/product.js +25 -29
  164. package/dist/esm/helpers/queries/get-collection.js +179 -167
  165. package/dist/esm/helpers/queries/get-product-by-slug.js +103 -94
  166. package/dist/esm/helpers/queries/get-product.js +121 -106
  167. package/dist/esm/helpers/queries/get-products.js +137 -125
  168. package/dist/esm/helpers/radius.js +78 -81
  169. package/dist/esm/helpers/render.js +56 -56
  170. package/dist/esm/helpers/shadow.js +38 -38
  171. package/dist/esm/helpers/size.js +12 -13
  172. package/dist/esm/helpers/spacing.js +35 -37
  173. package/dist/esm/helpers/tracking/fpixel.js +21 -22
  174. package/dist/esm/helpers/tracking/gtag.js +84 -90
  175. package/dist/esm/helpers/tracking/tiktokpixel.js +12 -12
  176. package/dist/esm/helpers/typography.js +2 -2
  177. package/dist/esm/hooks/cart/use-add-to-cart.js +10 -10
  178. package/dist/esm/hooks/cart/use-cart-data.js +18 -16
  179. package/dist/esm/hooks/cart/use-cart-discount-codes-update.js +10 -10
  180. package/dist/esm/hooks/cart/use-cart-note-update.js +10 -10
  181. package/dist/esm/hooks/cart/use-create-cart.js +12 -12
  182. package/dist/esm/hooks/cart/use-remove-cart-item.js +10 -10
  183. package/dist/esm/hooks/cart/use-update-cart-item.js +10 -10
  184. package/dist/esm/hooks/shop/use-collection-query.js +12 -6
  185. package/dist/esm/hooks/shop/use-product-query.js +12 -6
  186. package/dist/esm/hooks/shop/use-products-query.js +14 -6
  187. package/dist/esm/hooks/shop.js +86 -67
  188. package/dist/esm/hooks/use-current-device.js +14 -16
  189. package/dist/esm/hooks/use-lazy-video.js +7 -7
  190. package/dist/esm/hooks/useCartId.js +35 -27
  191. package/dist/esm/hooks/useCartLine.js +2 -2
  192. package/dist/esm/hooks/useCartUI.js +37 -31
  193. package/dist/esm/hooks/useCollection.js +2 -2
  194. package/dist/esm/hooks/useFetchHandle.js +6 -6
  195. package/dist/esm/hooks/useFormatMoney.js +11 -7
  196. package/dist/esm/hooks/useIsomorphicLayoutEffect.js +1 -1
  197. package/dist/esm/hooks/useLoadScript.js +22 -20
  198. package/dist/esm/hooks/useMoney.js +59 -42
  199. package/dist/esm/hooks/usePrevious.js +12 -10
  200. package/dist/esm/hooks/useProduct.js +92 -69
  201. package/dist/esm/hooks/useProductList.js +11 -11
  202. package/dist/esm/hooks/useSuspenseFetch.js +20 -17
  203. package/dist/esm/hooks/useSwatchesOptions.js +32 -30
  204. package/dist/esm/types/global-style.js +9 -2
  205. package/dist/types/index.d.ts +30 -2
  206. package/package.json +1 -1
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const ProductSelect = `
3
+ /* eslint-disable */ const ProductSelect = `
4
4
  fragment ProductSelect on Product {
5
5
  ...ProductLittleSelect
6
6
  medias(first: $firstMedia, after: $afterMedia, orderBy: $orderByMedia) {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const PublishedCustomSectionSelect = `
3
+ /* eslint-disable */ const PublishedCustomSectionSelect = `
4
4
  fragment PublishedCustomSectionSelect on PublishedCustomSection {
5
5
  cid
6
6
  component
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const PublishedPageSectionSelect = `
3
+ /* eslint-disable */ const PublishedPageSectionSelect = `
4
4
  fragment PublishedPageSectionSelect on PublishedPageSection {
5
5
  cid
6
6
  component
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const PublishedThemePageSelect = `
3
+ /* eslint-disable */ const PublishedThemePageSelect = `
4
4
  fragment PublishedThemePageSelect on PublishedThemePage {
5
5
  id
6
6
  name
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const PublishedThemeStyleSelect = `
3
+ /* eslint-disable */ const PublishedThemeStyleSelect = `
4
4
  fragment PublishedThemeStyleSelect on PublishedThemeStyle {
5
5
  id
6
6
  data
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const SelectedOptionSelect = `
3
+ /* eslint-disable */ const SelectedOptionSelect = `
4
4
  fragment SelectedOptionSelect on SelectedOption {
5
5
  name
6
6
  value
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const VariantSelect = `
3
+ /* eslint-disable */ const VariantSelect = `
4
4
  fragment VariantSelect on ProductVariant {
5
5
  id
6
6
  title
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const PageViewUpDocument = `
3
+ /* eslint-disable */ const PageViewUpDocument = `
4
4
  mutation pageViewUp($pageHandle: String!, $userAgent: String!) {
5
5
  pageViewUp(pageHandle: $pageHandle, userAgent: $userAgent)
6
6
  }
@@ -15,7 +15,7 @@ const ProductsEdgeDetail = `
15
15
  ...ProductSelect
16
16
  }
17
17
  }
18
- `;
18
+ `;
19
19
  const ProductsDocument = `
20
20
  query products($first: Int, $where: ProductWhereInput, $firstMedia: Int, $orderBy: ProductOrder, $after: Cursor, $firstVariant: Int, $afterVariant: Cursor, $afterMedia: Cursor, $orderByMedia: MediaOrder) {
21
21
  products(first: $first, where: $where, orderBy: $orderBy, after: $after) {
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- const StorePropertyDocument = `
3
+ /* eslint-disable */ const StorePropertyDocument = `
4
4
  query storeProperty {
5
5
  storeProperty {
6
6
  favicon
@@ -2,16 +2,18 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const globalEvent = {
6
- subscribe(callback) {
7
- document.addEventListener('onDispatch', (e) => callback(e.detail));
8
- },
9
- dispatch(data) {
10
- document.dispatchEvent(new CustomEvent('onDispatch', { detail: data }));
11
- },
12
- remove(callback) {
13
- document.removeEventListener('onDispatch', callback);
14
- },
5
+ const globalEvent = {
6
+ subscribe (callback) {
7
+ document.addEventListener('onDispatch', (e)=>callback(e.detail));
8
+ },
9
+ dispatch (data) {
10
+ document.dispatchEvent(new CustomEvent('onDispatch', {
11
+ detail: data
12
+ }));
13
+ },
14
+ remove (callback) {
15
+ document.removeEventListener('onDispatch', callback);
16
+ }
15
17
  };
16
18
 
17
19
  exports.default = globalEvent;
@@ -3,102 +3,102 @@
3
3
  var colors = require('./colors.js');
4
4
  var makeStyle = require('./make-style.js');
5
5
 
6
- const getStyleBackgroundByDevice = (background) => {
7
- if (!background) {
8
- return {};
9
- }
10
- return {
11
- ...getStyleBgColor(background),
12
- ...getStyleBgImage(background),
13
- ...getStyleBgPosition(background),
14
- ...getStyleBgSize(background),
15
- ...getStyleBgRepeat(background),
16
- ...getStyleBgAttachment(background),
17
- };
18
- };
19
- const getStyleBgColor = (background) => {
20
- const bgColor = {
21
- desktop: getBgColorByDevice(background, 'desktop'),
22
- tablet: getBgColorByDevice(background, 'tablet'),
23
- mobile: getBgColorByDevice(background, 'mobile'),
24
- };
25
- return makeStyle.makeStyleResponsive('bgc', bgColor);
26
- };
27
- const getBgColorByDevice = (background, device) => {
28
- return getColor(background?.[device]?.color);
29
- };
30
- const getColor = (color) => {
31
- if (!color) {
32
- return;
33
- }
34
- if (colors.isColor(color?.toString())) {
35
- return color;
36
- }
37
- return `var(--g-c-${color})`;
38
- };
39
- const getStyleBgImage = (background) => {
40
- const bgImage = {
41
- // desktop:
42
- // background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
43
- // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
44
- // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
45
- desktop: getBgImageByDevice(background, 'desktop'),
46
- tablet: getBgImageByDevice(background, 'tablet'),
47
- mobile: getBgImageByDevice(background, 'mobile'),
48
- };
49
- return makeStyle.makeStyleResponsive('bgi', bgImage);
50
- };
51
- const getBgImageByDevice = (background, device) => {
52
- const imageByDevice = background?.[device]?.image?.src;
53
- if (typeof imageByDevice === 'string') {
54
- return `url(${imageByDevice})`;
55
- }
56
- return;
57
- };
58
- const getStyleBgPosition = (background) => {
59
- const bgPosition = {
60
- desktop: getBgPositionByDevice(background, 'desktop'),
61
- tablet: getBgPositionByDevice(background, 'tablet'),
62
- mobile: getBgPositionByDevice(background, 'mobile'),
63
- };
64
- return makeStyle.makeStyleResponsive('bgp', bgPosition);
65
- };
66
- const getBgPositionByDevice = (background, device) => {
67
- const positionByDevice = background?.[device]?.position;
68
- return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
69
- };
70
- const getStyleBgSize = (background) => {
71
- const bgSize = {
72
- desktop: getBgSizeByDevice(background, 'desktop'),
73
- tablet: getBgSizeByDevice(background, 'tablet'),
74
- mobile: getBgSizeByDevice(background, 'mobile'),
75
- };
76
- return makeStyle.makeStyleResponsive('bgs', bgSize);
77
- };
78
- const getBgSizeByDevice = (background, device) => {
79
- return background?.[device]?.size;
80
- };
81
- const getStyleBgRepeat = (background) => {
82
- const bgRepeat = {
83
- desktop: getBgRepeatByDevice(background, 'desktop'),
84
- tablet: getBgRepeatByDevice(background, 'tablet'),
85
- mobile: getBgRepeatByDevice(background, 'mobile'),
86
- };
87
- return makeStyle.makeStyleResponsive('bgr', bgRepeat);
88
- };
89
- const getBgRepeatByDevice = (background, device) => {
90
- return background?.[device]?.repeat;
91
- };
92
- const getStyleBgAttachment = (background) => {
93
- const bgAttachment = {
94
- desktop: getBgAttachmentByDevice(background, 'desktop'),
95
- tablet: getBgAttachmentByDevice(background, 'tablet'),
96
- mobile: getBgAttachmentByDevice(background, 'mobile'),
97
- };
98
- return makeStyle.makeStyleResponsive('bga', bgAttachment);
99
- };
100
- const getBgAttachmentByDevice = (background, device) => {
101
- return background?.[device]?.attachment;
6
+ const getStyleBackgroundByDevice = (background)=>{
7
+ if (!background) {
8
+ return {};
9
+ }
10
+ return {
11
+ ...getStyleBgColor(background),
12
+ ...getStyleBgImage(background),
13
+ ...getStyleBgPosition(background),
14
+ ...getStyleBgSize(background),
15
+ ...getStyleBgRepeat(background),
16
+ ...getStyleBgAttachment(background)
17
+ };
18
+ };
19
+ const getStyleBgColor = (background)=>{
20
+ const bgColor = {
21
+ desktop: getBgColorByDevice(background, 'desktop'),
22
+ tablet: getBgColorByDevice(background, 'tablet'),
23
+ mobile: getBgColorByDevice(background, 'mobile')
24
+ };
25
+ return makeStyle.makeStyleResponsive('bgc', bgColor);
26
+ };
27
+ const getBgColorByDevice = (background, device)=>{
28
+ return getColor(background?.[device]?.color);
29
+ };
30
+ const getColor = (color)=>{
31
+ if (!color) {
32
+ return;
33
+ }
34
+ if (colors.isColor(color?.toString())) {
35
+ return color;
36
+ }
37
+ return `var(--g-c-${color})`;
38
+ };
39
+ const getStyleBgImage = (background)=>{
40
+ const bgImage = {
41
+ // desktop:
42
+ // background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
43
+ // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
44
+ // mobile: background.mobile?.type === 'color' ? 'none' : getBgImageByDevice(background, 'mobile'),
45
+ desktop: getBgImageByDevice(background, 'desktop'),
46
+ tablet: getBgImageByDevice(background, 'tablet'),
47
+ mobile: getBgImageByDevice(background, 'mobile')
48
+ };
49
+ return makeStyle.makeStyleResponsive('bgi', bgImage);
50
+ };
51
+ const getBgImageByDevice = (background, device)=>{
52
+ const imageByDevice = background?.[device]?.image?.src;
53
+ if (typeof imageByDevice === 'string') {
54
+ return `url(${imageByDevice})`;
55
+ }
56
+ return;
57
+ };
58
+ const getStyleBgPosition = (background)=>{
59
+ const bgPosition = {
60
+ desktop: getBgPositionByDevice(background, 'desktop'),
61
+ tablet: getBgPositionByDevice(background, 'tablet'),
62
+ mobile: getBgPositionByDevice(background, 'mobile')
63
+ };
64
+ return makeStyle.makeStyleResponsive('bgp', bgPosition);
65
+ };
66
+ const getBgPositionByDevice = (background, device)=>{
67
+ const positionByDevice = background?.[device]?.position;
68
+ return positionByDevice && `${positionByDevice.x}% ${positionByDevice.y}%`;
69
+ };
70
+ const getStyleBgSize = (background)=>{
71
+ const bgSize = {
72
+ desktop: getBgSizeByDevice(background, 'desktop'),
73
+ tablet: getBgSizeByDevice(background, 'tablet'),
74
+ mobile: getBgSizeByDevice(background, 'mobile')
75
+ };
76
+ return makeStyle.makeStyleResponsive('bgs', bgSize);
77
+ };
78
+ const getBgSizeByDevice = (background, device)=>{
79
+ return background?.[device]?.size;
80
+ };
81
+ const getStyleBgRepeat = (background)=>{
82
+ const bgRepeat = {
83
+ desktop: getBgRepeatByDevice(background, 'desktop'),
84
+ tablet: getBgRepeatByDevice(background, 'tablet'),
85
+ mobile: getBgRepeatByDevice(background, 'mobile')
86
+ };
87
+ return makeStyle.makeStyleResponsive('bgr', bgRepeat);
88
+ };
89
+ const getBgRepeatByDevice = (background, device)=>{
90
+ return background?.[device]?.repeat;
91
+ };
92
+ const getStyleBgAttachment = (background)=>{
93
+ const bgAttachment = {
94
+ desktop: getBgAttachmentByDevice(background, 'desktop'),
95
+ tablet: getBgAttachmentByDevice(background, 'tablet'),
96
+ mobile: getBgAttachmentByDevice(background, 'mobile')
97
+ };
98
+ return makeStyle.makeStyleResponsive('bga', bgAttachment);
99
+ };
100
+ const getBgAttachmentByDevice = (background, device)=>{
101
+ return background?.[device]?.attachment;
102
102
  };
103
103
 
104
104
  exports.getStyleBackgroundByDevice = getStyleBackgroundByDevice;
@@ -3,133 +3,129 @@
3
3
  var colors = require('./colors.js');
4
4
  var makeStyle = require('./make-style.js');
5
5
 
6
- const handleConvertBorderStyle = (value) => {
7
- if (!value)
8
- return undefined;
9
- if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
10
- const data = value;
11
- const newVal = {
12
- desktop: {
13
- normal: data.desktop?.normal?.border,
14
- hover: data.desktop?.hover?.border,
15
- focus: data.desktop?.focus?.border,
16
- },
17
- tablet: {
18
- normal: data.tablet?.normal?.border,
19
- hover: data.tablet?.hover?.border,
20
- focus: data.tablet?.focus?.border,
21
- },
22
- mobile: {
23
- normal: data.mobile?.normal?.border,
24
- hover: data.mobile?.hover?.border,
25
- focus: data.mobile?.focus?.border,
26
- },
27
- };
28
- return makeStyle.makeStyleResponsiveState('bs', newVal);
29
- }
30
- const data = value;
31
- const newVal = {
32
- normal: data?.normal?.border,
33
- hover: data?.hover?.border,
34
- focus: data?.focus?.border,
35
- };
36
- return makeStyle.makeStyleState('bs', newVal);
37
- };
38
- const handleConvertBorderWidth = (value) => {
39
- if (!value)
40
- return undefined;
41
- if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
42
- const data = value;
43
- const newVal = {
44
- desktop: {
45
- normal: data.desktop?.normal?.width,
46
- hover: data.desktop?.hover?.width,
47
- focus: data.desktop?.focus?.width,
48
- },
49
- tablet: {
50
- normal: data.tablet?.normal?.width,
51
- hover: data.tablet?.hover?.width,
52
- focus: data.tablet?.focus?.width,
53
- },
54
- mobile: {
55
- normal: data.mobile?.normal?.width,
56
- hover: data.mobile?.hover?.width,
57
- focus: data.mobile?.focus?.width,
58
- },
59
- };
60
- return makeStyle.makeStyleResponsiveState('bw', newVal);
61
- }
62
- const data = value;
63
- const newVal = {
64
- normal: data?.normal?.width,
65
- hover: data?.hover?.width,
66
- focus: data?.focus?.width,
67
- };
68
- return makeStyle.makeStyleState('bw', newVal);
69
- };
70
- const handleConvertBorderColor = (value) => {
71
- if (!value)
72
- return undefined;
73
- if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
74
- const data = value;
75
- const newVal = {
76
- desktop: {
77
- normal: data.desktop?.normal?.color,
78
- hover: data.desktop?.hover?.color,
79
- focus: data.desktop?.focus?.color,
80
- },
81
- tablet: {
82
- normal: data.tablet?.normal?.color,
83
- hover: data.tablet?.hover?.color,
84
- focus: data.tablet?.focus?.color,
85
- },
86
- mobile: {
87
- normal: data.mobile?.normal?.color,
88
- hover: data.mobile?.hover?.color,
89
- focus: data.mobile?.focus?.color,
90
- },
91
- };
92
- return colors.getGlobalColorStateResponsiveStyle('bc', newVal);
93
- }
94
- const data = value;
95
- const newVal = {
96
- normal: data?.normal?.color,
97
- hover: data?.hover?.color,
98
- focus: data?.focus?.color,
99
- };
100
- return colors.getGlobalColorStateStyle('bc', newVal);
101
- };
102
- const handleConvertClassColor = (value) => {
103
- if (!value)
104
- return undefined;
105
- if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
106
- const data = value;
107
- const newVal = {
108
- desktop: {
109
- normal: data.desktop?.normal?.color,
110
- hover: data.desktop?.hover?.color,
111
- focus: data.desktop?.focus?.color,
112
- },
113
- tablet: {
114
- normal: data.tablet?.normal?.color,
115
- hover: data.tablet?.hover?.color,
116
- focus: data.tablet?.focus?.color,
117
- },
118
- mobile: {
119
- normal: data.mobile?.normal?.color,
120
- hover: data.mobile?.hover?.color,
121
- focus: data.mobile?.focus?.color,
122
- },
123
- };
124
- return colors.getGlobalColorStateResponsiveClass('border', newVal);
125
- }
126
- const data = value;
127
- const newVal = {
128
- normal: data?.normal?.color,
129
- hover: data?.hover?.color,
130
- focus: data?.focus?.color,
131
- };
132
- return colors.getGlobalColorStateClass('border', newVal);
6
+ const handleConvertBorderStyle = (value)=>{
7
+ if (!value) return undefined;
8
+ if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
9
+ const data = value;
10
+ const newVal = {
11
+ desktop: {
12
+ normal: data.desktop?.normal?.border,
13
+ hover: data.desktop?.hover?.border,
14
+ focus: data.desktop?.focus?.border
15
+ },
16
+ tablet: {
17
+ normal: data.tablet?.normal?.border,
18
+ hover: data.tablet?.hover?.border,
19
+ focus: data.tablet?.focus?.border
20
+ },
21
+ mobile: {
22
+ normal: data.mobile?.normal?.border,
23
+ hover: data.mobile?.hover?.border,
24
+ focus: data.mobile?.focus?.border
25
+ }
26
+ };
27
+ return makeStyle.makeStyleResponsiveState('bs', newVal);
28
+ }
29
+ const data = value;
30
+ const newVal = {
31
+ normal: data?.normal?.border,
32
+ hover: data?.hover?.border,
33
+ focus: data?.focus?.border
34
+ };
35
+ return makeStyle.makeStyleState('bs', newVal);
36
+ };
37
+ const handleConvertBorderWidth = (value)=>{
38
+ if (!value) return undefined;
39
+ if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
40
+ const data = value;
41
+ const newVal = {
42
+ desktop: {
43
+ normal: data.desktop?.normal?.width,
44
+ hover: data.desktop?.hover?.width,
45
+ focus: data.desktop?.focus?.width
46
+ },
47
+ tablet: {
48
+ normal: data.tablet?.normal?.width,
49
+ hover: data.tablet?.hover?.width,
50
+ focus: data.tablet?.focus?.width
51
+ },
52
+ mobile: {
53
+ normal: data.mobile?.normal?.width,
54
+ hover: data.mobile?.hover?.width,
55
+ focus: data.mobile?.focus?.width
56
+ }
57
+ };
58
+ return makeStyle.makeStyleResponsiveState('bw', newVal);
59
+ }
60
+ const data = value;
61
+ const newVal = {
62
+ normal: data?.normal?.width,
63
+ hover: data?.hover?.width,
64
+ focus: data?.focus?.width
65
+ };
66
+ return makeStyle.makeStyleState('bw', newVal);
67
+ };
68
+ const handleConvertBorderColor = (value)=>{
69
+ if (!value) return undefined;
70
+ if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
71
+ const data = value;
72
+ const newVal = {
73
+ desktop: {
74
+ normal: data.desktop?.normal?.color,
75
+ hover: data.desktop?.hover?.color,
76
+ focus: data.desktop?.focus?.color
77
+ },
78
+ tablet: {
79
+ normal: data.tablet?.normal?.color,
80
+ hover: data.tablet?.hover?.color,
81
+ focus: data.tablet?.focus?.color
82
+ },
83
+ mobile: {
84
+ normal: data.mobile?.normal?.color,
85
+ hover: data.mobile?.hover?.color,
86
+ focus: data.mobile?.focus?.color
87
+ }
88
+ };
89
+ return colors.getGlobalColorStateResponsiveStyle('bc', newVal);
90
+ }
91
+ const data = value;
92
+ const newVal = {
93
+ normal: data?.normal?.color,
94
+ hover: data?.hover?.color,
95
+ focus: data?.focus?.color
96
+ };
97
+ return colors.getGlobalColorStateStyle('bc', newVal);
98
+ };
99
+ const handleConvertClassColor = (value)=>{
100
+ if (!value) return undefined;
101
+ if ('desktop' in value || 'tablet' in value || 'mobile' in value) {
102
+ const data = value;
103
+ const newVal = {
104
+ desktop: {
105
+ normal: data.desktop?.normal?.color,
106
+ hover: data.desktop?.hover?.color,
107
+ focus: data.desktop?.focus?.color
108
+ },
109
+ tablet: {
110
+ normal: data.tablet?.normal?.color,
111
+ hover: data.tablet?.hover?.color,
112
+ focus: data.tablet?.focus?.color
113
+ },
114
+ mobile: {
115
+ normal: data.mobile?.normal?.color,
116
+ hover: data.mobile?.hover?.color,
117
+ focus: data.mobile?.focus?.color
118
+ }
119
+ };
120
+ return colors.getGlobalColorStateResponsiveClass('border', newVal);
121
+ }
122
+ const data = value;
123
+ const newVal = {
124
+ normal: data?.normal?.color,
125
+ hover: data?.hover?.color,
126
+ focus: data?.focus?.color
127
+ };
128
+ return colors.getGlobalColorStateClass('border', newVal);
133
129
  };
134
130
 
135
131
  exports.handleConvertBorderColor = handleConvertBorderColor;
@@ -1,5 +1,5 @@
1
1
  'use strict';
2
2
 
3
- const cloneDeep = (data) => JSON.parse(JSON.stringify(data));
3
+ const cloneDeep = (data)=>JSON.parse(JSON.stringify(data));
4
4
 
5
5
  exports.cloneDeep = cloneDeep;
@@ -1,20 +1,16 @@
1
1
  'use strict';
2
2
 
3
- function toVal(mix) {
4
- if (typeof mix === 'string') {
5
- return mix;
6
- }
7
- else if (typeof mix === 'object' && mix !== null) {
8
- return Object.keys(mix)
9
- .filter((key) => mix[key])
10
- .join(' ');
11
- }
12
- else {
13
- return false;
14
- }
15
- }
16
- function cls(...classes) {
17
- return classes.map(toVal).filter(Boolean).join(' ');
3
+ function toVal(mix) {
4
+ if (typeof mix === 'string') {
5
+ return mix;
6
+ } else if (typeof mix === 'object' && mix !== null) {
7
+ return Object.keys(mix).filter((key)=>mix[key]).join(' ');
8
+ } else {
9
+ return false;
10
+ }
11
+ }
12
+ function cls(...classes) {
13
+ return classes.map(toVal).filter(Boolean).join(' ');
18
14
  }
19
15
 
20
16
  exports.cls = cls;