@symbo.ls/atoms 2.11.450 → 2.11.455
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/Animation.js +25 -21
- package/Block.js +168 -172
- package/Collection.js +3 -3
- package/Media copy.js +216 -0
- package/Svg.js +8 -6
- package/Text.js +16 -11
- package/package.json +4 -4
package/Animation.js
CHANGED
|
@@ -13,30 +13,34 @@ const applyAnimationProps = (animation, element) => {
|
|
|
13
13
|
return keyframes(record)
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
const props = {
|
|
17
|
+
animation: (el) => el.props.animation && {
|
|
18
|
+
animationName: el.deps.applyAnimationProps(el.props.animation, el),
|
|
19
|
+
animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing,
|
|
20
|
+
animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing,
|
|
21
|
+
animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'),
|
|
22
|
+
animationFillMode: el.props.animationFillMode || 'both',
|
|
23
|
+
animationPlayState: el.props.animationPlayState,
|
|
24
|
+
animationDirection: el.props.animationDirection
|
|
25
|
+
},
|
|
26
|
+
animationName: (el) => el.props.animationName && {
|
|
27
|
+
animationName: el.deps.applyAnimationProps(el.props.animationName, el)
|
|
28
|
+
},
|
|
29
|
+
animationDuration: ({ props, deps }) => props.animationDuration && ({
|
|
30
|
+
animationDuration: deps.getTimingByKey(props.animationDuration).timing
|
|
31
|
+
}),
|
|
32
|
+
animationDelay: ({ props, deps }) => props.animationDelay && ({
|
|
33
|
+
animationDelay: deps.getTimingByKey(props.animationDelay).timing
|
|
34
|
+
}),
|
|
35
|
+
animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({
|
|
36
|
+
animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
|
|
37
|
+
})
|
|
38
|
+
}
|
|
39
|
+
|
|
16
40
|
export const Animation = {
|
|
17
41
|
deps: { isObject, getTimingByKey, getTimingFunction, applyAnimationProps },
|
|
18
42
|
class: {
|
|
19
|
-
|
|
20
|
-
animationName: el.deps.applyAnimationProps(el.props.animation, el),
|
|
21
|
-
animationDuration: el.deps.getTimingByKey(el.props.animationDuration || 'A').timing,
|
|
22
|
-
animationDelay: el.deps.getTimingByKey(el.props.animationDelay || '0s').timing,
|
|
23
|
-
animationTimingFunction: el.deps.getTimingFunction(el.props.animationTimingFunction || 'ease'),
|
|
24
|
-
animationFillMode: el.props.animationFillMode || 'both',
|
|
25
|
-
animationPlayState: el.props.animationPlayState,
|
|
26
|
-
animationDirection: el.props.animationDirection
|
|
27
|
-
},
|
|
28
|
-
animationName: (el) => el.props.animationName && {
|
|
29
|
-
animationName: el.deps.applyAnimationProps(el.props.animationName, el)
|
|
30
|
-
},
|
|
31
|
-
animationDuration: ({ props, deps }) => props.animationDuration && ({
|
|
32
|
-
animationDuration: deps.getTimingByKey(props.animationDuration).timing
|
|
33
|
-
}),
|
|
34
|
-
animationDelay: ({ props, deps }) => props.animationDelay && ({
|
|
35
|
-
animationDelay: deps.getTimingByKey(props.animationDelay).timing
|
|
36
|
-
}),
|
|
37
|
-
animationTimingFunction: ({ props, deps }) => props.animationTimingFunction && ({
|
|
38
|
-
animationTimingFunction: deps.getTimingFunction(props.animationTimingFunction)
|
|
39
|
-
}),
|
|
43
|
+
...props,
|
|
40
44
|
animationFillMode: ({ props }) => props.animationFillMode && ({
|
|
41
45
|
animationFillMode: props.animationFillMode
|
|
42
46
|
}),
|
package/Block.js
CHANGED
|
@@ -10,6 +10,170 @@ import {
|
|
|
10
10
|
transfromGap
|
|
11
11
|
} from '@symbo.ls/scratch'
|
|
12
12
|
|
|
13
|
+
const props = {
|
|
14
|
+
show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({
|
|
15
|
+
display: 'none !important'
|
|
16
|
+
}),
|
|
17
|
+
|
|
18
|
+
hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({
|
|
19
|
+
display: 'none !important'
|
|
20
|
+
}),
|
|
21
|
+
|
|
22
|
+
height: ({ props, deps }) => deps.transformSizeRatio('height', props),
|
|
23
|
+
width: ({ props, deps }) => deps.transformSizeRatio('width', props),
|
|
24
|
+
|
|
25
|
+
boxSizing: ({ props, deps }) => !deps.isUndefined(props.boxSizing)
|
|
26
|
+
? ({ boxSizing: props.boxSizing })
|
|
27
|
+
: { boxSizing: 'border-box' },
|
|
28
|
+
|
|
29
|
+
boxSize: ({ props, deps }) => {
|
|
30
|
+
if (!deps.isString(props.boxSize)) return
|
|
31
|
+
const [height, width] = props.boxSize.split(' ')
|
|
32
|
+
return {
|
|
33
|
+
...deps.transformSize('height', height),
|
|
34
|
+
...deps.transformSize('width', width || height)
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
|
|
38
|
+
inlineSize: ({ props, deps }) => deps.transformSizeRatio('inlineSize', props),
|
|
39
|
+
blockSize: ({ props, deps }) => deps.transformSizeRatio('blockSize', props),
|
|
40
|
+
|
|
41
|
+
minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props),
|
|
42
|
+
maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props),
|
|
43
|
+
widthRange: ({ props, deps }) => {
|
|
44
|
+
if (!deps.isString(props.widthRange)) return
|
|
45
|
+
const [minWidth, maxWidth] = props.widthRange.split(' ')
|
|
46
|
+
return {
|
|
47
|
+
...deps.transformSize('minWidth', minWidth),
|
|
48
|
+
...deps.transformSize('maxWidth', maxWidth || minWidth)
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
|
|
52
|
+
minHeight: ({ props, deps }) => deps.transformSizeRatio('minHeight', props),
|
|
53
|
+
maxHeight: ({ props, deps }) => deps.transformSizeRatio('maxHeight', props),
|
|
54
|
+
heightRange: ({ props, deps }) => {
|
|
55
|
+
if (!deps.isString(props.heightRange)) return
|
|
56
|
+
const [minHeight, maxHeight] = props.heightRange.split(' ')
|
|
57
|
+
return {
|
|
58
|
+
...deps.transformSize('minHeight', minHeight),
|
|
59
|
+
...deps.transformSize('maxHeight', maxHeight || minHeight)
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
|
|
63
|
+
size: ({ props, deps }) => {
|
|
64
|
+
if (!deps.isString(props.size)) return
|
|
65
|
+
const [inlineSize, blockSize] = props.size.split(' ')
|
|
66
|
+
return {
|
|
67
|
+
...deps.transformSizeRatio('inlineSize', inlineSize),
|
|
68
|
+
...deps.transformSizeRatio('blockSize', blockSize || inlineSize)
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
|
|
72
|
+
minBlockSize: ({ props, deps }) => deps.transformSizeRatio('minBlockSize', props),
|
|
73
|
+
minInlineSize: ({ props, deps }) => deps.transformSizeRatio('minInlineSize', props),
|
|
74
|
+
|
|
75
|
+
maxBlockSize: ({ props, deps }) => deps.transformSizeRatio('maxBlockSize', props),
|
|
76
|
+
maxInlineSize: ({ props, deps }) => deps.transformSizeRatio('maxInlineSize', props),
|
|
77
|
+
|
|
78
|
+
minSize: ({ props, deps }) => {
|
|
79
|
+
if (!deps.isString(props.minSize)) return
|
|
80
|
+
const [minInlineSize, minBlockSize] = props.minSize.split(' ')
|
|
81
|
+
return {
|
|
82
|
+
...deps.transformSize('minInlineSize', minInlineSize),
|
|
83
|
+
...deps.transformSize('minBlockSize', minBlockSize || minInlineSize)
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
|
|
87
|
+
maxSize: ({ props, deps }) => {
|
|
88
|
+
if (!deps.isString(props.maxSize)) return
|
|
89
|
+
const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
|
|
90
|
+
return {
|
|
91
|
+
...deps.transformSize('maxInlineSize', maxInlineSize),
|
|
92
|
+
...deps.transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
borderWidth: ({ props, deps }) => deps.transformSizeRatio('borderWidth', props),
|
|
97
|
+
|
|
98
|
+
padding: ({ props, deps }) => deps.transformSizeRatio('padding', props),
|
|
99
|
+
scrollPadding: ({ props, deps }) => deps.transformSizeRatio('scrollPadding', props),
|
|
100
|
+
paddingInline: ({ props, deps }) => {
|
|
101
|
+
if (!deps.isString(props.paddingInline)) return
|
|
102
|
+
const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
|
|
103
|
+
return {
|
|
104
|
+
...deps.transformSize('paddingInlineStart', paddingInlineStart),
|
|
105
|
+
...deps.transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart)
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
paddingBlock: ({ props, deps }) => {
|
|
109
|
+
if (!deps.isString(props.paddingBlock)) return
|
|
110
|
+
const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
|
|
111
|
+
return {
|
|
112
|
+
...deps.transformSize('paddingBlockStart', paddingBlockStart),
|
|
113
|
+
...deps.transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
paddingInlineStart: ({ props, deps }) => deps.transformSizeRatio('paddingInlineStart', props),
|
|
117
|
+
paddingInlineEnd: ({ props, deps }) => deps.transformSizeRatio('paddingInlineEnd', props),
|
|
118
|
+
paddingBlockStart: ({ props, deps }) => deps.transformSizeRatio('paddingBlockStart', props),
|
|
119
|
+
paddingBlockEnd: ({ props, deps }) => deps.transformSizeRatio('paddingBlockEnd', props),
|
|
120
|
+
|
|
121
|
+
margin: ({ props, deps }) => deps.transformSizeRatio('margin', props),
|
|
122
|
+
marginInline: ({ props, deps }) => {
|
|
123
|
+
if (!deps.isString(props.marginInline)) return
|
|
124
|
+
const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
|
|
125
|
+
return {
|
|
126
|
+
...deps.transformSize('marginInlineStart', marginInlineStart),
|
|
127
|
+
...deps.transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
|
|
128
|
+
}
|
|
129
|
+
},
|
|
130
|
+
marginBlock: ({ props, deps }) => {
|
|
131
|
+
if (!deps.isString(props.marginBlock)) return
|
|
132
|
+
const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
|
|
133
|
+
return {
|
|
134
|
+
...deps.transformSize('marginBlockStart', marginBlockStart),
|
|
135
|
+
...deps.transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
marginInlineStart: ({ props, deps }) => deps.transformSizeRatio('marginInlineStart', props),
|
|
139
|
+
marginInlineEnd: ({ props, deps }) => deps.transformSizeRatio('marginInlineEnd', props),
|
|
140
|
+
marginBlockStart: ({ props, deps }) => deps.transformSizeRatio('marginBlockStart', props),
|
|
141
|
+
marginBlockEnd: ({ props, deps }) => deps.transformSizeRatio('marginBlockEnd', props),
|
|
142
|
+
|
|
143
|
+
gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({
|
|
144
|
+
gap: transfromGap(props.gap)
|
|
145
|
+
}),
|
|
146
|
+
|
|
147
|
+
columnGap: ({ props, deps }) => !deps.isUndefined(props.columnGap) ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
|
|
148
|
+
rowGap: ({ props, deps }) => !deps.isUndefined(props.rowGap) ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null,
|
|
149
|
+
|
|
150
|
+
flexWrap: ({ props, deps }) => !deps.isUndefined(props.flexWrap) && ({
|
|
151
|
+
display: 'flex',
|
|
152
|
+
flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
|
|
153
|
+
}),
|
|
154
|
+
flexFlow: ({ props, deps }) => {
|
|
155
|
+
const { flexFlow, reverse } = props
|
|
156
|
+
if (!deps.isString(flexFlow)) return
|
|
157
|
+
let [direction, wrap] = (flexFlow || 'row').split(' ')
|
|
158
|
+
if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row'
|
|
159
|
+
if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column'
|
|
160
|
+
return {
|
|
161
|
+
display: 'flex',
|
|
162
|
+
flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
flexAlign: ({ props, deps }) => {
|
|
166
|
+
if (!deps.isString(props.flexAlign)) return
|
|
167
|
+
const [alignItems, justifyContent] = props.flexAlign.split(' ')
|
|
168
|
+
return {
|
|
169
|
+
display: 'flex',
|
|
170
|
+
alignItems,
|
|
171
|
+
justifyContent
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
}
|
|
176
|
+
|
|
13
177
|
export const Block = {
|
|
14
178
|
deps: {
|
|
15
179
|
getSpacingBasedOnRatio,
|
|
@@ -22,92 +186,12 @@ export const Block = {
|
|
|
22
186
|
},
|
|
23
187
|
|
|
24
188
|
class: {
|
|
25
|
-
|
|
26
|
-
? ({ boxSizing: props.boxSizing })
|
|
27
|
-
: { boxSizing: 'border-box' },
|
|
189
|
+
...props,
|
|
28
190
|
|
|
29
191
|
display: ({ props, deps }) => !deps.isUndefined(props.display) && ({
|
|
30
192
|
display: props.display
|
|
31
193
|
}),
|
|
32
194
|
|
|
33
|
-
show: (el, s, ctx) => !!(ctx.utils.exec(el.props.show, el, s) === false) && ({
|
|
34
|
-
display: 'none !important'
|
|
35
|
-
}),
|
|
36
|
-
|
|
37
|
-
hide: (el, s, ctx) => !!ctx.utils.exec(el.props.hide, el, s) && ({
|
|
38
|
-
display: 'none !important'
|
|
39
|
-
}),
|
|
40
|
-
|
|
41
|
-
height: ({ props, deps }) => deps.transformSizeRatio('height', props),
|
|
42
|
-
width: ({ props, deps }) => deps.transformSizeRatio('width', props),
|
|
43
|
-
|
|
44
|
-
boxSize: ({ props, deps }) => {
|
|
45
|
-
if (!deps.isString(props.boxSize)) return
|
|
46
|
-
const [height, width] = props.boxSize.split(' ')
|
|
47
|
-
return {
|
|
48
|
-
...deps.transformSize('height', height),
|
|
49
|
-
...deps.transformSize('width', width || height)
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
|
|
53
|
-
inlineSize: ({ props, deps }) => deps.transformSizeRatio('inlineSize', props),
|
|
54
|
-
blockSize: ({ props, deps }) => deps.transformSizeRatio('blockSize', props),
|
|
55
|
-
|
|
56
|
-
minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props),
|
|
57
|
-
maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props),
|
|
58
|
-
widthRange: ({ props, deps }) => {
|
|
59
|
-
if (!deps.isString(props.widthRange)) return
|
|
60
|
-
const [minWidth, maxWidth] = props.widthRange.split(' ')
|
|
61
|
-
return {
|
|
62
|
-
...deps.transformSize('minWidth', minWidth),
|
|
63
|
-
...deps.transformSize('maxWidth', maxWidth || minWidth)
|
|
64
|
-
}
|
|
65
|
-
},
|
|
66
|
-
|
|
67
|
-
minHeight: ({ props, deps }) => deps.transformSizeRatio('minHeight', props),
|
|
68
|
-
maxHeight: ({ props, deps }) => deps.transformSizeRatio('maxHeight', props),
|
|
69
|
-
heightRange: ({ props, deps }) => {
|
|
70
|
-
if (!deps.isString(props.heightRange)) return
|
|
71
|
-
const [minHeight, maxHeight] = props.heightRange.split(' ')
|
|
72
|
-
return {
|
|
73
|
-
...deps.transformSize('minHeight', minHeight),
|
|
74
|
-
...deps.transformSize('maxHeight', maxHeight || minHeight)
|
|
75
|
-
}
|
|
76
|
-
},
|
|
77
|
-
|
|
78
|
-
size: ({ props, deps }) => {
|
|
79
|
-
if (!deps.isString(props.size)) return
|
|
80
|
-
const [inlineSize, blockSize] = props.size.split(' ')
|
|
81
|
-
return {
|
|
82
|
-
...deps.transformSizeRatio('inlineSize', inlineSize),
|
|
83
|
-
...deps.transformSizeRatio('blockSize', blockSize || inlineSize)
|
|
84
|
-
}
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
minBlockSize: ({ props, deps }) => deps.transformSizeRatio('minBlockSize', props),
|
|
88
|
-
minInlineSize: ({ props, deps }) => deps.transformSizeRatio('minInlineSize', props),
|
|
89
|
-
|
|
90
|
-
maxBlockSize: ({ props, deps }) => deps.transformSizeRatio('maxBlockSize', props),
|
|
91
|
-
maxInlineSize: ({ props, deps }) => deps.transformSizeRatio('maxInlineSize', props),
|
|
92
|
-
|
|
93
|
-
minSize: ({ props, deps }) => {
|
|
94
|
-
if (!deps.isString(props.minSize)) return
|
|
95
|
-
const [minInlineSize, minBlockSize] = props.minSize.split(' ')
|
|
96
|
-
return {
|
|
97
|
-
...deps.transformSize('minInlineSize', minInlineSize),
|
|
98
|
-
...deps.transformSize('minBlockSize', minBlockSize || minInlineSize)
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
|
|
102
|
-
maxSize: ({ props, deps }) => {
|
|
103
|
-
if (!deps.isString(props.maxSize)) return
|
|
104
|
-
const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
|
|
105
|
-
return {
|
|
106
|
-
...deps.transformSize('maxInlineSize', maxInlineSize),
|
|
107
|
-
...deps.transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
|
|
111
195
|
direction: ({ props, deps }) => !deps.isUndefined(props.direction) && ({
|
|
112
196
|
direction: props.direction
|
|
113
197
|
}),
|
|
@@ -120,60 +204,6 @@ export const Block = {
|
|
|
120
204
|
aspectRatio: props.aspectRatio
|
|
121
205
|
}),
|
|
122
206
|
|
|
123
|
-
borderWidth: ({ props, deps }) => deps.transformSizeRatio('borderWidth', props),
|
|
124
|
-
|
|
125
|
-
padding: ({ props, deps }) => deps.transformSizeRatio('padding', props),
|
|
126
|
-
scrollPadding: ({ props, deps }) => deps.transformSizeRatio('scrollPadding', props),
|
|
127
|
-
paddingInline: ({ props, deps }) => {
|
|
128
|
-
if (!deps.isString(props.paddingInline)) return
|
|
129
|
-
const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
|
|
130
|
-
return {
|
|
131
|
-
...deps.transformSize('paddingInlineStart', paddingInlineStart),
|
|
132
|
-
...deps.transformSize('paddingInlineEnd', paddingInlineEnd || paddingInlineStart)
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
paddingBlock: ({ props, deps }) => {
|
|
136
|
-
if (!deps.isString(props.paddingBlock)) return
|
|
137
|
-
const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
|
|
138
|
-
return {
|
|
139
|
-
...deps.transformSize('paddingBlockStart', paddingBlockStart),
|
|
140
|
-
...deps.transformSize('paddingBlockEnd', paddingBlockEnd || paddingBlockStart)
|
|
141
|
-
}
|
|
142
|
-
},
|
|
143
|
-
paddingInlineStart: ({ props, deps }) => deps.transformSizeRatio('paddingInlineStart', props),
|
|
144
|
-
paddingInlineEnd: ({ props, deps }) => deps.transformSizeRatio('paddingInlineEnd', props),
|
|
145
|
-
paddingBlockStart: ({ props, deps }) => deps.transformSizeRatio('paddingBlockStart', props),
|
|
146
|
-
paddingBlockEnd: ({ props, deps }) => deps.transformSizeRatio('paddingBlockEnd', props),
|
|
147
|
-
|
|
148
|
-
margin: ({ props, deps }) => deps.transformSizeRatio('margin', props),
|
|
149
|
-
marginInline: ({ props, deps }) => {
|
|
150
|
-
if (!deps.isString(props.marginInline)) return
|
|
151
|
-
const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
|
|
152
|
-
return {
|
|
153
|
-
...deps.transformSize('marginInlineStart', marginInlineStart),
|
|
154
|
-
...deps.transformSize('marginInlineEnd', marginInlineEnd || marginInlineStart)
|
|
155
|
-
}
|
|
156
|
-
},
|
|
157
|
-
marginBlock: ({ props, deps }) => {
|
|
158
|
-
if (!deps.isString(props.marginBlock)) return
|
|
159
|
-
const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
|
|
160
|
-
return {
|
|
161
|
-
...deps.transformSize('marginBlockStart', marginBlockStart),
|
|
162
|
-
...deps.transformSize('marginBlockEnd', marginBlockEnd || marginBlockStart)
|
|
163
|
-
}
|
|
164
|
-
},
|
|
165
|
-
marginInlineStart: ({ props, deps }) => deps.transformSizeRatio('marginInlineStart', props),
|
|
166
|
-
marginInlineEnd: ({ props, deps }) => deps.transformSizeRatio('marginInlineEnd', props),
|
|
167
|
-
marginBlockStart: ({ props, deps }) => deps.transformSizeRatio('marginBlockStart', props),
|
|
168
|
-
marginBlockEnd: ({ props, deps }) => deps.transformSizeRatio('marginBlockEnd', props),
|
|
169
|
-
|
|
170
|
-
gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({
|
|
171
|
-
gap: transfromGap(props.gap)
|
|
172
|
-
}),
|
|
173
|
-
|
|
174
|
-
columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
|
|
175
|
-
rowGap: ({ props, deps }) => props.rowGap ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null,
|
|
176
|
-
|
|
177
207
|
gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
|
|
178
208
|
|
|
179
209
|
float: ({ props, deps }) => !deps.isUndefined(props.float) && ({
|
|
@@ -205,31 +235,6 @@ export const Block = {
|
|
|
205
235
|
order: props.order
|
|
206
236
|
}),
|
|
207
237
|
|
|
208
|
-
flexWrap: ({ props, deps }) => !deps.isUndefined(props.flexWrap) && ({
|
|
209
|
-
display: 'flex',
|
|
210
|
-
flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
|
|
211
|
-
}),
|
|
212
|
-
flexFlow: ({ props, deps }) => {
|
|
213
|
-
const { flexFlow, reverse } = props
|
|
214
|
-
if (!deps.isString(flexFlow)) return
|
|
215
|
-
let [direction, wrap] = (flexFlow || 'row').split(' ')
|
|
216
|
-
if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row'
|
|
217
|
-
if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column'
|
|
218
|
-
return {
|
|
219
|
-
display: 'flex',
|
|
220
|
-
flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
|
|
221
|
-
}
|
|
222
|
-
},
|
|
223
|
-
flexAlign: ({ props, deps }) => {
|
|
224
|
-
if (!deps.isString(props.flexAlign)) return
|
|
225
|
-
const [alignItems, justifyContent] = props.flexAlign.split(' ')
|
|
226
|
-
return {
|
|
227
|
-
display: 'flex',
|
|
228
|
-
alignItems,
|
|
229
|
-
justifyContent
|
|
230
|
-
}
|
|
231
|
-
},
|
|
232
|
-
|
|
233
238
|
gridColumn: ({ props, deps }) => !deps.isUndefined(props.gridColumn) && ({
|
|
234
239
|
gridColumn: props.gridColumn
|
|
235
240
|
}),
|
|
@@ -247,7 +252,9 @@ export const Block = {
|
|
|
247
252
|
resize: props.resize
|
|
248
253
|
}),
|
|
249
254
|
|
|
250
|
-
verticalAlign: ({ props, deps }) => !deps.isUndefined(props.verticalAlign) && ({
|
|
255
|
+
verticalAlign: ({ props, deps }) => !deps.isUndefined(props.verticalAlign) && ({
|
|
256
|
+
verticalAlign: props.verticalAlign
|
|
257
|
+
}),
|
|
251
258
|
|
|
252
259
|
columns: ({ props, deps }) => !deps.isUndefined(props.columns) && ({
|
|
253
260
|
columns: props.columns
|
|
@@ -289,19 +296,8 @@ export const Ol = {
|
|
|
289
296
|
// export const Article = { tag: 'article' }
|
|
290
297
|
|
|
291
298
|
export const Gutter = {
|
|
292
|
-
deps: { getSpacingByKey },
|
|
293
299
|
props: {
|
|
294
300
|
size: 'C1'
|
|
295
|
-
},
|
|
296
|
-
class: {
|
|
297
|
-
size: ({ props, deps }) => {
|
|
298
|
-
if (!deps.isString(props.size)) return
|
|
299
|
-
const [height, width] = props.size.split(' ')
|
|
300
|
-
return {
|
|
301
|
-
...deps.getSpacingByKey('height', height),
|
|
302
|
-
...deps.getSpacingByKey('width', width || height)
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
301
|
}
|
|
306
302
|
}
|
|
307
303
|
|
package/Collection.js
CHANGED
|
@@ -7,19 +7,19 @@ export const Collection = {
|
|
|
7
7
|
define: {
|
|
8
8
|
$collection: (param, el, state) => {
|
|
9
9
|
const { __ref: ref } = el
|
|
10
|
-
const { children, childrenAs,
|
|
10
|
+
const { children, childrenAs, childExtends } = (el.props || {})
|
|
11
11
|
const childrenExec = children && exec(children, el, state)
|
|
12
12
|
|
|
13
13
|
if (isArray(childrenExec)) {
|
|
14
14
|
param = deepCloneWithExtend(childrenExec)
|
|
15
|
-
if (childrenAs) param = param.map(v => ({ extend:
|
|
15
|
+
if (childrenAs) param = param.map(v => ({ extend: childExtends, [childrenAs]: v }))
|
|
16
16
|
} else if (isObject(childrenExec)) {
|
|
17
17
|
param = deepCloneWithExtend(childrenExec)
|
|
18
18
|
param = Object.keys(param).map(v => {
|
|
19
19
|
const val = param[v]
|
|
20
20
|
return addAdditionalExtend(v, val)
|
|
21
21
|
})
|
|
22
|
-
if (childrenAs) param = param.map(v => ({ extend:
|
|
22
|
+
if (childrenAs) param = param.map(v => ({ extend: childExtends, [childrenAs]: v }))
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
if (!param) return
|
package/Media copy.js
ADDED
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
'use strict'
|
|
2
|
+
|
|
3
|
+
import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
|
|
4
|
+
import { getSystemGlobalTheme } from './Theme'
|
|
5
|
+
|
|
6
|
+
export const keySetters = {
|
|
7
|
+
'@': (key, props, result, element, isSubtree) => applyMediaProps(
|
|
8
|
+
key, props, isSubtree ? result : (result && result.media), element
|
|
9
|
+
),
|
|
10
|
+
':': (key, props, result, element, isSubtree) => applySelectorProps(
|
|
11
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
12
|
+
),
|
|
13
|
+
'[': (key, props, result, element, isSubtree) => applySelectorProps(
|
|
14
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
15
|
+
),
|
|
16
|
+
'*': (key, props, result, element, isSubtree) => applySelectorProps(
|
|
17
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
18
|
+
),
|
|
19
|
+
'+': (key, props, result, element, isSubtree) => applySelectorProps(
|
|
20
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
21
|
+
),
|
|
22
|
+
'~': (key, props, result, element, isSubtree) => applySelectorProps(
|
|
23
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
24
|
+
),
|
|
25
|
+
'&': (key, props, result, element, isSubtree) => applyAndProps(
|
|
26
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
27
|
+
),
|
|
28
|
+
'>': (key, props, result, element, isSubtree) => applyAndProps(
|
|
29
|
+
key, props, isSubtree ? result : (result && result.selector), element
|
|
30
|
+
),
|
|
31
|
+
$: (key, props, result, element, isSubtree) => applyCaseProps(
|
|
32
|
+
key, props, isSubtree ? result : (result && result.case), element
|
|
33
|
+
),
|
|
34
|
+
'-': (key, props, result, element, isSubtree) => applyVariableProps(
|
|
35
|
+
key, props, isSubtree ? result : (result && result.variable), element
|
|
36
|
+
),
|
|
37
|
+
'.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(
|
|
38
|
+
key, props, isSubtree ? result : (result && result.case), element
|
|
39
|
+
),
|
|
40
|
+
'!': (key, props, result, element, isSubtree) => applyConditionalFalsyProps(
|
|
41
|
+
key, props, isSubtree ? result : (result && result.case), element
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
const execClass = (key, props, result, element) => {
|
|
46
|
+
const { class: className } = element
|
|
47
|
+
const classnameExec = className[key]
|
|
48
|
+
|
|
49
|
+
if (typeof classnameExec !== 'function') return
|
|
50
|
+
|
|
51
|
+
let classExec = classnameExec({
|
|
52
|
+
props,
|
|
53
|
+
context: element.context,
|
|
54
|
+
state: element.state,
|
|
55
|
+
deps: element.deps
|
|
56
|
+
}, element.state, element.context)
|
|
57
|
+
|
|
58
|
+
if (isArray(classExec)) classExec = classExec.reduce((a, c) => merge(a, c), {})
|
|
59
|
+
|
|
60
|
+
for (const finalProp in classExec) {
|
|
61
|
+
result[finalProp] = classExec[finalProp]
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return classExec
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
const convertPropsToClass = (props, result, element) => {
|
|
68
|
+
const propsClassObj = {}
|
|
69
|
+
|
|
70
|
+
for (const key in props) {
|
|
71
|
+
const setter = keySetters[key.slice(0, 1)]
|
|
72
|
+
if (setter) {
|
|
73
|
+
setter(key, props[key], propsClassObj, element, true)
|
|
74
|
+
continue
|
|
75
|
+
} else {
|
|
76
|
+
execClass(key, props, propsClassObj, element)
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
return propsClassObj
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
const applyMediaProps = (key, props, result, element) => {
|
|
84
|
+
const { context } = element
|
|
85
|
+
if (!context.designSystem || !context.designSystem.MEDIA) return
|
|
86
|
+
const globalTheme = getSystemGlobalTheme(element)
|
|
87
|
+
const { MEDIA } = context.designSystem
|
|
88
|
+
const mediaValue = MEDIA[key.slice(1)]
|
|
89
|
+
const generatedClass = convertPropsToClass(props, result, element)
|
|
90
|
+
|
|
91
|
+
const name = key.slice(1)
|
|
92
|
+
const isTheme = ['dark', 'light'].includes(name)
|
|
93
|
+
const matchesGlobal = name === globalTheme
|
|
94
|
+
|
|
95
|
+
if (globalTheme && isTheme) {
|
|
96
|
+
if (matchesGlobal) return merge(result, generatedClass)
|
|
97
|
+
return
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
const printValue = '@media ' + (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
|
|
101
|
+
const mediaKey = mediaValue ? printValue : key
|
|
102
|
+
result[mediaKey] = generatedClass
|
|
103
|
+
return result[mediaKey]
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
const applyAndProps = (key, props, result, element) => {
|
|
107
|
+
result[key] = convertPropsToClass(props, result, element)
|
|
108
|
+
return result[key]
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
const applySelectorProps = (key, props, result, element) => {
|
|
112
|
+
const selectorKey = `&${key}`
|
|
113
|
+
result[selectorKey] = convertPropsToClass(props, result, element)
|
|
114
|
+
return result[selectorKey]
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
const applyCaseProps = (key, props, result, element) => {
|
|
118
|
+
const { CASES } = element.context && element.context.designSystem
|
|
119
|
+
const caseKey = key.slice(1)
|
|
120
|
+
const isPropTrue = element.props[caseKey]
|
|
121
|
+
if (!CASES[caseKey] && !isPropTrue) return
|
|
122
|
+
return merge(result, convertPropsToClass(props, result, element))
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
const applyVariableProps = (key, props, result, element) => {
|
|
126
|
+
result[key] = props
|
|
127
|
+
return result
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
const applyConditionalCaseProps = (key, props, result, element) => {
|
|
131
|
+
const caseKey = key.slice(1)
|
|
132
|
+
const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
|
|
133
|
+
if (!isPropTrue) return // remove classname if not here
|
|
134
|
+
return overwriteDeep(result, convertPropsToClass(props, result, element))
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
const applyConditionalFalsyProps = (key, props, result, element) => {
|
|
138
|
+
const caseKey = key.slice(1)
|
|
139
|
+
const isPropTrue = element.props[caseKey] === true || element.state[caseKey] || element[caseKey]
|
|
140
|
+
if (!isPropTrue) return overwriteDeep(result, convertPropsToClass(props, result, element))
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
const applyTrueProps = (props, result, element) => merge(result, convertPropsToClass(props, result, element))
|
|
144
|
+
|
|
145
|
+
const getSetter = (key, element) => {
|
|
146
|
+
const { props } = element
|
|
147
|
+
const setter = keySetters[key.slice(0, 1)]
|
|
148
|
+
|
|
149
|
+
if (setter) setter(key, props[key], CLASS_NAMES, element)
|
|
150
|
+
else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const beforeClassAssign = (element, s) => {
|
|
154
|
+
const { props, class: className, context } = element
|
|
155
|
+
|
|
156
|
+
const CLASS_NAMES = {
|
|
157
|
+
media: {},
|
|
158
|
+
selector: {},
|
|
159
|
+
case: {},
|
|
160
|
+
variable: {}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
if (!context) return
|
|
164
|
+
const globalTheme = context.designSystem.globalTheme
|
|
165
|
+
|
|
166
|
+
for (const key in props) {
|
|
167
|
+
const setter = keySetters[key.slice(0, 1)]
|
|
168
|
+
if (globalTheme) {
|
|
169
|
+
if (key === 'theme' && !props.themeModifier) {
|
|
170
|
+
props.update({
|
|
171
|
+
themeModifier: globalTheme
|
|
172
|
+
}, {
|
|
173
|
+
preventListeners: true,
|
|
174
|
+
preventRecursive: true,
|
|
175
|
+
isForced: true,
|
|
176
|
+
preventDefineUpdate: true
|
|
177
|
+
})
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
if (setter) setter(key, props[key], CLASS_NAMES, element)
|
|
181
|
+
else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
// override props
|
|
185
|
+
// if (props['^']) {
|
|
186
|
+
// for (const key in props['^']) {
|
|
187
|
+
// execClass(key, props, CLASS_NAMES, element)
|
|
188
|
+
// }
|
|
189
|
+
// }
|
|
190
|
+
|
|
191
|
+
const parentProps = element.parent && element.parent.props
|
|
192
|
+
if (parentProps && parentProps.spacingRatio && parentProps.inheritSpacingRatio) {
|
|
193
|
+
element.setProps({
|
|
194
|
+
spacingRatio: parentProps.spacingRatio,
|
|
195
|
+
inheritSpacingRatio: true
|
|
196
|
+
}, {
|
|
197
|
+
preventListeners: true,
|
|
198
|
+
preventRecursive: true,
|
|
199
|
+
isForced: true,
|
|
200
|
+
preventDefineUpdate: true
|
|
201
|
+
})
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
overwriteShallow(className, CLASS_NAMES)
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
export const Media = {
|
|
208
|
+
class: {
|
|
209
|
+
case: (el, s) => {
|
|
210
|
+
return {
|
|
211
|
+
//
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
on: { beforeClassAssign }
|
|
216
|
+
}
|
package/Svg.js
CHANGED
|
@@ -8,29 +8,31 @@ export const Svg = {
|
|
|
8
8
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
9
9
|
'xmlns:xlink': 'http://www.w3.org/1999/xlink'
|
|
10
10
|
},
|
|
11
|
-
html: (
|
|
11
|
+
html: (el) => {
|
|
12
|
+
const { props, context } = el
|
|
12
13
|
if (props.semantic_symbols) return
|
|
14
|
+
if (props.html) return el.call('exec', props.html, el)
|
|
13
15
|
|
|
14
16
|
const { designSystem, utils } = context
|
|
15
17
|
const SVG = designSystem && designSystem.SVG
|
|
16
18
|
const useSvgSprite = props.spriteId || (context.designSystem && context.designSystem.useSvgSprite)
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
if (!useSvgSprite &&
|
|
20
|
+
const src = el.call('exec', props.src, el)
|
|
21
|
+
if (!useSvgSprite && src) return src
|
|
20
22
|
|
|
21
23
|
const useSVGSymbol = icon => `<use xlink:href="#${icon}" />`
|
|
22
24
|
|
|
23
25
|
const spriteId = props.spriteId
|
|
24
26
|
if (spriteId) return useSVGSymbol(spriteId)
|
|
25
27
|
|
|
26
|
-
const symbolId = Symbol.for(
|
|
28
|
+
const symbolId = Symbol.for(src)
|
|
27
29
|
let SVGKey = SVG[symbolId]
|
|
28
30
|
if (SVGKey && SVG[SVGKey]) return useSVGSymbol(SVGKey)
|
|
29
31
|
|
|
30
32
|
SVGKey = SVG[symbolId] = Math.random()
|
|
31
|
-
if (
|
|
33
|
+
if (src) {
|
|
32
34
|
utils.init({
|
|
33
|
-
svg: { [SVGKey]:
|
|
35
|
+
svg: { [SVGKey]: src }
|
|
34
36
|
}, {
|
|
35
37
|
document: context.document,
|
|
36
38
|
emotion: context.emotion
|
package/Text.js
CHANGED
|
@@ -3,24 +3,32 @@
|
|
|
3
3
|
import { exec, isUndefined } from '@domql/utils'
|
|
4
4
|
import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
|
|
5
5
|
|
|
6
|
+
const props = {
|
|
7
|
+
fontSize: (el) => {
|
|
8
|
+
const { props, deps } = el
|
|
9
|
+
return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null
|
|
10
|
+
},
|
|
11
|
+
fontFamily: ({ props, deps }) => ({
|
|
12
|
+
fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily
|
|
13
|
+
}),
|
|
14
|
+
fontWeight: ({ props }) => ({
|
|
15
|
+
fontWeight: props.fontWeight,
|
|
16
|
+
fontVariationSettings: '"wght" ' + props.fontWeight
|
|
17
|
+
})
|
|
18
|
+
}
|
|
19
|
+
|
|
6
20
|
export const Text = {
|
|
7
21
|
deps: { exec, getFontSizeByKey, getFontFamily },
|
|
8
22
|
|
|
9
23
|
text: (el) => {
|
|
10
24
|
const { key, props, state, deps } = el
|
|
11
25
|
if (props.text === true) return (state && state[key]) || (props && props[key])
|
|
26
|
+
// return console.log(el) || deps.exec(props.text, el)
|
|
12
27
|
return deps.exec(props.text, el)
|
|
13
28
|
},
|
|
14
29
|
|
|
15
30
|
class: {
|
|
16
|
-
fontSize: (el) => {
|
|
17
|
-
const { props, deps } = el
|
|
18
|
-
return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null
|
|
19
|
-
},
|
|
20
31
|
font: ({ props }) => !isUndefined(props.font) && ({ font: props.font }),
|
|
21
|
-
fontFamily: ({ props, deps }) => !isUndefined(props.fontFamily) && ({
|
|
22
|
-
fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily
|
|
23
|
-
}),
|
|
24
32
|
lineHeight: ({ props }) => !isUndefined(props.lineHeight) && ({ lineHeight: props.lineHeight }),
|
|
25
33
|
// lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
|
|
26
34
|
textDecoration: ({ props }) => !isUndefined(props.textDecoration) && ({ textDecoration: props.textDecoration }),
|
|
@@ -34,10 +42,7 @@ export const Text = {
|
|
|
34
42
|
writingMode: ({ props }) => !isUndefined(props.writingMode) && ({ writingMode: props.writingMode }),
|
|
35
43
|
textOrientation: ({ props }) => !isUndefined(props.textOrientation) && ({ textOrientation: props.textOrientation }),
|
|
36
44
|
textIndent: ({ props }) => !isUndefined(props.textIndent) && ({ textIndent: props.textIndent }),
|
|
37
|
-
|
|
38
|
-
fontWeight: props.fontWeight,
|
|
39
|
-
fontVariationSettings: '"wght" ' + props.fontWeight
|
|
40
|
-
})
|
|
45
|
+
...props
|
|
41
46
|
}
|
|
42
47
|
}
|
|
43
48
|
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbo.ls/atoms",
|
|
3
|
-
"version": "2.11.
|
|
3
|
+
"version": "2.11.455",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"gitHead": "
|
|
6
|
+
"gitHead": "2ec12ac36ba08a2d424a3806dba7ccb6f7bddfba",
|
|
7
7
|
"dependencies": {
|
|
8
8
|
"@domql/state": "^2.5.0",
|
|
9
9
|
"@domql/utils": "^2.5.0",
|
|
10
|
-
"@symbo.ls/emotion": "^2.11.
|
|
11
|
-
"@symbo.ls/scratch": "^2.11.
|
|
10
|
+
"@symbo.ls/emotion": "^2.11.453",
|
|
11
|
+
"@symbo.ls/scratch": "^2.11.453"
|
|
12
12
|
},
|
|
13
13
|
"source": "src/index.js",
|
|
14
14
|
"devDependencies": {
|