form-designer-xinyi 1.0.0

package/packages/ui/antd/index.ts

@@ -0,0 +1,323 @@
+// 注册ant-design-vue ui
+import { pluginManager as pManager, type PluginManager } from "epic-designer";
+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 FormLogic from "./formLogic";
+
+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,
+    FormLogic,
+    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;
+  }
+}

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

@@ -0,0 +1,169 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Input,
+  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.placeholder",
+      },
+      {
+        label: "默认值",
+        type: "input",
+        field: "componentProps.defaultValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "输入类型",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "number",
+              value: "number",
+            },
+            {
+              label: "password",
+              value: "password",
+            },
+          ],
+        },
+        field: "componentProps.type",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "最大输入长度",
+        type: "number",
+        field: "componentProps.maxlength",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "展示字数",
+        type: "switch",
+        field: "componentProps.showCount",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        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: "pressEnter",
+        describe: "按下回车时",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点时",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点时",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使输入框获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使输入框失去焦点",
+      },
+      {
+        type: "select",
+        describe: "选中输入框中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,181 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+
+export default {
+  component: async () => (await import("ant-design-vue")).InputNumber,
+  groupName: "表单",
+  icon: "epic-icon-number",
+  defaultSchema: {
+    label: "数字输入框",
+    type: "number",
+    field: "number",
+    input: true,
+    componentProps: {
+      style: { width: "100%" },
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "number",
+        field: "componentProps.defaultValue",
+        componentProps: {
+          placeholder: "请输入",
+          size: "middle",
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "large",
+              value: "large",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "键盘快捷行为",
+        type: "switch",
+        field: "componentProps.keyboard",
+      },
+      {
+        label: "最大值",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最小值",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "精度",
+        type: "number",
+        field: "componentProps.precision",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "步长",
+        type: "number",
+        field: "componentProps.step",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "字符模式",
+        type: "switch",
+        field: "componentProps.stringMode",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        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: "input",
+        describe: "输入值",
+      },
+      {
+        type: "change",
+        describe: "值修改",
+      },
+      {
+        type: "pressEnter",
+        describe: "按下回车的回调",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;