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
20 KiB
1 line
20 KiB
11 months ago
|
{"version":3,"file":"table-layout.mjs","sources":["../../../../../../packages/components/table/src/table-layout.ts"],"sourcesContent":["import { nextTick, ref, isRef } from 'vue'\nimport { hasOwn } from '@vue/shared'\nimport { isClient } from '@vueuse/core'\nimport scrollbarWidth from '@element-plus/utils/scrollbar-width'\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 viewportHeight: Ref<null | number> // Table Height - Scroll Bar Height\n bodyHeight: Ref<null | number> // Table Height - Table Header Height\n bodyScrollHeight: Ref<number>\n fixedBodyHeight: Ref<null | number> // Table Height - Table Header Height - Scroll Bar 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.tableHeight = ref(null)\n this.headerHeight = ref(44)\n this.appendHeight = ref(0)\n this.footerHeight = ref(44)\n this.viewportHeight = ref(null)\n this.bodyHeight = ref(null)\n this.bodyScrollHeight = ref(0)\n this.fixedBodyHeight = ref(null)\n this.gutterWidth = scrollbarWidth()\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 bodyWrapper = this.table.refs.bodyWrapper as HTMLElement\n if (this.table.vnode.el && bodyWrapper) {\n let scrollY = true\n const prevScrollY = this.scrollY.value\n /**\n * When bodyHeight has no value,\n * it means that the table height is not set,\n * and the scroll bar will never appear\n */\n if (this.bodyHeight.value === null) {\n scrollY = false\n } else {\n scrollY = bodyWrapper.scrollHeight > this.bodyHeight.value\n }\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 getFla
|