form-designer-xinyi 1.0.0

package/packages/ui/naiveUi/card/card.ts

@@ -0,0 +1,32 @@
+import type { PropType } from 'vue'
+import { defineComponent, h, renderSlot } from 'vue'
+import { NCard } from 'naive-ui'
+import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({})
+    }
+  },
+  setup (props, { slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema.label
+      } as ComponentSchema
+      const children = componentSchema.children ?? []
+      delete componentSchema.children
+
+      return h(NCard, componentSchema, {
+        default: () =>
+          renderSlot(slots, 'edit-node', {}, () =>
+            children.map((node: ComponentSchema) =>
+              renderSlot(slots, 'node', { componentSchema: node })
+            )
+          )
+      })
+    }
+  }
+})

package/packages/ui/naiveUi/card/index.ts

@@ -0,0 +1,25 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./card"),
+  groupName: "布局",
+  icon: "epic-icon-qiapian",
+  defaultSchema: {
+    label: "卡片布局",
+    type: "card",
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/naiveUi/cascader/index.ts

@@ -0,0 +1,218 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("naive-ui/lib/cascader")).NCascader,
+  groupName: "表单",
+  icon: "epic-icon-guanlian",
+  defaultSchema: {
+    label: "级联选择器",
+    type: "cascader",
+    field: "cascader",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+      placeholder: "请选择",
+      cascade: false,
+      showPath: true,
+      placement: "bottom-start",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "cascader",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "tiny",
+              value: "tiny",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "多选",
+        type: "switch",
+        field: "componentProps.multiple",
+      },
+      {
+        label: "多选时关联选项",
+        type: "switch",
+        field: "componentProps.cascade",
+        show: ({ values }) => values.componentProps.multiple,
+      },
+      {
+        label: "分割符",
+        type: "switch",
+        field: "componentProps.separator",
+      },
+      {
+        label: "显示选项路径",
+        type: "switch",
+        field: "componentProps.showPath",
+      },
+      {
+        label: "可搜索",
+        type: "switch",
+        field: "componentProps.filterable",
+      },
+      {
+        label: "菜单弹出的位置",
+        type: "select",
+        field: "componentProps.placement",
+        componentProps: {
+          options: [
+            {
+              label: "top-start",
+              value: "top-start",
+            },
+            {
+              label: "top",
+              value: "top",
+            },
+            {
+              label: "top-end",
+              value: "top-end",
+            },
+            {
+              label: "right-start",
+              value: "right-start",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+            {
+              label: "right-end",
+              value: "right-end",
+            },
+            {
+              label: "bottom-start",
+              value: "bottom-start",
+            },
+            {
+              label: "bottom",
+              value: "bottom",
+            },
+            {
+              label: "bottom-end",
+              value: "bottom-end",
+            },
+            {
+              label: "left-start",
+              value: "left-start",
+            },
+            {
+              label: "left",
+              value: "left",
+            },
+            {
+              label: "left-end",
+              value: "left-end",
+            },
+          ],
+        },
+      },
+      {
+        label: "最大tag显示数",
+        type: "number",
+        field: "componentProps.maxTagCount",
+        show: ({ values }) => values.componentProps.multiple,
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.clearable",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+        componentProps: {
+          tree: true,
+        },
+        describe: "配置选项",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "选中节点变化时",
+      },
+      {
+        type: "close",
+        describe: "面板的关闭事件",
+      },
+    ],
+    action: [
+      {
+        type: "getCheckedNodes",
+        describe: "获取当前选中节点",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/naiveUi/checkbox/checkbox.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue'
+import { NCheckboxGroup, NCheckbox } from 'naive-ui'
+
+// 二次封装组件
+export default defineComponent({
+  emits: ['update:modelValue'],
+  setup (_, { emit, attrs }) {
+    function handleUpdate (e = null): void {
+      emit('update:modelValue', e)
+    }
+
+    return () => {
+      const props: Record<string, any> = {
+        ...attrs,
+        value: attrs.modelValue,
+        'onUpdate:value': handleUpdate
+      }
+      return h(NCheckboxGroup, props, {
+        default: () => [
+          props.options?.map((option: any) =>
+            h(NCheckbox, { label: option.label, value: option.value })
+          )
+        ]
+      })
+    }
+  }
+})

package/packages/ui/naiveUi/checkbox/index.ts

@@ -0,0 +1,114 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./checkbox"),
+  groupName: "表单",
+  icon: "epic-icon-duoxuan1",
+  defaultSchema: {
+    label: "复选框",
+    type: "checkbox",
+    field: "checkbox",
+    input: true,
+    componentProps: {
+      // defaultValue: [],
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "checkbox",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "最大勾选数",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最小勾选数",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+        describe: "配置选项",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/naiveUi/col/col.ts

@@ -0,0 +1,30 @@
+import type { PropType } from 'vue'
+import { defineComponent, h, renderSlot } from 'vue'
+import { NCol } from 'naive-ui'
+import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({})
+    }
+  },
+  setup (props, { slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema.label
+      } as any
+      const children = componentSchema.children
+      delete componentSchema.children
+
+      return h(NCol, componentSchema, {
+        default: () =>
+          renderSlot(slots, 'edit-node', {}, () =>
+            children.map((node: ComponentSchema) => renderSlot(slots, 'node', { componentSchema: node }))
+          )
+      })
+    }
+  }
+})

