yuyeon 0.3.1 → 0.3.2-rc.10
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 +4861 -4714
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/dialog/YDialog.js +6 -1
- package/lib/components/dialog/YDialog.js.map +1 -1
- package/lib/components/divider/YDivider.scss +21 -0
- package/lib/components/field-input/YFieldInput.js +4 -1
- package/lib/components/field-input/YFieldInput.js.map +1 -1
- package/lib/components/input/YInput.js +2 -1
- package/lib/components/input/YInput.js.map +1 -1
- package/lib/components/select/YSelect.js.map +1 -1
- package/lib/components/slider/YSlider.js +1 -0
- package/lib/components/slider/YSlider.js.map +1 -1
- package/lib/components/slider/YSlider.scss +3 -0
- package/lib/components/slider/index.js +1 -1
- package/lib/components/slider/index.js.map +1 -1
- package/lib/components/slider/slider.js +2 -0
- package/lib/components/slider/slider.js.map +1 -0
- package/lib/components/table/YDataTable.js +32 -16
- package/lib/components/table/YDataTable.js.map +1 -1
- package/lib/components/table/YDataTableBody.js +26 -8
- package/lib/components/table/YDataTableBody.js.map +1 -1
- package/lib/components/table/YDataTableControl.js +1 -1
- package/lib/components/table/YDataTableControl.js.map +1 -1
- package/lib/components/table/YDataTableHead.js +3 -3
- package/lib/components/table/YDataTableHead.js.map +1 -1
- package/lib/components/table/YDataTableLayer.js +11 -4
- package/lib/components/table/YDataTableLayer.js.map +1 -1
- package/lib/components/table/YDataTableLayerRow.vue +146 -0
- package/lib/components/table/YDataTableRow.js +14 -6
- package/lib/components/table/YDataTableRow.js.map +1 -1
- package/lib/components/table/YDataTableServer.js +34 -19
- package/lib/components/table/YDataTableServer.js.map +1 -1
- package/lib/components/table/YTable.js +8 -3
- package/lib/components/table/YTable.js.map +1 -1
- package/lib/components/table/composables/expand.js +49 -0
- package/lib/components/table/composables/expand.js.map +1 -0
- package/lib/components/table/composables/header.js +127 -0
- package/lib/components/table/composables/header.js.map +1 -0
- package/lib/components/table/composables/items.js +52 -0
- package/lib/components/table/composables/items.js.map +1 -0
- package/lib/components/table/composables/measure.js +55 -0
- package/lib/components/table/composables/measure.js.map +1 -0
- package/lib/components/table/composables/options.js +33 -0
- package/lib/components/table/composables/options.js.map +1 -0
- package/lib/components/table/composables/pagination.js +99 -0
- package/lib/components/table/composables/pagination.js.map +1 -0
- package/lib/components/table/composables/provides.js +3 -0
- package/lib/components/table/composables/provides.js.map +1 -0
- package/lib/components/table/composables/selection.js +196 -0
- package/lib/components/table/composables/selection.js.map +1 -0
- package/lib/components/table/composables/sorted-items.js +50 -0
- package/lib/components/table/composables/sorted-items.js.map +1 -0
- package/lib/components/table/composables/sorting.js +73 -0
- package/lib/components/table/composables/sorting.js.map +1 -0
- package/lib/components/table/composibles/measure.js +21 -5
- package/lib/components/table/composibles/measure.js.map +1 -1
- package/lib/components/table/types/index.js.map +1 -1
- package/lib/components/table/types/item.js.map +1 -1
- package/lib/components/tree-view/YTreeView.js +8 -4
- package/lib/components/tree-view/YTreeView.js.map +1 -1
- package/lib/components/tree-view/tree-view.js +34 -4
- package/lib/components/tree-view/tree-view.js.map +1 -1
- package/lib/components/tree-view/types.js.map +1 -1
- package/lib/composables/theme/setting.js +3 -2
- package/lib/composables/theme/setting.js.map +1 -1
- package/lib/util/color/index.js +1 -1
- package/lib/util/color/index.js.map +1 -1
- package/package.json +1 -1
- package/types/abstract/items.d.ts +4 -4
- package/types/components/badge/YBadge.d.ts +4 -4
- package/types/components/button/YButton.d.ts +8 -8
- package/types/components/chip/YChip.d.ts +1 -1
- package/types/components/date-picker/YDateCalendar.d.ts +1 -1
- package/types/components/date-picker/YDatePicker.d.ts +12 -12
- package/types/components/date-picker/YDatePickerControl.d.ts +10 -10
- package/types/components/dialog/YDialog.d.ts +72 -72
- package/types/components/dropdown/YDropdown.d.ts +55 -55
- package/types/components/field-input/YFieldInput.d.ts +13 -13
- package/types/components/hover/YHover.d.ts +3 -3
- package/types/components/icon/YIcon.d.ts +2 -2
- package/types/components/img/YImg.d.ts +5 -5
- package/types/components/input/YInput.d.ts +10 -9
- package/types/components/ip-field/YIpv4Field.d.ts +1 -1
- package/types/components/layer/YLayer.d.ts +26 -26
- package/types/components/layer/content.d.ts +1 -1
- package/types/components/layer/scroll-strategies.d.ts +1 -1
- package/types/components/list/YListItem.d.ts +1 -1
- package/types/components/menu/YMenu.d.ts +9 -9
- package/types/components/pagination/YPagination.d.ts +5 -5
- package/types/components/select/YSelect.d.ts +101 -101
- package/types/components/slider/index.d.ts +1 -0
- package/types/components/slider/slider.d.ts +0 -0
- package/types/components/snackbar/YSnackbar.d.ts +33 -33
- package/types/components/switch/YSwitch.d.ts +10 -10
- package/types/components/tab/YTab.d.ts +12 -12
- package/types/components/tab/YTabs.d.ts +4 -4
- package/types/components/table/YDataTable.d.ts +37 -15
- package/types/components/table/YDataTableBody.d.ts +5 -3
- package/types/components/table/YDataTableControl.d.ts +2 -2
- package/types/components/table/YDataTableHead.d.ts +2 -2
- package/types/components/table/YDataTableLayer.d.ts +4 -1
- package/types/components/table/YDataTableServer.d.ts +40 -18
- package/types/components/table/YTable.d.ts +4 -4
- package/types/components/table/composables/expand.d.ts +42 -0
- package/types/components/table/composables/header.d.ts +207 -0
- package/types/components/table/composables/items.d.ts +55 -0
- package/types/components/table/composables/measure.d.ts +8 -0
- package/types/components/table/composables/options.d.ts +11 -0
- package/types/components/table/composables/pagination.d.ts +81 -0
- package/types/components/table/composables/provides.d.ts +15 -0
- package/types/components/table/composables/selection.d.ts +82 -0
- package/types/components/table/composables/sorted-items.d.ts +7 -0
- package/types/components/table/composables/sorting.d.ts +62 -0
- package/types/components/table/types/index.d.ts +2 -1
- package/types/components/table/types/item.d.ts +2 -1
- package/types/components/textarea/YTextarea.d.ts +18 -18
- package/types/components/tooltip/YTooltip.d.ts +46 -46
- package/types/components/tree-view/YTreeView.d.ts +21 -9
- package/types/components/tree-view/YTreeViewNode.d.ts +8 -8
- package/types/components/tree-view/tree-view.d.ts +2 -1
- package/types/components/tree-view/types.d.ts +8 -6
- package/types/composables/choice.d.ts +1 -1
- package/types/composables/coordinate/index.d.ts +8 -8
- package/types/composables/form.d.ts +2 -2
- package/types/composables/icon.d.ts +2 -2
- package/types/composables/list-items.d.ts +10 -10
- package/types/composables/theme/setting.d.ts +1 -0
- package/types/composables/transition.d.ts +1 -1
- package/types/composables/validation.d.ts +3 -3
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { computed } from 'vue';
|
|
2
|
+
import { getPropertyFromItem } from "../../../util/common.js";
|
|
3
|
+
import { propsFactory } from "../../../util/component/index.js";
|
|
4
|
+
export const pressDataTableItemsProps = propsFactory({
|
|
5
|
+
items: {
|
|
6
|
+
type: Array,
|
|
7
|
+
default: () => []
|
|
8
|
+
},
|
|
9
|
+
itemKey: {
|
|
10
|
+
type: [String, Array, Function],
|
|
11
|
+
default: 'id'
|
|
12
|
+
},
|
|
13
|
+
itemSelectable: {
|
|
14
|
+
type: [String, Array, Function],
|
|
15
|
+
default: null
|
|
16
|
+
},
|
|
17
|
+
returnItem: Boolean
|
|
18
|
+
}, 'YDataTable--items');
|
|
19
|
+
export function updateItem(props, item, index, columns) {
|
|
20
|
+
const key = getPropertyFromItem(item, props.itemKey);
|
|
21
|
+
const value = props.returnItem ? item : key;
|
|
22
|
+
let selectable;
|
|
23
|
+
if (typeof props.itemSelectable === 'function') {
|
|
24
|
+
selectable = !!props.itemSelectable(item);
|
|
25
|
+
} else {
|
|
26
|
+
selectable = getPropertyFromItem(item, props.itemSelectable, true);
|
|
27
|
+
}
|
|
28
|
+
const itemColumns = columns.reduce((acc, column) => {
|
|
29
|
+
acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);
|
|
30
|
+
return acc;
|
|
31
|
+
}, {});
|
|
32
|
+
return {
|
|
33
|
+
index,
|
|
34
|
+
key,
|
|
35
|
+
value,
|
|
36
|
+
selectable,
|
|
37
|
+
columns: itemColumns,
|
|
38
|
+
raw: item
|
|
39
|
+
};
|
|
40
|
+
}
|
|
41
|
+
export function updateItems(props, items, columns) {
|
|
42
|
+
return items.map((item, index) => updateItem(props, item, index, columns));
|
|
43
|
+
}
|
|
44
|
+
export function useItems(props, columns) {
|
|
45
|
+
const items = computed(() => {
|
|
46
|
+
return updateItems(props, props.items, columns.value);
|
|
47
|
+
});
|
|
48
|
+
return {
|
|
49
|
+
items
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
//# sourceMappingURL=items.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"items.js","names":["computed","getPropertyFromItem","propsFactory","pressDataTableItemsProps","items","type","Array","default","itemKey","String","Function","itemSelectable","returnItem","Boolean","updateItem","props","item","index","columns","key","value","selectable","itemColumns","reduce","acc","column","raw","updateItems","map","useItems"],"sources":["../../../../src/components/table/composables/items.ts"],"sourcesContent":["import { type PropType, type Ref, computed } from 'vue';\r\n\r\nimport { getPropertyFromItem } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { DataTableItem, InternalDataTableHeader } from '../types';\r\n\r\nexport type DataTableItemsProps = {\r\n items: any[];\r\n itemKey: any;\r\n itemSelectable: any;\r\n returnItem: boolean;\r\n};\r\n\r\nexport const pressDataTableItemsProps = propsFactory(\r\n {\r\n items: {\r\n type: Array as PropType<DataTableItemsProps['items']>,\r\n default: () => [],\r\n },\r\n itemKey: {\r\n type: [String, Array, Function] as PropType<any>,\r\n default: 'id',\r\n },\r\n itemSelectable: {\r\n type: [String, Array, Function] as PropType<any>,\r\n default: null,\r\n },\r\n returnItem: Boolean,\r\n },\r\n 'YDataTable--items',\r\n);\r\n\r\nexport function updateItem(\r\n props: Omit<DataTableItemsProps, 'items'>,\r\n item: any,\r\n index: number,\r\n columns: InternalDataTableHeader[],\r\n): DataTableItem {\r\n const key = getPropertyFromItem(item, props.itemKey);\r\n const value = props.returnItem ? item : key;\r\n let selectable;\r\n if (typeof props.itemSelectable === 'function') {\r\n selectable = !!props.itemSelectable(item);\r\n } else {\r\n selectable = getPropertyFromItem(item, props.itemSelectable, true);\r\n }\r\n\r\n const itemColumns = columns.reduce(\r\n (acc, column) => {\r\n acc[column.key] = getPropertyFromItem(item, column.value ?? column.key);\r\n return acc;\r\n },\r\n {} as Record<string, unknown>,\r\n );\r\n\r\n return {\r\n index,\r\n key,\r\n value,\r\n selectable,\r\n columns: itemColumns,\r\n raw: item,\r\n };\r\n}\r\n\r\nexport function updateItems(\r\n props: Omit<DataTableItemsProps, 'items'>,\r\n items: DataTableItemsProps['items'],\r\n columns: InternalDataTableHeader[],\r\n): DataTableItem[] {\r\n return items.map((item, index) => updateItem(props, item, index, columns));\r\n}\r\n\r\nexport function useItems(\r\n props: DataTableItemsProps,\r\n columns: Ref<InternalDataTableHeader[]>,\r\n) {\r\n const items = computed(() => {\r\n return updateItems(props, props.items, columns.value);\r\n });\r\n return { items };\r\n}\r\n"],"mappings":"AAAA,SAAkCA,QAAQ,QAAQ,KAAK;AAAC,SAE/CC,mBAAmB;AAAA,SACnBC,YAAY;AAWrB,OAAO,MAAMC,wBAAwB,GAAGD,YAAY,CAClD;EACEE,KAAK,EAAE;IACLC,IAAI,EAAEC,KAA+C;IACrDC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,OAAO,EAAE;IACPH,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDI,cAAc,EAAE;IACdN,IAAI,EAAE,CAACI,MAAM,EAAEH,KAAK,EAAEI,QAAQ,CAAkB;IAChDH,OAAO,EAAE;EACX,CAAC;EACDK,UAAU,EAAEC;AACd,CAAC,EACD,mBACF,CAAC;AAED,OAAO,SAASC,UAAUA,CACxBC,KAAyC,EACzCC,IAAS,EACTC,KAAa,EACbC,OAAkC,EACnB;EACf,MAAMC,GAAG,GAAGlB,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACP,OAAO,CAAC;EACpD,MAAMY,KAAK,GAAGL,KAAK,CAACH,UAAU,GAAGI,IAAI,GAAGG,GAAG;EAC3C,IAAIE,UAAU;EACd,IAAI,OAAON,KAAK,CAACJ,cAAc,KAAK,UAAU,EAAE;IAC9CU,UAAU,GAAG,CAAC,CAACN,KAAK,CAACJ,cAAc,CAACK,IAAI,CAAC;EAC3C,CAAC,MAAM;IACLK,UAAU,GAAGpB,mBAAmB,CAACe,IAAI,EAAED,KAAK,CAACJ,cAAc,EAAE,IAAI,CAAC;EACpE;EAEA,MAAMW,WAAW,GAAGJ,OAAO,CAACK,MAAM,CAChC,CAACC,GAAG,EAAEC,MAAM,KAAK;IACfD,GAAG,CAACC,MAAM,CAACN,GAAG,CAAC,GAAGlB,mBAAmB,CAACe,IAAI,EAAES,MAAM,CAACL,KAAK,IAAIK,MAAM,CAACN,GAAG,CAAC;IACvE,OAAOK,GAAG;EACZ,CAAC,EACD,CAAC,CACH,CAAC;EAED,OAAO;IACLP,KAAK;IACLE,GAAG;IACHC,KAAK;IACLC,UAAU;IACVH,OAAO,EAAEI,WAAW;IACpBI,GAAG,EAAEV;EACP,CAAC;AACH;AAEA,OAAO,SAASW,WAAWA,CACzBZ,KAAyC,EACzCX,KAAmC,EACnCc,OAAkC,EACjB;EACjB,OAAOd,KAAK,CAACwB,GAAG,CAAC,CAACZ,IAAI,EAAEC,KAAK,KAAKH,UAAU,CAACC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,CAAC,CAAC;AAC5E;AAEA,OAAO,SAASW,QAAQA,CACtBd,KAA0B,EAC1BG,OAAuC,EACvC;EACA,MAAMd,KAAK,GAAGJ,QAAQ,CAAC,MAAM;IAC3B,OAAO2B,WAAW,CAACZ,KAAK,EAAEA,KAAK,CAACX,KAAK,EAAEc,OAAO,CAACE,KAAK,CAAC;EACvD,CAAC,CAAC;EACF,OAAO;IAAEhB;EAAM,CAAC;AAClB"}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { ref, shallowRef, watch } from 'vue';
|
|
2
|
+
import { useResizeObserver } from "../../../composables/resize-observer.js";
|
|
3
|
+
import { debounce } from "../../../util/debounce.js";
|
|
4
|
+
export function useRectMeasure() {
|
|
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);
|
|
11
|
+
const {
|
|
12
|
+
resizeObservedRef: containerRef
|
|
13
|
+
} = useResizeObserver(entries => {
|
|
14
|
+
debounceMeasure(entries);
|
|
15
|
+
});
|
|
16
|
+
function measure(entries) {
|
|
17
|
+
containerRect.value = entries?.[0]?.contentRect;
|
|
18
|
+
if (wrapperRef.value) {
|
|
19
|
+
const rect = wrapperRef.value.getBoundingClientRect();
|
|
20
|
+
if (rect) {
|
|
21
|
+
const obj = {};
|
|
22
|
+
for (const key in rect) {
|
|
23
|
+
if (typeof rect[key] !== "function") {
|
|
24
|
+
obj[key] = rect[key];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
wrapperRect.value = {
|
|
28
|
+
...obj,
|
|
29
|
+
clientWidth: wrapperRef.value?.clientWidth ?? 0
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
if (tableRef.value) {
|
|
34
|
+
const rect = tableRef.value?.getBoundingClientRect();
|
|
35
|
+
if (rect) {
|
|
36
|
+
tableRect.value = rect;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
watch(tableRef, neo => {
|
|
41
|
+
if (neo) {
|
|
42
|
+
const el = containerRef.value;
|
|
43
|
+
wrapperRef.value = el.querySelector('.y-table__wrapper') || undefined;
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
return {
|
|
47
|
+
containerRef,
|
|
48
|
+
wrapperRef,
|
|
49
|
+
tableRef,
|
|
50
|
+
containerRect,
|
|
51
|
+
wrapperRect,
|
|
52
|
+
tableRect
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
//# sourceMappingURL=measure.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"measure.js","names":["ref","shallowRef","watch","useResizeObserver","debounce","useRectMeasure","tableRef","wrapperRef","containerRect","wrapperRect","tableRect","debounceMeasure","measure","resizeObservedRef","containerRef","entries","value","contentRect","rect","getBoundingClientRect","obj","key","clientWidth","neo","el","querySelector","undefined"],"sources":["../../../../src/components/table/composables/measure.ts"],"sourcesContent":["import { ref, shallowRef, watch } from 'vue';\n\nimport { useResizeObserver } from '@/composables/resize-observer';\nimport { debounce } from '@/util/debounce';\n\nexport function useRectMeasure() {\n const tableRef = ref<HTMLTableElement>();\n const wrapperRef = ref<HTMLElement>();\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\n if (wrapperRef.value) {\n const rect = wrapperRef.value.getBoundingClientRect();\n\n if (rect) {\n const obj: any = {};\n for (const key in rect) {\n if (typeof rect[key as keyof DOMRect] !== \"function\") {\n obj[key] = rect[key as keyof DOMRect];\n }\n }\n wrapperRect.value = {\n ...obj,\n clientWidth: wrapperRef.value?.clientWidth ?? 0,\n };\n }\n\n }\n\n if (tableRef.value) {\n const rect = tableRef.value?.getBoundingClientRect();\n if (rect) {\n tableRect.value = rect;\n }\n }\n }\n\n watch(tableRef, (neo) => {\n if (neo) {\n const el = containerRef.value!;\n wrapperRef.value = el.querySelector('.y-table__wrapper') as HTMLElement || undefined;\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,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEpCC,iBAAiB;AAAA,SACjBC,QAAQ;AAEjB,OAAO,SAASC,cAAcA,CAAA,EAAG;EAC/B,MAAMC,QAAQ,GAAGN,GAAG,CAAmB,CAAC;EACxC,MAAMO,UAAU,GAAGP,GAAG,CAAc,CAAC;EAErC,MAAMQ,aAAa,GAAGP,UAAU,CAAkB,CAAC;EACnD,MAAMQ,WAAW,GAAGR,UAAU,CAAkB,CAAC;EACjD,MAAMS,SAAS,GAAGT,UAAU,CAAkB,CAAC;EAE/C,MAAMU,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;IAE/C,IAAIV,UAAU,CAACS,KAAK,EAAE;MACpB,MAAME,IAAI,GAAGX,UAAU,CAACS,KAAK,CAACG,qBAAqB,CAAC,CAAC;MAErD,IAAID,IAAI,EAAE;QACR,MAAME,GAAQ,GAAG,CAAC,CAAC;QACnB,KAAK,MAAMC,GAAG,IAAIH,IAAI,EAAE;UACtB,IAAI,OAAOA,IAAI,CAACG,GAAG,CAAkB,KAAK,UAAU,EAAE;YACpDD,GAAG,CAACC,GAAG,CAAC,GAAGH,IAAI,CAACG,GAAG,CAAkB;UACvC;QACF;QACAZ,WAAW,CAACO,KAAK,GAAG;UAClB,GAAGI,GAAG;UACNE,WAAW,EAAEf,UAAU,CAACS,KAAK,EAAEM,WAAW,IAAI;QAChD,CAAC;MACH;IAEF;IAEA,IAAIhB,QAAQ,CAACU,KAAK,EAAE;MAClB,MAAME,IAAI,GAAGZ,QAAQ,CAACU,KAAK,EAAEG,qBAAqB,CAAC,CAAC;MACpD,IAAID,IAAI,EAAE;QACRR,SAAS,CAACM,KAAK,GAAGE,IAAI;MACxB;IACF;EACF;EAEAhB,KAAK,CAACI,QAAQ,EAAGiB,GAAG,IAAK;IACvB,IAAIA,GAAG,EAAE;MACP,MAAMC,EAAE,GAAGV,YAAY,CAACE,KAAM;MAC9BT,UAAU,CAACS,KAAK,GAAGQ,EAAE,CAACC,aAAa,CAAC,mBAAmB,CAAC,IAAmBC,SAAS;IACtF;EACF,CAAC,CAAC;EAEF,OAAO;IACLZ,YAAY;IACZP,UAAU;IACVD,QAAQ;IACRE,aAAa;IACbC,WAAW;IACXC;EACF,CAAC;AACH"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { computed, watch } from 'vue';
|
|
2
|
+
import { deepEqual } from "../../../util/common.js";
|
|
3
|
+
export function useOptions(_ref, emit) {
|
|
4
|
+
let {
|
|
5
|
+
page,
|
|
6
|
+
pageSize,
|
|
7
|
+
sortBy,
|
|
8
|
+
search
|
|
9
|
+
} = _ref;
|
|
10
|
+
const options = computed(() => {
|
|
11
|
+
return {
|
|
12
|
+
page: page.value,
|
|
13
|
+
pageSize: pageSize.value,
|
|
14
|
+
sortBy: sortBy.value,
|
|
15
|
+
search: search.value
|
|
16
|
+
};
|
|
17
|
+
});
|
|
18
|
+
watch(() => search?.value, () => {
|
|
19
|
+
page.value = 1;
|
|
20
|
+
});
|
|
21
|
+
let optionsCache = null;
|
|
22
|
+
watch(options, () => {
|
|
23
|
+
if (deepEqual(optionsCache, options.value)) {
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
emit('update:options', options.value);
|
|
27
|
+
optionsCache = options.value;
|
|
28
|
+
}, {
|
|
29
|
+
deep: true,
|
|
30
|
+
immediate: true
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
//# sourceMappingURL=options.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"options.js","names":["computed","watch","deepEqual","useOptions","_ref","emit","page","pageSize","sortBy","search","options","value","optionsCache","deep","immediate"],"sources":["../../../../src/components/table/composables/options.ts"],"sourcesContent":["import { type Ref, computed, watch } from 'vue';\r\n\r\nimport { deepEqual } from '@/util/common';\r\n\r\nimport { SortOption } from '../types';\r\n\r\ntype DataTableOptionsState = {\r\n page: Ref<number>;\r\n pageSize: Ref<number>;\r\n sortBy: Ref<readonly SortOption[]>;\r\n search: Ref<string | undefined>;\r\n};\r\n\r\nexport function useOptions(\r\n { page, pageSize, sortBy, search }: DataTableOptionsState,\r\n emit: Function,\r\n) {\r\n const options = computed(() => {\r\n return {\r\n page: page.value,\r\n pageSize: pageSize.value,\r\n sortBy: sortBy.value,\r\n search: search.value,\r\n };\r\n });\r\n\r\n watch(\r\n () => search?.value,\r\n () => {\r\n page.value = 1;\r\n },\r\n );\r\n\r\n let optionsCache = null as unknown;\r\n\r\n watch(\r\n options,\r\n () => {\r\n if (deepEqual(optionsCache, options.value)) {\r\n return;\r\n }\r\n emit('update:options', options.value);\r\n optionsCache = options.value;\r\n },\r\n { deep: true, immediate: true },\r\n );\r\n}\r\n"],"mappings":"AAAA,SAAmBA,QAAQ,EAAEC,KAAK,QAAQ,KAAK;AAAC,SAEvCC,SAAS;AAWlB,OAAO,SAASC,UAAUA,CAAAC,IAAA,EAExBC,IAAc,EACd;EAAA,IAFA;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAA8B,CAAC,GAAAL,IAAA;EAGzD,MAAMM,OAAO,GAAGV,QAAQ,CAAC,MAAM;IAC7B,OAAO;MACLM,IAAI,EAAEA,IAAI,CAACK,KAAK;MAChBJ,QAAQ,EAAEA,QAAQ,CAACI,KAAK;MACxBH,MAAM,EAAEA,MAAM,CAACG,KAAK;MACpBF,MAAM,EAAEA,MAAM,CAACE;IACjB,CAAC;EACH,CAAC,CAAC;EAEFV,KAAK,CACH,MAAMQ,MAAM,EAAEE,KAAK,EACnB,MAAM;IACJL,IAAI,CAACK,KAAK,GAAG,CAAC;EAChB,CACF,CAAC;EAED,IAAIC,YAAY,GAAG,IAAe;EAElCX,KAAK,CACHS,OAAO,EACP,MAAM;IACJ,IAAIR,SAAS,CAACU,YAAY,EAAEF,OAAO,CAACC,KAAK,CAAC,EAAE;MAC1C;IACF;IACAN,IAAI,CAAC,gBAAgB,EAAEK,OAAO,CAACC,KAAK,CAAC;IACrCC,YAAY,GAAGF,OAAO,CAACC,KAAK;EAC9B,CAAC,EACD;IAAEE,IAAI,EAAE,IAAI;IAAEC,SAAS,EAAE;EAAK,CAChC,CAAC;AACH"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { computed, inject, provide, watch } from 'vue';
|
|
2
|
+
import { useModelDuplex } from "../../../composables/communication.js";
|
|
3
|
+
import { clamp } from "../../../util/common.js";
|
|
4
|
+
import { propsFactory } from "../../../util/component/index.js";
|
|
5
|
+
export const Y_DATA_TABLE_PAGINATION_KEY = Symbol.for('yuyeon.data-table.pagination');
|
|
6
|
+
export const pressDataTablePaginationProps = propsFactory({
|
|
7
|
+
page: {
|
|
8
|
+
type: [Number, String],
|
|
9
|
+
default: 1
|
|
10
|
+
},
|
|
11
|
+
pageSize: {
|
|
12
|
+
type: [Number, String],
|
|
13
|
+
default: 10
|
|
14
|
+
}
|
|
15
|
+
}, 'YDataTable--pagination');
|
|
16
|
+
export function createPagination(props) {
|
|
17
|
+
const page = useModelDuplex(props, 'page', undefined, value => +(value ?? 1));
|
|
18
|
+
const pageSize = useModelDuplex(props, 'pageSize', undefined, value => +(value ?? 10));
|
|
19
|
+
return {
|
|
20
|
+
page,
|
|
21
|
+
pageSize
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
export function providePagination(options) {
|
|
25
|
+
const {
|
|
26
|
+
page,
|
|
27
|
+
pageSize,
|
|
28
|
+
total
|
|
29
|
+
} = options;
|
|
30
|
+
const startIndex = computed(() => {
|
|
31
|
+
if (pageSize.value === -1) return 0;
|
|
32
|
+
return pageSize.value * (page.value - 1);
|
|
33
|
+
});
|
|
34
|
+
const endIndex = computed(() => {
|
|
35
|
+
if (pageSize.value === -1) return total.value;
|
|
36
|
+
return Math.min(total.value, startIndex.value + pageSize.value);
|
|
37
|
+
});
|
|
38
|
+
const pageLength = computed(() => {
|
|
39
|
+
if (pageSize.value === -1 || total.value === 0) return 1;
|
|
40
|
+
return Math.ceil(total.value / pageSize.value);
|
|
41
|
+
});
|
|
42
|
+
watch([page, pageLength], () => {
|
|
43
|
+
if (page.value > pageLength.value) {
|
|
44
|
+
page.value = pageLength.value;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
function setPageSize(value, noReset) {
|
|
48
|
+
pageSize.value = value;
|
|
49
|
+
if (!noReset) {
|
|
50
|
+
page.value = 1;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
function nextPage() {
|
|
54
|
+
page.value = clamp(page.value + 1, 1, pageLength.value);
|
|
55
|
+
}
|
|
56
|
+
function prevPage() {
|
|
57
|
+
page.value = clamp(page.value - 1, 1, pageLength.value);
|
|
58
|
+
}
|
|
59
|
+
function setPage(value) {
|
|
60
|
+
page.value = clamp(value, 1, pageLength.value);
|
|
61
|
+
}
|
|
62
|
+
const data = {
|
|
63
|
+
page,
|
|
64
|
+
pageSize,
|
|
65
|
+
startIndex,
|
|
66
|
+
endIndex,
|
|
67
|
+
pageLength,
|
|
68
|
+
total,
|
|
69
|
+
nextPage,
|
|
70
|
+
prevPage,
|
|
71
|
+
setPage,
|
|
72
|
+
setPageSize
|
|
73
|
+
};
|
|
74
|
+
provide(Y_DATA_TABLE_PAGINATION_KEY, data);
|
|
75
|
+
return data;
|
|
76
|
+
}
|
|
77
|
+
export function usePagination() {
|
|
78
|
+
const data = inject(Y_DATA_TABLE_PAGINATION_KEY);
|
|
79
|
+
if (!data) {
|
|
80
|
+
throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);
|
|
81
|
+
}
|
|
82
|
+
return data;
|
|
83
|
+
}
|
|
84
|
+
export function usePaginatedItems(options) {
|
|
85
|
+
const {
|
|
86
|
+
items,
|
|
87
|
+
startIndex,
|
|
88
|
+
endIndex,
|
|
89
|
+
pageSize
|
|
90
|
+
} = options;
|
|
91
|
+
const paginatedItems = computed(() => {
|
|
92
|
+
if (pageSize.value <= 0) return items.value;
|
|
93
|
+
return items.value.slice(startIndex.value, endIndex.value);
|
|
94
|
+
});
|
|
95
|
+
return {
|
|
96
|
+
paginatedItems
|
|
97
|
+
};
|
|
98
|
+
}
|
|
99
|
+
//# sourceMappingURL=pagination.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"pagination.js","names":["computed","inject","provide","watch","useModelDuplex","clamp","propsFactory","Y_DATA_TABLE_PAGINATION_KEY","Symbol","for","pressDataTablePaginationProps","page","type","Number","String","default","pageSize","createPagination","props","undefined","value","providePagination","options","total","startIndex","endIndex","Math","min","pageLength","ceil","setPageSize","noReset","nextPage","prevPage","setPage","data","usePagination","Error","description","usePaginatedItems","items","paginatedItems","slice"],"sources":["../../../../src/components/table/composables/pagination.ts"],"sourcesContent":["import type { InjectionKey, PropType, Ref } from 'vue';\r\nimport { computed, inject, provide, watch } from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { clamp } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { DataTableProvidePaginationData } from '../types';\r\n\r\nexport const Y_DATA_TABLE_PAGINATION_KEY: InjectionKey<{\r\n page: Ref<number>;\r\n pageSize: Ref<number>;\r\n startIndex: Ref<number>;\r\n endIndex: Ref<number>;\r\n pageLength: Ref<number>;\r\n total: Ref<number>;\r\n prevPage: () => void;\r\n nextPage: () => void;\r\n setPage: (page: number) => void;\r\n setPageSize: (size: number) => void;\r\n}> = Symbol.for('yuyeon.data-table.pagination');\r\n\r\nexport const pressDataTablePaginationProps = propsFactory(\r\n {\r\n page: {\r\n type: [Number, String] as PropType<number | string>,\r\n default: 1,\r\n },\r\n pageSize: {\r\n type: [Number, String] as PropType<number | string>,\r\n default: 10,\r\n },\r\n },\r\n 'YDataTable--pagination',\r\n);\r\n\r\ntype PaginationProps = {\r\n page: number | string;\r\n 'onUpdate:page': ((v: any) => void) | undefined;\r\n pageSize: number | string;\r\n 'onUpdate:pageSize': ((v: any) => void) | undefined;\r\n total?: number | string;\r\n};\r\n\r\nexport function createPagination(props: PaginationProps) {\r\n const page = useModelDuplex(\r\n props,\r\n 'page',\r\n undefined,\r\n (value) => +(value ?? 1),\r\n );\r\n const pageSize = useModelDuplex(\r\n props,\r\n 'pageSize',\r\n undefined,\r\n (value) => +(value ?? 10),\r\n );\r\n return { page, pageSize };\r\n}\r\n\r\nexport function providePagination(options: {\r\n page: Ref<number>;\r\n pageSize: Ref<number>;\r\n total: Ref<number>;\r\n}) {\r\n const { page, pageSize, total } = options;\r\n const startIndex = computed(() => {\r\n if (pageSize.value === -1) return 0;\r\n\r\n return pageSize.value * (page.value - 1);\r\n });\r\n\r\n const endIndex = computed(() => {\r\n if (pageSize.value === -1) return total.value;\r\n\r\n return Math.min(total.value, startIndex.value + pageSize.value);\r\n });\r\n\r\n const pageLength = computed(() => {\r\n if (pageSize.value === -1 || total.value === 0) return 1;\r\n\r\n return Math.ceil(total.value / pageSize.value);\r\n });\r\n\r\n watch([page, pageLength], () => {\r\n if (page.value > pageLength.value) {\r\n page.value = pageLength.value;\r\n }\r\n });\r\n\r\n function setPageSize(value: number, noReset?: boolean) {\r\n pageSize.value = value;\r\n if (!noReset) {\r\n page.value = 1;\r\n }\r\n }\r\n\r\n function nextPage() {\r\n page.value = clamp(page.value + 1, 1, pageLength.value);\r\n }\r\n\r\n function prevPage() {\r\n page.value = clamp(page.value - 1, 1, pageLength.value);\r\n }\r\n\r\n function setPage(value: number) {\r\n page.value = clamp(value, 1, pageLength.value);\r\n }\r\n\r\n const data: DataTableProvidePaginationData = {\r\n page,\r\n pageSize,\r\n startIndex,\r\n endIndex,\r\n pageLength,\r\n total,\r\n nextPage,\r\n prevPage,\r\n setPage,\r\n setPageSize,\r\n };\r\n\r\n provide(Y_DATA_TABLE_PAGINATION_KEY, data);\r\n\r\n return data;\r\n}\r\n\r\nexport function usePagination() {\r\n const data = inject(Y_DATA_TABLE_PAGINATION_KEY);\r\n if (!data) {\r\n throw new Error(`Not provided: ${Y_DATA_TABLE_PAGINATION_KEY.description}`);\r\n }\r\n return data;\r\n}\r\n\r\nexport function usePaginatedItems<T>(options: {\r\n items: Ref<readonly T[]>;\r\n startIndex: Ref<number>;\r\n endIndex: Ref<number>;\r\n pageSize: Ref<number>;\r\n}) {\r\n const { items, startIndex, endIndex, pageSize } = options;\r\n const paginatedItems = computed(() => {\r\n if (pageSize.value <= 0) return items.value;\r\n\r\n return items.value.slice(startIndex.value, endIndex.value);\r\n });\r\n\r\n return { paginatedItems };\r\n}\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"provides.js","names":["YTableInjectionKey","Symbol","for","YDataTableInjectionKey"],"sources":["../../../../src/components/table/composables/provides.ts"],"sourcesContent":["import { type InjectionKey, Ref, ShallowRef } from 'vue';\nimport type { InternalDataTableHeader } from '@/components/table/types';\nimport { createSorting } from '@/components/table/composables/sorting';\n\nexport const YTableInjectionKey: InjectionKey<{\n tableRef: Ref<HTMLTableElement | undefined>\n containerRect: ShallowRef<DOMRectReadOnly | undefined>\n wrapperRef: Ref<HTMLElement | undefined>\n wrapperRect: ShallowRef<DOMRectReadOnly | undefined>\n}> = Symbol.for('y-table');\n\nexport const YDataTableInjectionKey: InjectionKey<{\n toggleSort: (column: InternalDataTableHeader) => void;\n sortBy: ReturnType<typeof createSorting>['sortBy']\n headRect: Ref<DOMRectReadOnly | undefined>\n}> =\n Symbol.for('y-data-table');\n"],"mappings":"AAIA,OAAO,MAAMA,kBAKX,GAAGC,MAAM,CAACC,GAAG,CAAC,SAAS,CAAC;AAE1B,OAAO,MAAMC,sBAIX,GACAF,MAAM,CAACC,GAAG,CAAC,cAAc,CAAC"}
|
|
@@ -0,0 +1,196 @@
|
|
|
1
|
+
import { computed, inject, provide } from 'vue';
|
|
2
|
+
import { useModelDuplex } from "../../../composables/communication.js";
|
|
3
|
+
import { wrapInArray } from "../../../util/array.js";
|
|
4
|
+
import { deepEqual, getPropertyFromItem } from "../../../util/common.js";
|
|
5
|
+
import { propsFactory } from "../../../util/component/index.js";
|
|
6
|
+
export const pressDataTableSelectionProps = propsFactory({
|
|
7
|
+
enableSelect: Boolean,
|
|
8
|
+
selectStrategy: {
|
|
9
|
+
type: [String, Object],
|
|
10
|
+
default: 'page'
|
|
11
|
+
},
|
|
12
|
+
modelValue: {
|
|
13
|
+
type: Array,
|
|
14
|
+
default: () => []
|
|
15
|
+
},
|
|
16
|
+
itemComparator: {
|
|
17
|
+
type: [Function, String],
|
|
18
|
+
default: () => deepEqual
|
|
19
|
+
}
|
|
20
|
+
}, 'YDataTable--selection');
|
|
21
|
+
const singleSelectStrategy = {
|
|
22
|
+
showSelectAll: false,
|
|
23
|
+
allSelected: () => [],
|
|
24
|
+
select: _ref => {
|
|
25
|
+
let {
|
|
26
|
+
items,
|
|
27
|
+
value
|
|
28
|
+
} = _ref;
|
|
29
|
+
return new Set(value ? [items[0]?.value] : []);
|
|
30
|
+
},
|
|
31
|
+
selectAll: _ref2 => {
|
|
32
|
+
let {
|
|
33
|
+
selected
|
|
34
|
+
} = _ref2;
|
|
35
|
+
return selected;
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const pageSelectStrategy = {
|
|
39
|
+
showSelectAll: true,
|
|
40
|
+
allSelected: _ref3 => {
|
|
41
|
+
let {
|
|
42
|
+
pageItems
|
|
43
|
+
} = _ref3;
|
|
44
|
+
return pageItems;
|
|
45
|
+
},
|
|
46
|
+
select: _ref4 => {
|
|
47
|
+
let {
|
|
48
|
+
items,
|
|
49
|
+
value,
|
|
50
|
+
selected
|
|
51
|
+
} = _ref4;
|
|
52
|
+
for (const item of items) {
|
|
53
|
+
if (value) selected.add(item.value);else selected.delete(item.value);
|
|
54
|
+
}
|
|
55
|
+
return selected;
|
|
56
|
+
},
|
|
57
|
+
selectAll: _ref5 => {
|
|
58
|
+
let {
|
|
59
|
+
value,
|
|
60
|
+
pageItems,
|
|
61
|
+
selected
|
|
62
|
+
} = _ref5;
|
|
63
|
+
return pageSelectStrategy.select({
|
|
64
|
+
items: pageItems,
|
|
65
|
+
value,
|
|
66
|
+
selected
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
const allSelectStrategy = {
|
|
71
|
+
showSelectAll: true,
|
|
72
|
+
allSelected: _ref6 => {
|
|
73
|
+
let {
|
|
74
|
+
allItems
|
|
75
|
+
} = _ref6;
|
|
76
|
+
return allItems;
|
|
77
|
+
},
|
|
78
|
+
select: _ref7 => {
|
|
79
|
+
let {
|
|
80
|
+
items,
|
|
81
|
+
value,
|
|
82
|
+
selected
|
|
83
|
+
} = _ref7;
|
|
84
|
+
for (const item of items) {
|
|
85
|
+
if (value) selected.add(item.value);else selected.delete(item.value);
|
|
86
|
+
}
|
|
87
|
+
return selected;
|
|
88
|
+
},
|
|
89
|
+
selectAll: _ref8 => {
|
|
90
|
+
let {
|
|
91
|
+
value,
|
|
92
|
+
allItems,
|
|
93
|
+
selected
|
|
94
|
+
} = _ref8;
|
|
95
|
+
return allSelectStrategy.select({
|
|
96
|
+
items: allItems,
|
|
97
|
+
value,
|
|
98
|
+
selected
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
export const Y_DATA_TABLE_SELECTION_KEY = Symbol.for('yuyeon.data-table.selection');
|
|
103
|
+
export function provideSelection(props, _ref9) {
|
|
104
|
+
let {
|
|
105
|
+
allItems,
|
|
106
|
+
pageItems
|
|
107
|
+
} = _ref9;
|
|
108
|
+
const selected = useModelDuplex(props, 'modelValue', props.modelValue, v => {
|
|
109
|
+
return new Set(wrapInArray(v).map(v => {
|
|
110
|
+
return allItems.value.find(item => {
|
|
111
|
+
const {
|
|
112
|
+
itemComparator
|
|
113
|
+
} = props;
|
|
114
|
+
if (typeof itemComparator === 'function') {
|
|
115
|
+
itemComparator(v, item.value);
|
|
116
|
+
}
|
|
117
|
+
return getPropertyFromItem(v, props.itemKey) === item.key;
|
|
118
|
+
})?.value ?? v;
|
|
119
|
+
}));
|
|
120
|
+
}, v => {
|
|
121
|
+
return [...v.values()];
|
|
122
|
+
});
|
|
123
|
+
const allSelectables = computed(() => allItems.value.filter(item => item.selectable));
|
|
124
|
+
const pageSelectables = computed(() => pageItems.value.filter(item => item.selectable));
|
|
125
|
+
const selectStrategy = computed(() => {
|
|
126
|
+
if (typeof props.selectStrategy === 'object') {
|
|
127
|
+
return props.selectStrategy;
|
|
128
|
+
}
|
|
129
|
+
switch (props.selectStrategy) {
|
|
130
|
+
case 'single':
|
|
131
|
+
return singleSelectStrategy;
|
|
132
|
+
case 'all':
|
|
133
|
+
return allSelectStrategy;
|
|
134
|
+
case 'page':
|
|
135
|
+
default:
|
|
136
|
+
return pageSelectStrategy;
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
function isSelected(items) {
|
|
140
|
+
return wrapInArray(items).every(item => selected.value.has(item.value));
|
|
141
|
+
}
|
|
142
|
+
function isSomeSelected(items) {
|
|
143
|
+
return wrapInArray(items).some(item => selected.value.has(item.value));
|
|
144
|
+
}
|
|
145
|
+
function select(items, value) {
|
|
146
|
+
selected.value = selectStrategy.value.select({
|
|
147
|
+
items,
|
|
148
|
+
value,
|
|
149
|
+
selected: new Set(selected.value)
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
function toggleSelect(item) {
|
|
153
|
+
select([item], !isSelected([item]));
|
|
154
|
+
}
|
|
155
|
+
function selectAll(value) {
|
|
156
|
+
selected.value = selectStrategy.value.selectAll({
|
|
157
|
+
value,
|
|
158
|
+
allItems: allSelectables.value,
|
|
159
|
+
pageItems: pageSelectables.value,
|
|
160
|
+
selected: new Set(selected.value)
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
const selectables = computed(() => {
|
|
164
|
+
return selectStrategy.value.allSelected({
|
|
165
|
+
allItems: allSelectables.value,
|
|
166
|
+
pageItems: pageSelectables.value
|
|
167
|
+
});
|
|
168
|
+
});
|
|
169
|
+
const someSelected = computed(() => {
|
|
170
|
+
return isSomeSelected(pageSelectables.value);
|
|
171
|
+
});
|
|
172
|
+
const allSelected = computed(() => {
|
|
173
|
+
return isSelected(selectables.value);
|
|
174
|
+
});
|
|
175
|
+
const data = {
|
|
176
|
+
toggleSelect,
|
|
177
|
+
select,
|
|
178
|
+
selectAll,
|
|
179
|
+
isSelected,
|
|
180
|
+
isSomeSelected,
|
|
181
|
+
someSelected,
|
|
182
|
+
allSelected,
|
|
183
|
+
showSelectAll: selectStrategy.value.showSelectAll,
|
|
184
|
+
selectables
|
|
185
|
+
};
|
|
186
|
+
provide(Y_DATA_TABLE_SELECTION_KEY, data);
|
|
187
|
+
return data;
|
|
188
|
+
}
|
|
189
|
+
export function useSelection() {
|
|
190
|
+
const data = inject(Y_DATA_TABLE_SELECTION_KEY);
|
|
191
|
+
if (!data) {
|
|
192
|
+
throw new Error(`Not provided: ${Y_DATA_TABLE_SELECTION_KEY.description}`);
|
|
193
|
+
}
|
|
194
|
+
return data;
|
|
195
|
+
}
|
|
196
|
+
//# sourceMappingURL=selection.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"selection.js","names":["computed","inject","provide","useModelDuplex","wrapInArray","deepEqual","getPropertyFromItem","propsFactory","pressDataTableSelectionProps","enableSelect","Boolean","selectStrategy","type","String","Object","default","modelValue","Array","itemComparator","Function","singleSelectStrategy","showSelectAll","allSelected","select","_ref","items","value","Set","selectAll","_ref2","selected","pageSelectStrategy","_ref3","pageItems","_ref4","item","add","delete","_ref5","allSelectStrategy","_ref6","allItems","_ref7","_ref8","Y_DATA_TABLE_SELECTION_KEY","Symbol","for","provideSelection","props","_ref9","v","map","find","itemKey","key","values","allSelectables","filter","selectable","pageSelectables","isSelected","every","has","isSomeSelected","some","toggleSelect","selectables","someSelected","data","useSelection","Error","description"],"sources":["../../../../src/components/table/composables/selection.ts"],"sourcesContent":["import {\r\n type InjectionKey,\r\n type PropType,\r\n type Ref,\r\n computed,\r\n inject,\r\n provide,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { wrapInArray } from '@/util/array';\r\nimport { deepEqual, getPropertyFromItem } from '@/util/common';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport { DataTableProvideSelectionData } from '../types';\r\nimport { DataTableItemsProps } from './items';\r\n\r\nexport interface SelectableItem {\r\n key: string;\r\n value: any;\r\n selectable: boolean;\r\n}\r\n\r\nexport interface DataTableSelectStrategy {\r\n showSelectAll: boolean;\r\n allSelected: (data: {\r\n allItems: SelectableItem[];\r\n pageItems: SelectableItem[];\r\n }) => SelectableItem[];\r\n select: (data: {\r\n items: SelectableItem[];\r\n value: boolean;\r\n selected: Set<unknown>;\r\n }) => Set<unknown>;\r\n selectAll: (data: {\r\n value: boolean;\r\n allItems: SelectableItem[];\r\n pageItems: SelectableItem[];\r\n selected: Set<unknown>;\r\n }) => Set<unknown>;\r\n}\r\n\r\nexport const pressDataTableSelectionProps = propsFactory(\r\n {\r\n enableSelect: Boolean,\r\n selectStrategy: {\r\n type: [String, Object] as PropType<'single' | 'page' | 'all'>,\r\n default: 'page',\r\n },\r\n modelValue: {\r\n type: Array as PropType<readonly any[]>,\r\n default: () => [],\r\n },\r\n itemComparator: {\r\n type: [Function, String] as PropType<typeof deepEqual | string>,\r\n default: () => deepEqual,\r\n },\r\n },\r\n 'YDataTable--selection',\r\n);\r\n\r\ntype DataTableSelectionProps = Pick<DataTableItemsProps, 'itemKey'> & {\r\n modelValue: readonly any[];\r\n selectStrategy: 'single' | 'page' | 'all';\r\n 'onUpdate:modelValue': ((value: any[]) => void) | undefined;\r\n itemComparator: ((a: any, b: any) => boolean) | string;\r\n};\r\n\r\nconst singleSelectStrategy: DataTableSelectStrategy = {\r\n showSelectAll: false,\r\n allSelected: () => [],\r\n select: ({ items, value }) => {\r\n return new Set(value ? [items[0]?.value] : []);\r\n },\r\n selectAll: ({ selected }) => selected,\r\n};\r\n\r\nconst pageSelectStrategy: DataTableSelectStrategy = {\r\n showSelectAll: true,\r\n allSelected: ({ pageItems }) => pageItems,\r\n select: ({ items, value, selected }) => {\r\n for (const item of items) {\r\n if (value) selected.add(item.value);\r\n else selected.delete(item.value);\r\n }\r\n\r\n return selected;\r\n },\r\n selectAll: ({ value, pageItems, selected }) =>\r\n pageSelectStrategy.select({ items: pageItems, value, selected }),\r\n};\r\n\r\nconst allSelectStrategy: DataTableSelectStrategy = {\r\n showSelectAll: true,\r\n allSelected: ({ allItems }) => allItems,\r\n select: ({ items, value, selected }) => {\r\n for (const item of items) {\r\n if (value) selected.add(item.value);\r\n else selected.delete(item.value);\r\n }\r\n\r\n return selected;\r\n },\r\n selectAll: ({ value, allItems, selected }) =>\r\n allSelectStrategy.select({ items: allItems, value, selected }),\r\n};\r\n\r\nexport const Y_DATA_TABLE_SELECTION_KEY: InjectionKey<\r\n ReturnType<typeof provideSelection>\r\n> = Symbol.for('yuyeon.data-table.selection');\r\n\r\nexport function provideSelection(\r\n props: DataTableSelectionProps,\r\n {\r\n allItems,\r\n pageItems,\r\n }: { allItems: Ref<SelectableItem[]>; pageItems: Ref<SelectableItem[]> },\r\n) {\r\n const selected = useModelDuplex(\r\n props,\r\n 'modelValue',\r\n props.modelValue,\r\n (v) => {\r\n return new Set(\r\n wrapInArray(v).map((v) => {\r\n return (\r\n allItems.value.find((item) => {\r\n const { itemComparator } = props;\r\n if (typeof itemComparator === 'function') {\r\n itemComparator(v, item.value);\r\n }\r\n return getPropertyFromItem(v, props.itemKey) === item.key;\r\n })?.value ?? v\r\n );\r\n }),\r\n );\r\n },\r\n (v) => {\r\n return [...v.values()];\r\n },\r\n );\r\n\r\n const allSelectables = computed(() =>\r\n allItems.value.filter((item) => item.selectable),\r\n );\r\n\r\n const pageSelectables = computed(() =>\r\n pageItems.value.filter((item) => item.selectable),\r\n );\r\n\r\n const selectStrategy = computed(() => {\r\n if (typeof props.selectStrategy === 'object') {\r\n return props.selectStrategy;\r\n }\r\n switch (props.selectStrategy) {\r\n case 'single':\r\n return singleSelectStrategy;\r\n case 'all':\r\n return allSelectStrategy;\r\n case 'page':\r\n default:\r\n return pageSelectStrategy;\r\n }\r\n });\r\n\r\n function isSelected(items: SelectableItem | SelectableItem[]) {\r\n return wrapInArray(items).every((item) => selected.value.has(item.value));\r\n }\r\n\r\n function isSomeSelected(items: SelectableItem | SelectableItem[]) {\r\n return wrapInArray(items).some((item) => selected.value.has(item.value));\r\n }\r\n\r\n function select(items: SelectableItem[], value: boolean) {\r\n selected.value = selectStrategy.value.select({\r\n items,\r\n value,\r\n selected: new Set(selected.value),\r\n });\r\n }\r\n\r\n function toggleSelect(item: SelectableItem) {\r\n select([item], !isSelected([item]));\r\n }\r\n\r\n function selectAll(value: boolean) {\r\n selected.value = selectStrategy.value.selectAll({\r\n value,\r\n allItems: allSelectables.value,\r\n pageItems: pageSelectables.value,\r\n selected: new Set(selected.value),\r\n });\r\n }\r\n\r\n const selectables = computed(() => {\r\n return selectStrategy.value.allSelected({\r\n allItems: allSelectables.value,\r\n pageItems: pageSelectables.value,\r\n });\r\n });\r\n\r\n const someSelected = computed(() => {\r\n return isSomeSelected(pageSelectables.value);\r\n });\r\n\r\n const allSelected = computed(() => {\r\n return isSelected(selectables.value);\r\n });\r\n\r\n const data: DataTableProvideSelectionData = {\r\n toggleSelect,\r\n select,\r\n selectAll,\r\n isSelected,\r\n isSomeSelected,\r\n someSelected,\r\n allSelected,\r\n showSelectAll: selectStrategy.value.showSelectAll,\r\n selectables,\r\n };\r\n\r\n provide(Y_DATA_TABLE_SELECTION_KEY, data);\r\n\r\n return data;\r\n}\r\n\r\nexport function useSelection() {\r\n const data = inject(Y_DATA_TABLE_SELECTION_KEY);\r\n if (!data) {\r\n throw new Error(`Not provided: ${Y_DATA_TABLE_SELECTION_KEY.description}`);\r\n }\r\n\r\n return data;\r\n}\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { computed, unref } from 'vue';
|
|
2
|
+
import { useI18n } from "../../../composables/i18n/index.js";
|
|
3
|
+
import { getObjectValueByPath, isEmpty } from "../../../util/common.js";
|
|
4
|
+
export function useSortedItems(props, items, sortBy, options) {
|
|
5
|
+
const {
|
|
6
|
+
locale
|
|
7
|
+
} = useI18n();
|
|
8
|
+
const sortedItems = computed(() => {
|
|
9
|
+
if (sortBy.value.length === 0) return items.value;
|
|
10
|
+
return sortItems(items.value, sortBy.value, locale.value);
|
|
11
|
+
});
|
|
12
|
+
return {
|
|
13
|
+
sortedItems
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
export function sortItems(items, sortOptions, locale) {
|
|
17
|
+
const stringCollator = new Intl.Collator(locale, {
|
|
18
|
+
sensitivity: 'accent',
|
|
19
|
+
usage: 'sort'
|
|
20
|
+
});
|
|
21
|
+
const refined = items.map(item => item);
|
|
22
|
+
return refined.sort((a, b) => {
|
|
23
|
+
for (let i = 0; i < sortOptions.length; i++) {
|
|
24
|
+
const sortKey = sortOptions[i].key;
|
|
25
|
+
const sortOrder = sortOptions[i].order ?? 'asc';
|
|
26
|
+
if (sortOrder === false) continue;
|
|
27
|
+
let sortA = getObjectValueByPath(unref(a.columns), sortKey);
|
|
28
|
+
let sortB = getObjectValueByPath(unref(b.columns), sortKey);
|
|
29
|
+
let sortARaw = unref(a.raw);
|
|
30
|
+
let sortBRaw = unref(b.raw);
|
|
31
|
+
if (sortOrder === 'desc') {
|
|
32
|
+
[sortA, sortB] = [sortB, sortA];
|
|
33
|
+
[sortARaw, sortBRaw] = [sortBRaw, sortARaw];
|
|
34
|
+
}
|
|
35
|
+
if (sortA instanceof Date && sortB instanceof Date) {
|
|
36
|
+
return sortA.getTime() - sortB.getTime();
|
|
37
|
+
}
|
|
38
|
+
[sortA, sortB] = [sortA, sortB].map(s => s != null ? s.toString().toLocaleLowerCase() : s);
|
|
39
|
+
if (sortA !== sortB) {
|
|
40
|
+
if (isEmpty(sortA) && isEmpty(sortB)) return 0;
|
|
41
|
+
if (isEmpty(sortA)) return -1;
|
|
42
|
+
if (isEmpty(sortB)) return 1;
|
|
43
|
+
if (!isNaN(sortA) && !isNaN(sortB)) return Number(sortA) - Number(sortB);
|
|
44
|
+
return stringCollator.compare(sortA, sortB);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
return 0;
|
|
48
|
+
}).map(item => item);
|
|
49
|
+
}
|
|
50
|
+
//# sourceMappingURL=sorted-items.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sorted-items.js","names":["computed","unref","useI18n","getObjectValueByPath","isEmpty","useSortedItems","props","items","sortBy","options","locale","sortedItems","value","length","sortItems","sortOptions","stringCollator","Intl","Collator","sensitivity","usage","refined","map","item","sort","a","b","i","sortKey","key","sortOrder","order","sortA","columns","sortB","sortARaw","raw","sortBRaw","Date","getTime","s","toString","toLocaleLowerCase","isNaN","Number","compare"],"sources":["../../../../src/components/table/composables/sorted-items.ts"],"sourcesContent":["import { type Ref, computed, unref } from 'vue';\r\n\r\nimport { useI18n } from '@/composables/i18n';\r\nimport { getObjectValueByPath, isEmpty } from '@/util/common';\r\n\r\nimport type { SortOption } from '../types';\r\n\r\nexport function useSortedItems(\r\n props: any,\r\n items: Ref<any[]>,\r\n sortBy: Ref<readonly SortOption[]>,\r\n options?: {},\r\n) {\r\n const { locale } = useI18n();\r\n const sortedItems = computed(() => {\r\n if (sortBy.value.length === 0) return items.value;\r\n return sortItems(items.value, sortBy.value, locale.value);\r\n });\r\n\r\n return {\r\n sortedItems,\r\n };\r\n}\r\n\r\nexport function sortItems(\r\n items: any[],\r\n sortOptions: readonly SortOption[],\r\n locale: string,\r\n) {\r\n const stringCollator = new Intl.Collator(locale, {\r\n sensitivity: 'accent',\r\n usage: 'sort',\r\n });\r\n const refined = items.map((item) => item);\r\n\r\n return refined\r\n .sort((a, b) => {\r\n for (let i = 0; i < sortOptions.length; i++) {\r\n const sortKey = sortOptions[i].key;\r\n const sortOrder = sortOptions[i].order ?? 'asc';\r\n\r\n if (sortOrder === false) continue;\r\n\r\n let sortA = getObjectValueByPath(unref(a.columns), sortKey);\r\n let sortB = getObjectValueByPath(unref(b.columns), sortKey);\r\n let sortARaw = unref(a.raw);\r\n let sortBRaw = unref(b.raw);\r\n\r\n if (sortOrder === 'desc') {\r\n [sortA, sortB] = [sortB, sortA];\r\n [sortARaw, sortBRaw] = [sortBRaw, sortARaw];\r\n }\r\n\r\n if (sortA instanceof Date && sortB instanceof Date) {\r\n return sortA.getTime() - sortB.getTime();\r\n }\r\n\r\n [sortA, sortB] = [sortA, sortB].map((s) =>\r\n s != null ? s.toString().toLocaleLowerCase() : s,\r\n );\r\n\r\n if (sortA !== sortB) {\r\n if (isEmpty(sortA) && isEmpty(sortB)) return 0;\r\n if (isEmpty(sortA)) return -1;\r\n if (isEmpty(sortB)) return 1;\r\n if (!isNaN(sortA) && !isNaN(sortB))\r\n return Number(sortA) - Number(sortB);\r\n return stringCollator.compare(sortA, sortB);\r\n }\r\n }\r\n\r\n return 0;\r\n })\r\n .map((item) => item);\r\n}\r\n"],"mappings":"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"}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { inject, provide, toRef } from 'vue';
|
|
2
|
+
import { useModelDuplex } from "../../../composables/communication.js";
|
|
3
|
+
import { propsFactory } from "../../../util/component/index.js";
|
|
4
|
+
const Y_DATA_TABLE_SORTING_KEY = Symbol.for('yuyeon.data-table.sorting');
|
|
5
|
+
export const pressDataTableSortProps = propsFactory({
|
|
6
|
+
sortBy: {
|
|
7
|
+
type: Array,
|
|
8
|
+
default: () => []
|
|
9
|
+
},
|
|
10
|
+
multiSort: Boolean
|
|
11
|
+
}, 'YDataTable--sorting');
|
|
12
|
+
export function createSorting(props) {
|
|
13
|
+
const sortBy = useModelDuplex(props, 'sortBy');
|
|
14
|
+
const multiSort = toRef(props, 'multiSort');
|
|
15
|
+
return {
|
|
16
|
+
sortBy,
|
|
17
|
+
multiSort
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
export function provideSorting(options) {
|
|
21
|
+
const {
|
|
22
|
+
sortBy,
|
|
23
|
+
multiSort,
|
|
24
|
+
page
|
|
25
|
+
} = options;
|
|
26
|
+
const toggleSort = column => {
|
|
27
|
+
let neo = sortBy.value?.map(v => ({
|
|
28
|
+
...v
|
|
29
|
+
})) ?? [];
|
|
30
|
+
const target = neo.find(v => v.key === column.key);
|
|
31
|
+
const sortOption = {
|
|
32
|
+
key: column.key,
|
|
33
|
+
order: 'asc'
|
|
34
|
+
};
|
|
35
|
+
if (!target) {
|
|
36
|
+
if (multiSort?.value) {
|
|
37
|
+
neo = [...neo, sortOption];
|
|
38
|
+
} else {
|
|
39
|
+
neo = [sortOption];
|
|
40
|
+
}
|
|
41
|
+
} else if (target.order === 'desc') {
|
|
42
|
+
if (column.mustSort) {
|
|
43
|
+
target.order = 'asc';
|
|
44
|
+
} else {
|
|
45
|
+
neo = neo.filter(v => v.key !== column.key);
|
|
46
|
+
}
|
|
47
|
+
} else {
|
|
48
|
+
target.order = 'desc';
|
|
49
|
+
}
|
|
50
|
+
sortBy.value = neo;
|
|
51
|
+
if (page) {
|
|
52
|
+
page.value = 1;
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
function isSorted(column) {
|
|
56
|
+
return !!sortBy.value.find(option => option.key === column.key);
|
|
57
|
+
}
|
|
58
|
+
const data = {
|
|
59
|
+
sortBy,
|
|
60
|
+
toggleSort,
|
|
61
|
+
isSorted
|
|
62
|
+
};
|
|
63
|
+
provide(Y_DATA_TABLE_SORTING_KEY, data);
|
|
64
|
+
return data;
|
|
65
|
+
}
|
|
66
|
+
export function useSorting() {
|
|
67
|
+
const data = inject(Y_DATA_TABLE_SORTING_KEY);
|
|
68
|
+
if (!data) {
|
|
69
|
+
throw new Error(`Not provided: ${Y_DATA_TABLE_SORTING_KEY.description}`);
|
|
70
|
+
}
|
|
71
|
+
return data;
|
|
72
|
+
}
|
|
73
|
+
//# sourceMappingURL=sorting.js.map
|