@pisell/materials 1.0.130 → 1.0.131

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.
@@ -53,6 +53,30 @@ export default {
53
53
  display: 'block',
54
54
  type: 'group',
55
55
  items: [
56
+ {
57
+ name: 'operateMode',
58
+ title: { label: '关闭按钮项的模式', tip: 'operateMode | 关闭按钮项的模式' },
59
+ propType: {
60
+ type: 'oneOf',
61
+ value: ['default', 'outside'],
62
+ },
63
+ defaultValue: 'default',
64
+ setter: {
65
+ componentName: 'SelectSetter',
66
+ props: {
67
+ options: [
68
+ {
69
+ title: '默认',
70
+ value: 'default',
71
+ },
72
+ {
73
+ title: '外侧',
74
+ value: 'outside',
75
+ },
76
+ ],
77
+ },
78
+ },
79
+ },
56
80
  {
57
81
  name: 'placement',
58
82
  title: { label: '位置', tip: 'placement | 抽屉的显示位置' },
@@ -1,38 +1,127 @@
1
1
  export default [
2
2
  {
3
- title: '侧边抽屉',
4
- screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-1.png',
3
+ title: "侧边抽屉",
4
+ screenshot:
5
+ "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-1.png",
5
6
  schema: {
6
- componentName: 'Drawer',
7
+ componentName: "Drawer",
7
8
  props: {
8
- title: 'Basic Drawer',
9
+ title: "Basic Drawer",
9
10
  open: true,
10
- placement: 'right',
11
+ placement: "right",
11
12
  destroyOnClose: true,
12
13
  },
13
14
  children: [
14
15
  {
15
- componentName: 'Typography.Paragraph',
16
- children: 'Some contents...',
16
+ componentName: "Typography.Paragraph",
17
+ children: "Some contents...",
17
18
  },
18
19
  ],
19
20
  },
20
21
  },
21
22
  {
22
- title: '底部抽屉',
23
- screenshot: 'https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-2.png',
23
+ title: "底部抽屉",
24
+ screenshot:
25
+ "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-2.png",
24
26
  schema: {
25
- componentName: 'Drawer',
27
+ componentName: "Drawer",
26
28
  props: {
27
- title: 'Basic Drawer',
29
+ title: "Basic Drawer",
28
30
  open: true,
29
- placement: 'bottom',
31
+ placement: "bottom",
30
32
  destroyOnClose: true,
31
33
  },
32
34
  children: [
33
35
  {
34
- componentName: 'Typography.Paragraph',
35
- children: 'Some contents...',
36
+ componentName: "Typography.Paragraph",
37
+ children: "Some contents...",
38
+ },
39
+ ],
40
+ },
41
+ },
42
+ {
43
+ title: "抽屉结合标签页",
44
+ screenshot:
45
+ "https://alifd.alicdn.com/fusion-cool/icons/icon-antd/drawer-1.png",
46
+ schema: {
47
+ componentName: "Drawer",
48
+ props: {
49
+ title: "Basic Drawer",
50
+ open: true,
51
+ placement: "right",
52
+ destroyOnClose: true,
53
+ operateMode: "outside",
54
+ mask: false,
55
+ maskClosable: false,
56
+ autoFocus: true,
57
+ keyboard: true,
58
+ closable: false,
59
+ forceRender: false,
60
+ bodyStyle: {
61
+ padding: "0",
62
+ },
63
+ },
64
+ children: [
65
+ {
66
+ componentName: "Tabs",
67
+ props: {
68
+ type: "icon-label",
69
+ items: [
70
+ {
71
+ label: "标签项1",
72
+ key: "tab-item-1",
73
+ icon: {
74
+ type: "JSSlot",
75
+ value: [
76
+ {
77
+ componentName: "Icon",
78
+ props: {
79
+ type: "SmileOutlined",
80
+ size: 20,
81
+ rotate: 0,
82
+ spin: false,
83
+ },
84
+ title: "",
85
+ },
86
+ ],
87
+ },
88
+ children: {
89
+ type: "JSSlot",
90
+ id: "node_oclonzwkqig",
91
+ },
92
+ },
93
+ {
94
+ label: "标签项2",
95
+ key: "tab-item-2",
96
+ icon: {
97
+ type: "JSSlot",
98
+ value: [
99
+ {
100
+ componentName: "Icon",
101
+ props: {
102
+ type: "SmileOutlined",
103
+ size: 20,
104
+ rotate: 0,
105
+ spin: false,
106
+ },
107
+ title: "",
108
+ },
109
+ ],
110
+ },
111
+ children: {
112
+ type: "JSSlot",
113
+ },
114
+ },
115
+ ],
116
+ size: "large",
117
+ centered: false,
118
+ tabPosition: "left",
119
+ keyboard: false,
120
+ hideAdd: false,
121
+ style: {
122
+ height: "100%",
123
+ },
124
+ },
36
125
  },
37
126
  ],
38
127
  },
@@ -1,12 +1,12 @@
1
- import { uuid } from '../_utils/utils';
1
+ import { uuid } from "../_utils/utils";
2
2
 
3
- import snippets from './snippets';
3
+ import snippets from "./snippets";
4
4
 
5
5
  export default {
6
6
  snippets,
7
- componentName: 'Tabs',
8
- title: '标签页',
9
- category: '数据展示',
7
+ componentName: "Tabs",
8
+ title: "标签页",
9
+ category: "数据展示",
10
10
  docUrl: "",
11
11
  screenshot: "",
12
12
  devMode: "proCode",
@@ -20,29 +20,29 @@ export default {
20
20
  },
21
21
  props: [
22
22
  {
23
- name: 'items',
24
- title: '标签项',
23
+ name: "items",
24
+ title: "标签项",
25
25
  setter: {
26
- componentName: 'ArraySetter',
26
+ componentName: "ArraySetter",
27
27
  props: {
28
28
  itemSetter: {
29
- componentName: 'ObjectSetter',
29
+ componentName: "ObjectSetter",
30
30
  props: {
31
31
  config: {
32
32
  items: [
33
33
  {
34
- name: 'key',
35
- title: 'key',
36
- setter: 'StringSetter',
34
+ name: "key",
35
+ title: "key",
36
+ setter: "StringSetter",
37
37
  initialValue: (val) => val || uuid(),
38
- supportVariable: true
38
+ supportVariable: true,
39
39
  },
40
40
  {
41
- name: 'label',
42
- title: '标题',
43
- setter: 'PisellI18nSetter',
44
- initialValue: '标签项',
45
- supportVariable: true
41
+ name: "label",
42
+ title: "标题",
43
+ setter: "PisellI18nSetter",
44
+ initialValue: "标签项",
45
+ supportVariable: true,
46
46
  },
47
47
  // {
48
48
  // name: 'closeable',
@@ -54,49 +54,108 @@ export default {
54
54
  // initialValue: true,
55
55
  // },
56
56
  {
57
- name: 'disabled',
58
- title: '禁用',
59
- setter: 'BoolSetter',
57
+ name: "disabled",
58
+ title: "禁用",
59
+ setter: "BoolSetter",
60
60
  initialValue: false,
61
- supportVariable: true
61
+ supportVariable: true,
62
62
  },
63
63
  {
64
- name: 'forceRender',
65
- title: '隐藏时保留',
66
- propType: 'bool',
67
- setter: 'BoolSetter',
64
+ name: "forceRender",
65
+ title: "隐藏时保留",
66
+ propType: "bool",
67
+ setter: "BoolSetter",
68
68
  initialValue: false,
69
- supportVariable: true
69
+ supportVariable: true,
70
70
  },
71
71
  {
72
- name: 'children',
73
- title: '内容',
72
+ name: "children",
73
+ title: "内容",
74
74
  setter: {
75
- componentName: 'SlotSetter',
75
+ componentName: "SlotSetter",
76
76
  initialValue: {
77
- type: 'JSSlot',
77
+ type: "JSSlot",
78
78
  value: [],
79
79
  },
80
80
  },
81
81
  },
82
+ {
83
+ name: "icon",
84
+ title: {
85
+ label: {
86
+ type: "i18n",
87
+ "en-US": "icon",
88
+ "zh-CN": "图标",
89
+ },
90
+ tip: "icon | Set the icon component of the button",
91
+ },
92
+ propType: "node",
93
+ setter: {
94
+ componentName: "SlotSetter",
95
+ initialValue: {
96
+ type: "JSSlot",
97
+ value: [
98
+ {
99
+ componentName: "Icon",
100
+ props: {
101
+ type: "SmileOutlined",
102
+ size: 20,
103
+ rotate: 0,
104
+ spin: false,
105
+ },
106
+ },
107
+ ],
108
+ },
109
+ },
110
+ condition(target) {
111
+ return (
112
+ target.getProps().getPropValue("type") === "icon-label"
113
+ );
114
+ },
115
+ },
116
+ {
117
+ name: "badge",
118
+ title: { label: "徽标数量", tip: "badge | 徽标数量" },
119
+ propType: { type: "oneOfType", value: ["number"] },
120
+ setter: ["NumberSetter", "VariableSetter"],
121
+ condition(target) {
122
+ return (
123
+ target.getProps().getPropValue("type") === "icon-label"
124
+ );
125
+ },
126
+ },
82
127
  ],
83
128
  },
84
129
  },
85
130
  initialValue: () => {
86
131
  return {
87
132
  key: uuid(),
88
- label: '标签项',
133
+ label: "标签项",
89
134
  disabled: false,
90
135
  forceRender: false,
136
+ icon: {
137
+ type: "JSSlot",
138
+ value: [
139
+ {
140
+ componentName: "Icon",
141
+ props: {
142
+ type: "SmileOutlined",
143
+ size: 20,
144
+ rotate: 0,
145
+ spin: false,
146
+ },
147
+ },
148
+ ],
149
+ },
91
150
  children: {
92
- type: 'JSSlot',
151
+ type: "JSSlot",
93
152
  value: [],
94
153
  },
95
154
  };
96
155
  },
97
156
  },
98
157
  },
99
- }
158
+ },
100
159
  },
101
160
  // {
102
161
  // name: 'tabs',
@@ -233,14 +292,14 @@ export default {
233
292
  // propType: 'node',
234
293
  // },
235
294
  {
236
- name: 'animated',
295
+ name: "animated",
237
296
  title: {
238
- label: '切换动画',
239
- tip: '是否使用动画切换Tabs',
297
+ label: "切换动画",
298
+ tip: "是否使用动画切换Tabs",
240
299
  },
241
- propType: 'bool',
242
- setter: 'BoolSetter',
243
- supportVariable: true
300
+ propType: "bool",
301
+ setter: "BoolSetter",
302
+ supportVariable: true,
244
303
  },
245
304
  // {
246
305
  // name: 'renderTabBar',
@@ -248,14 +307,14 @@ export default {
248
307
  // propType: 'func',
249
308
  // },
250
309
  {
251
- name: 'defaultActiveKey',
310
+ name: "defaultActiveKey",
252
311
  title: {
253
- label: '初始选中',
254
- tip: '初始化选中面板的key,如果没有设置activeKey',
312
+ label: "初始选中",
313
+ tip: "初始化选中面板的key,如果没有设置activeKey",
255
314
  },
256
- propType: 'string',
257
- setter: 'StringSetter',
258
- supportVariable: true
315
+ propType: "string",
316
+ setter: "StringSetter",
317
+ supportVariable: true,
259
318
  },
260
319
  // {
261
320
  // name: 'activeKey',
@@ -263,110 +322,145 @@ export default {
263
322
  // propType: 'string',
264
323
  // },
265
324
  {
266
- name: 'hideAdd',
325
+ name: "hideAdd",
267
326
  title: {
268
- label: '隐藏加号',
327
+ label: "隐藏加号",
269
328
  tip: '是否隐藏加号图标,在`type="editable-card"`时有效',
270
329
  },
271
330
  condition(target) {
272
- return target.getProps().getPropValue('type') === 'editable-card';
331
+ return target.getProps().getPropValue("type") === "editable-card";
273
332
  },
274
- propType: 'bool',
275
- setter: 'BoolSetter',
333
+ propType: "bool",
334
+ setter: "BoolSetter",
276
335
  defaultValue: false,
277
- supportVariable: true
336
+ supportVariable: true,
278
337
  },
279
338
  {
280
- name: 'size',
339
+ name: "size",
281
340
  title: {
282
- label: '尺寸',
283
- tip: '大小,提供 `large` `default` 和 `small` 三种大小',
341
+ label: "尺寸",
342
+ tip: "大小,提供 `large` `default` 和 `small` 三种大小",
284
343
  },
285
344
  propType: {
286
- type: 'oneOf',
287
- value: ['large', 'default', 'small'],
345
+ type: "oneOf",
346
+ value: ["large", "default", "small"],
347
+ },
348
+ defaultValue: "default",
349
+ condition(target) {
350
+ return (
351
+ target.getProps().getPropValue("type") !== "icon-label"
352
+ );
288
353
  },
289
- defaultValue: 'default',
290
354
  },
291
355
  {
292
- name: 'centered',
293
- title: { label: '标签居中', tip: '标签居中展示' },
294
- propType: 'bool',
356
+ name: "centered",
357
+ title: { label: "标签居中", tip: "标签居中展示" },
358
+ propType: "bool",
295
359
  defaultValue: false,
296
- setter: 'BoolSetter',
297
- supportVariable: true
360
+ setter: "BoolSetter",
361
+ supportVariable: true,
362
+ condition(target) {
363
+ return (
364
+ target.getProps().getPropValue("type") !== "icon-label"
365
+ );
366
+ },
298
367
  },
299
368
  {
300
- name: 'tabBarExtraContent',
301
- title: { label: '额外元素', tip: 'tab bar上额外的元素' },
302
- propType: 'node',
369
+ name: "tabBarExtraContent",
370
+ title: { label: "额外元素", tip: "tab bar上额外的元素" },
371
+ propType: "node",
303
372
  },
304
373
  {
305
- name: 'tabBarGutter',
306
- title: { label: '标签间隙', tip: 'tabs之间的间隙' },
307
- propType: 'number',
308
- setter: 'NumberSetter',
309
- supportVariable: true
374
+ name: "tabBarGutter",
375
+ title: { label: "标签间隙", tip: "tabs之间的间隙" },
376
+ propType: "number",
377
+ setter: "NumberSetter",
378
+ supportVariable: true,
310
379
  },
311
- // {
312
- // name: 'tabBarStyle',
313
- // title: { label: 'tab bar的样式对象', tip: 'tab bar的样式对象' },
314
- // propType: 'object',
315
- // },
316
380
  {
317
- name: 'tabPosition',
381
+ name: "tabBarStyle",
382
+ title: { label: "tab bar的样式对象", tip: "tab bar的样式对象" },
383
+ type: "group",
384
+ extraProps: {
385
+ display: "entry",
386
+ },
387
+ items: [
388
+ {
389
+ name: "tabBarStyle",
390
+ title: {
391
+ label: "样式设置",
392
+ tip: "tabBarStyle | 可用于设置 Drawer 包裹内容部分的样式",
393
+ },
394
+ setter: "StyleSetter",
395
+ extraProps: {
396
+ display: "block",
397
+ },
398
+ },
399
+ ],
400
+ },
401
+ {
402
+ name: "tabPosition",
318
403
  title: {
319
- label: '页签位置',
320
- tip: '页签位置',
404
+ label: "页签位置",
405
+ tip: "页签位置",
321
406
  },
322
407
  propType: {
323
- type: 'oneOf',
324
- value: ['top', 'right', 'bottom', 'left'],
408
+ type: "oneOf",
409
+ value: ["top", "right", "bottom", "left"],
325
410
  },
326
- defaultValue: 'top',
411
+ defaultValue: "top",
327
412
  },
328
413
  {
329
- name: 'type',
414
+ name: "type",
330
415
  title: {
331
- label: '页签样式',
332
- tip: '页签的基本样式,可选`line`、`card`、`editable-card`类型',
416
+ label: "页签样式",
417
+ tip: "页签的基本样式,可选`line`、`card`、`editable-card` `icon-label`类型",
333
418
  },
334
419
  propType: {
335
- type: 'oneOf',
336
- value: ['line', 'card', 'editable-card'],
420
+ type: "oneOf",
421
+ value: ["line", "card", "editable-card", "icon-label"],
422
+ },
423
+ defaultValue: "line",
424
+ },
425
+ {
426
+ name: "sidebarWidth",
427
+ title: { label: "侧栏宽度", tip: "sidebarWidth | 侧栏宽度" },
428
+ propType: { type: "oneOfType", value: ["string", "number"] },
429
+ setter: ["NumberSetter", "StringSetter", "VariableSetter"],
430
+ condition(target) {
431
+ return target.getProps().getPropValue("type") === "icon-label";
337
432
  },
338
- defaultValue: 'line',
339
433
  },
340
434
  {
341
- name: 'onChange',
342
- title: { label: '切换面板的回调', tip: '切换面板的回调' },
343
- propType: 'func',
435
+ name: "onChange",
436
+ title: { label: "切换面板的回调", tip: "切换面板的回调" },
437
+ propType: "func",
344
438
  },
345
439
  {
346
- name: 'onEdit',
440
+ name: "onEdit",
347
441
  title: {
348
- label: '新增删除回调',
442
+ label: "新增删除回调",
349
443
  tip: '新增和删除页签的回调,在`type="editable-card"`时有效',
350
444
  },
351
445
  condition(target) {
352
- return target.getProps().getPropValue('type') === 'editable-card';
446
+ return target.getProps().getPropValue("type") === "editable-card";
353
447
  },
354
- propType: 'func',
448
+ propType: "func",
355
449
  },
356
450
  {
357
- name: 'onTabClick',
358
- title: { label: 'tab点击回调', tip: 'tab被点击的回调' },
359
- propType: 'func',
451
+ name: "onTabClick",
452
+ title: { label: "tab点击回调", tip: "tab被点击的回调" },
453
+ propType: "func",
360
454
  },
361
455
  {
362
- name: 'onTabScroll',
363
- title: { label: 'tab滚动触发', tip: 'tab滚动时触发' },
364
- propType: 'func',
456
+ name: "onTabScroll",
457
+ title: { label: "tab滚动触发", tip: "tab滚动时触发" },
458
+ propType: "func",
365
459
  },
366
460
  {
367
- name: 'keyboard',
368
- title: { label: '键盘切换', tip: '开启键盘切换功能' },
369
- propType: 'bool',
461
+ name: "keyboard",
462
+ title: { label: "键盘切换", tip: "开启键盘切换功能" },
463
+ propType: "bool",
370
464
  defaultValue: true,
371
465
  },
372
466
  ],
@@ -378,22 +472,22 @@ export default {
378
472
  style: true,
379
473
  events: [
380
474
  {
381
- name: 'onChange',
475
+ name: "onChange",
382
476
  template:
383
477
  "onChange(activeKey,${extParams}){\n// 切换面板的回调\nconsole.log('onChange',activeKey);}",
384
478
  },
385
479
  {
386
- name: 'onEdit',
480
+ name: "onEdit",
387
481
  template:
388
482
  "onEdit(targetKey,action,${extParams}){\n// 新增和删除页签的回调\nconsole.log('onEdit',targetKey,action);}",
389
483
  },
390
484
  {
391
- name: 'onTabClick',
485
+ name: "onTabClick",
392
486
  template:
393
487
  "onTabClick(key,event,${extParams}){\n// tab 被点击的回调\nconsole.log('onTabClick',key,event);}",
394
488
  },
395
489
  {
396
- name: 'onTabScroll',
490
+ name: "onTabScroll",
397
491
  template:
398
492
  "onTabScroll({direction},${extParams}){\n// tab 滚动时触\nconsole.log('onTabScroll',direction);}",
399
493
  },