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;CACrC,oBAAoB;EAClB,YAAY,MAAM,YAAY,SAAS;GACvC;CACF,gBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,gBAAgB;EACd,gBAAgB,YAAY,MAAM;EAClC,mBAAmB,YAAY,MAAM;GACrC;CACF,kBAAkB;EAChB,YAAY,MAAM,eAAe,SAAS;GAC1C;CACF,MAAM,cAAc,eAAe;EACjC,MAAM,SAAS,KAAK;EACpB,IAAI,CAAC,QACH,MAAM,IAAI,MAAM,6BAA6B;EAE/C,OAAO;GACP;CACF,MAAM,mBAAmB,WAA2B;EAClD,MAAM,OAAO,KAAK,MAAM,IAAI,iBAAiB,iBAAiB,IAAI,EAAE;EACpE,IAAI,CAAC,KAAK,QAAQ;EAClB,MAAM,iBAAiB,OAAO,mBAAmB;EACjD,MAAM,aAAgD,EAAE;EACxD,eAAe,SAAS,WAAW;GACjC,WAAW,OAAO,MAAM;IACxB;EACF,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAAK;GAC3C,MAAM,MAAM,KAAK;GAEjB,MAAM,SAAS,WADF,IAAI,aAAa,OACA;GAC9B,IAAI,QACF,IAAI,aAAa,SAAS,OAAO,aAAa,OAAO,MAAM;;;CAKjE,MAAM,sBAAsB,WAA2B;EACrD,MAAM,OACJ,KAAK,MAAM,IAAI,iBAAiB,8BAA8B,IAAI,EAAE;EACtE,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAEtC,KADiB,GACb,aAAa,SAAS,OAAO,QAAQ,QAAQ,OAAO,cAAc,IAAI;EAE5E,MAAM,MAAM,KAAK,MAAM,IAAI,iBAAiB,YAAY,IAAI,EAAE;EAC9D,KAAK,IAAI,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAI,GAAG,KAAK;GAC1C,MAAM,KAAK,IAAI;GACf,GAAG,MAAM,QAAQ,OAAO,QAAQ,QAAQ,GAAG,OAAO,YAAY,MAAM;GACpE,GAAG,MAAM,UAAU,OAAO,QAAQ,QAAQ,KAAK;;;CAInD,OAAO;EACL,aAAa,YAAY;EACzB;EACA;EACD"}