@pibit.ai/cure-design-system 0.3.30 → 0.3.33
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/patterns/table/TableWrapper.d.ts.map +1 -1
- package/dist/patterns/table/TableWrapper.js +595 -587
- package/dist/patterns/table/cellRangeSelection.d.ts +19 -0
- package/dist/patterns/table/cellRangeSelection.d.ts.map +1 -1
- package/dist/patterns/table/cellRangeSelection.js +82 -70
- package/dist/patterns/table/table.js +2 -2
- package/package.json +1 -1
|
@@ -57,8 +57,27 @@ export declare function getDragScrollDeltas(scrollContainer: HTMLElement, client
|
|
|
57
57
|
dy: number;
|
|
58
58
|
};
|
|
59
59
|
export declare function resolveCellCoordFromElement(cell: HTMLElement): TableCellCoord | null;
|
|
60
|
+
/**
|
|
61
|
+
* First selectable data cell of the row a keystroke came from.
|
|
62
|
+
*
|
|
63
|
+
* Row chrome (selection checkbox, row actions, delete button) is marked `data-grid-no-range`, so a
|
|
64
|
+
* keystroke that starts there resolves to no cell at all. Anchoring on the row's first data cell
|
|
65
|
+
* keeps the leading column inside the range instead of starting one column in.
|
|
66
|
+
*/
|
|
67
|
+
export declare function resolveRowAnchorCoordFromTarget(target: EventTarget | null, container: HTMLElement | null): TableCellCoord | null;
|
|
60
68
|
/** Find the grid cell under the pointer (for drag updates while scrolling). */
|
|
61
69
|
export declare function hitTestGridCell(container: HTMLElement, clientX: number, clientY: number): HTMLElement | null;
|
|
62
70
|
export declare function canStartCellRangeFromTarget(target: EventTarget | null, container: HTMLElement | null): HTMLElement | null;
|
|
63
71
|
export declare function selectionFromSingleCell(cell: TableCellCoord): TableCellSelection;
|
|
72
|
+
/**
|
|
73
|
+
* Selection after a keyboard move from `current` towards `neighbor` (`null` at a grid edge).
|
|
74
|
+
*
|
|
75
|
+
* `extend` is Shift+Arrow. Starting a range with nothing selected yet anchors on `current`, not on
|
|
76
|
+
* `neighbor` — anchoring on the neighbor would drop the column the user started from and shift the
|
|
77
|
+
* whole range one column across.
|
|
78
|
+
*
|
|
79
|
+
* Returns `selection` unchanged when the move is a no-op, and `null` when there is nothing to
|
|
80
|
+
* select (plain arrow at a grid edge).
|
|
81
|
+
*/
|
|
82
|
+
export declare function nextKeyboardCellSelection(current: TableCellCoord, neighbor: TableCellCoord | null, selection: TableCellSelection | null | undefined, extend: boolean): TableCellSelection | null;
|
|
64
83
|
//# sourceMappingURL=cellRangeSelection.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cellRangeSelection.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/cellRangeSelection.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"cellRangeSelection.d.ts","sourceRoot":"","sources":["../../../src/patterns/table/cellRangeSelection.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
import { ROW_DRAG_THRESHOLD_PX as
|
|
2
|
-
const
|
|
1
|
+
import { ROW_REORDER_ATTR as p, ROW_DRAG_THRESHOLD_PX as b, ROW_DRAG_SCROLL_EDGE_PX as E, ROW_DRAG_SCROLL_MAX_PX as _ } from "./rowReorderDrag.js";
|
|
2
|
+
const y = b;
|
|
3
3
|
function M(n, t) {
|
|
4
4
|
return n.indexOf(t);
|
|
5
5
|
}
|
|
6
|
-
function
|
|
7
|
-
const r = M(t, n.anchor.rowId),
|
|
8
|
-
return r < 0 ||
|
|
9
|
-
rowMin: Math.min(r,
|
|
10
|
-
rowMax: Math.max(r,
|
|
11
|
-
colMin: Math.min(
|
|
12
|
-
colMax: Math.max(
|
|
6
|
+
function x(n, t, o) {
|
|
7
|
+
const r = M(t, n.anchor.rowId), l = M(t, n.focus.rowId), i = M(o, n.anchor.columnKey), e = M(o, n.focus.columnKey);
|
|
8
|
+
return r < 0 || l < 0 || i < 0 || e < 0 ? null : {
|
|
9
|
+
rowMin: Math.min(r, l),
|
|
10
|
+
rowMax: Math.max(r, l),
|
|
11
|
+
colMin: Math.min(i, e),
|
|
12
|
+
colMax: Math.max(i, e)
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
15
|
function w(n) {
|
|
16
16
|
return n.anchor.rowId === n.focus.rowId && n.anchor.columnKey === n.focus.columnKey;
|
|
17
17
|
}
|
|
18
|
-
function
|
|
19
|
-
const r =
|
|
18
|
+
function A(n, t, o) {
|
|
19
|
+
const r = x(n, t, o);
|
|
20
20
|
if (!r) return null;
|
|
21
|
-
const { rowMin:
|
|
21
|
+
const { rowMin: l, rowMax: i, colMin: e, colMax: u } = r, s = t.slice(l, i + 1), a = o.slice(e, u + 1), f = s.map((c) => c === n.anchor.rowId ? n.anchor.sourceIndex : c === n.focus.rowId ? n.focus.sourceIndex : null), h = {
|
|
22
22
|
rowId: s[0],
|
|
23
|
-
columnKey:
|
|
23
|
+
columnKey: a[0],
|
|
24
24
|
sourceIndex: f[0] ?? null
|
|
25
25
|
}, m = {
|
|
26
26
|
rowId: s[s.length - 1],
|
|
27
|
-
columnKey:
|
|
27
|
+
columnKey: a[a.length - 1],
|
|
28
28
|
sourceIndex: f[f.length - 1] ?? null
|
|
29
29
|
};
|
|
30
30
|
return {
|
|
31
31
|
rowIds: s,
|
|
32
|
-
columnKeys:
|
|
32
|
+
columnKeys: a,
|
|
33
33
|
sourceIndices: f,
|
|
34
|
-
start:
|
|
34
|
+
start: h,
|
|
35
35
|
end: m
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
|
-
function
|
|
39
|
-
const
|
|
38
|
+
function L(n, t, o, r, l) {
|
|
39
|
+
const i = {
|
|
40
40
|
top: !1,
|
|
41
41
|
bottom: !1,
|
|
42
42
|
left: !1,
|
|
@@ -48,83 +48,90 @@ function y(n, t, o, r, e) {
|
|
|
48
48
|
isAnchor: !1,
|
|
49
49
|
isFocus: !1,
|
|
50
50
|
isSingle: !1,
|
|
51
|
-
edges:
|
|
51
|
+
edges: i
|
|
52
52
|
};
|
|
53
|
-
const
|
|
54
|
-
if (!
|
|
53
|
+
const e = x(n, r, l), u = M(r, t), s = M(l, o);
|
|
54
|
+
if (!e || u < 0 || s < 0)
|
|
55
55
|
return {
|
|
56
56
|
inRange: !1,
|
|
57
57
|
isAnchor: !1,
|
|
58
58
|
isFocus: !1,
|
|
59
59
|
isSingle: w(n),
|
|
60
|
-
edges:
|
|
60
|
+
edges: i
|
|
61
61
|
};
|
|
62
|
-
const
|
|
62
|
+
const a = u >= e.rowMin && u <= e.rowMax && s >= e.colMin && s <= e.colMax, f = n.anchor.rowId === t && n.anchor.columnKey === o, h = n.focus.rowId === t && n.focus.columnKey === o, m = w(n);
|
|
63
63
|
return {
|
|
64
|
-
inRange:
|
|
64
|
+
inRange: a,
|
|
65
65
|
isAnchor: f,
|
|
66
|
-
isFocus:
|
|
66
|
+
isFocus: h,
|
|
67
67
|
isSingle: m,
|
|
68
|
-
edges:
|
|
69
|
-
top:
|
|
70
|
-
bottom:
|
|
71
|
-
left: s ===
|
|
72
|
-
right: s ===
|
|
73
|
-
} :
|
|
68
|
+
edges: a ? {
|
|
69
|
+
top: u === e.rowMin,
|
|
70
|
+
bottom: u === e.rowMax,
|
|
71
|
+
left: s === e.colMin,
|
|
72
|
+
right: s === e.colMax
|
|
73
|
+
} : i
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function T(n) {
|
|
77
77
|
const t = "var(--color-border-brand, var(--color-brand-500, #7f56d9))", o = [];
|
|
78
78
|
return n.top && o.push(`inset 0 2px 0 0 ${t}`), n.bottom && o.push(`inset 0 -2px 0 0 ${t}`), n.left && o.push(`inset 2px 0 0 0 ${t}`), n.right && o.push(`inset -2px 0 0 0 ${t}`), o.length > 0 ? o.join(", ") : void 0;
|
|
79
79
|
}
|
|
80
|
-
function
|
|
80
|
+
function H(n, t, o, r = E, l = _) {
|
|
81
81
|
const {
|
|
82
|
-
scrollTop:
|
|
83
|
-
scrollLeft:
|
|
84
|
-
scrollHeight:
|
|
82
|
+
scrollTop: i,
|
|
83
|
+
scrollLeft: e,
|
|
84
|
+
scrollHeight: u,
|
|
85
85
|
scrollWidth: s,
|
|
86
|
-
clientHeight:
|
|
86
|
+
clientHeight: a,
|
|
87
87
|
clientWidth: f
|
|
88
|
-
} = n,
|
|
89
|
-
let
|
|
90
|
-
if (
|
|
91
|
-
if (o <
|
|
92
|
-
const
|
|
93
|
-
|
|
94
|
-
} else if (o >
|
|
95
|
-
const
|
|
96
|
-
|
|
88
|
+
} = n, h = u - a, m = s - f, c = n.getBoundingClientRect();
|
|
89
|
+
let R = 0;
|
|
90
|
+
if (h > 0) {
|
|
91
|
+
if (o < c.top + r) {
|
|
92
|
+
const d = o < c.top ? 1 : (c.top + r - o) / r;
|
|
93
|
+
R = -Math.ceil(l * Math.min(1, Math.max(0, d))), i <= 0 && (R = 0);
|
|
94
|
+
} else if (o > c.bottom - r) {
|
|
95
|
+
const d = o > c.bottom ? 1 : (o - (c.bottom - r)) / r;
|
|
96
|
+
R = Math.ceil(l * Math.min(1, Math.max(0, d))), i >= h && (R = 0);
|
|
97
97
|
}
|
|
98
98
|
}
|
|
99
|
-
let
|
|
99
|
+
let g = 0;
|
|
100
100
|
if (m > 0) {
|
|
101
|
-
if (t <
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
} else if (t >
|
|
105
|
-
const
|
|
106
|
-
|
|
101
|
+
if (t < c.left + r) {
|
|
102
|
+
const d = t < c.left ? 1 : (c.left + r - t) / r;
|
|
103
|
+
g = -Math.ceil(l * Math.min(1, Math.max(0, d))), e <= 0 && (g = 0);
|
|
104
|
+
} else if (t > c.right - r) {
|
|
105
|
+
const d = t > c.right ? 1 : (t - (c.right - r)) / r;
|
|
106
|
+
g = Math.ceil(l * Math.min(1, Math.max(0, d))), e >= m && (g = 0);
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
|
-
return { dx:
|
|
109
|
+
return { dx: g, dy: R };
|
|
110
110
|
}
|
|
111
|
-
function
|
|
111
|
+
function C(n) {
|
|
112
112
|
const t = n.getAttribute("data-grid-row-id"), o = n.getAttribute("data-grid-col-key");
|
|
113
113
|
if (!t || !o) return null;
|
|
114
|
-
const r = n.getAttribute("data-grid-source-index"),
|
|
114
|
+
const r = n.getAttribute("data-grid-source-index"), l = r != null && r !== "" ? Number(r) : NaN;
|
|
115
115
|
return {
|
|
116
116
|
rowId: t,
|
|
117
117
|
columnKey: o,
|
|
118
|
-
sourceIndex: Number.isNaN(
|
|
118
|
+
sourceIndex: Number.isNaN(l) ? null : l
|
|
119
119
|
};
|
|
120
120
|
}
|
|
121
|
+
function O(n, t) {
|
|
122
|
+
if (!(n instanceof HTMLElement) || !t || !t.contains(n)) return null;
|
|
123
|
+
const o = n.closest(`[${p}]`);
|
|
124
|
+
if (!(o instanceof HTMLElement) || !t.contains(o)) return null;
|
|
125
|
+
const r = o.querySelector("[data-grid-cell]");
|
|
126
|
+
return !r || r.closest("[data-grid-no-range]") ? null : C(r);
|
|
127
|
+
}
|
|
121
128
|
function D(n, t, o) {
|
|
122
129
|
const r = document.elementFromPoint(t, o);
|
|
123
130
|
if (!(r instanceof Element)) return null;
|
|
124
|
-
const
|
|
125
|
-
return !(
|
|
131
|
+
const l = r.closest("[data-grid-cell]");
|
|
132
|
+
return !(l instanceof HTMLElement) || !n.contains(l) || l.closest("[data-grid-no-range]") ? null : l;
|
|
126
133
|
}
|
|
127
|
-
function
|
|
134
|
+
function F(n, t) {
|
|
128
135
|
if (!(n instanceof HTMLElement) || !t || !t.contains(n) || n.closest("[data-grid-no-range]") || n.closest(
|
|
129
136
|
'input, textarea, select, [contenteditable]:not([contenteditable="false"]), [role="textbox"]'
|
|
130
137
|
))
|
|
@@ -132,19 +139,24 @@ function H(n, t) {
|
|
|
132
139
|
const o = n.closest("[data-grid-cell]");
|
|
133
140
|
return !(o instanceof HTMLElement) || !t.contains(o) ? null : o;
|
|
134
141
|
}
|
|
135
|
-
function
|
|
142
|
+
function I(n) {
|
|
136
143
|
return { anchor: n, focus: n };
|
|
137
144
|
}
|
|
145
|
+
function N(n, t, o, r) {
|
|
146
|
+
return r ? o ? t ? { anchor: o.anchor, focus: t } : o : { anchor: n, focus: t ?? n } : t ? I(t) : null;
|
|
147
|
+
}
|
|
138
148
|
export {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
149
|
+
y as CELL_RANGE_DRAG_THRESHOLD_PX,
|
|
150
|
+
A as buildCellRangeRect,
|
|
151
|
+
F as canStartCellRangeFromTarget,
|
|
152
|
+
T as cellRangeEdgeBoxShadow,
|
|
153
|
+
L as getCellRangeVisualState,
|
|
154
|
+
H as getDragScrollDeltas,
|
|
155
|
+
x as getSelectionIndexBounds,
|
|
146
156
|
D as hitTestGridCell,
|
|
147
157
|
w as isSingleCellSelection,
|
|
148
|
-
|
|
149
|
-
|
|
158
|
+
N as nextKeyboardCellSelection,
|
|
159
|
+
C as resolveCellCoordFromElement,
|
|
160
|
+
O as resolveRowAnchorCoordFromTarget,
|
|
161
|
+
I as selectionFromSingleCell
|
|
150
162
|
};
|
|
@@ -200,7 +200,7 @@ const $ = ({
|
|
|
200
200
|
const S = o ? {
|
|
201
201
|
position: "sticky",
|
|
202
202
|
[o]: t,
|
|
203
|
-
zIndex:
|
|
203
|
+
zIndex: 20
|
|
204
204
|
} : {};
|
|
205
205
|
return { ...typeof p.style == "function" ? p.style(m) : p.style || {}, ...S };
|
|
206
206
|
},
|
|
@@ -334,7 +334,7 @@ const U = ({ className: s, children: i, sticky: n, stickyOffset: a = 0, ...o })
|
|
|
334
334
|
const p = n ? {
|
|
335
335
|
position: "sticky",
|
|
336
336
|
[n]: a,
|
|
337
|
-
zIndex:
|
|
337
|
+
zIndex: 10,
|
|
338
338
|
backgroundColor: "white",
|
|
339
339
|
boxShadow: n === "right" ? "inset 2px 0 0px 0px var(--color-border-tertiary)" : "inset -2px 0 0px 0px var(--color-border-tertiary)"
|
|
340
340
|
} : {};
|