@pisell/materials 6.11.17 → 6.11.19

package/lowcode/form-item-tabs/meta.ts

@@ -0,0 +1,172 @@
+import { uuid } from '../_utils/utils';
+import {
+  formItemGeneralDataGroup,
+  generalItemMap,
+  getFormItemGeneralInfoGroup,
+  formItemGeneralOptionTypeGroup,
+  getFormItemValidateGroup,
+  getFormItemGeneralAppearanceGroup,
+} from '../_utils/defaultSchema';
+
+export default {
+  componentName: 'FormItemTabs',
+  title: '选项卡',
+  category: '无代码表单',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'FormItemTabs',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    // 数据分组
+    formItemGeneralDataGroup,
+    // 信息分组
+    getFormItemGeneralInfoGroup([
+      generalItemMap['label'],
+      generalItemMap['tooltip'],
+      generalItemMap['extra'],
+      generalItemMap['hideLabel'],
+      generalItemMap['renderMode'],
+      generalItemMap['defaultValue'],
+    ]),
+    // 选项类型分组
+    formItemGeneralOptionTypeGroup,
+    // 校验分组
+    getFormItemValidateGroup([generalItemMap['requiredobj']]),
+    // 外观分组
+    getFormItemGeneralAppearanceGroup([]),
+  ],
+  props: [
+    {
+      name: 'defaultValue',
+      title: { label: '默认值', tip: '默认选中的选项值' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+      supportVariable: true,
+    },
+    {
+      name: 'value',
+      title: { label: '当前值', tip: '当前选中的选项值（受控）' },
+      propType: { type: 'oneOfType', value: ['string', 'number'] },
+      setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+      supportVariable: true,
+    },
+    {
+      name: 'disabled',
+      title: { label: '是否禁用', tip: '是否禁用整个选项卡组件' },
+      propType: 'bool',
+      defaultValue: false,
+      setter: 'BoolSetter',
+      supportVariable: true,
+    },
+    {
+      name: 'options',
+      title: { label: '选项列表', tip: '配置各选项卡的标签和对应值' },
+      propType: {
+        type: 'arrayOf',
+        value: {
+          type: 'shape',
+          value: [
+            {
+              name: 'label',
+              propType: 'string',
+              description: '选项名',
+              defaultValue: '选项名',
+            },
+            {
+              name: 'value',
+              propType: { type: 'oneOfType', value: ['string', 'number'] },
+              description: '选项值',
+              defaultValue: '选项值',
+            },
+            {
+              name: 'disabled',
+              propType: 'bool',
+              description: '是否禁用该选项',
+              defaultValue: false,
+            },
+          ],
+        },
+      },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'label',
+                    title: '选项名',
+                    setter: ['PisellI18nSetter', 'StringSetter', 'VariableSetter'],
+                    isRequired: true,
+                  },
+                  {
+                    name: 'value',
+                    title: '选项值',
+                    setter: ['StringSetter', 'NumberSetter', 'VariableSetter'],
+                    isRequired: true,
+                  },
+                  {
+                    name: 'disabled',
+                    title: '是否禁用',
+                    setter: 'BoolSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: () => {
+              return {
+                label: '选项名',
+                value: uuid(),
+                disabled: false,
+              };
+            },
+          },
+        },
+      },
+    },
+    {
+      name: 'onChange',
+      title: { label: '变化时回调', tip: '切换选项时触发的回调函数' },
+      propType: 'func',
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(value,${extParams}){\n// 切换选项时回调\nconsole.log('onChange', value);}",
+        },
+      ],
+    },
+  },
+  snippets: [
+    {
+      title: '选项卡',
+      screenshot: '',
+      schema: {
+        componentName: 'FormItemTabs',
+        props: {
+          optionSourceType: 'custom',
+          options: [
+            { label: '选项A', value: 'A' },
+            { label: '选项B', value: 'B' },
+            { label: '选项C', value: 'C' },
+          ],
+        },
+      },
+    },
+  ],
+};