epic-designer-gold 0.0.3 → 0.0.4

package/packages/ui/elementPlus/input-number/index.ts

@@ -0,0 +1,146 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElInputNumber,
+  groupName: "表单",
+  icon: "icon--epic--123-rounded",
+  sort: 710,
+  defaultSchema: {
+    label: "数字输入框",
+    type: "number",
+    field: "number",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "number",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        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: "number",
+        field: "componentProps.step",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "控制按钮位置",
+        type: "select",
+        defaultValue: "",
+        componentProps: {
+          options: [
+            {
+              label: "default",
+              value: "",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+          ],
+          placeholder: "请选择",
+          clearable: true,
+        },
+        field: "componentProps.controlsPosition",
+      },
+      {
+        label: "精度",
+        type: "number",
+        field: "componentProps.precision",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "输入控制为步长的倍数",
+        type: "switch",
+        field: "componentProps.stepStrictly",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "number",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

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

@@ -0,0 +1,18 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component:  () => import('./modal'),
+  defaultSchema: {
+    label: '模态框',
+    type: 'modal',
+    children: []
+  },
+  config: {
+    attribute: [
+      {
+        label: '标题',
+        type: 'input',
+        field: 'title'
+      }
+    ]
+  }
+} as ComponentConfigModel

package/packages/ui/elementPlus/modal/modal.ts

@@ -0,0 +1,68 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+import { ElDialog, ElButton } from "element-plus";
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      default: () => ({}),
+    },
+  },
+  emits: ["ok", "close", "update:modelValue"],
+  setup(props, { attrs, slots, emit }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        ...attrs,
+        title: props.componentSchema?.label ?? "",
+        class: "epic-modal-el epic-modal-main",
+        "destroy-on-close": true,
+        "onUpdate:modelValue": handleClose,
+      } as Record<string, any>;
+      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")];
+      }
+
+      function handleOk() {
+        emit("ok");
+      }
+
+      function handleClose(e) {
+        emit("update:modelValue", false);
+        emit("close");
+      }
+
+      return h(ElDialog, componentSchema, {
+        default: () => [
+          renderSlot(slots, "edit-node", {}, vNodeClildren),
+          h("div", { class: "epic-modal-footer" }, [
+            h(
+              ElButton,
+              { onClick: handleClose },
+              {
+                default: () => "关闭",
+              }
+            ),
+            h(
+              ElButton,
+              { type: "primary", onClick: handleOk },
+              {
+                default: () => componentSchema.okText ?? "确定",
+              }
+            ),
+          ]),
+        ],
+      });
+    };
+  },
+});

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

@@ -0,0 +1,129 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./radio"),
+  groupName: "表单",
+  icon: "icon--epic--radio-button-checked-outline",
+  sort: 850,
+  defaultSchema: {
+    label: "单选框",
+    type: "radio",
+    field: "radio",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+      size: "default",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "radio",
+        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: "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: "校验规则需要配合表单使用",
+      },
+      {
+        label: "数据源",
+        type: "EDataSource",
+        layout: "vertical",
+        field: "componentProps.dataSource",
+        describe: "数据源配置",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/radio/radio.ts

@@ -0,0 +1,32 @@
+import { defineComponent, h } from 'vue'
+import 'element-plus/es/components/select/style/css'
+import { ElRadioGroup, ElRadio, ElRadioButton } 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(ElRadioGroup, props, {
+        default: () => [
+          props?.radioButton ?
+            props.options?.map((option: any) =>
+              h(ElRadioButton, { value: option.value }, { default: () => option.label })
+            )
+            :
+            props.options?.map((option: any) =>
+            h(ElRadio, { value: option.value }, { default: () => option.label })
+          )
+        ]
+      })
+    }
+  }
+})

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

@@ -0,0 +1,106 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./row"),
+  groupName: "布局",
+  icon: "icon--epic--width-normal-outline",
+  sort: 800,
+  defaultSchema: {
+    label: "栅格布局",
+    type: "row",
+    children: [
+      {
+        type: "col",
+        children: [],
+        componentProps: {
+          span: 12,
+        },
+      },
+      {
+        type: "col",
+        children: [],
+        componentProps: {
+          span: 12,
+        },
+      },
+    ],
+  },
+  editConstraints: {
+    childImmovable: true,
+  },
+  config: {
+    attribute: [
+      {
+        label: "垂直对齐方式",
+        type: "select",
+        componentProps: {
+          style: { width: "100%" },
+          options: [
+            {
+              label: "top",
+              value: "top",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "bottom",
+              value: "bottom",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.align",
+      },
+      {
+        label: "水平排列方式",
+        type: "select",
+        componentProps: {
+          style: { width: "100%" },
+          options: [
+            {
+              label: "start",
+              value: "start",
+            },
+            {
+              label: "end",
+              value: "end",
+            },
+            {
+              label: "center",
+              value: "center",
+            },
+            {
+              label: "space-around",
+              value: "space-around",
+            },
+            {
+              label: "space-between",
+              value: "space-between",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.justify",
+      },
+      {
+        label: "栅格间距",
+        type: "number",
+        field: "componentProps.gutter",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "列编辑",
+        type: "EColEditor",
+        field: "children",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/row/row.ts

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