@cocoar/vue-ui 1.7.0 → 1.8.0

package/dist/index.js

@@ -2538,8 +2538,17 @@ var tt = { class: "coar-code-header" }, nt = { class: "coar-code-header-left" },
 //#region src/components/select/useSelectBase.ts
 function fn(e) {
 	let t = E(!1), n = E(!1), i = E(""), a = E(-1), o = E("bottom"), s = `coar-select-${crypto.randomUUID?.() ?? Date.now().toString(16)}`, c = r(() => e.id.value || s), l = r(() => `${c.value}-message`), u = r(() => `${c.value}-listbox`), d = r(() => {
-		let t = i.value.toLowerCase().trim(), n = t ? e.options.value.filter((e) => e.label.toLowerCase().includes(t)) : e.options.value;
-		return n.some((e) => e.group) ? [...n].sort((e, t) => !e.group && !t.group ? 0 : e.group ? t.group ? e.group.localeCompare(t.group) : 1 : -1) : n;
+		let t = i.value.toLowerCase().trim(), n = t ? e.options.value.filter((e) => e.label.toLowerCase().includes(t)) : e.options.value, r = e.sortOptions.value, a = e.sortGroups.value, o = n.some((e) => e.group), s = typeof r == "function" ? r : r === "asc" ? (e, t) => e.label.localeCompare(t.label) : r === "desc" ? (e, t) => t.label.localeCompare(e.label) : null;
+		if (!o) return s ? [...n].sort(s) : n;
+		let c = typeof a == "function" ? a : a === "asc" ? (e, t) => e.localeCompare(t) : a === "desc" ? (e, t) => t.localeCompare(e) : null, l = [], u = /* @__PURE__ */ new Map(), d = [];
+		for (let e of n) e.group ? (u.has(e.group) || (l.push(e.group), u.set(e.group, [])), u.get(e.group).push(e)) : d.push(e);
+		if (c && l.sort(c), s) {
+			d.sort(s);
+			for (let e of u.values()) e.sort(s);
+		}
+		let f = [...d];
+		for (let e of l) f.push(...u.get(e));
+		return f;
 	});
 	B(d, () => {
 		a.value = -1;
@@ -4420,7 +4429,15 @@ var Uo = { class: "coar-select-wrapper" }, Wo = [
 			type: Function,
 			default: void 0
 		},
-		dropdownPosition: { default: "auto" }
+		dropdownPosition: { default: "auto" },
+		sortGroups: {
+			type: [String, Function],
+			default: "asc"
+		},
+		sortOptions: {
+			type: [String, Function],
+			default: "none"
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {}
@@ -4433,7 +4450,9 @@ var Uo = { class: "coar-select-wrapper" }, Wo = [
 			disabled: N(u, "disabled"),
 			readonly: N(u, "readonly"),
 			id: N(u, "id"),
-			dropdownPositionPreference: N(u, "dropdownPosition")
+			dropdownPositionPreference: N(u, "dropdownPosition"),
+			sortGroups: N(u, "sortGroups"),
+			sortOptions: N(u, "sortOptions")
 		}), te = r(() => u.id || m?.inputId.value || j.value), ne = r(() => m?.messageId.value || void 0), { left: re, top: ie, minWidth: ae } = En({
 			isOpen: E,
 			triggerEl: v,
@@ -4595,7 +4614,7 @@ var Uo = { class: "coar-select-wrapper" }, Wo = [
 			defer: !1
 		}]])], 14, Jo)) : a("", !0)]))])], 2));
 	}
-}), [["__scopeId", "data-v-9d5cd526"]]), ts = null, ns = 0;
+}), [["__scopeId", "data-v-c097763c"]]), ts = null, ns = 0;
 function rs(e) {
 	let t = e.value;
 	return typeof t == "string" ? { content: t } : t;
@@ -4838,7 +4857,15 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			type: Function,
 			default: void 0
 		},
-		dropdownPosition: { default: "auto" }
+		dropdownPosition: { default: "auto" },
+		sortGroups: {
+			type: [String, Function],
+			default: "asc"
+		},
+		sortOptions: {
+			type: [String, Function],
+			default: "none"
+		}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
@@ -4851,7 +4878,9 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			disabled: N(c, "disabled"),
 			readonly: N(c, "readonly"),
 			id: N(c, "id"),
-			dropdownPositionPreference: N(c, "dropdownPosition")
+			dropdownPositionPreference: N(c, "dropdownPosition"),
+			sortGroups: N(c, "sortGroups"),
+			sortOptions: N(c, "sortOptions")
 		}), q = r(() => c.id || p?.inputId.value || A.value), te = r(() => p?.messageId.value || void 0), { left: ne, top: re, minWidth: ie } = En({
 			isOpen: T,
 			triggerEl: h,
@@ -5051,7 +5080,7 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			defer: !1
 		}]])], 14, Ss)) : a("", !0)]))])], 2));
 	}
