epic-designer-gold 0.0.4 → 0.0.6

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

@@ -1,110 +0,0 @@
-<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

@@ -1,150 +0,0 @@
-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

@@ -1,15 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-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

@@ -1,79 +0,0 @@
-.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

@@ -1,91 +0,0 @@
-// 注册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

@@ -1,180 +0,0 @@
-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;