-
Notifications
You must be signed in to change notification settings - Fork 3
/
use-table-heights.ts
70 lines (57 loc) · 1.55 KB
/
use-table-heights.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Ref } from 'vue'
interface TableHeightsComposableParams {
propHeight: Ref<number | string>
propMaxHeight: Ref<number | string>
headerHeight: Ref<number>
tableHeight: Ref<number>
}
export function useTableHeights({
propHeight,
propMaxHeight,
headerHeight,
tableHeight,
}: TableHeightsComposableParams) {
function parseHeight(height: string | number) {
if (typeof height === 'number') {
return height
}
if (/^\d+(?:px)?$/.test(height)) {
return parseInt(height, 10)
}
return height
}
const tableHeightStyles = computed(() => {
const parsedHeight = parseHeight(propHeight.value)
const parsedMaxHeight = parseHeight(propMaxHeight.value)
return {
height: typeof parsedHeight === 'number' ? parsedHeight + 'px' : parsedHeight,
'max-height': typeof parsedMaxHeight === 'number' ? parsedMaxHeight + 'px' : parsedMaxHeight,
}
})
const bodyHeightStyles = ref({})
watch(
[headerHeight, tableHeight],
() => {
if (propHeight.value) {
const bodyHeight = tableHeight.value - headerHeight.value
bodyHeightStyles.value = {
height: bodyHeight ? bodyHeight + 'px' : '',
}
return
}
if (propMaxHeight.value) {
const maxHeight = parseHeight(propMaxHeight.value)
if (typeof maxHeight === 'number') {
return {
'max-height': maxHeight - headerHeight.value + 'px',
}
}
}
},
{ immediate: true },
)
return {
tableHeightStyles,
bodyHeightStyles,
}
}