yuyeon 0.2.1-rc.4 → 0.2.1-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/yuyeon.js +843 -814
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/table/YTable.mjs +12 -17
- package/lib/components/table/YTable.mjs.map +1 -1
- package/lib/components/table/composibles/header.mjs +10 -3
- package/lib/components/table/composibles/header.mjs.map +1 -1
- package/lib/components/table/composibles/measure.mjs +37 -0
- package/lib/components/table/composibles/measure.mjs.map +1 -0
- package/package.json +1 -1
- package/types/components/table/composibles/measure.d.ts +8 -0
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { createVNode as _createVNode } from "vue";
|
|
2
2
|
import { provide } from 'vue';
|
|
3
|
+
import { useRectMeasure } from "./composibles/measure.mjs";
|
|
3
4
|
import { useRender } from "../../composables/component.mjs";
|
|
4
|
-
import { useResizeObserver } from "../../composables/resize-observer.mjs";
|
|
5
5
|
import { defineComponent, propsFactory } from "../../util/component/index.mjs";
|
|
6
6
|
import { toStyleSizeValue } from "../../util/ui.mjs";
|
|
7
7
|
import "./YTable.scss";
|
|
@@ -33,26 +33,21 @@ export const YTable = defineComponent({
|
|
|
33
33
|
emit
|
|
34
34
|
} = _ref;
|
|
35
35
|
const {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} = useResizeObserver();
|
|
43
|
-
const {
|
|
44
|
-
resizeObservedRef: tableRef,
|
|
45
|
-
contentRect: tableRect
|
|
46
|
-
} = useResizeObserver();
|
|
36
|
+
containerRef,
|
|
37
|
+
wrapperRef,
|
|
38
|
+
tableRef,
|
|
39
|
+
containerRect,
|
|
40
|
+
wrapperRect
|
|
41
|
+
} = useRectMeasure();
|
|
47
42
|
provide('YTable', {
|
|
48
|
-
containerRect
|
|
43
|
+
containerRect
|
|
49
44
|
});
|
|
50
45
|
function onScroll(e) {
|
|
51
46
|
emit('scroll', e);
|
|
52
47
|
}
|
|
53
48
|
useRender(() => {
|
|
54
49
|
const ElTag = props.tag ?? 'div';
|
|
55
|
-
const containerHeight = props.flexHeight ?
|
|
50
|
+
const containerHeight = props.flexHeight ? containerRect.value?.height ?? props.height : props.height;
|
|
56
51
|
return _createVNode(ElTag, {
|
|
57
52
|
"class": ['y-table', {
|
|
58
53
|
'y-table--fixed-head': props.fixedHead,
|
|
@@ -60,12 +55,12 @@ export const YTable = defineComponent({
|
|
|
60
55
|
'y-table--flex-height': props.flexHeight
|
|
61
56
|
}],
|
|
62
57
|
"style": {
|
|
63
|
-
'--y-table-container-width': toStyleSizeValue(
|
|
58
|
+
'--y-table-container-width': toStyleSizeValue(containerRect.value?.width),
|
|
64
59
|
'--y-table-wrapper-width': toStyleSizeValue(wrapperRect.value?.width)
|
|
65
60
|
}
|
|
66
61
|
}, {
|
|
67
62
|
default: () => [slots.top?.(), slots.default ? _createVNode("div", {
|
|
68
|
-
"ref":
|
|
63
|
+
"ref": containerRef,
|
|
69
64
|
"class": ['y-table__container']
|
|
70
65
|
}, [slots.leading?.(), _createVNode("div", {
|
|
71
66
|
"ref": wrapperRef,
|
|
@@ -76,7 +71,7 @@ export const YTable = defineComponent({
|
|
|
76
71
|
"onScroll": onScroll
|
|
77
72
|
}, [_createVNode("table", {
|
|
78
73
|
"ref": tableRef
|
|
79
|
-
}, [slots.default()])]), slots.trailing?.()]) : slots.container?.(
|
|
74
|
+
}, [slots.default()])]), slots.trailing?.()]) : slots.container?.(containerRef, containerRect), slots.bottom?.()]
|
|
80
75
|
});
|
|
81
76
|
});
|
|
82
77
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YTable.mjs","names":["provide","
|
|
1
|
+
{"version":3,"file":"YTable.mjs","names":["provide","useRectMeasure","useRender","defineComponent","propsFactory","toStyleSizeValue","pressYTableProps","tag","type","String","default","fixedHead","Boolean","height","Number","flexHeight","onScroll","Function","YTable","name","props","emits","setup","_ref","slots","emit","containerRef","wrapperRef","tableRef","containerRect","wrapperRect","e","ElTag","containerHeight","value","_createVNode","width","top","leading","trailing","container","bottom"],"sources":["../../../src/components/table/YTable.tsx"],"sourcesContent":["import { type PropType, provide } from 'vue';\n\nimport { useRectMeasure } from '@/components/table/composibles/measure';\nimport { useRender } from '@/composables/component';\nimport { defineComponent, propsFactory } from '@/util/component';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport './YTable.scss';\n\nexport const pressYTableProps = propsFactory(\n {\n tag: {\n type: String as PropType<string>,\n default: 'div',\n },\n fixedHead: {\n type: Boolean as PropType<boolean>,\n },\n height: {\n type: [Number, String] as PropType<number | string>,\n },\n flexHeight: {\n type: Boolean as PropType<boolean>,\n },\n onScroll: Function as PropType<(e: Event) => void>,\n },\n 'YTable',\n);\n\nexport const YTable = defineComponent({\n name: 'YTable',\n props: {\n ...pressYTableProps(),\n },\n emits: ['scroll'],\n setup(props, { slots, emit }) {\n const { containerRef, wrapperRef, tableRef, containerRect, wrapperRect } =\n useRectMeasure();\n\n provide('YTable', { containerRect });\n\n function onScroll(e: Event) {\n emit('scroll', e);\n }\n\n useRender(() => {\n const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\n const containerHeight = props.flexHeight\n ? containerRect.value?.height ?? props.height\n : props.height;\n return (\n <ElTag\n class={[\n 'y-table',\n {\n 'y-table--fixed-head': props.fixedHead,\n 'y-table--fixed-height': props.flexHeight || props.height,\n 'y-table--flex-height': props.flexHeight,\n },\n ]}\n style={{\n '--y-table-container-width': toStyleSizeValue(\n containerRect.value?.width,\n ),\n '--y-table-wrapper-width': toStyleSizeValue(\n wrapperRect.value?.width,\n ),\n }}\n >\n {slots.top?.()}\n {slots.default ? (\n <div ref={containerRef} class={['y-table__container']}>\n {slots.leading?.()}\n <div\n ref={wrapperRef}\n class={['y-table__wrapper']}\n style={{\n height: toStyleSizeValue(containerHeight),\n }}\n onScroll={onScroll}\n >\n <table ref={tableRef}>{slots.default()}</table>\n </div>\n {slots.trailing?.()}\n </div>\n ) : (\n slots.container?.(containerRef, containerRect)\n )}\n {slots.bottom?.()}\n </ElTag>\n );\n });\n },\n});\n\nexport type YTable = InstanceType<typeof YTable>;\n"],"mappings":";AAAA,SAAwBA,OAAO,QAAQ,KAAK;AAAC,SAEpCC,cAAc;AAAA,SACdC,SAAS;AAAA,SACTC,eAAe,EAAEC,YAAY;AAAA,SAC7BC,gBAAgB;AAEzB;AAEA,OAAO,MAAMC,gBAAgB,GAAGF,YAAY,CAC1C;EACEG,GAAG,EAAE;IACHC,IAAI,EAAEC,MAA0B;IAChCC,OAAO,EAAE;EACX,CAAC;EACDC,SAAS,EAAE;IACTH,IAAI,EAAEI;EACR,CAAC;EACDC,MAAM,EAAE;IACNL,IAAI,EAAE,CAACM,MAAM,EAAEL,MAAM;EACvB,CAAC;EACDM,UAAU,EAAE;IACVP,IAAI,EAAEI;EACR,CAAC;EACDI,QAAQ,EAAEC;AACZ,CAAC,EACD,QACF,CAAC;AAED,OAAO,MAAMC,MAAM,GAAGf,eAAe,CAAC;EACpCgB,IAAI,EAAE,QAAQ;EACdC,KAAK,EAAE;IACL,GAAGd,gBAAgB,CAAC;EACtB,CAAC;EACDe,KAAK,EAAE,CAAC,QAAQ,CAAC;EACjBC,KAAKA,CAACF,KAAK,EAAAG,IAAA,EAAmB;IAAA,IAAjB;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAAF,IAAA;IAC1B,MAAM;MAAEG,YAAY;MAAEC,UAAU;MAAEC,QAAQ;MAAEC,aAAa;MAAEC;IAAY,CAAC,GACtE7B,cAAc,CAAC,CAAC;IAElBD,OAAO,CAAC,QAAQ,EAAE;MAAE6B;IAAc,CAAC,CAAC;IAEpC,SAASb,QAAQA,CAACe,CAAQ,EAAE;MAC1BN,IAAI,CAAC,QAAQ,EAAEM,CAAC,CAAC;IACnB;IAEA7B,SAAS,CAAC,MAAM;MACd,MAAM8B,KAAK,GAAIZ,KAAK,CAACb,GAAG,IAAoC,KAAK;MACjE,MAAM0B,eAAe,GAAGb,KAAK,CAACL,UAAU,GACpCc,aAAa,CAACK,KAAK,EAAErB,MAAM,IAAIO,KAAK,CAACP,MAAM,GAC3CO,KAAK,CAACP,MAAM;MAChB,OAAAsB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEZ,KAAK,CAACT,SAAS;UACtC,uBAAuB,EAAES,KAAK,CAACL,UAAU,IAAIK,KAAK,CAACP,MAAM;UACzD,sBAAsB,EAAEO,KAAK,CAACL;QAChC,CAAC,CACF;QAAA,SACM;UACL,2BAA2B,EAAEV,gBAAgB,CAC3CwB,aAAa,CAACK,KAAK,EAAEE,KACvB,CAAC;UACD,yBAAyB,EAAE/B,gBAAgB,CACzCyB,WAAW,CAACI,KAAK,EAAEE,KACrB;QACF;MAAC;QAAA1B,OAAA,EAAAA,CAAA,MAEAc,KAAK,CAACa,GAAG,GAAG,CAAC,EACbb,KAAK,CAACd,OAAO,GAAAyB,YAAA;UAAA,OACFT,YAAY;UAAA,SAAS,CAAC,oBAAoB;QAAC,IAClDF,KAAK,CAACc,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,OAEXR,UAAU;UAAA,SACR,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLd,MAAM,EAAER,gBAAgB,CAAC4B,eAAe;UAC1C,CAAC;UAAA,YACSjB;QAAQ,IAAAmB,YAAA;UAAA,OAENP;QAAQ,IAAGJ,KAAK,CAACd,OAAO,CAAC,CAAC,MAEvCc,KAAK,CAACe,QAAQ,GAAG,CAAC,KAGrBf,KAAK,CAACgB,SAAS,GAAGd,YAAY,EAAEG,aAAa,CAC9C,EACAL,KAAK,CAACiB,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -34,11 +34,18 @@ export function createHeader(props, options) {
|
|
|
34
34
|
return column.key === 'data-table-select';
|
|
35
35
|
});
|
|
36
36
|
if (foundIndex < 0) {
|
|
37
|
+
const fixed = flat.some(_ref2 => {
|
|
38
|
+
let {
|
|
39
|
+
column
|
|
40
|
+
} = _ref2;
|
|
41
|
+
return !!column?.fixed;
|
|
42
|
+
});
|
|
37
43
|
flat.unshift({
|
|
38
44
|
column: {
|
|
39
45
|
...defaultActionHeader,
|
|
40
46
|
key: 'data-table-select',
|
|
41
|
-
rowspan: rowCount
|
|
47
|
+
rowspan: rowCount,
|
|
48
|
+
fixed
|
|
42
49
|
},
|
|
43
50
|
rowIndex: 0
|
|
44
51
|
});
|
|
@@ -54,11 +61,11 @@ export function createHeader(props, options) {
|
|
|
54
61
|
}
|
|
55
62
|
const fixedRows = getRangeArr(rowCount).map(() => []);
|
|
56
63
|
const fixedOffsets = getRangeArr(rowCount).fill(0);
|
|
57
|
-
flat.forEach(
|
|
64
|
+
flat.forEach(_ref3 => {
|
|
58
65
|
let {
|
|
59
66
|
column,
|
|
60
67
|
rowIndex
|
|
61
|
-
} =
|
|
68
|
+
} = _ref3;
|
|
62
69
|
const {
|
|
63
70
|
key
|
|
64
71
|
} = column;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.mjs","names":["inject","provide","ref","watchEffect","getRangeArr","propsFactory","pressDataTableHeader","headers","type","Array","default","Y_DATA_TABLE_HEADER_KEY","Symbol","for","createHeader","props","options","columns","rows","length","flat","flatMap","row","index","map","column","rowIndex","rowCount","defaultHeader","text","sortable","defaultActionHeader","width","enableSelect","value","foundIndex","findIndex","_ref","key","unshift","rowspan","splice","fixedRows","fixedOffsets","fill","forEach","
|
|
1
|
+
{"version":3,"file":"header.mjs","names":["inject","provide","ref","watchEffect","getRangeArr","propsFactory","pressDataTableHeader","headers","type","Array","default","Y_DATA_TABLE_HEADER_KEY","Symbol","for","createHeader","props","options","columns","rows","length","flat","flatMap","row","index","map","column","rowIndex","rowCount","defaultHeader","text","sortable","defaultActionHeader","width","enableSelect","value","foundIndex","findIndex","_ref","key","fixed","some","_ref2","unshift","rowspan","splice","fixedRows","fixedOffsets","fill","forEach","_ref3","i","push","fixedOffset","Number","lastFixed","seen","Set","filtered","has","add","at","data","useHeader","Error","description"],"sources":["../../../../src/components/table/composibles/header.ts"],"sourcesContent":["import { type DeepReadonly, type InjectionKey, type PropType, type Ref, inject, provide, ref, watchEffect } from 'vue';\n\n\n\nimport { getRangeArr } from '@/util/common';\nimport { propsFactory } from '@/util/component';\n\n\n\nimport { type DataTableHeader, type InternalDataTableHeader } from '../types';\n\n\nexport const pressDataTableHeader = propsFactory(\n {\n headers: {\n type: Array as PropType<DeepReadonly<DataTableHeader[]>>,\n default: () => [],\n },\n },\n 'YDataTable--header',\n);\n\nexport const Y_DATA_TABLE_HEADER_KEY: InjectionKey<{\n headers: Ref<InternalDataTableHeader[][]>;\n columns: Ref<InternalDataTableHeader[]>;\n}> = Symbol.for('yuyeon.data-table.header');\n\ntype HeaderProps = {\n headers: DeepReadonly<DataTableHeader[]> | undefined;\n};\n\nexport function createHeader(\n props: HeaderProps,\n options?: {\n enableSelect?: Ref<boolean>;\n },\n) {\n const headers = ref<InternalDataTableHeader[][]>([]);\n const columns = ref<InternalDataTableHeader[]>([]);\n\n watchEffect(() => {\n const rows = props.headers?.length\n ? [props.headers as DataTableHeader[]]\n : [];\n const flat = rows.flatMap((row, index) =>\n row.map((column) => ({ column, rowIndex: index })),\n );\n const rowCount = rows.length;\n const defaultHeader = { text: '', sortable: false };\n const defaultActionHeader = { ...defaultHeader, width: 48 };\n\n if (options?.enableSelect?.value) {\n const foundIndex = flat.findIndex(\n ({ column }) => column.key === 'data-table-select',\n );\n if (foundIndex < 0) {\n const fixed = flat.some(({ column }) => !!column?.fixed);\n flat.unshift({\n column: {\n ...defaultActionHeader,\n key: 'data-table-select',\n rowspan: rowCount,\n fixed,\n },\n rowIndex: 0,\n });\n } else {\n flat.splice(foundIndex, 1, {\n column: {\n ...defaultActionHeader,\n ...flat[foundIndex].column,\n },\n rowIndex: flat[foundIndex].rowIndex,\n });\n }\n }\n\n const fixedRows: InternalDataTableHeader[][] = getRangeArr(rowCount).map(\n () => [],\n );\n const fixedOffsets = getRangeArr(rowCount).fill(0);\n\n flat.forEach(({ column, rowIndex }) => {\n const { key } = column;\n for (\n let i = rowIndex;\n i <= rowIndex + (column.rowspan ?? 1) - 1;\n i += 1\n ) {\n fixedRows[i].push({\n ...column,\n key,\n fixedOffset: fixedOffsets[i],\n sortable: column.sortable ?? !!key,\n });\n fixedOffsets[i] += Number(column.width ?? 0);\n }\n });\n\n fixedRows.forEach((row) => {\n for (let i = row.length; (i -= 1); i >= 0) {\n if (row[i].fixed) {\n row[i].lastFixed = true;\n return;\n }\n }\n });\n\n const seen = new Set();\n headers.value = fixedRows.map((row) => {\n const filtered = [];\n for (const column of row) {\n if (!seen.has(column.key)) {\n seen.add(column.key);\n filtered.push(column);\n }\n }\n return filtered;\n });\n\n columns.value = fixedRows.at(-1) ?? [];\n });\n\n const data = { headers, columns };\n\n provide(Y_DATA_TABLE_HEADER_KEY, data);\n\n return data;\n}\n\nexport function useHeader() {\n const data = inject(Y_DATA_TABLE_HEADER_KEY);\n if (!data) {\n throw new Error(`Not provided: ${Y_DATA_TABLE_HEADER_KEY.description}`);\n }\n return data;\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ref } from 'vue';
|
|
2
|
+
import { useResizeObserver } from "../../../composables/index.mjs";
|
|
3
|
+
export function useRectMeasure() {
|
|
4
|
+
const containerRect = ref();
|
|
5
|
+
const wrapperRect = ref();
|
|
6
|
+
const tableRect = ref();
|
|
7
|
+
const {
|
|
8
|
+
resizeObservedRef: containerRef
|
|
9
|
+
} = useResizeObserver(entries => {
|
|
10
|
+
requestAnimationFrame(() => {
|
|
11
|
+
containerRect.value = entries?.[0]?.contentRect;
|
|
12
|
+
});
|
|
13
|
+
});
|
|
14
|
+
const {
|
|
15
|
+
resizeObservedRef: wrapperRef
|
|
16
|
+
} = useResizeObserver(entries => {
|
|
17
|
+
requestAnimationFrame(() => {
|
|
18
|
+
wrapperRect.value = entries?.[0]?.contentRect;
|
|
19
|
+
});
|
|
20
|
+
});
|
|
21
|
+
const {
|
|
22
|
+
resizeObservedRef: tableRef
|
|
23
|
+
} = useResizeObserver(entries => {
|
|
24
|
+
requestAnimationFrame(() => {
|
|
25
|
+
tableRect.value = entries?.[0]?.contentRect;
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
return {
|
|
29
|
+
containerRef,
|
|
30
|
+
wrapperRef,
|
|
31
|
+
tableRef,
|
|
32
|
+
containerRect,
|
|
33
|
+
wrapperRect,
|
|
34
|
+
tableRect
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
//# sourceMappingURL=measure.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"measure.mjs","names":["ref","useResizeObserver","useRectMeasure","containerRect","wrapperRect","tableRect","resizeObservedRef","containerRef","entries","requestAnimationFrame","value","contentRect","wrapperRef","tableRef"],"sources":["../../../../src/components/table/composibles/measure.ts"],"sourcesContent":["import { ref } from 'vue';\r\nimport { useResizeObserver } from '@/composables';\r\n\r\nexport function useRectMeasure() {\r\n const containerRect = ref<DOMRectReadOnly>();\r\n const wrapperRect = ref<DOMRectReadOnly>();\r\n const tableRect = ref<DOMRectReadOnly>();\r\n\r\n const { resizeObservedRef: containerRef } = useResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n containerRect.value = entries?.[0]?.contentRect;\r\n })\r\n });\r\n\r\n const { resizeObservedRef: wrapperRef } = useResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n wrapperRect.value = entries?.[0]?.contentRect;\r\n })\r\n });\r\n\r\n const { resizeObservedRef: tableRef } = useResizeObserver((entries) => {\r\n requestAnimationFrame(() => {\r\n tableRect.value = entries?.[0]?.contentRect;\r\n })\r\n });\r\n\r\n return {\r\n containerRef,\r\n wrapperRef,\r\n tableRef,\r\n containerRect,\r\n wrapperRect,\r\n tableRect,\r\n }\r\n}\r\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,KAAK;AAAC,SACjBC,iBAAiB;AAE1B,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAMC,aAAa,GAAGH,GAAG,CAAkB,CAAC;EAC5C,MAAMI,WAAW,GAAGJ,GAAG,CAAkB,CAAC;EAC1C,MAAMK,SAAS,GAAGL,GAAG,CAAkB,CAAC;EAExC,MAAM;IAAEM,iBAAiB,EAAEC;EAAa,CAAC,GAAGN,iBAAiB,CAAEO,OAAO,IAAK;IACzEC,qBAAqB,CAAC,MAAM;MAC1BN,aAAa,CAACO,KAAK,GAAGF,OAAO,GAAG,CAAC,CAAC,EAAEG,WAAW;IACjD,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,MAAM;IAAEL,iBAAiB,EAAEM;EAAW,CAAC,GAAGX,iBAAiB,CAAEO,OAAO,IAAK;IACvEC,qBAAqB,CAAC,MAAM;MAC1BL,WAAW,CAACM,KAAK,GAAGF,OAAO,GAAG,CAAC,CAAC,EAAEG,WAAW;IAC/C,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,MAAM;IAAEL,iBAAiB,EAAEO;EAAS,CAAC,GAAGZ,iBAAiB,CAAEO,OAAO,IAAK;IACrEC,qBAAqB,CAAC,MAAM;MAC1BJ,SAAS,CAACK,KAAK,GAAGF,OAAO,GAAG,CAAC,CAAC,EAAEG,WAAW;IAC7C,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,OAAO;IACLJ,YAAY;IACZK,UAAU;IACVC,QAAQ;IACRV,aAAa;IACbC,WAAW;IACXC;EACF,CAAC;AACH"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare function useRectMeasure(): {
|
|
2
|
+
containerRef: import('vue').Ref<HTMLElement | undefined>;
|
|
3
|
+
wrapperRef: import('vue').Ref<HTMLElement | undefined>;
|
|
4
|
+
tableRef: import('vue').Ref<HTMLElement | undefined>;
|
|
5
|
+
containerRect: import('vue').Ref<DOMRectReadOnly | undefined>;
|
|
6
|
+
wrapperRect: import('vue').Ref<DOMRectReadOnly | undefined>;
|
|
7
|
+
tableRect: import('vue').Ref<DOMRectReadOnly | undefined>;
|
|
8
|
+
};
|