form-designer-xinyi 1.0.0

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

@@ -0,0 +1,228 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Select,
+  groupName: "表单",
+  icon: "epic-icon-xiala",
+  defaultSchema: {
+    label: "选择框",
+    type: "select",
+    field: "select",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+      placeholder: "请选择",
+      placement: "bottomLeft",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "默认值",
+        type: "select",
+        field: "componentProps.defaultValue",
+      },
+      {
+        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: "number",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        field: "componentProps.listHeight",
+      },
+      {
+        label: "模式",
+        type: "select",
+        componentProps: {
+          options: [
+            {
+              label: "multiple",
+              value: "multiple",
+            },
+            {
+              label: "tags",
+              value: "tags",
+            },
+            {
+              label: "combobox",
+              value: "combobox",
+            },
+          ],
+          placeholder: "请选择",
+          allowClear: true,
+        },
+        field: "componentProps.mode",
+      },
+      {
+        label: "可搜索",
+        type: "switch",
+        field: "componentProps.showSearch",
+      },
+      {
+        label: "选中选项后清空搜索框",
+        type: "switch",
+        field: "componentProps.autoClearSearchValue",
+        show: ({ values }) =>
+          values.componentProps.mode && values.componentProps.showSearch,
+      },
+      {
+        label: "最大tag文本长度",
+        type: "number",
+        field: "componentProps.maxTagTextLength",
+        show: ({ values }) => values.componentProps.mode,
+      },
+      {
+        label: "最大tag显示数",
+        type: "number",
+        field: "componentProps.maxTagCount",
+        show: ({ values }) => values.componentProps.mode,
+      },
+      {
+        label: "弹出框位置",
+        type: "select",
+        componentProps: {
+          options: [
+            {
+              label: "bottomLeft",
+              value: "bottomLeft",
+            },
+            {
+              label: "bottomRight",
+              value: "bottomRight",
+            },
+            {
+              label: "topLeft",
+              value: "topLeft",
+            },
+            {
+              label: "topRight",
+              value: "topRight",
+            },
+          ],
+        },
+        field: "componentProps.placement",
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        label: "可清空",
+        type: "switch",
+        field: "componentProps.allowClear",
+      },
+      {
+        label: "labelInValue",
+        type: "switch",
+        field: "componentProps.labelInValue",
+      },
+      {
+        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: "值修改",
+      },
+      {
+        type: "focus",
+        describe: "获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "失去焦点",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,142 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Slider,
+  groupName: "表单",
+  icon: "epic-icon-menu",
+  defaultSchema: {
+    label: "滑块",
+    type: "slider",
+    field: "slider",
+    input: true,
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "slider",
+        field: "componentProps.defaultValue",
+      },
+      {
+        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.range",
+        changeSync: true,
+        onChange: ({ value, values }) => {
+          if (value) {
+            values.componentProps.defaultValue = [0, 100];
+          } else {
+            values.componentProps.defaultValue = 0;
+          }
+        },
+      },
+      {
+        label: "倒转轨道",
+        type: "switch",
+        field: "componentProps.reverse",
+      },
+      {
+        label: "步长",
+        type: "number",
+        field: "componentProps.step",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最小值",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最大值",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "垂直模式",
+        type: "switch",
+        field: "componentProps.vertical",
+      },
+      {
+        label: "显示刻度",
+        type: "switch",
+        field: "componentProps.dots",
+      },
+      // {
+      //   label: "持续显示提示",
+      //   type: "switch",
+      //   field: "componentProps.tooltipOpen",
+      // },
+      {
+        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: "afterChange",
+        describe: "与mouseup触发时机一致",
+      },
+      {
+        type: "change",
+        describe: "拖拽结束改变值时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,141 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Switch,
+  groupName: "表单",
+  icon: "epic-icon-kaiguan3",
+  defaultSchema: {
+    label: "开关",
+    type: "switch",
+    field: "switch",
+    input: true,
+    componentProps: {
+      defaultValue: false,
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "switch",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "ON状态值",
+        type: "input",
+        field: "componentProps.checkedValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+      },
+      {
+        label: "OFF状态值",
+        type: "input",
+        field: "componentProps.unCheckedValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+      },
+      {
+        label: "ON状态描述",
+        type: "input",
+        field: "componentProps.checkedChildren",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "OFF状态描述",
+        type: "input",
+        field: "componentProps.unCheckedChildren",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        componentProps: {
+          placeholder: "请选择",
+          allowClear: true,
+          options: [
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+          ],
+        },
+        field: "componentProps.size",
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "boolean",
+        },
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+  bindModel: "checked",
+} as ComponentConfigModel;
+
+function setDefaultValue(e) {
+  let defaultValue = e.values.componentProps?.unCheckedValue || false;
+  // 如果unCheckedValue === ''，则在下一个事件循环中删除 unCheckedValue 属性
+  if (e.values.componentProps.unCheckedValue === "") {
+    delete e.values.componentProps.unCheckedValue;
+  }
+
+  // 如果checkedValue === ''，则在下一个事件循环中删除 checkedValue 属性
+  if (e.values.componentProps.checkedValue === "") {
+    delete e.values.componentProps.checkedValue;
+  }
+
+  // 检查是否已经有了 componentProps 对象，如果有，将默认值赋给 defaultValue 属性
+  if (e.values.componentProps) {
+    e.values.componentProps.defaultValue = defaultValue;
+  } else {
+    // 如果没有 componentProps 对象，则创建一个新对象并添加 defaultValue 属性
+    e.values.componentProps = {
+      defaultValue,
+    };
+  }
+}

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

@@ -0,0 +1,162 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).Textarea,
+  groupName: "表单",
+  icon: "epic-icon-edit",
+  defaultSchema: {
+    label: "文本域",
+    type: "textarea",
+    field: "textarea",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "textarea",
+        field: "componentProps.defaultValue",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "最小行数",
+        type: "number",
+        field: "componentProps.autoSize.minRows",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最大行数",
+        type: "number",
+        field: "componentProps.autoSize.maxRows",
+        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: "number",
+        field: "componentProps.maxLength",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "无边框",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.bordered",
+      },
+      {
+        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: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;