melonykit 0.7.1 → 0.7.3

package/dist/browser.js

@@ -0,0 +1,64 @@
+import { r as e } from "./functions-C8th2V6m.js";
+import { signal as t } from "@preact/signals";
+import { useEffect as n, useMemo as r } from "preact/hooks";
+//#region src/browser/_route-to.js
+function i(e, t = !1) {
+	t ? history.replaceState(null, "", e) : history.pushState(null, "", e), dispatchEvent(new PopStateEvent("popstate"));
+}
+//#endregion
+//#region src/browser/_use-api-query.js
+var a = /* @__PURE__ */ new Map(), o = null;
+function s({ endpoint: i, event: a }) {
+	let o = r(() => {
+		let n = t(null), r = t(!1), a = t(null);
+		async function o() {
+			r.value = !0, a.value = null;
+			try {
+				let t = await e({
+					url: `/api/${i}`,
+					method: "GET"
+				});
+				if (!t.success) throw Error("Could not query data.");
+				n.value = t.data;
+			} catch (e) {
+				console.log(e), a.value = e;
+			} finally {
+				r.value = !1;
+			}
+		}
+		return {
+			data: n,
+			loading: r,
+			error: a,
+			refetch: o
+		};
+	}, [i]);
+	return n(() => {
+		let e = l(a, (e) => {
+			o.data.value = e;
+		});
+		return o.refetch(), e;
+	}, [o, a]), o;
+}
+function c() {
+	return o ||= new EventSource("/api/events"), o;
+}
+function l(e, t) {
+	let n = c();
+	if (!a.has(e)) {
+		let t = /* @__PURE__ */ new Set(), r = (e) => {
+			let n = e.data ? JSON.parse(e.data) : null;
+			for (let e of t) e(n);
+		};
+		a.set(e, {
+			callbacks: t,
+			handler: r
+		}), n.addEventListener(e, r);
+	}
+	let r = a.get(e);
+	return r.callbacks.add(t), () => {
+		r.callbacks.delete(t), r.callbacks.size === 0 && (n.removeEventListener(e, r.handler), a.delete(e));
+	};
+}
+//#endregion
+export { i as routeTo, s as useApiQuery };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { i as e, o as t } from "./functions-C8th2V6m.js";
-import { Fragment as n, jsx as r, jsxs as i } from "preact/jsx-runtime";
-import { useSignal as a } from "@preact/signals";
-import { useEffect as o, useId as s } from "preact/hooks";
+import { useSignal as n } from "@preact/signals";
+import { useEffect as r, useId as i } from "preact/hooks";
+import { Fragment as a, jsx as o, jsxs as s } from "preact/jsx-runtime";
 //#region node_modules/@emotion/sheet/dist/emotion-sheet.esm.js
 function c(e) {
 	if (e.sheet) return e.sheet;
@@ -861,9 +861,9 @@ var Qe = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"position:absolute;wi
 //#endregion
 //#region src/components/_app-wrapper.jsx
 function tt({ maxWidth: e = "67.5rem", children: t }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 		className: nt.base,
-		children: /* @__PURE__ */ r("div", {
+		children: /* @__PURE__ */ o("div", {
 			className: nt.inner,
 			style: { maxWidth: e },
 			children: t
@@ -889,12 +889,12 @@ var nt = {
         padding: 8rem 0;
         margin: 0 auto;
     `
-}, rt = ({ type: e = "normal", width: t = "100%", value: i = 0 }) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+}, rt = ({ type: e = "normal", width: t = "100%", value: n = 0 }) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 	className: X.base,
 	style: { width: t },
-	children: /* @__PURE__ */ r("div", {
+	children: /* @__PURE__ */ o("div", {
 		className: q(X.value, X[e] ?? X.normal),
-		style: { width: `${i}%` }
+		style: { width: `${n}%` }
 	})
 }) }), X = {
 	base: J`
@@ -924,14 +924,14 @@ var nt = {
 };
 //#endregion
 //#region src/components/_box.jsx
-function it({ className: e, width: t, height: i, children: a }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+function it({ className: e, width: t, height: n, children: r }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 		className: q(at.base, e),
 		style: {
 			width: t,
-			height: i
+			height: n
 		},
-		children: a
+		children: r
 	}) });
 }
 var at = { base: J`
@@ -944,17 +944,17 @@ var at = { base: J`
     ` };
 //#endregion
 //#region src/components/_icon.jsx
-function Z({ className: e, size: t = "1.25rem", color: i = Y.colors.fore.primary, iconName: a, isSpinning: o }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("svg", {
+function Z({ className: e, size: t = "1.25rem", color: n = Y.colors.fore.primary, iconName: r, isSpinning: i }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("svg", {
 		className: q(ot.base, e),
 		style: {
-			color: i,
+			color: n,
 			width: t,
 			height: t
 		},
 		"aria-hidden": "true",
-		"is-spinning": o || void 0,
-		children: /* @__PURE__ */ r("use", { href: `#icon-${a}` })
+		"is-spinning": i || void 0,
+		children: /* @__PURE__ */ o("use", { href: `#icon-${r}` })
 	}) });
 }
 var ot = { base: J`
@@ -983,10 +983,10 @@ var ot = { base: J`
     ` };
 //#endregion
 //#region src/components/_button.jsx
-function st({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, isLoading: c = !1, onClick: l }) {
-	let u = o || c, d = a(null);
+function st({ type: e = "primary", label: t, iconName: r, isDisabled: i = !1, isLoading: c = !1, onClick: l }) {
+	let u = r || c, d = n(null);
 	function f(e) {
-		if (s || c) return;
+		if (i || c) return;
 		e.stopPropagation(), e.preventDefault();
 		let t = e.currentTarget.getBoundingClientRect();
 		d.value = {
@@ -995,29 +995,29 @@ function st({ type: e = "primary", label: t, iconName: o, isDisabled: s = !1, is
 			size: Math.max(t.width, t.height) * 2
 		}, l?.(e);
 	}
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("button", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("button", {
 		type: "button",
 		className: q(Q.base, Q[e] ?? Q.normal),
 		"has-icon": u,
-		"is-disabled": s || void 0,
+		"is-disabled": i || void 0,
 		"is-loading": c || void 0,
 		"is-clickable": !!l || void 0,
-		disabled: s || c,
+		disabled: i || c,
 		onClick: f,
 		children: [
-			u && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+			u && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 				className: J`
                     ${Y.extends.verticalCenter}
 
                     left: .5rem;
                 `,
-				children: c ? /* @__PURE__ */ r(Z, {
+				children: c ? /* @__PURE__ */ o(Z, {
 					name: "loader",
 					isSpinning: !0
-				}) : /* @__PURE__ */ r(Z, { name: o })
+				}) : /* @__PURE__ */ o(Z, { name: r })
 			}) }),
 			t,
-			d.value && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("span", {
+			d.value && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("span", {
 				className: Q.ripple,
 				style: {
 					left: d.value.x,
@@ -1083,14 +1083,14 @@ var ct = Ze`
 };
 //#endregion
 //#region src/components/_layout.jsx
