@gem-sdk/components 2.1.0 → 2.1.3
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/carousel/components/CarouselItem.js +4 -6
- package/dist/cjs/carousel/components/CarouselItem.liquid.js +4 -6
- package/dist/cjs/carousel/setting/Carousel.js +34 -0
- package/dist/cjs/third-party/helpers/thirdParty.js +1 -1
- package/dist/esm/carousel/components/CarouselItem.js +5 -7
- package/dist/esm/carousel/components/CarouselItem.liquid.js +5 -7
- package/dist/esm/carousel/setting/Carousel.js +34 -0
- package/dist/esm/third-party/helpers/thirdParty.js +1 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -9,6 +9,7 @@ var React = require('react');
|
|
|
9
9
|
var carousel = require('./common/carousel.js');
|
|
10
10
|
|
|
11
11
|
const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, parentStyle, parentSettings, background, contentType = 'normalItem', onClickItem, ...passProps })=>{
|
|
12
|
+
const itemPadding = core.makeGlobalSize(parentStyle?.itemPadding);
|
|
12
13
|
const styleByContentType = React.useMemo(()=>{
|
|
13
14
|
const delList = [
|
|
14
15
|
'--radius'
|
|
@@ -27,11 +28,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
27
28
|
bw: parentStyle?.borderContent?.width,
|
|
28
29
|
bc: core.getSingleColorVariable(parentStyle?.borderContent?.color)
|
|
29
30
|
}),
|
|
30
|
-
...core.getStyleShadow({
|
|
31
|
-
value: parentStyle?.carouselShadow,
|
|
32
|
-
styleAppliedFor: 'box-shadow',
|
|
33
|
-
isEnableShadow: parentStyle?.hasActiveShadow
|
|
34
|
-
}),
|
|
35
31
|
...core.getRadiusStyleActiveState({
|
|
36
32
|
...parentStyle?.roundedContent,
|
|
37
33
|
active: {
|
|
@@ -69,11 +65,13 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
69
65
|
ignoreBackgroundImage: true,
|
|
70
66
|
ignoreBackgroundImageProperties: true,
|
|
71
67
|
ignoreBgAttachment: true
|
|
72
|
-
})
|
|
68
|
+
}),
|
|
69
|
+
...itemPadding && itemPadding.padding
|
|
73
70
|
},
|
|
74
71
|
onClick: onClickItem,
|
|
75
72
|
"aria-hidden": true,
|
|
76
73
|
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
74
|
+
className: "gp-w-full",
|
|
77
75
|
style: {
|
|
78
76
|
...itemShadowStyle
|
|
79
77
|
},
|
|
@@ -6,6 +6,7 @@ var core = require('@gem-sdk/core');
|
|
|
6
6
|
var carousel = require('./common/carousel.js');
|
|
7
7
|
|
|
8
8
|
const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, style, className, parentId, parentStyle, parentSettings, background, index, customStyle, parentUid, contentType = 'normalItem', ...passProps })=>{
|
|
9
|
+
const itemPadding = core.makeGlobalSize(parentStyle?.itemPadding);
|
|
9
10
|
const styleByContentType = ()=>{
|
|
10
11
|
const delList = [
|
|
11
12
|
'--radius'
|
|
@@ -21,11 +22,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
21
22
|
bw: parentStyle?.borderContent?.width,
|
|
22
23
|
bc: core.getSingleColorVariable(parentStyle?.borderContent?.color)
|
|
23
24
|
}),
|
|
24
|
-
...core.getStyleShadow({
|
|
25
|
-
value: parentStyle?.carouselShadow,
|
|
26
|
-
styleAppliedFor: 'box-shadow',
|
|
27
|
-
isEnableShadow: parentStyle?.hasActiveShadow
|
|
28
|
-
}),
|
|
29
25
|
...core.getRadiusStyleActiveState({
|
|
30
26
|
...parentStyle?.roundedContent,
|
|
31
27
|
active: {
|
|
@@ -79,12 +75,14 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
79
75
|
sneakPeakType: parentSettings?.sneakPeakType,
|
|
80
76
|
sneakPeakOffsetCenter: parentSettings?.sneakPeakOffsetCenter,
|
|
81
77
|
sneakPeakOffsetForward: parentSettings?.sneakPeakOffsetForward
|
|
82
|
-
}))
|
|
78
|
+
})),
|
|
79
|
+
...itemPadding && itemPadding.padding
|
|
83
80
|
}}"
|
|
84
81
|
class="${core.cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
|
|
85
82
|
data-index="${index}"
|
|
86
83
|
>
|
|
87
84
|
<div
|
|
85
|
+
class="gp-w-full",
|
|
88
86
|
style="${{
|
|
89
87
|
...itemShadowStyle
|
|
90
88
|
}}"
|
|
@@ -732,6 +732,30 @@ const config = {
|
|
|
732
732
|
default: 16
|
|
733
733
|
}
|
|
734
734
|
}
|
|
735
|
+
},
|
|
736
|
+
{
|
|
737
|
+
id: 'itemPadding',
|
|
738
|
+
type: 'size-setting',
|
|
739
|
+
devices: {
|
|
740
|
+
desktop: {
|
|
741
|
+
default: {
|
|
742
|
+
padding: {
|
|
743
|
+
type: 'custom',
|
|
744
|
+
top: '0px',
|
|
745
|
+
left: '0px',
|
|
746
|
+
bottom: '0px',
|
|
747
|
+
right: '0px'
|
|
748
|
+
}
|
|
749
|
+
}
|
|
750
|
+
}
|
|
751
|
+
},
|
|
752
|
+
hiddenSettings: [
|
|
753
|
+
'shape',
|
|
754
|
+
'gap',
|
|
755
|
+
'width',
|
|
756
|
+
'height'
|
|
757
|
+
],
|
|
758
|
+
hiddenShowMore: true
|
|
735
759
|
}
|
|
736
760
|
]
|
|
737
761
|
}
|
|
@@ -1078,6 +1102,16 @@ const config = {
|
|
|
1078
1102
|
id: 'sizeSetting'
|
|
1079
1103
|
},
|
|
1080
1104
|
layout: 'vertical'
|
|
1105
|
+
},
|
|
1106
|
+
{
|
|
1107
|
+
type: 'control',
|
|
1108
|
+
setting: {
|
|
1109
|
+
id: 'itemPadding'
|
|
1110
|
+
},
|
|
1111
|
+
isMoreSetting: true,
|
|
1112
|
+
options: {
|
|
1113
|
+
noGap: true
|
|
1114
|
+
}
|
|
1081
1115
|
}
|
|
1082
1116
|
]
|
|
1083
1117
|
},
|
|
@@ -43,7 +43,7 @@ const getLiquidForAppBlock = (appBlockId, align, cssClass)=>{
|
|
|
43
43
|
}}"
|
|
44
44
|
>
|
|
45
45
|
{% for block in app_blocks %}
|
|
46
|
-
{% if block.type == '@app' and block.id
|
|
46
|
+
{% if block.type == '@app' and block.id contains '${appBlockId}' %}
|
|
47
47
|
{% render block %}
|
|
48
48
|
{% endif %}
|
|
49
49
|
{% endfor %}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { makeStyle, getSingleColorVariable,
|
|
2
|
+
import { makeGlobalSize, makeStyle, getSingleColorVariable, getRadiusStyleActiveState, getStyleShadow, cls, getStyleBackgroundByDevice, isEmptyChildren } from '@gem-sdk/core';
|
|
3
3
|
import ChildrenDroppable from '../../grid/components/ChildrenDroppable.js';
|
|
4
4
|
import { useMemo } from 'react';
|
|
5
5
|
import { getInitialWidthForCarouselItem } from './common/carousel.js';
|
|
6
6
|
|
|
7
7
|
const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, parentStyle, parentSettings, background, contentType = 'normalItem', onClickItem, ...passProps })=>{
|
|
8
|
+
const itemPadding = makeGlobalSize(parentStyle?.itemPadding);
|
|
8
9
|
const styleByContentType = useMemo(()=>{
|
|
9
10
|
const delList = [
|
|
10
11
|
'--radius'
|
|
@@ -23,11 +24,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
23
24
|
bw: parentStyle?.borderContent?.width,
|
|
24
25
|
bc: getSingleColorVariable(parentStyle?.borderContent?.color)
|
|
25
26
|
}),
|
|
26
|
-
...getStyleShadow({
|
|
27
|
-
value: parentStyle?.carouselShadow,
|
|
28
|
-
styleAppliedFor: 'box-shadow',
|
|
29
|
-
isEnableShadow: parentStyle?.hasActiveShadow
|
|
30
|
-
}),
|
|
31
27
|
...getRadiusStyleActiveState({
|
|
32
28
|
...parentStyle?.roundedContent,
|
|
33
29
|
active: {
|
|
@@ -65,11 +61,13 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
65
61
|
ignoreBackgroundImage: true,
|
|
66
62
|
ignoreBackgroundImageProperties: true,
|
|
67
63
|
ignoreBgAttachment: true
|
|
68
|
-
})
|
|
64
|
+
}),
|
|
65
|
+
...itemPadding && itemPadding.padding
|
|
69
66
|
},
|
|
70
67
|
onClick: onClickItem,
|
|
71
68
|
"aria-hidden": true,
|
|
72
69
|
children: /*#__PURE__*/ jsx("div", {
|
|
70
|
+
className: "gp-w-full",
|
|
73
71
|
style: {
|
|
74
72
|
...itemShadowStyle
|
|
75
73
|
},
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { getStyleShadow, template, getStyleBackgroundByDevice, makeStyleResponsive, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState } from '@gem-sdk/core';
|
|
1
|
+
import { makeGlobalSize, getStyleShadow, template, getStyleBackgroundByDevice, makeStyleResponsive, cls, makeStyle, getSingleColorVariable, getRadiusStyleActiveState } from '@gem-sdk/core';
|
|
2
2
|
import { getInitialWidthForCarouselItem, getCarouselSneakPeakTranslate } from './common/carousel.js';
|
|
3
3
|
|
|
4
4
|
const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, builderProps, style, className, parentId, parentStyle, parentSettings, background, index, customStyle, parentUid, contentType = 'normalItem', ...passProps })=>{
|
|
5
|
+
const itemPadding = makeGlobalSize(parentStyle?.itemPadding);
|
|
5
6
|
const styleByContentType = ()=>{
|
|
6
7
|
const delList = [
|
|
7
8
|
'--radius'
|
|
@@ -17,11 +18,6 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
17
18
|
bw: parentStyle?.borderContent?.width,
|
|
18
19
|
bc: getSingleColorVariable(parentStyle?.borderContent?.color)
|
|
19
20
|
}),
|
|
20
|
-
...getStyleShadow({
|
|
21
|
-
value: parentStyle?.carouselShadow,
|
|
22
|
-
styleAppliedFor: 'box-shadow',
|
|
23
|
-
isEnableShadow: parentStyle?.hasActiveShadow
|
|
24
|
-
}),
|
|
25
21
|
...getRadiusStyleActiveState({
|
|
26
22
|
...parentStyle?.roundedContent,
|
|
27
23
|
active: {
|
|
@@ -75,12 +71,14 @@ const CarouselItem = ({ children, builderAttrs, styles, advanced, setting, build
|
|
|
75
71
|
sneakPeakType: parentSettings?.sneakPeakType,
|
|
76
72
|
sneakPeakOffsetCenter: parentSettings?.sneakPeakOffsetCenter,
|
|
77
73
|
sneakPeakOffsetForward: parentSettings?.sneakPeakOffsetForward
|
|
78
|
-
}))
|
|
74
|
+
})),
|
|
75
|
+
...itemPadding && itemPadding.padding
|
|
79
76
|
}}"
|
|
80
77
|
class="${cls(`gem-slider-item gp-w-full gem-slider-item-${parentId || ''} gp-child-item-${parentUid}`, builderProps?.uid, className)}"
|
|
81
78
|
data-index="${index}"
|
|
82
79
|
>
|
|
83
80
|
<div
|
|
81
|
+
class="gp-w-full",
|
|
84
82
|
style="${{
|
|
85
83
|
...itemShadowStyle
|
|
86
84
|
}}"
|
|
@@ -728,6 +728,30 @@ const config = {
|
|
|
728
728
|
default: 16
|
|
729
729
|
}
|
|
730
730
|
}
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
id: 'itemPadding',
|
|
734
|
+
type: 'size-setting',
|
|
735
|
+
devices: {
|
|
736
|
+
desktop: {
|
|
737
|
+
default: {
|
|
738
|
+
padding: {
|
|
739
|
+
type: 'custom',
|
|
740
|
+
top: '0px',
|
|
741
|
+
left: '0px',
|
|
742
|
+
bottom: '0px',
|
|
743
|
+
right: '0px'
|
|
744
|
+
}
|
|
745
|
+
}
|
|
746
|
+
}
|
|
747
|
+
},
|
|
748
|
+
hiddenSettings: [
|
|
749
|
+
'shape',
|
|
750
|
+
'gap',
|
|
751
|
+
'width',
|
|
752
|
+
'height'
|
|
753
|
+
],
|
|
754
|
+
hiddenShowMore: true
|
|
731
755
|
}
|
|
732
756
|
]
|
|
733
757
|
}
|
|
@@ -1074,6 +1098,16 @@ const config = {
|
|
|
1074
1098
|
id: 'sizeSetting'
|
|
1075
1099
|
},
|
|
1076
1100
|
layout: 'vertical'
|
|
1101
|
+
},
|
|
1102
|
+
{
|
|
1103
|
+
type: 'control',
|
|
1104
|
+
setting: {
|
|
1105
|
+
id: 'itemPadding'
|
|
1106
|
+
},
|
|
1107
|
+
isMoreSetting: true,
|
|
1108
|
+
options: {
|
|
1109
|
+
noGap: true
|
|
1110
|
+
}
|
|
1077
1111
|
}
|
|
1078
1112
|
]
|
|
1079
1113
|
},
|
|
@@ -41,7 +41,7 @@ const getLiquidForAppBlock = (appBlockId, align, cssClass)=>{
|
|
|
41
41
|
}}"
|
|
42
42
|
>
|
|
43
43
|
{% for block in app_blocks %}
|
|
44
|
-
{% if block.type == '@app' and block.id
|
|
44
|
+
{% if block.type == '@app' and block.id contains '${appBlockId}' %}
|
|
45
45
|
{% render block %}
|
|
46
46
|
{% endif %}
|
|
47
47
|
{% endfor %}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -288,6 +288,7 @@ type CarouselStyles = {
|
|
|
288
288
|
align?: ObjectDevices<AlignProp | Property.AlignItems>;
|
|
289
289
|
sizeSetting?: ObjectDevices<SizeSettingGlobal>;
|
|
290
290
|
playSpeed?: number;
|
|
291
|
+
itemPadding?: ObjectDevices<SizeSettingGlobal>;
|
|
291
292
|
};
|
|
292
293
|
type CarouselProps = BasePropsWrap<CarouselSettings, CarouselStyles> & {
|
|
293
294
|
children?: React.ReactNode;
|