element-plus/es/components/table/src/layout-observer.mjs.map

A Component Library for Vue 3

{"version":3,"file":"layout-observer.mjs","names":[],"sources":["../../../../../../packages/components/table/src/layout-observer.ts"],"sourcesContent":["import {\n  computed,\n  getCurrentInstance,\n  onBeforeMount,\n  onMounted,\n  onUnmounted,\n  onUpdated,\n} from 'vue'\n\nimport type { TableHeader } from './table-header'\nimport type TableLayout from './table-layout'\nimport type { DefaultRow, Table, TableColumnCtx } from './table/defaults'\n\nfunction useLayoutObserver<T extends DefaultRow>(root: Table<T>) {\n  const instance = getCurrentInstance() as TableHeader\n  onBeforeMount(() => {\n    tableLayout.value.addObserver(instance)\n  })\n  onMounted(() => {\n    onColumnsChange(tableLayout.value)\n    onScrollableChange(tableLayout.value)\n  })\n  onUpdated(() => {\n    onColumnsChange(tableLayout.value)\n    onScrollableChange(tableLayout.value)\n  })\n  onUnmounted(() => {\n    tableLayout.value.removeObserver(instance)\n  })\n  const tableLayout = computed(() => {\n    const layout = root.layout as TableLayout<T>\n    if (!layout) {\n      throw new Error('Can not find table layout.')\n    }\n    return layout\n  })\n  const onColumnsChange = (layout: TableLayout<T>) => {\n    const cols = root.vnode.el?.querySelectorAll('colgroup > col') || []\n    if (!cols.length) return\n    const flattenColumns = layout.getFlattenColumns()\n    const columnsMap: Record<string, TableColumnCtx<T>> = {}\n    flattenColumns.forEach((column) => {\n      columnsMap[column.id] = column\n    })\n    for (let i = 0, j = cols.length; i < j; i++) {\n      const col = cols[i]\n      const name = col.getAttribute('name')\n      const column = columnsMap[name]\n      if (column) {\n        col.setAttribute('width', column.realWidth || column.width)\n      }\n    }\n  }\n\n  const onScrollableChange = (layout: TableLayout<T>) => {\n    const cols =\n      root.vnode.el?.querySelectorAll('colgroup > col[name=gutter]') || []\n    for (let i = 0, j = cols.length; i < j; i++) {\n      const col = cols[i]\n      col.setAttribute('width', layout.scrollY.value ? layout.gutterWidth : '0')\n    }\n    const ths = root.vnode.el?.querySelectorAll('th.gutter') || []\n    for (let i = 0, j = ths.length; i < j; i++) {\n      const th = ths[i]\n      th.style.width = layout.scrollY.value ? `${layout.gutterWidth}px` : '0'\n      th.style.display = layout.scrollY.value ? '' : 'none'\n    }\n  }\n\n  return {\n    tableLayout: tableLayout.value,\n    onColumnsChange,\n    onScrollableChange,\n  }\n}\n\nexport default useLayoutObserver\n"],"mappings":";;;AAaA,SAAS,kBAAwC,MAAgB;CAC/D,MAAM,WAAW,oBAAoB;AACrC,qBAAoB;AAClB,cAAY,MAAM,YAAY,SAAS;GACvC;AACF,iBAAgB;AACd,kBAAgB,YAAY,MAAM;AAClC,qBAAmB,YAAY,MAAM;GACrC;AACF,iBAAgB;AACd,kBAAgB,YAAY,MAAM;AAClC,qBAAmB,YAAY,MAAM;GACrC;AACF,mBAAkB;AAChB,cAAY,MAAM,eAAe,SAAS;GAC1C;CACF,MAAM,cAAc,eAAe;EACjC,MAAM,SAAS,KAAK;AACpB,MAAI,CAAC,OACH,OAAM,IAAI,MAAM,6BAA6B;AAE/C,SAAO;GACP;CACF,MAAM,mBAAmB,WAA2B;EAClD,MAAM,OAAO,KAAK,MAAM,IAAI,iBAAiB,iBAAiB,IAAI,EAAE;AACpE,MAAI,CAAC,KAAK,OAAQ;EAClB,MAAM,iBAAiB,OAAO,mBAAmB;EACjD,MAAM,aAAgD,EAAE;AACxD,iBAAe,SAAS,WAAW;AACjC,cAAW,OAAO,MAAM;IACxB;AACF,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAAK;GAC3C,MAAM,MAAM,KAAK;GAEjB,MAAM,SAAS,WADF,IAAI,aAAa,OAAO;AAErC,OAAI,OACF,KAAI,aAAa,SAAS,OAAO,aAAa,OAAO,MAAM;;;CAKjE,MAAM,sBAAsB,WAA2B;EACrD,MAAM,OACJ,KAAK,MAAM,IAAI,iBAAiB,8BAA8B,IAAI,EAAE;AACtE,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,IAEtC,CADY,KAAK,GACb,aAAa,SAAS,OAAO,QAAQ,QAAQ,OAAO,cAAc,IAAI;EAE5E,MAAM,MAAM,KAAK,MAAM,IAAI,iBAAiB,YAAY,IAAI,EAAE;AAC9D,OAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAI,GAAG,KAAK;GAC1C,MAAM,KAAK,IAAI;AACf,MAAG,MAAM,QAAQ,OAAO,QAAQ,QAAQ,GAAG,OAAO,YAAY,MAAM;AACpE,MAAG,MAAM,UAAU,OAAO,QAAQ,QAAQ,KAAK;;;AAInD,QAAO;EACL,aAAa,YAAY;EACzB;EACA;EACD"}