ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-table/table-layout-observer.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"table-layout-observer.mjs","sources":["../../../../../src/components/ivue-table/table-layout-observer.ts"],"sourcesContent":["import {\r\n  getCurrentInstance,\r\n  onMounted,\r\n  computed,\r\n  onUpdated,\r\n  onBeforeMount,\r\n  onUnmounted,\r\n} from 'vue';\r\nimport { throwError } from '../../utils/error';\r\n\r\n// ts\r\nimport type { Table } from './table/defaults';\r\nimport type { TableHeader } from './table-header/types';\r\nimport type TableLayout from './table-layout';\r\n\r\nfunction useLayoutObserver(root: Table) {\r\n  // vm\r\n  const vm = getCurrentInstance() as TableHeader;\r\n\r\n  // computed\r\n\r\n  // 表格布局\r\n  const tableLayout = computed(() => {\r\n    const layout = root.layout as TableLayout;\r\n\r\n    if (!layout) {\r\n      throwError('ivue-table', 'Can not find table layout');\r\n    }\r\n\r\n    return layout;\r\n  });\r\n\r\n  // methods\r\n\r\n  // 列宽度改变\r\n  const handleColumnsChange = (layout: TableLayout) => {\r\n    // 获取col\r\n    const cols = root.vnode.el?.querySelectorAll('colgroup > col') || [];\r\n\r\n    if (!cols.length) {\r\n      return;\r\n    }\r\n\r\n    // 扁平化列\r\n    const flattenColumns = layout.getFlattenColumns();\r\n    // 获取列的id\r\n    const columnsMap = {};\r\n\r\n    flattenColumns.forEach((column) => {\r\n      columnsMap[column.id] = column;\r\n    });\r\n\r\n    // 设置列的宽度啊\r\n    for (let i = 0, j = cols.length; i < j; i++) {\r\n      const col = cols[i];\r\n      const name = col.getAttribute('name');\r\n      const column = columnsMap[name];\r\n\r\n      if (column) {\r\n        col.setAttribute('width', column.columnWidth || column.width);\r\n      }\r\n    }\r\n  };\r\n\r\n  // 设置滚动宽度\r\n  const handleScrollableWidthChange = (layout: TableLayout) => {\r\n    const cols =\r\n      root.vnode.el?.querySelectorAll('colgroup > col[name=gutter]') || [];\r\n\r\n    for (let i = 0, j = cols.length; i < j; i++) {\r\n      const col = cols[i];\r\n      col.setAttribute(\r\n        'width',\r\n        layout.scrollY.value ? layout.gutterWidth : '0'\r\n      );\r\n    }\r\n\r\n    // gutter\r\n    const ths = root.vnode.el?.querySelectorAll('th.gutter') || [];\r\n    for (let i = 0, j = ths.length; i < j; i++) {\r\n      const th = ths[i];\r\n      th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : '0';\r\n      th.style.display = layout.scrollY.value ? '' : 'none';\r\n    }\r\n  };\r\n\r\n  // 在实例初始化之后、进行数据侦听和事件/侦听器的配置之前同步调用。\r\n  onBeforeMount(() => {\r\n    // 吧当前 vm 对象添加到观察者\r\n    tableLayout.value.addObserver(vm);\r\n  });\r\n\r\n  // 卸载组件实例后调用\r\n  onUnmounted(() => {\r\n    tableLayout.value.removeObserver(vm);\r\n  });\r\n\r\n  // onMounted\r\n  onMounted(() => {\r\n    // 列改变\r\n    handleColumnsChange(tableLayout.value);\r\n\r\n    // 设置滚动宽度\r\n    handleScrollableWidthChange(tableLayout.value);\r\n  });\r\n\r\n  // onUpdated\r\n  // 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用\r\n  onUpdated(() => {\r\n    // 列宽度改变\r\n    handleColumnsChange(tableLayout.value);\r\n\r\n    // 设置滚动宽度\r\n    handleScrollableWidthChange(tableLayout.value);\r\n  });\r\n\r\n  return {\r\n    handleColumnsChange,\r\n    handleScrollableWidthChange,\r\n  };\r\n}\r\n\r\nexport default useLayoutObserver;\r\n"],"names":[],"mappings":"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"}