@epic-designer/antd 1.1.0 → 1.1.2-beta.1

package/src/switch/index.ts

@@ -7,8 +7,8 @@ export default {
     attribute: [
       {
         field: 'field',
-        label: '字段名',
-        type: 'input',
+        label: '数据字段',
+        type: 'EpField',
       },
       {
         field: 'label',
@@ -16,50 +16,52 @@ export default {
         type: 'input',
       },
       {
-        field: 'componentProps.defaultValue',
+        field: 'props.defaultValue',
         label: '默认值',
         type: 'switch',
       },
       {
-        componentProps: {
-          placeholder: '请输入',
-        },
-        field: 'componentProps.checkedValue',
+        field: 'props.checkedValue',
         label: 'ON状态值',
         onChange(e) {
           setTimeout(() => setDefaultValue(e));
         },
+        props: {
+          placeholder: '请输入',
+        },
         type: 'input',
       },
       {
-        componentProps: {
-          placeholder: '请输入',
-        },
-        field: 'componentProps.unCheckedValue',
+        field: 'props.unCheckedValue',
         label: 'OFF状态值',
         onChange(e) {
           setTimeout(() => setDefaultValue(e));
         },
+        props: {
+          placeholder: '请输入',
+        },
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.checkedChildren',
+        label: 'ON状态描述',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.checkedChildren',
-        label: 'ON状态描述',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.unCheckedChildren',
+        label: 'OFF状态描述',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.unCheckedChildren',
-        label: 'OFF状态描述',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.size',
+        label: '尺寸',
+        props: {
           allowClear: true,
           options: [
             {
@@ -73,28 +75,26 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.size',
-        label: '尺寸',
         type: 'select',
       },
       {
-        field: 'componentProps.disabled',
+        field: 'props.disabled',
         label: '禁用',
         type: 'switch',
       },
       {
-        field: 'componentProps.hidden',
+        field: 'props.hidden',
         label: '隐藏',
         type: 'switch',
       },
       {
-        componentProps: {
-          ruleType: 'boolean',
-        },
         description: '校验规则需要配合表单使用',
         field: 'rules',
         label: '表单校验',
         layout: 'vertical',
+        props: {
+          ruleType: 'boolean',
+        },
         type: 'ERuleEditor',
       },
     ],
@@ -106,12 +106,12 @@ export default {
     ],
   },
   defaultSchema: {
-    componentProps: {
-      defaultValue: false,
-    },
     field: 'switch',
     input: true,
     label: '开关',
+    props: {
+      defaultValue: false,
+    },
     type: 'switch',
   },
   groupName: '表单',
@@ -120,23 +120,23 @@ export default {
 } as ComponentConfigModel;
 
 function setDefaultValue(e) {
-  const defaultValue = e.values.componentProps?.unCheckedValue || false;
+  const defaultValue = e.values.props?.unCheckedValue || false;
   // 如果unCheckedValue === ''，则在下一个事件循环中删除 unCheckedValue 属性
-  if (e.values.componentProps.unCheckedValue === '') {
-    delete e.values.componentProps.unCheckedValue;
+  if (e.values.props.unCheckedValue === '') {
+    delete e.values.props.unCheckedValue;
   }
 
   // 如果checkedValue === ''，则在下一个事件循环中删除 checkedValue 属性
-  if (e.values.componentProps.checkedValue === '') {
-    delete e.values.componentProps.checkedValue;
+  if (e.values.props.checkedValue === '') {
+    delete e.values.props.checkedValue;
   }
 
-  // 检查是否已经有了 componentProps 对象，如果有，将默认值赋给 defaultValue 属性
-  if (e.values.componentProps) {
-    e.values.componentProps.defaultValue = defaultValue;
+  // 检查是否已经有了 props 对象，如果有，将默认值赋给 defaultValue 属性
+  if (e.values.props) {
+    e.values.props.defaultValue = defaultValue;
   } else {
-    // 如果没有 componentProps 对象，则创建一个新对象并添加 defaultValue 属性
-    e.values.componentProps = {
+    // 如果没有 props 对象，则创建一个新对象并添加 defaultValue 属性
+    e.values.props = {
       defaultValue,
     };
   }

package/src/tab-pane/index.ts

@@ -0,0 +1,22 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./tabPane'),
+  config: {
+    attribute: [
+      {
+        field: 'props.tab',
+        label: '标签名称',
+        type: 'input',
+      },
+    ],
+  },
+  defaultSchema: {
+    label: '标签',
+    type: 'tab-pane',
+    children: [],
+  },
+  editConstraints: {
+    locked: true,
+  },
+} as ComponentConfigModel;

package/src/tab-pane/tabPane.ts

@@ -0,0 +1,43 @@
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { defineComponent, h, inject, renderSlot } from 'vue';
+
+import { TabPane } from 'ant-design-vue';
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      default: () => ({}),
+      require: true,
+      type: Object as PropType<ComponentSchema>,
+    },
+  },
+  setup(props, { slots }) {
+    const nodeAttrs = inject('nodeAttrs', {});
+
+    return () => {
+      const componentSchema = {
+        ...props.componentSchema,
+        ...props.componentSchema?.props,
+      };
+      const children = componentSchema.children;
+      delete componentSchema.children;
+
+      // return h("div", "sdfsd");
+      return h(
+        TabPane,
+        { componentSchema, ...nodeAttrs },
+        {
+          default: () =>
+            renderSlot(slots, 'edit-node', {}, () =>
+              children.map((componentSchema: any) =>
+                renderSlot(slots, 'node', { componentSchema }),
+              ),
+            ),
+        },
+      );
+    };
+  },
+});

package/src/tabs/index.ts

@@ -0,0 +1,107 @@
+import type { ComponentConfigModel } from '@epic-designer/types';
+
+export default {
+  component: () => import('./tabs'),
+  config: {
+    attribute: [
+      {
+        field: 'props.tabPosition',
+        label: '页签位置',
+        props: {
+          allowClear: true,
+          options: [
+            {
+              label: 'top',
+              value: 'top',
+            },
+            {
+              label: 'right',
+              value: 'right',
+            },
+            {
+              label: 'bottom',
+              value: 'bottom',
+            },
+            {
+              label: 'left',
+              value: 'left',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        type: 'select',
+      },
+      {
+        field: 'props.animated',
+        label: '切换动画',
+        type: 'switch',
+      },
+      {
+        field: 'props.tabBarGutter',
+        label: '标签间隙',
+        props: {
+          placeholder: '请输入',
+        },
+        type: 'number',
+      },
+      {
+        field: 'children',
+        label: '页签管理',
+        layout: 'vertical',
+        type: 'ETabPaneEditor',
+      },
+      {
+        field: 'props.size',
+        label: '尺寸',
+        props: {
+          allowClear: true,
+          options: [
+            {
+              label: 'large',
+              value: 'large',
+            },
+            {
+              label: 'middle',
+              value: 'middle',
+            },
+            {
+              label: 'small',
+              value: 'small',
+            },
+          ],
+          placeholder: '请选择',
+        },
+        type: 'select',
+      },
+      {
+        field: 'props.hidden',
+        label: '隐藏',
+        type: 'switch',
+      },
+    ],
+  },
+  defaultSchema: {
+    label: '标签页',
+    props: {
+      defaultValue: '标签1',
+    },
+    type: 'tabs',
+    children: [
+      {
+        label: '标签1',
+        type: 'tab-pane',
+        children: [],
+      },
+      {
+        label: '标签2',
+        type: 'tab-pane',
+        children: [],
+      },
+    ],
+  },
+  editConstraints: {
+    childImmovable: true,
+  },
+  groupName: '布局',
+  icon: 'icon--epic--layout-tabs',
+} as ComponentConfigModel;

package/src/tabs/tabs.ts

@@ -0,0 +1,69 @@
+import type { ComponentSchema } from '@epic-designer/types';
+
+import type { PropType } from 'vue';
+
+import { computed, defineComponent, h, ref, renderSlot, watch } from 'vue';
+
+import { Tabs } from 'ant-design-vue';
+
+export default defineComponent({
+  props: {
+    componentSchema: {
+      default: () => ({}),
+      require: true,
+      type: Object as PropType<ComponentSchema>,
+    },
+  },
+  setup(props, { slots }) {
+    const modelValue = ref();
+    watch(
+      () => props.componentSchema.props.defaultValue,
+      (newValue) => {
+        const tabPaneLabels = props.componentSchema.children?.map(
+          (node) => node.label,
+        );
+        modelValue.value = tabPaneLabels?.includes(newValue)
+          ? newValue
+          : tabPaneLabels?.[0];
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    const componentSchema = computed(() => ({
+      ...props.componentSchema?.props,
+      activeKey: modelValue.value,
+      'onUpdate:activeKey': (e) => {
+        modelValue.value = e;
+      },
+    }));
+
+    const children = props.componentSchema?.children ?? [];
+    return () =>
+      h(Tabs, componentSchema.value, {
+        default: () => {
+          const defaultSlotList = slots['edit-node']?.()[0].children;
+          // 设计区渲染
+          if (defaultSlotList?.length) {
+            const list = defaultSlotList[0].children?.map((item) => {
+              item.props.key = item.props.schema.label;
+              item.props.tab = item.props.schema.label;
+              return item;
+            });
+
+            return list;
+          }
+
+          // 直接渲染
+          return children.map((componentSchema: any) =>
+            renderSlot(slots, 'node', {
+              componentSchema,
+              key: componentSchema.label,
+              tab: componentSchema.label,
+            }),
+          );
+        },
+      });
+  },
+});

package/src/textarea/index.ts

@@ -21,8 +21,8 @@ export default {
     attribute: [
       {
         field: 'field',
-        label: '字段名',
-        type: 'input',
+        label: '数据字段',
+        type: 'EpField',
       },
       {
         field: 'label',
@@ -30,36 +30,38 @@ export default {
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.defaultValue',
+        label: '默认值',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.defaultValue',
-        label: '默认值',
         type: 'textarea',
       },
       {
-        field: 'componentProps.placeholder',
+        field: 'props.placeholder',
         label: '占位内容',
         type: 'input',
       },
       {
-        componentProps: {
+        field: 'props.autoSize.minRows',
+        label: '最小行数',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.autoSize.minRows',
-        label: '最小行数',
         type: 'number',
       },
       {
-        componentProps: {
+        field: 'props.autoSize.maxRows',
+        label: '最大行数',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.autoSize.maxRows',
-        label: '最大行数',
         type: 'number',
       },
       {
-        componentProps: {
+        field: 'props.size',
+        label: '尺寸',
+        props: {
           allowClear: true,
           options: [
             {
@@ -77,44 +79,42 @@ export default {
           ],
           placeholder: '请选择',
         },
-        field: 'componentProps.size',
-        label: '尺寸',
         type: 'select',
       },
       {
-        componentProps: {
+        field: 'props.maxLength',
+        label: '最大输入长度',
+        props: {
           placeholder: '请输入',
         },
-        field: 'componentProps.maxLength',
-        label: '最大输入长度',
         type: 'number',
       },
       {
-        componentProps: {
+        field: 'props.bordered',
+        label: '无边框',
+        props: {
           checkedValue: false,
           unCheckedValue: true,
         },
-        field: 'componentProps.bordered',
-        label: '无边框',
         type: 'switch',
       },
       {
-        field: 'componentProps.showCount',
+        field: 'props.showCount',
         label: '统计字数',
         type: 'switch',
       },
       {
-        field: 'componentProps.allowClear',
+        field: 'props.allowClear',
         label: '可清除',
         type: 'switch',
       },
       {
-        field: 'componentProps.disabled',
+        field: 'props.disabled',
         label: '禁用',
         type: 'switch',
       },
       {
-        field: 'componentProps.hidden',
+        field: 'props.hidden',
         label: '隐藏',
         type: 'switch',
       },
@@ -150,12 +150,12 @@ export default {
     ],
   },
   defaultSchema: {
-    componentProps: {
-      placeholder: '请输入',
-    },
     field: 'textarea',
     input: true,
     label: '文本域',
+    props: {
+      placeholder: '请输入',
+    },
     type: 'textarea',
   },
   groupName: '表单',