@varlet/ui 3.17.1 → 3.18.0-alpha.1781192892883

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.
Files changed (120) hide show
  1. package/es/action-sheet/style/index.mjs +1 -1
  2. package/es/app-bar/AppBar.mjs +2 -0
  3. package/es/app-bar/appBar.css +1 -1
  4. package/es/app-bar/props.mjs +8 -0
  5. package/es/badge/badge.css +1 -1
  6. package/es/bottom-navigation-item/BottomNavigationItem.mjs +1 -1
  7. package/es/bottom-navigation-item/bottomNavigationItem.css +1 -1
  8. package/es/button/Button.mjs +13 -6
  9. package/es/button/button.css +1 -1
  10. package/es/button/props.mjs +2 -0
  11. package/es/collapse-transition/useCollapseTransition.mjs +27 -8
  12. package/es/data-table/DataTable.mjs +655 -0
  13. package/es/data-table/DataTableBodyCell.mjs +210 -0
  14. package/es/data-table/DataTableHeaderCell.mjs +237 -0
  15. package/es/data-table/DataTableSfc.css +0 -0
  16. package/es/data-table/dataTable.css +1 -0
  17. package/es/data-table/index.mjs +12 -0
  18. package/es/data-table/props.mjs +94 -0
  19. package/es/data-table/span.mjs +29 -0
  20. package/es/data-table/style/index.mjs +17 -0
  21. package/es/data-table/useBodyRows.mjs +141 -0
  22. package/es/data-table/useColumnSizes.mjs +175 -0
  23. package/es/data-table/useColumnsFixedOffsets.mjs +90 -0
  24. package/es/data-table/useContainerScroll.mjs +35 -0
  25. package/es/data-table/useExpandRow.mjs +46 -0
  26. package/es/data-table/useFootRows.mjs +49 -0
  27. package/es/data-table/useHeaderRows.mjs +113 -0
  28. package/es/data-table/usePagination.mjs +101 -0
  29. package/es/data-table/useSelectionColumn.mjs +242 -0
  30. package/es/data-table/useSorter.mjs +70 -0
  31. package/es/data-table/useTreeExpand.mjs +69 -0
  32. package/es/icon/icon.css +1 -1
  33. package/es/index.bundle.mjs +25 -1
  34. package/es/index.mjs +21 -1
  35. package/es/locale/en-US.mjs +3 -1
  36. package/es/locale/fa-IR.mjs +3 -1
  37. package/es/locale/ja-JP.mjs +3 -1
  38. package/es/locale/zh-CN.mjs +3 -1
  39. package/es/locale/zh-TW.mjs +3 -1
  40. package/es/menu/Menu.mjs +1 -0
  41. package/es/menu/menu.css +1 -1
  42. package/es/menu-select/MenuSelect.mjs +1 -1
  43. package/es/menu-select/menuSelect.css +1 -1
  44. package/es/otp-input/OtpInput.mjs +39 -12
  45. package/es/pagination/pagination.css +1 -1
  46. package/es/rail-navigation/RailNavigation.mjs +87 -0
  47. package/es/rail-navigation/RailNavigationSfc.css +0 -0
  48. package/es/rail-navigation/index.mjs +12 -0
  49. package/es/rail-navigation/props.mjs +21 -0
  50. package/es/rail-navigation/provide.mjs +12 -0
  51. package/es/rail-navigation/railNavigation.css +1 -0
  52. package/es/rail-navigation/style/index.mjs +3 -0
  53. package/es/rail-navigation-item/RailNavigationItem.mjs +177 -0
  54. package/es/rail-navigation-item/RailNavigationItemSfc.css +0 -0
  55. package/es/rail-navigation-item/index.mjs +12 -0
  56. package/es/rail-navigation-item/props.mjs +19 -0
  57. package/es/rail-navigation-item/provide.mjs +17 -0
  58. package/es/rail-navigation-item/railNavigationItem.css +1 -0
  59. package/es/rail-navigation-item/style/index.mjs +6 -0
  60. package/es/select/Select.mjs +1 -1
  61. package/es/select/select.css +1 -1
  62. package/es/snackbar/style/index.mjs +1 -1
  63. package/es/style.mjs +4 -0
  64. package/es/styles/common.css +1 -1
  65. package/es/table/Table.mjs +22 -9
  66. package/es/table/props.mjs +3 -1
  67. package/es/table/table.css +1 -1
  68. package/es/themes/dark/appBar.mjs +3 -0
  69. package/es/themes/dark/bottomNavigationItem.mjs +1 -0
  70. package/es/themes/dark/button.mjs +3 -0
  71. package/es/themes/dark/dataTable.mjs +32 -0
  72. package/es/themes/dark/index.mjs +6 -2
  73. package/es/themes/dark/railNavigation.mjs +12 -0
  74. package/es/themes/dark/railNavigationItem.mjs +18 -0
  75. package/es/themes/dark/table.mjs +7 -3
  76. package/es/themes/dark/treeMenu.mjs +32 -0
  77. package/es/themes/md3-dark/appBar.mjs +3 -0
  78. package/es/themes/md3-dark/bottomNavigationItem.mjs +1 -0
  79. package/es/themes/md3-dark/button.mjs +3 -0
  80. package/es/themes/md3-dark/dataTable.mjs +32 -0
  81. package/es/themes/md3-dark/index.mjs +6 -2
  82. package/es/themes/md3-dark/railNavigation.mjs +12 -0
  83. package/es/themes/md3-dark/railNavigationItem.mjs +18 -0
  84. package/es/themes/md3-dark/table.mjs +7 -3
  85. package/es/themes/md3-dark/treeMenu.mjs +32 -0
  86. package/es/themes/md3-light/appBar.mjs +3 -0
  87. package/es/themes/md3-light/bottomNavigationItem.mjs +1 -0
  88. package/es/themes/md3-light/button.mjs +3 -0
  89. package/es/themes/md3-light/dataTable.mjs +32 -0
  90. package/es/themes/md3-light/index.mjs +6 -2
  91. package/es/themes/md3-light/pagination.mjs +1 -1
  92. package/es/themes/md3-light/railNavigation.mjs +12 -0
  93. package/es/themes/md3-light/railNavigationItem.mjs +18 -0
  94. package/es/themes/md3-light/table.mjs +7 -3
  95. package/es/themes/md3-light/treeMenu.mjs +32 -0
  96. package/es/tree-menu/TreeMenu.mjs +223 -0
  97. package/es/tree-menu/TreeMenuOption.mjs +206 -0
  98. package/es/tree-menu/TreeMenuSfc.css +0 -0
  99. package/es/tree-menu/index.mjs +12 -0
  100. package/es/tree-menu/props.mjs +40 -0
  101. package/es/tree-menu/style/index.mjs +6 -0
  102. package/es/tree-menu/treeMenu.css +1 -0
  103. package/es/varlet.css +1 -1
  104. package/es/varlet.esm.js +11274 -8961
  105. package/highlight/web-types.en-US.json +414 -1
  106. package/highlight/web-types.zh-CN.json +148 -1
  107. package/lib/varlet.cjs.js +10850 -8024
  108. package/lib/varlet.css +1 -1
  109. package/package.json +7 -7
  110. package/types/appBar.d.ts +6 -0
  111. package/types/button.d.ts +2 -0
  112. package/types/buttonGroup.d.ts +1 -1
  113. package/types/dataTable.d.ts +173 -0
  114. package/types/index.d.ts +8 -0
  115. package/types/railNavigation.d.ts +27 -0
  116. package/types/railNavigationItem.d.ts +38 -0
  117. package/types/styleVars.d.ts +86 -0
  118. package/types/table.d.ts +2 -0
  119. package/types/treeMenu.d.ts +80 -0
  120. package/umd/varlet.js +7 -7
