epic-designer-gold 0.0.2 → 0.0.4

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

@@ -0,0 +1,148 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./checkbox"),
+  groupName: "表单",
+  icon: "icon--epic--dialogs-outline-rounded",
+  sort: 860,
+  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: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "default",
+            },
+            {
+              label: "小型",
+              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",
+        },
+      },
+      {
+        label: "数据源",
+        type: "EDataSource",
+        layout: "vertical",
+        field: "componentProps.dataSource",
+        describe: "数据源配置",
+      },
+    ],
+    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 })
+            )
+          ),
+        ],
+      });
+    };
+  },
+});

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

@@ -0,0 +1,41 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./collapse"),
+  icon: "epic-icon-xiala",
+  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/elementPlus/collapse-item/collapseItem.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { ElCollapseItem } from "element-plus";
+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(ElCollapseItem, componentSchema, {
+        default: () =>
+          renderSlot(slots, "edit-node", {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, "node", { componentSchema: subcomponentSchema })
+            )
+          ),
+      });
+    };
+  },
+});

package/packages/ui/elementPlus/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;

package/packages/ui/elementPlus/color-picker/index.ts

@@ -0,0 +1,111 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElColorPicker,
+  groupName: "表单",
+  icon: "icon--epic--palette-outline",
+  sort: 950,
+  defaultSchema: {
+    label: "颜色选择器",
+    type: "color-picker",
+    field: "color-picker",
+    input: true,
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "color-picker",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "default",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "格式",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "hsl",
+              value: "hsl",
+            },
+            {
+              label: "hsv",
+              value: "hsv",
+            },
+            {
+              label: "hex",
+              value: "hex",
+            },
+            {
+              label: "rgb",
+              value: "rgb",
+            },
+          ],
+        },
+        field: "componentProps.colorFormat",
+      },
+      {
+        label: "透明度选择",
+        type: "switch",
+        field: "componentProps.showAlpha",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+    action: [],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/date-picker/index.ts

@@ -0,0 +1,219 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElDatePicker,
+  groupName: "表单",
+  icon: "icon--epic--calendar-month-outline-rounded",
+  sort: 910,
+  defaultSchema: {
+    label: "日期选择器",
+    type: "date",
+    field: "date",
+    input: true,
+    componentProps: {
+      type: "date",
+      valueFormat: "YYYY-MM-DD",
+      format: "YYYY-MM-DD",
+      placeholder: "请选择",
+      startPlaceholder: "请选择",
+      endPlaceholder: "请选择",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "date",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "日期类型",
+        type: "select",
+        field: "componentProps.type",
+        componentProps: {
+          options: [
+            {
+              label: "日期",
+              value: "date",
+            },
+            {
+              label: "周",
+              value: "week",
+            },
+            {
+              label: "月份",
+              value: "month",
+            },
+            {
+              label: "年份",
+              value: "year",
+            },
+            {
+              label: "时间",
+              value: "datetime",
+            },
+            {
+              label: "时间范围",
+              value: "datetimerange",
+            },
+            {
+              label: "日期范围",
+              value: "daterange",
+            },
+            {
+              label: "月份范围",
+              value: "monthrange",
+            },
+            {
+              label: "多个日期",
+              value: "dates",
+            },
+          ],
+        },
+        onChange({ values, value }) {
+          values.componentProps.defaultValue = null;
+          if (["date", "daterange", "dates"].includes(value)) {
+            values.componentProps.format = "YYYY-MM-DD";
+            values.componentProps.valueFormat = "YYYY-MM-DD";
+          } else if (["week"].includes(value)) {
+            values.componentProps.format = "ww [周]";
+            values.componentProps.valueFormat = "YYYY-MM-DD";
+          } else if (["month", "monthrange"].includes(value)) {
+            values.componentProps.format = "YYYY-MM";
+            values.componentProps.valueFormat = "YYYY-MM";
+          } else if (["datetime", "datetimerange"].includes(value)) {
+            values.componentProps.format = "YYYY-MM-DD HH:mm:ss";
+            values.componentProps.valueFormat = "YYYY-MM-DD HH:mm:ss";
+          } else if (["year"].includes(value)) {
+            values.componentProps.format = "YYYY";
+            values.componentProps.valueFormat = "YYYY";
+          }
+        },
+      },
+      {
+        label: "开始占位符",
+        type: "input",
+        field: "componentProps.startPlaceholder",
+        show({ values }) {
+          return ["datetimerange", "daterange", "monthrange"].includes(
+            values.componentProps.type
+          );
+        },
+      },
+      {
+        label: "结束占位符",
+        type: "input",
+        field: "componentProps.endPlaceholder",
+        show({ values }) {
+          return ["datetimerange", "daterange", "monthrange"].includes(
+            values.componentProps.type
+          );
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+        show({ values }) {
+          return !["datetimerange", "daterange", "monthrange"].includes(
+            values.componentProps.type
+          );
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "default",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "可输入",
+        type: "switch",
+        field: "componentProps.editable",
+      },
+      {
+        label: "显示格式",
+        type: "input",
+        field: "componentProps.format",
+      },
+      {
+        label: "数据格式",
+        type: "input",
+        field: "componentProps.valueFormat",
+      },
+      {
+        label: "分割符",
+        type: "input",
+        field: "componentProps.rangeSeparator",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        show({ values }) {
+          return ["datetimerange", "daterange", "monthrange"].includes(
+            values.componentProps.type
+          );
+        },
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.clearable",
+      },
+      {
+        label: "只读",
+        type: "switch",
+        field: "componentProps.readonly",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;