morya-ui 0.4.5 → 0.5.1

package/dist/mentions/index.js

@@ -4,15 +4,15 @@ import { t as n } from "../Icon-CmHjx7W8.js";
 import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
 import { n as i } from "../context-CIx8fy-I.js";
 import { t as a } from "../ProgressSpinner-vBXGvQ92.js";
-import { i as ee, o as te, s as o } from "../config-Cd20zAyW.js";
-import { n as s } from "../locale-BcxMPufl.js";
+import { i as ee, o, s } from "../config-Cd20zAyW.js";
+import { n as c } from "../locale-BcxMPufl.js";
 import "./style.js";
-import { Fragment as ne, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createVNode as f, defineComponent as p, inject as m, mergeProps as h, nextTick as g, normalizeClass as _, openBlock as v, ref as y, renderList as re, toDisplayString as b, unref as x, useAttrs as S, watch as C, withModifiers as w } from "vue";
+import { Fragment as te, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, defineComponent as m, inject as h, mergeProps as g, nextTick as _, normalizeClass as v, openBlock as y, ref as b, renderList as ne, toDisplayString as x, unref as S, useAttrs as re, watch as C, withModifiers as w } from "vue";
 //#region src/components/Mentions/mentionUtils.ts
 function ie(e) {
 	return e === void 0 ? ["@"] : Array.isArray(e) ? e : [e];
 }
