@epic-designer/antd 1.0.5

package/src/select/index.ts

@@ -0,0 +1,231 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Select,
+  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: '请输入',
+        },
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.listHeight',
+        label: '弹窗高度',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'multiple',
+              value: 'multiple',
+            },
+            {
+              label: 'tags',
+              value: 'tags',
+            },
+            {
+              label: 'combobox',
+              value: 'combobox',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.mode',
+        label: '模式',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.showSearch',
+        label: '可搜索',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.autoClearSearchValue',
+        label: '选中选项后清空搜索框',
+        show: ({ values }) =>
+          values.componentProps.mode && values.componentProps.showSearch,
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.maxTagTextLength',
+        label: '最大tag文本长度',
+        show: ({ values }) => values.componentProps.mode,
+        type: 'number',
+      },
+      {
+        field: 'componentProps.maxTagCount',
+        label: '最大tag显示数',
+        show: ({ values }) => values.componentProps.mode,
+        type: 'number',
+      },
+      {
+        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',
+      },
+      {
+        componentProps: {
+          checkedValue: false,
+          unCheckedValue: true,
+        },
+        field: 'componentProps.bordered',
+        label: '无边框',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.allowClear',
+        label: '可清空',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.labelInValue',
+        label: 'labelInValue',
+        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',
+      },
+      {
+        description: '获取焦点',
+        type: 'focus',
+      },
+      {
+        description: '失去焦点',
+        type: 'blur',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      options: [
+        {
+          label: '选项1',
+          value: '选项1',
+        },
+        {
+          label: '选项2',
+          value: '选项2',
+        },
+      ],
+      placeholder: '请选择',
+    },
+    field: 'select',
+    input: true,
+    label: '选择框',
+    type: 'select',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--select',
+  sort: 900,
+} as ComponentConfigModel;

package/src/slider/index.ts

@@ -0,0 +1,145 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Slider,
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          style: {
+            width: '100%',
+          },
+        },
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'slider',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        changeSync: true,
+        field: 'componentProps.range',
+        label: '范围选择',
+        onChange: ({ value, values }) => {
+          values.componentProps.defaultValue = value ? [0, 100] : 0;
+        },
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.reverse',
+        label: '倒转轨道',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.step',
+        label: '步长',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.min',
+        label: '最小值',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.max',
+        label: '最大值',
+        type: 'number',
+      },
+      {
+        field: 'componentProps.vertical',
+        label: '垂直模式',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.dots',
+        label: '显示刻度',
+        type: 'switch',
+      },
+      // {
+      //   label: "持续显示提示",
+      //   type: "switch",
+      //   field: "componentProps.tooltipOpen",
+      // },
+      {
+        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: '与mouseup触发时机一致',
+        type: 'afterChange',
+      },
+      {
+        description: '拖拽结束改变值时',
+        type: 'change',
+      },
+    ],
+  },
+  defaultSchema: {
+    field: 'slider',
+    input: true,
+    label: '滑块',
+    type: 'slider',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--switches',
+  sort: 930,
+} as ComponentConfigModel;

package/src/switch/index.ts

@@ -0,0 +1,143 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'checked',
+  component: async () => (await import('ant-design-vue')).Switch,
+  config: {
+    attribute: [
+      {
+        field: 'field',
+        label: '字段名',
+        type: 'input',
+      },
+      {
+        field: 'label',
+        label: '标题',
+        type: 'input',
+      },
+      {
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.checkedValue',
+        label: 'ON状态值',
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.unCheckedValue',
+        label: 'OFF状态值',
+        onChange(e) {
+          setTimeout(() => setDefaultValue(e));
+        },
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.checkedChildren',
+        label: 'ON状态描述',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.unCheckedChildren',
+        label: 'OFF状态描述',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: 'default',
+              value: 'default',
+            },
+            {
+              label: 'small',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        field: 'componentProps.disabled',
+        label: '禁用',
+        type: 'switch',
+      },
+      {
+        field: 'componentProps.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+      {
+        componentProps: {
+          ruleType: 'boolean',
+        },
+        description: '校验规则需要配合表单使用',
+        field: 'rules',
+        label: '表单校验',
+        layout: 'vertical',
+        type: 'ERuleEditor',
+      },
+    ],
+    event: [
+      {
+        description: '值变化时',
+        type: 'change',
+      },
+    ],
+  },
+  defaultSchema: {
+    componentProps: {
+      defaultValue: false,
+    },
+    field: 'switch',
+    input: true,
+    label: '开关',
+    type: 'switch',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--toggle-off-outline',
+  sort: 930,
+} as ComponentConfigModel;
+
+function setDefaultValue(e) {
+  const 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/src/textarea/index.ts

@@ -0,0 +1,164 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  bindModel: 'value',
+  component: async () => (await import('ant-design-vue')).Textarea,
+  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: '请输入',
+        },
+        field: 'componentProps.defaultValue',
+        label: '默认值',
+        type: 'textarea',
+      },
+      {
+        field: 'componentProps.placeholder',
+        label: '占位内容',
+        type: 'input',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.autoSize.minRows',
+        label: '最小行数',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.autoSize.maxRows',
+        label: '最大行数',
+        type: 'number',
+      },
+      {
+        componentProps: {
+          allowClear: true,
+          options: [
+            {
+              label: '大号',
+              value: 'large',
+            },
+            {
+              label: '中等',
+              value: 'middle',
+            },
+            {
+              label: '小型',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        field: 'componentProps.size',
+        label: '尺寸',
+        type: 'select',
+      },
+      {
+        componentProps: {
+          placeholder: '请输入',
+        },
+        field: 'componentProps.maxLength',
+        label: '最大输入长度',
+        type: 'number',
+      },
+      {
+        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: '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: 'textarea',
+    input: true,
+    label: '文本域',
+    type: 'textarea',
+  },
+  groupName: '表单',
+  icon: 'icon--epic--edit-square-outline-rounded',
+  sort: 705,
+} as ComponentConfigModel;