package/packages/ui/naiveUi/col/index.ts

@@ -0,0 +1,21 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component: () => import('./col'),
+  defaultSchema: {
+    label: '栅格布局-列',
+    type: 'col',
+    children: [],
+    componentProps: {
+      span: 6
+    }
+  },
+  config: {
+    attribute: [
+      {
+        label: '占位格数',
+        type: 'number',
+        field: 'componentProps.span'
+      }
+    ]
+  }
+} as ComponentConfigModel

package/packages/ui/naiveUi/collapse/collapse.ts

@@ -0,0 +1,31 @@
+import type { PropType } from 'vue'
+import { defineComponent, h, renderSlot } from 'vue'
+import { NCollapse } from 'naive-ui'
+import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({})
+    }
+  },
+  setup (props, { slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema.label
+      } as any
+      const children = componentSchema.children
+      delete componentSchema.children
+
+      return h(NCollapse, componentSchema, {
+        default: () => [
+          renderSlot(slots, 'edit-node', {}, () =>
+            children.map((node: ComponentSchema) => renderSlot(slots, 'node', { componentSchema: node }))
+          )
+        ]
+      })
+    }
+  }
+})

package/packages/ui/naiveUi/collapse/index.ts

@@ -0,0 +1,40 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component: () => import('./collapse'),
+  defaultSchema: {
+    label: '折叠面板',
+    type: 'collapse',
+    children: [
+      {
+        type: 'collapse-item',
+        children: [],
+        componentProps: {
+          span: 12
+        },
+        id: 'g062zikd2jk001'
+      },
+      {
+        type: 'collapse-item',
+        children: [],
+        componentProps: {
+          span: 12
+        },
+        id: 'gy5z9jtfb3s001'
+      }
+    ]
+  },
+  config: {
+    attribute: [
+      {
+        label: '折叠项管理',
+        type: 'EColEditor',
+        field: 'children'
+      },
+      {
+        label: '隐藏',
+        type: 'switch',
+        field: 'componentProps.hidden'
+      }
+    ]
+  }
+} as ComponentConfigModel

package/packages/ui/naiveUi/collapse-item/collapseItem.ts

@@ -0,0 +1,31 @@
+import type { PropType } from 'vue'
+import { defineComponent, h, renderSlot } from 'vue'
+import { NCollapseItem } from 'naive-ui'
+import { type ComponentSchema } from '@epic-designer/core/types/epic-designer'
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({})
+    }
+  },
+  setup (props, { slots }) {
+    return () => {
+      const componentSchema: ComponentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema.label ?? ''
+      }
+
+      const children = componentSchema.children ?? []
+      delete componentSchema.children
+
+      return h(NCollapseItem, componentSchema, {
+        default: () =>
+          renderSlot(slots, 'edit-node', {}, () =>
+            children.map((node: ComponentSchema) => renderSlot(slots, 'node', { componentSchema: node }))
+          )
+      })
+    }
+  }
+})

package/packages/ui/naiveUi/collapse-item/index.ts

@@ -0,0 +1,12 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component: () => import('./collapseItem'),
+  defaultSchema: {
+    label: '折叠项',
+    type: 'collapse-item',
+    children: []
+  },
+  config: {
+    attribute: []
+  }
+} as ComponentConfigModel