-}), [["__scopeId", "data-v-29389b8d"]]), Ps = { class: "coar-select-wrapper" }, Fs = { class: "coar-tag-select-tags" }, Is = { class: "coar-tag-select-tag-label" }, Ls = ["aria-label", "onClick"], Rs = [
+}), [["__scopeId", "data-v-f8a0a781"]]), Ps = { class: "coar-select-wrapper" }, Fs = { class: "coar-tag-select-tags" }, Is = { class: "coar-tag-select-tag-label" }, Ls = ["aria-label", "onClick"], Rs = [
 	"id",
 	"placeholder",
 	"disabled",
@@ -5101,7 +5130,15 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			type: Function,
 			default: void 0
 		},
-		dropdownPosition: { default: "auto" }
+		dropdownPosition: { default: "auto" },
+		sortGroups: {
+			type: [String, Function],
+			default: "asc"
+		},
+		sortOptions: {
+			type: [String, Function],
+			default: "none"
+		}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
@@ -5114,7 +5151,9 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			disabled: N(c, "disabled"),
 			readonly: N(c, "readonly"),
 			id: N(c, "id"),
-			dropdownPositionPreference: N(c, "dropdownPosition")
+			dropdownPositionPreference: N(c, "dropdownPosition"),
+			sortGroups: N(c, "sortGroups"),
+			sortOptions: N(c, "sortOptions")
 		}), q = r(() => c.id || p?.inputId.value || z.value), te = r(() => p?.messageId.value || void 0), { left: ne, top: re, minWidth: ie } = En({
 			isOpen: A,
 			triggerEl: h,
@@ -5264,7 +5303,7 @@ var ms = /* @__PURE__ */ new WeakMap(), hs = {
 			defer: !1
 		}]])], 14, zs)) : a("", !0)]))])], 2));
 	}
