epic-designer-gold 0.0.3 → 0.0.4

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

@@ -0,0 +1,196 @@
+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",
+      labelLayout: "fixed",
+      labelCol: {
+        span: 5,
+      },
+      wrapperCol: {
+        span: 19,
+      },
+    },
+    children: [],
+  },
+  config: {
+    attribute: [
+      {
+        label: "Name",
+        type: "input",
+        field: "componentProps.name",
+      },
+      {
+        label: "表单布局",
+        type: "radio",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "水平",
+              value: "horizontal",
+            },
+            {
+              label: "垂直",
+              value: "vertical",
+            },
+            {
+              label: "内联",
+              value: "inline",
+            },
+          ],
+          "option-type": "button"
+        },
+        field: "componentProps.layout",
+      },
+      {
+        label: "标签布局",
+        type: "radio",
+        field: "componentProps.labelLayout",
+        componentProps: {
+          options: [
+            {
+              label: "固定宽度",
+              value: "fixed",
+            },
+            {
+              label: "自适应宽度",
+              value: "flex",
+            },
+          ],
+          "option-type": "button"
+        },
+      },
+      {
+        label: "标签宽度",
+        type: "EInputSize",
+        field: "componentProps.labelWidth",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "fixed";
+        },
+      },
+      {
+        label: "标签占比",
+        type: "input",
+        field: "componentProps.labelCol.span",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "flex";
+        },
+        componentProps: {
+          placeholder: "请输入",
+        }
+      },
+      {
+        label: "控件占比",
+        type: "input",
+        field: "componentProps.wrapperCol.span",
+        show: ({ values }) => {
+          return values.componentProps?.labelLayout === "flex";
+        },
+        componentProps: {
+          placeholder: "请输入",
+        }
+      },
+      {
+        label: "标签对齐",
+        type: "radio",
+        componentProps: {
+          options: [
+            {
+              label: "左",
+              value: "left",
+            },
+            {
+              label: "右",
+              value: "right",
+            },
+          ],
+          "option-type": "button"
+        },
+        field: "componentProps.labelAlign",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        defaultValue: "default",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "大号",
+              value: "large",
+            },
+            {
+              label: "中等",
+              value: "middle",
+            },
+            {
+              label: "小型",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "隐藏冒号",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.colon",
+      },
+      {
+        label: "隐藏必须标志",
+        type: "switch",
+        field: "componentProps.hideRequiredMark",
+      },
+
+      {
+        label: "标签文本换行",
+        type: "switch",
+        field: "componentProps.labelWrap",
+      },
+      {
+        label: "滚动校验错误处",
+        type: "switch",
+        field: "componentProps.scrollToFirstError",
+      },
+      {
+        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/antd/form-item/formItem.vue

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

package/packages/ui/antd/form-item/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/antd/index.less

@@ -0,0 +1,33 @@
+.epic-designer-main {
+  .ant-input-number {
+    width: 100%;
+  }
+
+  .ant-collapse-content > .ant-collapse-content-box {
+    padding: 8px;
+  }
+
+  .ant-select {
+    width: 100%;
+  }
+
+  .epic-upload-image {
+    .avatar-uploader > .ant-upload {
+      width: 128px;
+      height: 128px;
+    }
+  }
+}
+
+// 适配k-input-size样式
+.epic-input-size {
+  &.ant-input-affix-wrapper {
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+  .ant-select:hover {
+    border: none !important;
+    box-shadow: none !important;
+  }
+}

package/packages/ui/antd/index.ts

@@ -0,0 +1,306 @@
+// 注册ant-design-vue ui
+import { pluginManager as pManager, type PluginManager } from "epic-designer-gold";
+import dayjs from "dayjs";
+
+import Input from "./input";
+import Textarea from "./textarea";
+import InputNumber from "./input-number";
+import InputPassword from "./input-password";
+import Radio from "./radio";
+import Checkbox from "./checkbox";
+import Select from "./select";
+import Slider from "./slider";
+import TimePicker from "./time-picker";
+import DatePicker from "./date-picker";
+import Cascader from "./cascader";
+import Switch from "./switch";
+import UploadImage from "./upload-image";
+import UploadFile from "./upload-file";
+import Card from "./card";
+import Row from "./row";
+import Col from "./col";
+import Form from "./form";
+import FormItem from "./form-item";
+import Button from "./button";
+import Modal from "./modal";
+import colorPicker from "./color-picker";
+import { version } from "ant-design-vue";
+
+export function setupAntd(pluginManager: PluginManager = pManager): void {
+  // 版本兼容处理 start
+  const versionArray = version.split(".");
+  // 获取版本号第一个数字
+  const firstNumber = parseInt(versionArray[0]);
+
+  // 创建一个 style 标签
+  const style = document.createElement("style");
+
+  // 大于v3版本
+  if (firstNumber > 3) {
+    // 定义 CSS 样式
+    const css = `
+.epic-modal-ant .epic-modal-main {
+  padding: 4px 12px 12px;
+}
+.epic-modal-ant .ant-modal-title {
+  padding: 16px 16px 0px;
+}
+.epic-modal-ant .ant-modal-content {
+  padding: 0px;
+}`;
+    style.appendChild(document.createTextNode(css));
+    // 将 style 标签插入到页面的 head 中
+    document.head.appendChild(style);
+    // 版本兼容处理 end
+  } else {
+    // v3版本
+    Form.config.attribute = Form.config.attribute?.filter((item) => item.label !== "禁用");
+  }
+
+  // 加载组件
+  pluginManager.component("Collapse", async () => (await import("ant-design-vue")).Collapse);
+  pluginManager.component("CollapseItem", async () => (await import("ant-design-vue")).CollapsePanel);
+  pluginManager.component("Tabs", async () => (await import("ant-design-vue")).Tabs);
+  pluginManager.component("TabPane", async () => (await import("ant-design-vue")).TabPane);
+
+  const componentArray = [
+    Form,
+    FormItem,
+    Input,
+    Textarea,
+    InputNumber,
+    InputPassword,
+    Radio,
+    Checkbox,
+    Select,
+    Slider,
+    TimePicker,
+    DatePicker,
+    Cascader,
+    Switch,
+    UploadImage,
+    UploadFile,
+    colorPicker,
+    Button,
+    Card,
+    Row,
+    Col,
+    Modal,
+  ];
+
+  componentArray.forEach((item) => {
+    pluginManager.registerComponent(item);
+    pluginManager.addBaseComponentTypes(item.defaultSchema.type);
+  });
+
+  // ui初始化完成。
+  pluginManager.setInitialized(true);
+}
+
+/**
+ * 设置 Day.js 的日期语言环境
+ * @param {string} locale - 日期语言环境，例如 'zh-cn', 'en', 'fr-fr' 等
+ */
+export function setDateLocale(locale = "zh-cn") {
+  // 设置 Day.js 的日期语言环境
+  dayjs.locale(locale);
+
+  // 根据不同的 locale 参数导入对应的 Day.js 语言环境
+  switch (locale.toLowerCase()) {
+    case "az-az":
+      import("dayjs/locale/az");
+      break;
+    case "bg-bg":
+      import("dayjs/locale/bg");
+      break;
+    case "bn-bd":
+      import("dayjs/locale/bn-bd");
+      break;
+    case "by-by":
+      import("dayjs/locale/be");
+      break;
+    case "ca-es":
+      import("dayjs/locale/ca");
+      break;
+    case "cs-cz":
+      import("dayjs/locale/cs");
+      break;
+    case "da-dk":
+      import("dayjs/locale/da");
+      break;
+    case "de-de":
+      import("dayjs/locale/de");
+      break;
+    case "el-gr":
+      import("dayjs/locale/el");
+      break;
+    case "en-gb":
+      import("dayjs/locale/en-gb");
+      break;
+    case "en-us":
+      import("dayjs/locale/en");
+      break;
+    case "es-es":
+      import("dayjs/locale/es");
+      break;
+    case "et-ee":
+      import("dayjs/locale/et");
+      break;
+    case "fa-ir":
+      import("dayjs/locale/fa");
+      break;
+    case "fi-fi":
+      import("dayjs/locale/fi");
+      break;
+      // case "fr-be":
+      //   import(`dayjs/locale/fr-be`);
+      break;
+    case "fr-ca":
+      import("dayjs/locale/fr-ca");
+      break;
+    case "fr-fr":
+      import("dayjs/locale/fr");
+      break;
+    case "ga-ie":
+      import("dayjs/locale/ga");
+      break;
+    case "gl-es":
+      import("dayjs/locale/gl");
+      break;
+    case "he-il":
+      import("dayjs/locale/he");
+      break;
+    case "hi-in":
+      import("dayjs/locale/hi");
+      break;
+    case "hr-hr":
+      import("dayjs/locale/hr");
+      break;
+    case "hu-hu":
+      import("dayjs/locale/hu");
+      break;
+    case "hy-am":
+      import("dayjs/locale/hy-am");
+      break;
+    case "id-id":
+      import("dayjs/locale/id");
+      break;
+    case "is-is":
+      import("dayjs/locale/is");
+      break;
+    case "it-it":
+      import("dayjs/locale/it");
+      break;
+    case "ja-jp":
+      import("dayjs/locale/ja");
+      break;
+    case "ka-ge":
+      import("dayjs/locale/ka");
+      break;
+    case "kk-kz":
+      import("dayjs/locale/kk");
+      break;
+    case "km-kh":
+      import("dayjs/locale/km");
+      break;
+    case "kmr-iq":
+      import("dayjs/locale/ku");
+      break;
+    case "kn-in":
+      import("dayjs/locale/kn");
+      break;
+    case "ko-kr":
+      import("dayjs/locale/ko");
+      break;
+    case "ku-iq":
+      import("dayjs/locale/ku");
+      break;
+    case "lt-lt":
+      import("dayjs/locale/lt");
+      break;
+    case "lv-lv":
+      import("dayjs/locale/lv");
+      break;
+    case "mk-mk":
+      import("dayjs/locale/mk");
+      break;
+    case "ml-in":
+      import("dayjs/locale/ml");
+      break;
+    case "mn-mn":
+      import("dayjs/locale/mn");
+      break;
+    case "ms-my":
+      import("dayjs/locale/ms-my");
+      break;
+    case "nb-no":
+      import("dayjs/locale/nb");
+      break;
+    case "ne-np":
+      import("dayjs/locale/ne");
+      break;
+    case "nl-be":
+      import("dayjs/locale/nl-be");
+      break;
+    case "nl-nl":
+      import("dayjs/locale/nl");
+      break;
+    case "pl-pl":
+      import("dayjs/locale/pl");
+      break;
+    case "pt-br":
+      import("dayjs/locale/pt-br");
+      break;
+    case "pt-pt":
+      import("dayjs/locale/pt");
+      break;
+    case "ro-ro":
+      import("dayjs/locale/ro");
+      break;
+    case "ru-ru":
+      import("dayjs/locale/ru");
+      break;
+    case "sk-sk":
+      import("dayjs/locale/sk");
+      break;
+    case "sl-si":
+      import("dayjs/locale/sl");
+      break;
+    case "sr-rs":
+      import("dayjs/locale/sr");
+      break;
+    case "sv-se":
+      import("dayjs/locale/sv");
+      break;
+    case "ta-in":
+      import("dayjs/locale/ta");
+      break;
+    case "th-th":
+      import("dayjs/locale/th");
+      break;
+    case "tr-tr":
+      import("dayjs/locale/tr");
+      break;
+    case "uk-ua":
+      import("dayjs/locale/uk");
+      break;
+    case "ur-pk":
+      import("dayjs/locale/ur");
+      break;
+    case "vi-vn":
+      import("dayjs/locale/vi");
+      break;
+    case "zh-cn":
+      import("dayjs/locale/zh-cn");
+      break;
+    case "zh-hk":
+      import("dayjs/locale/zh-hk");
+      break;
+    case "zh-tw":
+      import("dayjs/locale/zh-tw");
+      break;
+    default:
+      // Default action if locale is not found
+      break;
+  }
+}