@easy-editor/materials-dashboard-number-flip 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,342 +1,183 @@
1
- /**
2
- * Number Flip 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: 'value',
87
- title: '数值',
88
- setter: 'NumberSetter',
89
- extraProps: {
90
- defaultValue: 0,
91
- },
92
- },
93
- {
94
- name: 'decimals',
95
- title: '小数位数',
96
- setter: 'NumberSetter',
97
- extraProps: {
98
- defaultValue: 0,
99
- },
100
- },
101
- {
102
- name: 'separator',
103
- title: '千分位分隔',
104
- setter: 'SwitchSetter',
105
- extraProps: {
106
- defaultValue: true,
107
- },
108
- },
109
- {
110
- name: 'prefix',
111
- title: '前缀',
112
- setter: 'StringSetter',
113
- },
114
- {
115
- name: 'suffix',
116
- title: '后缀',
117
- setter: 'StringSetter',
118
- },
119
- ],
120
- },
121
- {
122
- type: 'group',
123
- title: '趋势',
124
- setter: {
125
- componentName: 'CollapseSetter',
126
- props: {
127
- icon: false,
128
- },
129
- },
130
- items: [
131
- {
132
- name: 'trendEnable',
133
- title: '显示趋势',
134
- setter: 'SwitchSetter',
135
- extraProps: {
136
- defaultValue: false,
137
- },
138
- },
139
- {
140
- name: 'trendValue',
141
- title: '趋势值',
142
- setter: 'NumberSetter',
143
- extraProps: {
144
- defaultValue: 0,
145
- },
146
- },
147
- {
148
- name: 'trendType',
149
- title: '趋势类型',
150
- setter: {
151
- componentName: 'SegmentedSetter',
152
- props: {
153
- options: [
154
- { label: '上升', value: 'up' },
155
- { label: '下降', value: 'down' },
156
- { label: '持平', value: 'flat' },
157
- ],
158
- },
159
- },
160
- extraProps: {
161
- defaultValue: 'up',
162
- },
163
- },
164
- {
165
- name: 'trendSuffix',
166
- title: '趋势后缀',
167
- setter: 'StringSetter',
168
- extraProps: {
169
- defaultValue: '%',
170
- },
171
- },
172
- ],
173
- },
174
- {
175
- type: 'group',
176
- title: '样式',
177
- setter: {
178
- componentName: 'CollapseSetter',
179
- props: {
180
- icon: false,
181
- },
182
- },
183
- items: [
184
- {
185
- name: 'fontSize',
186
- title: '字体大小',
187
- setter: 'NumberSetter',
188
- extraProps: {
189
- defaultValue: 48,
190
- },
191
- },
192
- {
193
- name: 'fontFamily',
194
- title: '字体类型',
195
- setter: {
196
- componentName: 'SelectSetter',
197
- props: {
198
- options: [
199
- { label: '数码字体', value: 'digital' },
200
- { label: '默认字体', value: 'default' },
201
- ],
202
- },
203
- },
204
- extraProps: {
205
- defaultValue: 'digital',
206
- },
207
- },
208
- {
209
- name: 'color',
210
- title: '颜色',
211
- setter: 'ColorSetter',
212
- extraProps: {
213
- defaultValue: '#00d4ff',
214
- },
215
- },
216
- {
217
- name: 'glowIntensity',
218
- title: '发光强度',
219
- setter: {
220
- componentName: 'NumberSetter',
221
- props: {
222
- min: 0,
223
- max: 2,
224
- step: 0.1,
225
- },
226
- },
227
- extraProps: {
228
- defaultValue: 0.5,
229
- },
230
- },
231
- ],
232
- },
233
- ],
234
- },
235
- {
236
- type: 'group',
237
- key: 'data',
238
- title: '数据',
239
- items: [
240
- {
241
- name: 'dataBinding',
242
- title: '数据绑定',
243
- setter: 'DataBindingSetter',
244
- },
245
- ],
246
- },
247
- {
248
- type: 'group',
249
- key: 'advanced',
250
- title: '高级',
251
- items: [
252
- {
253
- name: 'condition',
254
- title: '显隐控制',
255
- setter: 'SwitchSetter',
256
- extraProps: {
257
- defaultValue: true,
258
- supportVariable: true,
259
- },
260
- },
261
- {
262
- type: 'group',
263
- title: '动画',
264
- setter: {
265
- componentName: 'CollapseSetter',
266
- props: {
267
- icon: false,
268
- },
269
- },
270
- items: [
271
- {
272
- name: 'animationEnable',
273
- title: '启用动画',
274
- setter: 'SwitchSetter',
275
- extraProps: {
276
- defaultValue: true,
277
- },
278
- },
279
- {
280
- name: 'animationType',
281
- title: '动画类型',
282
- setter: {
283
- componentName: 'SegmentedSetter',
284
- props: {
285
- options: [
286
- { label: '滚动', value: 'scroll' },
287
- { label: '翻转', value: 'flip' },
288
- { label: '渐变', value: 'fade' },
289
- ],
290
- },
291
- },
292
- extraProps: {
293
- defaultValue: 'scroll',
294
- },
295
- },
296
- {
297
- name: 'animationDuration',
298
- title: '动画时长',
299
- setter: {
300
- componentName: 'SliderSetter',
301
- props: {
302
- min: 0,
303
- max: 3000,
304
- step: 100,
305
- suffix: 'ms',
306
- },
307
- },
308
- extraProps: {
309
- defaultValue: 1000,
310
- },
311
- },
312
- {
313
- name: 'animationEasing',
314
- title: '缓动函数',
315
- setter: {
316
- componentName: 'SelectSetter',
317
- props: {
318
- options: [
319
- { label: '线性', value: 'linear' },
320
- { label: '缓入', value: 'ease-in' },
321
- { label: '缓出', value: 'ease-out' },
322
- { label: '缓入缓出', value: 'ease-in-out' },
323
- ],
324
- },
325
- },
326
- extraProps: {
327
- defaultValue: 'ease-out',
328
- },
329
- },
330
- ],
331
- },
332
- ],
333
- },
334
- ],
335
- },
336
- ],
337
- component: {},
338
- supports: {},
339
- advanced: {},
340
- }
341
-
342
- export default configure
1
+ /**
2
+ * Number Flip 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: 'value',
22
+ title: '数值',
23
+ items: [
24
+ {
25
+ name: 'decimals',
26
+ title: '小数位数',
27
+ setter: {
28
+ componentName: 'NumberSetter',
29
+ props: {
30
+ min: 0,
31
+ max: 10,
32
+ },
33
+ },
34
+ extraProps: {
35
+ defaultValue: 0,
36
+ },
37
+ },
38
+ {
39
+ name: 'separator',
40
+ title: '千分位分隔',
41
+ setter: 'SwitchSetter',
42
+ extraProps: {
43
+ defaultValue: true,
44
+ },
45
+ },
46
+ {
47
+ name: 'prefix',
48
+ title: '前缀',
49
+ setter: 'StringSetter',
50
+ },
51
+ {
52
+ name: 'suffix',
53
+ title: '后缀',
54
+ setter: 'StringSetter',
55
+ },
56
+ ],
57
+ },
58
+ // 趋势 Tab
59
+ {
60
+ type: 'group',
61
+ key: 'trend',
62
+ title: '趋势',
63
+ items: [
64
+ {
65
+ name: 'trendEnable',
66
+ title: '显示趋势',
67
+ setter: 'SwitchSetter',
68
+ extraProps: {
69
+ defaultValue: false,
70
+ },
71
+ },
72
+ {
73
+ name: 'trendValue',
74
+ title: '趋势值',
75
+ setter: 'NumberSetter',
76
+ extraProps: {
77
+ defaultValue: 0,
78
+ },
79
+ },
80
+ {
81
+ name: 'trendType',
82
+ title: '趋势类型',
83
+ setter: {
84
+ componentName: 'SegmentedSetter',
85
+ props: {
86
+ options: [
87
+ { label: '上升', value: 'up' },
88
+ { label: '下降', value: 'down' },
89
+ { label: '持平', value: 'flat' },
90
+ ],
91
+ },
92
+ },
93
+ extraProps: {
94
+ defaultValue: 'up',
95
+ },
96
+ },
97
+ {
98
+ name: 'trendSuffix',
99
+ title: '趋势后缀',
100
+ setter: 'StringSetter',
101
+ extraProps: {
102
+ defaultValue: '%',
103
+ },
104
+ },
105
+ ],
106
+ },
107
+ // 样式 Tab
108
+ {
109
+ type: 'group',
110
+ key: 'style',
111
+ title: '样式',
112
+ items: [
113
+ {
114
+ name: 'fontSize',
115
+ title: '字体大小',
116
+ setter: {
117
+ componentName: 'SliderSetter',
118
+ props: {
119
+ min: 12,
120
+ max: 120,
121
+ step: 2,
122
+ suffix: 'px',
123
+ },
124
+ },
125
+ extraProps: {
126
+ defaultValue: 48,
127
+ },
128
+ },
129
+ {
130
+ name: 'fontFamily',
131
+ title: '字体类型',
132
+ setter: {
133
+ componentName: 'SelectSetter',
134
+ props: {
135
+ options: [
136
+ { label: '数码字体', value: 'digital' },
137
+ { label: '默认字体', value: 'default' },
138
+ ],
139
+ },
140
+ },
141
+ extraProps: {
142
+ defaultValue: 'digital',
143
+ },
144
+ },
145
+ {
146
+ name: 'color',
147
+ title: '颜色',
148
+ setter: 'ColorSetter',
149
+ extraProps: {
150
+ defaultValue: '#00d4ff',
151
+ },
152
+ },
153
+ {
154
+ name: 'glowIntensity',
155
+ title: '发光强度',
156
+ setter: {
157
+ componentName: 'SliderSetter',
158
+ props: {
159
+ min: 0,
160
+ max: 2,
161
+ step: 0.1,
162
+ },
163
+ },
164
+ extraProps: {
165
+ defaultValue: 0.5,
166
+ },
167
+ },
168
+ ],
169
+ },
170
+ ],
171
+ },
172
+ ],
173
+ {
174
+ padding: '6px 16px 12px',
175
+ },
176
+ )
177
+
178
+ /** 数据配置 */
179
+ const dataConfigGroup: FieldConfig = createDataConfigGroup([
180
+ { name: 'value', label: 'value', type: 'number', required: true, description: '数值' },
181
+ ])
182
+
183
+ export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)
package/src/index.tsx CHANGED
@@ -1,7 +1,7 @@
1
- /**
2
- * Number Flip Entry
3
- * 数字翻牌组件入口
4
- */
5
-
6
- export { NumberFlip as component } from './component'
7
- export { default as meta } from './meta'
1
+ /**
2
+ * Number Flip Entry
3
+ * 数字翻牌组件入口
4
+ */
5
+
6
+ export { NumberFlip as component } from './component'
7
+ export { meta } from './meta'
package/src/meta.ts CHANGED
@@ -1,28 +1,26 @@
1
- /**
2
- * Number Flip Meta
3
- * 数字翻牌组件元数据
4
- */
5
-
6
- import type { ComponentMetadata } from '@easy-editor/core'
7
- import { MaterialGroup } from '@easy-editor/materials-shared'
8
- import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
9
- import configure from './configure'
10
- import snippets from './snippets'
11
- import pkg from '../package.json'
12
-
13
- export const meta: ComponentMetadata = {
14
- componentName: COMPONENT_NAME,
15
- title: '数字翻牌',
16
- group: MaterialGroup.DISPLAY,
17
- devMode: 'proCode',
18
- npm: {
19
- package: PACKAGE_NAME,
20
- version: pkg.version,
21
- globalName: COMPONENT_NAME,
22
- componentName: COMPONENT_NAME,
23
- },
24
- snippets,
25
- configure,
26
- }
27
-
28
- export default meta
1
+ /**
2
+ * Number Flip Meta
3
+ * 数字翻牌组件元数据
4
+ */
5
+
6
+ import type { ComponentMetadata } from '@easy-editor/core'
7
+ import { MaterialGroup } from '@easy-editor/materials-shared'
8
+ import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
9
+ import { configure } from './configure'
10
+ import { snippets } from './snippets'
11
+ import pkg from '../package.json'
12
+
13
+ export const meta: ComponentMetadata = {
14
+ componentName: COMPONENT_NAME,
15
+ title: '数字翻牌',
16
+ group: MaterialGroup.DISPLAY,
17
+ devMode: 'proCode',
18
+ npm: {
19
+ package: PACKAGE_NAME,
20
+ version: pkg.version,
21
+ globalName: COMPONENT_NAME,
22
+ componentName: COMPONENT_NAME,
23
+ },
24
+ snippets,
25
+ configure,
26
+ }