-function lt({ className: e, height: t, direction: i = "row", justify: a, align: o, gap: s, children: c }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+function lt({ className: e, height: t, direction: n = "row", justify: r, align: i, gap: s, children: c }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 		className: q(ut.base, e),
 		style: {
 			height: t,
-			flexDirection: i,
-			justifyContent: a,
-			alignItems: o,
+			flexDirection: n,
+			justifyContent: r,
+			alignItems: i,
 			gap: s == null ? void 0 : `${s / 2}rem`
 		},
 		children: c
@@ -1101,11 +1101,11 @@ var ut = { base: J`
     ` };
 //#endregion
 //#region src/components/_text.jsx
-function dt({ as: e = "span", className: t, size: i = "normal", color: a = Y.colors.fore.primary, children: o }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
-		className: q(ft.base, ft[i] ?? ft.normal, t),
-		style: { color: a },
-		children: o
+function dt({ as: e = "span", className: t, size: n = "normal", color: r = Y.colors.fore.primary, children: i }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(e, {
+		className: q(ft.base, ft[n] ?? ft.normal, t),
+		style: { color: r },
+		children: i
 	}) });
 }
 var ft = {
@@ -1128,11 +1128,11 @@ var ft = {
 };
 //#endregion
 //#region src/components/_headline.jsx
-function pt({ as: e = "h2", className: t, size: i = "normal", color: a = Y.colors.fore.primary, children: o }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(e, {
-		className: q(mt.base, mt[i] ?? mt.normal, t),
-		style: { color: a },
-		children: o
+function pt({ as: e = "h2", className: t, size: n = "normal", color: r = Y.colors.fore.primary, children: i }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(e, {
+		className: q(mt.base, mt[n] ?? mt.normal, t),
+		style: { color: r },
+		children: i
 	}) });
 }
 var mt = {
@@ -1158,7 +1158,7 @@ var mt = {
 //#endregion
 //#region src/components/_space.jsx
 function ht({ size: e = 1 }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 		"aria-hidden": "true",
 		style: {
 			height: e > 0 ? `${e}rem` : 0,
@@ -1168,20 +1168,20 @@ function ht({ size: e = 1 }) {
 }
 //#endregion
 //#region src/components/_text-field.jsx
-function gt({ placeholder: e, value: t, width: o, isDisabled: c, onChange: l }) {
-	let u = s(), d = a(t);
+function gt({ placeholder: e, value: t, width: r, isDisabled: c, onChange: l }) {
+	let u = i(), d = n(t);
 	function f({ target: e }) {
 		d.value = e.value, l?.(d.value);
 	}
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("div", {
 		className: _t.base,
-		style: { width: o },
+		style: { width: r },
 		"is-disabled": c,
-		children: [!d.value && e && /* @__PURE__ */ r("label", {
+		children: [!d.value && e && /* @__PURE__ */ o("label", {
 			className: _t.label,
 			htmlFor: u,
 			children: e
-		}), /* @__PURE__ */ r("input", {
+		}), /* @__PURE__ */ o("input", {
 			id: u,
 			name: u,
 			className: _t.input,
@@ -1225,22 +1225,22 @@ var _t = {
     `
 }, vt = 28, yt = 3, bt = 11;
 function xt({ label: e, isChecked: t, isDisabled: c, onChange: l }) {
-	let u = s(), d = a(t);
-	o(() => d.value = t, [t]);
+	let u = i(), d = n(t);
+	r(() => d.value = t, [t]);
 	function f() {
 		let e = !d.value;
 		d.value = e, l?.(e);
 	}
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("div", {
 		className: St.base,
 		children: [
-			/* @__PURE__ */ r("label", {
+			/* @__PURE__ */ o("label", {
 				className: St.label,
 				htmlFor: u,
 				"is-disabled": c,
 				children: e
 			}),
-			/* @__PURE__ */ r("input", {
+			/* @__PURE__ */ o("input", {
 				id: u,
 				type: "checkbox",
 				className: St.checkbox,
@@ -1248,7 +1248,7 @@ function xt({ label: e, isChecked: t, isDisabled: c, onChange: l }) {
 				disabled: c,
 				onChange: f
 			}),
-			/* @__PURE__ */ r("label", {
+			/* @__PURE__ */ o("label", {
 				className: St.value,
 				htmlFor: u,
 				"is-disabled": c
@@ -1312,18 +1312,18 @@ var St = {
 };
 //#endregion
 //#region src/components/_tag.jsx
-function Ct({ className: t, variant: a = "normal", iconName: o, label: s }) {
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
-		className: q(wt.base, wt[a] ?? wt.normal, t),
-		"has-icon": !e(o),
-		children: [o && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r(Z, {
+function Ct({ className: t, variant: n = "normal", iconName: r, label: i }) {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("div", {
+		className: q(wt.base, wt[n] ?? wt.normal, t),
+		"has-icon": !e(r),
+		children: [r && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(Z, {
 			className: J`
                         ${Y.extends.verticalCenter}
                         left: .3rem;
                     `,
-			name: o,
+			name: r,
 			size: ".9rem"
-		}) }), s]
+		}) }), i]
 	}) });
 }
 var wt = { base: J`
@@ -1342,21 +1342,21 @@ var wt = { base: J`
     ` };
 //#endregion
 //#region src/components/_icon-button.jsx
-function Tt({ iconName: e, color: t, isDisabled: i, onClick: a }) {
-	function o(e) {
-		i || (e.stopPropagation(), e.preventDefault(), a?.(e));
+function Tt({ iconName: e, color: t, isDisabled: n, onClick: r }) {
+	function i(e) {
+		n || (e.stopPropagation(), e.preventDefault(), r?.(e));
 	}
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("button", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("button", {
 		className: Et.base,
-		"is-disabled": i || void 0,
-		"is-clickable": !!a || void 0,
-		disabled: i,
-		onClick: o,
-		children: /* @__PURE__ */ r(Z, {
+		"is-disabled": n || void 0,
+		"is-clickable": !!r || void 0,
+		disabled: n,
+		onClick: i,
+		children: /* @__PURE__ */ o(Z, {
 			color: t,
 			className: J`${Y.extends.centrate}`,
 			iconName: e,
-			isDisabled: i
+			isDisabled: n
 		})
 	}) });
 }
@@ -1377,21 +1377,21 @@ var Et = { base: J`
     ` };
 //#endregion
 //#region src/components/_tab-box.jsx
-function Dt({ className: e, width: t, height: o, initialIndex: c = 0, items: l = [], onChange: u }) {
-	let d = s(), f = Math.max(l.length - 1, 0), p = a(Math.min(Math.max(c, 0), f)), m = Math.min(p.value, f);
+function Dt({ className: e, width: t, height: r, initialIndex: c = 0, items: l = [], onChange: u }) {
+	let d = i(), f = Math.max(l.length - 1, 0), p = n(Math.min(Math.max(c, 0), f)), m = Math.min(p.value, f);
 	function h(e) {
 		e !== m && (p.value = e, u?.(e, l[e]));
 	}
-	return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("div", {
+	return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("div", {
 		className: q($.base, e),
 		style: { width: t },
-		children: [/* @__PURE__ */ r(it, {
+		children: [/* @__PURE__ */ o(it, {
 			className: $.box,
-			height: o,
-			children: /* @__PURE__ */ r("div", {
+			height: r,
+			children: /* @__PURE__ */ o("div", {
 				className: $.track,
 				style: { transform: `translateX(-${m * 100}%)` },
-				children: l.map((e, t) => /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+				children: l.map((e, t) => /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 					id: `${d}-panel-${t}`,
 					className: $.panel,
 					role: "tabpanel",
@@ -1401,29 +1401,29 @@ function Dt({ className: e, width: t, height: o, initialIndex: c = 0, items: l =
 					children: e.content
 				}, e.id ?? t) }))
 			})
-		}), l.length > 0 && /* @__PURE__ */ r(n, { children: /* @__PURE__ */ r("div", {
+		}), l.length > 0 && /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o("div", {
 			className: $.tabs,
 			role: "tablist",
 			children: l.map((e, t) => {
-				let a = t === m, o = e.notification != null;
-				return /* @__PURE__ */ r(n, { children: /* @__PURE__ */ i("button", {
+				let n = t === m, r = e.notification != null;
+				return /* @__PURE__ */ o(a, { children: /* @__PURE__ */ s("button", {
 					id: `${d}-tab-${t}`,
 					className: $.tab,
 					type: "button",
 					role: "tab",
 					"aria-controls": `${d}-panel-${t}`,
 					"aria-label": e.label ?? `Tab ${t + 1}`,
-					"aria-selected": a,
-					tabIndex: a ? 0 : -1,
-					"is-active": a || void 0,
+					"aria-selected": n,
+					tabIndex: n ? 0 : -1,
+					"is-active": n || void 0,
 					onClick: () => h(t),
 					children: [
-						e.iconName && /* @__PURE__ */ r(Z, {
+						e.iconName && /* @__PURE__ */ o(Z, {
 							iconName: e.iconName,
 							size: "1rem"
 						}),
-						e.label && /* @__PURE__ */ r("span", { children: e.label }),
-						o && /* @__PURE__ */ r("span", {
+						e.label && /* @__PURE__ */ o("span", { children: e.label }),
+						r && /* @__PURE__ */ o("span", {
 							className: $.notification,
 							"aria-label": `${e.notification} notifications`,
 							children: e.notification

package/package.json

@@ -1,7 +1,7 @@
 {
     "author": "Vadim Hermann",
     "name": "melonykit",
-    "version": "0.7.1",
+    "version": "0.7.3",
     "type": "module",
     "description": "Preact based ui and utility functions toolkit",
     "main": "./dist/index.js",