-}), [["__scopeId", "data-v-8b78bca7"]]), Gs = {
+}), [["__scopeId", "data-v-259216f6"]]), Gs = {
 	anchor: {
 		kind: "virtual",
 		placement: "center"
@@ -7022,21 +7061,23 @@ var Ml = /* @__PURE__ */ Y(kl, [["render", jl], ["__scopeId", "data-v-a0d5d1e3"]
 			}
 		});
 		let C = r(() => n.disabled ? -1 : p ? p.items.value.findIndex((e) => e.el === v.value) === p.activeIndex.value ? 0 : -1 : 0), w = null;
-		d.onChildPanelEnter = () => L(), yl(() => {
-			D();
+		d.onChildPanelEnter = () => R();
+		let T = bl();
+		yl(() => {
+			k(), T?.();
 		});
-		function T(e) {
+		function D(e) {
 			m.value || (d.closeSiblings(), m.value = !0, g(() => {
-				k(e), d.overlayRef = {
+				A(e), d.overlayRef = {
 					panelEl: h.value,
-					close: () => D()
+					close: () => k()
 				}, u?.notifyChildOpened();
 			}));
 		}
-		function D() {
+		function k() {
 			m.value && (m.value = !1, d.overlayRef &&= null, u?.notifyChildClosed(d));
 		}
-		function k(e) {
+		function A(e) {
 			let t = h.value;
 			if (!t) return;
 			let n = e.getBoundingClientRect(), r = t.getBoundingClientRect(), i = bn({
@@ -7060,79 +7101,79 @@ var Ml = /* @__PURE__ */ Y(kl, [["render", jl], ["__scopeId", "data-v-a0d5d1e3"]
 			});
 			t.style.left = `${i.left}px`, t.style.top = `${i.top}px`;
 		}
-		function A(e) {
+		function j(e) {
 			if (n.disabled) return;
-			L();
+			R();
 			let t = e.currentTarget;
-			u ? u.requestOpenFromChild(d, () => T(t), {
+			u ? u.requestOpenFromChild(d, () => D(t), {
 				x: e.clientX,
 				y: e.clientY
-			}) : T(t);
-		}
-		function j() {
-			n.disabled || I();
+			}) : D(t);
 		}
 		function N() {
-			L(), u?.cancelAncestorCloseTimers();
+			n.disabled || L();
 		}
 		function P() {
-			I();
+			R(), u?.cancelAncestorCloseTimers();
 		}
 		function I() {
-			L(), w = setTimeout(() => {
-				D();
-			}, 80);
+			L();
 		}
 		function L() {
+			R(), w = setTimeout(() => {
+				k();
+			}, 80);
+		}
+		function R() {
 			w &&= (clearTimeout(w), null);
 		}
-		function R(e) {
+		function z(e) {
 			if (n.disabled) {
 				e.preventDefault(), e.stopPropagation();
 				return;
 			}
-			e.stopPropagation(), m.value ? D() : T(e.currentTarget);
+			e.stopPropagation(), m.value ? k() : D(e.currentTarget);
 		}
-		function z(e) {
+		function V(e) {
 			if (!n.disabled) {
 				if (e.key === "Enter" || e.key === " ") {
-					e.preventDefault(), m.value ? D() : T(v.value);
+					e.preventDefault(), m.value ? k() : D(v.value);
 					return;
 				}
 				if (e.key === "ArrowRight") {
-					e.preventDefault(), e.stopPropagation(), m.value || T(v.value), g(() => {
+					e.preventDefault(), e.stopPropagation(), m.value || D(v.value), g(() => {
 						(h.value?.querySelector("[role=\"menuitem\"]:not([aria-disabled=\"true\"])"))?.focus();
 					});
 					return;
 				}
 				if (e.key === "ArrowLeft") {
-					m.value && (e.preventDefault(), e.stopPropagation(), D(), v.value?.focus());
+					m.value && (e.preventDefault(), e.stopPropagation(), k(), v.value?.focus());
 					return;
 				}
 			}
 		}
-		let V = null;
-		function H(e) {
+		let H = null;
+		function U(e) {
 			if (!m.value) return;
-			if (e === V) {
-				V = null;
+			if (e === H) {
+				H = null;
 				return;
 			}
-			V = null;
+			H = null;
 			let t = e.target;
-			v.value?.contains(t) || h.value?.contains(t) || D();
-		}
-		let U = !1;
-		function W() {
-			U ||= (document.addEventListener("click", H), !0);
+			v.value?.contains(t) || h.value?.contains(t) || k();
 		}
+		let W = !1;
 		function G() {
-			document.removeEventListener("click", H), U = !1;
+			W ||= (document.addEventListener("click", U), !0);
+		}
+		function K() {
+			document.removeEventListener("click", U), W = !1;
 		}
 		return B(m, (e) => {
-			e ? requestAnimationFrame(() => W()) : G();
+			e ? requestAnimationFrame(() => G()) : K();
 		}), b(() => {
-			y?.(), L(), G(), d.destroy();
+			y?.(), R(), K(), d.destroy();
 		}), (e, r) => (S(), o("div", Vl, [s("div", {
 			ref_key: "itemRef",
 			ref: v,
@@ -7146,10 +7187,10 @@ var Ml = /* @__PURE__ */ Y(kl, [["render", jl], ["__scopeId", "data-v-a0d5d1e3"]
 			"aria-controls": c,
 			"aria-disabled": n.disabled || void 0,
 			tabindex: C.value,
-			onMouseenter: A,
-			onMouseleave: j,
-			onClick: R,
-			onKeydown: z
+			onMouseenter: j,
+			onMouseleave: N,
+			onClick: z,
+			onKeydown: V
 		}, [
 			s("span", Ul, [l(X, {
 				name: n.icon || "square-dashed",
@@ -7168,11 +7209,11 @@ var Ml = /* @__PURE__ */ Y(kl, [["render", jl], ["__scopeId", "data-v-a0d5d1e3"]
 			ref_key: "panelRef",
 			ref: h,
 			class: "coar-submenu-panel",
-			onMouseenter: N,
-			onMouseleave: P
+			onMouseenter: P,
+			onMouseleave: I
 		}, [O(e.$slots, "default", {}, void 0, !0)], 544)) : a("", !0)]))]));
 	}
-}), [["__scopeId", "data-v-da19ff9a"]]), Kl = /* @__PURE__ */ u({
+}), [["__scopeId", "data-v-4f413627"]]), Kl = /* @__PURE__ */ u({
 	__name: "CoarContextMenu",
 	props: { menu: {} },
 	setup(e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocoar/vue-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Cocoar Design System — a touch-first Vue 3 component library with 30+ accessible, themeable components",
   "license": "Apache-2.0",
   "repository": {
@@ -48,7 +48,7 @@
     "lint": "eslint src/"
   },
   "dependencies": {
-    "@cocoar/vue-localization": "1.7.0",
+    "@cocoar/vue-localization": "1.8.0",
     "@fontsource/inter": "^5.2.8",
     "@fontsource/poppins": "^5.2.7",
     "@js-temporal/polyfill": "^0.5.1",