morya-ui 0.4.5 → 0.5.1

package/dist/loading/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }

package/dist/mega-menu/index.js

@@ -2,31 +2,31 @@ import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { n as t, t as n } from "../overlay-oR-5MDuE.js";
 import { t as r } from "../overlayPlacement-qwEJPVS4.js";
 import { t as ee } from "../useFloatingViewportSync-wLLKIGUA.js";
-import { t as te } from "../useMotionTransition-DohkfWRB.js";
-import { t as i } from "../Icon-CmHjx7W8.js";
+import { t as i } from "../useMotionTransition-DohkfWRB.js";
+import { t as te } from "../Icon-CmHjx7W8.js";
 import { t as a } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as ne } from "../icon-H8prbteT.js";
-import { l as re } from "../config-Cd20zAyW.js";
-import { n as ie } from "../locale-BcxMPufl.js";
+import { n as o, t as s } from "../icon-CUrSaD8r.js";
+import { l as ne } from "../config-Cd20zAyW.js";
+import { n as re } from "../locale-BcxMPufl.js";
 import "./style.js";
-import { Fragment as o, Teleport as s, Transition as ae, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as oe, createTextVNode as se, createVNode as f, defineComponent as p, mergeProps as ce, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as _, onMounted as le, openBlock as v, ref as y, renderList as b, toDisplayString as x, unref as S, useAttrs as C, watch as w, withCtx as ue, withModifiers as T } from "vue";
+import { Fragment as c, Teleport as ie, Transition as ae, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as oe, createVNode as se, defineComponent as m, mergeProps as ce, nextTick as h, normalizeClass as g, normalizeStyle as le, onBeforeUnmount as ue, onMounted as de, openBlock as _, ref as v, renderList as y, resolveDynamicComponent as fe, toDisplayString as b, unref as x, useAttrs as pe, watch as S, withCtx as me, withModifiers as C } from "vue";
 //#region src/components/MegaMenu/MegaMenu.vue?vue&type=script&setup=true&lang.ts
