form-designer-xinyi 1.0.0

package/packages/ui/elementPlus/index.less

@@ -0,0 +1,79 @@
+.epic-designer-main {
+  .el-input {
+    width: 100% !important;
+  }
+
+  // 表单样式
+  .el-form--inline {
+    [name="epic-draggable-range"] {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .el-form-item__content {
+      width: 175px;
+    }
+  }
+
+  // 折叠面板
+  .el-collapse {
+    border: 1px solid var(--epic-border-color);
+    border-top: 0;
+
+    .el-collapse-item__header {
+      width: 100%;
+      height: 42px;
+      background: var(--epic-compoent-tabs-color);
+      padding-left: 12px;
+      border: 1px solid var(--epic-border-color);
+      border-left: 0;
+      border-right: 0;
+      border-bottom: 1px solid transparent;
+      &.is-active {
+        border-bottom: 1px solid var(--epic-border-color);
+      }
+    }
+    .el-collapse-item:last-child .el-collapse-item__header {
+      border-bottom: 1px solid var(--epic-border-color);
+    }
+    .el-collapse-item__content {
+      padding: 8px;
+    }
+  }
+}
+
+// 适配k-input-size样式
+.epic-input-size {
+  > .el-input__wrapper {
+    padding-right: 1px;
+  }
+  .el-input__suffix {
+    div {
+      border-radius: 0;
+      border: 0;
+      border-left: 1;
+      position: relative;
+      line-height: auto;
+    }
+
+    .el-input__wrapper {
+      border: 0;
+    }
+
+    .el-select__wrapper {
+      height: 32px;
+      line-height: 30px;
+    }
+  }
+}
+
+.epic-modal-el {
+  margin: 20px auto 0 !important;
+  height: calc(100vh - 50px);
+  // element plus弹出框样式适配
+  .el-dialog__body {
+    padding: 0;
+    height: calc(100% - 76px) !important;
+    overflow: auto;
+  }
+}

package/packages/ui/elementPlus/index.ts

@@ -0,0 +1,84 @@
+// 注册element-plus ui
+import { pluginManager as pManager, type PluginManager } from "epic-designer";
+
+import Input from "./input";
+import Textarea from "./textarea";
+import InputNumber from "./input-number";
+import Form from "./form";
+import FormItem from "./formItem";
+import Button from "./button";
+import Card from "./card";
+import Row from "./row";
+import Col from "./col";
+import Select from "./select";
+import Radio from "./radio";
+import Checkbox from "./checkbox";
+import Slider from "./slider";
+import ColorPicker from "./color-picker";
+import Switch from "./switch";
+import Cascader from "./cascader";
+import Collapse from "./collapse";
+import CollapseItem from "./collapse-item";
+import DatePicker from "./date-picker";
+import UploadFile from "./upload-file";
+import UploadImage from "./upload-image";
+import Modal from "./modal";
+import {
+  ElFormItem,
+  ElTabs,
+  ElTabPane,
+  ElCollapse,
+  ElCollapseItem,
+} from "element-plus";
+
+export function setupElementPlus(
+  pluginManager: PluginManager = pManager
+): void {
+  pluginManager.component("FormItem", ElFormItem);
+  pluginManager.component("Tabs", ElTabs);
+  pluginManager.component("TabPane", ElTabPane);
+  pluginManager.component("Collapse", ElCollapse);
+  pluginManager.component("CollapseItem", ElCollapseItem);
+
+  const componentArray = [
+    Form,
+    FormItem,
+    Input,
+    Textarea,
+    InputNumber,
+    Radio,
+    Checkbox,
+    DatePicker,
+    Select,
+    Switch,
+    ColorPicker,
+    Cascader,
+    Slider,
+    UploadFile,
+    UploadImage,
+    Button,
+    Card,
+    Row,
+    Col,
+    Collapse,
+    CollapseItem,
+    Modal,
+  ];
+
+  componentArray.forEach((item) => {
+    pluginManager.registerComponent(item);
+    pluginManager.addBaseComponentTypes(item.defaultSchema.type);
+  });
+
+  // ui初始化完成。
+  pluginManager.setInitialized(true);
+}
+
+/**
+ * 设置element GlobalConfig
+ */
+export function provideGlobalConfig(args: any) {
+  import("element-plus").then(({ provideGlobalConfig }) => {
+    provideGlobalConfig(args);
+  });
+}

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

@@ -0,0 +1,179 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElInput,
+  groupName: "表单",
+  icon: "epic-icon-write",
+  defaultSchema: {
+    label: "输入框",
+    type: "input",
+    field: "input",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "input",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        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.maxlength",
+        componentProps: {
+          placeholder: "请输入",
+          min: 0
+        },
+      },
+      {
+        label: "统计字数",
+        type: "switch",
+        field: "componentProps.showWordLimit",
+        show: ({ values }) => {
+          return values.componentProps.maxlength;
+        },
+      },
+      {
+        label: "输入类型",
+        type: "select",
+        defaultValue: "text",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "number",
+              value: "number",
+            },
+            {
+              label: "password",
+              value: "password",
+            },
+          ],
+        },
+        field: "componentProps.type",
+      },
+      {
+        label: "显示切换图标",
+        type: "switch",
+        field: "componentProps.showPassword",
+        show: ({ values }) => {
+          return values.componentProps.type === "password";
+        },
+      },
+      {
+        label: "只读",
+        type: "switch",
+        field: "componentProps.readonly",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.clearable",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "input",
+        describe: "输入值时",
+      },
+      {
+        type: "change",
+        describe: "值修改时",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点时",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点时",
+      },
+      {
+        type: "clear",
+        describe: "点击清空按钮时",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "clear",
+        describe: "清除 input 值",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+} as ComponentConfigModel;

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

@@ -0,0 +1,145 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElInputNumber,
+  groupName: "表单",
+  icon: "epic-icon-number",
+  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: "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: "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",
+        "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,121 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./radio"),
+  groupName: "表单",
+  icon: "epic-icon-danxuan-cuxiantiao",
+  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: "large",
+              value: "large",
+            },
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              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: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;