melonykit 0.15.11 → 0.15.12

package/dist/index.js

@@ -1464,27 +1464,30 @@ function kt({ size: e = 1 }) {
 }
 //#endregion
 //#region src/components/_text-field.jsx
-function At({ placeholder: e, value: t, width: r, isDisabled: a, onChange: l }) {
-	let u = i(), d = n(t);
-	function f({ target: e }) {
-		d.value = e.value, l?.(d.value);
+function At({ placeholder: e, value: t, width: a, isDisabled: l, onChange: u }) {
+	let d = i(), f = n(t);
+	r(() => {
+		f.value = t ?? "";
+	}, [t]);
+	function p({ target: e }) {
+		f.value = e.value, u?.(f.value);
 	}
 	return /* @__PURE__ */ s(o, { children: /* @__PURE__ */ c("div", {
 		className: jt.base,
-		style: { width: r },
-		"is-disabled": a,
-		children: [!d.value && e && /* @__PURE__ */ s("label", {
+		style: { width: a },
+		"is-disabled": l,
+		children: [!f.value && e && /* @__PURE__ */ s("label", {
 			className: jt.label,
-			htmlFor: u,
+			htmlFor: d,
 			children: e
 		}), /* @__PURE__ */ s("input", {
-			id: u,
-			name: u,
+			id: d,
+			name: d,
 			className: jt.input,
-			value: d.value,
-			disabled: a,
+			value: f.value,
+			disabled: l,
 			autocomplete: "off",
-			onInput: f
+			onInput: p
 		})]
 	}) });
 }
@@ -1753,6 +1756,11 @@ var Pt = {
             background-color: ${U.colors.primary};
         }
 
+        &:disabled::-webkit-slider-thumb {
+            border-color: ${U.colors.border};
+            background-color: ${U.colors.border};
+        }
+
         &::-moz-range-track {
             height: .25rem;
             border-radius: 1rem;
@@ -1767,6 +1775,11 @@ var Pt = {
             background-color: ${U.colors.primary};
         }
 
+        &:disabled::-moz-range-thumb {
+            border-color: ${U.colors.border};
+            background-color: ${U.colors.border};
+        }
+
         &:focus-visible {
             outline: solid 2px ${U.colors.primary};
             outline-offset: .25rem;
@@ -2227,10 +2240,16 @@ var Q = {
 };
 //#endregion
 //#region src/components/_table.jsx
-function Yt({ columns: e = [], rows: t = [], width: n, height: r, showLineNumbers: i = !0, sortBy: a, sortDirection: l = "asc", className: u }) {
-	let d = tn(t, e, a, l);
+function Yt({ columns: e = [], rows: t = [], width: n, height: r, showLineNumbers: i = !0, sortBy: a, sortDirection: l = "asc", onRowClick: u, className: d }) {
+	let f = tn(t, e, a, l);
+	function p(e, t, n) {
+		rn(e) || u?.(e, t, n);
+	}
+	function m(e, t, n) {
+		["Enter", " "].includes(e.key) && (rn(e) || (e.preventDefault(), p(e, t, n)));
+	}
 	return /* @__PURE__ */ s(o, { children: /* @__PURE__ */ s("div", {
-		className: V($.base, u),
+		className: V($.base, d),
 		style: {
 			width: n,
 			height: r
@@ -2248,20 +2267,27 @@ function Yt({ columns: e = [], rows: t = [], width: n, height: r, showLineNumber
 					onClick: (t) => e.onClick?.(t, e),
 					children: e.label
 				}, e.key))] }) }),
-				/* @__PURE__ */ s("tbody", { children: d.length === 0 ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", {
+				/* @__PURE__ */ s("tbody", { children: f.length === 0 ? /* @__PURE__ */ s("tr", { children: /* @__PURE__ */ s("td", {
 					className: $.empty,
+					"is-empty": !0,
 					colSpan: Math.max(e.length + Number(i), 1),
 					children: /* @__PURE__ */ s("span", {
 						className: $.emptyContent,
 						children: "Keine Einträge ..."
 					})
-				}) }) : d.map((t, n) => /* @__PURE__ */ c("tr", { children: [i && /* @__PURE__ */ s("td", {
-					className: $.number,
-					children: n + 1
-				}), e.map((e) => /* @__PURE__ */ s("td", {
-					style: Qt(e, t, n),
-					children: en(e, t, n)
-				}, e.key))] }, t.key ?? n)) })
+				}) }) : f.map((t, n) => /* @__PURE__ */ c("tr", {
+					"is-clickable": u ? !0 : void 0,
+					tabIndex: u ? 0 : void 0,
+					onClick: u ? (e) => p(e, t, n) : void 0,
+					onKeyDown: u ? (e) => m(e, t, n) : void 0,
+					children: [i && /* @__PURE__ */ s("td", {
+						className: $.number,
+						children: n + 1
+					}), e.map((e) => /* @__PURE__ */ s("td", {
+						style: Qt(e, t, n),
+						children: en(e, t, n)
+					}, e.key))]
+				}, t.key ?? n)) })
 			]
 		})
 	}) });
