@meethive/components 0.0.3 → 0.0.5

package/lib/EditTable/EditTable.js

@@ -1,434 +1,385 @@
- function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, ref, reactive, computed, watch, provide, useSlots } from 'vue'
-import { tableProps } from 'ant-design-vue/lib/table'
-import { useFullscreen } from '@vueuse/core'
-import { findIndex, get, sortBy } from 'lodash-es'
-
-import {
-  FULL_SCREEN,
-  RIGHT_MENU,
-  TABLE_DATA_SOURCE,
-  TABLE_ERROR,
-  TABLE_GROUP_ACTIVE,
-  TABLE_GROUP_ERROR,
-  TABLE_GROUP_OPTIONS,
-  TABLE_H_SCROLL,
-  TABLE_OPEN_GROUP,
-  TABLE_TOOL,
-  TABLE_WRAPPER
-} from './consts'
-import { handleColumnsWidth } from './utils'
-import { useGroup, useResizeObserver, useValidate } from './hooks'
-import { useFormContext } from './context'
-import { bodyProps } from './props'
-import Header from './Header.js'
-import Body from './Body.js'
-import Group from './Group.js'
-import { useLocaleReceiver } from '../LocaleReciver'
-import useEditTableStyle from './style'
-
-const defaultGroupId = 'group_1'
-
-export default defineComponent({
-  name: 'JEditTable',
-  components: {
-    Header,
-    Body,
-    Group
-  },
-  props: {
-    ...tableProps(),
-    ...bodyProps(),
-    searchColumns: {
-      type: Array,
-      default: undefined
-    },
-    serial: {
-      type: [Object, Boolean],
-      default: () => ({
-        width: 66,
-        title: ''
-      })
-    },
-    validateRowKey: {
-      type: Boolean,
-      default: false
-    },
-    readonly: {
-      type: Boolean,
-      default: false
-    }
-  } ,
-  emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
-  setup(props, { emit, expose }) {
-    const [contextLocale] = useLocaleReceiver('EditTable')
-    const prefixCls = computed(() => 'jetlinks-edit-table')
-    const [wrapSSR, hashId] = useEditTableStyle(prefixCls)
-    const slots = useSlots()
-
-    const myColumns = ref([])
-    const tableWrapper = ref()
-    const tableBody = ref()
-    const scrollBarRef = ref()
-
-    const tableStyle = reactive({
-      width: '100%',
-      height: props.height
-    })
-
-    const showScroll = ref(false)
-    const horizontalScrollWidth = ref(0)
-    const horizontalScrollLeft = ref(0)
-
-    const fields = {}
-    const fieldsErrMap = ref({})
-    const fieldsGroupError = ref({})
-    const scrollDefaultWidth = ref(17)
-
-    const sortData = reactive
-
-
-
-
-({
-      key: undefined,
-      order: undefined,
-      orderKeys: [],
-      dataIndex: undefined
-    })
-
-    const { groupActive, groupOptions, addGroup, removeGroup, updateGroupActive, updateGroupOptions } =
-      useGroup(props.openGroup)
-
-    const _dataSource = computed(() => {
-      const _options = new Map()
-      const sortDataSource = sortData.key
-        ? sortBy(props.dataSource, (val) => {
-            if (!val.id) return 99999999
-            const index = findIndex(sortData.orderKeys, (val2) => get(val, sortData.key) === val2)
-            return sortData.order === 'desc' ? index : ~index + 1
-          })
-        : props.dataSource
-
-      sortDataSource.forEach((item, index) => {
-        item.__dataIndex = index
-        if (props.openGroup) {
-          const _groupId = _optionalChain([item, 'optionalAccess', _ => _.expands, 'optionalAccess', _2 => _2.groupId])
-          if (!_groupId) {
-            item.expands.groupId = groupActive.value || defaultGroupId
-            item.expands.groupName = groupActive.label || contextLocale.value.Group.one + '1'
-          }
-          const _optionsItem = _options.get(item.expands.groupId)
-          if (!_optionsItem) {
-            _options.set(item.expands.groupId, {
-              value: _optionalChain([item, 'optionalAccess', _3 => _3.expands, 'optionalAccess', _4 => _4.groupId]),
-              label: _optionalChain([item, 'optionalAccess', _5 => _5.expands, 'optionalAccess', _6 => _6.groupName]),
-              effective: item.id ? 1 : 0,
-              len: 1
-            })
-          } else {
-            if (item.id) {
-              _optionsItem.effective += 1
-            }
-            _optionsItem.len += 1
-            _options.set(item.expands.groupId, _optionsItem)
-          }
-          item.__serial = _optionalChain([_optionsItem, 'optionalAccess', _7 => _7.len]) || 1
-        } else {
-          item.__serial = index + 1
-        }
-      })
-
-      if (props.openGroup) {
-        updateGroupOptions([..._options.values()])
-      }
-      return sortDataSource
-    })
-
-    const bodyDataSource = computed(() => {
-      if (props.openGroup) {
-        return _dataSource.value.filter((item) => item.expands.groupId === groupActive.value)
-      }
-      return _dataSource.value
-    })
-
-    useResizeObserver(tableWrapper, onResize)
-
-    const { isFullscreen, toggle } = useFullscreen(tableWrapper)
-
-    const { rules, validateItem, validate, errorMap } = useValidate(
-      _dataSource,
-      props.columns,
-      props.rowKey,
-      {
-        onError: (err) => {
-          fieldsErrMap.value = {}
-          fieldsGroupError.value = {}
-          const errMap = {}
-
-          err.forEach((item, errIndex) => {
-            item.forEach((e, eIndex) => {
-              const field = findField(e.__dataIndex, e.field)
-              const _eventKey = field ? field.eventKey : `${e.__dataIndex}-${e.field}`
-              if (field) {
-                field.showErrorTip(e.message)
-              }
-              errMap[_eventKey] = e.message
-
-              if (errIndex === 0 && eIndex === 0) {
-                if (props.openGroup) {
-                  const expands = _dataSource.value[e.__dataIndex].expands
-                  updateGroupActive(expands.groupId, expands.groupName)
-                }
-                setTimeout(() => {
-                  tableBody.value.scrollTo(e.__serial - 1)
-                }, 10)
-              }
-            })
-          })
-          fieldsErrMap.value = errMap
-        },
-        onSuccess: () => {
-          fieldsErrMap.value = {}
-        },
-        onEdit: () => {
-          emit('editChange', true)
-        },
-        validateRowKey: props.validateRowKey
-      }
-    )
-
-    provide(TABLE_WRAPPER, tableWrapper)
-    provide(FULL_SCREEN, isFullscreen)
-    provide(RIGHT_MENU, { click: rightMenu, getPopupContainer: () => tableWrapper.value })
-    provide(TABLE_ERROR, fieldsErrMap)
-    provide(TABLE_GROUP_ERROR, fieldsGroupError)
-    provide(TABLE_DATA_SOURCE, _dataSource)
-    provide(TABLE_OPEN_GROUP, props.openGroup)
-    provide(TABLE_TOOL, {
-      scrollTo: (record) => {
-        if (props.openGroup) {
-          const expands = record.expands
-          updateGroupActive(expands.groupId, expands.groupName)
-        }
-        setTimeout(() => {
-          tableBody.value.scrollTo(record.__serial)
-        }, 10)
-      },
-      selected: (keys) => {
-        tableBody.value.updateSelectedKeys(keys)
-      },
-      order: (type, key, orderKeys, dataIndex) => {
-        sortData.key = key
-        sortData.order = type
-        sortData.orderKeys = orderKeys
-        sortData.dataIndex = dataIndex
-      },
-      cleanOrder: () => {
-        sortData.key = undefined
-        sortData.order = undefined
-        sortData.orderKeys = []
-        sortData.dataIndex = undefined
-      },
-      sortData
-    })
-    provide(TABLE_GROUP_OPTIONS, groupOptions)
-    provide(TABLE_GROUP_ACTIVE, groupActive)
-    provide(TABLE_H_SCROLL, horizontalScrollLeft)
-
-    const addField = (key, field) => {
-      fields[key] = field
-    }
-
-    const removeField = (key) => {
-      delete fields[key]
-    }
-
-    function findField(index, name) {
-      const fieldId = Object.keys(fields).find((key) => {
-        const { names } = fields[key]
-        return names[0] === index && names[1] === name
-      })
-      return fields[fieldId]
-    }
-
-    function removeFieldError(key) {
-      delete fieldsErrMap.value[key]
-    }
-
-    function addFieldError(key, message) {
-      fieldsErrMap.value[key] = message
-    }
-
-    const scrollWidth = computed(() => {
-      return props.dataSource.length * props.cellHeight > props.height ? scrollDefaultWidth.value : 0
-    })
-
-    const handleColumns = () => {
-      let newColumns = [...props.columns]
-      if (props.serial) {
-        const serial = {
-          dataIndex: '__serial',
-          title: (props.serial ).title || contextLocale.value.serial,
-          customRender: (customData) => {
-            if (_optionalChain([(props.serial ), 'optionalAccess', _8 => _8.customRender])) {
-              return (props.serial ).customRender(customData)
-            }
-            return customData.index + 1
-          },
-          width: _optionalChain([(props.serial ), 'optionalAccess', _9 => _9.width]),
-          fixed: 'left'
-        }
-        newColumns = [serial, ...props.columns]
-      }
-      myColumns.value = handleColumnsWidth(newColumns, (tableStyle.width ) - scrollWidth.value)
-      horizontalScrollWidth.value = myColumns.value.reduce((prev, next) => {
-        prev += next.width
-        return prev
-      }, 0)
-      if (horizontalScrollWidth.value > (tableStyle.width )) {
-        showScroll.value = true
-      }
-    }
-
-    function onResize({ width = 0 }) {
-      tableStyle.width = width || '100%'
-      handleColumns()
-    }
-
-    const onScrollDown = (len) => {
-      emit('scrollDown', len)
-    }
-
-    function rightMenu(menuType, record, copyValue) {
-      emit('rightMenuClick', menuType, record, copyValue)
-    }
-
-    const scrollToById = (key) => {
-      const _index = _dataSource.value.findIndex((item) => item[props.rowKey] === key)
-      tableBody.value.scrollTo(_index)
-    }
-
-    const scrollToByIndex = (index) => {
-      tableBody.value.scrollTo(index)
-    }
-
-    const getTableWrapperRef = () => {
-      return tableWrapper.value
-    }
-
-    const groupDelete = (id, index) => {
-      removeGroup(index)
-      Object.keys(fieldsErrMap.value).forEach((errorKey) => {
-        const [idx] = errorKey.split('-')
-        const dataSourceItem = _dataSource.value[Number(idx)]
-        const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _10 => _10.expands, 'optionalAccess', _11 => _11.groupId])
-        if (groupId === id) {
-          removeFieldError(errorKey)
-          removeField(errorKey)
-        }
-      })
-      emit('groupDelete', id)
-    }
-
-    const groupEdit = (record) => {
-      emit('groupEdit', record)
-    }
-
-    const getGroupActive = () => {
-      return groupActive.value
-    }
-
-    const onHorizontalScroll = () => {
-      horizontalScrollLeft.value = scrollBarRef.value.scrollLeft
-    }
-
-    watch(
-      () => fieldsErrMap.value,
-      (errorMapVal) => {
-        fieldsGroupError.value = {}
-        if (props.openGroup) {
-          const groupErrorMap = {}
-          Object.keys(errorMapVal).forEach((errorKey) => {
-            const [idx] = errorKey.split('-')
-            const dataSourceItem = _dataSource.value[Number(idx)]
-            const groupId = _optionalChain([dataSourceItem, 'optionalAccess', _12 => _12.expands, 'optionalAccess', _13 => _13.groupId])
-            const groupErrorItem = {
-              [errorKey]: {
-                message: errorMapVal[errorKey],
-                index: idx,
-                serial: dataSourceItem.__serial
-              }
-            }
-            if (groupErrorMap[groupId]) {
-              groupErrorMap[groupId].push(groupErrorItem)
-            } else {
-              groupErrorMap[groupId] = [groupErrorItem]
-            }
-          })
-          fieldsGroupError.value = groupErrorMap
-        }
-      },
-      { deep: true }
-    )
-
-    watch(
-      () => scrollWidth.value,
-      () => {
-        onResize({ width: tableStyle.width  })
-      }
-    )
-
-    watch(
-      () => [JSON.stringify(props.columns), tableStyle.width],
-      () => {
-        handleColumns()
-      }
-    )
-
-    useFormContext({
-      dataSource: computed(() => props.dataSource),
-      errorMap,
-      rules,
-      addField,
-      removeField,
-      removeFieldError,
-      addFieldError,
-      validateItem
-    })
-
-    expose({
-      validate,
-      tableWrapper,
-      scrollToById,
-      scrollToByIndex,
-      getTableWrapperRef,
-      getGroupActive
-    })
-
-    return {
-      slots,
-      hashId,
-      isFullscreen,
-      toggle,
-      tableWrapper,
-      tableBody,
-      scrollBarRef,
-      myColumns,
-      tableStyle,
-      showScroll,
-      horizontalScrollWidth,
-      horizontalScrollLeft,
-      scrollWidth,
-      bodyDataSource,
-      groupActive,
-      groupOptions,
-      addGroup,
-      updateGroupActive,
-      onScrollDown,
-      groupDelete,
-      groupEdit,
-      onHorizontalScroll
-    }
-  }
-})
+import { defineComponent, ref, reactive, computed, watch, provide, useSlots } from 'vue';
+import { tableProps } from 'ant-design-vue/lib/table';
+import { useFullscreen } from '@vueuse/core';
+import { findIndex, get, sortBy } from 'lodash-es';
+import { FULL_SCREEN, RIGHT_MENU, TABLE_DATA_SOURCE, TABLE_ERROR, TABLE_GROUP_ACTIVE, TABLE_GROUP_ERROR, TABLE_GROUP_OPTIONS, TABLE_H_SCROLL, TABLE_OPEN_GROUP, TABLE_TOOL, TABLE_WRAPPER } from './consts';
+import { handleColumnsWidth } from './utils';
+import { useGroup, useResizeObserver, useValidate } from './hooks';
+import { useFormContext } from './context';
+import { bodyProps } from './props';
+import Header from './Header.js';
+import Body from './Body.js';
+import Group from './Group.js';
+import { useLocaleReceiver } from '../LocaleReciver';
+import useEditTableStyle from './style';
+const defaultGroupId = 'group_1';
+export default defineComponent({
+  name: 'JEditTable',
+  components: {
+    Header,
+    Body,
+    Group
+  },
+  props: {
+    ...tableProps(),
+    ...bodyProps(),
+    searchColumns: {
+      type: Array,
+      default: undefined
+    },
+    serial: {
+      type: [Object, Boolean],
+      default: () => ({
+        width: 66,
+        title: ''
+      })
+    },
+    validateRowKey: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['scrollDown', 'rightMenuClick', 'editChange', 'searchVisibleChange'],
+  setup(props, {
+    emit,
+    expose
+  }) {
+    const [contextLocale] = useLocaleReceiver('EditTable');
+    const prefixCls = computed(() => 'jetlinks-edit-table');
+    const [wrapSSR, hashId] = useEditTableStyle(prefixCls);
+    const slots = useSlots();
+    const myColumns = ref([]);
+    const tableWrapper = ref();
+    const tableBody = ref();
+    const scrollBarRef = ref();
+    const tableStyle = reactive({
+      width: '100%',
+      height: props.height
+    });
+    const showScroll = ref(false);
+    const horizontalScrollWidth = ref(0);
+    const horizontalScrollLeft = ref(0);
+    const fields = {};
+    const fieldsErrMap = ref({});
+    const fieldsGroupError = ref({});
+    const scrollDefaultWidth = ref(17);
+    const sortData = reactive({
+      key: undefined,
+      order: undefined,
+      orderKeys: [],
+      dataIndex: undefined
+    });
+    const {
+      groupActive,
+      groupOptions,
+      addGroup,
+      removeGroup,
+      updateGroupActive,
+      updateGroupOptions
+    } = useGroup(props.openGroup);
+    const _dataSource = computed(() => {
+      const _options = new Map();
+      const sortDataSource = sortData.key ? sortBy(props.dataSource, val => {
+        if (!val.id) return 99999999;
+        const index = findIndex(sortData.orderKeys, val2 => get(val, sortData.key) === val2);
+        return sortData.order === 'desc' ? index : ~index + 1;
+      }) : props.dataSource;
+      sortDataSource.forEach((item, index) => {
+        item.__dataIndex = index;
+        if (props.openGroup) {
+          const _groupId = item?.expands?.groupId;
+          if (!_groupId) {
+            item.expands.groupId = groupActive.value || defaultGroupId;
+            item.expands.groupName = groupActive.label || contextLocale.value.Group.one + '1';
+          }
+          const _optionsItem = _options.get(item.expands.groupId);
+          if (!_optionsItem) {
+            _options.set(item.expands.groupId, {
+              value: item?.expands?.groupId,
+              label: item?.expands?.groupName,
+              effective: item.id ? 1 : 0,
+              len: 1
+            });
+          } else {
+            if (item.id) {
+              _optionsItem.effective += 1;
+            }
+            _optionsItem.len += 1;
+            _options.set(item.expands.groupId, _optionsItem);
+          }
+          item.__serial = _optionsItem?.len || 1;
+        } else {
+          item.__serial = index + 1;
+        }
+      });
+      if (props.openGroup) {
+        updateGroupOptions([..._options.values()]);
+      }
+      return sortDataSource;
+    });
+    const bodyDataSource = computed(() => {
+      if (props.openGroup) {
+        return _dataSource.value.filter(item => item.expands.groupId === groupActive.value);
+      }
+      return _dataSource.value;
+    });
+    useResizeObserver(tableWrapper, onResize);
+    const {
+      isFullscreen,
+      toggle
+    } = useFullscreen(tableWrapper);
+    const {
+      rules,
+      validateItem,
+      validate,
+      errorMap
+    } = useValidate(_dataSource, props.columns, props.rowKey, {
+      onError: err => {
+        fieldsErrMap.value = {};
+        fieldsGroupError.value = {};
+        const errMap = {};
+        err.forEach((item, errIndex) => {
+          item.forEach((e, eIndex) => {
+            const field = findField(e.__dataIndex, e.field);
+            const _eventKey = field ? field.eventKey : `${e.__dataIndex}-${e.field}`;
+            if (field) {
+              field.showErrorTip(e.message);
+            }
+            errMap[_eventKey] = e.message;
+            if (errIndex === 0 && eIndex === 0) {
+              if (props.openGroup) {
+                const expands = _dataSource.value[e.__dataIndex].expands;
+                updateGroupActive(expands.groupId, expands.groupName);
+              }
+              setTimeout(() => {
+                tableBody.value.scrollTo(e.__serial - 1);
+              }, 10);
+            }
+          });
+        });
+        fieldsErrMap.value = errMap;
+      },
+      onSuccess: () => {
+        fieldsErrMap.value = {};
+      },
+      onEdit: () => {
+        emit('editChange', true);
+      },
+      validateRowKey: props.validateRowKey
+    });
+    provide(TABLE_WRAPPER, tableWrapper);
+    provide(FULL_SCREEN, isFullscreen);
+    provide(RIGHT_MENU, {
+      click: rightMenu,
+      getPopupContainer: () => tableWrapper.value
+    });
+    provide(TABLE_ERROR, fieldsErrMap);
+    provide(TABLE_GROUP_ERROR, fieldsGroupError);
+    provide(TABLE_DATA_SOURCE, _dataSource);
+    provide(TABLE_OPEN_GROUP, props.openGroup);
+    provide(TABLE_TOOL, {
+      scrollTo: record => {
+        if (props.openGroup) {
+          const expands = record.expands;
+          updateGroupActive(expands.groupId, expands.groupName);
+        }
+        setTimeout(() => {
+          tableBody.value.scrollTo(record.__serial);
+        }, 10);
+      },
+      selected: keys => {
+        tableBody.value.updateSelectedKeys(keys);
+      },
+      order: (type, key, orderKeys, dataIndex) => {
+        sortData.key = key;
+        sortData.order = type;
+        sortData.orderKeys = orderKeys;
+        sortData.dataIndex = dataIndex;
+      },
+      cleanOrder: () => {
+        sortData.key = undefined;
+        sortData.order = undefined;
+        sortData.orderKeys = [];
+        sortData.dataIndex = undefined;
+      },
+      sortData
+    });
+    provide(TABLE_GROUP_OPTIONS, groupOptions);
+    provide(TABLE_GROUP_ACTIVE, groupActive);
+    provide(TABLE_H_SCROLL, horizontalScrollLeft);
+    const addField = (key, field) => {
+      fields[key] = field;
+    };
+    const removeField = key => {
+      delete fields[key];
+    };
+    function findField(index, name) {
+      const fieldId = Object.keys(fields).find(key => {
+        const {
+          names
+        } = fields[key];
+        return names[0] === index && names[1] === name;
+      });
+      return fields[fieldId];
+    }
+    function removeFieldError(key) {
+      delete fieldsErrMap.value[key];
+    }
+    function addFieldError(key, message) {
+      fieldsErrMap.value[key] = message;
+    }
+    const scrollWidth = computed(() => {
+      return props.dataSource.length * props.cellHeight > props.height ? scrollDefaultWidth.value : 0;
+    });
+    const handleColumns = () => {
+      let newColumns = [...props.columns];
+      if (props.serial) {
+        const serial = {
+          dataIndex: '__serial',
+          title: props.serial.title || contextLocale.value.serial,
+          customRender: customData => {
+            if (props.serial?.customRender) {
+              return props.serial.customRender(customData);
+            }
+            return customData.index + 1;
+          },
+          width: props.serial?.width,
+          fixed: 'left'
+        };
+        newColumns = [serial, ...props.columns];
+      }
+      myColumns.value = handleColumnsWidth(newColumns, tableStyle.width - scrollWidth.value);
+      horizontalScrollWidth.value = myColumns.value.reduce((prev, next) => {
+        prev += next.width;
+        return prev;
+      }, 0);
+      if (horizontalScrollWidth.value > tableStyle.width) {
+        showScroll.value = true;
+      }
+    };
+    function onResize({
+      width = 0
+    }) {
+      tableStyle.width = width || '100%';
+      handleColumns();
+    }
+    const onScrollDown = len => {
+      emit('scrollDown', len);
+    };
+    function rightMenu(menuType, record, copyValue) {
+      emit('rightMenuClick', menuType, record, copyValue);
+    }
+    const scrollToById = key => {
+      const _index = _dataSource.value.findIndex(item => item[props.rowKey] === key);
+      tableBody.value.scrollTo(_index);
+    };
+    const scrollToByIndex = index => {
+      tableBody.value.scrollTo(index);
+    };
+    const getTableWrapperRef = () => {
+      return tableWrapper.value;
+    };
+    const groupDelete = (id, index) => {
+      removeGroup(index);
+      Object.keys(fieldsErrMap.value).forEach(errorKey => {
+        const [idx] = errorKey.split('-');
+        const dataSourceItem = _dataSource.value[Number(idx)];
+        const groupId = dataSourceItem?.expands?.groupId;
+        if (groupId === id) {
+          removeFieldError(errorKey);
+          removeField(errorKey);
+        }
+      });
+      emit('groupDelete', id);
+    };
+    const groupEdit = record => {
+      emit('groupEdit', record);
+    };
+    const getGroupActive = () => {
+      return groupActive.value;
+    };
+    const onHorizontalScroll = () => {
+      horizontalScrollLeft.value = scrollBarRef.value.scrollLeft;
+    };
+    watch(() => fieldsErrMap.value, errorMapVal => {
+      fieldsGroupError.value = {};
+      if (props.openGroup) {
+        const groupErrorMap = {};
+        Object.keys(errorMapVal).forEach(errorKey => {
+          const [idx] = errorKey.split('-');
+          const dataSourceItem = _dataSource.value[Number(idx)];
+          const groupId = dataSourceItem?.expands?.groupId;
+          const groupErrorItem = {
+            [errorKey]: {
+              message: errorMapVal[errorKey],
+              index: idx,
+              serial: dataSourceItem.__serial
+            }
+          };
+          if (groupErrorMap[groupId]) {
+            groupErrorMap[groupId].push(groupErrorItem);
+          } else {
+            groupErrorMap[groupId] = [groupErrorItem];
+          }
+        });
+        fieldsGroupError.value = groupErrorMap;
+      }
+    }, {
+      deep: true
+    });
+    watch(() => scrollWidth.value, () => {
+      onResize({
+        width: tableStyle.width
+      });
+    });
+    watch(() => [JSON.stringify(props.columns), tableStyle.width], () => {
+      handleColumns();
+    });
+    useFormContext({
+      dataSource: computed(() => props.dataSource),
+      errorMap,
+      rules,
+      addField,
+      removeField,
+      removeFieldError,
+      addFieldError,
+      validateItem
+    });
+    expose({
+      validate,
+      tableWrapper,
+      scrollToById,
+      scrollToByIndex,
+      getTableWrapperRef,
+      getGroupActive
+    });
+    return {
+      slots,
+      hashId,
+      isFullscreen,
+      toggle,
+      tableWrapper,
+      tableBody,
+      scrollBarRef,
+      myColumns,
+      tableStyle,
+      showScroll,
+      horizontalScrollWidth,
+      horizontalScrollLeft,
+      scrollWidth,
+      bodyDataSource,
+      groupActive,
+      groupOptions,
+      addGroup,
+      updateGroupActive,
+      onScrollDown,
+      groupDelete,
+      groupEdit,
+      onHorizontalScroll
+    };
+  }
+});