@dolanske/vui 1.13.2 → 1.13.3

package/dist/vui.js

@@ -1719,7 +1719,7 @@ var Qn = { key: 0 }, $n = ["alt", "src"], er = { key: 2 }, tr = {
 				case or.s: return "6px";
 				case or.l: return "16px";
 				case or.m:
-				default: return "8px";
+				default: return "10px";
 			}
 		});
 		return () => C(e.href ? "a" : "button", {
@@ -10821,7 +10821,9 @@ var Sd = /* @__PURE__ */ v({
 			type: Boolean,
 			default: !0
 		},
-		headerAlign: {}
+		headerAlign: {},
+		centered: { type: Boolean },
+		borderStyle: { default: "solid" }
 	},
 	setup(e) {
 		return (t, n) => (R(), d("div", {
@@ -10829,20 +10831,26 @@ var Sd = /* @__PURE__ */ v({
 				separators: e.separators,
 				"header-separator": e.separators || e.headerSeparator,
 				"footer-separator": e.separators || e.footerSeparator,
-				"no-padding": !e.padding
+				"no-padding": !e.padding,
+				centered: e.centered
 			}]),
-			style: P({ "--vui-card-header-align": e.headerAlign })
+			style: P({
+				"--vui-card-header-align": e.headerAlign,
+				"--vui-card-border-style": e.borderStyle
+			})
 		}, [
 			t.$slots.header || t.$slots["header-end"] ? (R(), d("div", Td, [f("div", Ed, [H(t.$slots, "header")]), H(t.$slots, "header-end")])) : u("", !0),
 			(e.separators || e.headerSeparator) && (t.$slots.header || t.$slots["header-end"]) ? (R(), l(wd, {
 				key: 1,
+				type: e.borderStyle,
 				size: 1
-			})) : u("", !0),
+			}, null, 8, ["type"])) : u("", !0),
 			t.$slots.default ? (R(), d("div", Dd, [H(t.$slots, "default")])) : u("", !0),
 			(e.separators || e.footerSeparator) && t.$slots.footer ? (R(), l(wd, {
 				key: 3,
+				type: e.borderStyle,
 				size: 1
-			})) : u("", !0),
+			}, null, 8, ["type"])) : u("", !0),
 			t.$slots.footer ? (R(), d("div", Od, [H(t.$slots, "footer")])) : u("", !0)
 		], 6));
 	}
