@astryx-vue/core 0.2.0 → 0.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AppShell/index.js +1 -1
- package/dist/{AppShell-EiGyPFbA.js → AppShell-Cb41gIAj.js} +2 -2
- package/dist/Avatar/index.d.ts +1 -1
- package/dist/Avatar/index.js +1 -1
- package/dist/Avatar-jmHInHwj.js +244 -0
- package/dist/AvatarGroup/index.d.ts +1 -1
- package/dist/AvatarGroup/index.js +1 -1
- package/dist/{AvatarGroup-CZcgAMjM.js → AvatarGroup-QyzSrpYA.js} +8 -7
- package/dist/Badge/index.d.ts +2 -1
- package/dist/Badge/index.js +1 -1
- package/dist/Badge-CjDQPF5g.js +30 -0
- package/dist/Banner/index.d.ts +1 -1
- package/dist/Breadcrumbs/index.d.ts +2 -2
- package/dist/Breadcrumbs/index.js +1 -1
- package/dist/{Breadcrumbs-C3YZFQ9w.js → Breadcrumbs-CTQ7fjDn.js} +45 -11
- package/dist/ButtonGroup/index.d.ts +1 -1
- package/dist/Calendar/index.d.ts +2 -2
- package/dist/Calendar/index.js +1 -1
- package/dist/Calendar-BFaI5AMv.js +352 -0
- package/dist/Card/index.d.ts +1 -1
- package/dist/Carousel/index.js +1 -1
- package/dist/{Carousel-BTtHkKea.js → Carousel-X0cuQkvg.js} +2 -2
- package/dist/Chat/index.d.ts +2 -2
- package/dist/Chat/index.js +2 -2
- package/dist/Chat-M0tiGrNT.js +3148 -0
- package/dist/CheckboxInput/index.d.ts +1 -1
- package/dist/CheckboxList/index.d.ts +1 -1
- package/dist/CheckboxList/index.js +1 -1
- package/dist/Citation/index.js +1 -1
- package/dist/{Citation-DijdbUUu.js → Citation-C1veUk5p.js} +2 -2
- package/dist/ClickableCard/index.d.ts +1 -1
- package/dist/Code/index.js +1 -1
- package/dist/{CodeBlock-CxTb6j9_.js → CodeBlock-DesTJAkm.js} +1 -1
- package/dist/Collapsible/index.js +1 -1
- package/dist/{Collapsible-9MC08X39.js → Collapsible-BestK35V.js} +1 -1
- package/dist/CommandPalette/index.js +1 -1
- package/dist/{CommandPalette-BD2iODF5.js → CommandPalette-BArt97V8.js} +1 -1
- package/dist/ComplexSelector/index.d.ts +1 -1
- package/dist/ComplexSelector/index.js +1 -1
- package/dist/{ComplexSelector-D9iXd5cH.js → ComplexSelector-CAoig1RK.js} +2 -2
- package/dist/ContextMenu/index.d.ts +2 -2
- package/dist/ContextMenu/index.js +1 -1
- package/dist/{ContextMenu-HS_WqYIg.js → ContextMenu-9Im6i43E.js} +101 -63
- package/dist/DateInput/index.d.ts +2 -2
- package/dist/DateInput/index.js +1 -1
- package/dist/DateInput-BLocxqC3.js +376 -0
- package/dist/DateRangeInput/index.d.ts +1 -1
- package/dist/DateRangeInput/index.js +1 -1
- package/dist/{DateRangeInput-1bhPGG2s.js → DateRangeInput-DwDy3eRo.js} +2 -2
- package/dist/DateTimeInput/index.d.ts +1 -1
- package/dist/DateTimeInput/index.js +1 -1
- package/dist/{DateTimeInput-SnPdgk6P.js → DateTimeInput-BYiaC9bn.js} +5 -3
- package/dist/DropdownMenu/index.d.ts +3 -2
- package/dist/DropdownMenu/index.js +3 -2
- package/dist/DropdownMenu-Ddfr-aEC.js +164 -0
- package/dist/{DropdownMenu-UJGych6v.js → DropdownMenu-Dh-WAHKb.js} +63 -16
- package/dist/FileInput/index.d.ts +1 -1
- package/dist/FileInput/index.js +1 -1
- package/dist/{FileInput-BQiwE-GB.js → FileInput-DLO6V12n.js} +2 -2
- package/dist/Icon/index.d.ts +4 -3
- package/dist/Icon/index.js +3 -2
- package/dist/Icon/plugin.d.ts +45 -0
- package/dist/Icon/plugin.js +177 -0
- package/dist/Icon-CJKjdJy-.js +198 -0
- package/dist/Lightbox/index.js +1 -1
- package/dist/{Lightbox-CshKoB0r.js → Lightbox-CdFCS_EA.js} +2 -2
- package/dist/Link/index.d.ts +1 -1
- package/dist/Link/index.js +1 -1
- package/dist/Link-DqdQZ37C.js +141 -0
- package/dist/Markdown/index.js +1 -1
- package/dist/{Markdown-D-Ua055V.js → Markdown-BqKloI3w.js} +3 -3
- package/dist/MetadataList/index.js +1 -1
- package/dist/{MetadataList-sYph_d8Q.js → MetadataList-CvZkmisf.js} +1 -1
- package/dist/MobileNav/index.js +1 -1
- package/dist/{MobileNavToggle-DD9D01aj.js → MobileNavToggle-Bwi0qXXM.js} +1 -1
- package/dist/MoreMenu/index.d.ts +1 -1
- package/dist/MoreMenu/index.js +1 -1
- package/dist/{MoreMenu-BVrK5kkk.js → MoreMenu-BwJaJrkB.js} +2 -2
- package/dist/MultiSelector/index.js +1 -1
- package/dist/{MultiSelector-DiYov9sF.js → MultiSelector-C-ETfFy_.js} +2 -2
- package/dist/NumberInput/index.d.ts +2 -2
- package/dist/NumberInput/index.js +1 -1
- package/dist/NumberInput-DjetVB8O.js +210 -0
- package/dist/Outline/index.js +1 -1
- package/dist/{Outline-DQfEBxlc.js → Outline-Bz9c-u5y.js} +1 -1
- package/dist/OverflowList/index.d.ts +1 -1
- package/dist/OverflowList/index.js +1 -1
- package/dist/{OverflowList-BU5VCntl.js → OverflowList-ED-KN9Y5.js} +1 -1
- package/dist/Overlay/index.d.ts +1 -1
- package/dist/Pagination/index.d.ts +2 -2
- package/dist/Pagination/index.js +1 -1
- package/dist/{Pagination-HdhtykeF.js → Pagination-Cb66HMEf.js} +76 -22
- package/dist/PowerSearch/index.d.ts +2 -0
- package/dist/PowerSearch/index.js +2 -0
- package/dist/PowerSearch-CjU8y4mi.js +2386 -0
- package/dist/ProgressBar/index.d.ts +1 -1
- package/dist/ProgressBar/index.js +1 -1
- package/dist/{ProgressBar-ChDp-7oe.js → ProgressBar-DO9Chic6.js} +31 -11
- package/dist/Radio/index.d.ts +1 -1
- package/dist/RadioList/index.d.ts +1 -1
- package/dist/Resizable/index.d.ts +1 -1
- package/dist/Resizable/index.js +1 -1
- package/dist/{Resizable-BhSMfO5B.js → Resizable-D-TBCg0Y.js} +1 -1
- package/dist/ScrollableArea/index.d.ts +1 -1
- package/dist/SelectableCard/index.d.ts +1 -1
- package/dist/Selector/index.d.ts +2 -2
- package/dist/Selector/index.js +1 -1
- package/dist/Selector-DE2IEFML.js +468 -0
- package/dist/SideNav/index.d.ts +1 -1
- package/dist/SideNav/index.js +1 -1
- package/dist/{SideNav-B-Om6Bz3.js → SideNav-DonEfiAx.js} +17 -17
- package/dist/Stepper/index.js +1 -1
- package/dist/{Stepper-BZ_8SEZt.js → Stepper-D2ZIcUNx.js} +1 -1
- package/dist/Switch/index.d.ts +1 -1
- package/dist/TabList/index.d.ts +1 -1
- package/dist/TabList/index.js +1 -1
- package/dist/{TabList-Cnc2Hs1H.js → TabList-D3F-stq-.js} +10 -3
- package/dist/Table/index.d.ts +3 -3
- package/dist/Table/index.js +2 -2
- package/dist/Table-CrP2Uffq.js +1982 -0
- package/dist/TextArea/index.d.ts +1 -1
- package/dist/TextArea/index.js +1 -1
- package/dist/{TextArea-Cv9UVbzS.js → TextArea-CPwSytdO.js} +12 -6
- package/dist/TextInput/index.d.ts +1 -1
- package/dist/Thumbnail/index.js +1 -1
- package/dist/{Thumbnail-Dc1UpykG.js → Thumbnail-BC5JGPGZ.js} +11 -11
- package/dist/{TimeField-C7t9Knq9.js → TimeField-DpHFrNv0.js} +2 -2
- package/dist/TimeInput/index.d.ts +1 -1
- package/dist/TimeInput/index.js +1 -1
- package/dist/{TimeInput-BXxCOY98.js → TimeInput-DJLV0_4z.js} +1 -1
- package/dist/Timestamp/index.d.ts +1 -1
- package/dist/Timestamp/index.js +2 -1
- package/dist/{Timestamp-DlZSmgCJ.js → Timestamp-GKNjjt5g.js} +4 -121
- package/dist/Toast/index.d.ts +2 -2
- package/dist/Toast/index.js +1 -1
- package/dist/{Toast-BKXPvEMp.js → Toast-C2ML-bmi.js} +37 -7
- package/dist/ToggleButton/index.d.ts +1 -1
- package/dist/Token/index.js +1 -1
- package/dist/{Token-wt4e80IM.js → Token-Chu_eCVs.js} +1 -1
- package/dist/Tokenizer/index.js +1 -1
- package/dist/{Tokenizer-nmTqdS9n.js → Tokenizer-DRDpvQ_l.js} +3 -3
- package/dist/Toolbar/index.d.ts +1 -1
- package/dist/TopNav/index.d.ts +1 -1
- package/dist/TopNav/index.js +1 -1
- package/dist/{TopNav-notp-mJx.js → TopNav-CEyWddtA.js} +3 -3
- package/dist/TreeList/index.js +1 -1
- package/dist/{TreeList-s1xBQ0qq.js → TreeList-COS8US8e.js} +3 -3
- package/dist/Typeahead/index.js +1 -1
- package/dist/{Typeahead-VAuiCurV.js → Typeahead-P7cCqtaQ.js} +3 -3
- package/dist/{useTypeaheadMenu-Ba7XpcZl.js → TypeaheadMenu-CGvo0Tud.js} +107 -107
- package/dist/composables/index.d.ts +3 -3
- package/dist/{context-Dbo22sck.js → context-CiKncNSH.js} +184 -6
- package/dist/formatInstant-BDWUIxS7.js +119 -0
- package/dist/{index-SMh42NI8.d.ts → index-B1TG2GPS.d.ts} +2 -2
- package/dist/{index-DRmb-oUa.d.ts → index-B9WzWqzk.d.ts} +3 -29
- package/dist/{index-BuubzuE8.d.ts → index-BDZCJ9ri.d.ts} +2 -2
- package/dist/{index-z4p2k9VR.d.ts → index-Bgv4ZmBl.d.ts} +20 -2
- package/dist/{index-BoRIw-bP.d.ts → index-Bt7ewoz2.d.ts} +32 -2
- package/dist/{index-uQrLBZfF.d.ts → index-Bu3oXIIS.d.ts} +24 -0
- package/dist/index-CJlBAXwj.d.ts +100 -0
- package/dist/{index-DT9S92sh.d.ts → index-CNjbOgty.d.ts} +15 -0
- package/dist/{index-DXSs3rwa.d.ts → index-CngORuiq.d.ts} +137 -2
- package/dist/index-Cs5pcwY3.d.ts +416 -0
- package/dist/{index-NzLDrOkk.d.ts → index-D4I_obqR.d.ts} +14 -1
- package/dist/{index-BtPZKO20.d.ts → index-DGXviOlp.d.ts} +49 -7
- package/dist/{index-CTolyeii.d.ts → index-DN7MXPHM.d.ts} +15 -1
- package/dist/{index-C6iJwTL0.d.ts → index-DNRBbwp_.d.ts} +165 -55
- package/dist/{index-C59PdX9L.d.ts → index-DWH_HzXi.d.ts} +1 -1
- package/dist/{index-BfOtLyNH.d.ts → index-D_nYxnNv.d.ts} +1 -1
- package/dist/{index-Bn_odHQ9.d.ts → index-Dg3ZmwEg.d.ts} +12 -1
- package/dist/{index-BiMGXtD-.d.ts → index-DimuSES0.d.ts} +14 -1
- package/dist/{index-DEeJowZf.d.ts → index-cGagYM1g.d.ts} +15 -2
- package/dist/{index-Ck8qy6Rf.d.ts → index-c_TaW8mM.d.ts} +24 -2
- package/dist/index-kVhSuA9t.d.ts +902 -0
- package/dist/{index-1uRMrk63.d.ts → index-nCEmW6wa.d.ts} +1 -1
- package/dist/{index-DoFCm2Q2.d.ts → index-qiZtHnGK.d.ts} +26 -0
- package/dist/{index-Bainr_3n.d.ts → index-u5ozu0G7.d.ts} +2 -2
- package/dist/index.d.ts +79 -76
- package/dist/index.js +111 -100
- package/dist/locale/index.d.ts +1 -1
- package/dist/locale/index.js +1 -1
- package/dist/power-search-DrDfcoL1.d.ts +68 -0
- package/dist/registry-B1ObuP--.d.ts +45 -0
- package/dist/registry-C7OZb0PJ.js +135 -0
- package/dist/{types-JktRxujg.d.ts → types-Cp4liug-.d.ts} +66 -3
- package/dist/{index-B8MbfMwV.d.ts → types-DDAAT1Xd.d.ts} +36 -82
- package/dist/types-DIYwbkpe.d.ts +33 -0
- package/dist/{types-DZoEm_DG.d.ts → types-pnljWjEE.d.ts} +23 -6
- package/dist/{useResizable-CeESZS1v.d.ts → useResizable-CUoNPmUw.d.ts} +1 -1
- package/package.json +10 -1
- package/styles/avatar.css +14 -0
- package/styles/badge.css +8 -0
- package/styles/breadcrumbs.css +6 -1
- package/styles/button.css +13 -0
- package/styles/calendar.css +16 -0
- package/styles/card.css +2 -0
- package/styles/chat.css +474 -3
- package/styles/dropdown-menu.css +11 -0
- package/styles/icon.css +58 -8
- package/styles/link.css +5 -0
- package/styles/number-input.css +22 -0
- package/styles/pagination.css +45 -1
- package/styles/power-search.css +303 -0
- package/styles/progress-bar.css +4 -0
- package/styles/selector.css +58 -0
- package/styles/tab-list.css +15 -0
- package/styles/table.css +304 -1
- package/styles/text-area.css +17 -0
- package/styles/text-input.css +5 -0
- package/styles/toast.css +7 -0
- package/styles/toolbar.css +11 -0
- package/styles.css +1 -0
- package/dist/Avatar-5s3HSrtN.js +0 -136
- package/dist/Badge-Ba0EwsTj.js +0 -19
- package/dist/Calendar-BG7wEsro.js +0 -277
- package/dist/Chat-DjNxw5gv.js +0 -1051
- package/dist/DateInput-DE2TN1Rq.js +0 -250
- package/dist/Icon-Dfr4k6-S.js +0 -86
- package/dist/Link-CprjOuTI.js +0 -92
- package/dist/NumberInput-CTYiQxHq.js +0 -147
- package/dist/Selector-Da-2BO3q.js +0 -325
- package/dist/Table-D-LhAy_J.js +0 -967
- package/dist/index-DJo-BmXZ.d.ts +0 -431
- package/dist/index-DtjAdYEc.d.ts +0 -68
- package/dist/{CheckboxList-EsIEXjK_.js → CheckboxList-BbCPiend.js} +1 -1
|
@@ -0,0 +1,1982 @@
|
|
|
1
|
+
import { t as _sfc_main$14 } from "./VisuallyHidden-C7NN3VEP.js";
|
|
2
|
+
import { t as _sfc_main$15 } from "./Button-DrqeomlE.js";
|
|
3
|
+
import { a as useAstryxMessages } from "./context-CiKncNSH.js";
|
|
4
|
+
import { t as _sfc_main$16 } from "./Tooltip-mp0NMh_Y.js";
|
|
5
|
+
import { t as _sfc_main$17 } from "./IconButton-BNQuz9W_.js";
|
|
6
|
+
import { t as _sfc_main$18 } from "./Icon-CJKjdJy-.js";
|
|
7
|
+
import { t as _sfc_main$19 } from "./CheckboxInput-CMsEE1_4.js";
|
|
8
|
+
import { t as _sfc_main$20 } from "./Popover-Crhk9PNP.js";
|
|
9
|
+
import { t as _sfc_main$21 } from "./Pagination-Cb66HMEf.js";
|
|
10
|
+
import { t as _sfc_main$22 } from "./Selector-DE2IEFML.js";
|
|
11
|
+
import { t as _sfc_main$23 } from "./TextInput-BasnjVvy.js";
|
|
12
|
+
import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, h, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, ref, renderList, renderSlot, toDisplayString, toValue, unref, watch, withCtx, withModifiers } from "vue";
|
|
13
|
+
import "../styles/table.css";
|
|
14
|
+
function proportional(value = 1, options) {
|
|
15
|
+
return {
|
|
16
|
+
type: "proportional",
|
|
17
|
+
value,
|
|
18
|
+
minWidth: options?.minWidth ?? 120
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
function pixel(value) {
|
|
22
|
+
return {
|
|
23
|
+
type: "pixel",
|
|
24
|
+
value
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
function flexibleMin(width) {
|
|
28
|
+
return width?.minWidth ?? (width == null ? 60 : 120);
|
|
29
|
+
}
|
|
30
|
+
function planColumnSpace(columns) {
|
|
31
|
+
let totalProportion = 0;
|
|
32
|
+
let pixelTotal = 0;
|
|
33
|
+
const flexible = [];
|
|
34
|
+
for (const column of columns) {
|
|
35
|
+
const width = column.width;
|
|
36
|
+
if (width?.type === "pixel") pixelTotal += width.value;
|
|
37
|
+
else {
|
|
38
|
+
const proportion = width?.value ?? 1;
|
|
39
|
+
totalProportion += proportion;
|
|
40
|
+
flexible.push({
|
|
41
|
+
proportion,
|
|
42
|
+
minWidth: flexibleMin(width)
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
let maxProportionalSpace = 0;
|
|
47
|
+
if (totalProportion > 0) for (const column of flexible) {
|
|
48
|
+
const required = column.minWidth * totalProportion / column.proportion;
|
|
49
|
+
if (required > maxProportionalSpace) maxProportionalSpace = required;
|
|
50
|
+
}
|
|
51
|
+
return {
|
|
52
|
+
totalProportion,
|
|
53
|
+
pixelTotal,
|
|
54
|
+
maxProportionalSpace
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* 表格被挤到最小宽度时每一列的像素。固定列的偏移按这个宽度累加。
|
|
59
|
+
*/
|
|
60
|
+
function resolveColumnFloorWidths(columns) {
|
|
61
|
+
const { totalProportion, maxProportionalSpace } = planColumnSpace(columns);
|
|
62
|
+
const widths = /* @__PURE__ */ new Map();
|
|
63
|
+
for (const column of columns) {
|
|
64
|
+
const width = column.width;
|
|
65
|
+
if (width?.type === "pixel") widths.set(column.key, width.value);
|
|
66
|
+
else {
|
|
67
|
+
const proportion = width?.value ?? 1;
|
|
68
|
+
widths.set(column.key, totalProportion > 0 ? maxProportionalSpace * proportion / totalProportion : 0);
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
return widths;
|
|
72
|
+
}
|
|
73
|
+
function resolveColumnWidths(columns) {
|
|
74
|
+
const { totalProportion, pixelTotal, maxProportionalSpace } = planColumnSpace(columns);
|
|
75
|
+
const result = /* @__PURE__ */ new Map();
|
|
76
|
+
for (const column of columns) {
|
|
77
|
+
const width = column.width;
|
|
78
|
+
const style = {};
|
|
79
|
+
if (width?.type === "pixel") {
|
|
80
|
+
style.width = `${width.value}px`;
|
|
81
|
+
style.minWidth = `${width.value}px`;
|
|
82
|
+
} else {
|
|
83
|
+
const proportion = width?.value ?? 1;
|
|
84
|
+
if (totalProportion > 0) style.width = `${proportion / totalProportion * 100}%`;
|
|
85
|
+
style.minWidth = `${flexibleMin(width)}px`;
|
|
86
|
+
}
|
|
87
|
+
result.set(column.key, { style });
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
columns: result,
|
|
91
|
+
tableMinWidth: pixelTotal + maxProportionalSpace
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
function capitalize(value) {
|
|
95
|
+
if (value.length === 0) return value;
|
|
96
|
+
return value.charAt(0).toUpperCase() + value.slice(1);
|
|
97
|
+
}
|
|
98
|
+
function cellText(value) {
|
|
99
|
+
if (value == null) return "";
|
|
100
|
+
if (value instanceof Date) return value.toISOString();
|
|
101
|
+
if (typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint") return String(value);
|
|
102
|
+
return "";
|
|
103
|
+
}
|
|
104
|
+
function paginateData(data, page, pageSize) {
|
|
105
|
+
const size = Number.isFinite(pageSize) ? Math.max(1, Math.floor(pageSize)) : 10;
|
|
106
|
+
const start = ((Number.isFinite(page) ? Math.max(1, Math.floor(page)) : 1) - 1) * size;
|
|
107
|
+
return data.slice(start, start + size);
|
|
108
|
+
}
|
|
109
|
+
function contentLength(value) {
|
|
110
|
+
if (typeof value === "string") return value.length;
|
|
111
|
+
if (typeof value === "number" || typeof value === "boolean") return String(value).length;
|
|
112
|
+
return 0;
|
|
113
|
+
}
|
|
114
|
+
function longestWord(value) {
|
|
115
|
+
if (typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean") return 0;
|
|
116
|
+
return String(value).split(/\s+/).reduce((max, word) => Math.max(max, word.length), 0);
|
|
117
|
+
}
|
|
118
|
+
function generateColumns(data) {
|
|
119
|
+
const first = data[0];
|
|
120
|
+
if (first == null) return [];
|
|
121
|
+
const keys = Object.keys(first);
|
|
122
|
+
const sample = data.slice(0, Math.min(5, data.length));
|
|
123
|
+
return keys.map((key) => {
|
|
124
|
+
const header = capitalize(key);
|
|
125
|
+
let maxContent = header.length;
|
|
126
|
+
let maxWord = header.length;
|
|
127
|
+
for (const row of sample) {
|
|
128
|
+
maxContent = Math.max(maxContent, contentLength(row[key]));
|
|
129
|
+
maxWord = Math.max(maxWord, longestWord(row[key]));
|
|
130
|
+
}
|
|
131
|
+
return {
|
|
132
|
+
key,
|
|
133
|
+
header,
|
|
134
|
+
width: proportional(maxContent <= 6 ? 1 : maxContent <= 15 ? 2 : 3, { minWidth: Math.max(Math.max(header.length, maxWord) * 8, 60) })
|
|
135
|
+
};
|
|
136
|
+
});
|
|
137
|
+
}
|
|
138
|
+
function sortRows(rows, sort, columns = []) {
|
|
139
|
+
if (sort.length === 0) return [...rows];
|
|
140
|
+
const comparators = /* @__PURE__ */ new Map();
|
|
141
|
+
for (const column of columns) {
|
|
142
|
+
const sortable = column.sortable;
|
|
143
|
+
const key = sortable == null || sortable === false || sortable === true ? column.key : sortable.sortKey ?? column.key;
|
|
144
|
+
if (typeof sortable === "object" && sortable.compare) comparators.set(key, sortable.compare);
|
|
145
|
+
}
|
|
146
|
+
const copy = [...rows];
|
|
147
|
+
copy.sort((a, b) => {
|
|
148
|
+
for (const entry of sort) {
|
|
149
|
+
const custom = comparators.get(entry.sortKey);
|
|
150
|
+
const result = custom ? custom(a, b) : compareValues(a[entry.sortKey], b[entry.sortKey]);
|
|
151
|
+
if (result !== 0) return entry.direction === "ascending" ? result : -result;
|
|
152
|
+
}
|
|
153
|
+
return 0;
|
|
154
|
+
});
|
|
155
|
+
return copy;
|
|
156
|
+
}
|
|
157
|
+
function compareValues(a, b) {
|
|
158
|
+
if (a == null && b == null) return 0;
|
|
159
|
+
if (a == null) return 1;
|
|
160
|
+
if (b == null) return -1;
|
|
161
|
+
if (typeof a === "number" && typeof b === "number") return a - b;
|
|
162
|
+
return String(a).localeCompare(String(b));
|
|
163
|
+
}
|
|
164
|
+
//#endregion
|
|
165
|
+
//#region src/Table/plugins/columnResize.ts
|
|
166
|
+
function useTableColumnResize(config) {
|
|
167
|
+
return {
|
|
168
|
+
widthFor(column) {
|
|
169
|
+
return toValue(config).columnWidths[column.key];
|
|
170
|
+
},
|
|
171
|
+
onColumnResizeEnd(key, width) {
|
|
172
|
+
toValue(config).onColumnResizeEnd({ [key]: Math.max(60, Math.round(width)) });
|
|
173
|
+
}
|
|
174
|
+
};
|
|
175
|
+
}
|
|
176
|
+
//#endregion
|
|
177
|
+
//#region src/Table/plugins/columnSettings.ts
|
|
178
|
+
function useTableColumnSettingsState(config) {
|
|
179
|
+
function setActiveColumnKeys(keys) {
|
|
180
|
+
const locked = config.columns.filter((column) => column.isAlwaysVisible).map((column) => column.key);
|
|
181
|
+
const next = [...keys];
|
|
182
|
+
for (const key of locked) if (!next.includes(key)) next.unshift(key);
|
|
183
|
+
config.onChangeActiveColumnKeys(next);
|
|
184
|
+
}
|
|
185
|
+
return {
|
|
186
|
+
get activeColumnKeys() {
|
|
187
|
+
return toValue(config.activeColumnKeys);
|
|
188
|
+
},
|
|
189
|
+
setActiveColumnKeys,
|
|
190
|
+
columnSettingsConfig: {
|
|
191
|
+
columns: config.columns,
|
|
192
|
+
get activeColumnKeys() {
|
|
193
|
+
return toValue(config.activeColumnKeys);
|
|
194
|
+
},
|
|
195
|
+
onChangeActiveColumnKeys: setActiveColumnKeys
|
|
196
|
+
}
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
function useTableColumnSettings(config) {
|
|
200
|
+
return { transformColumns(columns) {
|
|
201
|
+
const current = toValue(config);
|
|
202
|
+
const order = new Map(current.activeColumnKeys.map((key, index) => [key, index]));
|
|
203
|
+
return columns.filter((column) => order.has(column.key)).sort((a, b) => (order.get(a.key) ?? 0) - (order.get(b.key) ?? 0));
|
|
204
|
+
} };
|
|
205
|
+
}
|
|
206
|
+
//#endregion
|
|
207
|
+
//#region src/Table/plugins/filtering.ts
|
|
208
|
+
function useTableFilterState(initial = {}) {
|
|
209
|
+
const filters = ref({ ...initial });
|
|
210
|
+
function onFilterChange(key, value) {
|
|
211
|
+
const next = { ...filters.value };
|
|
212
|
+
if (value == null || value === "" || Array.isArray(value) && value.length === 0) delete next[key];
|
|
213
|
+
else next[key] = value;
|
|
214
|
+
filters.value = next;
|
|
215
|
+
}
|
|
216
|
+
function clearAll() {
|
|
217
|
+
filters.value = {};
|
|
218
|
+
}
|
|
219
|
+
return {
|
|
220
|
+
filters,
|
|
221
|
+
onFilterChange,
|
|
222
|
+
clearAll
|
|
223
|
+
};
|
|
224
|
+
}
|
|
225
|
+
function applyTableFilters(rows, filters, fields = []) {
|
|
226
|
+
const kinds = new Map(fields.map((field) => [field.key, field.type]));
|
|
227
|
+
const active = Object.entries(filters).filter(([, value]) => value != null && value !== "" && !(Array.isArray(value) && value.length === 0));
|
|
228
|
+
if (active.length === 0) return [...rows];
|
|
229
|
+
return rows.filter((row) => active.every(([key, value]) => {
|
|
230
|
+
const cell = String(row[key] ?? "").toLowerCase();
|
|
231
|
+
if ((kinds.get(key) ?? (Array.isArray(value) ? "enum" : "string")) === "enum") return (Array.isArray(value) ? value : [value]).some((item) => cell === item.toLowerCase());
|
|
232
|
+
return cell.includes(String(value).toLowerCase());
|
|
233
|
+
}));
|
|
234
|
+
}
|
|
235
|
+
function useTableFiltering(config) {
|
|
236
|
+
return { filterFor(column) {
|
|
237
|
+
if (column.filter == null) return null;
|
|
238
|
+
const current = toValue(config);
|
|
239
|
+
const fieldKey = column.filter;
|
|
240
|
+
const field = current.fields.find((item) => item.key === fieldKey);
|
|
241
|
+
if (field == null) return null;
|
|
242
|
+
return {
|
|
243
|
+
variant: current.variant ?? "popover",
|
|
244
|
+
field,
|
|
245
|
+
value: current.filters[fieldKey] ?? null,
|
|
246
|
+
onChange(value) {
|
|
247
|
+
toValue(config).onFilterChange(fieldKey, value);
|
|
248
|
+
}
|
|
249
|
+
};
|
|
250
|
+
} };
|
|
251
|
+
}
|
|
252
|
+
//#endregion
|
|
253
|
+
//#region src/Table/plugins/groupedRows.ts
|
|
254
|
+
const TABLE_GROUP_HEADER = "__astryxGroupHeader";
|
|
255
|
+
const GROUP_MARKER = Symbol("tableGroupHeader");
|
|
256
|
+
function isTableGroupHeader(item) {
|
|
257
|
+
return typeof item === "object" && item != null && item["__astryxGroupHeader"] === true;
|
|
258
|
+
}
|
|
259
|
+
function makeHeader(groupKey, count) {
|
|
260
|
+
const target = {
|
|
261
|
+
id: `__group_${groupKey}`,
|
|
262
|
+
groupKey,
|
|
263
|
+
count,
|
|
264
|
+
[TABLE_GROUP_HEADER]: true,
|
|
265
|
+
[GROUP_MARKER]: true
|
|
266
|
+
};
|
|
267
|
+
return new Proxy(target, { get(source, prop) {
|
|
268
|
+
if (prop === GROUP_MARKER || prop === "__astryxGroupHeader" || prop === "groupKey" || prop === "count" || prop === "id") return source[prop];
|
|
269
|
+
return prop in source ? source[prop] : "";
|
|
270
|
+
} });
|
|
271
|
+
}
|
|
272
|
+
function buildGroupedRows(data, groupBy, collapsedGroups, groupOrder) {
|
|
273
|
+
if (data.length === 0) return [];
|
|
274
|
+
const groups = /* @__PURE__ */ new Map();
|
|
275
|
+
for (const item of data) {
|
|
276
|
+
const key = groupBy(item);
|
|
277
|
+
const bucket = groups.get(key);
|
|
278
|
+
if (bucket) bucket.push(item);
|
|
279
|
+
else groups.set(key, [item]);
|
|
280
|
+
}
|
|
281
|
+
let keys = [...groups.keys()];
|
|
282
|
+
if (groupOrder != null && groupOrder.length > 0) {
|
|
283
|
+
const ordered = groupOrder.filter((key) => groups.has(key));
|
|
284
|
+
const rest = keys.filter((key) => !groupOrder.includes(key));
|
|
285
|
+
keys = [...ordered, ...rest];
|
|
286
|
+
}
|
|
287
|
+
const out = [];
|
|
288
|
+
for (const key of keys) {
|
|
289
|
+
const rows = groups.get(key) ?? [];
|
|
290
|
+
out.push(makeHeader(key, rows.length));
|
|
291
|
+
if (!collapsedGroups.has(key)) out.push(...rows);
|
|
292
|
+
}
|
|
293
|
+
return out;
|
|
294
|
+
}
|
|
295
|
+
function useTableGroupedRows(config) {
|
|
296
|
+
const data = computed(() => {
|
|
297
|
+
const current = toValue(config);
|
|
298
|
+
return buildGroupedRows(current.data, current.groupBy, current.collapsedGroups, current.groupOrder);
|
|
299
|
+
});
|
|
300
|
+
const positions = computed(() => {
|
|
301
|
+
const map = /* @__PURE__ */ new Map();
|
|
302
|
+
data.value.forEach((item, index) => map.set(item, index));
|
|
303
|
+
return map;
|
|
304
|
+
});
|
|
305
|
+
function idKey(item) {
|
|
306
|
+
if (isTableGroupHeader(item)) return `__group_${String(item.groupKey)}`;
|
|
307
|
+
const current = toValue(config);
|
|
308
|
+
if (current.getRowKey) return current.getRowKey(item);
|
|
309
|
+
return String(positions.value.get(item) ?? -1);
|
|
310
|
+
}
|
|
311
|
+
return {
|
|
312
|
+
data,
|
|
313
|
+
plugin: { rowPatch(row) {
|
|
314
|
+
if (!isTableGroupHeader(row)) return null;
|
|
315
|
+
const current = toValue(config);
|
|
316
|
+
const groupKey = String(row.groupKey);
|
|
317
|
+
const count = Number(row.count);
|
|
318
|
+
const collapsed = current.collapsedGroups.has(groupKey);
|
|
319
|
+
const render = current.renderGroupHeader;
|
|
320
|
+
return {
|
|
321
|
+
attrs: { "data-group-header": "" },
|
|
322
|
+
suppressSelection: true,
|
|
323
|
+
skipRowIndex: true,
|
|
324
|
+
onClick: () => current.onToggleGroup(groupKey),
|
|
325
|
+
group: {
|
|
326
|
+
groupKey,
|
|
327
|
+
count,
|
|
328
|
+
collapsed,
|
|
329
|
+
onToggle: () => current.onToggleGroup(groupKey),
|
|
330
|
+
render: render ? () => render(groupKey, count, collapsed) : void 0
|
|
331
|
+
}
|
|
332
|
+
};
|
|
333
|
+
} },
|
|
334
|
+
idKey
|
|
335
|
+
};
|
|
336
|
+
}
|
|
337
|
+
//#endregion
|
|
338
|
+
//#region src/Table/plugins/interaction.ts
|
|
339
|
+
const INTERACTIVE = "button, a, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [role=\"menuitem\"]";
|
|
340
|
+
/**
|
|
341
|
+
* 这一下点在按钮、链接、表单或一段被选中的文字上,就不该再触发行展开。
|
|
342
|
+
*/
|
|
343
|
+
function isInteractiveRowClick(event) {
|
|
344
|
+
const row = event.currentTarget;
|
|
345
|
+
const target = event.target;
|
|
346
|
+
if (!(row instanceof HTMLElement) || !(target instanceof Element)) return true;
|
|
347
|
+
if (target !== row && target.closest(INTERACTIVE) != null) return true;
|
|
348
|
+
if (target !== row && target.closest("[contenteditable]:not([contenteditable=\"false\"])") != null) return true;
|
|
349
|
+
const selection = typeof window === "undefined" ? null : window.getSelection();
|
|
350
|
+
if (selection != null && !selection.isCollapsed && selection.anchorNode != null && row.contains(selection.anchorNode)) return true;
|
|
351
|
+
return false;
|
|
352
|
+
}
|
|
353
|
+
//#endregion
|
|
354
|
+
//#region src/Table/plugins/pagination.ts
|
|
355
|
+
function useTablePagination(config) {
|
|
356
|
+
function controls() {
|
|
357
|
+
const current = toValue(config);
|
|
358
|
+
if ((current.position ?? "below") === "none") return null;
|
|
359
|
+
const pageSize = current.pageSize ?? 10;
|
|
360
|
+
return h("div", {
|
|
361
|
+
"class": "astryx-table__pagination",
|
|
362
|
+
"data-align": current.align ?? "center"
|
|
363
|
+
}, [h(_sfc_main$21, {
|
|
364
|
+
"page": current.page,
|
|
365
|
+
pageSize,
|
|
366
|
+
"total": current.totalItems ?? 0,
|
|
367
|
+
"showSizeChanger": current.pageSizeOptions != null && current.onPageSizeChange != null,
|
|
368
|
+
"pageSizeOptions": current.pageSizeOptions,
|
|
369
|
+
"aria-label": current.label,
|
|
370
|
+
"onUpdate:page": (page) => toValue(config).onPageChange(page),
|
|
371
|
+
"onUpdate:pageSize": (size) => toValue(config).onPageSizeChange?.(size)
|
|
372
|
+
})]);
|
|
373
|
+
}
|
|
374
|
+
return { below() {
|
|
375
|
+
const position = toValue(config).position ?? "below";
|
|
376
|
+
if (position === "above" || position === "none") return null;
|
|
377
|
+
return controls();
|
|
378
|
+
} };
|
|
379
|
+
}
|
|
380
|
+
//#endregion
|
|
381
|
+
//#region src/Table/TableExpansionChevron.vue
|
|
382
|
+
const _hoisted_1$10 = ["aria-expanded", "aria-label"];
|
|
383
|
+
const _sfc_main$13 = /*@__PURE__*/ defineComponent({
|
|
384
|
+
name: "AstryxTableExpansionChevron",
|
|
385
|
+
__name: "TableExpansionChevron",
|
|
386
|
+
props: { expanded: { type: Boolean } },
|
|
387
|
+
emits: ["toggle"],
|
|
388
|
+
setup(__props, { emit: __emit }) {
|
|
389
|
+
const emit = __emit;
|
|
390
|
+
const messages = useAstryxMessages();
|
|
391
|
+
return (_ctx, _cache) => {
|
|
392
|
+
return openBlock(), createElementBlock("button", {
|
|
393
|
+
type: "button",
|
|
394
|
+
class: "astryx-table__expander astryx-table__expander--column",
|
|
395
|
+
"aria-expanded": __props.expanded ? "true" : "false",
|
|
396
|
+
"aria-label": __props.expanded ? unref(messages).table.collapseRow : unref(messages).table.expandRow,
|
|
397
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggle"), ["stop"]))
|
|
398
|
+
}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": __props.expanded }]) }, [createVNode(_sfc_main$18, {
|
|
399
|
+
icon: "chevronRight",
|
|
400
|
+
size: "xsm"
|
|
401
|
+
})], 2)], 8, _hoisted_1$10);
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
});
|
|
405
|
+
//#endregion
|
|
406
|
+
//#region src/Table/plugins/rowExpansion.ts
|
|
407
|
+
const EXPANSION_COLUMN_KEY = "__expansion";
|
|
408
|
+
function useTableRowExpansion(config) {
|
|
409
|
+
const messages = useAstryxMessages();
|
|
410
|
+
return {
|
|
411
|
+
transformColumns(columns) {
|
|
412
|
+
return [{
|
|
413
|
+
key: EXPANSION_COLUMN_KEY,
|
|
414
|
+
header: messages.value.table.rowExpansion,
|
|
415
|
+
headerHidden: true,
|
|
416
|
+
width: pixel(40),
|
|
417
|
+
resizable: false,
|
|
418
|
+
renderCell(item) {
|
|
419
|
+
const current = toValue(config);
|
|
420
|
+
if (!(current.getIsItemExpandable?.(item) ?? true)) return null;
|
|
421
|
+
const key = current.getRowKey(item);
|
|
422
|
+
return h(_sfc_main$13, {
|
|
423
|
+
expanded: current.expandedKeys.has(key),
|
|
424
|
+
onToggle: () => current.onToggle(key)
|
|
425
|
+
});
|
|
426
|
+
}
|
|
427
|
+
}, ...columns];
|
|
428
|
+
},
|
|
429
|
+
rowPatch(row) {
|
|
430
|
+
const current = toValue(config);
|
|
431
|
+
if (!(current.getIsItemExpandable?.(row) ?? true)) return null;
|
|
432
|
+
const key = current.getRowKey(row);
|
|
433
|
+
const expanded = current.expandedKeys.has(key);
|
|
434
|
+
const variant = current.panelVariant ?? "transparent";
|
|
435
|
+
return {
|
|
436
|
+
attrs: expanded ? { "data-expanded": "" } : void 0,
|
|
437
|
+
class: current.hasRowClickExpansion ? "astryx-table__clickable" : void 0,
|
|
438
|
+
onClick: current.hasRowClickExpansion ? (event) => {
|
|
439
|
+
if (!isInteractiveRowClick(event)) current.onToggle(key);
|
|
440
|
+
} : void 0,
|
|
441
|
+
menu: [{
|
|
442
|
+
id: "row-expansion-toggle",
|
|
443
|
+
label: expanded ? messages.value.table.collapseRow : messages.value.table.expandRow,
|
|
444
|
+
icon: expanded ? "chevronDown" : "chevronRight",
|
|
445
|
+
onSelect: () => current.onToggle(key)
|
|
446
|
+
}],
|
|
447
|
+
panel: expanded ? {
|
|
448
|
+
variant,
|
|
449
|
+
render: () => current.renderExpanded(row)
|
|
450
|
+
} : void 0
|
|
451
|
+
};
|
|
452
|
+
},
|
|
453
|
+
cellPatch({ column, row, kind }) {
|
|
454
|
+
if (kind !== "body" || row == null || column.key !== "__expansion") return column.key === "__expansion" ? { class: "astryx-table__expansion" } : null;
|
|
455
|
+
return { class: "astryx-table__expansion" };
|
|
456
|
+
}
|
|
457
|
+
};
|
|
458
|
+
}
|
|
459
|
+
//#endregion
|
|
460
|
+
//#region src/Table/plugins/rowIndex.ts
|
|
461
|
+
const ROW_INDEX_COLUMN_KEY = "__rowIndex";
|
|
462
|
+
function useTableRowIndex(config) {
|
|
463
|
+
return { transformColumns(columns) {
|
|
464
|
+
return [{
|
|
465
|
+
key: ROW_INDEX_COLUMN_KEY,
|
|
466
|
+
header: toValue(config).label ?? "#",
|
|
467
|
+
width: pixel(48),
|
|
468
|
+
align: "end",
|
|
469
|
+
resizable: false,
|
|
470
|
+
renderCell(item) {
|
|
471
|
+
const live = toValue(config);
|
|
472
|
+
if (isTableGroupHeader(item)) return null;
|
|
473
|
+
const start = live.startFrom ?? 1;
|
|
474
|
+
let seen = 0;
|
|
475
|
+
for (const row of live.data) {
|
|
476
|
+
if (isTableGroupHeader(row)) continue;
|
|
477
|
+
if (live.getRowKey ? live.getRowKey(row) === live.getRowKey(item) : row === item) return h("span", { class: "astryx-table__row-index" }, String(start + seen));
|
|
478
|
+
seen += 1;
|
|
479
|
+
}
|
|
480
|
+
return null;
|
|
481
|
+
}
|
|
482
|
+
}, ...columns];
|
|
483
|
+
} };
|
|
484
|
+
}
|
|
485
|
+
//#endregion
|
|
486
|
+
//#region src/Table/plugins/rowStatus.ts
|
|
487
|
+
const NAMED_DOT = {
|
|
488
|
+
accent: "var(--astryx-color-icon-accent)",
|
|
489
|
+
success: "var(--astryx-color-icon-green)",
|
|
490
|
+
error: "var(--astryx-color-icon-red)",
|
|
491
|
+
warning: "var(--astryx-color-icon-orange)",
|
|
492
|
+
red: "var(--astryx-color-icon-red)",
|
|
493
|
+
orange: "var(--astryx-color-icon-orange)",
|
|
494
|
+
green: "var(--astryx-color-icon-green)",
|
|
495
|
+
yellow: "var(--astryx-color-icon-yellow)",
|
|
496
|
+
blue: "var(--astryx-color-icon-blue)",
|
|
497
|
+
gray: "var(--astryx-color-icon-gray)"
|
|
498
|
+
};
|
|
499
|
+
const NAMED_ICON_COLOR = {
|
|
500
|
+
accent: "accent",
|
|
501
|
+
success: "success",
|
|
502
|
+
error: "error",
|
|
503
|
+
warning: "warning",
|
|
504
|
+
red: "red",
|
|
505
|
+
orange: "warning",
|
|
506
|
+
green: "green",
|
|
507
|
+
yellow: "warning",
|
|
508
|
+
blue: "blue",
|
|
509
|
+
gray: "gray"
|
|
510
|
+
};
|
|
511
|
+
const SEMANTIC_ICON = {
|
|
512
|
+
success: "check",
|
|
513
|
+
warning: "warning",
|
|
514
|
+
error: "error"
|
|
515
|
+
};
|
|
516
|
+
function statusMark(status) {
|
|
517
|
+
if (status.status != null) return h(_sfc_main$18, {
|
|
518
|
+
icon: SEMANTIC_ICON[status.status],
|
|
519
|
+
size: "xsm",
|
|
520
|
+
color: status.status
|
|
521
|
+
});
|
|
522
|
+
if (status.icon) {
|
|
523
|
+
const named = NAMED_ICON_COLOR[status.color];
|
|
524
|
+
return status.icon.includes(":") ? h(_sfc_main$18, {
|
|
525
|
+
name: status.icon,
|
|
526
|
+
size: "xsm",
|
|
527
|
+
color: named ?? "inherit"
|
|
528
|
+
}) : h(_sfc_main$18, {
|
|
529
|
+
icon: status.icon,
|
|
530
|
+
size: "xsm",
|
|
531
|
+
color: named ?? "inherit"
|
|
532
|
+
});
|
|
533
|
+
}
|
|
534
|
+
const color = NAMED_DOT[status.color] ?? status.color;
|
|
535
|
+
return h("span", {
|
|
536
|
+
class: "astryx-table__status-dot",
|
|
537
|
+
style: { backgroundColor: color }
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
function useTableRowStatus(config) {
|
|
541
|
+
const messages = useAstryxMessages();
|
|
542
|
+
return { transformColumns(columns) {
|
|
543
|
+
return [{
|
|
544
|
+
key: "__rowStatus",
|
|
545
|
+
header: messages.value.table.rowStatus,
|
|
546
|
+
headerHidden: true,
|
|
547
|
+
width: pixel(28),
|
|
548
|
+
resizable: false,
|
|
549
|
+
renderCell(item) {
|
|
550
|
+
const status = toValue(config).getStatus(item);
|
|
551
|
+
if (status == null) return null;
|
|
552
|
+
const customColor = status.status == null && status.icon != null && NAMED_ICON_COLOR[status.color] == null ? status.color : void 0;
|
|
553
|
+
return h(_sfc_main$16, { content: status.label }, { default: () => h("span", {
|
|
554
|
+
"class": "astryx-table__status",
|
|
555
|
+
"role": "img",
|
|
556
|
+
"aria-label": status.label,
|
|
557
|
+
"style": customColor ? { color: customColor } : void 0
|
|
558
|
+
}, [statusMark(status)]) });
|
|
559
|
+
}
|
|
560
|
+
}, ...columns];
|
|
561
|
+
} };
|
|
562
|
+
}
|
|
563
|
+
//#endregion
|
|
564
|
+
//#region src/Table/plugins/selection.ts
|
|
565
|
+
function rowId(row, idKey) {
|
|
566
|
+
return String(row[idKey] ?? "");
|
|
567
|
+
}
|
|
568
|
+
function useTableSelectionState(config) {
|
|
569
|
+
const selectable = computed(() => toValue(config.data));
|
|
570
|
+
return { selectionConfig: {
|
|
571
|
+
getIsItemSelected: (item) => toValue(config.selectedKeys).has(rowId(item, config.idKey)),
|
|
572
|
+
onSelectItem: ({ item, isSelected }) => {
|
|
573
|
+
const next = new Set(toValue(config.selectedKeys));
|
|
574
|
+
const id = rowId(item, config.idKey);
|
|
575
|
+
if (isSelected) next.add(id);
|
|
576
|
+
else next.delete(id);
|
|
577
|
+
config.setSelectedKeys(next);
|
|
578
|
+
},
|
|
579
|
+
onSelectAll: ({ isAllSelected }) => {
|
|
580
|
+
config.setSelectedKeys(isAllSelected ? new Set(toValue(config.data).map((item) => rowId(item, config.idKey))) : /* @__PURE__ */ new Set());
|
|
581
|
+
},
|
|
582
|
+
getIsAllSelected: () => {
|
|
583
|
+
const rows = toValue(config.data);
|
|
584
|
+
const selected = toValue(config.selectedKeys);
|
|
585
|
+
return rows.length > 0 && rows.every((item) => selected.has(rowId(item, config.idKey)));
|
|
586
|
+
},
|
|
587
|
+
getIsIndeterminate: () => {
|
|
588
|
+
const rows = toValue(config.data);
|
|
589
|
+
const selected = toValue(config.selectedKeys);
|
|
590
|
+
const count = rows.filter((item) => selected.has(rowId(item, config.idKey))).length;
|
|
591
|
+
return count > 0 && count < rows.length;
|
|
592
|
+
},
|
|
593
|
+
getRowLabel: config.getRowLabel,
|
|
594
|
+
hasRowHighlight: config.hasRowHighlight,
|
|
595
|
+
get rows() {
|
|
596
|
+
return selectable.value;
|
|
597
|
+
}
|
|
598
|
+
} };
|
|
599
|
+
}
|
|
600
|
+
function useTableSelection(config) {
|
|
601
|
+
return { selection: {
|
|
602
|
+
isAllSelected: () => toValue(config).getIsAllSelected(),
|
|
603
|
+
isIndeterminate: () => toValue(config).getIsIndeterminate?.() ?? false,
|
|
604
|
+
isSelected: (row) => toValue(config).getIsItemSelected(row),
|
|
605
|
+
isSelectable: (row) => toValue(config).getIsItemSelectable?.(row) ?? true,
|
|
606
|
+
selectAll: (selected) => toValue(config).onSelectAll({ isAllSelected: selected }),
|
|
607
|
+
selectRow: (row, selected) => toValue(config).onSelectItem({
|
|
608
|
+
item: row,
|
|
609
|
+
isSelected: selected
|
|
610
|
+
}),
|
|
611
|
+
rowLabel: (row) => toValue(config).getRowLabel?.(row) ?? "",
|
|
612
|
+
hasRowHighlight: toValue(config).hasRowHighlight
|
|
613
|
+
} };
|
|
614
|
+
}
|
|
615
|
+
//#endregion
|
|
616
|
+
//#region src/Table/plugins/sortable.ts
|
|
617
|
+
function useTableSortableState(options) {
|
|
618
|
+
const sort = ref(options.defaultSort ?? []);
|
|
619
|
+
return {
|
|
620
|
+
sortedData: computed(() => sortRows(toValue(options.data), sort.value, toValue(options.columns) ?? [])),
|
|
621
|
+
sort,
|
|
622
|
+
sortConfig: {
|
|
623
|
+
get sort() {
|
|
624
|
+
return sort.value;
|
|
625
|
+
},
|
|
626
|
+
onSortChange(next) {
|
|
627
|
+
sort.value = next;
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
};
|
|
631
|
+
}
|
|
632
|
+
function sortKeyOf(column) {
|
|
633
|
+
if (!column.sortable) return null;
|
|
634
|
+
if (column.sortable === true) return column.key;
|
|
635
|
+
return column.sortable.sortKey ?? column.key;
|
|
636
|
+
}
|
|
637
|
+
function headerLabel(column) {
|
|
638
|
+
return column.header ?? column.key;
|
|
639
|
+
}
|
|
640
|
+
function nextDirection(current, allowUnsorted) {
|
|
641
|
+
if (current == null) return "ascending";
|
|
642
|
+
if (current === "ascending") return "descending";
|
|
643
|
+
return allowUnsorted ? null : "ascending";
|
|
644
|
+
}
|
|
645
|
+
function useTableSortable(config) {
|
|
646
|
+
const messages = useAstryxMessages();
|
|
647
|
+
return { sortFor(column) {
|
|
648
|
+
const key = sortKeyOf(column);
|
|
649
|
+
if (key == null) return null;
|
|
650
|
+
const current = toValue(config);
|
|
651
|
+
const index = current.sort.findIndex((entry) => entry.sortKey === key);
|
|
652
|
+
const direction = index >= 0 ? current.sort[index].direction : null;
|
|
653
|
+
const rank = current.sort.length > 1 && index >= 0 ? index + 1 : null;
|
|
654
|
+
const label = headerLabel(column);
|
|
655
|
+
const action = direction == null ? messages.value.table.sortAscending : direction === "ascending" ? messages.value.table.sortDescending : messages.value.table.clearSort;
|
|
656
|
+
return {
|
|
657
|
+
direction,
|
|
658
|
+
rank,
|
|
659
|
+
label: `${messages.value.table.sortBy(label)}. ${action}`,
|
|
660
|
+
onClick(event) {
|
|
661
|
+
const latest = toValue(config);
|
|
662
|
+
const allowUnsorted = latest.allowUnsortedState ?? true;
|
|
663
|
+
const multi = (latest.isMultiSortEnabled ?? false) && event.shiftKey;
|
|
664
|
+
const existing = latest.sort.findIndex((entry) => entry.sortKey === key);
|
|
665
|
+
const direction = nextDirection(existing >= 0 ? latest.sort[existing].direction : null, allowUnsorted);
|
|
666
|
+
if (!multi) {
|
|
667
|
+
latest.onSortChange(direction == null ? [] : [{
|
|
668
|
+
sortKey: key,
|
|
669
|
+
direction
|
|
670
|
+
}]);
|
|
671
|
+
return;
|
|
672
|
+
}
|
|
673
|
+
const next = latest.sort.filter((entry) => entry.sortKey !== key);
|
|
674
|
+
if (direction != null) next.push({
|
|
675
|
+
sortKey: key,
|
|
676
|
+
direction
|
|
677
|
+
});
|
|
678
|
+
latest.onSortChange(next);
|
|
679
|
+
}
|
|
680
|
+
};
|
|
681
|
+
} };
|
|
682
|
+
}
|
|
683
|
+
//#endregion
|
|
684
|
+
//#region src/Table/plugins/stickyColumns.ts
|
|
685
|
+
const SELECT_COLUMN_KEY = "__select";
|
|
686
|
+
function stickyOffsets(columns, keys, edge) {
|
|
687
|
+
if (columns.length === 0 || keys.length === 0) return null;
|
|
688
|
+
const widths = resolveColumnFloorWidths(columns);
|
|
689
|
+
const offsets = /* @__PURE__ */ new Map();
|
|
690
|
+
if (edge === "start") {
|
|
691
|
+
let last = -1;
|
|
692
|
+
columns.forEach((column, index) => {
|
|
693
|
+
if (keys.includes(column.key)) last = index;
|
|
694
|
+
});
|
|
695
|
+
if (last === -1) return null;
|
|
696
|
+
let cumulative = 0;
|
|
697
|
+
for (let index = 0; index <= last; index += 1) {
|
|
698
|
+
const column = columns[index];
|
|
699
|
+
if (column == null) continue;
|
|
700
|
+
offsets.set(column.key, cumulative);
|
|
701
|
+
cumulative += widths.get(column.key) ?? 0;
|
|
702
|
+
}
|
|
703
|
+
return offsets;
|
|
704
|
+
}
|
|
705
|
+
let first = -1;
|
|
706
|
+
for (let index = 0; index < columns.length; index += 1) {
|
|
707
|
+
const column = columns[index];
|
|
708
|
+
if (column != null && keys.includes(column.key)) {
|
|
709
|
+
first = index;
|
|
710
|
+
break;
|
|
711
|
+
}
|
|
712
|
+
}
|
|
713
|
+
if (first === -1) return null;
|
|
714
|
+
let cumulative = 0;
|
|
715
|
+
for (let index = columns.length - 1; index >= first; index -= 1) {
|
|
716
|
+
const column = columns[index];
|
|
717
|
+
if (column == null) continue;
|
|
718
|
+
offsets.set(column.key, cumulative);
|
|
719
|
+
cumulative += widths.get(column.key) ?? 0;
|
|
720
|
+
}
|
|
721
|
+
return offsets;
|
|
722
|
+
}
|
|
723
|
+
function resolveStickySide(columns, columnKey, startKeys, endKeys) {
|
|
724
|
+
const start = stickyOffsets(columns, startKeys, "start");
|
|
725
|
+
if (start?.has(columnKey)) return {
|
|
726
|
+
edge: "start",
|
|
727
|
+
offset: start.get(columnKey) ?? 0
|
|
728
|
+
};
|
|
729
|
+
const end = stickyOffsets(columns, endKeys, "end");
|
|
730
|
+
if (end?.has(columnKey)) return {
|
|
731
|
+
edge: "end",
|
|
732
|
+
offset: end.get(columnKey) ?? 0
|
|
733
|
+
};
|
|
734
|
+
return null;
|
|
735
|
+
}
|
|
736
|
+
function patchFor(side, kind) {
|
|
737
|
+
const style = side.edge === "start" ? {
|
|
738
|
+
position: "sticky",
|
|
739
|
+
insetInlineStart: `${side.offset}px`,
|
|
740
|
+
zIndex: kind === "header" ? 3 : 1
|
|
741
|
+
} : {
|
|
742
|
+
position: "sticky",
|
|
743
|
+
insetInlineEnd: `${side.offset}px`,
|
|
744
|
+
zIndex: kind === "header" ? 3 : 1
|
|
745
|
+
};
|
|
746
|
+
return {
|
|
747
|
+
class: `astryx-table__sticky astryx-table__sticky--${side.edge}`,
|
|
748
|
+
style
|
|
749
|
+
};
|
|
750
|
+
}
|
|
751
|
+
function useTableStickyColumns(config) {
|
|
752
|
+
let detach = null;
|
|
753
|
+
function bindScrollRoot(element) {
|
|
754
|
+
detach?.();
|
|
755
|
+
detach = null;
|
|
756
|
+
if (element == null) return;
|
|
757
|
+
const update = () => {
|
|
758
|
+
const current = toValue(config);
|
|
759
|
+
const maxScroll = element.scrollWidth - element.clientWidth;
|
|
760
|
+
const hasOverflow = maxScroll > 1;
|
|
761
|
+
const position = Math.abs(element.scrollLeft);
|
|
762
|
+
if ((current.startKeys?.length ?? 0) > 0) element.style.setProperty("--table-sticky-shadow-start", hasOverflow && position > 1 ? "1" : "0");
|
|
763
|
+
if ((current.endKeys?.length ?? 0) > 0) element.style.setProperty("--table-sticky-shadow-end", hasOverflow && position < maxScroll - 1 ? "1" : "0");
|
|
764
|
+
};
|
|
765
|
+
element.addEventListener("scroll", update, { passive: true });
|
|
766
|
+
const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
|
|
767
|
+
observer?.observe(element);
|
|
768
|
+
update();
|
|
769
|
+
detach = () => {
|
|
770
|
+
element.removeEventListener("scroll", update);
|
|
771
|
+
observer?.disconnect();
|
|
772
|
+
};
|
|
773
|
+
}
|
|
774
|
+
onScopeDispose(() => {
|
|
775
|
+
detach?.();
|
|
776
|
+
detach = null;
|
|
777
|
+
});
|
|
778
|
+
return {
|
|
779
|
+
bindScrollRoot,
|
|
780
|
+
cellPatch({ column, columns, kind }) {
|
|
781
|
+
const current = toValue(config);
|
|
782
|
+
const start = current.startKeys ?? [];
|
|
783
|
+
const end = current.endKeys ?? [];
|
|
784
|
+
if (start.length === 0 && end.length === 0) return null;
|
|
785
|
+
const side = resolveStickySide(columns, column.key, start, end);
|
|
786
|
+
return side == null ? null : patchFor(side, kind);
|
|
787
|
+
}
|
|
788
|
+
};
|
|
789
|
+
}
|
|
790
|
+
function selectColumn() {
|
|
791
|
+
return {
|
|
792
|
+
key: SELECT_COLUMN_KEY,
|
|
793
|
+
width: pixel(48),
|
|
794
|
+
headerHidden: true,
|
|
795
|
+
resizable: false
|
|
796
|
+
};
|
|
797
|
+
}
|
|
798
|
+
//#endregion
|
|
799
|
+
//#region src/Table/TableTreeCell.vue
|
|
800
|
+
const _hoisted_1$9 = ["aria-expanded", "aria-label"];
|
|
801
|
+
const _hoisted_2$4 = {
|
|
802
|
+
key: 1,
|
|
803
|
+
class: "astryx-table__tree-spacer"
|
|
804
|
+
};
|
|
805
|
+
const _hoisted_3$3 = { class: "astryx-table__tree-label" };
|
|
806
|
+
const _sfc_main$12 = /*@__PURE__*/ defineComponent({
|
|
807
|
+
name: "AstryxTableTreeCell",
|
|
808
|
+
__name: "TableTreeCell",
|
|
809
|
+
props: {
|
|
810
|
+
level: {},
|
|
811
|
+
hasChildren: { type: Boolean },
|
|
812
|
+
expanded: { type: Boolean },
|
|
813
|
+
indent: { default: "md" }
|
|
814
|
+
},
|
|
815
|
+
emits: ["toggle"],
|
|
816
|
+
setup(__props, { emit: __emit }) {
|
|
817
|
+
const props = __props;
|
|
818
|
+
const emit = __emit;
|
|
819
|
+
const messages = useAstryxMessages();
|
|
820
|
+
const step = computed(() => {
|
|
821
|
+
if (props.indent === "sm") return "var(--astryx-spacing-3, 12px)";
|
|
822
|
+
if (props.indent === "lg") return "var(--astryx-spacing-6, 24px)";
|
|
823
|
+
return "var(--astryx-spacing-4, 16px)";
|
|
824
|
+
});
|
|
825
|
+
const treeStyle = computed(() => ({
|
|
826
|
+
"--astryx-table-tree-level": String(props.level),
|
|
827
|
+
"--astryx-table-tree-step": step.value
|
|
828
|
+
}));
|
|
829
|
+
return (_ctx, _cache) => {
|
|
830
|
+
return openBlock(), createElementBlock("div", {
|
|
831
|
+
class: "astryx-table__tree",
|
|
832
|
+
style: normalizeStyle(treeStyle.value)
|
|
833
|
+
}, [__props.hasChildren ? (openBlock(), createElementBlock("button", {
|
|
834
|
+
key: 0,
|
|
835
|
+
type: "button",
|
|
836
|
+
class: "astryx-table__expander",
|
|
837
|
+
"aria-expanded": __props.expanded ? "true" : "false",
|
|
838
|
+
"aria-label": __props.expanded ? unref(messages).table.collapseRow : unref(messages).table.expandRow,
|
|
839
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggle"), ["stop"]))
|
|
840
|
+
}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": __props.expanded }]) }, [createVNode(_sfc_main$18, {
|
|
841
|
+
icon: "chevronRight",
|
|
842
|
+
size: "xsm"
|
|
843
|
+
})], 2)], 8, _hoisted_1$9)) : (openBlock(), createElementBlock("span", _hoisted_2$4)), createElementVNode("span", _hoisted_3$3, [renderSlot(_ctx.$slots, "default")])], 4);
|
|
844
|
+
};
|
|
845
|
+
}
|
|
846
|
+
});
|
|
847
|
+
//#endregion
|
|
848
|
+
//#region src/Table/plugins/tree.ts
|
|
849
|
+
function itemId(item, idKey) {
|
|
850
|
+
return typeof idKey === "function" ? String(idKey(item)) : String(item[idKey]);
|
|
851
|
+
}
|
|
852
|
+
function childRows(item, childrenKey) {
|
|
853
|
+
const children = item[childrenKey];
|
|
854
|
+
return Array.isArray(children) ? children : [];
|
|
855
|
+
}
|
|
856
|
+
function flattenTree(config, expandedIds) {
|
|
857
|
+
const childrenKey = config.childrenKey ?? "children";
|
|
858
|
+
const rows = [];
|
|
859
|
+
const meta = /* @__PURE__ */ new Map();
|
|
860
|
+
const expandableIds = [];
|
|
861
|
+
const expandablePath = /* @__PURE__ */ new Set();
|
|
862
|
+
const walkAll = (items) => {
|
|
863
|
+
for (const item of items) {
|
|
864
|
+
const id = itemId(item, config.idKey);
|
|
865
|
+
if (expandablePath.has(id)) continue;
|
|
866
|
+
if (config.isItemExpandable ? config.isItemExpandable(item) : childRows(item, childrenKey).length > 0) expandableIds.push(id);
|
|
867
|
+
expandablePath.add(id);
|
|
868
|
+
walkAll(childRows(item, childrenKey));
|
|
869
|
+
expandablePath.delete(id);
|
|
870
|
+
}
|
|
871
|
+
};
|
|
872
|
+
walkAll(config.data);
|
|
873
|
+
const path = /* @__PURE__ */ new Set();
|
|
874
|
+
const walk = (items, level) => {
|
|
875
|
+
const siblings = config.sortSiblings ? config.sortSiblings([...items]) : items;
|
|
876
|
+
for (const item of siblings) {
|
|
877
|
+
const id = itemId(item, config.idKey);
|
|
878
|
+
if (path.has(id)) continue;
|
|
879
|
+
const hasChildren = config.isItemExpandable ? config.isItemExpandable(item) : childRows(item, childrenKey).length > 0;
|
|
880
|
+
const isExpanded = hasChildren && expandedIds.has(id);
|
|
881
|
+
rows.push(item);
|
|
882
|
+
meta.set(id, {
|
|
883
|
+
id,
|
|
884
|
+
level,
|
|
885
|
+
hasChildren,
|
|
886
|
+
isExpanded
|
|
887
|
+
});
|
|
888
|
+
if (isExpanded) {
|
|
889
|
+
path.add(id);
|
|
890
|
+
walk(childRows(item, childrenKey), level + 1);
|
|
891
|
+
path.delete(id);
|
|
892
|
+
}
|
|
893
|
+
}
|
|
894
|
+
};
|
|
895
|
+
walk(config.data, 0);
|
|
896
|
+
return {
|
|
897
|
+
rows,
|
|
898
|
+
meta,
|
|
899
|
+
expandableIds
|
|
900
|
+
};
|
|
901
|
+
}
|
|
902
|
+
function expansionState(expandableIds, expandedIds) {
|
|
903
|
+
if (expandableIds.length === 0) return false;
|
|
904
|
+
const expandedCount = expandableIds.filter((id) => expandedIds.has(id)).length;
|
|
905
|
+
if (expandedCount === 0) return false;
|
|
906
|
+
if (expandedCount === expandableIds.length) return true;
|
|
907
|
+
return "indeterminate";
|
|
908
|
+
}
|
|
909
|
+
function treeColumnKey(columns, preferred) {
|
|
910
|
+
if (preferred != null && columns.some((column) => column.key === preferred)) return preferred;
|
|
911
|
+
return columns.find((column) => !column.key.startsWith("__"))?.key ?? columns[0]?.key;
|
|
912
|
+
}
|
|
913
|
+
function useTableTreeData(config) {
|
|
914
|
+
const messages = useAstryxMessages();
|
|
915
|
+
const resolvedKey = ref();
|
|
916
|
+
return {
|
|
917
|
+
transformColumns(columns) {
|
|
918
|
+
const current = toValue(config);
|
|
919
|
+
const key = treeColumnKey(columns, current.treeColumnKey);
|
|
920
|
+
resolvedKey.value = key;
|
|
921
|
+
if (!current.hasExpandableRows || key == null) return columns;
|
|
922
|
+
return columns.map((column) => {
|
|
923
|
+
if (column.key !== key) return column;
|
|
924
|
+
const original = column.renderCell;
|
|
925
|
+
return {
|
|
926
|
+
...column,
|
|
927
|
+
renderCell(item, index) {
|
|
928
|
+
const live = toValue(config);
|
|
929
|
+
const meta = live.getRowMeta(item);
|
|
930
|
+
const body = original?.(item, index) ?? cellText(item[column.key]);
|
|
931
|
+
if (meta == null) return body;
|
|
932
|
+
return h(_sfc_main$12, {
|
|
933
|
+
level: meta.level,
|
|
934
|
+
hasChildren: meta.hasChildren,
|
|
935
|
+
expanded: meta.isExpanded,
|
|
936
|
+
indent: live.indent ?? "md",
|
|
937
|
+
onToggle: () => live.onToggleItem(item)
|
|
938
|
+
}, { default: () => body });
|
|
939
|
+
}
|
|
940
|
+
};
|
|
941
|
+
});
|
|
942
|
+
},
|
|
943
|
+
headerPatch(column) {
|
|
944
|
+
const current = toValue(config);
|
|
945
|
+
if (!current.hasExpandAllControl || !current.hasExpandableRows || column.key !== resolvedKey.value) return null;
|
|
946
|
+
if (current.isAllExpanded == null || current.onExpandAll == null || current.onCollapseAll == null) return null;
|
|
947
|
+
const allExpanded = current.isAllExpanded === true;
|
|
948
|
+
return { before: () => h("button", {
|
|
949
|
+
"type": "button",
|
|
950
|
+
"class": "astryx-table__expander",
|
|
951
|
+
"aria-label": allExpanded ? messages.value.table.collapseAllRows : messages.value.table.expandAllRows,
|
|
952
|
+
"aria-expanded": String(allExpanded),
|
|
953
|
+
"onClick": (event) => {
|
|
954
|
+
event.stopPropagation();
|
|
955
|
+
if (allExpanded) current.onCollapseAll?.();
|
|
956
|
+
else current.onExpandAll?.();
|
|
957
|
+
}
|
|
958
|
+
}, [h("span", { class: ["astryx-table__chevron-icon", allExpanded ? "is-expanded" : void 0] }, [h(_sfc_main$18, {
|
|
959
|
+
icon: "chevronRight",
|
|
960
|
+
size: "xsm"
|
|
961
|
+
})])]) };
|
|
962
|
+
},
|
|
963
|
+
rowPatch(row) {
|
|
964
|
+
const current = toValue(config);
|
|
965
|
+
const meta = current.hasExpandableRows ? current.getRowMeta(row) : void 0;
|
|
966
|
+
if (meta == null && !current.hasExpandableRows) return null;
|
|
967
|
+
const attrs = {};
|
|
968
|
+
if (meta != null) {
|
|
969
|
+
attrs["aria-level"] = String(meta.level + 1);
|
|
970
|
+
if (meta.hasChildren) attrs["aria-expanded"] = String(meta.isExpanded);
|
|
971
|
+
}
|
|
972
|
+
const clickable = current.hasRowClickExpansion === true && meta?.hasChildren === true;
|
|
973
|
+
return {
|
|
974
|
+
attrs,
|
|
975
|
+
class: clickable ? "astryx-table__clickable" : void 0,
|
|
976
|
+
onClick: clickable ? (event) => {
|
|
977
|
+
if (!isInteractiveRowClick(event)) current.onToggleItem(row);
|
|
978
|
+
} : void 0
|
|
979
|
+
};
|
|
980
|
+
}
|
|
981
|
+
};
|
|
982
|
+
}
|
|
983
|
+
function useTableTreeState(config) {
|
|
984
|
+
const initial = toValue(config);
|
|
985
|
+
const internal = ref(new Set(initial.defaultExpandedIds ?? []));
|
|
986
|
+
const expandedIds = computed(() => toValue(config).expandedIds ?? internal.value);
|
|
987
|
+
const flat = computed(() => flattenTree(toValue(config), expandedIds.value));
|
|
988
|
+
const isAllExpanded = computed(() => expansionState(flat.value.expandableIds, expandedIds.value));
|
|
989
|
+
function commit(next) {
|
|
990
|
+
const current = toValue(config);
|
|
991
|
+
if (current.expandedIds === void 0) internal.value = next;
|
|
992
|
+
current.onExpandedIdsChange?.(next);
|
|
993
|
+
}
|
|
994
|
+
function expandAll() {
|
|
995
|
+
commit(new Set(flat.value.expandableIds));
|
|
996
|
+
}
|
|
997
|
+
function collapseAll() {
|
|
998
|
+
commit(/* @__PURE__ */ new Set());
|
|
999
|
+
}
|
|
1000
|
+
const plugin = useTableTreeData(() => {
|
|
1001
|
+
const current = toValue(config);
|
|
1002
|
+
return {
|
|
1003
|
+
getRowMeta: (item) => flat.value.meta.get(itemId(item, current.idKey)),
|
|
1004
|
+
onToggleItem(item) {
|
|
1005
|
+
const id = itemId(item, toValue(config).idKey);
|
|
1006
|
+
const next = new Set(expandedIds.value);
|
|
1007
|
+
if (next.has(id)) next.delete(id);
|
|
1008
|
+
else next.add(id);
|
|
1009
|
+
commit(next);
|
|
1010
|
+
},
|
|
1011
|
+
hasExpandableRows: flat.value.expandableIds.length > 0,
|
|
1012
|
+
isAllExpanded: isAllExpanded.value,
|
|
1013
|
+
onExpandAll: expandAll,
|
|
1014
|
+
onCollapseAll: collapseAll,
|
|
1015
|
+
hasExpandAllControl: current.hasExpandAllControl,
|
|
1016
|
+
hasRowClickExpansion: current.hasRowClickExpansion,
|
|
1017
|
+
indent: current.indent,
|
|
1018
|
+
treeColumnKey: current.treeColumnKey
|
|
1019
|
+
};
|
|
1020
|
+
});
|
|
1021
|
+
return {
|
|
1022
|
+
visibleData: computed(() => flat.value.rows),
|
|
1023
|
+
plugin,
|
|
1024
|
+
expandedIds,
|
|
1025
|
+
isAllExpanded,
|
|
1026
|
+
expandAll,
|
|
1027
|
+
collapseAll
|
|
1028
|
+
};
|
|
1029
|
+
}
|
|
1030
|
+
//#endregion
|
|
1031
|
+
//#region src/Table/TableFilterControl.vue
|
|
1032
|
+
const _hoisted_1$8 = { class: "astryx-table__filter" };
|
|
1033
|
+
const _hoisted_2$3 = { class: "astryx-table__filter-popover" };
|
|
1034
|
+
const _hoisted_3$2 = { class: "astryx-table__filter-actions" };
|
|
1035
|
+
const _sfc_main$11 = /*@__PURE__*/ defineComponent({
|
|
1036
|
+
__name: "TableFilterControl",
|
|
1037
|
+
props: { filter: {} },
|
|
1038
|
+
setup(__props) {
|
|
1039
|
+
const props = __props;
|
|
1040
|
+
const messages = useAstryxMessages();
|
|
1041
|
+
const draft = ref(typeof props.filter.value === "string" ? props.filter.value : "");
|
|
1042
|
+
watch(() => props.filter.value, (value) => {
|
|
1043
|
+
draft.value = typeof value === "string" ? value : "";
|
|
1044
|
+
});
|
|
1045
|
+
function commit(value) {
|
|
1046
|
+
props.filter.onChange(value);
|
|
1047
|
+
}
|
|
1048
|
+
function onInlineInput(value) {
|
|
1049
|
+
draft.value = value;
|
|
1050
|
+
commit(value === "" ? null : value);
|
|
1051
|
+
}
|
|
1052
|
+
return (_ctx, _cache) => {
|
|
1053
|
+
return openBlock(), createElementBlock("div", _hoisted_1$8, [__props.filter.variant === "inline" && __props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$23, {
|
|
1054
|
+
key: 0,
|
|
1055
|
+
"model-value": draft.value,
|
|
1056
|
+
label: __props.filter.field.label,
|
|
1057
|
+
"is-label-hidden": "",
|
|
1058
|
+
size: "sm",
|
|
1059
|
+
placeholder: __props.filter.field.label,
|
|
1060
|
+
"onUpdate:modelValue": onInlineInput
|
|
1061
|
+
}, null, 8, [
|
|
1062
|
+
"model-value",
|
|
1063
|
+
"label",
|
|
1064
|
+
"placeholder"
|
|
1065
|
+
])) : __props.filter.variant === "inline" ? (openBlock(), createBlock(_sfc_main$22, {
|
|
1066
|
+
key: 1,
|
|
1067
|
+
"model-value": draft.value || null,
|
|
1068
|
+
label: __props.filter.field.label,
|
|
1069
|
+
size: "sm",
|
|
1070
|
+
placeholder: unref(messages).table.filterAll,
|
|
1071
|
+
options: __props.filter.field.options ?? [],
|
|
1072
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => commit(value == null || value === "" ? null : String(value)))
|
|
1073
|
+
}, null, 8, [
|
|
1074
|
+
"model-value",
|
|
1075
|
+
"label",
|
|
1076
|
+
"placeholder",
|
|
1077
|
+
"options"
|
|
1078
|
+
])) : (openBlock(), createBlock(_sfc_main$20, {
|
|
1079
|
+
key: 2,
|
|
1080
|
+
label: __props.filter.field.label,
|
|
1081
|
+
"has-close-button": false,
|
|
1082
|
+
width: 240
|
|
1083
|
+
}, {
|
|
1084
|
+
content: withCtx(() => [createElementVNode("div", _hoisted_2$3, [__props.filter.field.type === "string" ? (openBlock(), createBlock(_sfc_main$23, {
|
|
1085
|
+
key: 0,
|
|
1086
|
+
"model-value": draft.value,
|
|
1087
|
+
label: __props.filter.field.label,
|
|
1088
|
+
"is-label-hidden": "",
|
|
1089
|
+
size: "sm",
|
|
1090
|
+
placeholder: __props.filter.field.label,
|
|
1091
|
+
"onUpdate:modelValue": _cache[1] || (_cache[1] = (value) => draft.value = value)
|
|
1092
|
+
}, null, 8, [
|
|
1093
|
+
"model-value",
|
|
1094
|
+
"label",
|
|
1095
|
+
"placeholder"
|
|
1096
|
+
])) : (openBlock(), createBlock(_sfc_main$22, {
|
|
1097
|
+
key: 1,
|
|
1098
|
+
"model-value": draft.value || null,
|
|
1099
|
+
label: __props.filter.field.label,
|
|
1100
|
+
size: "sm",
|
|
1101
|
+
placeholder: unref(messages).table.filterAll,
|
|
1102
|
+
options: __props.filter.field.options ?? [],
|
|
1103
|
+
"onUpdate:modelValue": _cache[2] || (_cache[2] = (value) => draft.value = value == null ? "" : String(value))
|
|
1104
|
+
}, null, 8, [
|
|
1105
|
+
"model-value",
|
|
1106
|
+
"label",
|
|
1107
|
+
"placeholder",
|
|
1108
|
+
"options"
|
|
1109
|
+
])), createElementVNode("div", _hoisted_3$2, [createVNode(_sfc_main$15, {
|
|
1110
|
+
variant: "ghost",
|
|
1111
|
+
size: "sm",
|
|
1112
|
+
label: unref(messages).table.reset,
|
|
1113
|
+
onClick: _cache[3] || (_cache[3] = ($event) => {
|
|
1114
|
+
draft.value = "";
|
|
1115
|
+
commit(null);
|
|
1116
|
+
})
|
|
1117
|
+
}, {
|
|
1118
|
+
default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.reset), 1)]),
|
|
1119
|
+
_: 1
|
|
1120
|
+
}, 8, ["label"]), createVNode(_sfc_main$15, {
|
|
1121
|
+
variant: "primary",
|
|
1122
|
+
size: "sm",
|
|
1123
|
+
label: unref(messages).table.apply,
|
|
1124
|
+
onClick: _cache[4] || (_cache[4] = ($event) => commit(draft.value === "" ? null : draft.value))
|
|
1125
|
+
}, {
|
|
1126
|
+
default: withCtx(() => [createTextVNode(toDisplayString(unref(messages).table.apply), 1)]),
|
|
1127
|
+
_: 1
|
|
1128
|
+
}, 8, ["label"])])])]),
|
|
1129
|
+
default: withCtx(() => [createVNode(_sfc_main$17, {
|
|
1130
|
+
variant: "ghost",
|
|
1131
|
+
size: "sm",
|
|
1132
|
+
label: __props.filter.field.label
|
|
1133
|
+
}, {
|
|
1134
|
+
default: withCtx(() => [createVNode(_sfc_main$18, {
|
|
1135
|
+
icon: "funnel",
|
|
1136
|
+
size: "sm"
|
|
1137
|
+
})]),
|
|
1138
|
+
_: 1
|
|
1139
|
+
}, 8, ["label"])]),
|
|
1140
|
+
_: 1
|
|
1141
|
+
}, 8, ["label"]))]);
|
|
1142
|
+
};
|
|
1143
|
+
}
|
|
1144
|
+
});
|
|
1145
|
+
//#endregion
|
|
1146
|
+
//#region src/Table/TableGroupHeader.vue
|
|
1147
|
+
const _hoisted_1$7 = ["data-pinned"];
|
|
1148
|
+
const _hoisted_2$2 = [
|
|
1149
|
+
"data-pinned",
|
|
1150
|
+
"aria-expanded",
|
|
1151
|
+
"aria-label"
|
|
1152
|
+
];
|
|
1153
|
+
const _hoisted_3$1 = { class: "astryx-table__group-label" };
|
|
1154
|
+
const _hoisted_4$1 = { class: "astryx-table__group-count" };
|
|
1155
|
+
const _sfc_main$10 = /*@__PURE__*/ defineComponent({
|
|
1156
|
+
name: "AstryxTableGroupHeader",
|
|
1157
|
+
__name: "TableGroupHeader",
|
|
1158
|
+
props: {
|
|
1159
|
+
groupKey: {},
|
|
1160
|
+
count: {},
|
|
1161
|
+
collapsed: { type: Boolean },
|
|
1162
|
+
custom: { type: Boolean }
|
|
1163
|
+
},
|
|
1164
|
+
emits: ["toggle"],
|
|
1165
|
+
setup(__props, { emit: __emit }) {
|
|
1166
|
+
const emit = __emit;
|
|
1167
|
+
const messages = useAstryxMessages();
|
|
1168
|
+
return (_ctx, _cache) => {
|
|
1169
|
+
return openBlock(), createElementBlock("span", {
|
|
1170
|
+
class: "astryx-table__group-inner",
|
|
1171
|
+
"data-pinned": __props.custom ? void 0 : ""
|
|
1172
|
+
}, [createElementVNode("button", {
|
|
1173
|
+
type: "button",
|
|
1174
|
+
class: "astryx-table__group-chevron",
|
|
1175
|
+
"data-pinned": __props.custom ? "" : void 0,
|
|
1176
|
+
"aria-expanded": __props.collapsed ? "false" : "true",
|
|
1177
|
+
"aria-label": __props.collapsed ? unref(messages).table.expandGroup(__props.groupKey) : unref(messages).table.collapseGroup(__props.groupKey),
|
|
1178
|
+
onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("toggle"), ["stop"]))
|
|
1179
|
+
}, [createElementVNode("span", { class: normalizeClass(["astryx-table__chevron-icon", { "is-expanded": !__props.collapsed }]) }, [createVNode(_sfc_main$18, {
|
|
1180
|
+
icon: "chevronRight",
|
|
1181
|
+
size: "sm"
|
|
1182
|
+
})], 2)], 8, _hoisted_2$2), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("span", _hoisted_3$1, [createTextVNode(toDisplayString(__props.groupKey) + " ", 1), createElementVNode("span", _hoisted_4$1, "(" + toDisplayString(__props.count) + ")", 1)])])], 8, _hoisted_1$7);
|
|
1183
|
+
};
|
|
1184
|
+
}
|
|
1185
|
+
});
|
|
1186
|
+
//#endregion
|
|
1187
|
+
//#region src/Table/TableRowMenu.vue
|
|
1188
|
+
const _hoisted_1$6 = [
|
|
1189
|
+
"tabindex",
|
|
1190
|
+
"onClick",
|
|
1191
|
+
"onFocusin",
|
|
1192
|
+
"onMouseenter"
|
|
1193
|
+
];
|
|
1194
|
+
const _sfc_main$9 = /*@__PURE__*/ defineComponent({
|
|
1195
|
+
name: "AstryxTableRowMenu",
|
|
1196
|
+
__name: "TableRowMenu",
|
|
1197
|
+
props: {
|
|
1198
|
+
x: {},
|
|
1199
|
+
y: {},
|
|
1200
|
+
items: {}
|
|
1201
|
+
},
|
|
1202
|
+
emits: ["close"],
|
|
1203
|
+
setup(__props, { emit: __emit }) {
|
|
1204
|
+
const props = __props;
|
|
1205
|
+
const emit = __emit;
|
|
1206
|
+
const root = ref(null);
|
|
1207
|
+
const active = ref(0);
|
|
1208
|
+
function focusItem(index) {
|
|
1209
|
+
(root.value?.querySelectorAll("[role=\"menuitem\"]"))?.[index]?.focus();
|
|
1210
|
+
}
|
|
1211
|
+
function onKeydown(event) {
|
|
1212
|
+
const last = props.items.length - 1;
|
|
1213
|
+
if (event.key === "Escape") {
|
|
1214
|
+
event.preventDefault();
|
|
1215
|
+
emit("close");
|
|
1216
|
+
return;
|
|
1217
|
+
}
|
|
1218
|
+
if (event.key === "ArrowDown") {
|
|
1219
|
+
event.preventDefault();
|
|
1220
|
+
active.value = active.value >= last ? 0 : active.value + 1;
|
|
1221
|
+
focusItem(active.value);
|
|
1222
|
+
} else if (event.key === "ArrowUp") {
|
|
1223
|
+
event.preventDefault();
|
|
1224
|
+
active.value = active.value <= 0 ? last : active.value - 1;
|
|
1225
|
+
focusItem(active.value);
|
|
1226
|
+
} else if (event.key === "Home") {
|
|
1227
|
+
event.preventDefault();
|
|
1228
|
+
active.value = 0;
|
|
1229
|
+
focusItem(0);
|
|
1230
|
+
} else if (event.key === "End") {
|
|
1231
|
+
event.preventDefault();
|
|
1232
|
+
active.value = last;
|
|
1233
|
+
focusItem(last);
|
|
1234
|
+
}
|
|
1235
|
+
}
|
|
1236
|
+
function onPointerDown(event) {
|
|
1237
|
+
const target = event.target;
|
|
1238
|
+
if (target instanceof Node && root.value?.contains(target)) return;
|
|
1239
|
+
emit("close");
|
|
1240
|
+
}
|
|
1241
|
+
function choose(item) {
|
|
1242
|
+
item.onSelect();
|
|
1243
|
+
emit("close");
|
|
1244
|
+
}
|
|
1245
|
+
onMounted(() => {
|
|
1246
|
+
document.addEventListener("pointerdown", onPointerDown);
|
|
1247
|
+
nextTick(() => focusItem(0));
|
|
1248
|
+
});
|
|
1249
|
+
onBeforeUnmount(() => {
|
|
1250
|
+
document.removeEventListener("pointerdown", onPointerDown);
|
|
1251
|
+
});
|
|
1252
|
+
return (_ctx, _cache) => {
|
|
1253
|
+
return openBlock(), createElementBlock("div", {
|
|
1254
|
+
ref_key: "root",
|
|
1255
|
+
ref: root,
|
|
1256
|
+
class: "astryx-table-menu",
|
|
1257
|
+
role: "menu",
|
|
1258
|
+
tabindex: "-1",
|
|
1259
|
+
style: normalizeStyle({
|
|
1260
|
+
top: `${__props.y}px`,
|
|
1261
|
+
left: `${__props.x}px`
|
|
1262
|
+
}),
|
|
1263
|
+
onKeydown
|
|
1264
|
+
}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item, index) => {
|
|
1265
|
+
return openBlock(), createElementBlock("button", {
|
|
1266
|
+
key: item.id,
|
|
1267
|
+
type: "button",
|
|
1268
|
+
role: "menuitem",
|
|
1269
|
+
class: "astryx-table-menu__item",
|
|
1270
|
+
tabindex: index === active.value ? 0 : -1,
|
|
1271
|
+
onClick: ($event) => choose(item),
|
|
1272
|
+
onFocusin: ($event) => active.value = index,
|
|
1273
|
+
onMouseenter: ($event) => active.value = index
|
|
1274
|
+
}, [item.icon ? (openBlock(), createBlock(_sfc_main$18, {
|
|
1275
|
+
key: 0,
|
|
1276
|
+
icon: item.icon,
|
|
1277
|
+
size: "xsm"
|
|
1278
|
+
}, null, 8, ["icon"])) : createCommentVNode("v-if", true), createElementVNode("span", null, toDisplayString(item.label), 1)], 40, _hoisted_1$6);
|
|
1279
|
+
}), 128))], 36);
|
|
1280
|
+
};
|
|
1281
|
+
}
|
|
1282
|
+
});
|
|
1283
|
+
//#endregion
|
|
1284
|
+
//#region src/Table/TableData.vue
|
|
1285
|
+
const _hoisted_1$5 = ["aria-label"];
|
|
1286
|
+
const _hoisted_2$1 = [
|
|
1287
|
+
"data-density",
|
|
1288
|
+
"data-dividers",
|
|
1289
|
+
"data-striped",
|
|
1290
|
+
"data-hover",
|
|
1291
|
+
"data-overflow",
|
|
1292
|
+
"data-valign",
|
|
1293
|
+
"aria-rowcount"
|
|
1294
|
+
];
|
|
1295
|
+
const _hoisted_3 = [
|
|
1296
|
+
"data-column",
|
|
1297
|
+
"data-align",
|
|
1298
|
+
"aria-sort"
|
|
1299
|
+
];
|
|
1300
|
+
const _hoisted_4 = { class: "astryx-table__header" };
|
|
1301
|
+
const _hoisted_5 = { class: "astryx-table__header-line" };
|
|
1302
|
+
const _hoisted_6 = [
|
|
1303
|
+
"data-align",
|
|
1304
|
+
"aria-label",
|
|
1305
|
+
"onClick"
|
|
1306
|
+
];
|
|
1307
|
+
const _hoisted_7 = { key: 1 };
|
|
1308
|
+
const _hoisted_8 = ["data-active"];
|
|
1309
|
+
const _hoisted_9 = {
|
|
1310
|
+
key: 2,
|
|
1311
|
+
class: "astryx-table__sort-rank"
|
|
1312
|
+
};
|
|
1313
|
+
const _hoisted_10 = { key: 2 };
|
|
1314
|
+
const _hoisted_11 = ["onPointerdown"];
|
|
1315
|
+
const _hoisted_12 = { key: 0 };
|
|
1316
|
+
const _hoisted_13 = ["colspan"];
|
|
1317
|
+
const _hoisted_14 = [
|
|
1318
|
+
"aria-selected",
|
|
1319
|
+
"aria-rowindex",
|
|
1320
|
+
"onClick",
|
|
1321
|
+
"onContextmenu"
|
|
1322
|
+
];
|
|
1323
|
+
const _hoisted_15 = ["colspan"];
|
|
1324
|
+
const _hoisted_16 = ["data-column", "data-align"];
|
|
1325
|
+
const _hoisted_17 = ["data-variant"];
|
|
1326
|
+
const _hoisted_18 = ["colspan"];
|
|
1327
|
+
const _sfc_main$8 = /*@__PURE__*/ defineComponent({
|
|
1328
|
+
__name: "TableData",
|
|
1329
|
+
props: {
|
|
1330
|
+
rows: {},
|
|
1331
|
+
columns: {},
|
|
1332
|
+
plugins: {},
|
|
1333
|
+
idKey: { type: [String, Function] },
|
|
1334
|
+
label: {},
|
|
1335
|
+
density: {},
|
|
1336
|
+
dividers: {},
|
|
1337
|
+
isStriped: { type: Boolean },
|
|
1338
|
+
hasHover: { type: Boolean },
|
|
1339
|
+
textOverflow: {},
|
|
1340
|
+
verticalAlign: {},
|
|
1341
|
+
rowIndexStart: {},
|
|
1342
|
+
rowCount: {},
|
|
1343
|
+
minWidth: {}
|
|
1344
|
+
},
|
|
1345
|
+
setup(__props) {
|
|
1346
|
+
const props = __props;
|
|
1347
|
+
const messages = useAstryxMessages();
|
|
1348
|
+
const dragWidths = ref({});
|
|
1349
|
+
const scrollRoot = ref(null);
|
|
1350
|
+
const menu = ref(null);
|
|
1351
|
+
const resolvedColumns = computed(() => props.plugins.reduce((columns, plugin) => plugin.transformColumns?.(columns) ?? columns, [...props.columns]));
|
|
1352
|
+
const widths = computed(() => resolveColumnWidths(resolvedColumns.value));
|
|
1353
|
+
const selection = computed(() => props.plugins.find((plugin) => plugin.selection)?.selection);
|
|
1354
|
+
const canResize = computed(() => props.plugins.some((plugin) => plugin.onColumnResizeEnd));
|
|
1355
|
+
const layoutColumns = computed(() => selection.value ? [selectColumn(), ...resolvedColumns.value] : resolvedColumns.value);
|
|
1356
|
+
const columnCount = computed(() => layoutColumns.value.length);
|
|
1357
|
+
const trackRows = computed(() => props.rowCount != null || props.rowIndexStart != null);
|
|
1358
|
+
const ariaRowCount = computed(() => {
|
|
1359
|
+
if (!trackRows.value) return void 0;
|
|
1360
|
+
return String(props.rowCount ?? -1);
|
|
1361
|
+
});
|
|
1362
|
+
function bindScroll(element) {
|
|
1363
|
+
for (const plugin of props.plugins) plugin.bindScrollRoot?.(element);
|
|
1364
|
+
}
|
|
1365
|
+
watch(scrollRoot, (element, previous) => {
|
|
1366
|
+
if (previous) bindScroll(null);
|
|
1367
|
+
if (element) bindScroll(element);
|
|
1368
|
+
});
|
|
1369
|
+
onBeforeUnmount(() => {
|
|
1370
|
+
bindScroll(null);
|
|
1371
|
+
});
|
|
1372
|
+
function styleFor(column) {
|
|
1373
|
+
const base = { ...widths.value.columns.get(column.key)?.style ?? {} };
|
|
1374
|
+
const override = props.plugins.map((plugin) => plugin.widthFor?.(column)).find((value) => value != null) ?? dragWidths.value[column.key];
|
|
1375
|
+
if (override != null) {
|
|
1376
|
+
base.width = `${override}px`;
|
|
1377
|
+
base.minWidth = `${override}px`;
|
|
1378
|
+
}
|
|
1379
|
+
return base;
|
|
1380
|
+
}
|
|
1381
|
+
function sortFor(column) {
|
|
1382
|
+
for (const plugin of props.plugins) {
|
|
1383
|
+
const sort = plugin.sortFor?.(column);
|
|
1384
|
+
if (sort) return sort;
|
|
1385
|
+
}
|
|
1386
|
+
return null;
|
|
1387
|
+
}
|
|
1388
|
+
function filterFor(column) {
|
|
1389
|
+
for (const plugin of props.plugins) {
|
|
1390
|
+
const filter = plugin.filterFor?.(column);
|
|
1391
|
+
if (filter) return filter;
|
|
1392
|
+
}
|
|
1393
|
+
return null;
|
|
1394
|
+
}
|
|
1395
|
+
function rowKey(row, index) {
|
|
1396
|
+
if (typeof props.idKey === "function") return props.idKey(row);
|
|
1397
|
+
const id = row[props.idKey];
|
|
1398
|
+
return id == null ? String(index) : String(id);
|
|
1399
|
+
}
|
|
1400
|
+
function selected(row) {
|
|
1401
|
+
return selection.value?.isSelected(row) === true && selection.value.hasRowHighlight !== false;
|
|
1402
|
+
}
|
|
1403
|
+
function mergeCell(column, row, kind) {
|
|
1404
|
+
const style = {};
|
|
1405
|
+
const classes = [];
|
|
1406
|
+
const attrs = {};
|
|
1407
|
+
for (const plugin of props.plugins) {
|
|
1408
|
+
const patch = plugin.cellPatch?.({
|
|
1409
|
+
column,
|
|
1410
|
+
columns: layoutColumns.value,
|
|
1411
|
+
row,
|
|
1412
|
+
kind
|
|
1413
|
+
});
|
|
1414
|
+
if (patch == null) continue;
|
|
1415
|
+
if (patch.class) classes.push(patch.class);
|
|
1416
|
+
if (patch.style) Object.assign(style, patch.style);
|
|
1417
|
+
if (patch.attrs) Object.assign(attrs, patch.attrs);
|
|
1418
|
+
}
|
|
1419
|
+
return {
|
|
1420
|
+
class: classes.join(" ") || void 0,
|
|
1421
|
+
style,
|
|
1422
|
+
attrs
|
|
1423
|
+
};
|
|
1424
|
+
}
|
|
1425
|
+
function headerStyle(column) {
|
|
1426
|
+
return {
|
|
1427
|
+
...styleFor(column),
|
|
1428
|
+
...mergeCell(column, null, "header").style
|
|
1429
|
+
};
|
|
1430
|
+
}
|
|
1431
|
+
function bodyStyle(column, row) {
|
|
1432
|
+
const style = { ...mergeCell(column, row, "body").style };
|
|
1433
|
+
if (column.verticalAlign) style.verticalAlign = column.verticalAlign;
|
|
1434
|
+
return style;
|
|
1435
|
+
}
|
|
1436
|
+
function mergeRow(row, index) {
|
|
1437
|
+
const classes = [];
|
|
1438
|
+
const clicks = [];
|
|
1439
|
+
const menus = [];
|
|
1440
|
+
const merged = {};
|
|
1441
|
+
for (const plugin of props.plugins) {
|
|
1442
|
+
const patch = plugin.rowPatch?.(row, index, columnCount.value);
|
|
1443
|
+
if (patch == null) continue;
|
|
1444
|
+
if (patch.group && merged.group == null) merged.group = patch.group;
|
|
1445
|
+
if (patch.panel && merged.panel == null) merged.panel = patch.panel;
|
|
1446
|
+
if (patch.suppressSelection) merged.suppressSelection = true;
|
|
1447
|
+
if (patch.skipRowIndex) merged.skipRowIndex = true;
|
|
1448
|
+
if (patch.class) classes.push(patch.class);
|
|
1449
|
+
if (patch.attrs) merged.attrs = {
|
|
1450
|
+
...merged.attrs,
|
|
1451
|
+
...patch.attrs
|
|
1452
|
+
};
|
|
1453
|
+
if (patch.onClick) clicks.push(patch.onClick);
|
|
1454
|
+
if (patch.menu) menus.push(...patch.menu);
|
|
1455
|
+
}
|
|
1456
|
+
merged.class = classes.join(" ") || void 0;
|
|
1457
|
+
merged.menu = menus;
|
|
1458
|
+
if (clicks.length > 0) merged.onClick = (event) => {
|
|
1459
|
+
for (const click of clicks) click(event);
|
|
1460
|
+
};
|
|
1461
|
+
return merged;
|
|
1462
|
+
}
|
|
1463
|
+
const entries = computed(() => {
|
|
1464
|
+
let ordinal = 0;
|
|
1465
|
+
const start = props.rowIndexStart ?? 1;
|
|
1466
|
+
return props.rows.map((row, index) => {
|
|
1467
|
+
const patch = mergeRow(row, index);
|
|
1468
|
+
let rowIndex;
|
|
1469
|
+
if (trackRows.value && !patch.skipRowIndex) {
|
|
1470
|
+
rowIndex = start + ordinal;
|
|
1471
|
+
ordinal += 1;
|
|
1472
|
+
}
|
|
1473
|
+
return {
|
|
1474
|
+
key: rowKey(row, index),
|
|
1475
|
+
row,
|
|
1476
|
+
index,
|
|
1477
|
+
patch,
|
|
1478
|
+
rowIndex
|
|
1479
|
+
};
|
|
1480
|
+
});
|
|
1481
|
+
});
|
|
1482
|
+
function openMenu(event, items) {
|
|
1483
|
+
if (items == null || items.length === 0) return;
|
|
1484
|
+
event.preventDefault();
|
|
1485
|
+
menu.value = {
|
|
1486
|
+
x: event.clientX,
|
|
1487
|
+
y: event.clientY,
|
|
1488
|
+
items
|
|
1489
|
+
};
|
|
1490
|
+
}
|
|
1491
|
+
const CellContent = defineComponent({
|
|
1492
|
+
name: "AstryxTableCellContent",
|
|
1493
|
+
props: {
|
|
1494
|
+
column: {
|
|
1495
|
+
type: Object,
|
|
1496
|
+
required: true
|
|
1497
|
+
},
|
|
1498
|
+
row: {
|
|
1499
|
+
type: Object,
|
|
1500
|
+
required: true
|
|
1501
|
+
},
|
|
1502
|
+
index: {
|
|
1503
|
+
type: Number,
|
|
1504
|
+
required: true
|
|
1505
|
+
}
|
|
1506
|
+
},
|
|
1507
|
+
setup(cellProps) {
|
|
1508
|
+
return () => {
|
|
1509
|
+
const column = cellProps.column;
|
|
1510
|
+
const row = cellProps.row;
|
|
1511
|
+
const rendered = column.renderCell?.(row, cellProps.index);
|
|
1512
|
+
if (rendered == null) return cellText(row[column.key]);
|
|
1513
|
+
return rendered;
|
|
1514
|
+
};
|
|
1515
|
+
}
|
|
1516
|
+
});
|
|
1517
|
+
const RenderFn = defineComponent({
|
|
1518
|
+
name: "AstryxTableRenderFn",
|
|
1519
|
+
props: { render: {
|
|
1520
|
+
type: Function,
|
|
1521
|
+
required: true
|
|
1522
|
+
} },
|
|
1523
|
+
setup(renderProps) {
|
|
1524
|
+
return () => renderProps.render();
|
|
1525
|
+
}
|
|
1526
|
+
});
|
|
1527
|
+
const HeaderAddon = defineComponent({
|
|
1528
|
+
name: "AstryxTableHeaderAddon",
|
|
1529
|
+
props: { column: {
|
|
1530
|
+
type: Object,
|
|
1531
|
+
required: true
|
|
1532
|
+
} },
|
|
1533
|
+
setup(addonProps) {
|
|
1534
|
+
return () => {
|
|
1535
|
+
const column = addonProps.column;
|
|
1536
|
+
const nodes = [];
|
|
1537
|
+
for (const plugin of props.plugins) {
|
|
1538
|
+
const before = plugin.headerPatch?.(column)?.before?.();
|
|
1539
|
+
if (before != null) nodes.push(before);
|
|
1540
|
+
}
|
|
1541
|
+
return nodes;
|
|
1542
|
+
};
|
|
1543
|
+
}
|
|
1544
|
+
});
|
|
1545
|
+
const PluginFooter = defineComponent({
|
|
1546
|
+
name: "AstryxTablePluginFooter",
|
|
1547
|
+
props: { plugin: {
|
|
1548
|
+
type: Object,
|
|
1549
|
+
required: true
|
|
1550
|
+
} },
|
|
1551
|
+
setup(footerProps) {
|
|
1552
|
+
return () => footerProps.plugin.below?.() ?? null;
|
|
1553
|
+
}
|
|
1554
|
+
});
|
|
1555
|
+
function startResize(event, column) {
|
|
1556
|
+
const handle = event.currentTarget;
|
|
1557
|
+
if (!(handle instanceof HTMLElement)) return;
|
|
1558
|
+
const cell = handle.closest("th");
|
|
1559
|
+
if (cell == null) return;
|
|
1560
|
+
const startX = event.clientX;
|
|
1561
|
+
const startWidth = cell.getBoundingClientRect().width;
|
|
1562
|
+
handle.setPointerCapture(event.pointerId);
|
|
1563
|
+
const move = (moveEvent) => {
|
|
1564
|
+
if (!(moveEvent instanceof PointerEvent)) return;
|
|
1565
|
+
const next = Math.max(60, startWidth + moveEvent.clientX - startX);
|
|
1566
|
+
dragWidths.value = {
|
|
1567
|
+
...dragWidths.value,
|
|
1568
|
+
[column.key]: next
|
|
1569
|
+
};
|
|
1570
|
+
};
|
|
1571
|
+
const stop = (upEvent) => {
|
|
1572
|
+
handle.removeEventListener("pointermove", move);
|
|
1573
|
+
handle.removeEventListener("pointerup", stop);
|
|
1574
|
+
const width = dragWidths.value[column.key] ?? startWidth;
|
|
1575
|
+
for (const plugin of props.plugins) plugin.onColumnResizeEnd?.(column.key, width);
|
|
1576
|
+
if (upEvent instanceof PointerEvent && handle.hasPointerCapture(upEvent.pointerId)) handle.releasePointerCapture(upEvent.pointerId);
|
|
1577
|
+
};
|
|
1578
|
+
handle.addEventListener("pointermove", move);
|
|
1579
|
+
handle.addEventListener("pointerup", stop);
|
|
1580
|
+
}
|
|
1581
|
+
function selectCellPatch(kind, row) {
|
|
1582
|
+
return mergeCell(selectColumn(), row, kind);
|
|
1583
|
+
}
|
|
1584
|
+
return (_ctx, _cache) => {
|
|
1585
|
+
return openBlock(), createElementBlock("div", {
|
|
1586
|
+
ref_key: "scrollRoot",
|
|
1587
|
+
ref: scrollRoot,
|
|
1588
|
+
class: "astryx-table-scroll",
|
|
1589
|
+
role: "group",
|
|
1590
|
+
"aria-label": __props.label
|
|
1591
|
+
}, [
|
|
1592
|
+
createElementVNode("table", {
|
|
1593
|
+
class: "astryx-table",
|
|
1594
|
+
"data-density": __props.density,
|
|
1595
|
+
"data-dividers": __props.dividers,
|
|
1596
|
+
"data-striped": __props.isStriped || void 0,
|
|
1597
|
+
"data-hover": __props.hasHover || void 0,
|
|
1598
|
+
"data-overflow": __props.textOverflow,
|
|
1599
|
+
"data-valign": __props.verticalAlign,
|
|
1600
|
+
"aria-rowcount": ariaRowCount.value,
|
|
1601
|
+
style: normalizeStyle(__props.minWidth ? { minWidth: `${Math.max(__props.minWidth, widths.value.tableMinWidth)}px` } : { minWidth: `${widths.value.tableMinWidth}px` })
|
|
1602
|
+
}, [createElementVNode("thead", null, [createElementVNode("tr", null, [selection.value ? (openBlock(), createElementBlock("th", mergeProps({
|
|
1603
|
+
key: 0,
|
|
1604
|
+
class: ["astryx-table__select", selectCellPatch("header", null).class],
|
|
1605
|
+
scope: "col"
|
|
1606
|
+
}, selectCellPatch("header", null).attrs, { style: selectCellPatch("header", null).style }), [createVNode(_sfc_main$19, {
|
|
1607
|
+
"model-value": selection.value.isIndeterminate() ? "indeterminate" : selection.value.isAllSelected(),
|
|
1608
|
+
label: unref(messages).table.selectAllRows,
|
|
1609
|
+
"is-label-hidden": "",
|
|
1610
|
+
size: "sm",
|
|
1611
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = (value) => selection.value?.selectAll(value === true))
|
|
1612
|
+
}, null, 8, ["model-value", "label"])], 16)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
|
|
1613
|
+
return openBlock(), createElementBlock("th", mergeProps({
|
|
1614
|
+
key: column.key,
|
|
1615
|
+
scope: "col",
|
|
1616
|
+
"data-column": column.key,
|
|
1617
|
+
"data-align": column.align,
|
|
1618
|
+
class: mergeCell(column, null, "header").class
|
|
1619
|
+
}, { ref_for: true }, mergeCell(column, null, "header").attrs, {
|
|
1620
|
+
style: headerStyle(column),
|
|
1621
|
+
"aria-sort": sortFor(column)?.direction ?? void 0
|
|
1622
|
+
}), [createElementVNode("div", _hoisted_4, [createElementVNode("div", _hoisted_5, [createVNode(unref(HeaderAddon), { column }, null, 8, ["column"]), sortFor(column) ? (openBlock(), createElementBlock("button", {
|
|
1623
|
+
key: 0,
|
|
1624
|
+
type: "button",
|
|
1625
|
+
class: "astryx-table__sort",
|
|
1626
|
+
"data-align": column.align,
|
|
1627
|
+
"aria-label": sortFor(column)?.label,
|
|
1628
|
+
onClick: ($event) => sortFor(column)?.onClick($event)
|
|
1629
|
+
}, [
|
|
1630
|
+
column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 0 }, {
|
|
1631
|
+
default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
|
|
1632
|
+
_: 2
|
|
1633
|
+
}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(column.header ?? column.key), 1)),
|
|
1634
|
+
createElementVNode("span", {
|
|
1635
|
+
class: "astryx-table__sort-icon",
|
|
1636
|
+
"data-active": sortFor(column)?.direction != null || void 0
|
|
1637
|
+
}, [createVNode(_sfc_main$18, {
|
|
1638
|
+
icon: sortFor(column)?.direction === "descending" ? "arrowDown" : "arrowUp",
|
|
1639
|
+
size: "sm"
|
|
1640
|
+
}, null, 8, ["icon"])], 8, _hoisted_8),
|
|
1641
|
+
sortFor(column)?.rank ? (openBlock(), createElementBlock("span", _hoisted_9, toDisplayString(sortFor(column)?.rank), 1)) : createCommentVNode("v-if", true)
|
|
1642
|
+
], 8, _hoisted_6)) : column.headerHidden ? (openBlock(), createBlock(_sfc_main$14, { key: 1 }, {
|
|
1643
|
+
default: withCtx(() => [createTextVNode(toDisplayString(column.header ?? column.key), 1)]),
|
|
1644
|
+
_: 2
|
|
1645
|
+
}, 1024)) : (openBlock(), createElementBlock("span", _hoisted_10, toDisplayString(column.header ?? column.key), 1))]), filterFor(column) ? (openBlock(), createBlock(_sfc_main$11, {
|
|
1646
|
+
key: 0,
|
|
1647
|
+
filter: filterFor(column)
|
|
1648
|
+
}, null, 8, ["filter"])) : createCommentVNode("v-if", true)]), canResize.value && column.resizable !== false ? (openBlock(), createElementBlock("span", {
|
|
1649
|
+
key: 0,
|
|
1650
|
+
class: "astryx-table__resize",
|
|
1651
|
+
onPointerdown: ($event) => startResize($event, column)
|
|
1652
|
+
}, null, 40, _hoisted_11)) : createCommentVNode("v-if", true)], 16, _hoisted_3);
|
|
1653
|
+
}), 128))])]), createElementVNode("tbody", null, [__props.rows.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_12, [createElementVNode("td", {
|
|
1654
|
+
class: "astryx-table__empty",
|
|
1655
|
+
colspan: columnCount.value
|
|
1656
|
+
}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(unref(messages).table.noData), 1)])], 8, _hoisted_13)])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(entries.value, (entry) => {
|
|
1657
|
+
return openBlock(), createElementBlock(Fragment, { key: entry.key }, [createElementVNode("tr", mergeProps({
|
|
1658
|
+
"aria-selected": !entry.patch.group && selected(entry.row) ? "true" : void 0,
|
|
1659
|
+
"aria-rowindex": entry.rowIndex,
|
|
1660
|
+
class: entry.patch.class
|
|
1661
|
+
}, { ref_for: true }, entry.patch.attrs, {
|
|
1662
|
+
onClick: ($event) => entry.patch.onClick?.($event),
|
|
1663
|
+
onContextmenu: ($event) => openMenu($event, entry.patch.menu)
|
|
1664
|
+
}), [entry.patch.group ? (openBlock(), createElementBlock("td", {
|
|
1665
|
+
key: 0,
|
|
1666
|
+
class: "astryx-table__group",
|
|
1667
|
+
colspan: columnCount.value
|
|
1668
|
+
}, [createVNode(_sfc_main$10, {
|
|
1669
|
+
"group-key": entry.patch.group.groupKey,
|
|
1670
|
+
count: entry.patch.group.count,
|
|
1671
|
+
collapsed: entry.patch.group.collapsed,
|
|
1672
|
+
custom: entry.patch.group.render != null,
|
|
1673
|
+
onToggle: ($event) => entry.patch.group.onToggle()
|
|
1674
|
+
}, {
|
|
1675
|
+
default: withCtx(() => [entry.patch.group.render ? (openBlock(), createBlock(unref(RenderFn), {
|
|
1676
|
+
key: 0,
|
|
1677
|
+
render: entry.patch.group.render
|
|
1678
|
+
}, null, 8, ["render"])) : createCommentVNode("v-if", true)]),
|
|
1679
|
+
_: 2
|
|
1680
|
+
}, 1032, [
|
|
1681
|
+
"group-key",
|
|
1682
|
+
"count",
|
|
1683
|
+
"collapsed",
|
|
1684
|
+
"custom",
|
|
1685
|
+
"onToggle"
|
|
1686
|
+
])], 8, _hoisted_15)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [selection.value && !entry.patch.suppressSelection ? (openBlock(), createElementBlock("td", mergeProps({
|
|
1687
|
+
key: 0,
|
|
1688
|
+
class: ["astryx-table__select", selectCellPatch("body", entry.row).class]
|
|
1689
|
+
}, { ref_for: true }, selectCellPatch("body", entry.row).attrs, { style: selectCellPatch("body", entry.row).style }), [selection.value.isSelectable?.(entry.row) !== false ? (openBlock(), createBlock(_sfc_main$19, {
|
|
1690
|
+
key: 0,
|
|
1691
|
+
"model-value": selection.value.isSelected(entry.row),
|
|
1692
|
+
label: selection.value.rowLabel?.(entry.row) ? unref(messages).table.selectRowNamed(selection.value.rowLabel(entry.row)) : unref(messages).table.selectRow,
|
|
1693
|
+
"is-label-hidden": "",
|
|
1694
|
+
size: "sm",
|
|
1695
|
+
"onUpdate:modelValue": (value) => selection.value?.selectRow(entry.row, value === true)
|
|
1696
|
+
}, null, 8, [
|
|
1697
|
+
"model-value",
|
|
1698
|
+
"label",
|
|
1699
|
+
"onUpdate:modelValue"
|
|
1700
|
+
])) : createCommentVNode("v-if", true)], 16)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedColumns.value, (column) => {
|
|
1701
|
+
return openBlock(), createElementBlock("td", mergeProps({
|
|
1702
|
+
key: column.key,
|
|
1703
|
+
"data-column": column.key,
|
|
1704
|
+
"data-align": column.align,
|
|
1705
|
+
class: mergeCell(column, entry.row, "body").class
|
|
1706
|
+
}, { ref_for: true }, mergeCell(column, entry.row, "body").attrs, { style: bodyStyle(column, entry.row) }), [createVNode(unref(CellContent), {
|
|
1707
|
+
column,
|
|
1708
|
+
row: entry.row,
|
|
1709
|
+
index: entry.index
|
|
1710
|
+
}, null, 8, [
|
|
1711
|
+
"column",
|
|
1712
|
+
"row",
|
|
1713
|
+
"index"
|
|
1714
|
+
])], 16, _hoisted_16);
|
|
1715
|
+
}), 128))], 64))], 16, _hoisted_14), entry.patch.panel ? (openBlock(), createElementBlock("tr", {
|
|
1716
|
+
key: 0,
|
|
1717
|
+
"data-expansion-panel": "",
|
|
1718
|
+
class: "astryx-table__panel-row",
|
|
1719
|
+
"data-variant": entry.patch.panel.variant
|
|
1720
|
+
}, [createElementVNode("td", {
|
|
1721
|
+
class: "astryx-table__panel",
|
|
1722
|
+
colspan: columnCount.value
|
|
1723
|
+
}, [createVNode(unref(RenderFn), { render: entry.patch.panel.render }, null, 8, ["render"])], 8, _hoisted_18)], 8, _hoisted_17)) : createCommentVNode("v-if", true)], 64);
|
|
1724
|
+
}), 128))])], 12, _hoisted_2$1),
|
|
1725
|
+
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.plugins, (plugin, index) => {
|
|
1726
|
+
return openBlock(), createBlock(unref(PluginFooter), {
|
|
1727
|
+
key: index,
|
|
1728
|
+
plugin
|
|
1729
|
+
}, null, 8, ["plugin"]);
|
|
1730
|
+
}), 128)),
|
|
1731
|
+
(openBlock(), createBlock(Teleport, { to: "body" }, [menu.value ? (openBlock(), createBlock(_sfc_main$9, {
|
|
1732
|
+
key: 0,
|
|
1733
|
+
x: menu.value.x,
|
|
1734
|
+
y: menu.value.y,
|
|
1735
|
+
items: menu.value.items,
|
|
1736
|
+
onClose: _cache[1] || (_cache[1] = ($event) => menu.value = null)
|
|
1737
|
+
}, null, 8, [
|
|
1738
|
+
"x",
|
|
1739
|
+
"y",
|
|
1740
|
+
"items"
|
|
1741
|
+
])) : createCommentVNode("v-if", true)]))
|
|
1742
|
+
], 8, _hoisted_1$5);
|
|
1743
|
+
};
|
|
1744
|
+
}
|
|
1745
|
+
});
|
|
1746
|
+
//#endregion
|
|
1747
|
+
//#region src/Table/Table.vue
|
|
1748
|
+
const _hoisted_1$4 = ["aria-label"];
|
|
1749
|
+
const _hoisted_2 = [
|
|
1750
|
+
"data-density",
|
|
1751
|
+
"data-dividers",
|
|
1752
|
+
"data-striped",
|
|
1753
|
+
"data-hover",
|
|
1754
|
+
"data-overflow",
|
|
1755
|
+
"data-valign"
|
|
1756
|
+
];
|
|
1757
|
+
const _sfc_main$7 = /*@__PURE__*/ defineComponent({
|
|
1758
|
+
name: "AstryxTable",
|
|
1759
|
+
inheritAttrs: false,
|
|
1760
|
+
__name: "Table",
|
|
1761
|
+
props: {
|
|
1762
|
+
data: {},
|
|
1763
|
+
columns: {},
|
|
1764
|
+
idKey: {
|
|
1765
|
+
type: [String, Function],
|
|
1766
|
+
default: "id"
|
|
1767
|
+
},
|
|
1768
|
+
rowIndexStart: {},
|
|
1769
|
+
rowCount: {},
|
|
1770
|
+
density: { default: "balanced" },
|
|
1771
|
+
dividers: { default: "rows" },
|
|
1772
|
+
isStriped: {
|
|
1773
|
+
type: Boolean,
|
|
1774
|
+
default: false
|
|
1775
|
+
},
|
|
1776
|
+
hasHover: {
|
|
1777
|
+
type: Boolean,
|
|
1778
|
+
default: false
|
|
1779
|
+
},
|
|
1780
|
+
verticalAlign: { default: "middle" },
|
|
1781
|
+
textOverflow: { default: "wrap" },
|
|
1782
|
+
plugins: {},
|
|
1783
|
+
label: {}
|
|
1784
|
+
},
|
|
1785
|
+
setup(__props) {
|
|
1786
|
+
const props = __props;
|
|
1787
|
+
const messages = useAstryxMessages();
|
|
1788
|
+
const passedIdKey = computed(() => {
|
|
1789
|
+
const key = props.idKey;
|
|
1790
|
+
if (typeof key === "function") return (row) => key(row);
|
|
1791
|
+
return key;
|
|
1792
|
+
});
|
|
1793
|
+
const plugins = computed(() => Object.values(props.plugins ?? {}).filter((plugin) => plugin != null));
|
|
1794
|
+
const dataMode = computed(() => props.data != null);
|
|
1795
|
+
const columns = computed(() => props.columns ?? []);
|
|
1796
|
+
return (_ctx, _cache) => {
|
|
1797
|
+
return dataMode.value ? (openBlock(), createBlock(_sfc_main$8, {
|
|
1798
|
+
key: 0,
|
|
1799
|
+
class: normalizeClass(_ctx.$attrs.class),
|
|
1800
|
+
style: normalizeStyle(_ctx.$attrs.style),
|
|
1801
|
+
rows: __props.data ?? [],
|
|
1802
|
+
columns: columns.value,
|
|
1803
|
+
plugins: plugins.value,
|
|
1804
|
+
"id-key": passedIdKey.value,
|
|
1805
|
+
label: __props.label ?? unref(messages).table.label,
|
|
1806
|
+
density: __props.density,
|
|
1807
|
+
dividers: __props.dividers,
|
|
1808
|
+
"is-striped": __props.isStriped,
|
|
1809
|
+
"has-hover": __props.hasHover,
|
|
1810
|
+
"text-overflow": __props.textOverflow,
|
|
1811
|
+
"vertical-align": __props.verticalAlign,
|
|
1812
|
+
"row-index-start": __props.rowIndexStart,
|
|
1813
|
+
"row-count": __props.rowCount
|
|
1814
|
+
}, createSlots({ _: 2 }, [_ctx.$slots.empty ? {
|
|
1815
|
+
name: "empty",
|
|
1816
|
+
fn: withCtx(() => [renderSlot(_ctx.$slots, "empty")]),
|
|
1817
|
+
key: "0"
|
|
1818
|
+
} : void 0]), 1032, [
|
|
1819
|
+
"class",
|
|
1820
|
+
"style",
|
|
1821
|
+
"rows",
|
|
1822
|
+
"columns",
|
|
1823
|
+
"plugins",
|
|
1824
|
+
"id-key",
|
|
1825
|
+
"label",
|
|
1826
|
+
"density",
|
|
1827
|
+
"dividers",
|
|
1828
|
+
"is-striped",
|
|
1829
|
+
"has-hover",
|
|
1830
|
+
"text-overflow",
|
|
1831
|
+
"vertical-align",
|
|
1832
|
+
"row-index-start",
|
|
1833
|
+
"row-count"
|
|
1834
|
+
])) : (openBlock(), createElementBlock("div", {
|
|
1835
|
+
key: 1,
|
|
1836
|
+
class: "astryx-table-scroll",
|
|
1837
|
+
role: "group",
|
|
1838
|
+
"aria-label": __props.label ?? unref(messages).table.label
|
|
1839
|
+
}, [createElementVNode("table", {
|
|
1840
|
+
class: normalizeClass(["astryx-table", _ctx.$attrs.class]),
|
|
1841
|
+
style: normalizeStyle(_ctx.$attrs.style),
|
|
1842
|
+
"data-density": __props.density,
|
|
1843
|
+
"data-dividers": __props.dividers,
|
|
1844
|
+
"data-striped": __props.isStriped || void 0,
|
|
1845
|
+
"data-hover": __props.hasHover || void 0,
|
|
1846
|
+
"data-overflow": __props.textOverflow,
|
|
1847
|
+
"data-valign": __props.verticalAlign
|
|
1848
|
+
}, [renderSlot(_ctx.$slots, "default")], 14, _hoisted_2)], 8, _hoisted_1$4));
|
|
1849
|
+
};
|
|
1850
|
+
}
|
|
1851
|
+
});
|
|
1852
|
+
//#endregion
|
|
1853
|
+
//#region src/Table/TableBody.vue
|
|
1854
|
+
const _sfc_main$6 = /*@__PURE__*/ defineComponent({
|
|
1855
|
+
name: "AstryxTableBody",
|
|
1856
|
+
__name: "TableBody",
|
|
1857
|
+
setup(__props) {
|
|
1858
|
+
return (_ctx, _cache) => {
|
|
1859
|
+
return openBlock(), createElementBlock("tbody", null, [renderSlot(_ctx.$slots, "default")]);
|
|
1860
|
+
};
|
|
1861
|
+
}
|
|
1862
|
+
});
|
|
1863
|
+
//#endregion
|
|
1864
|
+
//#region src/Table/TableCell.vue
|
|
1865
|
+
const _hoisted_1$3 = [
|
|
1866
|
+
"data-align",
|
|
1867
|
+
"colspan",
|
|
1868
|
+
"rowspan",
|
|
1869
|
+
"headers"
|
|
1870
|
+
];
|
|
1871
|
+
const _sfc_main$5 = /*@__PURE__*/ defineComponent({
|
|
1872
|
+
name: "AstryxTableCell",
|
|
1873
|
+
__name: "TableCell",
|
|
1874
|
+
props: {
|
|
1875
|
+
align: {},
|
|
1876
|
+
colSpan: {},
|
|
1877
|
+
rowSpan: {},
|
|
1878
|
+
headers: {}
|
|
1879
|
+
},
|
|
1880
|
+
setup(__props) {
|
|
1881
|
+
return (_ctx, _cache) => {
|
|
1882
|
+
return openBlock(), createElementBlock("td", {
|
|
1883
|
+
"data-align": __props.align,
|
|
1884
|
+
colspan: __props.colSpan,
|
|
1885
|
+
rowspan: __props.rowSpan,
|
|
1886
|
+
headers: __props.headers
|
|
1887
|
+
}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$3);
|
|
1888
|
+
};
|
|
1889
|
+
}
|
|
1890
|
+
});
|
|
1891
|
+
//#endregion
|
|
1892
|
+
//#region src/Table/TableFooter.vue
|
|
1893
|
+
const _sfc_main$4 = /*@__PURE__*/ defineComponent({
|
|
1894
|
+
name: "AstryxTableFooter",
|
|
1895
|
+
__name: "TableFooter",
|
|
1896
|
+
setup(__props) {
|
|
1897
|
+
return (_ctx, _cache) => {
|
|
1898
|
+
return openBlock(), createElementBlock("tfoot", null, [renderSlot(_ctx.$slots, "default")]);
|
|
1899
|
+
};
|
|
1900
|
+
}
|
|
1901
|
+
});
|
|
1902
|
+
//#endregion
|
|
1903
|
+
//#region src/Table/TableHeader.vue
|
|
1904
|
+
const _sfc_main$3 = /*@__PURE__*/ defineComponent({
|
|
1905
|
+
name: "AstryxTableHeader",
|
|
1906
|
+
__name: "TableHeader",
|
|
1907
|
+
setup(__props) {
|
|
1908
|
+
return (_ctx, _cache) => {
|
|
1909
|
+
return openBlock(), createElementBlock("thead", null, [renderSlot(_ctx.$slots, "default")]);
|
|
1910
|
+
};
|
|
1911
|
+
}
|
|
1912
|
+
});
|
|
1913
|
+
//#endregion
|
|
1914
|
+
//#region src/Table/TableHeaderCell.vue
|
|
1915
|
+
const _hoisted_1$2 = [
|
|
1916
|
+
"data-align",
|
|
1917
|
+
"colspan",
|
|
1918
|
+
"rowspan"
|
|
1919
|
+
];
|
|
1920
|
+
const _sfc_main$2 = /*@__PURE__*/ defineComponent({
|
|
1921
|
+
name: "AstryxTableHeaderCell",
|
|
1922
|
+
__name: "TableHeaderCell",
|
|
1923
|
+
props: {
|
|
1924
|
+
align: {},
|
|
1925
|
+
colSpan: {},
|
|
1926
|
+
rowSpan: {},
|
|
1927
|
+
headers: {}
|
|
1928
|
+
},
|
|
1929
|
+
setup(__props) {
|
|
1930
|
+
return (_ctx, _cache) => {
|
|
1931
|
+
return openBlock(), createElementBlock("th", {
|
|
1932
|
+
scope: "col",
|
|
1933
|
+
"data-align": __props.align,
|
|
1934
|
+
colspan: __props.colSpan,
|
|
1935
|
+
rowspan: __props.rowSpan
|
|
1936
|
+
}, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$2);
|
|
1937
|
+
};
|
|
1938
|
+
}
|
|
1939
|
+
});
|
|
1940
|
+
//#endregion
|
|
1941
|
+
//#region src/Table/TableRow.vue
|
|
1942
|
+
const _hoisted_1$1 = ["data-header-row"];
|
|
1943
|
+
const _sfc_main$1 = /*@__PURE__*/ defineComponent({
|
|
1944
|
+
name: "AstryxTableRow",
|
|
1945
|
+
__name: "TableRow",
|
|
1946
|
+
props: { isHeaderRow: { type: Boolean } },
|
|
1947
|
+
setup(__props) {
|
|
1948
|
+
return (_ctx, _cache) => {
|
|
1949
|
+
return openBlock(), createElementBlock("tr", { "data-header-row": __props.isHeaderRow || void 0 }, [renderSlot(_ctx.$slots, "default")], 8, _hoisted_1$1);
|
|
1950
|
+
};
|
|
1951
|
+
}
|
|
1952
|
+
});
|
|
1953
|
+
//#endregion
|
|
1954
|
+
//#region src/Table/TableSelectionToolbar.vue
|
|
1955
|
+
const _hoisted_1 = ["aria-label"];
|
|
1956
|
+
const _sfc_main = /*@__PURE__*/ defineComponent({
|
|
1957
|
+
name: "AstryxTableSelectionToolbar",
|
|
1958
|
+
__name: "TableSelectionToolbar",
|
|
1959
|
+
props: { count: {} },
|
|
1960
|
+
emits: ["clear"],
|
|
1961
|
+
setup(__props, { emit: __emit }) {
|
|
1962
|
+
const emit = __emit;
|
|
1963
|
+
const messages = useAstryxMessages();
|
|
1964
|
+
return (_ctx, _cache) => {
|
|
1965
|
+
return openBlock(), createElementBlock("div", {
|
|
1966
|
+
class: "astryx-table-selection-toolbar",
|
|
1967
|
+
role: "region",
|
|
1968
|
+
"aria-label": unref(messages).table.bulkActionsLabel
|
|
1969
|
+
}, [
|
|
1970
|
+
createElementVNode("span", null, toDisplayString(unref(messages).table.selectedCount(__props.count)), 1),
|
|
1971
|
+
renderSlot(_ctx.$slots, "default"),
|
|
1972
|
+
createElementVNode("button", {
|
|
1973
|
+
type: "button",
|
|
1974
|
+
class: "astryx-table__sort",
|
|
1975
|
+
onClick: _cache[0] || (_cache[0] = ($event) => emit("clear"))
|
|
1976
|
+
}, toDisplayString(unref(messages).table.clearAll), 1)
|
|
1977
|
+
], 8, _hoisted_1);
|
|
1978
|
+
};
|
|
1979
|
+
}
|
|
1980
|
+
});
|
|
1981
|
+
//#endregion
|
|
1982
|
+
export { useTableColumnSettings as A, resolveColumnWidths as B, isInteractiveRowClick as C, applyTableFilters as D, useTableGroupedRows as E, generateColumns as F, paginateData as I, pixel as L, useTableColumnResize as M, capitalize as N, useTableFilterState as O, cellText as P, proportional as R, useTablePagination as S, isTableGroupHeader as T, sortRows as V, useTableSelection as _, _sfc_main$4 as a, useTableRowIndex as b, _sfc_main$7 as c, useTableTreeState as d, resolveStickySide as f, useTableSortableState as g, useTableSortable as h, _sfc_main$3 as i, useTableColumnSettingsState as j, useTableFiltering as k, flattenTree as l, useTableStickyColumns as m, _sfc_main$1 as n, _sfc_main$5 as o, stickyOffsets as p, _sfc_main$2 as r, _sfc_main$6 as s, _sfc_main as t, useTableTreeData as u, useTableSelectionState as v, buildGroupedRows as w, useTableRowExpansion as x, useTableRowStatus as y, resolveColumnFloorWidths as z };
|