form-designer-xinyi 1.0.0

package/packages/ui/naiveUi/index.ts

@@ -0,0 +1,80 @@
+// 注册naive-ui
+import { pluginManager as pManager, type PluginManager } from "epic-designer";
+import Input from "./input";
+import InputNumber from "./input-number";
+import Form from "./form";
+import FormItem from "./form-item";
+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 { NTabPane } from "naive-ui";
+import UploadFile from "./upload-file";
+import UploadImage from "./upload-image";
+import Modal from "./modal";
+
+export function setupNaiveUi(pluginManager: PluginManager = pManager): void {
+  // 异步加载组件
+  pluginManager.component(
+    "FormItem",
+    async () => (await import("naive-ui/lib/form")).NFormItem
+  );
+  // eslint-disable-next-line vue/multi-word-component-names
+  pluginManager.component(
+    "Tabs",
+    async () => (await import("naive-ui/lib/tabs")).NTabs
+  );
+
+  pluginManager.component("TabPane", NTabPane);
+  // eslint-disable-next-line vue/multi-word-component-names
+  pluginManager.component(
+    "Collapse",
+    async () => (await import("naive-ui/lib/collapse")).NCollapse
+  );
+  pluginManager.component(
+    "CollapseItem",
+    async () => (await import("naive-ui/lib/collapse")).NCollapseItem
+  );
+
+  const componentArray = [
+    Form,
+    FormItem,
+    Input,
+    InputNumber,
+    Radio,
+    Checkbox,
+    DatePicker,
+    Select,
+    Switch,
+    ColorPicker,
+    Cascader,
+    Slider,
+    UploadFile,
+    UploadImage,
+    Button,
+    Card,
+    Row,
+    Col,
+    Collapse,
+    CollapseItem,
+    Modal,
+  ];
+
+  componentArray.forEach((item) => {
+    pluginManager.registerComponent(item);
+    pluginManager.addBaseComponentTypes(item.defaultSchema.type);
+  });
+
+  // ui初始化完成。
+  pluginManager.setInitialized(true);
+}

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

@@ -0,0 +1,215 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("naive-ui/lib/input")).NInput,
+  groupName: "表单",
+  icon: "epic-icon-write",
+  defaultSchema: {
+    label: "输入框",
+    type: "input",
+    field: "input",
+    input: true,
+    componentProps: {
+      defaultValue: "",
+      placeholder: "请输入",
+      type: "text",
+    },
+  },
+  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",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "tiny",
+              value: "tiny",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "输入类型",
+        type: "select",
+        defaultValue: "text",
+        componentProps: {
+          options: [
+            {
+              label: "text",
+              value: "text",
+            },
+            {
+              label: "textarea",
+              value: "textarea",
+            },
+            {
+              label: "password",
+              value: "password",
+            },
+          ],
+        },
+        field: "componentProps.type",
+        onChange: ({ value, values }) => {
+          if (value != "text") values.componentProps.pair = false;
+        },
+      },
+      {
+        label: "最大输入长度",
+        type: "number",
+        field: "componentProps.maxlength",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "显示密码的时机",
+        type: "select",
+        field: "componentProps.showPasswordOn",
+        componentProps: {
+          options: [
+            {
+              label: "click",
+              value: "click",
+            },
+            {
+              label: "mousedown",
+              value: "mousedown",
+            },
+          ],
+          clearable: true,
+        },
+        show: ({ values }) => values.componentProps.type === "password",
+      },
+      {
+        label: "行数",
+        type: "number",
+        field: "componentProps.rows",
+        show: ({ values }) => values.componentProps.type === "textarea",
+      },
+      {
+        label: "是否输入成对值",
+        type: "switch",
+        field: "componentProps.pair",
+        show: ({ values }) => values.componentProps.type === "text",
+      },
+      {
+        label: "分割符",
+        type: "input",
+        field: "componentProps.separator",
+        show: ({ values }) =>
+          values.componentProps.type === "text" && values.componentProps.pair,
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "是否圆角",
+        type: "switch",
+        field: "componentProps.round",
+      },
+      {
+        label: "是否统计字数",
+        type: "switch",
+        field: "componentProps.showCount",
+      },
+      {
+        label: "自适应内容高度",
+        type: "switch",
+        field: "componentProps.autosize",
+        show: ({ values }) => values.componentProps.type === "textarea",
+      },
+      {
+        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: "失去焦点",
+      },
+    ],
+    action: [
+      {
+        type: "focus",
+        describe: "使 input 获取焦点",
+      },
+      {
+        type: "blur",
+        describe: "使 input 失去焦点",
+      },
+      {
+        type: "clear",
+        describe: "清除 input 值",
+      },
+      {
+        type: "select",
+        describe: "选中 input 中的文字",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,141 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () =>
+    (await import("naive-ui/lib/input-number")).NInputNumber,
+  groupName: "表单",
+  icon: "epic-icon-number",
+  defaultSchema: {
+    label: "数字输入框",
+    type: "number",
+    field: "number",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+      buttonPlacement: "right",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "number",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "占位内容",
+        type: "input",
+        field: "componentProps.placeholder",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "tiny",
+              value: "tiny",
+            },
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "控制按钮位置",
+        type: "select",
+        field: "componentProps.buttonPlacement",
+        componentProps: {
+          options: [
+            {
+              label: "both",
+              value: "both",
+            },
+            {
+              label: "right",
+              value: "right",
+            },
+          ],
+        },
+      },
+      {
+        label: "最大值",
+        type: "number",
+        field: "componentProps.max",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "最小值",
+        type: "number",
+        field: "componentProps.min",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "步长",
+        type: "number",
+        field: "componentProps.step",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "精度",
+        type: "number",
+        field: "componentProps.precision",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        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: "校验规则需要配合表单使用",
+        componentProps: {
+          ruleType: "number",
+        },
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

package/packages/ui/naiveUi/modal/index.ts

@@ -0,0 +1,18 @@
+import { type ComponentConfigModel } from '@epic-designer/utils'
+export default {
+  component:  () => import('./modal'),
+  defaultSchema: {
+    label: '模态框',
+    type: 'modal',
+    children: []
+  },
+  config: {
+    attribute: [
+      {
+        label: '标题',
+        type: 'input',
+        field: 'title'
+      }
+    ]
+  }
+} as ComponentConfigModel

package/packages/ui/naiveUi/modal/modal.ts

@@ -0,0 +1,83 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+import { NModal, NButton, NSpace } from "naive-ui";
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      default: () => ({}),
+    },
+  },
+  emits: ["ok", "close", "update:modelValue"],
+  setup(props, { attrs, slots, emit }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        ...attrs,
+        title: props.componentSchema?.label ?? "",
+        class: "epic-modal-n",
+        preset: "card",
+        show: attrs.modelValue,
+        "onUpdate:show": handleClose,
+      } as Record<string, any>;
+      const children = componentSchema.children ?? [];
+      delete componentSchema.children;
+
+      let vNodeClildren: any = null;
+      if (children.length) {
+        vNodeClildren = () =>
+          children.map((node: ComponentSchema) =>
+            renderSlot(slots, "node", { componentSchema: node })
+          );
+      } else {
+        vNodeClildren = () => [renderSlot(slots, "default")];
+      }
+
+      function handleOk() {
+        emit("ok");
+      }
+
+      function handleClose() {
+        emit("update:modelValue", false);
+        emit("close");
+      }
+
+      return h(NModal, componentSchema, {
+        default: () => [
+          h(
+            "div",
+            { class: "epic-modal-main" },
+            renderSlot(slots, "edit-node", {}, vNodeClildren)
+          ),
+          h(
+            "div",
+            { class: "epic-modal-footer" },
+            h(
+              NSpace,
+              { justify: "end" },
+              {
+                default: () => [
+                  h(
+                    NButton,
+                    { onClick: handleClose },
+                    {
+                      default: () => "关闭",
+                    }
+                  ),
+                  h(
+                    NButton,
+                    { type: "primary", onClick: handleOk },
+                    {
+                      default: () => componentSchema.okText ?? "确定",
+                    }
+                  ),
+                ],
+              }
+            )
+          ),
+        ],
+      });
+    };
+  },
+});

