@epic-designer/antd 1.0.5

package/src/input-number/index.ts

@@ -0,0 +1,182 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).InputNumber,
+  config: {
+    action: [
+      {
+        description: '使 input 获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '使 input 失去焦点',
+        type: 'blur',
+      },
+      {
+        description: '选中 input 中的文字',
+        type: 'select',
+      },
+    ],
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+          size: 'middle',
+        },
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'number',
+      },
+      {
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.keyboard',
+        label: '键盘快捷行为',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.max',
+        label: '最大值',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.min',
+        label: '最小值',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.precision',
+        label: '精度',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.step',
+        label: '步长',
+        type: 'number',
+      },
+      {
+        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: 'switch',
+      },
+      {
+        componentProps: {
+          ruleType: 'number',
+        },
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '输入值',
+        type: 'input',
+      },
+      {
+        description: '值修改',
+        type: 'change',
+      },
+      {
+        description: '按下回车的回调',
+        type: 'pressEnter',
+      },
+      {
+        description: '获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '失去焦点',
+        type: 'blur',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      placeholder: '请输入',
+      style: { width: '100%' },
+    },
+    field: 'number',
+    input: true,
+    label: '数字输入框',
+    type: 'number',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--123-rounded',
+  sort: 710,
+} as ComponentConfigModel;

package/src/input-password/index.ts

@@ -0,0 +1,154 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).InputPassword,
+  config: {
+    action: [
+      {
+        description: '使 input 获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '使 input 失去焦点',
+        type: 'blur',
+      },
+      {
+        description: '选中 input 中的文字',
+        type: 'select',
+      },
+    ],
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxLength',
+        label: '最大输入长度',
+        type: 'number',
+      },
+      {
+        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: 'switch',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '输入值',
+        type: 'input',
+      },
+      {
+        description: '值修改',
+        type: 'change',
+      },
+      {
+        description: '按下回车的回调',
+        type: 'pressEnter',
+      },
+      {
+        description: '获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '失去焦点',
+        type: 'blur',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      placeholder: '请输入',
+    },
+    field: 'password',
+    input: true,
+    label: '密码输入框',
+    type: 'password',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--lock-outline',
+  sort: 720,
+} as ComponentConfigModel;

package/src/modal/index.ts

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

package/src/modal/modal.vue

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

package/src/radio/index.ts

@@ -0,0 +1,107 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).RadioGroup,
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'radio',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          checkedValue: 'button',
+          unCheckedValue: 'default',
+        },
+        field: 'componentProps.optionType',
+        label: '按钮样式',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.options',
+        label: '选项管理',
+        layout: 'vertical',
+        type: 'EOptionsEditor',
+      },
+      {
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值变化时',
+        type: 'change',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '选项1',
+        },
+        {
+          label: '选项2',
+          value: '选项2',
+        },
+      ],
+    },
+    field: 'radio',
+    input: true,
+    label: '单选框',
+    type: 'radio',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--radio-button-checked-outline',
+  sort: 850,
+} as ComponentConfigModel;

package/src/row/index.ts

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

package/src/row/row.ts

@@ -0,0 +1,38 @@
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { defineComponent, h, renderSlot } from 'vue';
+
+import { Row } from 'ant-design-vue';
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      default: () => ({}),
+      require: true,
+      type: Object as PropType<ComponentSchema>,
+    },
+  },
+  setup(props, { 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,
+              }),
+            ),
+          ),
+      });
+    };
+  },
+});