yuyeon 0.3.0-rc.0 → 0.3.0-rc.2
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 +1730 -1733
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/table/YDataTableServer.mjs +6 -1
- package/lib/components/table/YDataTableServer.mjs.map +1 -1
- package/lib/components/table/YTable.mjs +0 -2
- package/lib/components/table/YTable.mjs.map +1 -1
- package/lib/components/table/composibles/measure.mjs +24 -22
- package/lib/components/table/composibles/measure.mjs.map +1 -1
- package/package.json +1 -1
- package/types/components/table/composibles/measure.d.ts +5 -5
|
@@ -3,6 +3,7 @@ import { computed, provide, ref, toRef } from 'vue';
|
|
|
3
3
|
import { useRender } from "../../composables/component.mjs";
|
|
4
4
|
import { useResizeObserver } from "../../composables/resize-observer.mjs";
|
|
5
5
|
import { chooseProps, defineComponent, propsFactory } from "../../util/component/index.mjs";
|
|
6
|
+
import { debounce } from "../../util/debounce.mjs";
|
|
6
7
|
import { toStyleSizeValue } from "../../util/ui.mjs";
|
|
7
8
|
import { pressDataTableProps } from "./YDataTable.mjs";
|
|
8
9
|
import { YDataTableBody } from "./YDataTableBody.mjs";
|
|
@@ -95,11 +96,15 @@ export const YDataTableServer = defineComponent({
|
|
|
95
96
|
pageItems: items
|
|
96
97
|
});
|
|
97
98
|
const headRect = ref();
|
|
99
|
+
const debounceMeasureHead = debounce(measureHead, 100);
|
|
98
100
|
const {
|
|
99
101
|
resizeObservedRef: headObserveRef
|
|
100
102
|
} = useResizeObserver(entries => {
|
|
101
|
-
|
|
103
|
+
debounceMeasureHead(entries);
|
|
102
104
|
});
|
|
105
|
+
function measureHead(entries) {
|
|
106
|
+
headRect.value = entries?.[0].contentRect;
|
|
107
|
+
}
|
|
103
108
|
useOptions({
|
|
104
109
|
page,
|
|
105
110
|
pageSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"YDataTableServer.mjs","names":["computed","provide","ref","toRef","useRender","useResizeObserver","chooseProps","defineComponent","propsFactory","toStyleSizeValue","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","createHeader","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","provideSelection","createSorting","provideSorting","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","setPage","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","headRect","resizeObservedRef","headObserveRef","entries","requestAnimationFrame","contentRect","search","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","loading","length","hideNoData","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { type PropType, computed, provide, ref, toRef } from 'vue';\r\n\r\nimport { useRender } from '@/composables/component';\r\nimport { useResizeObserver } from '@/composables/resize-observer';\r\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport { pressDataTableProps } from './YDataTable';\r\nimport { YDataTableBody } from './YDataTableBody';\r\nimport { YDataTableControl } from './YDataTableControl';\r\nimport { YDataTableHead } from './YDataTableHead';\r\nimport { YDataTableLayer } from './YDataTableLayer';\r\nimport { YTable } from './YTable';\r\nimport { createHeader } from './composibles/header';\r\nimport { useItems } from './composibles/items';\r\nimport { useOptions } from './composibles/options';\r\nimport {\r\n createPagination,\r\n pressDataTablePaginationProps,\r\n providePagination,\r\n} from './composibles/pagination';\r\nimport { provideSelection } from './composibles/selection';\r\nimport { createSorting, provideSorting } from './composibles/sorting';\r\nimport { YDataTableSlotProps } from './types';\r\n\r\nexport const pressDataTableServerProps = propsFactory(\r\n {\r\n total: {\r\n type: [Number, String] as PropType<number | string>,\r\n required: true,\r\n },\r\n ...pressDataTablePaginationProps(),\r\n ...pressDataTableProps(),\r\n },\r\n 'YDataTableServer',\r\n);\r\n\r\nexport const YDataTableServer = defineComponent({\r\n name: 'YDataTableServer',\r\n components: {\r\n YTable,\r\n YDataTableLayer,\r\n YDataTableHead,\r\n YDataTableBody,\r\n YDataTableControl,\r\n },\r\n props: {\r\n ...pressDataTableServerProps(),\r\n },\r\n emits: {\r\n 'update:modelValue': (value: any[]) => true,\r\n 'update:page': (page: number) => true,\r\n 'update:pageSize': (pageSize: number) => true,\r\n 'update:sortBy': (sortBy: any) => true,\r\n 'update:options': (options: any) => true,\r\n 'click:row': (e: Event, value: { row: any }) => true,\r\n },\r\n setup(props, { slots, emit }) {\r\n const { page, pageSize } = createPagination(props);\r\n const { sortBy, multiSort } = createSorting(props);\r\n const total = computed(() => parseInt(props.total as string));\r\n const { columns, headers } = createHeader(props, {\r\n enableSelect: toRef(props, 'enableSelect'),\r\n });\r\n const { items } = useItems(props, columns);\r\n\r\n const { toggleSort } = provideSorting({ sortBy, multiSort, page });\r\n const { pageLength, setPageSize, setPage } = providePagination({\r\n page,\r\n pageSize,\r\n total,\r\n });\r\n const {\r\n isSelected,\r\n select,\r\n selectAll,\r\n toggleSelect,\r\n someSelected,\r\n allSelected,\r\n } = provideSelection(props, { allItems: items, pageItems: items });\r\n\r\n const headRect = ref<DOMRectReadOnly>();\r\n const { resizeObservedRef: headObserveRef } = useResizeObserver(\r\n (entries) => {\r\n requestAnimationFrame(\r\n () => (headRect.value = entries?.[0].contentRect),\r\n );\r\n },\r\n );\r\n\r\n useOptions(\r\n {\r\n page,\r\n pageSize,\r\n search: toRef(props, 'search'),\r\n sortBy,\r\n },\r\n emit,\r\n );\r\n\r\n provide('y-data-table', {\r\n toggleSort,\r\n sortBy,\r\n headRect,\r\n });\r\n\r\n const slotProps = computed<YDataTableSlotProps>(() => {\r\n return {\r\n // pagination\r\n page: page.value,\r\n pageSize: pageSize.value,\r\n pageLength: pageLength.value,\r\n setPageSize,\r\n setPage,\r\n // sorting\r\n sortBy: sortBy.value,\r\n toggleSort,\r\n // selection\r\n someSelected: someSelected.value,\r\n allSelected: allSelected.value,\r\n isSelected,\r\n select,\r\n selectAll,\r\n toggleSelect,\r\n //\r\n items: items.value,\r\n columns: columns.value,\r\n headers: headers.value,\r\n };\r\n });\r\n\r\n useRender(() => {\r\n const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\r\n const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\r\n const yTableProps = chooseProps(props, YTable.props);\r\n return (\r\n <YTable\r\n class={[\r\n 'y-data-table',\r\n {\r\n 'y-data-table--no-data':\r\n !props.loading && props.items.length < 1 && !props.hideNoData,\r\n },\r\n ]}\r\n {...yTableProps}\r\n style={{\r\n '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\r\n }}\r\n >\r\n {{\r\n top: () => slots.top?.(slotProps.value),\r\n leading: () =>\r\n slots.leading ? (\r\n slots.leading(slotProps.value)\r\n ) : (\r\n <>\r\n <YDataTableLayer\r\n v-slots={slots}\r\n slotProps={slotProps.value}\r\n ></YDataTableLayer>\r\n </>\r\n ),\r\n default: () =>\r\n slots.default ? (\r\n slots.default(slotProps.value)\r\n ) : (\r\n <>\r\n <thead ref={headObserveRef}>\r\n <YDataTableHead\r\n v-slots={slots}\r\n {...yDataTableHeadProps}\r\n ></YDataTableHead>\r\n </thead>\r\n {slots.thead?.(slotProps.value)}\r\n <tbody>\r\n <YDataTableBody\r\n v-slots={slots}\r\n {...yDataTableBodyProps}\r\n items={items.value}\r\n ></YDataTableBody>\r\n </tbody>\r\n {slots.tbody?.(slotProps.value)}\r\n {slots.tfoot?.(slotProps.value)}\r\n </>\r\n ),\r\n trailing: () => slots.trailing?.(slotProps.value),\r\n bottom: () =>\r\n slots.bottom ? (\r\n slots.bottom(slotProps.value)\r\n ) : (\r\n <YDataTableControl\r\n v-slots={{\r\n prepend: slots['control.prepend'],\r\n }}\r\n ></YDataTableControl>\r\n ),\r\n }}\r\n </YTable>\r\n );\r\n });\r\n },\r\n});\r\n\r\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"YDataTableServer.mjs","names":["computed","provide","ref","toRef","useRender","useResizeObserver","chooseProps","defineComponent","propsFactory","debounce","toStyleSizeValue","pressDataTableProps","YDataTableBody","YDataTableControl","YDataTableHead","YDataTableLayer","YTable","createHeader","useItems","useOptions","createPagination","pressDataTablePaginationProps","providePagination","provideSelection","createSorting","provideSorting","pressDataTableServerProps","total","type","Number","String","required","YDataTableServer","name","components","props","emits","value","page","pageSize","sortBy","options","click:row","e","setup","_ref","slots","emit","multiSort","parseInt","columns","headers","enableSelect","items","toggleSort","pageLength","setPageSize","setPage","isSelected","select","selectAll","toggleSelect","someSelected","allSelected","allItems","pageItems","headRect","debounceMeasureHead","measureHead","resizeObservedRef","headObserveRef","entries","contentRect","search","slotProps","yDataTableHeadProps","yDataTableBodyProps","yTableProps","_createVNode","_mergeProps","loading","length","hideNoData","height","top","leading","_Fragment","default","thead","tbody","tfoot","trailing","bottom","prepend"],"sources":["../../../src/components/table/YDataTableServer.tsx"],"sourcesContent":["import { type PropType, computed, provide, ref, toRef } from 'vue';\n\nimport { useRender } from '@/composables/component';\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { chooseProps, defineComponent, propsFactory } from '@/util/component';\nimport { debounce } from '@/util/debounce';\nimport { toStyleSizeValue } from '@/util/ui';\n\nimport { pressDataTableProps } from './YDataTable';\nimport { YDataTableBody } from './YDataTableBody';\nimport { YDataTableControl } from './YDataTableControl';\nimport { YDataTableHead } from './YDataTableHead';\nimport { YDataTableLayer } from './YDataTableLayer';\nimport { YTable } from './YTable';\nimport { createHeader } from './composibles/header';\nimport { useItems } from './composibles/items';\nimport { useOptions } from './composibles/options';\nimport {\n createPagination,\n pressDataTablePaginationProps,\n providePagination,\n} from './composibles/pagination';\nimport { provideSelection } from './composibles/selection';\nimport { createSorting, provideSorting } from './composibles/sorting';\nimport { YDataTableSlotProps } from './types';\n\nexport const pressDataTableServerProps = propsFactory(\n {\n total: {\n type: [Number, String] as PropType<number | string>,\n required: true,\n },\n ...pressDataTablePaginationProps(),\n ...pressDataTableProps(),\n },\n 'YDataTableServer',\n);\n\nexport const YDataTableServer = defineComponent({\n name: 'YDataTableServer',\n components: {\n YTable,\n YDataTableLayer,\n YDataTableHead,\n YDataTableBody,\n YDataTableControl,\n },\n props: {\n ...pressDataTableServerProps(),\n },\n emits: {\n 'update:modelValue': (value: any[]) => true,\n 'update:page': (page: number) => true,\n 'update:pageSize': (pageSize: number) => true,\n 'update:sortBy': (sortBy: any) => true,\n 'update:options': (options: any) => true,\n 'click:row': (e: Event, value: { row: any }) => true,\n },\n setup(props, { slots, emit }) {\n const { page, pageSize } = createPagination(props);\n const { sortBy, multiSort } = createSorting(props);\n const total = computed(() => parseInt(props.total as string));\n const { columns, headers } = createHeader(props, {\n enableSelect: toRef(props, 'enableSelect'),\n });\n const { items } = useItems(props, columns);\n\n const { toggleSort } = provideSorting({ sortBy, multiSort, page });\n const { pageLength, setPageSize, setPage } = providePagination({\n page,\n pageSize,\n total,\n });\n const {\n isSelected,\n select,\n selectAll,\n toggleSelect,\n someSelected,\n allSelected,\n } = provideSelection(props, { allItems: items, pageItems: items });\n\n const headRect = ref<DOMRectReadOnly>();\n const debounceMeasureHead = debounce(measureHead, 100);\n const { resizeObservedRef: headObserveRef } = useResizeObserver(\n (entries) => {\n debounceMeasureHead(entries);\n },\n );\n\n function measureHead(entries: ResizeObserverEntry[]) {\n headRect.value = entries?.[0].contentRect;\n }\n\n useOptions(\n {\n page,\n pageSize,\n search: toRef(props, 'search'),\n sortBy,\n },\n emit,\n );\n\n provide('y-data-table', {\n toggleSort,\n sortBy,\n headRect,\n });\n\n const slotProps = computed<YDataTableSlotProps>(() => {\n return {\n // pagination\n page: page.value,\n pageSize: pageSize.value,\n pageLength: pageLength.value,\n setPageSize,\n setPage,\n // sorting\n sortBy: sortBy.value,\n toggleSort,\n // selection\n someSelected: someSelected.value,\n allSelected: allSelected.value,\n isSelected,\n select,\n selectAll,\n toggleSelect,\n //\n items: items.value,\n columns: columns.value,\n headers: headers.value,\n };\n });\n\n useRender(() => {\n const yDataTableHeadProps = chooseProps(props, YDataTableHead.props);\n const yDataTableBodyProps = chooseProps(props, YDataTableBody.props);\n const yTableProps = chooseProps(props, YTable.props);\n return (\n <YTable\n class={[\n 'y-data-table',\n {\n 'y-data-table--no-data':\n !props.loading && props.items.length < 1 && !props.hideNoData,\n },\n ]}\n {...yTableProps}\n style={{\n '--y-table-head-height': toStyleSizeValue(headRect.value?.height),\n }}\n >\n {{\n top: () => slots.top?.(slotProps.value),\n leading: () =>\n slots.leading ? (\n slots.leading(slotProps.value)\n ) : (\n <>\n <YDataTableLayer\n v-slots={slots}\n slotProps={slotProps.value}\n ></YDataTableLayer>\n </>\n ),\n default: () =>\n slots.default ? (\n slots.default(slotProps.value)\n ) : (\n <>\n <thead ref={headObserveRef}>\n <YDataTableHead\n v-slots={slots}\n {...yDataTableHeadProps}\n ></YDataTableHead>\n </thead>\n {slots.thead?.(slotProps.value)}\n <tbody>\n <YDataTableBody\n v-slots={slots}\n {...yDataTableBodyProps}\n items={items.value}\n ></YDataTableBody>\n </tbody>\n {slots.tbody?.(slotProps.value)}\n {slots.tfoot?.(slotProps.value)}\n </>\n ),\n trailing: () => slots.trailing?.(slotProps.value),\n bottom: () =>\n slots.bottom ? (\n slots.bottom(slotProps.value)\n ) : (\n <YDataTableControl\n v-slots={{\n prepend: slots['control.prepend'],\n }}\n ></YDataTableControl>\n ),\n }}\n </YTable>\n );\n });\n },\n});\n\nexport type YDataTableServer = InstanceType<typeof YDataTableServer>;\n"],"mappings":"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"}
|
|
@@ -34,7 +34,6 @@ export const YTable = defineComponent({
|
|
|
34
34
|
} = _ref;
|
|
35
35
|
const {
|
|
36
36
|
containerRef,
|
|
37
|
-
wrapperRef,
|
|
38
37
|
tableRef,
|
|
39
38
|
containerRect,
|
|
40
39
|
wrapperRect
|
|
@@ -63,7 +62,6 @@ export const YTable = defineComponent({
|
|
|
63
62
|
"ref": containerRef,
|
|
64
63
|
"class": ['y-table__container']
|
|
65
64
|
}, [slots.leading?.(), _createVNode("div", {
|
|
66
|
-
"ref": wrapperRef,
|
|
67
65
|
"class": ['y-table__wrapper'],
|
|
68
66
|
"style": {
|
|
69
67
|
height: toStyleSizeValue(containerHeight)
|
|
@@ -1 +1 @@
|
|
|
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","
|
|
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","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';\r\n\r\nimport { useRectMeasure } from '@/components/table/composibles/measure';\r\nimport { useRender } from '@/composables/component';\r\nimport { defineComponent, propsFactory } from '@/util/component';\r\nimport { toStyleSizeValue } from '@/util/ui';\r\n\r\nimport './YTable.scss';\r\n\r\nexport const pressYTableProps = propsFactory(\r\n {\r\n tag: {\r\n type: String as PropType<string>,\r\n default: 'div',\r\n },\r\n fixedHead: {\r\n type: Boolean as PropType<boolean>,\r\n },\r\n height: {\r\n type: [Number, String] as PropType<number | string>,\r\n },\r\n flexHeight: {\r\n type: Boolean as PropType<boolean>,\r\n },\r\n onScroll: Function as PropType<(e: Event) => void>,\r\n },\r\n 'YTable',\r\n);\r\n\r\nexport const YTable = defineComponent({\r\n name: 'YTable',\r\n props: {\r\n ...pressYTableProps(),\r\n },\r\n emits: ['scroll'],\r\n setup(props, { slots, emit }) {\r\n const { containerRef, tableRef, containerRect, wrapperRect } =\r\n useRectMeasure();\r\n\r\n provide('YTable', { containerRect });\r\n\r\n function onScroll(e: Event) {\r\n emit('scroll', e);\r\n }\r\n\r\n useRender(() => {\r\n const ElTag = (props.tag as keyof HTMLElementTagNameMap) ?? 'div';\r\n const containerHeight = props.flexHeight\r\n ? containerRect.value?.height ?? props.height\r\n : props.height;\r\n return (\r\n <ElTag\r\n class={[\r\n 'y-table',\r\n {\r\n 'y-table--fixed-head': props.fixedHead,\r\n 'y-table--fixed-height': props.flexHeight || props.height,\r\n 'y-table--flex-height': props.flexHeight,\r\n },\r\n ]}\r\n style={{\r\n '--y-table-container-width': toStyleSizeValue(\r\n containerRect.value?.width,\r\n ),\r\n '--y-table-wrapper-width': toStyleSizeValue(\r\n wrapperRect.value?.width,\r\n ),\r\n }}\r\n >\r\n {slots.top?.()}\r\n {slots.default ? (\r\n <div ref={containerRef} class={['y-table__container']}>\r\n {slots.leading?.()}\r\n <div\r\n class={['y-table__wrapper']}\r\n style={{\r\n height: toStyleSizeValue(containerHeight),\r\n }}\r\n onScroll={onScroll}\r\n >\r\n <table ref={tableRef}>{slots.default()}</table>\r\n </div>\r\n {slots.trailing?.()}\r\n </div>\r\n ) : (\r\n slots.container?.(containerRef, containerRect)\r\n )}\r\n {slots.bottom?.()}\r\n </ElTag>\r\n );\r\n });\r\n },\r\n});\r\n\r\nexport type YTable = InstanceType<typeof YTable>;\r\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;MAAGC,QAAQ;MAAEC,aAAa;MAAEC;IAAY,CAAC,GAC3D5B,cAAc,CAAC,CAAC;IAElBD,OAAO,CAAC,QAAQ,EAAE;MAAE4B;IAAc,CAAC,CAAC;IAEpC,SAASZ,QAAQA,CAACc,CAAQ,EAAE;MAC1BL,IAAI,CAAC,QAAQ,EAAEK,CAAC,CAAC;IACnB;IAEA5B,SAAS,CAAC,MAAM;MACd,MAAM6B,KAAK,GAAIX,KAAK,CAACb,GAAG,IAAoC,KAAK;MACjE,MAAMyB,eAAe,GAAGZ,KAAK,CAACL,UAAU,GACpCa,aAAa,CAACK,KAAK,EAAEpB,MAAM,IAAIO,KAAK,CAACP,MAAM,GAC3CO,KAAK,CAACP,MAAM;MAChB,OAAAqB,YAAA,CAAAH,KAAA;QAAA,SAEW,CACL,SAAS,EACT;UACE,qBAAqB,EAAEX,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,CAC3CuB,aAAa,CAACK,KAAK,EAAEE,KACvB,CAAC;UACD,yBAAyB,EAAE9B,gBAAgB,CACzCwB,WAAW,CAACI,KAAK,EAAEE,KACrB;QACF;MAAC;QAAAzB,OAAA,EAAAA,CAAA,MAEAc,KAAK,CAACY,GAAG,GAAG,CAAC,EACbZ,KAAK,CAACd,OAAO,GAAAwB,YAAA;UAAA,OACFR,YAAY;UAAA,SAAS,CAAC,oBAAoB;QAAC,IAClDF,KAAK,CAACa,OAAO,GAAG,CAAC,EAAAH,YAAA;UAAA,SAET,CAAC,kBAAkB,CAAC;UAAA,SACpB;YACLrB,MAAM,EAAER,gBAAgB,CAAC2B,eAAe;UAC1C,CAAC;UAAA,YACShB;QAAQ,IAAAkB,YAAA;UAAA,OAENP;QAAQ,IAAGH,KAAK,CAACd,OAAO,CAAC,CAAC,MAEvCc,KAAK,CAACc,QAAQ,GAAG,CAAC,KAGrBd,KAAK,CAACe,SAAS,GAAGb,YAAY,EAAEE,aAAa,CAC9C,EACAJ,KAAK,CAACgB,MAAM,GAAG,CAAC;MAAA;IAGvB,CAAC,CAAC;EACJ;AACF,CAAC,CAAC"}
|
|
@@ -1,30 +1,32 @@
|
|
|
1
|
-
import { ref } from 'vue';
|
|
2
|
-
import { useResizeObserver } from "../../../composables/
|
|
1
|
+
import { ref, shallowRef } from 'vue';
|
|
2
|
+
import { useResizeObserver } from "../../../composables/resize-observer.mjs";
|
|
3
|
+
import { debounce } from "../../../util/debounce.mjs";
|
|
3
4
|
export function useRectMeasure() {
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
const
|
|
5
|
+
const tableRef = ref();
|
|
6
|
+
const wrapperRef = ref();
|
|
7
|
+
const containerRect = shallowRef();
|
|
8
|
+
const wrapperRect = shallowRef();
|
|
9
|
+
const tableRect = shallowRef();
|
|
10
|
+
const debounceMeasure = debounce(measure, 100);
|
|
7
11
|
const {
|
|
8
12
|
resizeObservedRef: containerRef
|
|
9
13
|
} = useResizeObserver(entries => {
|
|
10
|
-
|
|
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
|
-
});
|
|
14
|
+
debounceMeasure(entries);
|
|
27
15
|
});
|
|
16
|
+
function measure(entries) {
|
|
17
|
+
containerRect.value = entries?.[0]?.contentRect;
|
|
18
|
+
const el = containerRef.value;
|
|
19
|
+
const wrapperEl = el.querySelector('.y-table__wrapper');
|
|
20
|
+
if (wrapperEl) {
|
|
21
|
+
wrapperRect.value = wrapperEl.getBoundingClientRect();
|
|
22
|
+
}
|
|
23
|
+
if (tableRef.value) {
|
|
24
|
+
const rect = tableRef.value?.getBoundingClientRect();
|
|
25
|
+
if (rect) {
|
|
26
|
+
tableRect.value = rect;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
28
30
|
return {
|
|
29
31
|
containerRef,
|
|
30
32
|
wrapperRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"measure.mjs","names":["ref","useResizeObserver","useRectMeasure","containerRect","wrapperRect","tableRect","resizeObservedRef","containerRef","entries","
|
|
1
|
+
{"version":3,"file":"measure.mjs","names":["ref","shallowRef","useResizeObserver","debounce","useRectMeasure","tableRef","wrapperRef","containerRect","wrapperRect","tableRect","debounceMeasure","measure","resizeObservedRef","containerRef","entries","value","contentRect","el","wrapperEl","querySelector","getBoundingClientRect","rect"],"sources":["../../../../src/components/table/composibles/measure.ts"],"sourcesContent":["import { ref, shallowRef } from 'vue';\n\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { debounce } from '@/util/debounce';\n\nexport function useRectMeasure() {\n const tableRef = ref();\n const wrapperRef = ref();\n\n const containerRect = shallowRef<DOMRectReadOnly>();\n const wrapperRect = shallowRef<DOMRectReadOnly>();\n const tableRect = shallowRef<DOMRectReadOnly>();\n\n const debounceMeasure = debounce(measure, 100);\n\n const { resizeObservedRef: containerRef } = useResizeObserver((entries) => {\n debounceMeasure(entries);\n });\n\n function measure(entries: any) {\n containerRect.value = entries?.[0]?.contentRect;\n const el = containerRef.value!;\n const wrapperEl = el.querySelector('.y-table__wrapper');\n if (wrapperEl) {\n wrapperRect.value = wrapperEl.getBoundingClientRect();\n }\n if (tableRef.value) {\n const rect = tableRef.value?.getBoundingClientRect();\n if (rect) {\n tableRect.value = rect;\n }\n }\n }\n\n return {\n containerRef,\n wrapperRef,\n tableRef,\n containerRect,\n wrapperRect,\n tableRect,\n };\n}\n"],"mappings":"AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,KAAK;AAAC,SAE7BC,iBAAiB;AAAA,SACjBC,QAAQ;AAEjB,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAMC,QAAQ,GAAGL,GAAG,CAAC,CAAC;EACtB,MAAMM,UAAU,GAAGN,GAAG,CAAC,CAAC;EAExB,MAAMO,aAAa,GAAGN,UAAU,CAAkB,CAAC;EACnD,MAAMO,WAAW,GAAGP,UAAU,CAAkB,CAAC;EACjD,MAAMQ,SAAS,GAAGR,UAAU,CAAkB,CAAC;EAE/C,MAAMS,eAAe,GAAGP,QAAQ,CAACQ,OAAO,EAAE,GAAG,CAAC;EAE9C,MAAM;IAAEC,iBAAiB,EAAEC;EAAa,CAAC,GAAGX,iBAAiB,CAAEY,OAAO,IAAK;IACzEJ,eAAe,CAACI,OAAO,CAAC;EAC1B,CAAC,CAAC;EAEF,SAASH,OAAOA,CAACG,OAAY,EAAE;IAC7BP,aAAa,CAACQ,KAAK,GAAGD,OAAO,GAAG,CAAC,CAAC,EAAEE,WAAW;IAC/C,MAAMC,EAAE,GAAGJ,YAAY,CAACE,KAAM;IAC9B,MAAMG,SAAS,GAAGD,EAAE,CAACE,aAAa,CAAC,mBAAmB,CAAC;IACvD,IAAID,SAAS,EAAE;MACbV,WAAW,CAACO,KAAK,GAAGG,SAAS,CAACE,qBAAqB,CAAC,CAAC;IACvD;IACA,IAAIf,QAAQ,CAACU,KAAK,EAAE;MAClB,MAAMM,IAAI,GAAGhB,QAAQ,CAACU,KAAK,EAAEK,qBAAqB,CAAC,CAAC;MACpD,IAAIC,IAAI,EAAE;QACRZ,SAAS,CAACM,KAAK,GAAGM,IAAI;MACxB;IACF;EACF;EAEA,OAAO;IACLR,YAAY;IACZP,UAAU;IACVD,QAAQ;IACRE,aAAa;IACbC,WAAW;IACXC;EACF,CAAC;AACH"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export declare function useRectMeasure(): {
|
|
2
2
|
containerRef: import('vue').Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
|
3
|
-
wrapperRef: import('vue').Ref<
|
|
4
|
-
tableRef: import('vue').Ref<
|
|
5
|
-
containerRect: import('vue').
|
|
6
|
-
wrapperRect: import('vue').
|
|
7
|
-
tableRect: import('vue').
|
|
3
|
+
wrapperRef: import('vue').Ref<any, any>;
|
|
4
|
+
tableRef: import('vue').Ref<any, any>;
|
|
5
|
+
containerRect: import('vue').ShallowRef<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;
|
|
6
|
+
wrapperRect: import('vue').ShallowRef<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;
|
|
7
|
+
tableRect: import('vue').ShallowRef<DOMRectReadOnly | undefined, DOMRectReadOnly | undefined>;
|
|
8
8
|
};
|