package/packages/ui/naiveUi/radio/index.ts

@@ -0,0 +1,94 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./radio"),
+  groupName: "表单",
+  icon: "epic-icon-danxuan-cuxiantiao",
+  defaultSchema: {
+    label: "单选框",
+    type: "radio",
+    field: "radio",
+    input: true,
+    componentProps: {
+      options: [
+        {
+          label: "选项1",
+          value: "选项1",
+        },
+        {
+          label: "选项2",
+          value: "选项2",
+        },
+      ],
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        label: "默认值",
+        type: "radio",
+        field: "componentProps.defaultValue",
+      },
+      {
+        label: "尺寸",
+        type: "select",
+        field: "componentProps.size",
+        componentProps: {
+          options: [
+            {
+              label: "small",
+              value: "small",
+            },
+            {
+              label: "medium",
+              value: "medium",
+            },
+            {
+              label: "large",
+              value: "large",
+            },
+          ],
+        },
+      },
+      {
+        label: "禁用",
+        type: "switch",
+        field: "componentProps.disabled",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+      {
+        label: "选项管理",
+        type: "EOptionsEditor",
+        layout: "vertical",
+        field: "componentProps.options",
+        describe: "配置选项",
+      },
+      {
+        label: "表单校验",
+        type: "ERuleEditor",
+        layout: "vertical",
+        field: "rules",
+        describe: "校验规则需要配合表单使用",
+      },
+    ],
+    event: [
+      {
+        type: "change",
+        describe: "值变化时",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/naiveUi/radio/radio.ts

@@ -0,0 +1,27 @@
+import { defineComponent, h } from 'vue'
+import { NRadioGroup, NRadio } from 'naive-ui'
+
+// 二次封装组件
+export default defineComponent({
+  emits: ['update:modelValue'],
+  setup (_, { emit, attrs }) {
+    function handleUpdate (e = null): void {
+      emit('update:modelValue', e)
+    }
+
+    return () => {
+      const props: Record<string, any> = {
+        ...attrs,
+        value: attrs.modelValue,
+        'onUpdate:value': handleUpdate
+      }
+      return h(NRadioGroup, props, {
+        default: () => [
+          props.options?.map((option: any) =>
+            h(NRadio, { value: option.value, key: option.value }, { default: () => option.label })
+          )
+        ]
+      })
+    }
+  }
+})