@epic-designer/antd 1.0.5

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@epic-designer/antd",
+  "version": "1.0.5",
+  "description": "epic-designer base antd ui",
+  "private": false,
+  "author": "kchengz",
+  "type": "module",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "peerDependencies": {
+    "ant-design-vue": ">=3.2.20",
+    "epic-designer": ">=1.0.5",
+    "vue": ">=3.1.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-alias": "^6.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "ant-design-vue": "^4.2.6",
+    "tsx": "^4.20.6",
+    "unbuild": "^3.6.1"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "stub": "tsx dev-stub.ts"
+  }
+}

package/src/button/button.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { Button } from 'ant-design-vue';
+
+const props = defineProps({
+  componentSchema: {
+    default: () => ({}),
+    type: Object as PropType<ComponentSchema>,
+  },
+});
+</script>
+<template>
+  <Button v-bind="props.componentSchema?.componentProps">
+    <slot>{{ props.componentSchema?.label }}</slot>
+  </Button>
+</template>

package/src/button/index.ts

@@ -0,0 +1,204 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./button.vue'),
+  config: {
+    attribute: [
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          clearable: true,
+          options: [
+            {
+              label: 'primary',
+              value: 'primary',
+            },
+            {
+              label: 'ghost',
+              value: 'ghost',
+            },
+            {
+              label: 'dashed',
+              value: 'dashed',
+            },
+            {
+              label: 'link',
+              value: 'link',
+            },
+            {
+              label: 'text',
+              value: 'text',
+            },
+            {
+              label: 'default',
+              value: 'default',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.type',
+        label: '类型',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          clearable: true,
+          options: [
+            {
+              label: 'button',
+              value: 'button',
+            },
+            {
+              label: 'submit',
+              value: 'submit',
+            },
+            {
+              label: 'reset',
+              value: 'reset',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.htmlType',
+        label: '操作类型',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          placeholder: '请输入',
+        },
+        field: 'componentProps.href',
+        label: '链接',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          clearable: true,
+          options: [
+            {
+              label: 'blank',
+              value: '_blank',
+            },
+            {
+              label: 'parent',
+              value: '_parent',
+            },
+            {
+              label: 'self',
+              value: '_self',
+            },
+            {
+              label: 'top',
+              value: '_top',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.target',
+        label: '链接打开方式',
+        show: ({ values }) => values.componentProps?.href,
+        type: 'select',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'default',
+              value: 'default',
+            },
+            {
+              label: 'small',
+              value: 'small',
+            },
+            {
+              label: 'large',
+              value: 'large',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          clearable: true,
+          options: [
+            {
+              label: 'default',
+              value: 'default',
+            },
+            {
+              label: 'circle',
+              value: 'circle',
+            },
+            {
+              label: 'round',
+              value: 'round',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.shape',
+        label: '形状',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.ghost',
+        label: '幽灵按钮',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.loading',
+        label: '加载状态',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.block',
+        label: '宽度自适应',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.danger',
+        label: '危险按钮',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+    ],
+    event: [
+      {
+        description: '点击按钮时',
+        type: 'click',
+      },
+      {
+        description: '双击按钮时',
+        type: 'dblclick',
+      },
+    ],
+  },
+  defaultSchema: {
+    field: 'input',
+    input: false,
+    label: '按钮',
+    type: 'button',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--fit-screen-rounded',
+  sort: 1200,
+} as ComponentConfigModel;

package/src/card/card.ts

@@ -0,0 +1,38 @@
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { defineComponent, h, renderSlot } from 'vue';
+
+import { Card } 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 Record<string, any>;
+      const children = componentSchema.children ?? [];
+      delete componentSchema.children;
+
+      return h(Card, componentSchema, {
+        default: () =>
+          renderSlot(slots, 'edit-node', {}, () =>
+            children.map((subcomponentSchema: ComponentSchema) =>
+              renderSlot(slots, 'node', {
+                componentSchema: subcomponentSchema,
+              }),
+            ),
+          ),
+      });
+    };
+  },
+});

package/src/card/index.ts

@@ -0,0 +1,65 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./card'),
+  config: {
+    attribute: [
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'default',
+              value: 'default',
+            },
+            {
+              label: 'small',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hoverable',
+        label: '鼠标悬停阴影',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.loading',
+        label: '加载状态',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+    ],
+  },
+  defaultSchema: {
+    label: '卡片布局',
+    type: 'card',
+    children: [],
+  },
+  groupName: '布局',
+  icon: 'icon--epic--wysiwyg-rounded',
+  sort: 700,
+} as ComponentConfigModel;

package/src/cascader/cascader.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+import { Cascader } from 'ant-design-vue';
+
+const emits = defineEmits<{
+  'update:modelValue': any;
+}>();
+const attrs = useAttrs();
+const getComponentProps = computed(() => ({
+  ...attrs,
+  'onUpdate:value': handleUpdate,
+  showCheckedStrategy:
+    Cascader[(attrs.showCheckedStrategy as string) ?? 'SHOW_PARENT'],
+  value: attrs.modelValue,
+}));
+
+function handleUpdate(e = null): void {
+  emits('update:modelValue', e);
+}
+</script>
+<template>
+  <Cascader v-bind="getComponentProps" />
+</template>

package/src/cascader/index.ts

@@ -0,0 +1,201 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Cascader,
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'cascader',
+      },
+      {
+        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: {
+          allowClear: true,
+          options: [
+            {
+              label: 'bottomLeft',
+              value: 'bottomLeft',
+            },
+            {
+              label: 'bottomRight',
+              value: 'bottomRight',
+            },
+            {
+              label: 'topLeft',
+              value: 'topLeft',
+            },
+            {
+              label: 'topRight',
+              value: 'topRight',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.placement',
+        label: '弹出框位置',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.showSearch',
+        label: '可搜索',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.multiple',
+        label: '多选',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxTagTextLength',
+        label: '标签最大长度',
+        show: ({ values }) => values.componentProps.multiple,
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxTagCount',
+        label: '标签显示数量',
+        show: ({ values }) => values.componentProps.multiple,
+        type: 'number',
+      },
+
+      {
+        componentProps: {
+          clearable: true,
+          options: [
+            {
+              label: 'SHOW_PARENT',
+              value: 'SHOW_PARENT',
+            },
+            {
+              label: 'SHOW_CHILD',
+              value: 'SHOW_CHILD',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.showCheckedStrategy',
+        label: '回填方式',
+        show: ({ values }) => values.componentProps.multiple,
+        type: 'select',
+      },
+
+      {
+        field: 'componentProps.allowClear',
+        label: '可清空',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          tree: true,
+        },
+        field: 'componentProps.options',
+        label: '选项管理',
+        layout: 'vertical',
+        type: 'EOptionsEditor',
+      },
+      {
+        componentProps: {
+          ruleType: 'array',
+        },
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值变化时',
+        type: 'change',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '选项1',
+        },
+        {
+          label: '选项2',
+          value: '选项2',
+        },
+      ],
+      placeholder: '请选择',
+    },
+    field: 'cascader',
+    input: true,
+    label: '级联选择器',
+    type: 'cascader',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--full-coverage-outline',
+  sort: 900,
+} as ComponentConfigModel;

package/src/checkbox/index.ts

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