@dckj-npm/dc-material 0.1.358 → 0.1.360

package/lowcode/custom-form/meta.ts

@@ -0,0 +1,307 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'
+
+const CustomFormMeta: IPublicTypeComponentMetadata = {
+  group: '低代码组件',
+  componentName: 'CustomForm',
+  title: '自定义表单',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  category: '信息输入',
+  npm: {
+    package: '@dckj-npm/dc-material',
+    version: '0.1.359',
+    exportName: 'CustomForm',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  configure: {
+    component: {
+      isContainer: true,
+    },
+    props: [
+      {
+        title: '列数',
+        name: 'columns',
+        setter: {
+          componentName: 'RadioGroupSetter',
+          props: {
+            dataSource: [
+              { label: '一列', value: 1 },
+              { label: '二列', value: 2 },
+              { label: '三列', value: 3 },
+              { label: '四列', value: 4 },
+            ],
+            options: [
+              { label: '一列', value: 1 },
+              { label: '二列', value: 2 },
+              { label: '三列', value: 3 },
+              { label: '四列', value: 4 },
+            ],
+          },
+          initialValue: 1,
+        },
+      },
+      {
+        title: '间距',
+        name: 'spacing',
+        setter: {
+          componentName: 'JsonSetter',
+          isRequired: false,
+          initialValue: [0, 16, 16, 0],
+        },
+      },
+      {
+        title: '空态文案',
+        name: 'emptyContent',
+        setter: {
+          componentName: 'StringSetter',
+          isRequired: false,
+          initialValue: '添加表单项',
+        },
+      },
+      {
+        title: '表单项',
+        name: 'formItems',
+        setter: {
+          componentName: 'ArraySetter',
+          props: {
+            itemSetter: {
+              componentName: 'ObjectSetter',
+              props: {
+                config: {
+                  items: [
+                    {
+                      title: '字段名',
+                      name: 'field',
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: true,
+                        initialValue: '',
+                      },
+                    },
+                    {
+                      title: '标题',
+                      name: 'label',
+                      setter: {
+                        componentName: 'StringSetter',
+                        isRequired: false,
+                        initialValue: '',
+                      },
+                    },
+                    {
+                      title: '必填',
+                      name: 'required',
+                      setter: {
+                        componentName: 'BoolSetter',
+                        isRequired: false,
+                        initialValue: false,
+                      },
+                    },
+                    {
+                      title: '组件类型',
+                      name: 'componentType',
+                      setter: {
+                        componentName: 'SelectSetter',
+                        props: {
+                          options: [
+                            { label: '输入框', value: 'Input' },
+                            { label: '多行文本', value: 'TextArea' },
+                            { label: '下拉选择', value: 'Select' },
+                            { label: '单选组', value: 'RadioGroup' },
+                            { label: '复选组', value: 'CheckboxGroup' },
+                            { label: '数字输入', value: 'NumberPicker' },
+                            { label: '日期选择', value: 'DatePicker' },
+                            { label: '上传', value: 'Upload' },
+                          ],
+                        },
+                        initialValue: 'Input',
+                      },
+                    },
+                    {
+                      title: '选项',
+                      name: 'options',
+                      setter: {
+                        componentName: 'ArraySetter',
+                        props: {
+                          itemSetter: {
+                            componentName: 'ObjectSetter',
+                            props: {
+                              config: {
+                                items: [
+                                  {
+                                    title: '名称',
+                                    name: 'label',
+                                    setter: {
+                                      componentName: 'StringSetter',
+                                      isRequired: true,
+                                      initialValue: '',
+                                    },
+                                  },
+                                  {
+                                    title: '值',
+                                    name: 'value',
+                                    setter: {
+                                      componentName: 'StringSetter',
+                                      isRequired: true,
+                                      initialValue: '',
+                                    },
+                                  },
+                                ],
+                              },
+                            },
+                          },
+                        },
+                        initialValue: [],
+                      },
+                    },
+                    {
+                      title: '列跨度',
+                      name: 'columnSpan',
+                      setter: {
+                        componentName: 'NumberSetter',
+                        props: {
+                          min: 1,
+                          max: 4,
+                        },
+                        initialValue: 1,
+                      },
+                    },
+                    {
+                      title: '组件属性',
+                      name: 'componentProps',
+                      setter: {
+                        componentName: 'JsonSetter',
+                        isRequired: false,
+                      },
+                    },
+                    {
+                      title: '表单项属性',
+                      name: 'formItemProps',
+                      setter: {
+                        componentName: 'JsonSetter',
+                        isRequired: false,
+                      },
+                    },
+                  ],
+                  extraSetter: {
+                    componentName: 'MixedSetter',
+                    isRequired: false,
+                    props: {},
+                  },
+                },
+              },
+            },
+          },
+          initialValue: [],
+        },
+      },
+      {
+        title: '显示提交按钮',
+        name: 'showSubmit',
+        setter: {
+          componentName: 'BoolSetter',
+          initialValue: true,
+        },
+      },
+      {
+        title: '提交按钮文字',
+        name: 'submitText',
+        setter: {
+          componentName: 'StringSetter',
+          initialValue: '提交',
+        },
+      },
+      {
+        title: '提交时校验',
+        name: 'submitValidate',
+        setter: {
+          componentName: 'BoolSetter',
+          initialValue: true,
+        },
+      },
+      {
+        title: '提交数据源',
+        name: 'submitDataSource',
+        setter: {
+          componentName: 'SetterFormVariable',
+          props: {
+            showAttributesPanel: false,
+          },
+        },
+      },
+      {
+        title: '显示重置按钮',
+        name: 'showReset',
+        setter: {
+          componentName: 'BoolSetter',
+          initialValue: false,
+        },
+      },
+      {
+        title: '重置按钮文字',
+        name: 'resetText',
+        setter: {
+          componentName: 'StringSetter',
+          initialValue: '重置',
+        },
+      },
+    ],
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onSubmit',
+          template:
+            "onSubmit(values, errors, field,${extParams}){\n// 提交成功（无校验错误）\nconsole.log('onSubmit', values, errors, field);\n}",
+        },
+        {
+          name: 'onSubmitFailed',
+          template:
+            "onSubmitFailed(values, errors, field,${extParams}){\n// 提交失败（校验错误）\nconsole.log('onSubmitFailed', values, errors, field);\n}",
+        },
+      ],
+    },
+  },
+}
+
+const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '自定义表单',
+    screenshot: '',
+    schema: {
+      componentName: 'CustomForm',
+      props: {
+        columns: 1,
+        formItems: [
+          {
+            field: 'name',
+            label: '姓名',
+            required: true,
+            componentType: 'Input',
+            componentProps: {
+              placeholder: '请输入姓名',
+            },
+          },
+          {
+            field: 'gender',
+            label: '性别',
+            componentType: 'RadioGroup',
+            options: [
+              { label: '男', value: 'male' },
+              { label: '女', value: 'female' },
+            ],
+          },
+        ],
+        showSubmit: true,
+        submitText: '提交',
+      },
+    },
+  },
+]
+
+export default {
+  ...CustomFormMeta,
+  snippets,
+}