yuyeon 0.2.1-rc.5 → 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 +1069 -1045
- 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/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"}
|
|
@@ -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
|
+
};
|