morya-ui 0.1.1

package/dist/tree/style.js

@@ -0,0 +1,5 @@
+import '../theme/styles.css'
+import '../styles/base.css'
+import '../components/Checkbox/styles.css'
+import '../components/Icon/styles.css'
+import '../components/Tree/styles.css'

package/dist/tree-select/index.js

@@ -0,0 +1,480 @@
+import { t as e } from "../Icon-DfpIfo2L.js";
+import { t } from "../useMId-BXFYayPP.js";
+import { n, t as r } from "../overlay-oR-5MDuE.js";
+import { t as i } from "../overlayPlacement-Cd20JTD_.js";
+import { t as ee } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as a } from "../Checkbox-D8Ma0ZbG.js";
+import { t as te } from "../useFieldFeedback-C5qIqYMK.js";
+import { a as ne, i as re, n as ie, o as ae, r as o, s as oe } from "../checkStrategy-CZzuUKDI.js";
+import { c as se, o as ce } from "../config-CI8_WBbE.js";
+import { n as le } from "../locale-DYGhxekd.js";
+import "./style.js";
+import { Fragment as s, Teleport as ue, Transition as de, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as fe, createVNode as p, defineComponent as m, nextTick as pe, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as me, openBlock as _, ref as v, renderList as y, renderSlot as he, resolveDynamicComponent as b, toDisplayString as x, unref as S, useSlots as ge, vModelText as _e, watch as ve, withCtx as ye, withDirectives as be, withModifiers as C } from "vue";
+//#region src/components/TreeSelect/TreeSelectNodeItem.vue?vue&type=script&setup=true&lang.ts
+var w = [
+	"aria-expanded",
+	"aria-level",
+	"aria-disabled",
+	"aria-selected",
+	"aria-checked"
+], T = ["aria-label"], E = {
+	key: 1,
+	class: "m-treeselect__toggler-spacer"
+}, xe = ["disabled", "tabindex"], Se = {
+	key: 0,
+	role: "group"
+}, Ce = /* @__PURE__ */ m({
+	__name: "TreeSelectNodeItem",
+	props: {
+		node: {},
+		depth: {},
+		selectedKeys: {},
+		checkedKeys: {},
+		expanded: {},
+		showCheckbox: { type: Boolean },
+		activeKey: {},
+		renderOption: { type: Function }
+	},
+	emits: [
+		"toggle",
+		"select",
+		"check"
+	],
+	setup(t) {
+		let n = le();
+		return (r, i) => (_(), d("li", {
+			class: h(["m-treeselect__node", { "m-treeselect__node--active": t.node.key === t.activeKey }]),
+			role: "treeitem",
+			"aria-expanded": t.node.children?.length ? !!t.expanded[t.node.key] : void 0,
+			"aria-level": t.depth + 1,
+			"aria-disabled": t.node.disabled || void 0,
+			"aria-selected": t.showCheckbox ? void 0 : t.selectedKeys.includes(t.node.key),
+			"aria-checked": t.showCheckbox ? !!t.checkedKeys[t.node.key] : void 0
+		}, [f("div", {
+			class: "m-treeselect__row",
+			style: g({ paddingLeft: `${t.depth * .75}rem` })
+		}, [
+			t.node.children?.length ? (_(), d("button", {
+				key: 0,
+				type: "button",
+				class: "m-treeselect__toggler",
+				tabindex: "-1",
+				"aria-label": t.expanded[t.node.key] ? S(n).collapse : S(n).expand,
+				onClick: i[0] ||= C((e) => r.$emit("toggle", t.node.key), ["stop"])
+			}, [p(e, {
+				name: t.expanded[t.node.key] ? "chevron-down" : "chevron-right",
+				size: "sm"
+			}, null, 8, ["name"])], 8, T)) : (_(), d("span", E)),
+			t.showCheckbox ? (_(), l(a, {
+				key: 2,
+				class: "m-treeselect__checkbox",
+				tabindex: "-1",
+				"model-value": !!t.checkedKeys[t.node.key],
+				disabled: t.node.disabled,
+				"onUpdate:modelValue": i[1] ||= (e) => r.$emit("check", t.node),
+				onClick: i[2] ||= C(() => {}, ["stop"])
+			}, null, 8, ["model-value", "disabled"])) : u("", !0),
+			f("button", {
+				type: "button",
+				class: h(["m-treeselect__option", { "m-treeselect__option--selected": t.selectedKeys.includes(t.node.key) }]),
+				disabled: t.node.disabled,
+				tabindex: t.node.key === t.activeKey ? 0 : -1,
+				onClick: i[3] ||= (e) => r.$emit("select", t.node)
+			}, [t.renderOption ? (_(), l(b(() => t.renderOption?.(t.node)), { key: 0 })) : (_(), d(s, { key: 1 }, [fe(x(t.node.label), 1)], 64))], 10, xe)
+		], 4), t.node.children?.length && t.expanded[t.node.key] ? (_(), d("ul", Se, [(_(!0), d(s, null, y(t.node.children, (e) => (_(), l(Ce, {
+			key: e.key,
+			node: e,
+			depth: t.depth + 1,
+			"selected-keys": t.selectedKeys,
+			"checked-keys": t.checkedKeys,
+			expanded: t.expanded,
+			"show-checkbox": t.showCheckbox,
+			"active-key": t.activeKey,
+			"render-option": t.renderOption,
+			onToggle: i[4] ||= (e) => r.$emit("toggle", e),
+			onSelect: i[5] ||= (e) => r.$emit("select", e),
+			onCheck: i[6] ||= (e) => r.$emit("check", e)
+		}, null, 8, [
+			"node",
+			"depth",
+			"selected-keys",
+			"checked-keys",
+			"expanded",
+			"show-checkbox",
+			"active-key",
+			"render-option"
+		]))), 128))])) : u("", !0)], 10, w));
+	}
+}), we = ["for"], Te = [
+	"id",
+	"tabindex",
+	"aria-disabled",
+	"aria-expanded",
+	"aria-controls",
+	"aria-invalid",
+	"aria-describedby"
+], Ee = {
+	key: 0,
+	class: "m-treeselect__tags"
+}, De = { class: "m-select__tag-label" }, Oe = [
+	"aria-label",
+	"disabled",
+	"onClick"
+], ke = {
+	key: 0,
+	class: "m-select__tag wk-select__tag--more"
+}, Ae = { class: "m-select__suffix" }, je = ["aria-label"], Me = ["id"], Ne = ["placeholder"], Pe = {
+	class: "m-treeselect__tree",
+	role: "tree"
+}, Fe = ["id", "role"], D = /* @__PURE__ */ m({
+	__name: "TreeSelect",
+	props: {
+		options: {},
+		modelValue: { default: null },
+		id: {},
+		label: {},
+		helpText: {},
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
+		errorMessage: {},
+		placeholder: { default: void 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		size: {},
+		selectionMode: { default: "single" },
+		multiple: {
+			type: Boolean,
+			default: !1
+		},
+		checkable: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrictly: {
+			type: Boolean,
+			default: !1
+		},
+		checkStrategy: { default: "all" },
+		clearable: {
+			type: Boolean,
+			default: !1
+		},
+		filterable: {
+			type: Boolean,
+			default: !1
+		},
+		showPath: {
+			type: Boolean,
+			default: !1
+		},
+		separator: { default: " / " },
+		maxTagCount: {},
+		teleport: {
+			type: Boolean,
+			default: !0
+		},
+		appendTo: {}
+	},
+	emits: ["update:modelValue", "clear"],
+	setup(a, { emit: fe }) {
+		let m = a, b = fe, w = ge(), T = se(), E = le(), xe = ce("TreeSelect", () => m.size), Se = t("m-treeselect"), D = c(() => m.id ?? Se), { isInvalid: Ie, feedbackText: O, feedbackIsError: k } = te(m), A = v(!1), j = v(""), M = v(null), N = v(null), P = v(null), Le = v({}), F = v({}), Re = c(() => n(m, T.value.appendTo)), I = c(() => r(m, T.value.appendTo)), L = c(() => m.multiple || m.selectionMode === "multiple" || m.checkable), R = c(() => Array.isArray(m.modelValue) ? m.modelValue : typeof m.modelValue == "string" && m.modelValue ? [m.modelValue] : []), ze = c(() => {
+			let e = {};
+			for (let t of R.value) e[t] = !0;
+			return e;
+		}), z = c(() => ie(m.options, ze.value, m.checkStrategy, m.checkStrictly)), Be = c(() => {
+			let e = R.value[0];
+			if (!e || L.value) return m.placeholder ?? E.value.selectPlaceholder;
+			if (m.showPath) {
+				let t = re(m.options, e);
+				return t.length ? t.join(m.separator) : e;
+			}
+			return o(m.options, e)?.label ?? m.placeholder ?? E.value.selectPlaceholder;
+		}), B = c(() => {
+			let e = R.value[0];
+			return e && !L.value ? o(m.options, e) : void 0;
+		}), Ve = c(() => w.option ? (e) => w.option?.({ option: e }) : void 0), V = c(() => R.value.map((e) => ({
+			key: e,
+			label: m.showPath ? re(m.options, e).join(m.separator) : o(m.options, e)?.label ?? e
+		}))), H = c(() => {
+			let e = m.maxTagCount;
+			return e == null || e < 0 || V.value.length <= e ? V.value : V.value.slice(0, e);
+		}), U = c(() => Math.max(0, V.value.length - H.value.length)), W = c(() => m.clearable && R.value.length > 0 && !m.disabled), He = c(() => {
+			let e = j.value.trim().toLowerCase();
+			if (!e) return m.options;
+			let t = (n) => {
+				let r = n.label.toLowerCase().includes(e), i = (n.children ?? []).map(t).filter((e) => e != null);
+				return r || i.length ? {
+					...n,
+					children: i.length ? i : n.children
+				} : null;
+			};
+			return m.options.map(t).filter((e) => e != null);
+		}), G = c(() => {
+			let e = [], t = (n, r) => {
+				for (let i of n) e.push({
+					node: i,
+					parentKey: r
+				}), i.children?.length && F.value[i.key] && t(i.children, i.key);
+			};
+			return t(He.value, null), e;
+		}), Ue = t("m-treeselect-panel"), K = ee({
+			itemCount: () => G.value.length,
+			isItemDisabled: (e) => !!G.value[e]?.node.disabled,
+			enabled: A,
+			onActivate: (e) => {
+				let t = G.value[e];
+				t && Xe(t.node);
+			},
+			onEscape: () => {
+				A.value = !1;
+			},
+			returnFocusTo: N
+		}), We = c(() => G.value[K.activeIndex.value]?.node.key ?? null);
+		function Ge() {
+			let e = K.activeIndex.value;
+			if (e < 0) return;
+			let t = P.value?.querySelectorAll(".m-treeselect__option")?.[e];
+			t && document.activeElement !== t && t.focus({ preventScroll: !0 }), t?.scrollIntoView({ block: "nearest" });
+		}
+		function Ke() {
+			if (!I.value || !N.value) return;
+			let e = N.value.getBoundingClientRect();
+			Le.value = i(e, "bottom-start", { minWidth: `${e.width}px` });
+		}
+		function q() {
+			A.value = !0, pe(() => {
+				Ke();
+				let e = G.value.findIndex((e) => R.value.includes(e.node.key));
+				e >= 0 ? K.setActive(e) : K.moveFirst(), m.filterable ? P.value?.querySelector(".m-treeselect__filter")?.focus() : Ge();
+			});
+		}
+		function qe() {
+			if (!m.disabled) {
+				if (A.value) {
+					A.value = !1;
+					return;
+				}
+				q();
+			}
+		}
+		function J(e) {
+			if (!A.value) return;
+			let t = G.value, n = t[K.activeIndex.value];
+			if (e.key === "ArrowRight") {
+				if (e.preventDefault(), !n) return;
+				if (n.node.children?.length) {
+					if (!F.value[n.node.key]) Y(n.node.key);
+					else {
+						let e = t.findIndex((e) => e.parentKey === n.node.key);
+						e >= 0 && K.setActive(e);
+					}
+				}
+				return;
+			}
+			if (e.key === "ArrowLeft") {
+				if (e.preventDefault(), !n) return;
+				if (n.node.children?.length && F.value[n.node.key]) Y(n.node.key);
+				else if (n.parentKey != null) {
+					let e = t.findIndex((e) => e.node.key === n.parentKey);
+					e >= 0 && K.setActive(e);
+				}
+				return;
+			}
+			K.onKeydown(e);
+		}
+		function Je(e) {
+			if (!m.disabled) {
+				if (!A.value) {
+					e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), q()) : e.key === "Enter" && (e.preventDefault(), qe());
+					return;
+				}
+				J(e);
+			}
+		}
+		function Ye(e) {
+			[
+				"ArrowUp",
+				"ArrowDown",
+				"Enter",
+				"Escape"
+			].includes(e.key) && J(e);
+		}
+		ve(K.activeIndex, () => {
+			if (A.value && !m.filterable) Ge();
+			else if (A.value) {
+				let e = K.activeIndex.value;
+				P.value?.querySelectorAll(".m-treeselect__option")[e]?.scrollIntoView({ block: "nearest" });
+			}
+		});
+		function Y(e) {
+			F.value = {
+				...F.value,
+				[e]: !F.value[e]
+			};
+		}
+		function X(e) {
+			L.value ? b("update:modelValue", e) : b("update:modelValue", e[0] ?? null);
+		}
+		function Xe(e) {
+			if (!e.disabled) {
+				if (m.checkable) {
+					Ze(e);
+					return;
+				}
+				if (!L.value) {
+					b("update:modelValue", e.key === m.modelValue ? null : e.key), A.value = !1, N.value?.focus({ preventScroll: !0 });
+					return;
+				}
+				X(R.value.includes(e.key) ? R.value.filter((t) => t !== e.key) : [...R.value, e.key]);
+			}
+		}
+		function Ze(e) {
+			if (e.disabled) return;
+			let t = { ...z.value }, n = !t[e.key];
+			m.checkStrictly ? n ? t[e.key] = !0 : delete t[e.key] : (ae(e, n, t), oe(m.options, t));
+			let r = ne(m.options, t, m.checkStrategy, m.checkStrictly);
+			X(Object.keys(r).filter((e) => r[e]));
+		}
+		function Qe(e) {
+			X(R.value.filter((t) => t !== e));
+		}
+		function $e(e) {
+			e.stopPropagation(), b("update:modelValue", L.value ? [] : null), b("clear");
+		}
+		function Z(e) {
+			let t = e.target;
+			M.value?.contains(t) || P.value?.contains(t) || (A.value = !1);
+		}
+		function Q(e) {
+			let t = e.target;
+			M.value?.contains(t) || P.value?.contains(t) || (A.value = !1);
+		}
+		function $() {
+			A.value && Ke();
+		}
+		return ve(A, (e) => {
+			e ? (document.addEventListener("click", Z), document.addEventListener("focusin", Q), I.value && (window.addEventListener("resize", $), window.addEventListener("scroll", $, !0))) : (j.value = "", K.reset(), document.removeEventListener("click", Z), document.removeEventListener("focusin", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0));
+		}), me(() => {
+			document.removeEventListener("click", Z), document.removeEventListener("focusin", Q), window.removeEventListener("resize", $), window.removeEventListener("scroll", $, !0);
+		}), (t, n) => (_(), d("div", {
+			ref_key: "root",
+			ref: M,
+			class: "m-select-field"
+		}, [
+			a.label ? (_(), d("label", {
+				key: 0,
+				class: "m-select-field__label",
+				for: D.value
+			}, x(a.label), 9, we)) : u("", !0),
+			f("div", { class: h(["m-treeselect", [`m-treeselect--${S(xe)}`, {
+				"m-treeselect--disabled": a.disabled,
+				"m-treeselect--open": A.value,
+				"m-treeselect--multiple": L.value,
+				"m-treeselect--invalid": S(Ie)
+			}]]) }, [f("div", { class: h(["m-treeselect__control wk-select__control", {
+				"m-select__control--clearable": W.value,
+				"m-select__control--open": A.value
+			}]) }, [f("div", {
+				id: D.value,
+				ref_key: "trigger",
+				ref: N,
+				class: "m-treeselect__trigger",
+				role: "combobox",
+				tabindex: a.disabled ? -1 : 0,
+				"aria-disabled": a.disabled || void 0,
+				"aria-expanded": A.value,
+				"aria-controls": A.value ? S(Ue) : void 0,
+				"aria-invalid": S(Ie) || void 0,
+				"aria-describedby": S(O) ? `${D.value}-help` : void 0,
+				"aria-haspopup": "tree",
+				onClick: qe,
+				onKeydown: Je
+			}, [L.value && V.value.length ? (_(), d("div", Ee, [(_(!0), d(s, null, y(H.value, (t) => (_(), d("span", {
+				key: t.key,
+				class: "m-select__tag"
+			}, [f("span", De, x(t.label), 1), f("button", {
+				type: "button",
+				class: "m-select__tag-remove",
+				"aria-label": S(E).removeTag,
+				disabled: a.disabled,
+				onClick: C((e) => Qe(t.key), ["stop"])
+			}, [p(e, {
+				name: "close",
+				size: "sm"
+			})], 8, Oe)]))), 128)), U.value ? (_(), d("span", ke, x(U.value > 0 ? `+${U.value}` : ""), 1)) : u("", !0)])) : S(w).value && B.value ? he(t.$slots, "value", { option: B.value }, void 0, void 0, 2) : (_(), d("span", {
+				key: 1,
+				class: h(["m-treeselect__label", { "m-treeselect__label--placeholder": !R.value.length }])
+			}, x(Be.value), 3))], 40, Te), f("div", Ae, [W.value ? (_(), d("button", {
+				key: 0,
+				class: "m-select__clear",
+				type: "button",
+				"aria-label": S(E).clear,
+				onClick: $e
+			}, [p(e, {
+				name: "close",
+				class: "m-control-affix-icon"
+			})], 8, je)) : u("", !0), f("span", {
+				class: h(["m-select__indicator", { "m-select__indicator--open": A.value }]),
+				"aria-hidden": "true"
+			}, [p(e, {
+				name: "chevron-down",
+				class: "m-control-affix-icon"
+			})], 2)])], 2), (_(), l(ue, {
+				to: Re.value.to,
+				disabled: Re.value.disabled
+			}, [p(de, { name: "m-scale-fade" }, {
+				default: ye(() => [A.value ? (_(), d("div", {
+					key: 0,
+					id: S(Ue),
+					ref_key: "panel",
+					ref: P,
+					class: h(["m-treeselect__panel", { "m-treeselect__panel--teleported": I.value }]),
+					style: g(I.value ? Le.value : void 0),
+					onKeydown: J
+				}, [a.filterable ? be((_(), d("input", {
+					key: 0,
+					"onUpdate:modelValue": n[0] ||= (e) => j.value = e,
+					class: "m-treeselect__filter",
+					type: "search",
+					placeholder: S(E).searchPlaceholder,
+					onClick: n[1] ||= C(() => {}, ["stop"]),
+					onKeydown: Ye
+				}, null, 40, Ne)), [[_e, j.value]]) : u("", !0), f("ul", Pe, [(_(!0), d(s, null, y(He.value, (e) => (_(), l(Ce, {
+					key: e.key,
+					node: e,
+					depth: 0,
+					"selected-keys": R.value,
+					"checked-keys": z.value,
+					expanded: F.value,
+					"show-checkbox": a.checkable,
+					"active-key": We.value,
+					"render-option": Ve.value,
+					onToggle: Y,
+					onSelect: Xe,
+					onCheck: Ze
+				}, null, 8, [
+					"node",
+					"selected-keys",
+					"checked-keys",
+					"expanded",
+					"show-checkbox",
+					"active-key",
+					"render-option"
+				]))), 128))])], 46, Me)) : u("", !0)]),
+				_: 1
+			})], 8, ["to", "disabled"]))], 2),
+			S(O) ? (_(), d("span", {
+				key: 1,
+				id: `${D.value}-help`,
+				class: h(["m-select-field__help", { "m-select-field__help--invalid": S(k) }]),
+				role: S(k) ? "alert" : void 0
+			}, x(S(O)), 11, Fe)) : u("", !0)
+		], 512));
+	}
+});
+//#endregion
+export { D as MTreeSelect };