@@ -0,0 +1,141 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { computed } from "vue";
21
+ import { createCellSpanMatrix, resolveSpan } from "./span.mjs";
22
+ function useBodyRows({
23
+ columns,
24
+ sourceRows,
25
+ tree,
26
+ collapsedTreeRowKeys,
27
+ expandedRowKeySet,
28
+ firstTreeColumnIndex,
29
+ getRowKey,
30
+ getTreeChildren
31
+ }) {
32
+ const allFlatRows = computed(() => {
33
+ return tree() ? buildTreeFlatRows(sourceRows(), true) : buildRows(sourceRows());
34
+ });
35
+ const visibleFlatRows = computed(() => {
36
+ return tree() ? buildTreeFlatRows(sourceRows(), false) : allFlatRows.value;
37
+ });
38
+ const treeRowMeta = computed(() => {
39
+ const rowByKey = /* @__PURE__ */ new Map();
40
+ const rowByObject = /* @__PURE__ */ new Map();
41
+ const parentKeyByChild = /* @__PURE__ */ new Map();
42
+ for (const flatRow of allFlatRows.value) {
43
+ rowByKey.set(flatRow.key, flatRow);
44
+ rowByObject.set(flatRow.row, flatRow);
45
+ if (flatRow.parentKey != null) {
46
+ parentKeyByChild.set(flatRow.key, flatRow.parentKey);
47
+ }
48
+ }
49
+ return {
50
+ rowByKey,
51
+ rowByObject,
52
+ parentKeyByChild
53
+ };
54
+ });
55
+ const bodyRows = computed(() => {
56
+ const resolvedColumns = columns();
57
+ const rowCount = visibleFlatRows.value.length;
58
+ const columnCount = resolvedColumns.length;
59
+ const matrix = createCellSpanMatrix(rowCount, columnCount);
60
+ return visibleFlatRows.value.map((flatRow, visibleRowIndex) => {
61
+ const cells = [];
62
+ resolvedColumns.forEach((column, columnIndex) => {
63
+ var _a, _b;
64
+ if (matrix.isCovered(visibleRowIndex, columnIndex)) {
65
+ return;
66
+ }
67
+ const context = { row: flatRow.row, rowIndex: flatRow.rowIndex, column };
68
+ const maxColSpan = columnCount - columnIndex;
69
+ const maxRowSpan = rowCount - visibleRowIndex;
70
+ const colSpan = resolveSpan(column.colSpan, maxColSpan, context);
71
+ const rowSpan = resolveSpan(column.rowSpan, maxRowSpan, context);
72
+ if (colSpan === 0 || rowSpan === 0) {
73
+ return;
74
+ }
75
+ matrix.cover(visibleRowIndex, columnIndex, rowSpan, colSpan);
76
+ const isTreeColumn = columnIndex === firstTreeColumnIndex.value;
77
+ cells.push({
78
+ key: `${(_b = (_a = column.key) != null ? _a : column.type) != null ? _b : columnIndex}-${visibleRowIndex}-${columnIndex}`,
79
+ columnIndex,
80
+ column,
81
+ treeLevel: isTreeColumn ? flatRow.level : void 0,
82
+ treeExpandable: isTreeColumn ? flatRow.expandable : void 0,
83
+ treeExpanded: isTreeColumn ? flatRow.treeExpanded : void 0,
84
+ colSpan: colSpan > 1 ? colSpan : void 0,
85
+ rowSpan: rowSpan > 1 ? rowSpan : void 0
86
+ });
87
+ });
88
+ return __spreadProps(__spreadValues({}, flatRow), {
89
+ expanded: expandedRowKeySet.value.has(flatRow.key),
90
+ cells
91
+ });
92
+ });
93
+ });
94
+ function buildRows(sourceRows2) {
95
+ return sourceRows2.map((row, rowIndex) => ({
96
+ key: getRowKey(row, rowIndex),
97
+ row,
98
+ rowIndex,
99
+ level: 0,
100
+ expandable: false,
101
+ treeExpanded: true
102
+ }));
103
+ }
104
+ function buildTreeFlatRows(sourceRows2, includeCollapsedChildren) {
105
+ const rows = [];
106
+ let rowIndex = 0;
107
+ function visit(source, level, parentKey, visible) {
108
+ for (const row of source) {
109
+ const currentRowIndex = rowIndex;
110
+ rowIndex += 1;
111
+ const key = getRowKey(row, currentRowIndex);
112
+ const children = getTreeChildren(row);
113
+ const expandable = tree() && children.length > 0;
114
+ const treeExpanded = !expandable || !collapsedTreeRowKeys.value.has(key);
115
+ if (includeCollapsedChildren || visible) {
116
+ rows.push({
117
+ key,
118
+ row,
119
+ rowIndex: currentRowIndex,
120
+ level,
121
+ parentKey,
122
+ expandable,
123
+ treeExpanded
124
+ });
125
+ }
126
+ visit(children, level + 1, key, visible && treeExpanded);
127
+ }
128
+ }
129
+ visit(sourceRows2, 0, void 0, true);
130
+ return rows;
131
+ }
132
+ return {
133
+ allFlatRows,
134
+ visibleFlatRows,
135
+ treeRowMeta,
136
+ bodyRows
137
+ };
138
+ }
139
+ export {
140
+ useBodyRows
141
+ };
@@ -0,0 +1,175 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __defProps = Object.defineProperties;
3
+ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
+ var __spreadValues = (a, b) => {
9
+ for (var prop in b || (b = {}))
10
+ if (__hasOwnProp.call(b, prop))
11
+ __defNormalProp(a, prop, b[prop]);
12
+ if (__getOwnPropSymbols)
13
+ for (var prop of __getOwnPropSymbols(b)) {
14
+ if (__propIsEnum.call(b, prop))
15
+ __defNormalProp(a, prop, b[prop]);
16
+ }
17
+ return a;
18
+ };
19
+ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
+ import { clamp } from "@varlet/shared";
21
+ import { computed, onBeforeUnmount, ref, watch } from "vue";
22
+ import { toPxNum, toSizeUnit } from "../utils/elements.mjs";
23
+ const defaultDataTableControlColumnWidth = 52;
24
+ function useColumnSizes({ columns, isSelectionColumn, isExpandColumn }) {
25
+ const resizedColumnWidths = ref({});
26
+ let stopActiveResize;
27
+ const resolvedColumnWidths = computed(() => {
28
+ return columns().map((column, columnIndex) => {
29
+ var _a;
30
+ return (_a = getResolvedColumnWidth(column, columnIndex)) != null ? _a : 0;
31
+ });
32
+ });
33
+ const hasResolvedColumnWidth = computed(() => {
34
+ return columns().some((column, columnIndex) => {
35
+ return getResolvedColumnWidth(column, columnIndex) != null;
36
+ });
37
+ });
38
+ const totalResolvedColumnWidth = computed(() => {
39
+ return resolvedColumnWidths.value.reduce((total, width) => total + width, 0);
40
+ });
41
+ watch(
42
+ columns,
43
+ () => {
44
+ const activeColumnIds = new Set(columns().map((column, columnIndex) => getColumnId(column, columnIndex)));
45
+ const nextWidths = {};
46
+ Object.entries(resizedColumnWidths.value).forEach(([columnId, width]) => {
47
+ if (activeColumnIds.has(columnId)) {
48
+ nextWidths[columnId] = width;
49
+ }
50
+ });
51
+ resizedColumnWidths.value = nextWidths;
52
+ },
53
+ { immediate: true }
54
+ );
55
+ onBeforeUnmount(() => {
56
+ stopActiveResize == null ? void 0 : stopActiveResize();
57
+ });
58
+ function isColumnResizable(column) {
59
+ return column.resizable === true;
60
+ }
61
+ function getColStyle(column, columnIndex) {
62
+ const style = {};
63
+ const resizedWidth = getResizedColumnWidth(column, columnIndex);
64
+ if (resizedWidth != null) {
65
+ style.width = toSizeUnit(resizedWidth);
66
+ style.minWidth = toSizeUnit(resizedWidth);
67
+ style.maxWidth = toSizeUnit(resizedWidth);
68
+ return style;
69
+ }
70
+ const resolvedWidth = getResolvedColumnWidth(column, columnIndex);
71
+ if (resolvedWidth != null) {
72
+ style.width = toSizeUnit(resolvedWidth);
73
+ }
74
+ const minWidth = getColumnMinWidth(column);
75
+ if (minWidth != null) {
76
+ style.minWidth = toSizeUnit(minWidth);
77
+ } else if (resolvedWidth != null) {
78
+ style.minWidth = toSizeUnit(resolvedWidth);
79
+ }
80
+ const maxWidth = getColumnMaxWidth(column);
81
+ if (maxWidth != null) {
82
+ style.maxWidth = toSizeUnit(maxWidth);
83
+ }
84
+ return style;
85
+ }
86
+ function startColumnResize(event, headerCell) {
87
+ var _a;
88
+ if (!isColumnResizable(headerCell.column)) {
89
+ return;
90
+ }
91
+ event.preventDefault();
92
+ event.stopPropagation();
93
+ const headerCellElement = (_a = event.currentTarget) == null ? void 0 : _a.closest("th");
94
+ if (!headerCellElement) {
95
+ return;
96
+ }
97
+ stopActiveResize == null ? void 0 : stopActiveResize();
98
+ const startX = event.clientX;
99
+ const startWidth = headerCellElement.getBoundingClientRect().width;
100
+ const columnId = getColumnId(headerCell.column, headerCell.startLeafColumnIndex);
101
+ document.addEventListener("mousemove", handlePointerMove);
102
+ document.addEventListener("mouseup", handlePointerUp);
103
+ stopActiveResize = detach;
104
+ function handlePointerMove(event2) {
105
+ const nextWidth = getLimitedColumnWidth(headerCell.column, startWidth + event2.clientX - startX);
106
+ resizedColumnWidths.value = __spreadProps(__spreadValues({}, resizedColumnWidths.value), {
107
+ [columnId]: nextWidth
108
+ });
109
+ }
110
+ function handlePointerUp() {
111
+ detach();
112
+ }
113
+ function detach() {
114
+ document.removeEventListener("mousemove", handlePointerMove);
115
+ document.removeEventListener("mouseup", handlePointerUp);
116
+ stopActiveResize = void 0;
117
+ }
118
+ }
119
+ function getResizedColumnWidth(column, columnIndex) {
120
+ return resizedColumnWidths.value[getColumnId(column, columnIndex)];
121
+ }
122
+ function getResolvedColumnWidth(column, columnIndex) {
123
+ var _a;
124
+ const resizedWidth = getResizedColumnWidth(column, columnIndex);
125
+ if (resizedWidth != null) {
126
+ return resizedWidth;
127
+ }
128
+ const preferredWidth = (_a = column.width) != null ? _a : isSelectionColumn(column) || isExpandColumn(column) ? defaultDataTableControlColumnWidth : void 0;
129
+ if (preferredWidth != null) {
130
+ return getLimitedColumnWidth(column, toPxNum(preferredWidth));
131
+ }
132
+ const minWidth = getColumnMinWidth(column);
133
+ if (minWidth != null) {
134
+ return minWidth;
135
+ }
136
+ }
137
+ function getColumnId(column, columnIndex) {
138
+ var _a, _b;
139
+ return `${(_b = (_a = column.key) != null ? _a : column.type) != null ? _b : "column"}-${columnIndex}`;
140
+ }
141
+ function getColumnMinWidth(column) {
142
+ if (column.minWidth == null) {
143
+ return;
144
+ }
145
+ const minWidth = toPxNum(column.minWidth);
146
+ const maxWidth = getColumnMaxWidth(column);
147
+ if (maxWidth == null) {
148
+ return minWidth;
149
+ }
150
+ return Math.min(minWidth, maxWidth);
151
+ }
152
+ function getColumnMaxWidth(column) {
153
+ if (column.maxWidth == null) {
154
+ return;
155
+ }
156
+ return toPxNum(column.maxWidth);
157
+ }
158
+ function getLimitedColumnWidth(column, width) {
159
+ var _a, _b;
160
+ const minWidth = (_a = getColumnMinWidth(column)) != null ? _a : 0;
161
+ const maxWidth = (_b = getColumnMaxWidth(column)) != null ? _b : Number.POSITIVE_INFINITY;
162
+ return clamp(width, minWidth, maxWidth);
163
+ }
164
+ return {
165
+ hasResolvedColumnWidth,
166
+ resolvedColumnWidths,
167
+ totalResolvedColumnWidth,
168
+ getColStyle,
169
+ isColumnResizable,
170
+ startColumnResize
171
+ };
172
+ }
173
+ export {
174
+ useColumnSizes
175
+ };
@@ -0,0 +1,90 @@
1
+ import { computed } from "vue";
2
+ function useColumnsFixedOffsets({ columns, resolvedColumnWidths }) {
3
+ const lastLeftFixedColumnIndex = computed(() => {
4
+ return findEdgeFixedColumnIndex("left");
5
+ });
6
+ const firstRightFixedColumnIndex = computed(() => {
7
+ return findEdgeFixedColumnIndex("right");
8
+ });
9
+ const leftFixedOffsets = computed(() => {
10
+ return buildFixedOffsets("left");
11
+ });
12
+ const rightFixedOffsets = computed(() => {
13
+ return buildFixedOffsets("right");
14
+ });
15
+ function getFixedStyle(fixed, columnIndex) {
16
+ var _a, _b;
17
+ if (fixed === "left") {
18
+ return {
19
+ left: `${(_a = leftFixedOffsets.value[columnIndex]) != null ? _a : 0}px`,
20
+ position: "sticky",
21
+ zIndex: 2
22
+ };
23
+ }
24
+ if (fixed === "right") {
25
+ return {
26
+ right: `${(_b = rightFixedOffsets.value[columnIndex]) != null ? _b : 0}px`,
27
+ position: "sticky",
28
+ zIndex: 2
29
+ };
30
+ }
31
+ return {};
32
+ }
33
+ function buildFixedOffsets(direction) {
34
+ const resolvedColumns = columns();
35
+ const widths = resolvedColumnWidths();
36
+ const offsets = Array(resolvedColumns.length).fill(void 0);
37
+ let offset = 0;
38
+ if (direction === "left") {
39
+ for (let index = 0; index < resolvedColumns.length; index += 1) {
40
+ if (resolvedColumns[index].fixed !== "left") {
41
+ continue;
42
+ }
43
+ offsets[index] = offset;
44
+ offset += widths[index];
45
+ }
46
+ return offsets;
47
+ }
48
+ for (let index = resolvedColumns.length - 1; index >= 0; index -= 1) {
49
+ if (resolvedColumns[index].fixed !== "right") {
50
+ continue;
51
+ }
52
+ offsets[index] = offset;
53
+ offset += widths[index];
54
+ }
55
+ return offsets;
56
+ }
57
+ function isLastLeftFixedColumn(columnIndex) {
58
+ return lastLeftFixedColumnIndex.value === columnIndex;
59
+ }
60
+ function isFirstRightFixedColumn(columnIndex) {
61
+ return firstRightFixedColumnIndex.value === columnIndex;
62
+ }
63
+ function findEdgeFixedColumnIndex(direction) {
64
+ const resolvedColumns = columns();
65
+ if (direction === "left") {
66
+ for (let index = resolvedColumns.length - 1; index >= 0; index -= 1) {
67
+ if (resolvedColumns[index].fixed === "left") {
68
+ return index;
69
+ }
70
+ }
71
+ return -1;
72
+ }
73
+ for (let index = 0; index < resolvedColumns.length; index += 1) {
74
+ if (resolvedColumns[index].fixed === "right") {
75
+ return index;
76
+ }
77
+ }
78
+ return -1;
79
+ }
80
+ return {
81
+ getFixedStyle,
82
+ isFirstRightFixedColumn,
83
+ isLastLeftFixedColumn,
84
+ leftFixedOffsets,
85
+ rightFixedOffsets
86
+ };
87
+ }
88
+ export {
89
+ useColumnsFixedOffsets
90
+ };
@@ -0,0 +1,35 @@
1
+ import { onWindowResize, useResizeObserver } from "@varlet/use";
2
+ import { nextTick, ref, watch } from "vue";
3
+ function useContainerScroll(sources = []) {
4
+ const container = ref();
5
+ const scrollLeft = ref(0);
6
+ const maxScrollDistance = ref(0);
7
+ watch(sources, syncContainerScrollAfterRender, { immediate: true, flush: "post" });
8
+ useResizeObserver(container, syncContainerScrollAfterRender);
9
+ onWindowResize(syncContainerScrollAfterRender);
10
+ function syncContainerScrollAfterRender() {
11
+ nextTick(syncContainerScroll);
12
+ }
13
+ function syncContainerScroll() {
14
+ if (container.value) {
15
+ updateContainerScrollState(container.value);
16
+ }
17
+ }
18
+ function updateContainerScrollState(element) {
19
+ scrollLeft.value = element.scrollLeft;
20
+ maxScrollDistance.value = Math.max(element.scrollWidth - element.clientWidth, 0);
21
+ }
22
+ function handleContainerScroll(event) {
23
+ updateContainerScrollState(event.currentTarget);
24
+ }
25
+ return {
26
+ container,
27
+ scrollLeft,
28
+ maxScrollDistance,
29
+ handleContainerScroll,
30
+ syncContainerScroll
31
+ };
32
+ }
33
+ export {
34
+ useContainerScroll
35
+ };
@@ -0,0 +1,46 @@
1
+ import { computed } from "vue";
2
+ function useExpandRow({ columns, expandedRowKeys, isExpandColumn }) {
3
+ const expandedRowKeySet = computed(() => new Set(expandedRowKeys.value));
4
+ const expandColumn = computed(() => columns().find(isExpandColumn));
5
+ function isRowExpandable(bodyRow, column) {
6
+ if (!(column == null ? void 0 : column.expandable)) {
7
+ return true;
8
+ }
9
+ return column.expandable({
10
+ row: bodyRow.row,
11
+ rowIndex: bodyRow.rowIndex
12
+ });
13
+ }
14
+ function toggleRowExpanded(bodyRow) {
15
+ const column = expandColumn.value;
16
+ if (!column || !isRowExpandable(bodyRow, column)) {
17
+ return;
18
+ }
19
+ const target = new Set(expandedRowKeys.value);
20
+ if (target.has(bodyRow.key)) {
21
+ target.delete(bodyRow.key);
22
+ } else {
23
+ target.add(bodyRow.key);
24
+ }
25
+ expandedRowKeys.value = [...target];
26
+ }
27
+ function renderExpandedRow(bodyRow) {
28
+ const column = expandColumn.value;
29
+ if (!column) {
30
+ return;
31
+ }
32
+ return column.renderExpand({
33
+ row: bodyRow.row,
34
+ rowIndex: bodyRow.rowIndex
35
+ });
36
+ }
37
+ return {
38
+ expandedRowKeySet,
39
+ isRowExpandable,
40
+ toggleRowExpanded,
41
+ renderExpandedRow
42
+ };
43
+ }
44
+ export {
45
+ useExpandRow
46
+ };
@@ -0,0 +1,49 @@
1
+ import { normalizeToArray } from "@varlet/shared";
2
+ import { computed } from "vue";
3
+ import { createCellSpanMatrix, resolveSpan } from "./span.mjs";
4
+ function useFootRows({ columns, sourceRows, summary }) {
5
+ const footRows = computed(() => {
6
+ const summaryGetter = summary();
7
+ if (!summaryGetter) {
8
+ return [];
9
+ }
10
+ const summaryResult = summaryGetter({ data: sourceRows() });
11
+ const summaryRecords = normalizeToArray(summaryResult);
12
+ const resolvedColumns = columns();
13
+ const matrix = createCellSpanMatrix(summaryRecords.length, resolvedColumns.length);
14
+ return summaryRecords.map(
15
+ (summaryRecord, rowIndex) => resolvedColumns.flatMap((column, columnIndex) => {
16
+ var _a, _b;
17
+ if (matrix.isCovered(rowIndex, columnIndex)) {
18
+ return [];
19
+ }
20
+ const key = (_b = (_a = column.key) != null ? _a : column.type) != null ? _b : String(columnIndex);
21
+ const summaryCell = summaryRecord[key];
22
+ const maxColSpan = resolvedColumns.length - columnIndex;
23
+ const maxRowSpan = summaryRecords.length - rowIndex;
24
+ const colSpan = resolveSpan(summaryCell == null ? void 0 : summaryCell.colSpan, maxColSpan);
25
+ const rowSpan = resolveSpan(summaryCell == null ? void 0 : summaryCell.rowSpan, maxRowSpan);
26
+ if (colSpan === 0 || rowSpan === 0) {
27
+ return [];
28
+ }
29
+ matrix.cover(rowIndex, columnIndex, rowSpan, colSpan);
30
+ return [
31
+ {
32
+ key: `${rowIndex}-${key}`,
33
+ columnIndex,
34
+ column,
35
+ value: summaryCell == null ? void 0 : summaryCell.value,
36
+ colSpan: colSpan > 1 ? colSpan : void 0,
37
+ rowSpan: rowSpan > 1 ? rowSpan : void 0
38
+ }
39
+ ];
40
+ })
41
+ );
42
+ });
43
+ return {
44
+ footRows
45
+ };
46
+ }
47
+ export {
48
+ useFootRows
49
+ };
@@ -0,0 +1,113 @@
1
+ import { isArray } from "@varlet/shared";
2
+ import { computed } from "vue";
3
+ import { resolveSpan } from "./span.mjs";
4
+ function useHeaderRows({ columns }) {
5
+ const normalizedColumns = computed(() => flattenLeafColumns(columns()));
6
+ const headerRows = computed(() => {
7
+ const rawColumns = columns();
8
+ const rows = [];
9
+ const maxDepth = getColumnsMaxDepth(rawColumns);
10
+ let nextLeafColumnIndex = 0;
11
+ buildHeaderRows(rawColumns, 0);
12
+ function buildHeaderRows(columns2, rowIndex) {
13
+ if (!rows[rowIndex]) {
14
+ rows[rowIndex] = [];
15
+ }
16
+ const headerRow = rows[rowIndex];
17
+ const leafRangeStart = nextLeafColumnIndex;
18
+ const leafRangeEnd = leafRangeStart + flattenLeafColumns(columns2).length - 1;
19
+ let coveredUntilLeafColumnIndex = leafRangeStart;
20
+ let visibleLeafColSpan = 0;
21
+ columns2.forEach((column, columnIndex) => {
22
+ if (isGroupColumn(column)) {
23
+ visibleLeafColSpan += buildGroupHeaderCell(headerRow, column, rowIndex, columnIndex);
24
+ return;
25
+ }
26
+ const colSpan = buildLeafHeaderCell(headerRow, column, rowIndex, leafRangeEnd, coveredUntilLeafColumnIndex);
27
+ if (colSpan > 1) {
28
+ coveredUntilLeafColumnIndex = nextLeafColumnIndex - 1 + colSpan;
29
+ }
30
+ visibleLeafColSpan += colSpan;
31
+ });
32
+ return visibleLeafColSpan;
33
+ }
34
+ function buildGroupHeaderCell(headerRow, column, rowIndex, columnIndex) {
35
+ const startLeafColumnIndex = nextLeafColumnIndex;
36
+ const colSpan = buildHeaderRows(column.children, rowIndex + 1);
37
+ const endLeafColumnIndex = nextLeafColumnIndex - 1;
38
+ if (colSpan === 0) {
39
+ return 0;
40
+ }
41
+ headerRow.push({
42
+ key: getHeaderCellKey(column, rowIndex, columnIndex),
43
+ column,
44
+ colSpan,
45
+ startLeafColumnIndex,
46
+ endLeafColumnIndex,
47
+ fixed: resolveHeaderCellFixed(normalizedColumns.value.slice(startLeafColumnIndex, endLeafColumnIndex + 1))
48
+ });
49
+ return colSpan;
50
+ }
51
+ function buildLeafHeaderCell(headerRow, column, rowIndex, leafRangeEnd, coveredUntilLeafColumnIndex) {
52
+ if (nextLeafColumnIndex < coveredUntilLeafColumnIndex) {
53
+ nextLeafColumnIndex += 1;
54
+ return 0;
55
+ }
56
+ const startLeafColumnIndex = nextLeafColumnIndex;
57
+ const maxColSpan = leafRangeEnd - startLeafColumnIndex + 1;
58
+ const colSpan = resolveSpan(column.titleColSpan, maxColSpan);
59
+ nextLeafColumnIndex += 1;
60
+ if (colSpan === 0) {
61
+ return 0;
62
+ }
63
+ headerRow.push({
64
+ key: getHeaderCellKey(column, rowIndex, startLeafColumnIndex),
65
+ column,
66
+ colSpan: colSpan > 1 ? colSpan : void 0,
67
+ rowSpan: maxDepth - rowIndex > 1 ? maxDepth - rowIndex : void 0,
68
+ startLeafColumnIndex,
69
+ endLeafColumnIndex: startLeafColumnIndex + colSpan - 1,
70
+ fixed: resolveHeaderCellFixed(
71
+ normalizedColumns.value.slice(startLeafColumnIndex, startLeafColumnIndex + colSpan)
72
+ )
73
+ });
74
+ return colSpan;
75
+ }
76
+ return rows;
77
+ });
78
+ function isGroupColumn(column) {
79
+ return "children" in column && isArray(column.children) && column.children.length > 0;
80
+ }
81
+ function flattenLeafColumns(columns2) {
82
+ return columns2.flatMap((column) => isGroupColumn(column) ? flattenLeafColumns(column.children) : [column]);
83
+ }
84
+ function getHeaderCellKey(column, depth, columnIndex) {
85
+ var _a, _b;
86
+ return `${(_b = (_a = column.key) != null ? _a : column.type) != null ? _b : "group"}-header-${depth}-${columnIndex}`;
87
+ }
88
+ function getColumnsMaxDepth(columns2) {
89
+ if (!columns2.length) {
90
+ return 0;
91
+ }
92
+ return Math.max(...columns2.map((column) => isGroupColumn(column) ? 1 + getColumnsMaxDepth(column.children) : 1));
93
+ }
94
+ function resolveHeaderCellFixed(columns2) {
95
+ if (!columns2.length) {
96
+ return;
97
+ }
98
+ if (columns2.every((column) => column.fixed === "left")) {
99
+ return "left";
100
+ }
101
+ if (columns2.every((column) => column.fixed === "right")) {
102
+ return "right";
103
+ }
104
+ }
105
+ return {
106
+ normalizedColumns,
107
+ headerRows,
108
+ isGroupColumn
109
+ };
110
+ }
111
+ export {
112
+ useHeaderRows
113
+ };