form-designer-xinyi 1.0.0

package/packages/ui/elementPlus/button/index.ts

@@ -0,0 +1,128 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./button"),
+  groupName: "表单",
+  icon: "epic-icon-button-remove",
+  defaultSchema: {
+    label: "按钮",
+    type: "button",
+    field: "input",
+    input: false,
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "primary",
+              value: "primary",
+            },
+            {
+              label: "success",
+              value: "success",
+            },
+            {
+              label: "info",
+              value: "info",
+            },
+            {
+              label: "warning",
+              value: "warning",
+            },
+            {
+              label: "danger",
+              value: "danger",
+            },
+          ],
+        },
+        field: "componentProps.type",
+      },
+      {
+        label: "操作类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "button",
+              value: "button",
+            },
+            {
+              label: "submit",
+              value: "submit",
+            },
+            {
+              label: "reset",
+              value: "reset",
+            },
+          ],
+        },
+        field: "componentProps.native-type",
+      },
+      {
+        label: '自定义颜色',
+        type: 'color-picker',
+        field: 'componentProps.color',
+        componentProps: {
+          type: 'color',
+        }
+      },
+      {
+        label: "朴素按钮",
+        type: "switch",
+        field: "componentProps.plain",
+      },
+      {
+        label: "圆角按钮",
+        type: "switch",
+        field: "componentProps.round",
+      },
+      {
+        label: "圆形按钮",
+        type: "switch",
+        field: "componentProps.circle",
+      },
+      {
+        label: "文字按钮",
+        type: "switch",
+        field: "componentProps.text",
+      },
+      {
+        label: "加载状态",
+        type: "switch",
+        field: "componentProps.loading",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+    event: [
+      {
+        type: "click",
+        describe: "点击按钮时",
+      },
+      {
+        type: "dblclick",
+        describe: "双击按钮时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/card/card.ts

@@ -0,0 +1,36 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { ElCard } from "element-plus";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        header: props.componentSchema?.label ?? "",
+      } as ComponentSchema;
+      const children = componentSchema.children ?? [];
+      delete componentSchema.children;
+
+      let vNodeClildren: any = null;
+      if (children.length) {
+        vNodeClildren = () =>
+          children.map((node: ComponentSchema) =>
+            renderSlot(slots, "node", { componentSchema: node })
+          );
+      } else {
+        vNodeClildren = () => [renderSlot(slots, "default")];
+      }
+      return h(ElCard, componentSchema, {
+        default: () => renderSlot(slots, "edit-node", {}, vNodeClildren),
+        header: () => renderSlot(slots, "header"),
+      });
+    };
+  },
+});

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

@@ -0,0 +1,50 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./card"),
+  groupName: "布局",
+  icon: "epic-icon-qiapian",
+  defaultSchema: {
+    label: "卡片布局",
+    type: "card",
+    children: [],
+    componentProps: {
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "阴影时机",
+        type: "select",
+        componentProps: {
+          options: [
+            {
+              label: "always",
+              value: "always",
+            },
+            {
+              label: "hover",
+              value: "hover",
+            },
+            {
+              label: "never",
+              value: "never",
+            },
+          ],
+          placeholder: "请选择",
+          clearable: true,
+        },
+        field: "componentProps.shadow",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+  },
+} as ComponentConfigModel;

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

