snail.view 1.0.4 → 1.0.6
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/snail.view.d.ts +251 -218
- package/dist/snail.view.js +132 -122
- package/dist/snail.view.umd.js +131 -121
- package/package.json +2 -2
package/dist/snail.view.d.ts
CHANGED
|
@@ -1,5 +1,246 @@
|
|
|
1
1
|
import { IScope, IVersionManager } from 'snail.core';
|
|
2
2
|
|
|
3
|
+
/**
|
|
4
|
+
* CSS管理器
|
|
5
|
+
*/
|
|
6
|
+
interface ICSSManager {
|
|
7
|
+
/**
|
|
8
|
+
* 转换CSS对象为描述符
|
|
9
|
+
* @param op
|
|
10
|
+
*/
|
|
11
|
+
parse(css: CSS): CSSDescriptor;
|
|
12
|
+
/**
|
|
13
|
+
* 进行css操作
|
|
14
|
+
* - 删除操作时，从css.style中分析key做清理
|
|
15
|
+
* @param el 目标元素
|
|
16
|
+
* @param type 操作类型：添加、清楚
|
|
17
|
+
* @param css css对象
|
|
18
|
+
*/
|
|
19
|
+
operate(el: HTMLElement, type: "add" | "clear", css: CSSDescriptor): any;
|
|
20
|
+
/**
|
|
21
|
+
* 构建样式
|
|
22
|
+
* @param options 样式配置
|
|
23
|
+
* @param isFlex 是否是flex布局
|
|
24
|
+
* @returns 计算出来的组件样式信息
|
|
25
|
+
*/
|
|
26
|
+
buildStyle(options: AllStyle | undefined, isFlex?: boolean): Partial<CSSStyleDeclaration>;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* css 样式
|
|
30
|
+
* - string、string[] 时为 class 类样式名称
|
|
31
|
+
* - Object时为 style 样式对象：key为样式名称（height、width、scale)，value为样式值
|
|
32
|
+
* - - { height:"100px" }
|
|
33
|
+
*/
|
|
34
|
+
type CSS = string | string[] | Partial<CSSStyleDeclaration>;
|
|
35
|
+
/**
|
|
36
|
+
* css 信息 描述器
|
|
37
|
+
*/
|
|
38
|
+
type CSSDescriptor = {
|
|
39
|
+
/**
|
|
40
|
+
* class样式名称数组
|
|
41
|
+
*/
|
|
42
|
+
class?: string[];
|
|
43
|
+
/**
|
|
44
|
+
* 内联样式信息
|
|
45
|
+
*/
|
|
46
|
+
style?: Partial<CSSStyleDeclaration>;
|
|
47
|
+
};
|
|
48
|
+
/**
|
|
49
|
+
* 所有的样式属性
|
|
50
|
+
* - 高度、宽度、对齐、边框、内边距等合集
|
|
51
|
+
* - 对齐方式、、、
|
|
52
|
+
*/
|
|
53
|
+
type AllStyle = AlignStyle & FlexStyle & HeightStyle & WidthStyle & MarginStyle & BorderStyle & PaddingStyle & TransitionStyle;
|
|
54
|
+
/**
|
|
55
|
+
* 组件对齐样式
|
|
56
|
+
* - flex布局时约束 align-items和 justify-content
|
|
57
|
+
* - 非flex布局时约束 text-align和 vertical-align
|
|
58
|
+
*/
|
|
59
|
+
type AlignStyle = {
|
|
60
|
+
/**
|
|
61
|
+
* 对齐方式
|
|
62
|
+
* - left: 左对齐
|
|
63
|
+
* - center: 居中对齐
|
|
64
|
+
* - right: 右对齐
|
|
65
|
+
*/
|
|
66
|
+
align?: "left" | "center" | "right";
|
|
67
|
+
/**
|
|
68
|
+
* 垂直对齐方式
|
|
69
|
+
* - top: 顶部对齐
|
|
70
|
+
* - middle: 居中对齐
|
|
71
|
+
* - bottom: 底部对齐
|
|
72
|
+
*/
|
|
73
|
+
valign?: "top" | "middle" | "bottom";
|
|
74
|
+
};
|
|
75
|
+
/**
|
|
76
|
+
* 主轴弹性样式
|
|
77
|
+
*/
|
|
78
|
+
type FlexStyle = {
|
|
79
|
+
/**
|
|
80
|
+
* 弹性置
|
|
81
|
+
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
|
|
82
|
+
*/
|
|
83
|
+
flex?: string;
|
|
84
|
+
/**
|
|
85
|
+
* 主轴初始大小
|
|
86
|
+
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis
|
|
87
|
+
*/
|
|
88
|
+
flexBasis?: string;
|
|
89
|
+
/**
|
|
90
|
+
* 主轴放大系数
|
|
91
|
+
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
|
|
92
|
+
*/
|
|
93
|
+
flexGrow?: number | "inherit" | "initial" | "revert" | "unset";
|
|
94
|
+
/**
|
|
95
|
+
* 主轴收缩规则
|
|
96
|
+
* @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink
|
|
97
|
+
*/
|
|
98
|
+
flexShrink?: number | "inherit" | "initial" | "unset";
|
|
99
|
+
};
|
|
100
|
+
/**
|
|
101
|
+
* 宽度样式
|
|
102
|
+
*/
|
|
103
|
+
type WidthStyle = {
|
|
104
|
+
/**
|
|
105
|
+
* 宽度
|
|
106
|
+
*/
|
|
107
|
+
width?: string;
|
|
108
|
+
/**
|
|
109
|
+
* 最小宽度
|
|
110
|
+
*/
|
|
111
|
+
minWidth?: string;
|
|
112
|
+
/**
|
|
113
|
+
* 最大宽度
|
|
114
|
+
*/
|
|
115
|
+
maxWidth?: string;
|
|
116
|
+
};
|
|
117
|
+
/**
|
|
118
|
+
* 高度样式
|
|
119
|
+
*/
|
|
120
|
+
type HeightStyle = {
|
|
121
|
+
/**
|
|
122
|
+
* 高度
|
|
123
|
+
*/
|
|
124
|
+
height?: string;
|
|
125
|
+
/**
|
|
126
|
+
* 最小高度
|
|
127
|
+
*/
|
|
128
|
+
minHeight?: string;
|
|
129
|
+
/**
|
|
130
|
+
* 最大高度
|
|
131
|
+
*/
|
|
132
|
+
maxHeight?: string;
|
|
133
|
+
};
|
|
134
|
+
/**
|
|
135
|
+
* 组件外边距样式
|
|
136
|
+
* - margin < marginXXX
|
|
137
|
+
*/
|
|
138
|
+
type MarginStyle = {
|
|
139
|
+
/**
|
|
140
|
+
* 外边距样式
|
|
141
|
+
*/
|
|
142
|
+
margin?: string;
|
|
143
|
+
/**
|
|
144
|
+
* 上外边距样式
|
|
145
|
+
*/
|
|
146
|
+
marginTop?: string;
|
|
147
|
+
/**
|
|
148
|
+
* 右外边距样式
|
|
149
|
+
*/
|
|
150
|
+
marginRight?: string;
|
|
151
|
+
/**
|
|
152
|
+
* 下外边距样式
|
|
153
|
+
*/
|
|
154
|
+
marginBottom?: string;
|
|
155
|
+
/**
|
|
156
|
+
* 左外边距样式
|
|
157
|
+
*/
|
|
158
|
+
marginLeft?: string;
|
|
159
|
+
};
|
|
160
|
+
/**
|
|
161
|
+
* 组件边框样式
|
|
162
|
+
* - border < borderXXX
|
|
163
|
+
*/
|
|
164
|
+
type BorderStyle = {
|
|
165
|
+
/**
|
|
166
|
+
* 边框圆角
|
|
167
|
+
*/
|
|
168
|
+
borderRadius?: string;
|
|
169
|
+
/**
|
|
170
|
+
* 边框样式
|
|
171
|
+
*/
|
|
172
|
+
border?: string;
|
|
173
|
+
/**
|
|
174
|
+
* 上边框样式
|
|
175
|
+
*/
|
|
176
|
+
borderTop?: string;
|
|
177
|
+
/**
|
|
178
|
+
* 右边框样式
|
|
179
|
+
*/
|
|
180
|
+
borderRight?: string;
|
|
181
|
+
/**
|
|
182
|
+
* 下边框样式
|
|
183
|
+
*/
|
|
184
|
+
borderBottom?: string;
|
|
185
|
+
/**
|
|
186
|
+
* 左边框样式
|
|
187
|
+
*/
|
|
188
|
+
borderLeft?: string;
|
|
189
|
+
};
|
|
190
|
+
/**
|
|
191
|
+
* 内边距样式
|
|
192
|
+
* - 优先级：padding < paddingXXX
|
|
193
|
+
*/
|
|
194
|
+
type PaddingStyle = {
|
|
195
|
+
/**
|
|
196
|
+
* 内边距
|
|
197
|
+
*/
|
|
198
|
+
padding?: string;
|
|
199
|
+
/**
|
|
200
|
+
* 上内边距
|
|
201
|
+
*/
|
|
202
|
+
paddingTop?: string;
|
|
203
|
+
/**
|
|
204
|
+
* 右内边距
|
|
205
|
+
*/
|
|
206
|
+
paddingRight?: string;
|
|
207
|
+
/**
|
|
208
|
+
* 下内边距
|
|
209
|
+
*/
|
|
210
|
+
paddingBottom?: string;
|
|
211
|
+
/**
|
|
212
|
+
* 左内边距
|
|
213
|
+
*/
|
|
214
|
+
paddingLeft?: string;
|
|
215
|
+
};
|
|
216
|
+
/**
|
|
217
|
+
* 过渡效果 样式
|
|
218
|
+
*/
|
|
219
|
+
type TransitionStyle = {
|
|
220
|
+
/**
|
|
221
|
+
* 过渡效果
|
|
222
|
+
*/
|
|
223
|
+
transition?: string;
|
|
224
|
+
/**
|
|
225
|
+
* 过渡效果属性
|
|
226
|
+
* - 如height、width、left、、、
|
|
227
|
+
*/
|
|
228
|
+
transitionProperty?: string;
|
|
229
|
+
/**
|
|
230
|
+
* 过渡效果持续时间
|
|
231
|
+
*/
|
|
232
|
+
transitionDuration?: string;
|
|
233
|
+
/**
|
|
234
|
+
* 过渡效果延迟时间
|
|
235
|
+
*/
|
|
236
|
+
transitionDelay?: string;
|
|
237
|
+
/**
|
|
238
|
+
* 过渡效果函数
|
|
239
|
+
* - 暂时固定效果，后期支持自定义
|
|
240
|
+
*/
|
|
241
|
+
transitionTimingFunction?: ("ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end");
|
|
242
|
+
};
|
|
243
|
+
|
|
3
244
|
/**
|
|
4
245
|
* 动画管理器
|
|
5
246
|
*/
|
|
@@ -22,13 +263,6 @@ interface IAnimationManager {
|
|
|
22
263
|
*/
|
|
23
264
|
transition(el: HTMLElement, effect: TransitionEffectOptions, time?: number): IScope;
|
|
24
265
|
}
|
|
25
|
-
/**
|
|
26
|
-
* 过渡动画样式信息，支持class和style
|
|
27
|
-
* - string、string[] 时为 class 类样式名称
|
|
28
|
-
* - Object时为 style 样式对象：key为样式名称（height、width、scale)，value为样式值
|
|
29
|
-
* - - { height:"100px" }
|
|
30
|
-
*/
|
|
31
|
-
type TransitionCSS = string | string[] | Partial<CSSStyleDeclaration>;
|
|
32
266
|
/**
|
|
33
267
|
* 过渡动画效果配置信息
|
|
34
268
|
* - 执行顺序 from - to - end
|
|
@@ -39,18 +273,18 @@ type TransitionEffectOptions = {
|
|
|
39
273
|
* - 支持 class 、style 样式属性
|
|
40
274
|
* - 如 高度 从 100 到 200；100 则为动画开始样式
|
|
41
275
|
*/
|
|
42
|
-
from:
|
|
276
|
+
from: CSS;
|
|
43
277
|
/**
|
|
44
278
|
* 过渡动画目标样式
|
|
45
279
|
* - 支持 class 、style 样式属性
|
|
46
280
|
* - 如 高度 从 100 到 200；200 则为动画目标样式
|
|
47
281
|
*/
|
|
48
|
-
to:
|
|
282
|
+
to: CSS;
|
|
49
283
|
/**
|
|
50
284
|
* 动画结束样式
|
|
51
285
|
* - 支持 class 、style 样式属性
|
|
52
286
|
*/
|
|
53
|
-
end?:
|
|
287
|
+
end?: CSS;
|
|
54
288
|
};
|
|
55
289
|
|
|
56
290
|
/**
|
|
@@ -68,6 +302,11 @@ type TransitionEffectOptions = {
|
|
|
68
302
|
*/
|
|
69
303
|
declare function useAnimation(): IAnimationManager & IScope;
|
|
70
304
|
|
|
305
|
+
/**
|
|
306
|
+
* 全局的【CSS管理器】
|
|
307
|
+
*/
|
|
308
|
+
declare const css: ICSSManager;
|
|
309
|
+
|
|
71
310
|
/**
|
|
72
311
|
* 接口：link标签管理器
|
|
73
312
|
*/
|
|
@@ -228,211 +467,5 @@ type ElementSize = {
|
|
|
228
467
|
*/
|
|
229
468
|
declare function useObserver(): IObserver & IScope;
|
|
230
469
|
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
* 1、高度、宽度、边框、内外边距样式
|
|
234
|
-
* 2、文本、布局对齐方式
|
|
235
|
-
*/
|
|
236
|
-
/**
|
|
237
|
-
* 样式管理器
|
|
238
|
-
*/
|
|
239
|
-
interface IStyleManager {
|
|
240
|
-
/**
|
|
241
|
-
* 构建样式
|
|
242
|
-
* @param options 样式配置
|
|
243
|
-
* @param isFlex 是否是flex布局
|
|
244
|
-
* @returns 计算出来的组件样式信息
|
|
245
|
-
*/
|
|
246
|
-
build(options: AllStyle | undefined, isFlex?: boolean): Partial<CSSStyleDeclaration>;
|
|
247
|
-
}
|
|
248
|
-
/**
|
|
249
|
-
* 所有的样式属性
|
|
250
|
-
* - 尺寸、对齐、边框、内边距等合集
|
|
251
|
-
* - 对齐方式、、、
|
|
252
|
-
*/
|
|
253
|
-
type AllStyle = AlignStyle & SizeStyle & MarginStyle & BorderStyle & PaddingStyle & TransitionStyle;
|
|
254
|
-
/**
|
|
255
|
-
* 组件对齐样式
|
|
256
|
-
* - flex布局时约束 align-items和 justify-content
|
|
257
|
-
* - 非flex布局时约束 text-align和 vertical-align
|
|
258
|
-
*/
|
|
259
|
-
type AlignStyle = {
|
|
260
|
-
/**
|
|
261
|
-
* 对齐方式
|
|
262
|
-
* - left: 左对齐
|
|
263
|
-
* - center: 居中对齐
|
|
264
|
-
* - right: 右对齐
|
|
265
|
-
*/
|
|
266
|
-
align?: "left" | "center" | "right";
|
|
267
|
-
/**
|
|
268
|
-
* 垂直对齐方式
|
|
269
|
-
* - top: 顶部对齐
|
|
270
|
-
* - middle: 居中对齐
|
|
271
|
-
* - bottom: 底部对齐
|
|
272
|
-
*/
|
|
273
|
-
valign?: "top" | "middle" | "bottom";
|
|
274
|
-
};
|
|
275
|
-
/**
|
|
276
|
-
* 尺寸配置选项
|
|
277
|
-
*/
|
|
278
|
-
type SizeOptions = {
|
|
279
|
-
/**
|
|
280
|
-
* 弹性尺寸
|
|
281
|
-
* - 在flex布局时生效
|
|
282
|
-
* - 存在时，size属性无效
|
|
283
|
-
*/
|
|
284
|
-
flex?: number;
|
|
285
|
-
/**
|
|
286
|
-
* 固定尺寸大小
|
|
287
|
-
* -对应 width 或者 height 属性
|
|
288
|
-
*/
|
|
289
|
-
size?: string;
|
|
290
|
-
/**
|
|
291
|
-
* 最小值
|
|
292
|
-
* - 对应 min-width 或者 min-height 属性
|
|
293
|
-
* - size 属性未指定、或者无效时生效；
|
|
294
|
-
*/
|
|
295
|
-
min?: string;
|
|
296
|
-
/**
|
|
297
|
-
* 最大值
|
|
298
|
-
* - 对应 max-width 或者 max-height 属性
|
|
299
|
-
* - size 属性未指定、或者无效时生效；
|
|
300
|
-
*/
|
|
301
|
-
max?: string;
|
|
302
|
-
};
|
|
303
|
-
/**
|
|
304
|
-
* 尺寸样式：宽度+高度
|
|
305
|
-
*/
|
|
306
|
-
type SizeStyle = {
|
|
307
|
-
/**
|
|
308
|
-
* 宽度样式
|
|
309
|
-
*/
|
|
310
|
-
width?: SizeOptions;
|
|
311
|
-
/**
|
|
312
|
-
* 高度样式
|
|
313
|
-
*/
|
|
314
|
-
height?: SizeOptions;
|
|
315
|
-
};
|
|
316
|
-
/**
|
|
317
|
-
* 组件外边距样式
|
|
318
|
-
* - margin < marginXXX
|
|
319
|
-
*/
|
|
320
|
-
type MarginStyle = {
|
|
321
|
-
/**
|
|
322
|
-
* 外边距样式
|
|
323
|
-
*/
|
|
324
|
-
margin?: string;
|
|
325
|
-
/**
|
|
326
|
-
* 上外边距样式
|
|
327
|
-
*/
|
|
328
|
-
marginTop?: string;
|
|
329
|
-
/**
|
|
330
|
-
* 右外边距样式
|
|
331
|
-
*/
|
|
332
|
-
marginRight?: string;
|
|
333
|
-
/**
|
|
334
|
-
* 下外边距样式
|
|
335
|
-
*/
|
|
336
|
-
marginBottom?: string;
|
|
337
|
-
/**
|
|
338
|
-
* 左外边距样式
|
|
339
|
-
*/
|
|
340
|
-
marginLeft?: string;
|
|
341
|
-
};
|
|
342
|
-
/**
|
|
343
|
-
* 组件边框样式
|
|
344
|
-
* - border < borderXXX
|
|
345
|
-
*/
|
|
346
|
-
type BorderStyle = {
|
|
347
|
-
/**
|
|
348
|
-
* 边框圆角
|
|
349
|
-
*/
|
|
350
|
-
borderRadius?: string;
|
|
351
|
-
/**
|
|
352
|
-
* 边框样式
|
|
353
|
-
*/
|
|
354
|
-
border?: string;
|
|
355
|
-
/**
|
|
356
|
-
* 上边框样式
|
|
357
|
-
*/
|
|
358
|
-
borderTop?: string;
|
|
359
|
-
/**
|
|
360
|
-
* 右边框样式
|
|
361
|
-
*/
|
|
362
|
-
borderRight?: string;
|
|
363
|
-
/**
|
|
364
|
-
* 下边框样式
|
|
365
|
-
*/
|
|
366
|
-
borderBottom?: string;
|
|
367
|
-
/**
|
|
368
|
-
* 左边框样式
|
|
369
|
-
*/
|
|
370
|
-
borderLeft?: string;
|
|
371
|
-
};
|
|
372
|
-
/**
|
|
373
|
-
* 内边距样式
|
|
374
|
-
* - 优先级：padding < paddingXXX
|
|
375
|
-
*/
|
|
376
|
-
type PaddingStyle = {
|
|
377
|
-
/**
|
|
378
|
-
* 内边距
|
|
379
|
-
*/
|
|
380
|
-
padding?: string;
|
|
381
|
-
/**
|
|
382
|
-
* 上内边距
|
|
383
|
-
*/
|
|
384
|
-
paddingTop?: string;
|
|
385
|
-
/**
|
|
386
|
-
* 右内边距
|
|
387
|
-
*/
|
|
388
|
-
paddingRight?: string;
|
|
389
|
-
/**
|
|
390
|
-
* 下内边距
|
|
391
|
-
*/
|
|
392
|
-
paddingBottom?: string;
|
|
393
|
-
/**
|
|
394
|
-
* 左内边距
|
|
395
|
-
*/
|
|
396
|
-
paddingLeft?: string;
|
|
397
|
-
};
|
|
398
|
-
/**
|
|
399
|
-
* 过渡效果 样式
|
|
400
|
-
*/
|
|
401
|
-
type TransitionStyle = {
|
|
402
|
-
/**
|
|
403
|
-
* 过渡效果
|
|
404
|
-
*/
|
|
405
|
-
transition?: string;
|
|
406
|
-
/**
|
|
407
|
-
* 过渡效果属性
|
|
408
|
-
* - 如height、width、left、、、
|
|
409
|
-
*/
|
|
410
|
-
transitionProperty?: string;
|
|
411
|
-
/**
|
|
412
|
-
* 过渡效果持续时间
|
|
413
|
-
*/
|
|
414
|
-
transitionDuration?: string;
|
|
415
|
-
/**
|
|
416
|
-
* 过渡效果延迟时间
|
|
417
|
-
*/
|
|
418
|
-
transitionDelay?: string;
|
|
419
|
-
/**
|
|
420
|
-
* 过渡效果函数
|
|
421
|
-
* - 暂时固定效果，后期支持自定义
|
|
422
|
-
*/
|
|
423
|
-
transitionTimingFunction?: ("ease" | "ease-in" | "ease-out" | "ease-in-out" | "linear" | "step-start" | "step-end");
|
|
424
|
-
};
|
|
425
|
-
|
|
426
|
-
/**
|
|
427
|
-
* 样式管理模块
|
|
428
|
-
* 1、基于配置构建css样式数据
|
|
429
|
-
* 2、【后续支持】构建style标签，并生成css样式插入到页面
|
|
430
|
-
*/
|
|
431
|
-
|
|
432
|
-
/**
|
|
433
|
-
* 全局的【样式管理器】
|
|
434
|
-
*/
|
|
435
|
-
declare const style: IStyleManager;
|
|
436
|
-
|
|
437
|
-
export { configLink, link, linkMap, style, useAnimation, useLink, useObserver };
|
|
438
|
-
export type { AlignStyle, AllStyle, BorderStyle, ElementSize, IAnimationManager, ILinkManager, IObserver, IStyleManager, LinkElement, LinkFile, LinkOptions, MarginStyle, PaddingStyle, SizeOptions, SizeStyle, TransitionCSS, TransitionEffectOptions, TransitionStyle };
|
|
470
|
+
export { configLink, css, link, linkMap, useAnimation, useLink, useObserver };
|
|
471
|
+
export type { ElementSize, IAnimationManager, ILinkManager, IObserver, LinkElement, LinkFile, LinkOptions, TransitionEffectOptions };
|
package/dist/snail.view.js
CHANGED
|
@@ -1,52 +1,154 @@
|
|
|
1
1
|
//@ sourceURL=/snail.view.js
|
|
2
|
-
import { checkScope, throwIfFalse, useKeyScope,
|
|
2
|
+
import { checkScope, throwIfFalse, useKeyScope, isArrayNotEmpty, isStringNotEmpty, isObject, useScopes, mountScope, extract, hasOwnProperty, tidyString, event, mustString, version, useScope, run, mustFunction } from 'snail.core';
|
|
3
3
|
|
|
4
4
|
function getAnimationScope(manager, el) {
|
|
5
5
|
checkScope(manager, "getAnimationScope: manager destroyed.");
|
|
6
6
|
throwIfFalse(el instanceof HTMLElement, "getAnimationScope: el must be an HTMLElement.");
|
|
7
7
|
return useKeyScope(el, false).scope;
|
|
8
8
|
}
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
|
|
10
|
+
function buildAlign(style, align, isFlex) {
|
|
11
|
+
if (isFlex == true) {
|
|
12
|
+
const map = {
|
|
13
|
+
"left": "start",
|
|
14
|
+
"center": "center",
|
|
15
|
+
"right": "end",
|
|
16
|
+
"top": "start",
|
|
17
|
+
"middle": "center",
|
|
18
|
+
"bottom": "end"
|
|
17
19
|
};
|
|
20
|
+
const aV = map[align.align],
|
|
21
|
+
vaV = map[align.valign];
|
|
22
|
+
aV && (style.justifyContent = aV);
|
|
23
|
+
vaV && (style.alignItems = vaV);
|
|
24
|
+
} else {
|
|
25
|
+
align.align && (style.textAlign = align.align);
|
|
26
|
+
align.valign && (style.verticalAlign = align.valign);
|
|
18
27
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
28
|
+
}
|
|
29
|
+
function buildFlex(style, flex) {
|
|
30
|
+
if (flex) {
|
|
31
|
+
flex.flex && (style.flex = flex.flex);
|
|
32
|
+
flex.flexBasis && (style.flexBasis = flex.flexBasis);
|
|
33
|
+
flex.flexGrow && (style.flexGrow = String(flex.flexGrow));
|
|
34
|
+
flex.flexShrink && (style.flexShrink = String(flex.flexShrink));
|
|
24
35
|
}
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
36
|
+
}
|
|
37
|
+
function buildWidth(style, width) {
|
|
38
|
+
if (width) {
|
|
39
|
+
width.width && (style.width = width.width);
|
|
40
|
+
width.minWidth && (style.minWidth = width.minWidth);
|
|
41
|
+
width.maxWidth && (style.maxWidth = width.maxWidth);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
function buildHeight(style, height) {
|
|
45
|
+
if (height) {
|
|
46
|
+
height.height && (style.height = height.height);
|
|
47
|
+
height.minHeight && (style.minHeight = height.minHeight);
|
|
48
|
+
height.maxHeight && (style.maxHeight = height.maxHeight);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
function buildMargin(style, margin) {
|
|
52
|
+
if (margin) {
|
|
53
|
+
margin.margin && (style.margin = margin.margin);
|
|
54
|
+
margin.marginTop && (style.marginTop = margin.marginTop);
|
|
55
|
+
margin.marginRight && (style.marginRight = margin.marginRight);
|
|
56
|
+
margin.marginBottom && (style.marginBottom = margin.marginBottom);
|
|
57
|
+
margin.marginLeft && (style.marginLeft = margin.marginLeft);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
function buildBorder(style, border) {
|
|
61
|
+
if (border) {
|
|
62
|
+
border.borderRadius && (style.borderRadius = border.borderRadius);
|
|
63
|
+
border.border && (style.border = border.border);
|
|
64
|
+
border.borderTop && (style.borderTop = border.borderTop);
|
|
65
|
+
border.borderRight && (style.borderRight = border.borderRight);
|
|
66
|
+
border.borderBottom && (style.borderBottom = border.borderBottom);
|
|
67
|
+
border.borderLeft && (style.borderLeft = border.borderLeft);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function buildPadding(style, padding) {
|
|
71
|
+
if (padding) {
|
|
72
|
+
padding.padding && (style.padding = padding.padding);
|
|
73
|
+
padding.paddingTop && (style.paddingTop = padding.paddingTop);
|
|
74
|
+
padding.paddingRight && (style.paddingRight = padding.paddingRight);
|
|
75
|
+
padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
|
|
76
|
+
padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
function buildTransition(style, transition) {
|
|
80
|
+
if (transition) {
|
|
81
|
+
transition.transition && (style.transition = transition.transition);
|
|
82
|
+
transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
|
|
83
|
+
transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
|
|
84
|
+
transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
|
|
85
|
+
transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function useCSS() {
|
|
90
|
+
function parse(css2) {
|
|
91
|
+
if (isStringNotEmpty(css2) == true) {
|
|
92
|
+
return {
|
|
93
|
+
class: [css2]
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
if (isArrayNotEmpty(css2) == true) {
|
|
97
|
+
const strs = css2.filter(name => isStringNotEmpty(name));
|
|
98
|
+
return strs.length > 0 ? {
|
|
99
|
+
class: strs
|
|
100
|
+
} : {};
|
|
101
|
+
}
|
|
102
|
+
if (css2 instanceof CSSStyleDeclaration || isObject(css2) == true) {
|
|
103
|
+
return {
|
|
104
|
+
style: Object.assign(Object.create(null), css2)
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
return Object.create(null);
|
|
108
|
+
}
|
|
109
|
+
function operate(el, type, css2) {
|
|
110
|
+
css2 && isArrayNotEmpty(css2.class) && css2.class.forEach(name => type == "add" ? el.classList.add(name) : el.classList.remove(name));
|
|
111
|
+
css2 && css2.style && Object.keys(css2.style).forEach(key => type == "add" ? el.style.setProperty(key, css2.style[key]) : el.style.removeProperty(key));
|
|
112
|
+
}
|
|
113
|
+
function buildStyle(options, isFlex) {
|
|
114
|
+
const style = Object.create(null);
|
|
115
|
+
if (options) {
|
|
116
|
+
buildAlign(style, options, isFlex);
|
|
117
|
+
isFlex && buildFlex(style, options);
|
|
118
|
+
buildWidth(style, options);
|
|
119
|
+
buildHeight(style, options);
|
|
120
|
+
buildMargin(style, options);
|
|
121
|
+
buildBorder(style, options);
|
|
122
|
+
buildPadding(style, options);
|
|
123
|
+
buildTransition(style, options);
|
|
124
|
+
}
|
|
125
|
+
return style;
|
|
29
126
|
}
|
|
30
|
-
return Object.
|
|
127
|
+
return Object.freeze({
|
|
128
|
+
parse,
|
|
129
|
+
operate,
|
|
130
|
+
buildStyle
|
|
131
|
+
});
|
|
31
132
|
}
|
|
133
|
+
const css = useCSS();
|
|
32
134
|
|
|
33
135
|
function useAnimation() {
|
|
34
136
|
const scopes = useScopes();
|
|
35
137
|
function transition(el, effect, time) {
|
|
36
138
|
throwIfFalse(isObject(effect), "transition: effect must be an object.");
|
|
37
139
|
const scope = scopes.add(getAnimationScope(manager, el));
|
|
38
|
-
const fromCss =
|
|
39
|
-
const toCss =
|
|
40
|
-
const endCss =
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
setTimeout(
|
|
140
|
+
const fromCss = css.parse(effect.from);
|
|
141
|
+
const toCss = css.parse(effect.to);
|
|
142
|
+
const endCss = css.parse(effect.end);
|
|
143
|
+
css.operate(el, "clear", toCss);
|
|
144
|
+
css.operate(el, "clear", endCss);
|
|
145
|
+
css.operate(el, "add", fromCss);
|
|
146
|
+
setTimeout(css.operate, 1, el, "add", toCss);
|
|
45
147
|
setTimeout(scope.destroy, time > 0 ? time : 200);
|
|
46
148
|
return scope.onDestroy(function () {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
149
|
+
css.operate(el, "clear", fromCss);
|
|
150
|
+
css.operate(el, "clear", toCss);
|
|
151
|
+
css.operate(el, "add", endCss);
|
|
50
152
|
});
|
|
51
153
|
}
|
|
52
154
|
const manager = mountScope({
|
|
@@ -244,96 +346,4 @@ function useObserver() {
|
|
|
244
346
|
return Object.freeze(manager);
|
|
245
347
|
}
|
|
246
348
|
|
|
247
|
-
|
|
248
|
-
if (isFlex == true) {
|
|
249
|
-
const map = {
|
|
250
|
-
"left": "start",
|
|
251
|
-
"center": "center",
|
|
252
|
-
"right": "end",
|
|
253
|
-
"top": "start",
|
|
254
|
-
"middle": "center",
|
|
255
|
-
"bottom": "end"
|
|
256
|
-
};
|
|
257
|
-
const aV = map[align.align],
|
|
258
|
-
vaV = map[align.valign];
|
|
259
|
-
aV && (style.justifyContent = aV);
|
|
260
|
-
vaV && (style.alignItems = vaV);
|
|
261
|
-
} else {
|
|
262
|
-
align.align && (style.textAlign = align.align);
|
|
263
|
-
align.valign && (style.verticalAlign = align.valign);
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
function buildSize(style, size, styleName, isFlex) {
|
|
267
|
-
if (size) {
|
|
268
|
-
var fixed = size.size;
|
|
269
|
-
if (isFlex && size.flex != void 0) {
|
|
270
|
-
fixed = void 0;
|
|
271
|
-
style.flex = String(size.flex);
|
|
272
|
-
}
|
|
273
|
-
if (fixed != void 0) {
|
|
274
|
-
style[styleName] = fixed;
|
|
275
|
-
} else {
|
|
276
|
-
size.min != void 0 && (style[`min-${styleName}`] = size.min);
|
|
277
|
-
size.max != void 0 && (style[`max-${styleName}`] = size.max);
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
function buildMargin(style, margin) {
|
|
282
|
-
if (margin) {
|
|
283
|
-
margin.margin && (style.margin = margin.margin);
|
|
284
|
-
margin.marginTop && (style.marginTop = margin.marginTop);
|
|
285
|
-
margin.marginRight && (style.marginRight = margin.marginRight);
|
|
286
|
-
margin.marginBottom && (style.marginBottom = margin.marginBottom);
|
|
287
|
-
margin.marginLeft && (style.marginLeft = margin.marginLeft);
|
|
288
|
-
}
|
|
289
|
-
}
|
|
290
|
-
function buildBorder(style, border) {
|
|
291
|
-
if (border) {
|
|
292
|
-
border.borderRadius && (style.borderRadius = border.borderRadius);
|
|
293
|
-
border.border && (style.border = border.border);
|
|
294
|
-
border.borderTop && (style.borderTop = border.borderTop);
|
|
295
|
-
border.borderRight && (style.borderRight = border.borderRight);
|
|
296
|
-
border.borderBottom && (style.borderBottom = border.borderBottom);
|
|
297
|
-
border.borderLeft && (style.borderLeft = border.borderLeft);
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
function buildPadding(style, padding) {
|
|
301
|
-
if (padding) {
|
|
302
|
-
padding.padding && (style.padding = padding.padding);
|
|
303
|
-
padding.paddingTop && (style.paddingTop = padding.paddingTop);
|
|
304
|
-
padding.paddingRight && (style.paddingRight = padding.paddingRight);
|
|
305
|
-
padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
|
|
306
|
-
padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
|
|
307
|
-
}
|
|
308
|
-
}
|
|
309
|
-
function buildTransition(style, transition) {
|
|
310
|
-
if (transition) {
|
|
311
|
-
transition.transition && (style.transition = transition.transition);
|
|
312
|
-
transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
|
|
313
|
-
transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
|
|
314
|
-
transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
|
|
315
|
-
transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
function useStyle() {
|
|
320
|
-
function build(options, isFlex) {
|
|
321
|
-
const style2 = Object.create(null);
|
|
322
|
-
if (options) {
|
|
323
|
-
buildAlign(style2, options, isFlex);
|
|
324
|
-
buildSize(style2, options.width, "width", isFlex);
|
|
325
|
-
buildSize(style2, options.height, "height", isFlex);
|
|
326
|
-
buildMargin(style2, options);
|
|
327
|
-
buildBorder(style2, options);
|
|
328
|
-
buildPadding(style2, options);
|
|
329
|
-
buildTransition(style2, options);
|
|
330
|
-
}
|
|
331
|
-
return style2;
|
|
332
|
-
}
|
|
333
|
-
return Object.freeze({
|
|
334
|
-
build
|
|
335
|
-
});
|
|
336
|
-
}
|
|
337
|
-
const style = useStyle();
|
|
338
|
-
|
|
339
|
-
export { configLink, link, linkMap, style, useAnimation, useLink, useObserver };
|
|
349
|
+
export { configLink, css, link, linkMap, useAnimation, useLink, useObserver };
|
package/dist/snail.view.umd.js
CHANGED
|
@@ -10,47 +10,149 @@
|
|
|
10
10
|
snail_core.throwIfFalse(el instanceof HTMLElement, "getAnimationScope: el must be an HTMLElement.");
|
|
11
11
|
return snail_core.useKeyScope(el, false).scope;
|
|
12
12
|
}
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
13
|
+
|
|
14
|
+
function buildAlign(style, align, isFlex) {
|
|
15
|
+
if (isFlex == true) {
|
|
16
|
+
const map = {
|
|
17
|
+
"left": "start",
|
|
18
|
+
"center": "center",
|
|
19
|
+
"right": "end",
|
|
20
|
+
"top": "start",
|
|
21
|
+
"middle": "center",
|
|
22
|
+
"bottom": "end"
|
|
21
23
|
};
|
|
24
|
+
const aV = map[align.align],
|
|
25
|
+
vaV = map[align.valign];
|
|
26
|
+
aV && (style.justifyContent = aV);
|
|
27
|
+
vaV && (style.alignItems = vaV);
|
|
28
|
+
} else {
|
|
29
|
+
align.align && (style.textAlign = align.align);
|
|
30
|
+
align.valign && (style.verticalAlign = align.valign);
|
|
22
31
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
32
|
+
}
|
|
33
|
+
function buildFlex(style, flex) {
|
|
34
|
+
if (flex) {
|
|
35
|
+
flex.flex && (style.flex = flex.flex);
|
|
36
|
+
flex.flexBasis && (style.flexBasis = flex.flexBasis);
|
|
37
|
+
flex.flexGrow && (style.flexGrow = String(flex.flexGrow));
|
|
38
|
+
flex.flexShrink && (style.flexShrink = String(flex.flexShrink));
|
|
28
39
|
}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
40
|
+
}
|
|
41
|
+
function buildWidth(style, width) {
|
|
42
|
+
if (width) {
|
|
43
|
+
width.width && (style.width = width.width);
|
|
44
|
+
width.minWidth && (style.minWidth = width.minWidth);
|
|
45
|
+
width.maxWidth && (style.maxWidth = width.maxWidth);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
function buildHeight(style, height) {
|
|
49
|
+
if (height) {
|
|
50
|
+
height.height && (style.height = height.height);
|
|
51
|
+
height.minHeight && (style.minHeight = height.minHeight);
|
|
52
|
+
height.maxHeight && (style.maxHeight = height.maxHeight);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
function buildMargin(style, margin) {
|
|
56
|
+
if (margin) {
|
|
57
|
+
margin.margin && (style.margin = margin.margin);
|
|
58
|
+
margin.marginTop && (style.marginTop = margin.marginTop);
|
|
59
|
+
margin.marginRight && (style.marginRight = margin.marginRight);
|
|
60
|
+
margin.marginBottom && (style.marginBottom = margin.marginBottom);
|
|
61
|
+
margin.marginLeft && (style.marginLeft = margin.marginLeft);
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function buildBorder(style, border) {
|
|
65
|
+
if (border) {
|
|
66
|
+
border.borderRadius && (style.borderRadius = border.borderRadius);
|
|
67
|
+
border.border && (style.border = border.border);
|
|
68
|
+
border.borderTop && (style.borderTop = border.borderTop);
|
|
69
|
+
border.borderRight && (style.borderRight = border.borderRight);
|
|
70
|
+
border.borderBottom && (style.borderBottom = border.borderBottom);
|
|
71
|
+
border.borderLeft && (style.borderLeft = border.borderLeft);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function buildPadding(style, padding) {
|
|
75
|
+
if (padding) {
|
|
76
|
+
padding.padding && (style.padding = padding.padding);
|
|
77
|
+
padding.paddingTop && (style.paddingTop = padding.paddingTop);
|
|
78
|
+
padding.paddingRight && (style.paddingRight = padding.paddingRight);
|
|
79
|
+
padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
|
|
80
|
+
padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
function buildTransition(style, transition) {
|
|
84
|
+
if (transition) {
|
|
85
|
+
transition.transition && (style.transition = transition.transition);
|
|
86
|
+
transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
|
|
87
|
+
transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
|
|
88
|
+
transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
|
|
89
|
+
transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function useCSS() {
|
|
94
|
+
function parse(css2) {
|
|
95
|
+
if (snail_core.isStringNotEmpty(css2) == true) {
|
|
96
|
+
return {
|
|
97
|
+
class: [css2]
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
if (snail_core.isArrayNotEmpty(css2) == true) {
|
|
101
|
+
const strs = css2.filter(name => snail_core.isStringNotEmpty(name));
|
|
102
|
+
return strs.length > 0 ? {
|
|
103
|
+
class: strs
|
|
104
|
+
} : {};
|
|
105
|
+
}
|
|
106
|
+
if (css2 instanceof CSSStyleDeclaration || snail_core.isObject(css2) == true) {
|
|
107
|
+
return {
|
|
108
|
+
style: Object.assign(Object.create(null), css2)
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
return Object.create(null);
|
|
112
|
+
}
|
|
113
|
+
function operate(el, type, css2) {
|
|
114
|
+
css2 && snail_core.isArrayNotEmpty(css2.class) && css2.class.forEach(name => type == "add" ? el.classList.add(name) : el.classList.remove(name));
|
|
115
|
+
css2 && css2.style && Object.keys(css2.style).forEach(key => type == "add" ? el.style.setProperty(key, css2.style[key]) : el.style.removeProperty(key));
|
|
116
|
+
}
|
|
117
|
+
function buildStyle(options, isFlex) {
|
|
118
|
+
const style = Object.create(null);
|
|
119
|
+
if (options) {
|
|
120
|
+
buildAlign(style, options, isFlex);
|
|
121
|
+
isFlex && buildFlex(style, options);
|
|
122
|
+
buildWidth(style, options);
|
|
123
|
+
buildHeight(style, options);
|
|
124
|
+
buildMargin(style, options);
|
|
125
|
+
buildBorder(style, options);
|
|
126
|
+
buildPadding(style, options);
|
|
127
|
+
buildTransition(style, options);
|
|
128
|
+
}
|
|
129
|
+
return style;
|
|
33
130
|
}
|
|
34
|
-
return Object.
|
|
131
|
+
return Object.freeze({
|
|
132
|
+
parse,
|
|
133
|
+
operate,
|
|
134
|
+
buildStyle
|
|
135
|
+
});
|
|
35
136
|
}
|
|
137
|
+
const css = useCSS();
|
|
36
138
|
|
|
37
139
|
function useAnimation() {
|
|
38
140
|
const scopes = snail_core.useScopes();
|
|
39
141
|
function transition(el, effect, time) {
|
|
40
142
|
snail_core.throwIfFalse(snail_core.isObject(effect), "transition: effect must be an object.");
|
|
41
143
|
const scope = scopes.add(getAnimationScope(manager, el));
|
|
42
|
-
const fromCss =
|
|
43
|
-
const toCss =
|
|
44
|
-
const endCss =
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
setTimeout(
|
|
144
|
+
const fromCss = css.parse(effect.from);
|
|
145
|
+
const toCss = css.parse(effect.to);
|
|
146
|
+
const endCss = css.parse(effect.end);
|
|
147
|
+
css.operate(el, "clear", toCss);
|
|
148
|
+
css.operate(el, "clear", endCss);
|
|
149
|
+
css.operate(el, "add", fromCss);
|
|
150
|
+
setTimeout(css.operate, 1, el, "add", toCss);
|
|
49
151
|
setTimeout(scope.destroy, time > 0 ? time : 200);
|
|
50
152
|
return scope.onDestroy(function () {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
153
|
+
css.operate(el, "clear", fromCss);
|
|
154
|
+
css.operate(el, "clear", toCss);
|
|
155
|
+
css.operate(el, "add", endCss);
|
|
54
156
|
});
|
|
55
157
|
}
|
|
56
158
|
const manager = snail_core.mountScope({
|
|
@@ -248,102 +350,10 @@
|
|
|
248
350
|
return Object.freeze(manager);
|
|
249
351
|
}
|
|
250
352
|
|
|
251
|
-
function buildAlign(style, align, isFlex) {
|
|
252
|
-
if (isFlex == true) {
|
|
253
|
-
const map = {
|
|
254
|
-
"left": "start",
|
|
255
|
-
"center": "center",
|
|
256
|
-
"right": "end",
|
|
257
|
-
"top": "start",
|
|
258
|
-
"middle": "center",
|
|
259
|
-
"bottom": "end"
|
|
260
|
-
};
|
|
261
|
-
const aV = map[align.align],
|
|
262
|
-
vaV = map[align.valign];
|
|
263
|
-
aV && (style.justifyContent = aV);
|
|
264
|
-
vaV && (style.alignItems = vaV);
|
|
265
|
-
} else {
|
|
266
|
-
align.align && (style.textAlign = align.align);
|
|
267
|
-
align.valign && (style.verticalAlign = align.valign);
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
function buildSize(style, size, styleName, isFlex) {
|
|
271
|
-
if (size) {
|
|
272
|
-
var fixed = size.size;
|
|
273
|
-
if (isFlex && size.flex != void 0) {
|
|
274
|
-
fixed = void 0;
|
|
275
|
-
style.flex = String(size.flex);
|
|
276
|
-
}
|
|
277
|
-
if (fixed != void 0) {
|
|
278
|
-
style[styleName] = fixed;
|
|
279
|
-
} else {
|
|
280
|
-
size.min != void 0 && (style[`min-${styleName}`] = size.min);
|
|
281
|
-
size.max != void 0 && (style[`max-${styleName}`] = size.max);
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
function buildMargin(style, margin) {
|
|
286
|
-
if (margin) {
|
|
287
|
-
margin.margin && (style.margin = margin.margin);
|
|
288
|
-
margin.marginTop && (style.marginTop = margin.marginTop);
|
|
289
|
-
margin.marginRight && (style.marginRight = margin.marginRight);
|
|
290
|
-
margin.marginBottom && (style.marginBottom = margin.marginBottom);
|
|
291
|
-
margin.marginLeft && (style.marginLeft = margin.marginLeft);
|
|
292
|
-
}
|
|
293
|
-
}
|
|
294
|
-
function buildBorder(style, border) {
|
|
295
|
-
if (border) {
|
|
296
|
-
border.borderRadius && (style.borderRadius = border.borderRadius);
|
|
297
|
-
border.border && (style.border = border.border);
|
|
298
|
-
border.borderTop && (style.borderTop = border.borderTop);
|
|
299
|
-
border.borderRight && (style.borderRight = border.borderRight);
|
|
300
|
-
border.borderBottom && (style.borderBottom = border.borderBottom);
|
|
301
|
-
border.borderLeft && (style.borderLeft = border.borderLeft);
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
function buildPadding(style, padding) {
|
|
305
|
-
if (padding) {
|
|
306
|
-
padding.padding && (style.padding = padding.padding);
|
|
307
|
-
padding.paddingTop && (style.paddingTop = padding.paddingTop);
|
|
308
|
-
padding.paddingRight && (style.paddingRight = padding.paddingRight);
|
|
309
|
-
padding.paddingBottom && (style.paddingBottom = padding.paddingBottom);
|
|
310
|
-
padding.paddingLeft && (style.paddingLeft = padding.paddingLeft);
|
|
311
|
-
}
|
|
312
|
-
}
|
|
313
|
-
function buildTransition(style, transition) {
|
|
314
|
-
if (transition) {
|
|
315
|
-
transition.transition && (style.transition = transition.transition);
|
|
316
|
-
transition.transitionProperty && (style.transitionProperty = transition.transitionProperty);
|
|
317
|
-
transition.transitionDuration && (style.transitionDuration = transition.transitionDuration);
|
|
318
|
-
transition.transitionDelay && (style.transitionDelay = transition.transitionDelay);
|
|
319
|
-
transition.transitionTimingFunction && (style.transitionTimingFunction = transition.transitionTimingFunction);
|
|
320
|
-
}
|
|
321
|
-
}
|
|
322
|
-
|
|
323
|
-
function useStyle() {
|
|
324
|
-
function build(options, isFlex) {
|
|
325
|
-
const style2 = Object.create(null);
|
|
326
|
-
if (options) {
|
|
327
|
-
buildAlign(style2, options, isFlex);
|
|
328
|
-
buildSize(style2, options.width, "width", isFlex);
|
|
329
|
-
buildSize(style2, options.height, "height", isFlex);
|
|
330
|
-
buildMargin(style2, options);
|
|
331
|
-
buildBorder(style2, options);
|
|
332
|
-
buildPadding(style2, options);
|
|
333
|
-
buildTransition(style2, options);
|
|
334
|
-
}
|
|
335
|
-
return style2;
|
|
336
|
-
}
|
|
337
|
-
return Object.freeze({
|
|
338
|
-
build
|
|
339
|
-
});
|
|
340
|
-
}
|
|
341
|
-
const style = useStyle();
|
|
342
|
-
|
|
343
353
|
exports.configLink = configLink;
|
|
354
|
+
exports.css = css;
|
|
344
355
|
exports.link = link;
|
|
345
356
|
exports.linkMap = linkMap;
|
|
346
|
-
exports.style = style;
|
|
347
357
|
exports.useAnimation = useAnimation;
|
|
348
358
|
exports.useLink = useLink;
|
|
349
359
|
exports.useObserver = useObserver;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "对视图界面做的一些封装。如样式计算助手方法，常用样式less混入、变量等；dom相关助手类",
|
|
4
4
|
"author": "snail_dev@163.com",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.6",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/snail.view.js",
|
|
9
9
|
"module": "dist/snail.view.js",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"types": "tsc -p ./tsconfig.dts.json --declarationDir ./dist/_types"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"snail.core": ">=2.0.
|
|
17
|
+
"snail.core": ">=2.0.6"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"rollup": ">=4.39.0",
|