@@ -10931,10 +10939,12 @@ var Sd = /* @__PURE__ */ v({
 		}, null, 40, Nd), [[he, i.value]]), f("label", { for: q(a) }, [f("span", Fd, [i.value ? H(t.$slots, "icon-on", { key: 0 }, () => [g(q(Ge))]) : H(t.$slots, "icon-off", { key: 1 }, () => [g(q(at))])]), e.label || r.default ? (R(), d("p", Id, [H(t.$slots, "default", {}, () => [h(G(e.label), 1)])])) : u("", !0)], 8, Pd)], 2));
 	}
 }), Rd = /* @__PURE__ */ function(e) {
-	return e.Mobile = "mobile", e.Tablet = "tablet", e;
+	return e.Mobile = "mobile", e.Tablet = "tablet", e.SmallDesktop = "smallDesktop", e.Desktop = "desktop", e;
 }({}), zd = B({
 	mobile: 572,
-	tablet: 768
+	tablet: 768,
+	smallDesktop: 1228,
+	desktop: 1920
 }), { width: Bd } = Cn();
 function Vd(e) {
 	return c(() => {
@@ -11118,10 +11128,7 @@ var Zd = /* @__PURE__ */ v({
 }, cf = {
 	key: 0,
 	class: "vui-commands-group-title"
-}, lf = {
-	class: "vui-commands-list",
-	tabindex: "-1"
-}, uf = ["data-index", "onClick"], df = { class: "vui-commands-list-item" }, ff = {
+}, lf = { class: "vui-commands-list" }, uf = ["data-index", "onClick"], df = { class: "vui-commands-list-item" }, ff = {
 	key: 0,
 	class: "vui-commands-list-item-icon"
 }, pf = { class: "vui-command-body" }, mf = {
@@ -11133,7 +11140,8 @@ var Zd = /* @__PURE__ */ v({
 		open: { type: Boolean },
 		placeholder: { default: "Write a command.." },
 		commands: {},
-		loading: { type: Boolean }
+		loading: { type: Boolean },
+		compact: { type: Boolean }
 	}, {
 		search: { default: "" },
 		searchModifiers: {},
@@ -11142,70 +11150,69 @@ var Zd = /* @__PURE__ */ v({
 	}),
 	emits: /* @__PURE__ */ k(["close"], ["update:search", "update:group"]),
 	setup(e, { emit: t }) {
-		let r = e, i = t, a = pe(e, "search"), o = pe(e, "group"), s = c(() => r.commands.filter((e) => o.value && o.value !== "All" ? (e.group ?? hf) === o.value : !0).filter((e) => zn([
+		let r = e, i = t, a = Vd(Rd.Mobile), o = pe(e, "search"), s = pe(e, "group"), p = c(() => r.commands.filter((e) => s.value && s.value !== "All" ? (e.group ?? hf) === s.value : !0).filter((e) => zn([
 			e.title,
 			e.description,
 			...e.keywords ?? []
-		], a.value))), p = c(() => {
-			if (s.value.length === 0) return null;
-			let e = Object.groupBy(s.value, (e) => e.group ?? hf);
+		], o.value))), _ = c(() => {
+			if (p.value.length === 0) return null;
+			let e = Object.groupBy(p.value, (e) => e.group ?? hf);
 			return Object.fromEntries(Object.entries(e).sort(([e], [t]) => e.localeCompare(t)));
-		}), m = c(() => {
+		}), v = c(() => {
 			let e = /* @__PURE__ */ new Set();
 			for (let t of r.commands) e.add(t.group ?? hf);
 			let t = [...e].toSorted((e, t) => e === hf ? 1 : t === hf ? -1 : e.localeCompare(t));
 			return t.unshift("All"), t;
-		}), _ = c(() => {
-			if (!p.value) return [];
+		}), y = c(() => {
+			if (!_.value) return [];
 			let e = [], t = 0;
-			for (let n of Object.values(p.value)) e.push(t), t += n.length;
+			for (let n of Object.values(_.value)) e.push(t), t += n.length;
 			return e;
-		}), v = c(() => p.value ? Object.values(p.value).flat() : []), y = vn(), b = B(0);
+		}), b = c(() => _.value ? Object.values(_.value).flat() : []), x = vn(), S = B(0);
 		be(() => {
-			for (let e of r.commands) if (e.shortcut && y[e.shortcut].value) {
-				x(e);
+			for (let e of r.commands) if (e.shortcut && x[e.shortcut].value) {
+				C(e);
 				break;
 			}
-		}), zt(() => !!a.value, () => {
-			b.value = 0;
-		}), zt(y.ArrowUp, () => {
-			b.value > 0 ? b.value-- : b.value = v.value.length - 1;
-		}), zt(y.ArrowDown, () => {
-			b.value < v.value.length - 1 ? b.value++ : b.value = 0;
-		}), Y(b, (e) => {
+		}), zt(() => !!o.value, () => {
+			S.value = 0;
+		}), zt(x.ArrowUp, () => {
+			S.value > 0 ? S.value-- : S.value = b.value.length - 1;
+		}), zt(x.ArrowDown, () => {
+			S.value < b.value.length - 1 ? S.value++ : S.value = 0;
+		}), Y(S, (e) => {
 			let t = document.querySelector(`[data-index="${e}"]`);
 			t && t.scrollIntoView({
 				behavior: "smooth",
 				block: "nearest",
 				inline: "nearest"
 			});
-		}), zt(y.Enter, () => {
-			x(v.value[b.value]);
+		}), zt(x.Enter, () => {
+			C(b.value[S.value]);
 		});
-		function x(e) {
+		function C(e) {
 			r.open && (e.handler ? e.handler() : e.href && window.open(e.href, "_blank"));
 		}
-		zt(y.Escape, () => {
+		zt(x.Escape, () => {
 			i("close");
 		});
-		let S = J("searchRef");
-		function C() {
-			a.value = "", S.value?.focus({ preventScroll: !0 });
-		}
-		Y(() => r.open, async (e) => {
-			e && (await j(), requestAnimationFrame(C));
-		}, { flush: "post" });
-		let w = Vd(Rd.Mobile);
-		return (t, s) => (R(), l(ef, {
+		let w = J("searchRef");
+		function T() {
+			o.value = "", a.value || w.value?.focus({ preventScroll: !0 });
+		}
+		return Y(() => r.open, async (e) => {
+			e && (await j(), requestAnimationFrame(T));
+		}, { flush: "post" }), (t, c) => (R(), l(ef, {
 			open: r.open,
 			"hide-close-button": "",
 			card: {
 				separators: !0,
 				padding: !1
 			},
-			class: "vui-commands",
-			onClose: s[2] ||= (e) => i("close")
-		}, {
+			class: M(["vui-commands", { compact: r.compact }]),
+			size: r.compact ? "s" : "m",
+			onClose: c[2] ||= (e) => i("close")
+		}, m({
 			header: X(() => [f("div", tf, [
 				f("div", nf, [e.loading ? (R(), l(pr, {
 					key: 0,
@@ -11213,82 +11220,60 @@ var Zd = /* @__PURE__ */ v({
 				})) : (R(), l(q(Qe), { key: 1 }))]),
 				Se(f("input", {
 					ref: "searchRef",
-					"onUpdate:modelValue": s[0] ||= (e) => a.value = e,
+					"onUpdate:modelValue": c[0] ||= (e) => o.value = e,
 					type: "text",
 					autofocus: "",
 					placeholder: r.placeholder
-				}, null, 8, rf), [[ve, a.value]]),
+				}, null, 8, rf), [[ve, o.value]]),
 				g(ir, { gap: 2 }, {
-					default: X(() => [a.value ? (R(), l(mr, {
+					default: X(() => [o.value ? (R(), l(mr, {
 						key: 0,
 						size: "s",
 						square: "",
-						onClick: C
+						onClick: T
 					}, {
 						default: X(() => [g(q(ut), { class: "text-color-light" })]),
 						_: 1
-					})) : u("", !0), q(w) ? (R(), l(mr, {
+					})) : u("", !0), q(a) ? (R(), l(mr, {
 						key: 1,
 						size: "s",
-						onClick: s[1] ||= (e) => i("close")
+						onClick: c[1] ||= (e) => i("close")
 					}, {
-						default: X(() => [...s[3] ||= [h(" Close ", -1)]]),
+						default: X(() => [...c[3] ||= [h(" Close ", -1)]]),
 						_: 1
 					})) : u("", !0)]),
 					_: 1
 				})
-			]), f("div", af, [g(Md, { gap: "xs" }, {
-				default: X(() => [(R(!0), d(n, null, V(m.value, (e) => (R(), d("button", {
+			]), f("div", af, [g(Md, {
+				gap: r.compact ? "xxs" : "xs",
+				"hide-scrollbar": "",
+				"hide-shadows": ""
+			}, {
+				default: X(() => [(R(!0), d(n, null, V(v.value, (e) => (R(), d("button", {
 					key: e,
 					tabindex: 0,
-					onClick: (t) => o.value = e
+					onClick: (t) => s.value = e
 				}, [g(sr, {
-					variant: e === o.value ? "accent" : "neutral",
+					variant: e === s.value ? "accent" : "neutral",
 					role: "button"
 				}, {
 					default: X(() => [h(G(e === hf ? "Other" : e), 1)]),
 					_: 2
 				}, 1032, ["variant"])], 8, of))), 128))]),
 				_: 1
-			})])]),
-			footer: X(() => [g(ir, {
-				gap: "xxs",
-				"y-center": ""
-			}, {
-				default: X(() => [
-					g(Hd, null, {
-						default: X(() => [g(q(Ne))]),
-						_: 1
-					}),
-					g(Hd, null, {
-						default: X(() => [g(q(Me))]),
-						_: 1
-					}),
-					s[6] ||= f("span", { class: "text-color-lighter mr-s" }, "Move", -1),
-					g(Hd, null, {
-						default: X(() => [...s[4] ||= [h(" Enter ", -1)]]),
-						_: 1
-					}),
-					s[7] ||= f("span", { class: "text-color-lighter mr-s" }, "Select", -1),
-					g(Hd, null, {
-						default: X(() => [...s[5] ||= [h(" Esc ", -1)]]),
-						_: 1
-					}),
-					s[8] ||= f("span", { class: "text-color-lighter" }, "Close", -1)
-				]),
-				_: 1
-			})]),
-			default: X(() => [p.value ? H(t.$slots, "default", {
+			}, 8, ["gap"])])]),
+			default: X(() => [_.value ? H(t.$slots, "default", {
 				key: 1,
-				commands: p.value
-			}, () => [(R(!0), d(n, null, V(p.value, (e, r, i) => (R(), d("div", {
+				commands: _.value
+			}, () => [(R(!0), d(n, null, V(_.value, (e, r, i) => (R(), d("div", {
 				key: r,
-				class: "vui-commands-group"
-			}, [r !== hf && o.value === "All" ? (R(), d("span", cf, G(r), 1)) : u("", !0), f("ul", lf, [(R(!0), d(n, null, V(e, (e, a) => (R(), d("li", {
+				class: "vui-commands-group",
+				tabindex: "-1"
+			}, [r !== hf && s.value === "All" ? (R(), d("span", cf, G(r), 1)) : u("", !0), f("ul", lf, [(R(!0), d(n, null, V(e, (e, a) => (R(), d("li", {
 				key: e.title,
-				"data-index": _.value[i] + a,
-				class: M({ "vui-commands-list-item-focused": b.value === _.value[i] + a }),
-				onClick: (t) => x(e)
+				"data-index": y.value[i] + a,
+				class: M({ "vui-commands-list-item-focused": S.value === y.value[i] + a }),
+				onClick: (t) => C(e)
 			}, [H(t.$slots, "command", {
 				command: e,
 				group: r
@@ -11306,9 +11291,44 @@ var Zd = /* @__PURE__ */ v({
 					}, null, 8, ["keys"]))), 128))]),
 					_: 2
 				}, 1024)) : u("", !0)
-			])])], 10, uf))), 128))])]))), 128))]) : (R(), d("div", sf, [...s[9] ||= [f("p", null, "No results found", -1)]]))]),
-			_: 3
-		}, 8, ["open"]));
+			])])], 10, uf))), 128))])]))), 128))]) : (R(), d("div", sf, [...c[9] ||= [f("p", null, "No results found", -1)]]))]),
+			_: 2
+		}, [r.compact ? void 0 : {
+			name: "footer",
+			fn: X(() => [g(ir, {
+				gap: "xxs",
+				"y-center": "",
+				tabindex: "-1"
+			}, {
+				default: X(() => [
+					g(Hd, null, {
+						default: X(() => [g(q(Ne))]),
+						_: 1
+					}),
+					g(Hd, null, {
+						default: X(() => [g(q(Me))]),
+						_: 1
+					}),
+					c[6] ||= f("span", { class: "text-color-lighter mr-s" }, "Move", -1),
+					g(Hd, null, {
+						default: X(() => [...c[4] ||= [h(" Enter ", -1)]]),
+						_: 1
+					}),
+					c[7] ||= f("span", { class: "text-color-lighter mr-s" }, "Select", -1),
+					g(Hd, null, {
+						default: X(() => [...c[5] ||= [h(" Esc ", -1)]]),
+						_: 1
+					}),
+					c[8] ||= f("span", { class: "text-color-lighter" }, "Close", -1)
+				]),
+				_: 1
+			})]),
+			key: "0"
+		}]), 1032, [
+			"open",
+			"class",
+			"size"
+		]));
 	}
 }), _f = /* @__PURE__ */ v({
 	inheritAttrs: !1,
@@ -14752,7 +14772,7 @@ var Gh = ["aria-describedby"], Kh = /* @__PURE__ */ $d(/* @__PURE__ */ v({
 		function _() {
 			r.value = void 0, m.value?.close();
 		}
-		let v = fe();
+		let v = fe(), y = Vd(Rd.Mobile);
 		return (c, m) => (R(), d("div", {
 			class: M(["vui-input-container vui-select", {
 				expand: e.expand,
@@ -14806,7 +14826,7 @@ var Gh = ["aria-describedby"], Kh = /* @__PURE__ */ $d(/* @__PURE__ */ v({
 							modelValue: o.value,
 							"onUpdate:modelValue": m[0] ||= (e) => o.value = e,
 							placeholder: "Search...",
-							focus: i,
+							focus: i && !q(y),
 							expand: ""
 						}, {
 							start: X(() => [g(q(Qe))]),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dolanske/vui",
   "type": "module",
-  "version": "1.13.2",
+  "version": "1.13.3",
   "private": false,
   "description": "Brother in Christ there's a new UI library",
   "author": "dolanske",