@gem-sdk/core 1.7.10 → 1.7.12

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.
@@ -25,6 +25,7 @@ const disableWrap = [
25
25
  'IconListItem',
26
26
  'CSSCode',
27
27
  'FormEmail',
28
+ 'FormDropdown',
28
29
  'SubmitButton',
29
30
  'Dialog',
30
31
  'TextField',
@@ -3,13 +3,13 @@
3
3
  var colors = require('./colors.js');
4
4
  var makeStyle = require('./make-style.js');
5
5
 
6
- const getStyleBackgroundByDevice = (background)=>{
6
+ const getStyleBackgroundByDevice = (background, options)=>{
7
7
  if (!background) {
8
8
  return {};
9
9
  }
10
10
  return {
11
11
  ...getStyleBgColor(background),
12
- ...getStyleBgImage(background),
12
+ ...getStyleBgImage(background, options),
13
13
  ...getStyleBgPosition(background),
14
14
  ...getStyleBgSize(background),
15
15
  ...getStyleBgRepeat(background),
@@ -36,20 +36,21 @@ const getColor = (color)=>{
36
36
  }
37
37
  return `var(--g-c-${color})`;
38
38
  };
39
- const getStyleBgImage = (background)=>{
39
+ const getStyleBgImage = (background, options)=>{
40
40
  const bgImage = {
41
41
  // desktop:
42
42
  // background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
43
43
  // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
44
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')
45
+ desktop: getBgImageByDevice(background, 'desktop', options),
46
+ tablet: getBgImageByDevice(background, 'tablet', options),
47
+ mobile: getBgImageByDevice(background, 'mobile', options)
48
48
  };
49
49
  return makeStyle.makeStyleResponsive('bgi', bgImage);
50
50
  };
51
- const getBgImageByDevice = (background, device)=>{
52
- const imageByDevice = background?.[device]?.image?.src;
51
+ const getBgImageByDevice = (background, device, options)=>{
52
+ const backupFileKey = background?.[device]?.image?.backupFileKey;
53
+ const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
53
54
  if (typeof imageByDevice === 'string') {
54
55
  return `url(${imageByDevice})`;
55
56
  }
@@ -23,6 +23,7 @@ const disableWrap = [
23
23
  'IconListItem',
24
24
  'CSSCode',
25
25
  'FormEmail',
26
+ 'FormDropdown',
26
27
  'SubmitButton',
27
28
  'Dialog',
28
29
  'TextField',
@@ -1,13 +1,13 @@
1
1
  import { isColor } from './colors.js';
2
2
  import { makeStyleResponsive } from './make-style.js';
3
3
 
4
- const getStyleBackgroundByDevice = (background)=>{
4
+ const getStyleBackgroundByDevice = (background, options)=>{
5
5
  if (!background) {
6
6
  return {};
7
7
  }
8
8
  return {
9
9
  ...getStyleBgColor(background),
10
- ...getStyleBgImage(background),
10
+ ...getStyleBgImage(background, options),
11
11
  ...getStyleBgPosition(background),
12
12
  ...getStyleBgSize(background),
13
13
  ...getStyleBgRepeat(background),
@@ -34,20 +34,21 @@ const getColor = (color)=>{
34
34
  }
35
35
  return `var(--g-c-${color})`;
36
36
  };
37
- const getStyleBgImage = (background)=>{
37
+ const getStyleBgImage = (background, options)=>{
38
38
  const bgImage = {
39
39
  // desktop:
40
40
  // background.desktop?.type === 'color' ? 'none' : getBgImageByDevice(background, 'desktop'),
41
41
  // tablet: background.tablet?.type === 'color' ? 'none' : getBgImageByDevice(background, 'tablet'),
42
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')
43
+ desktop: getBgImageByDevice(background, 'desktop', options),
44
+ tablet: getBgImageByDevice(background, 'tablet', options),
45
+ mobile: getBgImageByDevice(background, 'mobile', options)
46
46
  };
47
47
  return makeStyleResponsive('bgi', bgImage);
48
48
  };
49
- const getBgImageByDevice = (background, device)=>{
50
- const imageByDevice = background?.[device]?.image?.src;
49
+ const getBgImageByDevice = (background, device, options)=>{
50
+ const backupFileKey = background?.[device]?.image?.backupFileKey;
51
+ const imageByDevice = options?.liquid && backupFileKey && `{{ "${backupFileKey}" | asset_url }}` || background?.[device]?.image?.src;
51
52
  if (typeof imageByDevice === 'string') {
52
53
  return `url(${imageByDevice})`;
53
54
  }
@@ -637,6 +637,7 @@ type Background = {
637
637
  src?: string;
638
638
  width?: number;
639
639
  height?: number;
640
+ backupFileKey?: string;
640
641
  };
641
642
  size?: BgSize;
642
643
  position?: BgPosition;
@@ -7324,7 +7325,10 @@ declare const validateEmail: (email: string) => boolean;
7324
7325
 
7325
7326
  declare const optionLayoutStyle: (column?: ObjectDevices<string | number>) => React.CSSProperties;
7326
7327
 
7327
- declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>) => {};
7328
+ type Options = {
7329
+ liquid?: boolean;
7330
+ };
7331
+ declare const getStyleBackgroundByDevice: (background?: ObjectDevices<Background>, options?: Options) => {};
7328
7332
 
7329
7333
  declare const genVariable: (variableName: string) => string;
7330
7334
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.7.10",
3
+ "version": "1.7.12",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",