epic-designer-gold 0.0.3 → 0.0.4

package/packages/ui/elementPlus/form/form.vue

@@ -0,0 +1,110 @@
+<template>
+  <div v-if="visible" class="form-main" style="height: 100%">
+    <ElForm ref="form" :model="formData" v-bind="componentProps" style="height: 100%">
+      <slot name="edit-node">
+        <slot v-for="item in children" name="node" :componentSchema="item" />
+      </slot>
+    </ElForm>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, Ref, reactive, PropType, provide, computed, inject, onMounted } from "vue";
+import { ElForm } from "element-plus";
+import type { ComponentSchema, FormDataModel } from "@epic-designer/core/types/epic-designer";
+import { type PageManager } from "@epic-designer/utils";
+
+interface FormInstance extends InstanceType<typeof ElForm> {
+  getData?: () => FormDataModel;
+  setData?: (FormDataModel) => void;
+}
+
+const props = defineProps({
+  componentSchema: {
+    type: Object as PropType<ComponentSchema>,
+    require: true,
+    default: () => ({}),
+  },
+});
+
+const pageManager = inject("pageManager", {}) as PageManager;
+const form = ref<FormInstance | null>(null);
+const forms = inject("forms", {}) as Ref<{ [name: string]: FormInstance }>;
+const visible = ref(true);
+const formData = reactive<FormDataModel>({});
+pageManager.addFormData(formData, props.componentSchema?.componentProps?.name);
+provide("formData", formData);
+
+/**
+ * 获取表单数据
+ * @param formName 表单name
+ */
+function getData(): FormDataModel {
+  return formData;
+}
+
+/**
+ * 设置表单数据
+ * @param data
+ */
+function setData(data: FormDataModel) {
+  Object.assign(formData, data);
+}
+
+/**
+ * 校验表单数据
+ * @param data
+ */
+function validate() {
+  return form.value?.validate();
+}
+
+// form组件需要特殊处理
+onMounted(async () => {
+  if (props.componentSchema?.type === "form" && forms.value && form.value) {
+    const name = props.componentSchema?.componentProps?.name ?? props.componentSchema?.name ?? ("default" as string);
+
+    forms.value[name] = form.value as any;
+    form.value.getData = getData;
+    form.value.setData = setData;
+    return false;
+  }
+});
+
+const componentProps = computed(() => {
+  const recordProps = props.componentSchema!.componentProps;
+  let labelCol = recordProps.labelCol;
+  let wrapperCol = recordProps.wrapperCol;
+  if (recordProps.labelLayout === "fixed") {
+    labelCol = {
+      style: `width:${typeof recordProps.labelWidth === "number" ? recordProps.labelWidth + "px" : recordProps.labelWidth}`,
+    };
+    wrapperCol = { style: "width:auto;flex:1" };
+  }
+  return {
+    ...recordProps,
+    labelCol,
+    wrapperCol,
+  };
+});
+
+const children = computed(() => {
+  return props.componentSchema!.children ?? [];
+});
+
+defineExpose({
+  form,
+  getData,
+  setData,
+  validate,
+});
+</script>
+<style lang="less" scoped>
+.form-main {
+  margin: 0 !important;
+  padding: 0 !important;
+  ::v-deep .el-form {
+    border: 1px var(--epic-border-color) dashed;
+  }
+}
+</style>

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

