@easy-editor/materials-dashboard-scroll-list 0.0.2 → 0.0.4

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/src/configure.ts CHANGED
@@ -1,439 +1,189 @@
1
- /**
2
- * Scroll List Configure
3
- * 滚动列表组件配置
4
- */
5
-
6
- import type { Configure } from '@easy-editor/core'
7
-
8
- export const configure: Configure = {
9
- props: [
10
- {
11
- type: 'group',
12
- title: '属性',
13
- setter: 'TabSetter',
14
- items: [
15
- {
16
- type: 'group',
17
- key: 'config',
18
- title: '配置',
19
- setter: {
20
- componentName: 'CollapseSetter',
21
- props: {
22
- icon: false,
23
- },
24
- },
25
- items: [
26
- // 基础配置
27
- {
28
- name: 'id',
29
- title: 'ID',
30
- setter: 'NodeIdSetter',
31
- extraProps: {
32
- // @ts-expect-error label is not a valid extra prop
33
- label: false,
34
- },
35
- },
36
- {
37
- name: 'title',
38
- title: '标题',
39
- setter: 'StringSetter',
40
- extraProps: {
41
- getValue(target) {
42
- return target.getExtraPropValue('title')
43
- },
44
- setValue(target, value) {
45
- target.setExtraPropValue('title', value)
46
- },
47
- },
48
- },
49
- {
50
- type: 'group',
51
- title: '基础属性',
52
- setter: {
53
- componentName: 'CollapseSetter',
54
- props: {
55
- icon: false,
56
- },
57
- },
58
- items: [
59
- {
60
- name: 'rect',
61
- title: '位置尺寸',
62
- setter: 'RectSetter',
63
- extraProps: {
64
- getValue(target) {
65
- return target.getExtraPropValue('$dashboard.rect')
66
- },
67
- setValue(target, value) {
68
- target.setExtraPropValue('$dashboard.rect', value)
69
- },
70
- },
71
- },
72
- ],
73
- },
74
- // 组件配置
75
- {
76
- type: 'group',
77
- title: '数据',
78
- setter: {
79
- componentName: 'CollapseSetter',
80
- props: {
81
- icon: false,
82
- },
83
- },
84
- items: [
85
- {
86
- name: 'data',
87
- title: '列表数据',
88
- setter: 'JsonSetter',
89
- },
90
- {
91
- name: 'maxItems',
92
- title: '最大显示数',
93
- setter: {
94
- componentName: 'NumberSetter',
95
- props: {
96
- min: 1,
97
- max: 20,
98
- },
99
- },
100
- extraProps: {
101
- defaultValue: 5,
102
- },
103
- },
104
- ],
105
- },
106
- {
107
- type: 'group',
108
- title: '显示',
109
- setter: {
110
- componentName: 'CollapseSetter',
111
- props: {
112
- icon: false,
113
- },
114
- },
115
- items: [
116
- {
117
- name: 'showRank',
118
- title: '显示排名',
119
- setter: 'SwitchSetter',
120
- extraProps: {
121
- defaultValue: true,
122
- },
123
- },
124
- {
125
- name: 'showMedal',
126
- title: '显示奖牌',
127
- setter: 'SwitchSetter',
128
- extraProps: {
129
- defaultValue: true,
130
- },
131
- },
132
- {
133
- name: 'progressBarEnable',
134
- title: '显示进度条',
135
- setter: 'SwitchSetter',
136
- extraProps: {
137
- defaultValue: true,
138
- },
139
- },
140
- {
141
- name: 'progressBarGradient',
142
- title: '渐变效果',
143
- setter: 'SwitchSetter',
144
- extraProps: {
145
- defaultValue: true,
146
- },
147
- },
148
- {
149
- name: 'glowEnable',
150
- title: '发光效果',
151
- setter: 'SwitchSetter',
152
- extraProps: {
153
- defaultValue: false,
154
- },
155
- },
156
- ],
157
- },
158
- {
159
- type: 'group',
160
- title: '数值格式',
161
- setter: {
162
- componentName: 'CollapseSetter',
163
- props: {
164
- icon: false,
165
- },
166
- },
167
- items: [
168
- {
169
- name: 'valueFormat',
170
- title: '格式类型',
171
- setter: {
172
- componentName: 'SelectSetter',
173
- props: {
174
- options: [
175
- { label: '数字', value: 'number' },
176
- { label: '货币', value: 'currency' },
177
- { label: '百分比', value: 'percent' },
178
- ],
179
- },
180
- },
181
- extraProps: {
182
- defaultValue: 'number',
183
- },
184
- },
185
- {
186
- name: 'valuePrefix',
187
- title: '数值前缀',
188
- setter: 'StringSetter',
189
- extraProps: {
190
- defaultValue: '',
191
- },
192
- },
193
- {
194
- name: 'valueSuffix',
195
- title: '数值后缀',
196
- setter: 'StringSetter',
197
- extraProps: {
198
- defaultValue: '',
199
- },
200
- },
201
- ],
202
- },
203
- {
204
- type: 'group',
205
- title: '颜色',
206
- setter: {
207
- componentName: 'CollapseSetter',
208
- props: {
209
- icon: false,
210
- },
211
- },
212
- items: [
213
- {
214
- name: 'progressBarColors',
215
- title: '进度条颜色',
216
- setter: 'ColorSetter',
217
- extraProps: {
218
- defaultValue: ['#00d4ff', '#9b59b6'],
219
- },
220
- },
221
- {
222
- name: 'nameColor',
223
- title: '名称颜色',
224
- setter: 'ColorSetter',
225
- extraProps: {
226
- defaultValue: '#e6e6e6',
227
- },
228
- },
229
- {
230
- name: 'valueColor',
231
- title: '数值颜色',
232
- setter: 'ColorSetter',
233
- extraProps: {
234
- defaultValue: '#00d4ff',
235
- },
236
- },
237
- {
238
- name: 'backgroundColor',
239
- title: '背景颜色',
240
- setter: 'ColorSetter',
241
- extraProps: {
242
- defaultValue: 'rgba(10, 10, 26, 0.95)',
243
- },
244
- },
245
- {
246
- name: 'borderColor',
247
- title: '边框颜色',
248
- setter: 'ColorSetter',
249
- extraProps: {
250
- defaultValue: 'rgba(26, 26, 62, 0.8)',
251
- },
252
- },
253
- {
254
- name: 'itemBackgroundColor',
255
- title: '行背景颜色',
256
- setter: 'ColorSetter',
257
- extraProps: {
258
- defaultValue: 'rgba(15, 15, 42, 0.9)',
259
- },
260
- },
261
- {
262
- name: 'itemBorderColor',
263
- title: '行边框颜色',
264
- setter: 'ColorSetter',
265
- extraProps: {
266
- defaultValue: 'rgba(26, 26, 62, 0.6)',
267
- },
268
- },
269
- ],
270
- },
271
- ],
272
- },
273
- {
274
- type: 'group',
275
- key: 'data',
276
- title: '数据',
277
- items: [
278
- {
279
- name: 'dataBinding',
280
- title: '数据绑定',
281
- setter: 'DataBindingSetter',
282
- },
283
- ],
284
- },
285
- {
286
- type: 'group',
287
- key: 'advanced',
288
- title: '高级',
289
- items: [
290
- {
291
- name: 'condition',
292
- title: '显隐控制',
293
- setter: 'SwitchSetter',
294
- extraProps: {
295
- defaultValue: true,
296
- supportVariable: true,
297
- },
298
- },
299
- {
300
- type: 'group',
301
- title: '滚动配置',
302
- setter: {
303
- componentName: 'CollapseSetter',
304
- props: {
305
- icon: false,
306
- },
307
- },
308
- items: [
309
- {
310
- name: 'scrollEnable',
311
- title: '启用滚动',
312
- setter: 'SwitchSetter',
313
- extraProps: {
314
- defaultValue: true,
315
- },
316
- },
317
- {
318
- name: 'scrollDirection',
319
- title: '滚动方向',
320
- setter: {
321
- componentName: 'SegmentedSetter',
322
- props: {
323
- options: [
324
- { label: '向上', value: 'up' },
325
- { label: '向下', value: 'down' },
326
- ],
327
- },
328
- },
329
- extraProps: {
330
- defaultValue: 'up',
331
- },
332
- },
333
- {
334
- name: 'scrollSpeed',
335
- title: '滚动速度',
336
- setter: {
337
- componentName: 'SliderSetter',
338
- props: {
339
- min: 1,
340
- max: 10,
341
- step: 1,
342
- suffix: 'x',
343
- },
344
- },
345
- extraProps: {
346
- defaultValue: 3,
347
- },
348
- },
349
- {
350
- name: 'hoverPause',
351
- title: '悬停暂停',
352
- setter: 'SwitchSetter',
353
- extraProps: {
354
- defaultValue: true,
355
- },
356
- },
357
- {
358
- name: 'scrollInterval',
359
- title: '滚动间隔',
360
- setter: {
361
- componentName: 'SliderSetter',
362
- props: {
363
- min: 1000,
364
- max: 10_000,
365
- step: 500,
366
- suffix: 'ms',
367
- },
368
- },
369
- extraProps: {
370
- defaultValue: 3000,
371
- },
372
- },
373
- ],
374
- },
375
- {
376
- type: 'group',
377
- title: '动画',
378
- setter: {
379
- componentName: 'CollapseSetter',
380
- props: {
381
- icon: false,
382
- },
383
- },
384
- items: [
385
- {
386
- name: 'animationEnable',
387
- title: '启用动画',
388
- setter: 'SwitchSetter',
389
- extraProps: {
390
- defaultValue: true,
391
- },
392
- },
393
- {
394
- name: 'animationDuration',
395
- title: '动画时长',
396
- setter: {
397
- componentName: 'SliderSetter',
398
- props: {
399
- min: 0,
400
- max: 2000,
401
- step: 100,
402
- suffix: 'ms',
403
- },
404
- },
405
- extraProps: {
406
- defaultValue: 500,
407
- },
408
- },
409
- {
410
- name: 'animationEasing',
411
- title: '缓动函数',
412
- setter: {
413
- componentName: 'SelectSetter',
414
- props: {
415
- options: [
416
- { label: '线性', value: 'linear' },
417
- { label: '缓入', value: 'ease-in' },
418
- { label: '缓出', value: 'ease-out' },
419
- { label: '缓入缓出', value: 'ease-in-out' },
420
- ],
421
- },
422
- },
423
- extraProps: {
424
- defaultValue: 'ease-out',
425
- },
426
- },
427
- ],
428
- },
429
- ],
430
- },
431
- ],
432
- },
433
- ],
434
- component: {},
435
- supports: {},
436
- advanced: {},
437
- }
438
-
439
- export default configure
1
+ /**
2
+ * Scroll List Configure
3
+ * 滚动列表组件配置
4
+ */
5
+
6
+ import type { FieldConfig } from '@easy-editor/core'
7
+ import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
8
+
9
+ /** 组件配置 - 滚动列表独有 */
10
+ const componentConfigGroup: FieldConfig = createCollapseGroup(
11
+ '组件配置',
12
+ [
13
+ {
14
+ type: 'group',
15
+ title: '组件配置',
16
+ setter: 'SubTabSetter',
17
+ items: [
18
+ // 显示 Tab
19
+ {
20
+ type: 'group',
21
+ key: 'display',
22
+ title: '显示',
23
+ items: [
24
+ {
25
+ name: 'maxItems',
26
+ title: '最大显示数',
27
+ setter: {
28
+ componentName: 'NumberSetter',
29
+ props: {
30
+ min: 1,
31
+ max: 20,
32
+ },
33
+ },
34
+ extraProps: {
35
+ defaultValue: 5,
36
+ },
37
+ },
38
+ {
39
+ name: 'showRank',
40
+ title: '显示排名',
41
+ setter: 'SwitchSetter',
42
+ extraProps: {
43
+ defaultValue: true,
44
+ },
45
+ },
46
+ {
47
+ name: 'showMedal',
48
+ title: '显示奖牌',
49
+ setter: 'SwitchSetter',
50
+ extraProps: {
51
+ defaultValue: true,
52
+ },
53
+ },
54
+ {
55
+ name: 'progressBarEnable',
56
+ title: '显示进度条',
57
+ setter: 'SwitchSetter',
58
+ extraProps: {
59
+ defaultValue: true,
60
+ },
61
+ },
62
+ {
63
+ name: 'progressBarGradient',
64
+ title: '渐变效果',
65
+ setter: 'SwitchSetter',
66
+ extraProps: {
67
+ defaultValue: true,
68
+ },
69
+ },
70
+ {
71
+ name: 'glowEnable',
72
+ title: '发光效果',
73
+ setter: 'SwitchSetter',
74
+ extraProps: {
75
+ defaultValue: false,
76
+ },
77
+ },
78
+ ],
79
+ },
80
+ // 数值格式 Tab
81
+ {
82
+ type: 'group',
83
+ key: 'format',
84
+ title: '格式',
85
+ items: [
86
+ {
87
+ name: 'valueFormat',
88
+ title: '格式类型',
89
+ setter: {
90
+ componentName: 'SelectSetter',
91
+ props: {
92
+ options: [
93
+ { label: '数字', value: 'number' },
94
+ { label: '货币', value: 'currency' },
95
+ { label: '百分比', value: 'percent' },
96
+ ],
97
+ },
98
+ },
99
+ extraProps: {
100
+ defaultValue: 'number',
101
+ },
102
+ },
103
+ {
104
+ name: 'valuePrefix',
105
+ title: '数值前缀',
106
+ setter: 'StringSetter',
107
+ extraProps: {
108
+ defaultValue: '',
109
+ },
110
+ },
111
+ {
112
+ name: 'valueSuffix',
113
+ title: '数值后缀',
114
+ setter: 'StringSetter',
115
+ extraProps: {
116
+ defaultValue: '',
117
+ },
118
+ },
119
+ ],
120
+ },
121
+ // 颜色 Tab
122
+ {
123
+ type: 'group',
124
+ key: 'colors',
125
+ title: '颜色',
126
+ items: [
127
+ {
128
+ name: 'progressBarColors',
129
+ title: '进度条颜色',
130
+ setter: {
131
+ componentName: 'ArraySetter',
132
+ props: {
133
+ itemSetter: 'ColorSetter',
134
+ },
135
+ },
136
+ extraProps: {
137
+ defaultValue: ['#00d4ff', '#9b59b6'],
138
+ },
139
+ },
140
+ {
141
+ name: 'nameColor',
142
+ title: '名称颜色',
143
+ setter: 'ColorSetter',
144
+ extraProps: {
145
+ defaultValue: '#e6e6e6',
146
+ },
147
+ },
148
+ {
149
+ name: 'valueColor',
150
+ title: '数值颜色',
151
+ setter: 'ColorSetter',
152
+ extraProps: {
153
+ defaultValue: '#00d4ff',
154
+ },
155
+ },
156
+ {
157
+ name: 'backgroundColor',
158
+ title: '背景颜色',
159
+ setter: 'ColorSetter',
160
+ extraProps: {
161
+ defaultValue: 'rgba(10, 10, 26, 0.95)',
162
+ },
163
+ },
164
+ {
165
+ name: 'itemBackgroundColor',
166
+ title: '行背景颜色',
167
+ setter: 'ColorSetter',
168
+ extraProps: {
169
+ defaultValue: 'rgba(15, 15, 42, 0.9)',
170
+ },
171
+ },
172
+ ],
173
+ },
174
+ ],
175
+ },
176
+ ],
177
+ {
178
+ padding: '6px 16px 12px',
179
+ },
180
+ )
181
+
182
+ /** 数据配置 */
183
+ const dataConfigGroup: FieldConfig = createDataConfigGroup([
184
+ { name: 'rank', label: 'rank', type: 'number', required: true, description: '排名' },
185
+ { name: 'name', label: 'name', type: 'string', required: true, description: '名称' },
186
+ { name: 'value', label: 'value', type: 'number', required: true, description: '数值' },
187
+ ])
188
+
189
+ export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)
package/src/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * Scroll List Entry
3
- * 滚动列表组件入口
4
- */
5
-
6
- export { ScrollList as component } from './component'
7
- export { default as meta } from './meta'
1
+ /**
2
+ * Scroll List Entry
3
+ * 滚动列表组件入口
4
+ */
5
+
6
+ export { ScrollList as component } from './component'
7
+ export { meta } from './meta'