yuyeon 0.3.2-rc.8 → 0.3.3
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/style.css +1 -1
- package/dist/yuyeon.js +3483 -3270
- package/dist/yuyeon.umd.cjs +3 -3
- package/lib/components/table/YDataTable.js +25 -14
- package/lib/components/table/YDataTable.js.map +1 -1
- package/lib/components/table/YDataTableBody.js +14 -18
- 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.js +87 -0
- package/lib/components/table/YDataTableLayerRow.js.map +1 -0
- package/lib/components/table/YDataTableLayerRow.vue +146 -0
- package/lib/components/table/YDataTableLayerRows.js +60 -0
- package/lib/components/table/YDataTableLayerRows.js.map +1 -0
- package/lib/components/table/YDataTableLayerRows.scss +14 -0
- package/lib/components/table/YDataTableRow.js +13 -5
- package/lib/components/table/YDataTableRow.js.map +1 -1
- package/lib/components/table/YDataTableRows.scss +14 -0
- package/lib/components/table/YDataTableServer.js +27 -17
- 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 +58 -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/index.js +2 -0
- package/lib/components/table/index.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/package.json +5 -2
- package/types/components/table/YDataTable.d.ts +22 -0
- package/types/components/table/YDataTableBody.d.ts +1 -3
- package/types/components/table/YDataTableLayer.d.ts +4 -1
- package/types/components/table/YDataTableLayerRow.d.ts +22 -0
- package/types/components/table/YDataTableLayerRows.d.ts +9 -0
- package/types/components/table/YDataTableServer.d.ts +22 -0
- 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/index.d.ts +2 -0
- package/types/components/table/types/index.d.ts +1 -1
- package/types/components/table/types/item.d.ts +2 -1
- package/types/shims.d.ts +58 -56
|
@@ -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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sorting.js","names":["inject","provide","toRef","useModelDuplex","propsFactory","Y_DATA_TABLE_SORTING_KEY","Symbol","for","pressDataTableSortProps","sortBy","type","Array","default","multiSort","Boolean","createSorting","props","provideSorting","options","page","toggleSort","column","neo","value","map","v","target","find","key","sortOption","order","mustSort","filter","isSorted","option","data","useSorting","Error","description"],"sources":["../../../../src/components/table/composables/sorting.ts"],"sourcesContent":["import {\r\n type DeepReadonly,\r\n type InjectionKey,\r\n type PropType,\r\n type Ref,\r\n inject,\r\n provide,\r\n toRef,\r\n} from 'vue';\r\n\r\nimport { useModelDuplex } from '@/composables/communication';\r\nimport { propsFactory } from '@/util/component';\r\n\r\nimport type {\r\n DataTableProvideSortingData,\r\n InternalDataTableHeader,\r\n SortOption,\r\n} from '../types';\r\n\r\nconst Y_DATA_TABLE_SORTING_KEY: InjectionKey<{\r\n sortBy: Ref<readonly SortOption[]>;\r\n toggleSort: (col: InternalDataTableHeader) => void;\r\n isSorted: (col: InternalDataTableHeader) => boolean;\r\n}> = Symbol.for('yuyeon.data-table.sorting');\r\n\r\nexport const pressDataTableSortProps = propsFactory(\r\n {\r\n sortBy: {\r\n type: Array as PropType<DeepReadonly<SortOption[]>>,\r\n default: () => [],\r\n },\r\n multiSort: Boolean,\r\n },\r\n 'YDataTable--sorting',\r\n);\r\n\r\ntype SortProps = {\r\n sortBy: readonly SortOption[];\r\n 'onUpdate:sortBy': ((value: any) => void) | undefined;\r\n multiSort: boolean;\r\n};\r\n\r\nexport function createSorting(props: SortProps) {\r\n const sortBy = useModelDuplex(props, 'sortBy');\r\n const multiSort = toRef(props, 'multiSort');\r\n\r\n return { sortBy, multiSort };\r\n}\r\n\r\nexport function provideSorting(options: {\r\n sortBy: Ref<readonly SortOption[]>;\r\n page?: Ref<number>;\r\n multiSort?: Ref<boolean>;\r\n}) {\r\n const { sortBy, multiSort, page } = options;\r\n\r\n const toggleSort = (column: InternalDataTableHeader) => {\r\n let neo = sortBy.value?.map((v) => ({ ...v })) ?? [];\r\n const target = neo.find((v) => v.key === column.key);\r\n const sortOption: SortOption = { key: column.key, order: 'asc' };\r\n\r\n if (!target) {\r\n if (multiSort?.value) {\r\n neo = [...neo, sortOption];\r\n } else {\r\n neo = [sortOption];\r\n }\r\n } else if (target.order === 'desc') {\r\n if (column.mustSort) {\r\n target.order = 'asc';\r\n } else {\r\n neo = neo.filter((v) => v.key !== column.key);\r\n }\r\n } else {\r\n target.order = 'desc';\r\n }\r\n sortBy.value = neo;\r\n if (page) {\r\n page.value = 1;\r\n }\r\n };\r\n\r\n function isSorted(column: InternalDataTableHeader) {\r\n return !!sortBy.value.find((option) => option.key === column.key);\r\n }\r\n\r\n const data: DataTableProvideSortingData = { sortBy, toggleSort, isSorted };\r\n\r\n provide(Y_DATA_TABLE_SORTING_KEY, data);\r\n\r\n return data;\r\n}\r\n\r\nexport function useSorting() {\r\n const data = inject(Y_DATA_TABLE_SORTING_KEY);\r\n if (!data) {\r\n throw new Error(`Not provided: ${Y_DATA_TABLE_SORTING_KEY.description}`);\r\n }\r\n return data;\r\n}\r\n"],"mappings":"AAAA,SAKEA,MAAM,EACNC,OAAO,EACPC,KAAK,QACA,KAAK;AAAC,SAEJC,cAAc;AAAA,SACdC,YAAY;AAQrB,MAAMC,wBAIJ,GAAGC,MAAM,CAACC,GAAG,CAAC,2BAA2B,CAAC;AAE5C,OAAO,MAAMC,uBAAuB,GAAGJ,YAAY,CACjD;EACEK,MAAM,EAAE;IACNC,IAAI,EAAEC,KAA6C;IACnDC,OAAO,EAAEA,CAAA,KAAM;EACjB,CAAC;EACDC,SAAS,EAAEC;AACb,CAAC,EACD,qBACF,CAAC;AAQD,OAAO,SAASC,aAAaA,CAACC,KAAgB,EAAE;EAC9C,MAAMP,MAAM,GAAGN,cAAc,CAACa,KAAK,EAAE,QAAQ,CAAC;EAC9C,MAAMH,SAAS,GAAGX,KAAK,CAACc,KAAK,EAAE,WAAW,CAAC;EAE3C,OAAO;IAAEP,MAAM;IAAEI;EAAU,CAAC;AAC9B;AAEA,OAAO,SAASI,cAAcA,CAACC,OAI9B,EAAE;EACD,MAAM;IAAET,MAAM;IAAEI,SAAS;IAAEM;EAAK,CAAC,GAAGD,OAAO;EAE3C,MAAME,UAAU,GAAIC,MAA+B,IAAK;IACtD,IAAIC,GAAG,GAAGb,MAAM,CAACc,KAAK,EAAEC,GAAG,CAAEC,CAAC,KAAM;MAAE,GAAGA;IAAE,CAAC,CAAC,CAAC,IAAI,EAAE;IACpD,MAAMC,MAAM,GAAGJ,GAAG,CAACK,IAAI,CAAEF,CAAC,IAAKA,CAAC,CAACG,GAAG,KAAKP,MAAM,CAACO,GAAG,CAAC;IACpD,MAAMC,UAAsB,GAAG;MAAED,GAAG,EAAEP,MAAM,CAACO,GAAG;MAAEE,KAAK,EAAE;IAAM,CAAC;IAEhE,IAAI,CAACJ,MAAM,EAAE;MACX,IAAIb,SAAS,EAAEU,KAAK,EAAE;QACpBD,GAAG,GAAG,CAAC,GAAGA,GAAG,EAAEO,UAAU,CAAC;MAC5B,CAAC,MAAM;QACLP,GAAG,GAAG,CAACO,UAAU,CAAC;MACpB;IACF,CAAC,MAAM,IAAIH,MAAM,CAACI,KAAK,KAAK,MAAM,EAAE;MAClC,IAAIT,MAAM,CAACU,QAAQ,EAAE;QACnBL,MAAM,CAACI,KAAK,GAAG,KAAK;MACtB,CAAC,MAAM;QACLR,GAAG,GAAGA,GAAG,CAACU,MAAM,CAAEP,CAAC,IAAKA,CAAC,CAACG,GAAG,KAAKP,MAAM,CAACO,GAAG,CAAC;MAC/C;IACF,CAAC,MAAM;MACLF,MAAM,CAACI,KAAK,GAAG,MAAM;IACvB;IACArB,MAAM,CAACc,KAAK,GAAGD,GAAG;IAClB,IAAIH,IAAI,EAAE;MACRA,IAAI,CAACI,KAAK,GAAG,CAAC;IAChB;EACF,CAAC;EAED,SAASU,QAAQA,CAACZ,MAA+B,EAAE;IACjD,OAAO,CAAC,CAACZ,MAAM,CAACc,KAAK,CAACI,IAAI,CAAEO,MAAM,IAAKA,MAAM,CAACN,GAAG,KAAKP,MAAM,CAACO,GAAG,CAAC;EACnE;EAEA,MAAMO,IAAiC,GAAG;IAAE1B,MAAM;IAAEW,UAAU;IAAEa;EAAS,CAAC;EAE1EhC,OAAO,CAACI,wBAAwB,EAAE8B,IAAI,CAAC;EAEvC,OAAOA,IAAI;AACb;AAEA,OAAO,SAASC,UAAUA,CAAA,EAAG;EAC3B,MAAMD,IAAI,GAAGnC,MAAM,CAACK,wBAAwB,CAAC;EAC7C,IAAI,CAAC8B,IAAI,EAAE;IACT,MAAM,IAAIE,KAAK,CAAE,iBAAgBhC,wBAAwB,CAACiC,WAAY,EAAC,CAAC;EAC1E;EACA,OAAOH,IAAI;AACb"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, shallowRef } from 'vue';
|
|
1
|
+
import { ref, shallowRef, watch } from 'vue';
|
|
2
2
|
import { useResizeObserver } from "../../../composables/resize-observer.js";
|
|
3
3
|
import { debounce } from "../../../util/debounce.js";
|
|
4
4
|
export function useRectMeasure() {
|
|
@@ -15,10 +15,20 @@ export function useRectMeasure() {
|
|
|
15
15
|
});
|
|
16
16
|
function measure(entries) {
|
|
17
17
|
containerRect.value = entries?.[0]?.contentRect;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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
|
+
}
|
|
22
32
|
}
|
|
23
33
|
if (tableRef.value) {
|
|
24
34
|
const rect = tableRef.value?.getBoundingClientRect();
|
|
@@ -27,6 +37,12 @@ export function useRectMeasure() {
|
|
|
27
37
|
}
|
|
28
38
|
}
|
|
29
39
|
}
|
|
40
|
+
watch(tableRef, neo => {
|
|
41
|
+
if (neo) {
|
|
42
|
+
const el = containerRef.value;
|
|
43
|
+
wrapperRef.value = el.querySelector('.y-table__wrapper');
|
|
44
|
+
}
|
|
45
|
+
});
|
|
30
46
|
return {
|
|
31
47
|
containerRef,
|
|
32
48
|
wrapperRef,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"measure.js","names":["ref","shallowRef","useResizeObserver","debounce","useRectMeasure","tableRef","wrapperRef","containerRect","wrapperRect","tableRect","debounceMeasure","measure","resizeObservedRef","containerRef","entries","value","contentRect","
|
|
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"],"sources":["../../../../src/components/table/composibles/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();\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\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] !== \"function\") {\n obj[key] = rect[key];\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');\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,CAAC,CAAC;EACtB,MAAMO,UAAU,GAAGP,GAAG,CAAC,CAAC;EAExB,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,CAAC,KAAK,UAAU,EAAE;YACnCD,GAAG,CAACC,GAAG,CAAC,GAAGH,IAAI,CAACG,GAAG,CAAC;UACtB;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;IAC1D;EACF,CAAC,CAAC;EAEF,OAAO;IACLX,YAAY;IACZP,UAAU;IACVD,QAAQ;IACRE,aAAa;IACbC,WAAW;IACXC;EACF,CAAC;AACH"}
|
|
@@ -6,4 +6,6 @@ export * from "./YDataTableRow.js";
|
|
|
6
6
|
export * from "./YDataTableCell.js";
|
|
7
7
|
export * from "./YDataTableControl.js";
|
|
8
8
|
export * from "./YDataTableLayer.js";
|
|
9
|
+
export * from "./YDataTableLayerRows.js";
|
|
10
|
+
export * from "./YDataTableLayerRow.js";
|
|
9
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/table/index.ts"],"sourcesContent":["export * from './YTable';\nexport * from './YDataTable';\nexport * from './YDataTableServer';\n\nexport * from './YDataTableBody';\nexport * from './YDataTableRow';\nexport * from './YDataTableCell';\nexport * from './YDataTableControl';\nexport * from './YDataTableLayer';\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/table/index.ts"],"sourcesContent":["export * from './YTable';\nexport * from './YDataTable';\nexport * from './YDataTableServer';\n\nexport * from './YDataTableBody';\nexport * from './YDataTableRow';\nexport * from './YDataTableCell';\nexport * from './YDataTableControl';\nexport * from './YDataTableLayer';\nexport * from './YDataTableLayerRows';\nexport * from './YDataTableLayerRow';\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/table/types/index.ts"],"sourcesContent":["import { ComputedRef, Ref, UnwrapRef } from 'vue';\n\nimport { SelectableItem } from '
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/table/types/index.ts"],"sourcesContent":["import { ComputedRef, Ref, UnwrapRef } from 'vue';\n\nimport { SelectableItem } from '@/components/table/composables/selection';\nimport type { DataTableCompareFn } from './common';\nimport type { DataTableHeader, InternalDataTableHeader } from './header';\nimport type { DataTableItem, ItemKeySlot } from './item';\nimport type { CellProps, RowProps } from './row';\n\nexport type {\n ItemKeySlot,\n RowProps,\n CellProps,\n DataTableHeader,\n InternalDataTableHeader,\n DataTableItem,\n DataTableCompareFn,\n};\n\nexport type SortOption = { key: string; order?: boolean | 'asc' | 'desc' };\n\nexport type DataTableProvideSortingData = {\n sortBy: Ref<readonly SortOption[]>;\n toggleSort: (column: InternalDataTableHeader) => void;\n isSorted: (column: InternalDataTableHeader) => boolean;\n};\n\nexport interface DataTableProvidePaginationData {\n page: Ref<number>;\n pageSize: Ref<number>;\n startIndex: ComputedRef<number>;\n endIndex: ComputedRef<number>;\n pageLength: ComputedRef<number>;\n total: Ref<number>;\n nextPage: () => void;\n prevPage: () => void;\n setPage: (value: number) => void;\n setPageSize: (value: number) => void;\n}\n\nexport interface DataTableProvideSelectionData {\n toggleSelect: (item: SelectableItem) => void;\n select: (items: SelectableItem[], value: boolean) => void;\n selectAll: (value: boolean) => void;\n isSelected: (items: SelectableItem | SelectableItem[]) => any;\n isSomeSelected: (items: SelectableItem | SelectableItem[]) => any;\n someSelected: ComputedRef<boolean>;\n allSelected: ComputedRef<any>;\n showSelectAll: boolean;\n selectables: ComputedRef<SelectableItem[]>;\n}\n\nexport type YDataTableSlotProps = {\n // pagination\n page: number;\n pageSize: number;\n pageLength: number;\n setPageSize: DataTableProvidePaginationData['setPageSize'];\n // sorting\n sortBy: UnwrapRef<DataTableProvideSortingData['sortBy']>;\n toggleSort: DataTableProvideSortingData['toggleSort'];\n // selection\n someSelected: boolean;\n allSelected: boolean;\n isSelected: DataTableProvideSelectionData['isSelected'];\n select: DataTableProvideSelectionData['select'];\n selectAll: DataTableProvideSelectionData['selectAll'];\n toggleSelect: DataTableProvideSelectionData['toggleSelect'];\n //\n items: readonly DataTableItem[];\n columns: InternalDataTableHeader[];\n headers: InternalDataTableHeader[][];\n //\n TableBodyRef: Ref<any>;\n};\n\nexport type FixedPropType = 'lead' | 'trail' | 'lead-last' | 'trail-last';\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item.js","names":[],"sources":["../../../../src/components/table/types/item.ts"],"sourcesContent":["import { SelectableItem, provideSelection } from '
|
|
1
|
+
{"version":3,"file":"item.js","names":[],"sources":["../../../../src/components/table/types/item.ts"],"sourcesContent":["import { SelectableItem, provideSelection } from '@/components/table/composables/selection';\nimport { InternalDataTableHeader } from './header';\n\ntype ItemSlotBase<T> = {\n index: number;\n item: T;\n internalItem: DataTableItem<T>;\n selected: boolean;\n isSelected: ReturnType<typeof provideSelection>['isSelected'];\n toggleSelect: ReturnType<typeof provideSelection>['toggleSelect'];\n};\n\nexport type ItemKeySlot<T> = ItemSlotBase<T> & {\n value: any;\n column: InternalDataTableHeader;\n};\n\nexport interface DataTableItem<T = any> extends SelectableItem {\n index: number;\n columns: Record<string, any>;\n raw: T;\n rowRef?: any\n readonly _bindRowRef: (el: any | null) => void;\n}\n"],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "yuyeon",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.3",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"UI Library",
|
|
6
6
|
"Vue"
|
|
@@ -35,7 +35,10 @@
|
|
|
35
35
|
"types": "./types/components/index.d.ts",
|
|
36
36
|
"module": "./lib/components/index.js"
|
|
37
37
|
},
|
|
38
|
-
"./components/*":
|
|
38
|
+
"./components/*": {
|
|
39
|
+
"module": "./lib/components/*/*.js",
|
|
40
|
+
"types": "./types/components/*/*.d.ts"
|
|
41
|
+
},
|
|
39
42
|
"./composables": {
|
|
40
43
|
"types": "./types/composables/index.d.ts",
|
|
41
44
|
"module": "./lib/composables/index.js",
|
|
@@ -11,6 +11,8 @@ export declare const pressDataTableProps: <Defaults extends {
|
|
|
11
11
|
sortDescIcon?: unknown;
|
|
12
12
|
dualSortIcon?: unknown;
|
|
13
13
|
sticky?: unknown;
|
|
14
|
+
enableExpand?: unknown;
|
|
15
|
+
expanded?: unknown;
|
|
14
16
|
enableSelect?: unknown;
|
|
15
17
|
selectStrategy?: unknown;
|
|
16
18
|
modelValue?: unknown;
|
|
@@ -106,6 +108,20 @@ export declare const pressDataTableProps: <Defaults extends {
|
|
|
106
108
|
type: PropType<unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"]>;
|
|
107
109
|
default: unknown extends Defaults["sticky"] ? boolean : boolean | Defaults["sticky"];
|
|
108
110
|
};
|
|
111
|
+
enableExpand: unknown extends Defaults["enableExpand"] ? BooleanConstructor : {
|
|
112
|
+
type: PropType<unknown extends Defaults["enableExpand"] ? boolean : boolean | Defaults["enableExpand"]>;
|
|
113
|
+
default: unknown extends Defaults["enableExpand"] ? boolean : boolean | Defaults["enableExpand"];
|
|
114
|
+
};
|
|
115
|
+
expanded: unknown extends Defaults["expanded"] ? {
|
|
116
|
+
type: PropType<readonly string[]>;
|
|
117
|
+
default: () => never[];
|
|
118
|
+
} : Omit<{
|
|
119
|
+
type: PropType<readonly string[]>;
|
|
120
|
+
default: () => never[];
|
|
121
|
+
}, "type" | "default"> & {
|
|
122
|
+
type: PropType<unknown extends Defaults["expanded"] ? readonly string[] : readonly string[] | Defaults["expanded"]>;
|
|
123
|
+
default: unknown extends Defaults["expanded"] ? readonly string[] : readonly string[] | Defaults["expanded"];
|
|
124
|
+
};
|
|
109
125
|
enableSelect: unknown extends Defaults["enableSelect"] ? BooleanConstructor : {
|
|
110
126
|
type: PropType<unknown extends Defaults["enableSelect"] ? boolean : boolean | Defaults["enableSelect"]>;
|
|
111
127
|
default: unknown extends Defaults["enableSelect"] ? boolean : boolean | Defaults["enableSelect"];
|
|
@@ -397,6 +413,11 @@ export declare const YDataTable: import('vue').DefineComponent<{
|
|
|
397
413
|
};
|
|
398
414
|
dualSortIcon: BooleanConstructor;
|
|
399
415
|
sticky: BooleanConstructor;
|
|
416
|
+
enableExpand: BooleanConstructor;
|
|
417
|
+
expanded: {
|
|
418
|
+
type: PropType<readonly string[]>;
|
|
419
|
+
default: () => never[];
|
|
420
|
+
};
|
|
400
421
|
enableSelect: BooleanConstructor;
|
|
401
422
|
selectStrategy: {
|
|
402
423
|
type: PropType<"page" | "all" | "single">;
|
|
@@ -483,6 +504,7 @@ export declare const YDataTable: import('vue').DefineComponent<{
|
|
|
483
504
|
'update:pageSize': (pageSize: number) => true;
|
|
484
505
|
'update:sortBy': (sortBy: any) => true;
|
|
485
506
|
'update:options': (options: any) => true;
|
|
507
|
+
'update:expanded': (expanded: any[]) => true;
|
|
486
508
|
'click:row': (e: Event, value: {
|
|
487
509
|
row: any;
|
|
488
510
|
}) => true;
|
|
@@ -95,7 +95,5 @@ export declare const YDataTableBody: import('vue').DefineComponent<{
|
|
|
95
95
|
'onContextmenu:row': PropType<(e: Event, value: any) => void>;
|
|
96
96
|
'onMousedown:row': PropType<(e: Event, value: any) => void>;
|
|
97
97
|
'onKeydown:row': PropType<(e: Event, value: any) => void>;
|
|
98
|
-
}, {
|
|
99
|
-
rowRefs: import('vue').Ref<any[], any[]>;
|
|
100
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click:row" | "dblclick:row" | "contextmenu:row" | "mousedown:row")[], "click:row" | "dblclick:row" | "contextmenu:row" | "mousedown:row">;
|
|
98
|
+
}, void, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("click:row" | "dblclick:row" | "contextmenu:row" | "mousedown:row")[], "click:row" | "dblclick:row" | "contextmenu:row" | "mousedown:row">;
|
|
101
99
|
export type YDataTableBody = InstanceType<typeof YDataTableBody>;
|
|
@@ -4,7 +4,10 @@ export declare const YDataTableLayer: import('vue').DefineComponent<{
|
|
|
4
4
|
slotProps: PropType<any>;
|
|
5
5
|
}, {
|
|
6
6
|
YTableWire: {
|
|
7
|
-
|
|
7
|
+
tableRef: Ref<HTMLTableElement | undefined, HTMLTableElement | undefined>;
|
|
8
|
+
containerRect: import('vue').ShallowRef<DOMRectReadOnly | undefined>;
|
|
9
|
+
wrapperRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
|
|
10
|
+
wrapperRect: import('vue').ShallowRef<DOMRectReadOnly | undefined>;
|
|
8
11
|
} | undefined;
|
|
9
12
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string>;
|
|
10
13
|
export type YDataTableLayer = InstanceType<typeof YDataTableLayer>;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
|
|
3
|
+
export type YDataTableLayerRowDefaultSlotProps = {
|
|
4
|
+
item: any;
|
|
5
|
+
width: number | undefined;
|
|
6
|
+
height: number | undefined;
|
|
7
|
+
scrollTop: number;
|
|
8
|
+
};
|
|
9
|
+
export declare const YDataTableLayerRow: import('vue').DefineComponent<{
|
|
10
|
+
layerProps: PropType<any>;
|
|
11
|
+
item: PropType<any>;
|
|
12
|
+
width: {
|
|
13
|
+
type: PropType<number>;
|
|
14
|
+
};
|
|
15
|
+
scrollTop: {
|
|
16
|
+
type: PropType<number>;
|
|
17
|
+
default: number;
|
|
18
|
+
};
|
|
19
|
+
headRect: PropType<DOMRect>;
|
|
20
|
+
classes: PropType<(item: any) => string[] | string>;
|
|
21
|
+
styles: PropType<(item: any, originStyle: any) => any>;
|
|
22
|
+
}, void, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { PropType } from 'vue';
|
|
2
|
+
|
|
3
|
+
export declare const YDataTableLayerRows: import('vue').DefineComponent<{
|
|
4
|
+
layerProps: PropType<any>;
|
|
5
|
+
items: PropType<any[]>;
|
|
6
|
+
classes: PropType<(item: any) => string[] | string>;
|
|
7
|
+
styles: PropType<(item: any, originStyle: any) => any>;
|
|
8
|
+
single: PropType<boolean>;
|
|
9
|
+
}, void, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string>;
|