-function ae(e, t, n, r) {
+function T(e, t, n, r) {
 	let i = e.slice(0, t), a = null;
 	for (let e of n) {
 		let t = i.lastIndexOf(e);
@@ -26,7 +26,7 @@ function ae(e, t, n, r) {
 	}
 	return a;
 }
-function oe(e) {
+function E(e) {
 	return typeof e == "string" ? {
 		value: e,
 		label: e
@@ -35,13 +35,13 @@ function oe(e) {
 		label: e.label ?? e.value
 	};
 }
-function T(e, t) {
+function D(e, t) {
 	let n = t.toLowerCase();
 	return n ? e.filter((e) => e.value.toLowerCase().includes(n) || e.label.toLowerCase().includes(n)) : e;
 }
 //#endregion
 //#region src/components/Mentions/Mentions.vue?vue&type=script&setup=true&lang.ts
-var se = [
+var O = [
 	"id",
 	"value",
 	"rows",
@@ -54,14 +54,14 @@ var se = [
 	"aria-busy",
 	"aria-controls",
 	"aria-autocomplete"
-], ce = ["aria-label"], le = ["id"], E = ["id"], D = ["aria-selected", "onMousedown"], O = { class: "m-mentions__option-value" }, ue = {
+], ae = ["aria-label"], oe = ["id"], se = ["id"], ce = ["aria-selected", "onMousedown"], le = { class: "m-mentions__option-value" }, ue = {
 	key: 0,
 	class: "m-mentions__option-label"
 }, de = {
 	key: 3,
 	class: "m-mentions__empty",
 	role: "status"
-}, fe = ["id"], k = /* @__PURE__ */ p({
+}, fe = ["id"], k = /* @__PURE__ */ m({
 	inheritAttrs: !1,
 	__name: "Mentions",
 	props: {
@@ -99,10 +99,6 @@ var se = [
 			type: Boolean,
 			default: void 0
 		},
-		allowClear: {
-			type: Boolean,
-			default: void 0
-		},
 		loading: {
 			type: Boolean,
 			default: !1
@@ -115,8 +111,8 @@ var se = [
 		"change",
 		"select"
 	],
-	setup(p, { emit: k }) {
-		let A = p, j = k, M = S(), { rootAttrs: N, controlAttrs: P } = e(M, () => A.pt), F = ee("Mentions"), I = m(i, null), L = s(), R = y(null), z = t("m-mentions"), B = c(() => A.id ?? z), V = y(!1), H = y(0), U = c(() => A.invalid || A.status === "error" || !!A.errorMessage), pe = c(() => A.status === "warning" && !U.value), me = te("Mentions", () => A.size ?? I?.value.size), he = o("Mentions", () => A.variant), ge = c(() => A.fluid ?? F.value.fluid ?? !1), _e = c(() => A.rows ?? F.value.rows ?? 3), W = c(() => (A.clearable ?? A.allowClear ?? F.value.clearable ?? F.value.allowClear ?? !1) && !!A.modelValue && !A.disabled && !A.readonly), G = c(() => V.value && !!q.value), ve = c(() => ie(A.prefix)), K = c(() => A.split ?? " "), ye = c(() => A.options.map(oe)), q = c(() => ae(A.modelValue ?? "", H.value, ve.value, K.value)), J = c(() => q.value ? T(ye.value, q.value.query) : []), be = c(() => A.emptyMessage ?? L.value.emptyOptions), Y = c(() => A.errorMessage || A.helpText), xe = c(() => !!A.errorMessage || U.value && !!A.helpText), Se = c(() => Y.value ? `${B.value}-help` : void 0), Ce = c(() => [
+	setup(m, { emit: k }) {
+		let A = m, j = k, M = re(), { rootAttrs: N, controlAttrs: P } = e(M, () => A.pt), F = ee("Mentions"), I = h(i, null), L = c(), R = b(null), z = t("m-mentions"), B = l(() => A.id ?? z), V = b(!1), H = b(0), U = l(() => A.invalid || A.status === "error" || !!A.errorMessage), pe = l(() => A.status === "warning" && !U.value), me = o("Mentions", () => A.size ?? I?.value.size), he = s("Mentions", () => A.variant), ge = l(() => A.fluid ?? F.value.fluid ?? !1), _e = l(() => A.rows ?? F.value.rows ?? 3), W = l(() => (A.clearable ?? F.value.clearable ?? !1) && !!A.modelValue && !A.disabled && !A.readonly), G = l(() => V.value && !!q.value), ve = l(() => ie(A.prefix)), K = l(() => A.split ?? " "), ye = l(() => A.options.map(E)), q = l(() => T(A.modelValue ?? "", H.value, ve.value, K.value)), J = l(() => q.value ? D(ye.value, q.value.query) : []), be = l(() => A.emptyMessage ?? L.value.emptyOptions), Y = l(() => A.errorMessage || A.helpText), xe = l(() => !!A.errorMessage || U.value && !!A.helpText), Se = l(() => Y.value ? `${B.value}-help` : void 0), Ce = l(() => [
 			"m-mentions",
 			`m-mentions--${me.value}`,
 			{
@@ -128,7 +124,7 @@ var se = [
 				"m-mentions--invalid": U.value,
 				"m-mentions--warning": pe.value
 			}
-		]), we = c(() => ["m-mentions__textarea", { "m-mentions__textarea--filled": he.value === "filled" }]), X = c(() => `${B.value}-suggestions`), Z = r({
+		]), we = l(() => ["m-mentions__textarea", { "m-mentions__textarea--filled": he.value === "filled" }]), X = l(() => `${B.value}-suggestions`), Z = r({
 			itemCount: () => J.value.length,
 			orientation: "vertical",
 			enabled: () => V.value && J.value.length > 0,
@@ -162,7 +158,7 @@ var se = [
 			let n = A.modelValue ?? "", r = `${t.prefix}${e.value}${K.value}`, i = n.slice(0, t.start) + r + n.slice(H.value);
 			j("update:modelValue", i), j("select", e), V.value = !1, Z.reset();
 			let a = t.start + r.length;
-			g(() => {
+			_(() => {
 				let e = R.value;
 				e && (e.focus(), e.setSelectionRange(a, a), H.value = a);
 			});
@@ -186,23 +182,23 @@ var se = [
 			j("change", e.target.value);
 		}
 		function je() {
-			A.disabled || A.readonly || (j("update:modelValue", ""), V.value = !1, Z.reset(), g(() => R.value?.focus()));
+			A.disabled || A.readonly || (j("update:modelValue", ""), V.value = !1, Z.reset(), _(() => R.value?.focus()));
 		}
-		return (e, t) => (v(), u("div", h(x(N), { class: Ce.value }), [d("div", { class: _(["m-mentions__control", { "m-mentions__control--clearable": W.value }]) }, [
-			d("textarea", h(x(P), {
+		return (e, t) => (y(), d("div", g(S(N), { class: Ce.value }), [f("div", { class: v(["m-mentions__control", { "m-mentions__control--clearable": W.value }]) }, [
+			f("textarea", g(S(P), {
 				id: B.value,
 				ref_key: "textareaRef",
 				ref: R,
 				class: we.value,
-				value: p.modelValue,
+				value: m.modelValue,
 				rows: _e.value,
-				placeholder: p.placeholder,
-				disabled: p.disabled,
-				readonly: p.readonly,
+				placeholder: m.placeholder,
+				disabled: m.disabled,
+				readonly: m.readonly,
 				"aria-invalid": U.value || void 0,
 				"aria-describedby": Se.value,
 				"aria-expanded": G.value,
-				"aria-busy": p.loading || void 0,
+				"aria-busy": m.loading || void 0,
 				"aria-controls": G.value ? X.value : void 0,
 				"aria-autocomplete": V.value ? "list" : void 0,
 				role: "combobox",
@@ -214,44 +210,44 @@ var se = [
 				onFocus: Oe,
 				onBlur: ke,
 				onChange: Ae
-			}), null, 16, se),
-			W.value ? (v(), u("button", {
+			}), null, 16, O),
+			W.value ? (y(), d("button", {
 				key: 0,
 				type: "button",
 				class: "m-mentions__clear",
-				"aria-label": x(L).clearInput,
+				"aria-label": S(L).clearInput,
 				onMousedown: t[0] ||= w(() => {}, ["prevent"]),
 				onClick: je
-			}, [f(n, {
+			}, [p(n, {
 				name: "close",
 				size: "sm"
-			})], 40, ce)) : l("", !0),
-			G.value && p.loading ? (v(), u("div", {
+			})], 40, ae)) : u("", !0),
+			G.value && m.loading ? (y(), d("div", {
 				key: 1,
 				id: X.value,
 				class: "m-mentions__dropdown m-mentions__dropdown--loading",
 				role: "listbox",
 				"aria-busy": "true",
 				"aria-label": "Suggestions"
-			}, [f(a, { size: "small" })], 8, le)) : G.value && J.value.length ? (v(), u("ul", {
+			}, [p(a, { size: "small" })], 8, oe)) : G.value && J.value.length ? (y(), d("ul", {
 				key: 2,
 				id: X.value,
 				class: "m-mentions__dropdown",
 				role: "listbox",
 				"aria-label": "Suggestions"
-			}, [(v(!0), u(ne, null, re(J.value, (e, t) => (v(), u("li", {
+			}, [(y(!0), d(te, null, ne(J.value, (e, t) => (y(), d("li", {
 				key: e.value,
 				role: "option",
-				class: _(["m-mentions__option", { "m-mentions__option--active": x(Z).activeIndex.value === t }]),
-				"aria-selected": x(Z).activeIndex.value === t,
+				class: v(["m-mentions__option", { "m-mentions__option--active": S(Z).activeIndex.value === t }]),
+				"aria-selected": S(Z).activeIndex.value === t,
 				onMousedown: w((e) => De(t), ["prevent"])
-			}, [d("span", O, b(e.value), 1), e.label === e.value ? l("", !0) : (v(), u("span", ue, b(e.label), 1))], 42, D))), 128))], 8, E)) : G.value && q.value && !p.loading && !J.value.length ? (v(), u("p", de, b(be.value), 1)) : l("", !0)
-		], 2), Y.value ? (v(), u("p", {
+			}, [f("span", le, x(e.value), 1), e.label === e.value ? u("", !0) : (y(), d("span", ue, x(e.label), 1))], 42, ce))), 128))], 8, se)) : G.value && q.value && !m.loading && !J.value.length ? (y(), d("p", de, x(be.value), 1)) : u("", !0)
+		], 2), Y.value ? (y(), d("p", {
 			key: 0,
 			id: `${B.value}-help`,
-			class: _(["m-mentions__feedback", { "m-mentions__feedback--error": xe.value }]),
+			class: v(["m-mentions__feedback", { "m-mentions__feedback--error": xe.value }]),
 			role: "alert"
-		}, b(Y.value), 11, fe)) : l("", !0)], 16));
+		}, x(Y.value), 11, fe)) : u("", !0)], 16));
 	}
 });
 //#endregion

package/dist/mentions/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);
 }