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

A Component Library for Vue 3

{"version":3,"file":"layout-observer.mjs","sources":["../../../../../../packages/components/table/src/layout-observer.ts"],"sourcesContent":["import {\n  onBeforeMount,\n  onUnmounted,\n  onMounted,\n  onUpdated,\n  computed,\n  getCurrentInstance,\n} from 'vue'\n\nimport type { TableHeader } from './table-header'\nimport type TableLayout from './table-layout'\nimport type { Table } from './table/defaults'\n\nfunction useLayoutObserver<T>(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 = {}\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 = 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"],"names":[],"mappings":";;AAaA,2BAA8B,MAAgB;AAC5C,QAAM,WAAW;AACjB,gBAAc,MAAM;AAClB,gBAAY,MAAM,YAAY;AAAA;AAEhC,YAAU,MAAM;AACd,oBAAgB,YAAY;AAC5B,uBAAmB,YAAY;AAAA;AAEjC,YAAU,MAAM;AACd,oBAAgB,YAAY;AAC5B,uBAAmB,YAAY;AAAA;AAEjC,cAAY,MAAM;AAChB,gBAAY,MAAM,eAAe;AAAA;AAEnC,QAAM,cAAc,SAAS,MAAM;AACjC,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,QAAQ;AACX,YAAM,IAAI,MAAM;AAAA;AAElB,WAAO;AAAA;AAET,QAAM,kBAAkB,CAAC,WAA2B;AApCtD;AAqCI,UAAM,OAAO,YAAK,MAAM,OAAX,mBAAe,iBAAiB,sBAAqB;AAClE,QAAI,CAAC,KAAK;AAAQ;AAClB,UAAM,iBAAiB,OAAO;AAC9B,UAAM,aAAa;AACnB,mBAAe,QAAQ,CAAC,WAAW;AACjC,iBAAW,OAAO,MAAM;AAAA;AAE1B,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAAK;AAC3C,YAAM,MAAM,KAAK;AACjB,YAAM,OAAO,IAAI,aAAa;AAC9B,YAAM,SAAS,WAAW;AAC1B,UAAI,QAAQ;AACV,YAAI,aAAa,SAAS,OAAO,aAAa,OAAO;AAAA;AAAA;AAAA;AAK3D,QAAM,qBAAqB,CAAC,WAA2B;AACrD,UAAM,OAAO,KAAK,MAAM,GAAG,iBAAiB;AAC5C,aAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,IAAI,GAAG,KAAK;AAC3C,YAAM,MAAM,KAAK;AACjB,UAAI,aAAa,SAAS,OAAO,QAAQ,QAAQ,OAAO,cAAc;AAAA;AAExE,UAAM,MAAM,KAAK,MAAM,GAAG,iBAAiB;AAC3C,aAAS,IAAI,GAAG,IAAI,IAAI,QAAQ,IAAI,GAAG,KAAK;AAC1C,YAAM,KAAK,IAAI;AACf,SAAG,MAAM,QAAQ,OAAO,QAAQ,QAAQ,GAAG,OAAO,kBAAkB;AACpE,SAAG,MAAM,UAAU,OAAO,QAAQ,QAAQ,KAAK;AAAA;AAAA;AAInD,SAAO;AAAA,IACL,aAAa,YAAY;AAAA,IACzB;AAAA,IACA;AAAA;AAAA;;;;"}