You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
16 KiB
1 line
16 KiB
2 years ago
|
{"version":3,"file":"table-layout.mjs","sources":["../../../../../../packages/components/table/src/table-layout.ts"],"sourcesContent":["// @ts-nocheck\nimport { isRef, nextTick, ref } from 'vue'\nimport { hasOwn, isClient } from '@element-plus/utils'\nimport { parseHeight } from './util'\nimport type { Ref } from 'vue'\n\nimport type { TableColumnCtx } from './table-column/defaults'\nimport type { TableHeader } from './table-header'\nimport type { Table } from './table/defaults'\nimport type { Store } from './store'\nclass TableLayout<T> {\n observers: TableHeader[]\n table: Table<T>\n store: Store<T>\n columns: TableColumnCtx<T>[]\n fit: boolean\n showHeader: boolean\n\n height: Ref<null | number>\n scrollX: Ref<boolean>\n scrollY: Ref<boolean>\n bodyWidth: Ref<null | number>\n fixedWidth: Ref<null | number>\n rightFixedWidth: Ref<null | number>\n tableHeight: Ref<null | number>\n headerHeight: Ref<null | number> // Table Header Height\n appendHeight: Ref<null | number> // Append Slot Height\n footerHeight: Ref<null | number> // Table Footer Height\n gutterWidth: number\n constructor(options: Record<string, any>) {\n this.observers = []\n this.table = null\n this.store = null\n this.columns = []\n this.fit = true\n this.showHeader = true\n this.height = ref(null)\n this.scrollX = ref(false)\n this.scrollY = ref(false)\n this.bodyWidth = ref(null)\n this.fixedWidth = ref(null)\n this.rightFixedWidth = ref(null)\n this.gutterWidth = 0\n for (const name in options) {\n if (hasOwn(options, name)) {\n if (isRef(this[name])) {\n this[name as string].value = options[name]\n } else {\n this[name as string] = options[name]\n }\n }\n }\n if (!this.table) {\n throw new Error('Table is required for Table Layout')\n }\n if (!this.store) {\n throw new Error('Store is required for Table Layout')\n }\n }\n\n updateScrollY() {\n const height = this.height.value\n /**\n * When the height is not initialized, it is null.\n * After the table is initialized, when the height is not configured, the height is 0.\n */\n if (height === null) return false\n const scrollBarRef = this.table.refs.scrollBarRef\n if (this.table.vnode.el && scrollBarRef?.wrapRef) {\n let scrollY = true\n const prevScrollY = this.scrollY.value\n scrollY =\n scrollBarRef.wrapRef.scrollHeight > scrollBarRef.wrapRef.clientHeight\n this.scrollY.value = scrollY\n return prevScrollY !== scrollY\n }\n return false\n }\n\n setHeight(value: string | number, prop = 'height') {\n if (!isClient) return\n const el = this.table.vnode.el\n value = parseHeight(value)\n this.height.value = Number(value)\n\n if (!el && (value || value === 0))\n return nextTick(() => this.setHeight(value, prop))\n\n if (typeof value === 'number') {\n el.style[prop] = `${value}px`\n this.updateElsHeight()\n } else if (typeof value === 'string') {\n el.style[prop] = value\n this.updateElsHeight()\n }\n }\n\n setMaxHeight(value: string | number) {\n this.setHeight(value, 'max-height')\n }\n\n getFlattenColumns(): TableColumnCtx<T>[] {\n const flattenColumns = []\n const columns = this.table.store.states.columns.value\n columns.forEach((column) => {\n if (column.isColumnGroup) {\n // eslint-disable-next-line prefer-spread\n flattenColumns.push.apply(flattenColumns, column.columns)\n } else {\n flattenColumns.push(column)\n }\n })\n\n return flattenColumns\n }\n\n updateElsHeight() {\n this.updateScrollY()\n this.notifyObservers('scrollable')\n }\n\n headerDisplayNone(elm: HTMLElement) {\n if (!elm) return true\n let headerChild = elm\n while (headerChild.tagName !== 'DIV') {\n if (getComputedStyle(headerChild).display === 'none') {\n return true\n }\n headerChild = headerChild.parentElement\n }\n return false\n }\n\n updateColumnsWidth() {\n if (!isClien
|