@@ -0,0 +1,150 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+
+export default {
+  component: () => import("./form.vue"),
+  groupName: "表单",
+  icon: "icon--epic--list-alt-outline-rounded",
+  sort: 600,
+  defaultSchema: {
+    label: "表单",
+    type: "form",
+    componentProps: {
+      name: "default",
+      labelWidth: "100px",
+      "label-position": "left"
+    },
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "Name",
+        type: "input",
+        field: "componentProps.name",
+      },
+      {
+        label: "标签位置",
+        type: "radio",
+        field: "componentProps.label-position",
+        componentProps: {
+          clearable: true,
+          radioButton: true,
+          options: [
+            {
+              label: "左边",
+              value: "left",
+            },
+            {
+              label: "右边",
+              value: "right",
+            },
+            {
+              label: "顶部",
+              value: "top",
+            },
+          ]
+        },
+      },
+      {
+        label: "标签宽度",
+        type: "EInputSize",
+        field: "componentProps.labelWidth",
+      },
+      {
+        label: "标签后缀",
+        type: "input",
+        field: "componentProps.labelSuffix",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+
+      {
+        label: "表单尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "default",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+      },
+      {
+        label: "星号位置",
+        type: "select",
+        field: "componentProps.require-asterisk-position",
+        componentProps: {
+          placeholder: "请选择",
+          clearable: true,
+          options: [
+            {
+              label: "左边",
+              value: "left",
+            },
+            {
+              label: "右边",
+              value: "right",
+            },
+          ],
+        },
+      },
+      {
+        label: "行内展示校验信息",
+        type: "switch",
+        field: "componentProps.inline-message",
+      },
+      {
+        label: "校验反馈图标",
+        type: "switch",
+        field: "componentProps.status-icon",
+      },
+      {
+        label: "滚动校验错误处",
+        type: "switch",
+        field: "componentProps.scroll-to-error",
+      },
+      {
+        label: "行内模式",
+        type: "switch",
+        field: "componentProps.inline",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+    action: [
+      {
+        type: "getData",
+        describe: "获取表单数据",
+      },
+      {
+        type: "setData",
+        describe: "设置表单数据",
+      },
+      {
+        type: "validate",
+        describe: "校验表单",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/elementPlus/formItem/formItem.vue

@@ -0,0 +1,15 @@
+<template>
+  <ElFormItem
+    ref="form"
+    v-bind="attrs"
+    :prop="attrs.field"
+  >
+    <slot />
+  </ElFormItem>
+</template>
+<script lang="ts" setup>
+import { ref, useAttrs } from 'vue'
+import { ElFormItem } from 'element-plus'
+const attrs = useAttrs() as any
+const form = ref<any>(null)
+</script>

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

@@ -0,0 +1,11 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+
+export default {
+  component: () => import('./formItem.vue'),
+  defaultSchema: {
+    label: '表单项',
+    type: 'form-item',
+  },
+  config: {
+  }
+} as ComponentConfigModel

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,91 @@
+// 注册element-plus ui
+import { pluginManager as pManager, type PluginManager } from "epic-designer-gold";
+
+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 Sign from "./sign";
+import {
+  ElFormItem,
+  ElTabs,
+  ElTabPane,
+  ElCollapse,
+  ElCollapseItem,
+  ElDrawer,
+  ElForm,
+  ElRadioGroup,
+  ElRadioButton,
+} from "element-plus";
+
+export function setupElementPlus(pluginManager: PluginManager = pManager): void {
+  pluginManager.component("FormItem", ElFormItem);
+  pluginManager.component("Form", ElForm);
+  pluginManager.component("RadioGroup", ElRadioGroup);
+  pluginManager.component("RadioButton", ElRadioButton);
+  pluginManager.component("Tabs", ElTabs);
+  pluginManager.component("TabPane", ElTabPane);
+  pluginManager.component("Collapse", ElCollapse);
+  pluginManager.component("CollapseItem", ElCollapseItem);
+  pluginManager.component("Drawer", ElDrawer);
+  const componentArray = [
+    Form,
+    FormItem,
+    Input,
+    Textarea,
+    InputNumber,
+    Radio,
+    Checkbox,
+    DatePicker,
+    Select,
+    Switch,
+    ColorPicker,
+    Cascader,
+    Slider,
+    UploadFile,
+    UploadImage,
+    Button,
+    Card,
+    Row,
+    Col,
+    Collapse,
+    CollapseItem,
+    Modal,
+    Sign,
+  ];
+
+  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,180 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("element-plus")).ElInput,
+  groupName: "表单",
+  icon: "icon--epic--border-color-outline-rounded",
+  sort: 700,
+  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: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "default",
+            },
+            {
+              label: "小型",
+              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;