@serkonda7/solid-components 0.0.3 → 0.0.6

package/README.md

@@ -1,7 +1,7 @@
 # @serkonda7/solid-components
 [![CI][ci-badge]][ci-status]
 [![npm version][npm-badge]][npm-link]
-[![npm updated][npm-date-badge]][npm-link]
+[![npm updated and downloads][npm-date-dl-badge]][npm-link]
 
 Reusable components for [SolidJS](https://www.solidjs.com/).
 
@@ -37,5 +37,5 @@ This repo is licensed under the [MIT License](LICENSE.txt).
 [ci-badge]: https://github.com/serkonda7/solid-components/actions/workflows/ci.yml/badge.svg
 [ci-status]: https://github.com/serkonda7/solid-components/actions/workflows/ci.yml
 [npm-badge]: https://nodei.co/npm/@serkonda7/solid-components.png?style=shields&data=v&color=blue
-[npm-date-badge]: https://nodei.co/npm/@serkonda7/solid-components.png?style=shields&data=u&color=blue
+[npm-date-dl-badge]: https://nodei.co/npm/@serkonda7/solid-components.png?style=shields&data=u,d&color=blue
 [npm-link]: https://www.npmjs.com/package/@serkonda7/solid-components

package/dist/data-table.d.ts

@@ -1,9 +1,14 @@
 import type { Accessor, JSX } from 'solid-js';
 export type DataTableSortDirection = 'asc' | 'desc';
+export interface DataTableSort {
+    key: string;
+    direction: DataTableSortDirection;
+}
 export interface DataTableColumn<TRow> {
     key: string;
     label: string;
     sortable?: boolean;
+    sortValue?: (row: TRow) => unknown;
     class?: string;
     ariaLabel?: string;
     getValue?: (row: TRow) => JSX.Element;
@@ -23,7 +28,10 @@ export interface DataTableProps<TRow> {
     selectionLabel?: string;
     sortKey?: string | Accessor<string | undefined>;
     sortDirection?: DataTableSortDirection | Accessor<DataTableSortDirection>;
+    defaultSort?: DataTableSort;
     onSort?: (key: string) => void;
+    onSortClear?: () => void;
+    onSortChange?: (sort: DataTableSort | undefined) => void;
     visibleColumns?: string[] | Accessor<string[]>;
     defaultVisibleColumns?: string[];
     onVisibleColumnsChange?: (visibleKeys: string[]) => void;

package/dist/index.d.ts

@@ -4,4 +4,4 @@
  * Add components here as they are implemented so consumers can import them
  * from the package root.
  */
-export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSortDirection, } from './data-table';
+export { DataTable, type DataTableColumn, type DataTableProps, type DataTableSort, type DataTableSortDirection, } from './data-table';

package/dist/index.js

@@ -1,126 +1,147 @@
 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";
 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";
 //#region src/data-table.tsx
-var g = /*#__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>"), _ = /*#__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> "), v = /*#__PURE__*/ s("<th class=data-table-checkbox><span class=data-table-visually-hidden>Select rows</span><input type=checkbox>"), y = /*#__PURE__*/ s("<th>Actions"), b = /*#__PURE__*/ s("<div><div class=data-table-scroll><table class=data-table><thead><tr></tr></thead><tbody>"), x = /*#__PURE__*/ s("<li><label class=data-table-customizer-option><input type=checkbox>"), S = /*#__PURE__*/ s("<button type=button class=data-table-sort>"), C = /*#__PURE__*/ s("<th>"), ee = /*#__PURE__*/ s("<td class=data-table-checkbox><input type=checkbox>"), w = /*#__PURE__*/ s("<td>"), T = /*#__PURE__*/ s("<tr>"), E = /*#__PURE__*/ s("<p class=data-table-status>Loading…"), D = /*#__PURE__*/ s("<p class=data-table-status>No results.");
-function O(e) {
+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.");
+function C(e) {
 	return typeof e == "function" ? e() : e;
 }
-function k(n) {
-	let s = f(() => O(n.rows)), k = () => O(n.loading ?? !1), A = () => O(n.selected ?? []), j = () => O(n.sortKey ?? void 0), M = () => O(n.sortDirection ?? "asc"), N = () => O(n.showColumnCustomizer ?? !1), P = () => n.selected !== void 0 && n.onSelectionChange !== void 0, F = () => {
-		let e = A();
+function w(n) {
+	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 = () => {
+		let e = T();
 		return s().length > 0 && s().every((t) => e.includes(n.getRowId(t)));
-	}, I = f(() => n.defaultVisibleColumns ?? n.columns.filter((e) => e.defaultVisible !== !1).map((e) => e.key)), [L, R] = p(void 0), z = () => n.visibleColumns === void 0 ? L() ?? I() : O(n.visibleColumns), B = f(() => new Set(z())), V = f(() => n.columns.filter((e) => e.toggleable === !1 || B().has(e.key))), H = f(() => n.columns.filter((e) => e.toggleable !== !1)), U = f(() => H().map((e) => e.key));
-	function W(e) {
+	}, 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));
+	function H(e, t) {
+		return t.sortValue ? t.sortValue(e) : e[t.key];
+	}
+	function U(e, t) {
+		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 });
+	}
+	let W = f(() => {
+		let e = s(), t = k();
+		if (E || !t) return e;
+		let r = n.columns.find((e) => e.key === t);
+		if (!r) return e;
+		let i = A() === "asc" ? 1 : -1;
+		return [...e].sort((e, t) => i * U(H(e, r), H(t, r)));
+	});
+	function G(e) {
+		let t = k() === e, r = t && A() === "desc" ? void 0 : {
+			key: e,
+			direction: t ? "desc" : "asc"
+		};
+		E || O(r), n.onSort?.(e), r || n.onSortClear?.(), n.onSortChange?.(r);
+	}
+	function K(e) {
 		let t = new Map(n.columns.map((e, t) => [e.key, t]));
 		return [...e].sort((e, n) => (t.get(e) ?? 0) - (t.get(n) ?? 0));
 	}
-	function G(e) {
-		let t = W(e);
-		n.visibleColumns === void 0 && R(t), n.onVisibleColumnsChange?.(t);
+	function q(e) {
+		let t = K(e);
+		n.visibleColumns === void 0 && I(t), n.onVisibleColumnsChange?.(t);
 	}
-	function K(e, t) {
-		let n = new Set(z());
-		t ? n.add(e) : n.delete(e), G(U().filter((e) => n.has(e)));
+	function oe(e, t) {
+		let n = new Set(L());
+		t ? n.add(e) : n.delete(e), q(V().filter((e) => n.has(e)));
 	}
-	function q() {
-		G(U());
+	function se() {
+		q(V());
 	}
-	function J() {
-		G(I());
+	function ce() {
+		q(P());
 	}
-	let Y = `${m()}-panel`, [X, Z] = p(!1), Q;
+	let J = `${m()}-panel`, [Y, X] = p(!1), Z;
 	d(() => {
-		if (!X() || !N()) return;
+		if (!Y() || !j()) return;
 		function e(e) {
-			Q && !Q.contains(e.target) && Z(!1);
+			Z && !Z.contains(e.target) && X(!1);
 		}
 		function t(e) {
-			e.key === "Escape" && Z(!1);
+			e.key === "Escape" && X(!1);
 		}
 		document.addEventListener("pointerdown", e), document.addEventListener("keydown", t), h(() => {
 			document.removeEventListener("pointerdown", e), document.removeEventListener("keydown", t);
 		});
 	});
-	let $;
+	let Q;
 	d(() => {
-		$ && ($.indeterminate = A().length > 0 && !F());
+		Q && (Q.indeterminate = T().length > 0 && !N());
 	});
-	function te(e) {
+	function $(e) {
 		n.onSelectionChange?.(e ? s().map(n.getRowId) : []);
 	}
-	function ne(e, t) {
-		let r = n.getRowId(e), i = A(), a = t ? [...i, r] : i.filter((e) => e !== r);
+	function le(e, t) {
+		let r = n.getRowId(e), i = T(), a = t ? [...i, r] : i.filter((e) => e !== r);
 		n.onSelectionChange?.(a);
 	}
-	function re(e) {
-		return A().includes(n.getRowId(e));
+	function ue(e) {
+		return T().includes(n.getRowId(e));
 	}
-	function ie(e) {
-		return e.toggleable === !1 || B().has(e.key);
+	function de(e) {
+		return e.toggleable === !1 || R().has(e.key);
 	}
-	function ae(e, t) {
+	function fe(e, t) {
 		return n.getCell?.(e, t) ?? t.getValue?.(e) ?? null;
 	}
 	return (() => {
-		var d = b(), f = d.firstChild, p = f.firstChild.firstChild, m = p.firstChild, h = p.nextSibling;
+		var d = _(), f = d.firstChild, p = f.firstChild.firstChild, m = p.firstChild, h = p.nextSibling;
 		return i(d, t(u, {
 			get when() {
-				return N();
+				return j();
 			},
 			get children() {
-				var e = _(), a = e.firstChild, s = a.firstChild;
+				var e = te(), a = e.firstChild, s = a.firstChild;
 				s.firstChild.nextSibling;
-				var d = Q;
-				return typeof d == "function" ? c(d, a) : Q = a, s.$$click = () => Z((e) => !e), o(s, "aria-controls", Y), i(s, () => n.columnCustomizerLabel ?? "Columns", null), i(a, t(u, {
+				var d = Z;
+				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, {
 					get when() {
-						return X();
+						return Y();
 					},
 					get children() {
-						var e = g(), a = e.firstChild, s = a.nextSibling, c = s.nextSibling.firstChild, u = c.nextSibling;
-						return o(e, "id", Y), i(a, () => n.columnCustomizerTitle ?? "Shown columns"), i(s, t(l, {
+						var e = ee(), a = e.firstChild, s = a.nextSibling, c = s.nextSibling.firstChild, u = c.nextSibling;
+						return o(e, "id", J), i(a, () => n.columnCustomizerTitle ?? "Shown columns"), i(s, t(l, {
 							get each() {
 								return n.columns;
 							},
 							children: (e) => (() => {
-								var t = x(), n = t.firstChild, a = n.firstChild;
-								return a.addEventListener("change", (t) => K(e.key, t.currentTarget.checked)), i(n, () => e.ariaLabel ?? e.label, null), r(() => a.disabled = e.toggleable === !1), r(() => a.checked = ie(e)), t;
+								var t = v(), n = t.firstChild, a = n.firstChild;
+								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;
 							})()
-						})), c.$$click = q, i(c, () => n.columnCustomizerShowAllLabel ?? "Show all"), u.$$click = J, i(u, () => n.columnCustomizerResetLabel ?? "Reset"), r(() => o(e, "aria-label", n.columnCustomizerTitle ?? "Customize columns")), e;
+						})), 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;
 					}
-				}), null), r(() => o(s, "aria-expanded", X())), e;
+				}), null), r(() => o(s, "aria-expanded", Y())), e;
 			}
 		}), f), i(m, t(u, {
 			get when() {
-				return P();
+				return M();
 			},
 			get children() {
-				var e = v(), t = e.firstChild.nextSibling;
-				t.addEventListener("change", (e) => te(e.currentTarget.checked));
-				var i = $;
-				return typeof i == "function" ? c(i, t) : $ = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = F()), e;
+				var e = ne(), t = e.firstChild.nextSibling;
+				t.addEventListener("change", (e) => $(e.currentTarget.checked));
+				var i = Q;
+				return typeof i == "function" ? c(i, t) : Q = t, r(() => o(t, "aria-label", n.selectionLabel ?? "Select all rows")), r(() => t.checked = N()), e;
 			}
 		}), null), i(m, t(l, {
 			get each() {
-				return V();
+				return z();
 			},
 			children: (s) => (() => {
-				var c = C();
+				var c = b();
 				return i(c, t(u, {
 					get when() {
-						return a(() => !!s.sortable)() && n.onSort;
+						return a(() => !!s.sortable)() && (!E || n.onSort || n.onSortChange);
 					},
 					get fallback() {
 						return s.label;
 					},
 					get children() {
-						var e = S();
-						return e.$$click = () => n.onSort?.(s.key), i(e, () => s.label, null), i(e, (() => {
-							var e = a(() => j() === s.key);
-							return () => e() ? M() === "asc" ? " ▲" : " ▼" : "";
-						})(), null), e;
+						var e = y(), t = e.firstChild;
+						return e.$$click = () => G(s.key), i(e, () => s.label, t), i(t, (() => {
+							var e = a(() => k() === s.key);
+							return () => e() ? A() === "asc" ? "▲" : "▼" : "";
+						})()), e;
 					}
 				})), r((t) => {
-					var n = s.class, r = s.sortable ? j() === s.key ? M() === "asc" ? "ascending" : "descending" : "none" : void 0;
+					var n = s.class, r = s.sortable ? k() === s.key ? A() === "asc" ? "ascending" : "descending" : "none" : void 0;
 					return n !== t.e && e(c, t.e = n), r !== t.t && o(c, "aria-sort", t.t = r), t;
 				}, {
 					e: void 0,
@@ -132,57 +153,57 @@ function k(n) {
 				return n.rowActions;
 			},
 			get children() {
-				return y();
+				return g();
 			}
 		}), null), i(h, t(l, {
 			get each() {
-				return s();
+				return W();
 			},
 			children: (a) => (() => {
-				var s = T();
+				var s = ie();
 				return i(s, t(u, {
 					get when() {
-						return P();
+						return M();
 					},
 					get children() {
-						var e = ee(), t = e.firstChild;
-						return t.addEventListener("change", (e) => ne(a, e.currentTarget.checked)), r(() => o(t, "aria-label", `Select row ${n.getRowId(a)}`)), r(() => t.checked = re(a)), e;
+						var e = re(), t = e.firstChild;
+						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;
 					}
 				}), null), i(s, t(l, {
 					get each() {
-						return V();
+						return z();
 					},
 					children: (t) => (() => {
-						var n = w();
-						return i(n, () => ae(a, t)), r(() => e(n, t.class)), n;
+						var n = x();
+						return i(n, () => fe(a, t)), r(() => e(n, t.class)), n;
 					})()
 				}), null), i(s, t(u, {
 					get when() {
 						return n.rowActions;
 					},
 					get children() {
-						var e = w();
+						var e = x();
 						return i(e, () => n.rowActions?.(a)), e;
 					}
 				}), null), s;
 			})()
 		})), i(d, t(u, {
 			get when() {
-				return k();
+				return w();
 			},
 			get children() {
-				return n.loadingContent ?? E();
+				return n.loadingContent ?? ae();
 			}
 		}), null), i(d, t(u, {
 			get when() {
-				return a(() => !k())() && (n.empty === void 0 ? s().length === 0 : O(n.empty));
+				return a(() => !w())() && (n.empty === void 0 ? s().length === 0 : C(n.empty));
 			},
 			get children() {
-				return n.emptyContent ?? D();
+				return n.emptyContent ?? S();
 			}
 		}), null), r(() => e(d, `data-table-wrap${n.class ? ` ${n.class}` : ""}`)), d;
 	})();
 }
 n(["click"]);
 //#endregion
-export { k as DataTable };
+export { w as DataTable };

package/dist/styles.css

@@ -118,6 +118,13 @@
 	text-decoration: underline;
 }
 
+.data-table-sort-indicator {
+	display: inline-block;
+	width: 1em;
+	margin-left: 0.25em;
+	text-align: center;
+}
+
 .data-table-status {
 	color: var(--text-secondary, #616161);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serkonda7/solid-components",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "Reusable components for SolidJS",
   "license": "MIT",
   "author": "serkonda7",
@@ -28,6 +28,7 @@
     "lint": "biome check --write",
     "lint:ci": "biome ci",
     "check": "tsc --noEmit",
+    "test": "vitest run",
     "examples": "vite --config examples/vite.config.ts",
     "build:dev": "bun run scripts/build.ts --dev",
     "build": "bun run check && bun run scripts/build.ts --prod",
@@ -43,9 +44,12 @@
   "devDependencies": {
     "@biomejs/biome": "2.5.14",
     "@types/bun": "1.4.2",
+    "@vitest/browser-playwright": "^5.0.2",
+    "playwright": "^1.63.0",
     "solid-js": "~1.9.15",
     "typescript": "~7.0.2",
     "vite": "~8.3.0",
-    "vite-plugin-solid": "~2.11.14"
+    "vite-plugin-solid": "~2.11.14",
+    "vitest": "^5.0.2"
   }
 }