@serkonda7/solid-components 0.0.4 → 0.0.6
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/index.js +81 -94
- package/dist/styles.css +5 -14
- package/package.json +6 -2
package/dist/index.js
CHANGED
|
@@ -1,160 +1,147 @@
|
|
|
1
1
|
import { className as e, createComponent as t, delegateEvents as n, effect as r, insert as i, memo as a, setAttribute as o, template as s, use as c } from "solid-js/web";
|
|
2
2
|
import { For as l, Show as u, createEffect as d, createMemo as f, createSignal as p, createUniqueId as m, onCleanup as h } from "solid-js";
|
|
3
3
|
//#region src/data-table.tsx
|
|
4
|
-
var
|
|
5
|
-
function
|
|
4
|
+
var ee = /*#__PURE__*/ s("<div role=dialog class=data-table-customizer-panel><p class=data-table-customizer-title></p><ul class=data-table-customizer-list></ul><div class=data-table-customizer-actions><button type=button></button><button type=button>"), te = /*#__PURE__*/ s("<div class=data-table-toolbar><div class=data-table-customizer><button type=button class=data-table-customizer-button aria-haspopup=dialog><span aria-hidden=true>⚙</span> "), ne = /*#__PURE__*/ s("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), g = /*#__PURE__*/ s("<th>Actions"), _ = /*#__PURE__*/ s("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), v = /*#__PURE__*/ s("<li><label class=data-table-customizer-option><input type=checkbox>"), y = /*#__PURE__*/ s("<button type=button class=data-table-sort><span class=data-table-sort-indicator aria-hidden=true>"), b = /*#__PURE__*/ s("<th>"), re = /*#__PURE__*/ s("<td class=data-table-checkbox><input type=checkbox>"), x = /*#__PURE__*/ s("<td>"), ie = /*#__PURE__*/ s("<tr>"), ae = /*#__PURE__*/ s("<p class=data-table-status>Loading…"), S = /*#__PURE__*/ s("<p class=data-table-status>No results.");
|
|
5
|
+
function C(e) {
|
|
6
6
|
return typeof e == "function" ? e() : e;
|
|
7
7
|
}
|
|
8
|
-
function
|
|
9
|
-
let s = f(() =>
|
|
10
|
-
let e =
|
|
8
|
+
function w(n) {
|
|
9
|
+
let s = f(() => C(n.rows)), w = () => C(n.loading ?? !1), T = () => C(n.selected ?? []), E = n.sortKey !== void 0 || n.sortDirection !== void 0, [D, O] = p(n.defaultSort), k = () => E ? C(n.sortKey ?? void 0) : D()?.key, A = () => E ? C(n.sortDirection ?? "asc") : D()?.direction ?? "asc", j = () => C(n.showColumnCustomizer ?? !1), M = () => n.selected !== void 0 && n.onSelectionChange !== void 0, N = () => {
|
|
10
|
+
let e = T();
|
|
11
11
|
return s().length > 0 && s().every((t) => e.includes(n.getRowId(t)));
|
|
12
|
-
},
|
|
13
|
-
function
|
|
12
|
+
}, P = f(() => n.defaultVisibleColumns ?? n.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [F, I] = p(void 0), L = () => n.visibleColumns === void 0 ? F() ?? P() : C(n.visibleColumns), R = f(() => new Set(L())), z = f(() => n.columns.filter((e) => e.toggleable === !1 || R().has(e.key))), B = f(() => n.columns.filter((e) => e.toggleable !== !1)), V = f(() => B().map((e) => e.key));
|
|
13
|
+
function H(e, t) {
|
|
14
14
|
return t.sortValue ? t.sortValue(e) : e[t.key];
|
|
15
15
|
}
|
|
16
|
-
function
|
|
16
|
+
function U(e, t) {
|
|
17
17
|
return e === t ? 0 : e == null ? -1 : t == null ? 1 : typeof e == "number" && typeof t == "number" ? e - t : String(e).localeCompare(String(t), void 0, { numeric: !0 });
|
|
18
18
|
}
|
|
19
|
-
let
|
|
20
|
-
let e = s(), t =
|
|
21
|
-
if (
|
|
19
|
+
let W = f(() => {
|
|
20
|
+
let e = s(), t = k();
|
|
21
|
+
if (E || !t) return e;
|
|
22
22
|
let r = n.columns.find((e) => e.key === t);
|
|
23
23
|
if (!r) return e;
|
|
24
|
-
let i =
|
|
25
|
-
return [...e].sort((e, t) => i *
|
|
24
|
+
let i = A() === "asc" ? 1 : -1;
|
|
25
|
+
return [...e].sort((e, t) => i * U(H(e, r), H(t, r)));
|
|
26
26
|
});
|
|
27
|
-
function
|
|
28
|
-
let t = {
|
|
27
|
+
function G(e) {
|
|
28
|
+
let t = k() === e, r = t && A() === "desc" ? void 0 : {
|
|
29
29
|
key: e,
|
|
30
|
-
direction:
|
|
30
|
+
direction: t ? "desc" : "asc"
|
|
31
31
|
};
|
|
32
|
-
|
|
32
|
+
E || O(r), n.onSort?.(e), r || n.onSortClear?.(), n.onSortChange?.(r);
|
|
33
33
|
}
|
|
34
|
-
function
|
|
35
|
-
D || k(void 0), n.onSortClear?.(), n.onSortChange?.(void 0);
|
|
36
|
-
}
|
|
37
|
-
function oe(e) {
|
|
34
|
+
function K(e) {
|
|
38
35
|
let t = new Map(n.columns.map((e, t) => [e.key, t]));
|
|
39
36
|
return [...e].sort((e, n) => (t.get(e) ?? 0) - (t.get(n) ?? 0));
|
|
40
37
|
}
|
|
41
|
-
function
|
|
42
|
-
let t =
|
|
43
|
-
n.visibleColumns === void 0 &&
|
|
38
|
+
function q(e) {
|
|
39
|
+
let t = K(e);
|
|
40
|
+
n.visibleColumns === void 0 && I(t), n.onVisibleColumnsChange?.(t);
|
|
44
41
|
}
|
|
45
|
-
function
|
|
46
|
-
let n = new Set(
|
|
47
|
-
t ? n.add(e) : n.delete(e),
|
|
42
|
+
function oe(e, t) {
|
|
43
|
+
let n = new Set(L());
|
|
44
|
+
t ? n.add(e) : n.delete(e), q(V().filter((e) => n.has(e)));
|
|
48
45
|
}
|
|
49
|
-
function
|
|
50
|
-
|
|
46
|
+
function se() {
|
|
47
|
+
q(V());
|
|
51
48
|
}
|
|
52
|
-
function
|
|
53
|
-
|
|
49
|
+
function ce() {
|
|
50
|
+
q(P());
|
|
54
51
|
}
|
|
55
|
-
let
|
|
52
|
+
let J = `${m()}-panel`, [Y, X] = p(!1), Z;
|
|
56
53
|
d(() => {
|
|
57
|
-
if (!
|
|
54
|
+
if (!Y() || !j()) return;
|
|
58
55
|
function e(e) {
|
|
59
|
-
|
|
56
|
+
Z && !Z.contains(e.target) && X(!1);
|
|
60
57
|
}
|
|
61
58
|
function t(e) {
|
|
62
|
-
e.key === "Escape" &&
|
|
59
|
+
e.key === "Escape" && X(!1);
|
|
63
60
|
}
|
|
64
61
|
document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), h(() => {
|
|
65
62
|
document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
|
|
66
63
|
});
|
|
67
64
|
});
|
|
68
|
-
let
|
|
65
|
+
let Q;
|
|
69
66
|
d(() => {
|
|
70
|
-
|
|
67
|
+
Q && (Q.indeterminate = T().length > 0 && !N());
|
|
71
68
|
});
|
|
72
|
-
function
|
|
69
|
+
function $(e) {
|
|
73
70
|
n.onSelectionChange?.(e ? s().map(n.getRowId) : []);
|
|
74
71
|
}
|
|
75
|
-
function
|
|
76
|
-
let r = n.getRowId(e), i =
|
|
72
|
+
function le(e, t) {
|
|
73
|
+
let r = n.getRowId(e), i = T(), a = t ? [...i, r] : i.filter((e) => e !== r);
|
|
77
74
|
n.onSelectionChange?.(a);
|
|
78
75
|
}
|
|
79
|
-
function
|
|
80
|
-
return
|
|
76
|
+
function ue(e) {
|
|
77
|
+
return T().includes(n.getRowId(e));
|
|
81
78
|
}
|
|
82
|
-
function
|
|
83
|
-
return e.toggleable === !1 ||
|
|
79
|
+
function de(e) {
|
|
80
|
+
return e.toggleable === !1 || R().has(e.key);
|
|
84
81
|
}
|
|
85
|
-
function
|
|
82
|
+
function fe(e, t) {
|
|
86
83
|
return n.getCell?.(e, t) ?? t.getValue?.(e) ?? null;
|
|
87
84
|
}
|
|
88
85
|
return (() => {
|
|
89
|
-
var d =
|
|
86
|
+
var d = _(), f = d.firstChild, p = f.firstChild.firstChild, m = p.firstChild, h = p.nextSibling;
|
|
90
87
|
return i(d, t(u, {
|
|
91
88
|
get when() {
|
|
92
|
-
return
|
|
89
|
+
return j();
|
|
93
90
|
},
|
|
94
91
|
get children() {
|
|
95
|
-
var e =
|
|
92
|
+
var e = te(), a = e.firstChild, s = a.firstChild;
|
|
96
93
|
s.firstChild.nextSibling;
|
|
97
|
-
var d =
|
|
98
|
-
return typeof d == "function" ? c(d, a) :
|
|
94
|
+
var d = Z;
|
|
95
|
+
return typeof d == "function" ? c(d, a) : Z = a, s.$$click = () => X((e) => !e), o(s, "aria-controls", J), i(s, () => n.columnCustomizerLabel ?? "Columns", null), i(a, t(u, {
|
|
99
96
|
get when() {
|
|
100
|
-
return
|
|
97
|
+
return Y();
|
|
101
98
|
},
|
|
102
99
|
get children() {
|
|
103
|
-
var e =
|
|
104
|
-
return o(e, "id",
|
|
100
|
+
var e = ee(), a = e.firstChild, s = a.nextSibling, c = s.nextSibling.firstChild, u = c.nextSibling;
|
|
101
|
+
return o(e, "id", J), i(a, () => n.columnCustomizerTitle ?? "Shown columns"), i(s, t(l, {
|
|
105
102
|
get each() {
|
|
106
103
|
return n.columns;
|
|
107
104
|
},
|
|
108
105
|
children: (e) => (() => {
|
|
109
|
-
var t =
|
|
110
|
-
return a.addEventListener("change", (t) =>
|
|
106
|
+
var t = v(), n = t.firstChild, a = n.firstChild;
|
|
107
|
+
return a.addEventListener("change", (t) => oe(e.key, t.currentTarget.checked)), i(n, () => e.ariaLabel ?? e.label, null), r(() => a.disabled = e.toggleable === !1), r(() => a.checked = de(e)), t;
|
|
111
108
|
})()
|
|
112
|
-
})), c.$$click =
|
|
109
|
+
})), c.$$click = se, i(c, () => n.columnCustomizerShowAllLabel ?? "Show all"), u.$$click = ce, i(u, () => n.columnCustomizerResetLabel ?? "Reset"), r(() => o(e, "aria-label", n.columnCustomizerTitle ?? "Customize columns")), e;
|
|
113
110
|
}
|
|
114
|
-
}), null), r(() => o(s, "aria-expanded",
|
|
111
|
+
}), null), r(() => o(s, "aria-expanded", Y())), e;
|
|
115
112
|
}
|
|
116
113
|
}), f), i(m, t(u, {
|
|
117
114
|
get when() {
|
|
118
|
-
return
|
|
115
|
+
return M();
|
|
119
116
|
},
|
|
120
117
|
get children() {
|
|
121
|
-
var e =
|
|
122
|
-
t.addEventListener("change", (e) =>
|
|
123
|
-
var i =
|
|
124
|
-
return typeof i == "function" ? c(i, t) :
|
|
118
|
+
var e = ne(), t = e.firstChild.nextSibling;
|
|
119
|
+
t.addEventListener("change", (e) => $(e.currentTarget.checked));
|
|
120
|
+
var i = Q;
|
|
121
|
+
return typeof i == "function" ? c(i, t) : Q = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = N()), e;
|
|
125
122
|
}
|
|
126
123
|
}), null), i(m, t(l, {
|
|
127
124
|
get each() {
|
|
128
|
-
return
|
|
125
|
+
return z();
|
|
129
126
|
},
|
|
130
127
|
children: (s) => (() => {
|
|
131
|
-
var c =
|
|
128
|
+
var c = b();
|
|
132
129
|
return i(c, t(u, {
|
|
133
130
|
get when() {
|
|
134
|
-
return a(() => !!s.sortable)() && n.onSort;
|
|
131
|
+
return a(() => !!s.sortable)() && (!E || n.onSort || n.onSortChange);
|
|
135
132
|
},
|
|
136
133
|
get fallback() {
|
|
137
134
|
return s.label;
|
|
138
135
|
},
|
|
139
136
|
get children() {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
})(), null), e;
|
|
146
|
-
})(), t(u, {
|
|
147
|
-
get when() {
|
|
148
|
-
return a(() => A() === s.key)() && (!D || n.onSortClear || n.onSortChange);
|
|
149
|
-
},
|
|
150
|
-
get children() {
|
|
151
|
-
var e = ne();
|
|
152
|
-
return e.$$click = q, e;
|
|
153
|
-
}
|
|
154
|
-
})];
|
|
137
|
+
var e = y(), t = e.firstChild;
|
|
138
|
+
return e.$$click = () => G(s.key), i(e, () => s.label, t), i(t, (() => {
|
|
139
|
+
var e = a(() => k() === s.key);
|
|
140
|
+
return () => e() ? A() === "asc" ? "▲" : "▼" : "";
|
|
141
|
+
})()), e;
|
|
155
142
|
}
|
|
156
143
|
})), r((t) => {
|
|
157
|
-
var n = s.class, r = s.sortable ?
|
|
144
|
+
var n = s.class, r = s.sortable ? k() === s.key ? A() === "asc" ? "ascending" : "descending" : "none" : void 0;
|
|
158
145
|
return n !== t.e && e(c, t.e = n), r !== t.t && o(c, "aria-sort", t.t = r), t;
|
|
159
146
|
}, {
|
|
160
147
|
e: void 0,
|
|
@@ -166,29 +153,29 @@ function T(n) {
|
|
|
166
153
|
return n.rowActions;
|
|
167
154
|
},
|
|
168
155
|
get children() {
|
|
169
|
-
return
|
|
156
|
+
return g();
|
|
170
157
|
}
|
|
171
158
|
}), null), i(h, t(l, {
|
|
172
159
|
get each() {
|
|
173
|
-
return
|
|
160
|
+
return W();
|
|
174
161
|
},
|
|
175
162
|
children: (a) => (() => {
|
|
176
|
-
var s =
|
|
163
|
+
var s = ie();
|
|
177
164
|
return i(s, t(u, {
|
|
178
165
|
get when() {
|
|
179
|
-
return
|
|
166
|
+
return M();
|
|
180
167
|
},
|
|
181
168
|
get children() {
|
|
182
|
-
var e =
|
|
183
|
-
return t.addEventListener("change", (e) =>
|
|
169
|
+
var e = re(), t = e.firstChild;
|
|
170
|
+
return t.addEventListener("change", (e) => le(a, e.currentTarget.checked)), r(() => o(t, "aria-label", `Select row ${n.getRowId(a)}`)), r(() => t.checked = ue(a)), e;
|
|
184
171
|
}
|
|
185
172
|
}), null), i(s, t(l, {
|
|
186
173
|
get each() {
|
|
187
|
-
return
|
|
174
|
+
return z();
|
|
188
175
|
},
|
|
189
176
|
children: (t) => (() => {
|
|
190
177
|
var n = x();
|
|
191
|
-
return i(n, () =>
|
|
178
|
+
return i(n, () => fe(a, t)), r(() => e(n, t.class)), n;
|
|
192
179
|
})()
|
|
193
180
|
}), null), i(s, t(u, {
|
|
194
181
|
get when() {
|
|
@@ -202,21 +189,21 @@ function T(n) {
|
|
|
202
189
|
})()
|
|
203
190
|
})), i(d, t(u, {
|
|
204
191
|
get when() {
|
|
205
|
-
return
|
|
192
|
+
return w();
|
|
206
193
|
},
|
|
207
194
|
get children() {
|
|
208
|
-
return n.loadingContent ??
|
|
195
|
+
return n.loadingContent ?? ae();
|
|
209
196
|
}
|
|
210
197
|
}), null), i(d, t(u, {
|
|
211
198
|
get when() {
|
|
212
|
-
return a(() => !
|
|
199
|
+
return a(() => !w())() && (n.empty === void 0 ? s().length === 0 : C(n.empty));
|
|
213
200
|
},
|
|
214
201
|
get children() {
|
|
215
|
-
return n.emptyContent ??
|
|
202
|
+
return n.emptyContent ?? S();
|
|
216
203
|
}
|
|
217
204
|
}), null), r(() => e(d, `data-table-wrap${n.class ? ` ${n.class}` : ""}`)), d;
|
|
218
205
|
})();
|
|
219
206
|
}
|
|
220
207
|
n(["click"]);
|
|
221
208
|
//#endregion
|
|
222
|
-
export {
|
|
209
|
+
export { w as DataTable };
|
package/dist/styles.css
CHANGED
|
@@ -118,20 +118,11 @@
|
|
|
118
118
|
text-decoration: underline;
|
|
119
119
|
}
|
|
120
120
|
|
|
121
|
-
.data-table-sort-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
color: inherit;
|
|
127
|
-
font: inherit;
|
|
128
|
-
line-height: 1;
|
|
129
|
-
cursor: pointer;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.data-table-sort-clear:hover {
|
|
133
|
-
color: var(--data-table-sort-clear-hover, currentColor);
|
|
134
|
-
opacity: 0.7;
|
|
121
|
+
.data-table-sort-indicator {
|
|
122
|
+
display: inline-block;
|
|
123
|
+
width: 1em;
|
|
124
|
+
margin-left: 0.25em;
|
|
125
|
+
text-align: center;
|
|
135
126
|
}
|
|
136
127
|
|
|
137
128
|
.data-table-status {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@serkonda7/solid-components",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "Reusable components for SolidJS",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "serkonda7",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"lint": "biome check --write",
|
|
29
29
|
"lint:ci": "biome ci",
|
|
30
30
|
"check": "tsc --noEmit",
|
|
31
|
+
"test": "vitest run",
|
|
31
32
|
"examples": "vite --config examples/vite.config.ts",
|
|
32
33
|
"build:dev": "bun run scripts/build.ts --dev",
|
|
33
34
|
"build": "bun run check && bun run scripts/build.ts --prod",
|
|
@@ -43,9 +44,12 @@
|
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"@biomejs/biome": "2.5.14",
|
|
45
46
|
"@types/bun": "1.4.2",
|
|
47
|
+
"@vitest/browser-playwright": "^5.0.2",
|
|
48
|
+
"playwright": "^1.63.0",
|
|
46
49
|
"solid-js": "~1.9.15",
|
|
47
50
|
"typescript": "~7.0.2",
|
|
48
51
|
"vite": "~8.3.0",
|
|
49
|
-
"vite-plugin-solid": "~2.11.14"
|
|
52
|
+
"vite-plugin-solid": "~2.11.14",
|
|
53
|
+
"vitest": "^5.0.2"
|
|
50
54
|
}
|
|
51
55
|
}
|