@@ -0,0 +1,216 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElCascader,
+  groupName: "表单",
+  icon: "epic-icon-guanlian",
+  defaultSchema: {
+    label: "级联选择器",
+    type: "cascader",
+    field: "cascader",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+      placeholder: "请选择",
+      props: {
+        expandTrigger: "click",
+      },
+    },
+  },
+  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",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "分割符",
+        type: "input",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.separator",
+      },
+      {
+        label: "次级菜单展开方式",
+        type: "select",
+        field: "componentProps.props.expandTrigger",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "click",
+              value: "click",
+            },
+            {
+              label: "hover",
+              value: "hover",
+            },
+          ],
+        },
+      },
+      {
+        label: "可搜索",
+        type: "switch",
+        field: "componentProps.filterable",
+      },
+      {
+        label: "可多选",
+        type: "switch",
+        field: "componentProps.props.multiple",
+        onChange: ({ value, values }) => {
+          if (value) {
+            values.componentProps.defaultValue = [];
+          } else {
+            values.componentProps.defaultValue = null;
+          }
+        },
+      },
+      {
+        label: "折叠Tag",
+        type: "switch",
+        field: "componentProps.collapseTags",
+        show: ({ values }) => values.componentProps.props.multiple,
+      },
+      {
+        label: "显示被折叠标签",
+        type: "switch",
+        field: "componentProps.collapseTagsTooltip",
+        show: ({ values }) =>
+          values.componentProps.props.multiple &&
+          values.componentProps.collapseTags,
+      },
+      {
+        label: "不显示路径",
+        type: "switch",
+        componentProps: {
+          activeValue: false,
+          inactiveValue: true,
+        },
+        field: "componentProps.showAllLevels",
+      },
+      {
+        label: "父级可选",
+        type: "switch",
+        field: "componentProps.props.checkStrictly",
+        describe: "父子节点不互相关联",
+      },
+      {
+        label: "只获取选中节点",
+        type: "switch",
+        field: "componentProps.props.emitPath",
+        componentProps: {
+          activeValue: false,
+          inactiveValue: true,
+        },
+      },
+      {
+        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: "blur",
+        describe: "	当失去焦点时触发",
+      },
+      {
+        type: "focus",
+        describe: "当获得焦点时触发",
+      },
+    ],
+    action: [
+      {
+        type: "getCheckedNodes",
+        describe: "获取当前选中节点",
+      },
+      {
+        type: "togglePopperVisible",
+        describe: "切换 popper 可见状态",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/checkbox/checkbox.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h } from 'vue'
+import 'element-plus/es/components/select/style/css'
+import { ElCheckboxGroup, ElCheckbox, ElCheckboxButton } from "element-plus";
+
+// 二次封装组件
+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,
+        'onUpdate:modelValue': handleUpdate
+      }
+      return h(ElCheckboxGroup, props, {
+        default: () => [
+          props?.radioButton ?
+            props.options?.map((option: any) =>
+              h(ElCheckboxButton, { label: option.label, value: option.value })
+            )
+            :
+            props.options?.map((option: any) =>
+              h(ElCheckbox, { label: option.label, value: option.value })
+            )
+        ]
+      })
+    }
+  }
+})

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

@@ -0,0 +1,140 @@
+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: {
+      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: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+
+      {
+        label: "最大选中数",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最小选中数",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "按钮模式",
+        type: "switch",
+        field: "componentProps.radioButton",
+      },
+      {
+        label: "选项文本颜色",
+        type: "color-picker",
+        layout: "horizontal",
+        field: "componentProps.textColor",
+        show: ({ values }) => {
+          return values.componentProps.radioButton;
+        },
+        describe: "按钮模式下生效",
+      },
+      {
+        label: "选项按钮颜色",
+        type: "color-picker",
+        layout: "horizontal",
+        field: "componentProps.fill",
+        show: ({ values }) => {
+          return values.componentProps.radioButton;
+        },
+        describe: "按钮模式下生效",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "array",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/col/col.ts

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

package/packages/ui/elementPlus/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/elementPlus/collapse/collapse.ts

@@ -0,0 +1,32 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { ElCollapse } from "element-plus";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      required: true,
+      default: () => ({}),
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema?.label ?? "",
+      } as any;
+      const children = componentSchema.children;
+      delete componentSchema.children;
+
+      return h(ElCollapse, componentSchema, {
+        default: () => [
+          renderSlot(slots, "edit-node", {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, "node", { componentSchema: subcomponentSchema })
+            )
+          ),
+        ],
+      });
+    };
+  },
+});