yuyeon 0.3.0-rc.0 → 0.3.0-rc.1
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 +1189 -1193
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/table/YTable.mjs +0 -2
- package/lib/components/table/YTable.mjs.map +1 -1
- package/lib/components/table/composibles/measure.mjs +25 -21
- 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
|
@@ -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,34 @@
|
|
|
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
|
-
|
|
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;
|
|
14
|
+
setTimeout(() => {
|
|
15
|
+
debounceMeasure(entries);
|
|
26
16
|
});
|
|
27
17
|
});
|
|
18
|
+
function measure(entries) {
|
|
19
|
+
containerRect.value = entries?.[0]?.contentRect;
|
|
20
|
+
const el = containerRef.value;
|
|
21
|
+
const wrapperEl = el.querySelector('.y-table__wrapper');
|
|
22
|
+
if (wrapperEl) {
|
|
23
|
+
wrapperRect.value = wrapperEl.getBoundingClientRect();
|
|
24
|
+
}
|
|
25
|
+
if (tableRef.value) {
|
|
26
|
+
const rect = tableRef.value?.getBoundingClientRect();
|
|
27
|
+
if (rect) {
|
|
28
|
+
tableRect.value = rect;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
28
32
|
return {
|
|
29
33
|
containerRef,
|
|
30
34
|
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","setTimeout","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 setTimeout(() => {\n debounceMeasure(entries);\n });\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;IACzEC,UAAU,CAAC,MAAM;MACfL,eAAe,CAACI,OAAO,CAAC;IAC1B,CAAC,CAAC;EACJ,CAAC,CAAC;EAEF,SAASH,OAAOA,CAACG,OAAY,EAAE;IAC7BP,aAAa,CAACS,KAAK,GAAGF,OAAO,GAAG,CAAC,CAAC,EAAEG,WAAW;IAC/C,MAAMC,EAAE,GAAGL,YAAY,CAACG,KAAM;IAC9B,MAAMG,SAAS,GAAGD,EAAE,CAACE,aAAa,CAAC,mBAAmB,CAAC;IACvD,IAAID,SAAS,EAAE;MACbX,WAAW,CAACQ,KAAK,GAAGG,SAAS,CAACE,qBAAqB,CAAC,CAAC;IACvD;IACA,IAAIhB,QAAQ,CAACW,KAAK,EAAE;MAClB,MAAMM,IAAI,GAAGjB,QAAQ,CAACW,KAAK,EAAEK,qBAAqB,CAAC,CAAC;MACpD,IAAIC,IAAI,EAAE;QACRb,SAAS,CAACO,KAAK,GAAGM,IAAI;MACxB;IACF;EACF;EAEA,OAAO;IACLT,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
|
};
|