-var de = ["aria-label"], fe = [
+var he = ["aria-label"], ge = [
 	"disabled",
 	"tabindex",
 	"aria-expanded",
 	"aria-haspopup",
 	"onClick",
 	"onFocus"
-], pe = {
+], _e = {
 	key: 0,
 	class: "m-megamenu__icon",
 	"aria-hidden": "true"
-}, me = [
+}, ve = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], E = /* @__PURE__ */ p({
+], w = /* @__PURE__ */ m({
 	inheritAttrs: !1,
 	__name: "MegaMenu",
 	props: {
@@ -44,34 +44,40 @@ var de = ["aria-label"], fe = [
 		}
 	},
 	emits: ["update:selectedKey", "select"],
-	setup(p, { emit: E }) {
-		let D = p, O = E, he = C(), { rootAttrs: ge } = e(he, () => D.pt), k = re(), { transitionName: _e, transitionCss: A } = te({
+	setup(m, { emit: w }) {
+		let T = m, E = w, ye = pe(), { rootAttrs: be } = e(ye, () => T.pt), D = ne(), { transitionName: O, transitionCss: k } = i({
 			role: "popup",
-			local: () => D.transition,
+			local: () => T.transition,
 			componentName: "MegaMenu",
 			fallback: "scale-fade"
-		}), j = ie(), M = y(null), N = y(null), P = y([]), F = y({}), I = c(() => t(D, k.value.appendTo)), L = c(() => n(D, k.value.appendTo));
-		function ve(e, t) {
-			P.value[t] = e instanceof HTMLElement ? e : null;
+		}), A = re(), j = v(null), M = v(null), N = v([]), P = v({}), F = l(() => t(T, D.value.appendTo)), I = l(() => n(T, D.value.appendTo));
+		function xe(e, t) {
+			N.value[t] = e instanceof HTMLElement ? e : null;
 		}
-		function R() {
-			if (!L.value || M.value == null) return;
-			let e = P.value[M.value];
+		function L() {
+			if (!I.value || j.value == null) return;
+			let e = N.value[j.value];
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			F.value = r(t, "bottom-start", { gap: 4 });
+			P.value = r(t, "bottom-start", { gap: 4 });
 		}
-		function z(e) {
+		function R(e) {
 			return e.key ?? e.label;
 		}
+		function z(e) {
+			return !!(T.selectedKey && R(e) === T.selectedKey);
+		}
 		function B(e) {
-			return !!(D.selectedKey && z(e) === D.selectedKey);
+			return typeof e.icon == "string" ? s(e.icon) : void 0;
 		}
 		function V(e) {
-			return ne(e.icon);
+			return o(e.icon);
+		}
+		function Se(e) {
+			return !!(B(e) || V(e));
 		}
 		function H(e) {
-			e.disabled || (e.command?.(), O("update:selectedKey", z(e)), O("select", e));
+			e.disabled || (e.command?.(), E("update:selectedKey", R(e)), E("select", e));
 		}
 		function U(e, t) {
 			if (!t.disabled) {
@@ -79,64 +85,64 @@ var de = ["aria-label"], fe = [
 					H(t), Y();
 					return;
 				}
-				M.value = M.value === e ? null : e, M.value != null && m(() => R());
+				j.value = j.value === e ? null : e, j.value != null && h(() => L());
 			}
 		}
-		let W = c(() => M.value == null ? [] : (D.model[M.value]?.items ?? []).flat()), G = a({
-			itemCount: () => D.model.length,
-			isItemDisabled: (e) => !!D.model[e]?.disabled,
+		let W = l(() => j.value == null ? [] : (T.model[j.value]?.items ?? []).flat()), G = a({
+			itemCount: () => T.model.length,
+			isItemDisabled: (e) => !!T.model[e]?.disabled,
 			orientation: "horizontal",
 			initialActiveIndex: 0,
 			onActivate: (e) => {
-				let t = D.model[e];
+				let t = T.model[e];
 				t && U(e, t);
 			}
 		}), K = a({
 			itemCount: () => W.value.length,
 			isItemDisabled: (e) => !!W.value[e]?.disabled,
-			enabled: () => M.value != null,
+			enabled: () => j.value != null,
 			onActivate: (e) => {
 				let t = W.value[e];
 				t && Q(t);
 			}
 		});
 		function q(e) {
-			P.value[e]?.focus({ preventScroll: !0 });
+			N.value[e]?.focus({ preventScroll: !0 });
 		}
-		function ye() {
-			return N.value?.querySelector(".m-megamenu__panel") || document.querySelector(".m-megamenu__panel--teleported");
+		function Ce() {
+			return M.value?.querySelector(".m-megamenu__panel") || document.querySelector(".m-megamenu__panel--teleported");
 		}
 		function J() {
 			let e = K.activeIndex.value;
-			e < 0 || ye()?.querySelectorAll(".m-megamenu__link")[e]?.focus({ preventScroll: !0 });
+			e < 0 || Ce()?.querySelectorAll(".m-megamenu__link")[e]?.focus({ preventScroll: !0 });
 		}
-		function be(e, t) {
-			let n = M.value == null ? [] : D.model[M.value]?.items ?? [], r = t;
+		function we(e, t) {
+			let n = j.value == null ? [] : T.model[j.value]?.items ?? [], r = t;
 			for (let t = 0; t < e; t++) r += n[t]?.length ?? 0;
 			return K.tabindexFor(r);
 		}
 		function Y(e = !1) {
-			let t = M.value;
-			M.value = null, K.reset(), e && t != null && q(t);
+			let t = j.value;
+			j.value = null, K.reset(), e && t != null && q(t);
 		}
 		function X(e, t = !1) {
-			M.value = e, G.setActive(e), m(() => {
-				R(), t && (K.moveFirst(), J());
+			j.value = e, G.setActive(e), h(() => {
+				L(), t && (K.moveFirst(), J());
 			});
 		}
 		function Z(e) {
 			G.move(e);
-			let t = G.activeIndex.value, n = D.model[t];
-			M.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
+			let t = G.activeIndex.value, n = T.model[t];
+			j.value != null && (n?.items?.length ? X(t, !0) : Y()), q(t);
 		}
-		function xe(e) {
+		function Te(e) {
 			if (e.key === "Escape") {
-				M.value != null && (e.preventDefault(), Y(!0));
+				j.value != null && (e.preventDefault(), Y(!0));
 				return;
 			}
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
-				let t = G.activeIndex.value, n = D.model[t];
+				let t = G.activeIndex.value, n = T.model[t];
 				n?.items?.length && !n.disabled && X(t, !0);
 				return;
 			}
@@ -146,7 +152,7 @@ var de = ["aria-label"], fe = [
 			}
 			G.onKeydown(e);
 		}
-		function Se(e) {
+		function Ee(e) {
 			if (e.stopPropagation(), e.key === "Escape") {
 				e.preventDefault(), Y(!0);
 				return;
@@ -160,71 +166,72 @@ var de = ["aria-label"], fe = [
 		function Q(e) {
 			e.disabled || (H(e), Y(!0));
 		}
-		w(G.activeIndex, (e) => {
-			e >= 0 && M.value == null && q(e);
-		}), w(K.activeIndex, () => {
-			M.value != null && J();
+		S(G.activeIndex, (e) => {
+			e >= 0 && j.value == null && q(e);
+		}), S(K.activeIndex, () => {
+			j.value != null && J();
 		});
 		function $(e) {
 			let t = e.target;
-			N.value?.contains(t) || document.querySelector(".m-megamenu__panel--teleported")?.contains(t) || Y();
+			M.value?.contains(t) || document.querySelector(".m-megamenu__panel--teleported")?.contains(t) || Y();
 		}
-		function Ce() {
-			M.value != null && R();
+		function De() {
+			j.value != null && L();
 		}
-		return ee(() => M.value != null && L.value, Ce), le(() => document.addEventListener("click", $)), _(() => {
+		return ee(() => j.value != null && I.value, De), de(() => document.addEventListener("click", $)), ue(() => {
 			document.removeEventListener("click", $);
-		}), (e, t) => (v(), d("nav", ce(S(ge), {
+		}), (e, t) => (_(), f("nav", ce(x(be), {
 			ref_key: "root",
-			ref: N,
+			ref: M,
 			class: "m-megamenu",
-			"aria-label": S(j).megaMenu,
-			onKeydown: xe
-		}), [(v(!0), d(o, null, b(p.model, (e, t) => (v(), d("div", {
+			"aria-label": x(A).megaMenu,
+			onKeydown: Te
+		}), [(_(!0), f(c, null, y(m.model, (e, t) => (_(), f("div", {
 			key: `${e.label}-${t}`,
-			class: h(["m-megamenu__item", { "m-megamenu__item--open": M.value === t }])
-		}, [oe("button", {
+			class: g(["m-megamenu__item", { "m-megamenu__item--open": j.value === t }])
+		}, [p("button", {
 			ref_for: !0,
-			ref: (e) => ve(e, t),
+			ref: (e) => xe(e, t),
 			type: "button",
-			class: h(["m-megamenu__trigger", { "m-megamenu__trigger--selected": B(e) }]),
+			class: g(["m-megamenu__trigger", { "m-megamenu__trigger--selected": z(e) }]),
 			disabled: e.disabled,
-			tabindex: S(G).tabindexFor(t),
-			"aria-expanded": e.items?.length ? M.value === t : void 0,
+			tabindex: x(G).tabindexFor(t),
+			"aria-expanded": e.items?.length ? j.value === t : void 0,
 			"aria-haspopup": e.items?.length ? "menu" : void 0,
-			onClick: T((n) => U(t, e), ["stop"]),
-			onFocus: (e) => S(G).setActive(t)
-		}, [V(e) ? (v(), d("span", pe, [f(i, {
-			name: V(e),
+			onClick: C((n) => U(t, e), ["stop"]),
+			onFocus: (e) => x(G).setActive(t)
+		}, [Se(e) ? (_(), f("span", _e, [B(e) ? (_(), u(te, {
+			key: 0,
+			name: B(e),
 			size: "sm"
-		}, null, 8, ["name"])])) : u("", !0), se(" " + x(e.label), 1)], 42, fe), (v(), l(s, {
-			to: I.value.to,
-			disabled: I.value.disabled
-		}, [f(ae, {
-			name: S(_e),
-			css: S(A)
+		}, null, 8, ["name"])) : V(e) ? (_(), u(fe(V(e)), { key: 1 })) : d("", !0)])) : d("", !0), oe(" " + b(e.label), 1)], 42, ge), (_(), u(ie, {
+			to: F.value.to,
+			disabled: F.value.disabled
+		}, [se(ae, {
+			name: x(O),
+			css: x(k)
 		}, {
-			default: ue(() => [e.items?.length && M.value === t ? (v(), d("div", {
+			default: me(() => [e.items?.length && j.value === t ? (_(), f("div", {
 				key: 0,
-				class: h(["m-megamenu__panel", { "m-megamenu__panel--teleported": L.value }]),
-				style: g(L.value ? F.value : void 0),
+				class: g(["m-megamenu__panel", { "m-megamenu__panel--teleported": I.value }]),
+				style: le(I.value ? P.value : void 0),
 				role: "menu",
-				onKeydown: Se
-			}, [(v(!0), d(o, null, b(e.items, (e, t) => (v(), d("div", {
+				onKeydown: Ee
+			}, [(_(!0), f(c, null, y(e.items, (e, t) => (_(), f("div", {
 				key: t,
 				class: "m-megamenu__column"
-			}, [(v(!0), d(o, null, b(e, (e, n) => (v(), d("button", {
+			}, [(_(!0), f(c, null, y(e, (e, n) => (_(), f("button", {
 				key: `${e.label}-${n}`,
 				type: "button",
-				class: h(["m-megamenu__link", { "m-megamenu__link--selected": B(e) }]),
+				class: g(["m-megamenu__link", { "m-megamenu__link--selected": z(e) }]),
 				role: "menuitem",
 				disabled: e.disabled,
-				tabindex: be(t, n),
-				onClick: T((t) => Q(e), ["stop"])
-			}, x(e.label), 11, me))), 128))]))), 128))], 38)) : u("", !0)]),
+				tabindex: we(t, n),
+				onClick: C((t) => Q(e), ["stop"])
+			}, b(e.label), 11, ve))), 128))]))), 128))], 38)) : d("", !0)]),
 			_: 2
-		}, 1032, ["name", "css"])], 8, ["to", "disabled"]))], 2))), 128))], 16, de));
+		}, 1032, ["name", "css"])], 8, ["to", "disabled"]))], 2))), 128))], 16, he));
 	}
 });
 //#endregion
-export { E as MMegaMenu };
+export { w as MMegaMenu };

package/dist/mega-menu/style.css

@@ -405,7 +405,7 @@
 
 :root {
     /* Shared minimum width for menu-like panels (select/orderlist/picklist) */
-    --m-menu-min-width: 12rem;
+    --m-overlay-menu-min-width: 12rem;
 }
 
 .m-button,
@@ -463,7 +463,7 @@
 .m-progress-spinner,
 .m-cascadeselect,
 .m-treeselect,
-.m-inputcolor,
+.m-colorpicker,
 .m-inputtags,
 .m-label,
 .m-speeddial,
@@ -489,8 +489,7 @@
 .m-password__input:disabled,
 .m-inputnumber__input:disabled,
 .m-inputotp__input:disabled,
-.m-inputcolor__text:disabled,
-.m-inputcolor__swatch:disabled,
+.m-colorpicker__trigger:disabled,
 .m-inputtags--disabled {
     background-color: var(--m-color-bg-disabled);
     color: var(--m-color-text-disabled);
@@ -513,8 +512,7 @@
 .m-textarea::placeholder,
 .m-password__input::placeholder,
 .m-inputnumber__input::placeholder,
-.m-inputtags__input::placeholder,
-.m-inputcolor__text::placeholder {
+.m-inputtags__input::placeholder {
     color: var(--m-color-text-muted);
     opacity: 1;
 }
@@ -858,9 +856,7 @@
     font-family: var(--m-font-sans);
     gap: var(--m-space-2);
     max-width: 100%;
-    min-width: var(--m-menu-min-width);
     position: relative;
-    width: fit-content;
 }
 
 .m-textarea-field--fluid,
@@ -1051,7 +1047,7 @@
     flex: 1;
     max-height: 16rem;
     min-height: 12rem;
-    min-width: var(--m-menu-min-width);
+    min-width: var(--m-overlay-menu-min-width);
 }
 
 .m-orderlist__list,
@@ -1119,7 +1115,6 @@
     .m-cascadeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
 .m-treeselect:not(.m-treeselect--open)
     .m-treeselect__trigger:hover:not(:disabled):not(:focus):not(:focus-visible),
-.m-inputcolor__text:hover:not(:disabled):not(:focus),
 .m-inputtags:hover:not(.m-inputtags--disabled):not(:focus-within),
 .m-togglebutton:hover:not(:disabled):not(.m-togglebutton--checked):not(:focus-visible),
 .m-inplace__display:hover:not(:focus-visible) {
@@ -1134,8 +1129,6 @@
 .m-treeselect--open .m-treeselect__trigger,
 .m-treeselect__trigger:focus,
 .m-treeselect__trigger:focus-visible,
-.m-inputcolor__text:focus,
-.m-inputcolor__text:focus-visible,
 .m-inputtags:focus-within,
 .m-togglebutton:focus-visible,
 .m-selectbutton__button:focus-visible,
@@ -1150,9 +1143,7 @@
 
 .m-inputotp--invalid .m-inputotp__input:focus,
 .m-inputotp--invalid .m-inputotp__input:focus-visible,
-.m-inputtags--invalid:focus-within,
-.m-inputcolor--invalid .m-inputcolor__text:focus,
-.m-inputcolor--invalid .m-inputcolor__text:focus-visible {
+.m-inputtags--invalid:focus-within {
     border-color: var(--m-color-danger);
     box-shadow: var(--m-focus-shadow-danger);
 }