@wirecore/wirelayer-vue 0.5.0 → 0.7.0

package/dist/{Field-BdIPugFP.js → Field-B1EsNF84.js}

@@ -1,5 +1,5 @@
 import { a as e, n as t } from "./recipes-BlM9aKyt.js";
-import { n } from "./InputStatus-CUyF9-GR.js";
+import { n } from "./InputStatus-D7kBGlew.js";
 import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, openBlock as m, provide as h, ref as g, renderSlot as _, resolveDynamicComponent as v, toDisplayString as y, unref as b, useAttrs as x, useSlots as S, useTemplateRef as C, watch as w, withCtx as T } from "vue";
 import { CircleCheck as E, Info as D } from "@lucide/vue";
 import { field as O, toggletip as k } from "@wirecore/wirelayer-recipes";
@@ -70,23 +70,26 @@ var j = ["aria-label", "aria-expanded"], M = { role: "status" }, N = /* @__PURE_
 		classes: {}
 	},
 	setup(s) {
-		let u = s, p = S(), g = t("field", O, () => u.classes), v = e(), C = x(), w = g(), D = r(() => u.invalid || !!u.error), k = r(() => !!u.success && !D.value);
-		return h(n, r(() => ({ success: k.value }))), (e, t) => (m(), i(b(A).Root, d({
+		let u = s, p = S(), g = t("field", O, () => u.classes), v = e(), C = x(), w = g(), D = () => !!u.label || !!p.label, k = () => !!u.error || !!p.error, j = r(() => u.invalid || k()), M = r(() => (!!u.success || !!p.success) && !j.value);
+		return h(n, r(() => ({
+			success: M.value,
+			labelled: D()
+		}))), (e, t) => (m(), i(b(A).Root, d({
 			...b(C),
 			class: b(w).base({ class: f(b(C).class) })
 		}, {
-			invalid: D.value,
+			invalid: j.value,
 			required: s.required,
 			disabled: s.disabled,
 			"read-only": s.readOnly
 		}), {
 			default: T(() => [
-				s.label && (s.labelHelp || p["label-help"]) ? (m(), o("div", {
+				D() && (s.labelHelp || p["label-help"]) ? (m(), o("div", {
 					key: 0,
 					class: f(b(w).labelRow())
 				}, [l(b(A).Label, { class: f(b(w).label()) }, {
 					default: T(() => [
-						c(y(s.label), 1),
+						_(e.$slots, "label", {}, () => [c(y(s.label), 1)]),
 						s.required ? (m(), i(b(A).RequiredIndicator, {
 							key: 0,
 							class: f(b(w).requiredIndicator())
@@ -96,16 +99,16 @@ var j = ["aria-label", "aria-expanded"], M = { role: "status" }, N = /* @__PURE_
 							class: f(b(w).optionalIndicator())
 						}, y(` (${s.optionalText ?? b(v).field.optional})`), 3)) : a("", !0)
 					]),
-					_: 1
+					_: 3
 				}, 8, ["class"]), l(N, { label: s.label }, {
 					default: T(() => [_(e.$slots, "label-help", {}, () => [c(y(s.labelHelp), 1)])]),
 					_: 3
-				}, 8, ["label"])], 2)) : s.label ? (m(), i(b(A).Label, {
+				}, 8, ["label"])], 2)) : D() ? (m(), i(b(A).Label, {
 					key: 1,
 					class: f(b(w).label())
 				}, {
 					default: T(() => [
-						c(y(s.label), 1),
+						_(e.$slots, "label", {}, () => [c(y(s.label), 1)]),
 						s.required ? (m(), i(b(A).RequiredIndicator, {
 							key: 0,
 							class: f(b(w).requiredIndicator())
@@ -115,28 +118,28 @@ var j = ["aria-label", "aria-expanded"], M = { role: "status" }, N = /* @__PURE_
 							class: f(b(w).optionalIndicator())
 						}, y(` (${s.optionalText ?? b(v).field.optional})`), 3)) : a("", !0)
 					]),
-					_: 1
+					_: 3
 				}, 8, ["class"])) : a("", !0),
 				_(e.$slots, "default"),
-				s.helperText || k.value ? (m(), i(b(A).HelperText, {
+				s.helperText || p["helper-text"] || M.value ? (m(), i(b(A).HelperText, {
 					key: 2,
 					class: f(b(w).helperText())
 				}, {
-					default: T(() => [c(y(s.helperText), 1), k.value ? (m(), o("span", {
+					default: T(() => [_(e.$slots, "helper-text", {}, () => [c(y(s.helperText), 1)]), M.value ? (m(), o("span", {
 						key: 0,
 						class: f(b(w).successText())
 					}, [l(b(E), {
 						class: f(b(w).successIcon()),
 						"aria-hidden": "true"
-					}, null, 8, ["class"]), c(y(s.success), 1)], 2)) : a("", !0)]),
-					_: 1
+					}, null, 8, ["class"]), _(e.$slots, "success", {}, () => [c(y(s.success), 1)])], 2)) : a("", !0)]),
+					_: 3
 				}, 8, ["class"])) : a("", !0),
-				s.error ? (m(), i(b(A).ErrorText, {
+				k() ? (m(), i(b(A).ErrorText, {
 					key: 3,
 					class: f(b(w).errorText())
 				}, {
-					default: T(() => [c(y(s.error), 1)]),
-					_: 1
+					default: T(() => [_(e.$slots, "error", {}, () => [c(y(s.error), 1)])]),
+					_: 3
 				}, 8, ["class"])) : a("", !0)
 			]),
 			_: 3

package/dist/{Highlight-DvGcm2QR.js → Highlight-uwptdaUw.js}

@@ -1,10 +1,10 @@
 import { i as e, n as t } from "./recipes-BlM9aKyt.js";
-import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderList as f, shallowRef as p, toDisplayString as m, unref as h, watch as g } from "vue";
-import { DataKeyResolver as _, createDataList as v, dataListAnnouncement as y, filterListOptions as b, groupListOptions as x, highlight as S, highlightChunks as C, indexListOptions as w, listOptionsForValues as T, listValues as E, toListOptions as D } from "@wirecore/wirelayer-recipes";
-import { useFilter as O } from "@ark-ui/vue/locale";
-import { Highlight as k } from "@ark-ui/vue/highlight";
+import { Fragment as n, computed as r, createBlock as i, createElementBlock as a, createTextVNode as o, defineComponent as s, normalizeClass as c, onBeforeUnmount as l, onMounted as u, openBlock as d, ref as f, renderList as p, shallowRef as m, toDisplayString as h, unref as g, watch as _ } from "vue";
+import { DataKeyResolver as v, checkListValues as y, createDataList as b, dataListAnnouncement as x, filterListOptions as S, groupListOptions as C, highlight as w, highlightChunks as T, indexListOptions as E, listOptionsForValues as D, listValues as O, toListOptions as k } from "@wirecore/wirelayer-recipes";
+import { useFilter as A } from "@ark-ui/vue/locale";
+import { Highlight as j } from "@ark-ui/vue/highlight";
 //#region src/utils/data-source.ts
-var A = {
+var M = {
 	status: "idle",
 	items: [],
 	loadingMore: !1,
@@ -12,8 +12,8 @@ var A = {
 	search: "",
 	tooShort: !1
 };
-function j(t) {
-	let n = e(), i = p(A), a = p([]), o, s, c = () => ({
+function N(t) {
+	let n = e(), i = m(M), a = m([]), o, s, c = () => ({
 		pageSize: t.pageSize?.(),
 		minSearchLength: t.minSearchLength?.(),
 		debounce: t.debounce?.(),
@@ -21,16 +21,16 @@ function j(t) {
 	});
 	function u() {
 		let e = t.source();
-		if (e) return o ??= v({
+		if (e) return o ??= b({
 			source: e,
 			...c(),
 			onChange: (e) => i.value = e
-		}), s ??= new _({
+		}), s ??= new v({
 			source: e,
 			onChange: (e) => a.value = e
 		}), o;
 	}
-	return g(() => [
+	return _(() => [
 		t.source(),
 		t.pageSize?.(),
 		t.minSearchLength?.(),
@@ -55,15 +55,15 @@ function j(t) {
 		resolveKeys: (e) => {
 			u() && e.length && s.resolve(e).catch(() => void 0);
 		},
-		announcement: r(() => t.source() ? y(i.value, n.value.translations, n.value.locale, t.minSearchLength?.() ?? 0) : "")
+		announcement: r(() => t.source() ? x(i.value, n.value.translations, n.value.locale, t.minSearchLength?.() ?? 0) : "")
 	};
 }
-function M(t) {
-	let n = e(), i = j({
+function P(t) {
+	let n = e(), i = N({
 		source: t.source,
 		pageSize: t.pageSize,
 		minSearchLength: t.minSearchLength
-	}), a = r(() => i.active.value ? i.state.value.items : t.items()), o = r(() => D(i.resolved.value, t.accessors()));
+	}), a = r(() => i.active.value ? i.state.value.items : t.items()), o = r(() => k(i.resolved.value, t.accessors()));
 	return {
 		...i,
 		items: a,
@@ -84,11 +84,11 @@ function M(t) {
 }
 //#endregion
 //#region src/utils/list.ts
-function N(e, t, n = () => "") {
-	let i = O({
+function F(e, t, n = () => "") {
+	let i = A({
 		sensitivity: "base",
 		usage: "sort"
-	}), a = r(() => D(e(), t())), o = r(() => b(a.value, n(), i.value.contains)), s = r(() => x(o.value));
+	}), a = r(() => k(e(), t())), o = r(() => S(a.value, n(), i.value.contains)), s = r(() => C(o.value));
 	return {
 		options: a,
 		visible: o,
@@ -96,27 +96,30 @@ function N(e, t, n = () => "") {
 		ordered: r(() => s.value.flatMap((e) => e.options))
 	};
 }
-function P(e) {
-	let t = d(e.defaultValue ?? (e.multiple ? [] : null)), n = d([]), i = r(() => e.model() === void 0 ? t.value : e.model()), a = r(() => T(e.multiple ? i.value ?? [] : E(i.value), w(e.items.value, n.value), e.accessors())), o = r(() => a.value.map((e) => e.key));
-	function s(r) {
+function I(e) {
+	let t = f(e.defaultValue ?? (e.multiple ? [] : null)), n = f([]), i = r(() => e.model() === void 0 ? t.value : e.model()), a = r(() => D(e.multiple ? i.value ?? [] : O(i.value, e.items.value), E(e.items.value, n.value), e.accessors())), o = r(() => a.value.map((e) => e.key)), s = e.check;
+	s && u(() => _([a, s.ready], ([e, t]) => {
+		t && y(s.component, e);
+	}, { immediate: !0 }));
+	function c(r) {
 		n.value = r;
 		let i = r.map((e) => e.value), a = e.multiple ? i : i[0] ?? null;
 		t.value = a, e.emit(a);
 	}
-	function c(t, n = []) {
-		let r = w(e.items.value, n, a.value);
-		s(t.map((e) => r.get(e)).filter((e) => e !== void 0));
+	function l(t, n = []) {
+		let r = E(e.items.value, n, a.value);
+		c(t.map((e) => r.get(e)).filter((e) => e !== void 0));
 	}
 	return {
 		selected: a,
 		keys: o,
-		commit: s,
-		commitKeys: c
+		commit: c,
+		commitKeys: l
 	};
 }
 //#endregion
 //#region src/components/Highlight/Highlight.vue
-var F = /* @__PURE__ */ s({
+var L = /* @__PURE__ */ s({
 	__name: "Highlight",
 	props: {
 		text: {},
@@ -135,22 +138,22 @@ var F = /* @__PURE__ */ s({
 		classes: {}
 	},
 	setup(e) {
-		let s = e, l = t("highlight", S, () => s.classes), d = r(() => s.wholeWord || s.ignoreAccents || !!s.colors?.length), p = r(() => d.value ? C(s.text, s.query, {
+		let s = e, l = t("highlight", w, () => s.classes), u = r(() => s.wholeWord || s.ignoreAccents || !!s.colors?.length), f = r(() => u.value ? T(s.text, s.query, {
 			ignoreCase: s.ignoreCase,
 			matchAll: s.matchAll,
 			wholeWord: s.wholeWord,
 			ignoreAccents: s.ignoreAccents
 		}) : []);
-		return (t, r) => d.value ? (u(!0), a(n, { key: 1 }, f(p.value, (t, r) => (u(), a(n, { key: r }, [t.match ? (u(), a("mark", {
+		return (t, r) => u.value ? (d(!0), a(n, { key: 1 }, p(f.value, (t, r) => (d(), a(n, { key: r }, [t.match ? (d(), a("mark", {
 			key: 0,
-			class: c(h(l)({ color: e.colors?.[t.term ?? 0] }))
-		}, m(t.text), 3)) : (u(), a(n, { key: 1 }, [o(m(t.text), 1)], 64))], 64))), 128)) : (u(), i(h(k), {
+			class: c(g(l)({ color: e.colors?.[t.term ?? 0] }))
+		}, h(t.text), 3)) : (d(), a(n, { key: 1 }, [o(h(t.text), 1)], 64))], 64))), 128)) : (d(), i(g(j), {
 			key: 0,
 			text: e.text,
 			query: e.query,
 			"ignore-case": e.ignoreCase,
 			"match-all": e.matchAll,
-			class: c(h(l)())
+			class: c(g(l)())
 		}, null, 8, [
 			"text",
 			"query",
@@ -161,4 +164,4 @@ var F = /* @__PURE__ */ s({
 	}
 });
 //#endregion
-export { M as a, j as i, N as n, P as r, F as t };
+export { P as a, N as i, F as n, I as r, L as t };

package/dist/{Input-C59NJK4m.js → Input-Cn5q0yVE.js}

@@ -1,26 +1,28 @@
 import { a as e, n as t } from "./recipes-BlM9aKyt.js";
 import { t as n } from "./attrs-KNjeRUCf.js";
-import { r, t as i } from "./InputStatus-CUyF9-GR.js";
+import { r, t as i } from "./InputStatus-D7kBGlew.js";
 import { computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, normalizeClass as p, normalizeStyle as m, openBlock as h, ref as g, resolveDynamicComponent as _, toDisplayString as v, unref as y, useAttrs as b, useId as x, useModel as S, useTemplateRef as C } from "vue";
-import { CircleAlert as w } from "@lucide/vue";
-import { buttonColorKey as T, formatCount as E, iconButton as D, input as O, setTextControlValue as k } from "@wirecore/wirelayer-recipes";
-import { Field as A, useFieldContext as j } from "@ark-ui/vue/field";
+import { CircleAlert as w, LoaderCircle as T } from "@lucide/vue";
+import { buttonColorKey as E, formatCount as D, iconButton as O, input as k, setTextControlValue as A, spinner as j } from "@wirecore/wirelayer-recipes";
+import { Field as M, useFieldContext as N } from "@ark-ui/vue/field";
 //#region src/components/IconButton/IconButton.vue?vue&type=script&setup=true&lang.ts
-var M = [
+var P = [
 	"type",
 	"disabled",
 	"aria-label"
-], N = /* @__PURE__ */ u({
+], F = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "IconButton",
 	props: {
 		icon: {},
+		iconProps: {},
 		label: {},
 		variant: {},
 		color: {},
 		size: {},
 		shape: {},
 		disabled: { type: Boolean },
+		loading: { type: Boolean },
 		type: { default: "button" },
 		badge: { type: [Number, Boolean] },
 		badgeLabel: {
@@ -30,33 +32,45 @@ var M = [
 		classes: {}
 	},
 	setup(e) {
-		let n = e, r = t("iconButton", D, () => n.classes), i = b(), l = a(() => r({
+		let n = e, r = t("iconButton", O, () => n.classes), i = t("spinner", j), l = b(), u = a(() => r({
 			variant: n.variant,
-			color: T(n.color),
+			color: E(n.color),
 			size: n.size,
 			shape: n.shape
-		})), u = a(() => typeof n.badge == "number" && n.badge > 0 ? n.badge : 0), d = a(() => u.value ? `${n.label}, ${n.badgeLabel(E(u.value))}` : n.badge === !0 ? `${n.label}, ${n.badgeLabel(null)}` : n.label);
+		})), d = a(() => typeof n.badge == "number" && n.badge > 0 ? n.badge : 0), m = a(() => d.value ? `${n.label}, ${n.badgeLabel(D(d.value))}` : n.badge === !0 ? `${n.label}, ${n.badgeLabel(null)}` : n.label), g = a(() => n.loading ? {
+			"aria-disabled": !0,
+			"aria-busy": !0
+		} : {});
+		function x(e) {
+			n.loading ? e.preventDefault() : [l.onClick].flat().forEach((t) => t?.(e));
+		}
 		return (t, n) => (h(), c("button", f({
-			...y(i),
-			class: l.value.base({ class: p(y(i).class) })
+			...y(l),
+			class: u.value.base({ class: p(y(l).class) }),
+			onClick: x,
+			...g.value
 		}, {
 			type: e.type,
 			disabled: e.disabled,
-			"aria-label": d.value
-		}), [(h(), o(_(e.icon), {
-			class: p(l.value.icon()),
-			"aria-hidden": "true"
-		}, null, 8, ["class"])), u.value ? (h(), c("span", {
+			"aria-label": m.value
+		}), [e.loading ? (h(), o(y(T), {
 			key: 0,
-			class: p(l.value.badge()),
+			class: p(y(i)().icon({ class: u.value.icon() })),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])) : (h(), o(_(e.icon), f({ key: 1 }, e.iconProps, {
+			class: u.value.icon(),
+			"aria-hidden": "true"
+		}), null, 16, ["class"])), d.value ? (h(), c("span", {
+			key: 2,
+			class: p(u.value.badge()),
 			"aria-hidden": "true"
-		}, v(y(E)(u.value)), 3)) : e.badge === !0 ? (h(), c("span", {
-			key: 1,
-			class: p(l.value.dot()),
+		}, v(y(D)(d.value)), 3)) : e.badge === !0 ? (h(), c("span", {
+			key: 3,
+			class: p(u.value.dot()),
 			"aria-hidden": "true"
-		}, null, 2)) : s("", !0)], 16, M));
+		}, null, 2)) : s("", !0)], 16, P));
 	}
-}), P = ["data-invalid", "data-disabled"], F = ["id"], I = ["id"], L = /* @__PURE__ */ u({
+}), I = ["data-invalid", "data-disabled"], L = ["id"], R = ["id"], z = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "Input",
 	props: /*@__PURE__*/ d({
@@ -77,40 +91,40 @@ var M = [
 	}),
 	emits: ["update:modelValue"],
 	setup(u) {
-		let d = u, T = t("input", O, () => d.classes), E = e(), D = S(u, "modelValue"), M = b(), N = j(), L = r(), R = a(() => d.invalid || !!N?.value.invalid), z = a(() => !R.value && (d.success || L.value.success)), B = a(() => d.disabled || !!N?.value.disabled), V = a(() => !!M.readonly || M.readonly === "" || !!N?.value.readOnly), H = a(() => T({
+		let d = u, T = t("input", k, () => d.classes), E = e(), D = S(u, "modelValue"), O = b(), j = N(), P = r(), F = a(() => d.invalid || !!j?.value.invalid), z = a(() => !F.value && (d.success || P.value.success)), B = a(() => d.disabled || !!j?.value.disabled), V = a(() => !!O.readonly || O.readonly === "" || !!j?.value.readOnly), H = a(() => T({
 			size: d.size,
-			invalid: R.value,
+			invalid: F.value,
 			success: z.value,
 			disabled: B.value,
 			hasIcon: !!d.leadingIcon,
-			hasStatusIcon: R.value || z.value || d.loading || d.clearable
-		})), U = a(() => n(M)), W = g(String(M.defaultValue ?? "")), G = a(() => d.clearable && !!(D.value ?? W.value) && !B.value && !V.value), K = x(), q = x(), J = a(() => [
-			N?.value.ariaDescribedby,
+			hasStatusIcon: F.value || z.value || d.loading || d.clearable
+		})), U = a(() => n(O)), W = g(String(O.defaultValue ?? "")), G = a(() => d.clearable && !!(D.value ?? W.value) && !B.value && !V.value), K = x(), q = x(), J = a(() => [
+			j?.value.ariaDescribedby,
 			d.prefix && K,
 			d.suffix && q,
 			U.value.rest["aria-describedby"]
 		].filter(Boolean).join(" ") || void 0), Y = C("control");
 		function X() {
 			let e = Y.value?.$el;
-			e && (k(e), e.focus());
+			e && (A(e), e.focus());
 		}
 		return (e, t) => (h(), c("div", {
 			class: p(H.value.base({ class: U.value.className })),
 			style: m(U.value.style),
-			"data-invalid": R.value || void 0,
+			"data-invalid": F.value || void 0,
 			"data-disabled": B.value || void 0
 		}, [
 			u.prefix ? (h(), c("span", {
 				key: 0,
 				id: y(K),
 				class: p(H.value.prefix())
-			}, v(u.prefix), 11, F)) : s("", !0),
+			}, v(u.prefix), 11, L)) : s("", !0),
 			u.leadingIcon ? (h(), o(_(u.leadingIcon), {
 				key: 1,
 				class: p(H.value.icon()),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])) : s("", !0),
-			l(y(A).Input, f({
+			l(y(M).Input, f({
 				ref_key: "control",
 				ref: Y,
 				modelValue: D.value,
@@ -118,7 +132,7 @@ var M = [
 			}, U.value.rest, {
 				class: H.value.control(),
 				disabled: B.value || void 0,
-				"aria-invalid": R.value || void 0,
+				"aria-invalid": F.value || void 0,
 				"aria-describedby": J.value,
 				"aria-busy": u.loading || void 0,
 				onInput: t[1] ||= (e) => W.value = e.target.value
@@ -150,7 +164,7 @@ var M = [
 				"success",
 				"classes"
 			])) : s("", !0),
-			R.value ? (h(), o(y(w), {
+			F.value ? (h(), o(y(w), {
 				key: 3,
 				class: p(H.value.statusIcon()),
 				"aria-hidden": "true"
@@ -159,9 +173,9 @@ var M = [
 				key: 4,
 				id: y(q),
 				class: p(H.value.suffix())
-			}, v(u.suffix), 11, I)) : s("", !0)
-		], 14, P));
+			}, v(u.suffix), 11, R)) : s("", !0)
+		], 14, I));
 	}
 });
 //#endregion
-export { N as n, L as t };
+export { F as n, z as t };

package/dist/{InputStatus-CUyF9-GR.js → InputStatus-D7kBGlew.js}

@@ -4,7 +4,10 @@ import { CircleAlert as d, CircleCheck as f, LoaderCircle as p, X as m } from "@
 var h = Symbol("FieldStatus");
 function g() {
 	let e = s(h, null);
-	return t(() => e?.value ?? { success: !1 });
+	return t(() => e?.value ?? {
+		success: !1,
+		labelled: !1
+	});
 }
 //#endregion
 //#region src/components/Input/InputStatus.vue?vue&type=script&setup=true&lang.ts