@pisell/materials 3.3.82 → 3.3.84

package/lowcode/pisell-multiple-select/meta.ts

@@ -0,0 +1,422 @@
+import snippets from './snippets';
+
+export default {
+  snippets,
+  componentName: 'PisellMultipleSelect',
+  title: '多选下拉',
+  category: '表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'PisellMultipleSelect',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    props: [
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Basic',
+            'zh-CN': '基础配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'value',
+            title: {
+              label: '当前值',
+              tip: 'value | 当前选中值数组（受控模式）',
+            },
+            propType: 'object',
+            setter: ['JsonSetter', 'VariableSetter'],
+          },
+          {
+            name: 'defaultValue',
+            title: {
+              label: '默认值',
+              tip: 'defaultValue | 默认选中值数组（非受控模式）',
+            },
+            propType: 'object',
+            setter: ['JsonSetter', 'VariableSetter'],
+          },
+          {
+            name: 'options',
+            title: {
+              label: '选项列表',
+              tip: 'options | 下拉选项列表（必填）',
+            },
+            propType: 'object',
+            setter: [
+              {
+                componentName: 'ArraySetter',
+                props: {
+                  itemSetter: {
+                    componentName: 'ObjectSetter',
+                    props: {
+                      config: {
+                        items: [
+                          {
+                            name: 'value',
+                            title: '值',
+                            setter: ['StringSetter', 'NumberSetter'],
+                            isRequired: true,
+                          },
+                          {
+                            name: 'label',
+                            title: '标签',
+                            setter: ['PisellI18nSetter', 'StringSetter'],
+                            isRequired: true,
+                          },
+                          {
+                            name: 'disabled',
+                            title: '禁用',
+                            setter: 'BoolSetter',
+                          },
+                          {
+                            name: 'color',
+                            title: '标签颜色',
+                            setter: 'ColorSetter',
+                          },
+                        ],
+                      },
+                    },
+                  },
+                },
+              },
+              'JsonSetter',
+              'VariableSetter',
+            ],
+            isRequired: true,
+          },
+          {
+            name: 'placeholder',
+            title: {
+              label: '占位文本',
+              tip: 'placeholder | 输入框占位文本',
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+            defaultValue: '请选择',
+          },
+          {
+            name: 'disabled',
+            title: {
+              label: '是否禁用',
+              tip: 'disabled | 是否禁用状态',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'readOnly',
+            title: {
+              label: '是否只读',
+              tip: 'readOnly | 是否只读状态',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Multiple',
+            'zh-CN': '多选配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'maxTagCount',
+            title: {
+              label: '显示标签数',
+              tip: 'maxTagCount | 最多显示的标签数量，超出部分显示 +N',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+            defaultValue: 3,
+          },
+          {
+            name: 'showTooltipOnOverflow',
+            title: {
+              label: '显示提示',
+              tip: 'showTooltipOnOverflow | 超出标签hover时是否显示tooltip',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: true,
+          },
+          {
+            name: 'maxCount',
+            title: {
+              label: '最大可选数',
+              tip: 'maxCount | 最大可选数量，达到上限后无法继续选择',
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter'],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Interaction',
+            'zh-CN': '交互配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'showSearch',
+            title: {
+              label: '显示搜索',
+              tip: 'showSearch | 是否显示搜索框',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'allowClear',
+            title: {
+              label: '显示清空',
+              tip: 'allowClear | 是否显示清空按钮',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'size',
+            title: {
+              label: '尺寸',
+              tip: 'size | 组件尺寸',
+            },
+            propType: { type: 'oneOf', value: ['small', 'medium', 'large'] },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '小',
+                      value: 'small',
+                    },
+                    {
+                      title: '中',
+                      value: 'medium',
+                    },
+                    {
+                      title: '大',
+                      value: 'large',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+            defaultValue: 'medium',
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Form',
+            'zh-CN': '表单配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'label',
+            title: {
+              label: '标签文本',
+              tip: 'label | 表单项标签',
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'helperText',
+            title: {
+              label: '辅助文本',
+              tip: 'helperText | 辅助提示文本',
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+          },
+          {
+            name: 'required',
+            title: {
+              label: '是否必填',
+              tip: 'required | 是否为必填项',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'error',
+            title: {
+              label: '错误状态',
+              tip: 'error | 是否显示错误状态',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'errorText',
+            title: {
+              label: '错误文本',
+              tip: 'errorText | 错误提示文本',
+            },
+            propType: 'string',
+            setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Filter',
+            'zh-CN': '筛选配置',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'filterable',
+            title: {
+              label: '启用过滤',
+              tip: 'filterable | 是否启用过滤功能',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'sortable',
+            title: {
+              label: '启用排序',
+              tip: 'sortable | 是否启用排序功能',
+            },
+            propType: 'bool',
+            setter: ['BoolSetter', 'VariableSetter'],
+            defaultValue: false,
+          },
+          {
+            name: 'sortDirection',
+            title: {
+              label: '排序方向',
+              tip: 'sortDirection | 排序方向',
+            },
+            propType: { type: 'oneOf', value: ['asc', 'desc'] },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '升序',
+                      value: 'asc',
+                    },
+                    {
+                      title: '降序',
+                      value: 'desc',
+                    },
+                  ],
+                },
+              },
+              'VariableSetter',
+            ],
+          },
+        ],
+      },
+      {
+        title: {
+          label: {
+            type: 'i18n',
+            'en-US': 'Style',
+            'zh-CN': '样式',
+          },
+        },
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'className',
+            title: {
+              label: '样式类名',
+              tip: 'className | 自定义样式类名',
+            },
+            propType: 'string',
+            setter: 'StringSetter',
+          },
+          {
+            name: 'style',
+            title: {
+              label: '自定义样式',
+              tip: 'style | 自定义样式对象',
+            },
+            propType: 'object',
+            setter: 'StyleSetter',
+          },
+        ],
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(values, options, ${extParams}){\n// 值变化时的回调\nconsole.log('onChange', values, options);}",
+        },
+        {
+          name: 'onDeselect',
+          template:
+            "onDeselect(value, option, ${extParams}){\n// 取消选中回调\nconsole.log('onDeselect', value, option);}",
+        },
+        {
+          name: 'onSearch',
+          template: "onSearch(keyword, ${extParams}){\n// 搜索回调\nconsole.log('onSearch', keyword);}",
+        },
+        {
+          name: 'onFocus',
+          template: "onFocus(event, ${extParams}){\n// 聚焦回调\nconsole.log('onFocus', event);}",
+        },
+        {
+          name: 'onBlur',
+          template: "onBlur(event, ${extParams}){\n// 失焦回调\nconsole.log('onBlur', event);}",
+        },
+        {
+          name: 'onDropdownVisibleChange',
+          template:
+            "onDropdownVisibleChange(visible, ${extParams}){\n// 下拉框显隐回调\nconsole.log('onDropdownVisibleChange', visible);}",
+        },
+      ],
+    },
+    component: {},
+  },
+};

package/lowcode/pisell-multiple-select/snippets.ts

@@ -0,0 +1,111 @@
+export default [
+  {
+    title: '多选下拉（基础）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        placeholder: '请选择',
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+          { value: 'option3', label: '选项3' },
+          { value: 'option4', label: '选项4' },
+        ],
+      },
+    },
+  },
+  {
+    title: '多选下拉（带标签）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        label: '选择项',
+        placeholder: '请选择',
+        required: true,
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+          { value: 'option3', label: '选项3' },
+        ],
+      },
+    },
+  },
+  {
+    title: '多选下拉（标签聚合）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        label: '选择项',
+        placeholder: '请选择',
+        maxTagCount: 2,
+        showTooltipOnOverflow: true,
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+          { value: 'option3', label: '选项3' },
+          { value: 'option4', label: '选项4' },
+          { value: 'option5', label: '选项5' },
+        ],
+      },
+    },
+  },
+  {
+    title: '多选下拉（数量限制）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        label: '选择项（最多3项）',
+        placeholder: '请选择',
+        maxCount: 3,
+        helperText: '最多可选择3项',
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+          { value: 'option3', label: '选项3' },
+          { value: 'option4', label: '选项4' },
+        ],
+      },
+    },
+  },
+  {
+    title: '多选下拉（带搜索）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        label: '选择项',
+        placeholder: '搜索...',
+        showSearch: true,
+        allowClear: true,
+        maxTagCount: 2,
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+          { value: 'option3', label: '选项3' },
+          { value: 'option4', label: '选项4' },
+          { value: 'option5', label: '选项5' },
+        ],
+      },
+    },
+  },
+  {
+    title: '多选下拉（只读）',
+    screenshot: '',
+    schema: {
+      componentName: 'PisellMultipleSelect',
+      props: {
+        label: '选择项',
+        value: ['option1', 'option2'],
+        readOnly: true,
+        options: [
+          { value: 'option1', label: '选项1' },
+          { value: 'option2', label: '选项2' },
+        ],
+      },
+    },
+  },
+];

package/lowcode/pisell-number/index.ts

@@ -0,0 +1,3 @@
+import PisellNumber from './meta';
+
+export default PisellNumber;