form-designer-xinyi 1.0.0

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

@@ -0,0 +1,152 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).InputPassword,
+  groupName: "表单",
+  icon: "epic-icon-mima",
+  defaultSchema: {
+    label: "密码输入框",
+    type: "password",
+    field: "password",
+    input: true,
+    componentProps: {
+      placeholder: "请输入",
+    },
+  },
+  config: {
+    attribute: [
+      {
+        label: "字段名",
+        type: "input",
+        field: "field",
+      },
+      {
+        label: "标题",
+        type: "input",
+        field: "label",
+      },
+      {
+        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",
+        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.visible",
+      },
+      {
+        label: "隐藏切换按钮",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.visibilityToggle",
+      },
+      {
+        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;

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

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

package/packages/ui/antd/modal/modal.vue

@@ -0,0 +1,82 @@
+<template>
+  <Modal v-bind="componentSchema">
+    <div class="epic-modal-main">
+      <slot name="edit-node">
+        <template v-if="children.length">
+          <slot v-for="item in children" name="node" :componentSchema="item" />
+        </template>
+        <slot v-else></slot>
+      </slot>
+    </div>
+    <div class="epic-modal-footer">
+      <Space align="end">
+        <Button @click="handleClose">关闭</Button>
+        <Button type="primary" @click="handleOk">{{
+          componentSchema.okText ?? "确定"
+        }}</Button>
+      </Space>
+    </div>
+  </Modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, h, type PropType, useAttrs } from "vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+import { Modal, Button, Space } from "ant-design-vue";
+import { version } from "ant-design-vue";
+  const versionArray = version.split(".");
+  // 获取版本号第一个数字
+  const firstNumber = parseInt(versionArray[0]);
+
+const attrs = useAttrs()
+const props = defineProps({
+  componentSchema: {
+    type: Object as PropType<ComponentSchema>,
+    default: () => ({}),
+  },
+})
+
+const emits = defineEmits(["ok", "close", "update:modelValue"])
+const dialogStyle = {
+  position: "absolute",
+  right: "150px",
+  left: "150px",
+  minWidth: "700px",
+  width: "auto",
+  top: "56px",
+  bottom: "30px",
+  minHeight: "500px",
+};
+
+const bodyStyle = {
+  height: "calc(100vh - 108px)",
+  padding: 0,
+};
+
+const componentSchema = computed<Record<string, any>>(() => ({
+  ...props.componentSchema,
+  ...attrs,
+  title: props.componentSchema?.label ?? "",
+  wrapClassName: "epic-modal-ant",
+  open: attrs.modelValue,
+  visible: firstNumber > 3 ? undefined : attrs.modelValue,
+  "onUpdate:open": handleClose,
+  "onUpdate:visible": handleClose,
+  style: "top:20px",
+  bodyStyle,
+  dialogStyle,
+  footer: null,
+  children: null
+}))
+
+const children = props.componentSchema.children ?? [];
+
+function handleOk() {
+  emits("ok");
+}
+
+function handleClose() {
+  emits("update:modelValue", false);
+  emits("close");
+}
+</script>

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

@@ -0,0 +1,105 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: async () => (await import("ant-design-vue")).RadioGroup,
+  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",
+        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: "button",
+          unCheckedValue: "default",
+        },
+        field: "componentProps.optionType",
+      },
+      {
+        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: "值变化时",
+      },
+    ],
+  },
+  bindModel: "value",
+} as ComponentConfigModel;

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

@@ -0,0 +1,114 @@
+import { type ComponentConfigModel } from "@epic-designer/utils";
+export default {
+  component: () => import("./row"),
+  groupName: "布局",
+  icon: "epic-icon-zhage",
+  defaultSchema: {
+    label: "栅格布局",
+    type: "row",
+    children: [
+      {
+        type: "col",
+        children: [],
+        componentProps: {
+          span: 12,
+        },
+      },
+      {
+        type: "col",
+        children: [],
+        componentProps: {
+          span: 12,
+        },
+      },
+    ],
+  },
+  editConstraints: {
+    childImmovable: true,
+  },
+  config: {
+    attribute: [
+      {
+        label: "垂直对齐方式",
+        type: "select",
+        componentProps: {
+          style: { width: "100%" },
+          options: [
+            {
+              label: "top",
+              value: "top",
+            },
+            {
+              label: "middle",
+              value: "middle",
+            },
+            {
+              label: "bottom",
+              value: "bottom",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.align",
+      },
+      {
+        label: "水平排列方式",
+        type: "select",
+        componentProps: {
+          style: { width: "100%" },
+          options: [
+            {
+              label: "start",
+              value: "start",
+            },
+            {
+              label: "end",
+              value: "end",
+            },
+            {
+              label: "center",
+              value: "center",
+            },
+            {
+              label: "space-around",
+              value: "space-around",
+            },
+            {
+              label: "space-between",
+              value: "space-between",
+            },
+          ],
+          placeholder: "请选择",
+        },
+        field: "componentProps.justify",
+      },
+      {
+        label: "栅格间距",
+        type: "input",
+        field: "componentProps.gutter",
+        componentProps: {
+          placeholder: "请输入",
+        },
+      },
+      {
+        label: "列编辑",
+        type: "EColEditor",
+        field: "children",
+      },
+      {
+        label: "不自动换行",
+        type: "switch",
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: "componentProps.wrap",
+      },
+      {
+        label: "隐藏",
+        type: "switch",
+        field: "componentProps.hidden",
+      },
+    ],
+  },
+} as ComponentConfigModel;

package/packages/ui/antd/row/row.ts

@@ -0,0 +1,31 @@
+import { defineComponent, h, renderSlot, type PropType } from "vue";
+import { Row } from "ant-design-vue";
+import { type ComponentSchema } from "@epic-designer/core/types/epic-designer";
+export default defineComponent({
+  props: {
+    componentSchema: {
+      type: Object as PropType<ComponentSchema>,
+      require: true,
+      default: () => ({}),
+    },
+  },
+  setup(props, { attrs, slots }) {
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        title: props.componentSchema?.label ?? "",
+      } as any;
+      const children = componentSchema.children;
+      delete componentSchema.children;
+
+      return h(Row, componentSchema, {
+        default: () =>
+          renderSlot(slots, "edit-node", {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, "node", { componentSchema: subcomponentSchema })
+            )
+          ),
+      });
+    };
+  },
+});