@@ -2308,18 +2334,19 @@ function nn(e, t) {
 	let n = t[e.key];
 	return e.sortValue?.(n, t) ?? n ?? "";
 }
+function rn(e) {
+	return e.target instanceof Element && e.target.closest("a, button, input, select, textarea, label, summary, [contenteditable=\"true\"], [role=\"button\"], [role=\"link\"], [role=\"checkbox\"], [role=\"switch\"]");
+}
 var $ = {
 	base: H`
-        display: inline-block;
+        display: block;
         position: relative;
         max-width: 100%;
         overflow: auto;
-        border: solid 1px ${U.colors.border};
-        border-radius: 10px;
-        background-color: ${U.colors.back.primary};
     `,
 	table: H`
         width: max-content;
+        min-width: 100%;
         border-spacing: 0;
         color: ${U.colors.fore.primary};
         font-family: ${U.fontFamily}, sans-serif;
@@ -2328,9 +2355,9 @@ var $ = {
         letter-spacing: .4px;
 
         th,
-        td {
-            height: 2.75rem;
-            padding: .75rem 1rem;
+        td:not([is-empty]) {
+            height: 3.25rem;
+            padding: 1rem 1.25rem;
             border-bottom: solid 1px #e9ebed;
             text-align: left;
             vertical-align: middle;
@@ -2342,7 +2369,7 @@ var $ = {
             z-index: ${U.zIndex.front};
             top: 0;
             color: ${U.colors.fore.secondary};
-            background-color: ${U.colors.back.secondary};
+            background-color: ${U.colors.back.primary};
             font-size: .65rem;
             font-weight: 700;
             letter-spacing: .8px;
@@ -2350,6 +2377,17 @@ var $ = {
 
         th[is-clickable] { cursor: pointer; }
 
+        tbody tr { transition: background-color .15s ease; }
+
+        tbody tr:hover { background-color: ${U.colors.back.secondary}; }
+
+        tbody tr[is-clickable] { cursor: pointer; }
+
+        tbody tr[is-clickable]:focus-visible {
+            outline: solid 2px ${U.colors.primary};
+            outline-offset: -2px;
+        }
+
         tbody tr:last-child td { border-bottom: 0; }
     `,
 	line: H`

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Vadim Hermann",
     "name": "melonykit",
-    "version": "0.15.11",
+    "version": "0.15.12",
     "type": "module",
     "description": "Preact based ui and utility functions toolkit",
     "main": "./dist/index.js",
@@ -36,7 +36,7 @@
         "@playwright/test": "1.63.0",
         "@preact/preset-vite": "2.10.6",
         "@preact/signals": "2.11.2",
-        "@types/node": "26.5.1",
+        "@types/node": "26.6.2",
         "preact": "10.29.8",
         "vite": "8.3.0",
         "vite-plugin-mkcert": "2.1.0"