morya-ui 0.3.8 → 0.4.1

package/dist/mentions/index.js

@@ -0,0 +1,258 @@
+import { i as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../useMId-BXFYayPP.js";
+import { t as n } from "../Icon-od9Ob-Ay.js";
+import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
+import { n as i } from "../context-CIx8fy-I.js";
+import { t as a } from "../ProgressSpinner-B_OJG_0l.js";
+import { i as ee, o as te, s as o } from "../config-COgrsSV2.js";
+import { n as s } from "../locale-Dnk0UIie.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";
+//#region src/components/Mentions/mentionUtils.ts
+function ie(e) {
+	return e === void 0 ? ["@"] : Array.isArray(e) ? e : [e];
+}
+function ae(e, t, n, r) {
+	let i = e.slice(0, t), a = null;
+	for (let e of n) {
+		let t = i.lastIndexOf(e);
+		if (t === -1 || t > 0 && !/\s/.test(i[t - 1])) continue;
+		let n = i.slice(t + e.length);
+		r && n.includes(r) || /^\S*$/.test(n) && (!a || t > a.start) && (a = {
+			prefix: e,
+			query: n,
+			start: t
+		});
+	}
+	return a;
+}
+function oe(e) {
+	return typeof e == "string" ? {
+		value: e,
+		label: e
+	} : {
+		value: e.value,
+		label: e.label ?? e.value
+	};
+}
+function T(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 = [
+	"id",
+	"value",
+	"rows",
+	"placeholder",
+	"disabled",
+	"readonly",
+	"aria-invalid",
+	"aria-describedby",
+	"aria-expanded",
+	"aria-busy",
+	"aria-controls",
+	"aria-autocomplete"
+], ce = ["aria-label"], le = ["id"], E = ["id"], D = ["aria-selected", "onMousedown"], O = { 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({
+	inheritAttrs: !1,
+	__name: "Mentions",
+	props: {
+		pt: {},
+		modelValue: { default: "" },
+		options: { default: () => [] },
+		prefix: { default: "@" },
+		split: { default: " " },
+		rows: {},
+		placeholder: {},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		status: {},
+		errorMessage: {},
+		helpText: {},
+		id: {},
+		size: {},
+		variant: {},
+		fluid: {
+			type: Boolean,
+			default: !1
+		},
+		emptyMessage: {},
+		clearable: {
+			type: Boolean,
+			default: void 0
+		},
+		allowClear: {
+			type: Boolean,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"focus",
+		"blur",
+		"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(() => [
+			"m-mentions",
+			`m-mentions--${me.value}`,
+			{
+				"m-mentions--disabled": A.disabled,
+				"m-mentions--open": V.value,
+				"m-mentions--clearable": W.value,
+				"m-mentions--loading": A.loading,
+				"m-mentions--fluid": ge.value,
+				"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({
+			itemCount: () => J.value.length,
+			orientation: "vertical",
+			enabled: () => V.value && J.value.length > 0,
+			onActivate: (e) => {
+				let t = J.value[e];
+				t && $(t);
+			},
+			onEscape: () => {
+				V.value = !1, Z.reset();
+			}
+		});
+		C(J, (e) => {
+			if (A.loading) {
+				V.value = !!q.value;
+				return;
+			}
+			V.value = !!(q.value && e.length > 0), V.value ? e.length && Z.moveFirst() : Z.reset();
+		}), C(() => A.loading, (e) => {
+			e && q.value && (V.value = !0);
+		});
+		function Q() {
+			H.value = R.value?.selectionStart ?? 0;
+		}
+		function Te(e) {
+			let t = e.target;
+			H.value = t.selectionStart ?? t.value.length, j("update:modelValue", t.value), q.value && J.value.length ? V.value = !0 : V.value = !1;
+		}
+		function $(e) {
+			let t = q.value;
+			if (!t) return;
+			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);
+			});
+		}
+		function Ee(e) {
+			!V.value || !J.value.length || (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === "Escape") && (Z.onKeydown(e), e.key === "Enter" && e.preventDefault());
+		}
+		function De(e) {
+			let t = J.value[e];
+			t && $(t);
+		}
+		function Oe(e) {
+			Q(), j("focus", e);
+		}
+		function ke(e) {
+			window.setTimeout(() => {
+				V.value = !1, Z.reset();
+			}, 120), j("blur", e);
+		}
+		function Ae(e) {
+			j("change", e.target.value);
+		}
+		function je() {
+			A.disabled || A.readonly || (j("update:modelValue", ""), V.value = !1, Z.reset(), g(() => 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), {
+				id: B.value,
+				ref_key: "textareaRef",
+				ref: R,
+				class: we.value,
+				value: p.modelValue,
+				rows: _e.value,
+				placeholder: p.placeholder,
+				disabled: p.disabled,
+				readonly: p.readonly,
+				"aria-invalid": U.value || void 0,
+				"aria-describedby": Se.value,
+				"aria-expanded": G.value,
+				"aria-busy": p.loading || void 0,
+				"aria-controls": G.value ? X.value : void 0,
+				"aria-autocomplete": V.value ? "list" : void 0,
+				role: "combobox",
+				autocomplete: "off",
+				onInput: Te,
+				onKeydown: Ee,
+				onKeyup: Q,
+				onClick: Q,
+				onFocus: Oe,
+				onBlur: ke,
+				onChange: Ae
+			}), null, 16, se),
+			W.value ? (v(), u("button", {
+				key: 0,
+				type: "button",
+				class: "m-mentions__clear",
+				"aria-label": x(L).clearInput,
+				onMousedown: t[0] ||= w(() => {}, ["prevent"]),
+				onClick: je
+			}, [f(n, {
+				name: "close",
+				size: "sm"
+			})], 40, ce)) : l("", !0),
+			G.value && p.loading ? (v(), u("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", {
+				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", {
+				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,
+				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", {
+			key: 0,
+			id: `${B.value}-help`,
+			class: _(["m-mentions__feedback", { "m-mentions__feedback--error": xe.value }]),
+			role: "alert"
+		}, b(Y.value), 11, fe)) : l("", !0)], 16));
+	}
+});
+//#endregion
+export { k as MMentions };