morya-ui 0.1.1 → 0.2.1

package/dist/dropdown/index.js

@@ -1,12 +1,13 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { n as t, t as n } from "../overlay-oR-5MDuE.js";
-import { t as r } from "../overlayPlacement-Cd20JTD_.js";
-import { t as i } from "../icon-xUOyawgJ.js";
-import { t as a } from "../key-CaQYVkjh.js";
-import { c as o } from "../config-CI8_WBbE.js";
-import { n as s } from "../locale-DYGhxekd.js";
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { n, t as r } from "../overlay-oR-5MDuE.js";
+import { t as i } from "../overlayPlacement-Cd20JTD_.js";
+import { t as a } from "../icon-xUOyawgJ.js";
+import { t as o } from "../key-CaQYVkjh.js";
+import { c as s } from "../config-CI8_WBbE.js";
+import { n as c } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as c, Teleport as l, Transition as u, computed as d, createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createSlots as g, createTextVNode as _, createVNode as v, defineComponent as y, nextTick as b, normalizeClass as x, normalizeStyle as S, onBeforeUnmount as C, openBlock as w, ref as T, renderList as E, renderSlot as D, toDisplayString as O, unref as k, watch as A, withCtx as j } from "vue";
+import { Fragment as l, Teleport as u, Transition as d, computed as f, createBlock as p, createCommentVNode as m, createElementBlock as h, createElementVNode as g, createSlots as _, createTextVNode as v, createVNode as y, defineComponent as b, mergeProps as ee, nextTick as x, normalizeClass as S, normalizeStyle as C, onBeforeUnmount as te, openBlock as w, ref as T, renderList as E, renderSlot as D, toDisplayString as O, unref as k, useAttrs as A, watch as ne, withCtx as j } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
 var M = {
 	key: 0,
@@ -34,79 +35,80 @@ var M = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, H = /* @__PURE__ */ y({
+}, H = /* @__PURE__ */ b({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
 		highlightedValue: {}
 	},
 	emits: ["select", "highlight"],
-	setup(t, { emit: n }) {
-		let r = n, o = T(null);
+	setup(e, { emit: n }) {
+		let r = n, i = T(null);
 		function s(e) {
 			return e.separator || e.type === "divider";
 		}
-		function l(e) {
+		function c(e) {
 			return e.type === "group";
 		}
 		function u(e, t) {
-			return a(e, t, "dd");
+			return o(e, t, "dd");
 		}
 		function d(e) {
-			return i(e.icon);
+			return a(e.icon);
 		}
-		function g(e, t) {
-			e.disabled || s(e) || l(e) || (r("highlight", e.value), e.items?.length && (o.value = u(e, t)));
+		function f(e, t) {
+			e.disabled || s(e) || c(e) || (r("highlight", e.value), e.items?.length && (i.value = u(e, t)));
 		}
-		function y() {
-			o.value = null;
+		function _() {
+			i.value = null;
 		}
-		return (n, r) => (w(!0), m(c, null, E(t.items, (i, a) => (w(), m(c, { key: u(i, a) }, [s(i) ? (w(), m("div", M)) : l(i) ? (w(), m("div", N, [h("div", P, O(i.label), 1), i.items?.length ? (w(), f(H, {
+		return (n, r) => (w(!0), h(l, null, E(e.items, (a, o) => (w(), h(l, { key: u(a, o) }, [s(a) ? (w(), h("div", M)) : c(a) ? (w(), h("div", N, [g("div", P, O(a.label), 1), a.items?.length ? (w(), p(H, {
 			key: 0,
-			items: i.items,
-			"highlighted-value": t.highlightedValue,
+			items: a.items,
+			"highlighted-value": e.highlightedValue,
 			onSelect: r[0] ||= (e) => n.$emit("select", e),
 			onHighlight: r[1] ||= (e) => n.$emit("highlight", e)
-		}, null, 8, ["items", "highlighted-value"])) : p("", !0)])) : i.items?.length ? (w(), m("div", {
+		}, null, 8, ["items", "highlighted-value"])) : m("", !0)])) : a.items?.length ? (w(), h("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => g(i, a),
-			onMouseleave: y
-		}, [h("button", {
+			onMouseenter: (e) => f(a, o),
+			onMouseleave: _
+		}, [g("button", {
 			type: "button",
-			class: x(["m-dropdown__item wk-dropdown__item--parent", { "m-dropdown__item--highlighted": t.highlightedValue === i.value }]),
+			class: S(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
-			disabled: i.disabled,
+			disabled: a.disabled,
 			"aria-haspopup": !0
 		}, [
-			d(i) ? (w(), m("span", L, [v(e, {
-				name: d(i),
+			d(a) ? (w(), h("span", L, [y(t, {
+				name: d(a),
 				size: "sm"
-			}, null, 8, ["name"])])) : p("", !0),
-			D(n.$slots, "item", { item: i }, () => [_(O(i.label), 1)]),
-			h("span", R, [v(e, {
+			}, null, 8, ["name"])])) : m("", !0),
+			D(n.$slots, "item", { item: a }, () => [v(O(a.label), 1)]),
+			g("span", R, [y(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 10, I), o.value === u(i, a) ? (w(), m("div", z, [v(H, {
-			items: i.items,
-			"highlighted-value": t.highlightedValue,
+		], 10, I), i.value === u(a, o) ? (w(), h("div", z, [y(H, {
+			items: a.items,
+			"highlighted-value": e.highlightedValue,
 			onSelect: r[2] ||= (e) => n.$emit("select", e),
 			onHighlight: r[3] ||= (e) => n.$emit("highlight", e)
-		}, null, 8, ["items", "highlighted-value"])])) : p("", !0)], 40, F)) : (w(), m("button", {
+		}, null, 8, ["items", "highlighted-value"])])) : m("", !0)], 40, F)) : (w(), h("button", {
 			key: 3,
 			type: "button",
-			class: x(["m-dropdown__item", { "m-dropdown__item--highlighted": t.highlightedValue === i.value }]),
+			class: S(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === a.value }]),
 			role: "menuitem",
-			disabled: i.disabled,
-			onMouseenter: (e) => !i.disabled && n.$emit("highlight", i.value),
-			onClick: (e) => n.$emit("select", i)
-		}, [d(i) ? (w(), m("span", V, [v(e, {
-			name: d(i),
+			disabled: a.disabled,
+			onMouseenter: (e) => !a.disabled && n.$emit("highlight", a.value),
+			onClick: (e) => n.$emit("select", a)
+		}, [d(a) ? (w(), h("span", V, [y(t, {
+			name: d(a),
 			size: "sm"
-		}, null, 8, ["name"])])) : p("", !0), D(n.$slots, "item", { item: i }, () => [_(O(i.label), 1)])], 42, B))], 64))), 128));
+		}, null, 8, ["name"])])) : m("", !0), D(n.$slots, "item", { item: a }, () => [v(O(a.label), 1)])], 42, B))], 64))), 128));
 	}
-}), U = ["aria-expanded"], W = /* @__PURE__ */ y({
+}), re = ["aria-expanded"], U = /* @__PURE__ */ b({
+	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
 		modelValue: {
@@ -126,119 +128,119 @@ var M = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		pt: {}
 	},
 	emits: ["update:modelValue", "select"],
-	setup(e, { emit: i }) {
-		let a = e, c = i, y = o(), E = s(), M = T(null), N = T(null), P = T(null), F = T({}), I = T(-1), L = d(() => a.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), R = d(() => L.value[I.value]?.value), z, B, V = d(() => t(a, y.value.appendTo)), W = d(() => n(a, y.value.appendTo));
-		function ee() {
-			I.value = L.value.length ? 0 : -1;
-		}
-		function G() {
-			if (!W.value || !N.value) return;
-			let e = N.value.getBoundingClientRect();
-			F.value = r(e, a.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
-		}
-		function K(e) {
-			c("update:modelValue", e), e && (ee(), b(() => {
-				G(), P.value?.focus({ preventScroll: !0 });
+	setup(t, { emit: a }) {
+		let o = t, l = a, b = A(), { rootAttrs: E } = e(b, () => o.pt), M = s(), N = c(), P = T(null), F = T(null), I = T(null), L = T({}), R = T(-1), z = f(() => o.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), B = f(() => z.value[R.value]?.value), V, U, W = f(() => n(o, M.value.appendTo)), G = f(() => r(o, M.value.appendTo));
+		function ie() {
+			R.value = z.value.length ? 0 : -1;
+		}
+		function K() {
+			if (!G.value || !F.value) return;
+			let e = F.value.getBoundingClientRect();
+			L.value = i(e, o.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		}
+		function q(e) {
+			l("update:modelValue", e), e && (ie(), x(() => {
+				K(), I.value?.focus({ preventScroll: !0 });
 			}));
 		}
-		function q() {
-			K(!a.modelValue);
-		}
 		function J() {
-			a.modelValue && G();
+			q(!o.modelValue);
 		}
-		function Y(e) {
-			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), c("select", e), a.closeOnSelect && K(!1));
+		function Y() {
+			o.modelValue && K();
 		}
-		function X() {
-			z && clearTimeout(z), B && clearTimeout(B), z = void 0, B = void 0;
+		function X(e) {
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), l("select", e), o.closeOnSelect && q(!1));
 		}
 		function Z() {
-			a.trigger === "hover" && (X(), z = setTimeout(K, a.showDelay, !0));
+			V && clearTimeout(V), U && clearTimeout(U), V = void 0, U = void 0;
 		}
-		function Q() {
-			a.trigger === "hover" && (X(), B = setTimeout(K, a.hideDelay, !1));
+		function ae() {
+			o.trigger === "hover" && (Z(), V = setTimeout(q, o.showDelay, !0));
 		}
-		function te() {
-			a.trigger === "hover" && X();
+		function oe() {
+			o.trigger === "hover" && (Z(), U = setTimeout(q, o.hideDelay, !1));
+		}
+		function Q() {
+			o.trigger === "hover" && Z();
 		}
-		function ne() {
-			a.trigger === "hover" && (X(), B = setTimeout(K, a.hideDelay, !1));
+		function se() {
+			o.trigger === "hover" && (Z(), U = setTimeout(q, o.hideDelay, !1));
 		}
-		function re(e) {
-			if (a.modelValue) {
+		function ce(e) {
+			if (o.modelValue) {
 				if (e.key === "Escape") {
-					e.preventDefault(), K(!1), N.value?.focus({ preventScroll: !0 });
+					e.preventDefault(), q(!1), F.value?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = e.key === "ArrowDown" ? 1 : -1, n = L.value.length;
-					n && (I.value = (I.value + t + n) % n);
+					let t = e.key === "ArrowDown" ? 1 : -1, n = z.value.length;
+					n && (R.value = (R.value + t + n) % n);
 				}
-				if (e.key === "Home" && (e.preventDefault(), I.value = 0), e.key === "End" && (e.preventDefault(), I.value = L.value.length - 1), e.key === "Enter" || e.key === " ") {
-					let t = L.value[I.value];
-					I.value >= 0 && t && (e.preventDefault(), Y(t));
+				if (e.key === "Home" && (e.preventDefault(), R.value = 0), e.key === "End" && (e.preventDefault(), R.value = z.value.length - 1), e.key === "Enter" || e.key === " ") {
+					let t = z.value[R.value];
+					R.value >= 0 && t && (e.preventDefault(), X(t));
 				}
 			}
 		}
-		function ie(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), a.modelValue || K(!0));
+		function le(e) {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), o.modelValue || q(!0));
 		}
 		function $(e) {
-			a.modelValue && M.value && !M.value.contains(e.target) && !P.value?.contains(e.target) && K(!1);
+			o.modelValue && P.value && !P.value.contains(e.target) && !I.value?.contains(e.target) && q(!1);
 		}
-		return A(() => a.modelValue, (e) => {
-			e ? (document.addEventListener("click", $), W.value && (window.addEventListener("resize", J), window.addEventListener("scroll", J, !0))) : (document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0));
-		}, { immediate: !0 }), C(() => {
-			document.removeEventListener("click", $), window.removeEventListener("resize", J), window.removeEventListener("scroll", J, !0), X();
-		}), (t, n) => (w(), m("div", {
+		return ne(() => o.modelValue, (e) => {
+			e ? (document.addEventListener("click", $), G.value && (window.addEventListener("resize", Y), window.addEventListener("scroll", Y, !0))) : (document.removeEventListener("click", $), window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0));
+		}, { immediate: !0 }), te(() => {
+			document.removeEventListener("click", $), window.removeEventListener("resize", Y), window.removeEventListener("scroll", Y, !0), Z();
+		}), (e, n) => (w(), h("div", ee({
 			ref_key: "root",
-			ref: M,
-			class: "m-dropdown"
-		}, [h("span", {
+			ref: P
+		}, k(E), { class: "m-dropdown" }), [g("span", {
 			ref_key: "trigger",
-			ref: N,
+			ref: F,
 			class: "m-dropdown__trigger",
 			role: "button",
 			tabindex: "0",
-			"aria-expanded": e.modelValue,
+			"aria-expanded": t.modelValue,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => a.trigger === "click" && q(),
-			onMouseenter: Z,
-			onMouseleave: Q,
-			onKeydown: ie
-		}, [D(t.$slots, "trigger", {}, () => [_(O(k(E).openMenu), 1)])], 40, U), (w(), f(l, {
-			to: V.value.to,
-			disabled: V.value.disabled
-		}, [v(u, { name: "m-scale-fade" }, {
-			default: j(() => [e.modelValue ? (w(), m("div", {
+			onClick: n[0] ||= (e) => o.trigger === "click" && J(),
+			onMouseenter: ae,
+			onMouseleave: oe,
+			onKeydown: le
+		}, [D(e.$slots, "trigger", {}, () => [v(O(k(N).openMenu), 1)])], 40, re), (w(), p(u, {
+			to: W.value.to,
+			disabled: W.value.disabled
+		}, [y(d, { name: "m-scale-fade" }, {
+			default: j(() => [t.modelValue ? (w(), h("div", {
 				key: 0,
 				ref_key: "menu",
-				ref: P,
-				class: x(["m-dropdown__menu", [`m-dropdown__menu--${e.placement}`, { "m-dropdown__menu--teleported": W.value }]]),
-				style: S(W.value ? F.value : void 0),
+				ref: I,
+				class: S(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": G.value }]]),
+				style: C(G.value ? L.value : void 0),
 				role: "menu",
 				tabindex: "-1",
-				onKeydown: re,
-				onMouseenter: te,
-				onMouseleave: ne
-			}, [v(H, {
-				items: e.items,
-				"highlighted-value": R.value,
-				onSelect: Y,
-				onHighlight: n[1] ||= (e) => I.value = L.value.findIndex((t) => t.value === e)
-			}, g({ _: 2 }, [t.$slots.item ? {
+				onKeydown: ce,
+				onMouseenter: Q,
+				onMouseleave: se
+			}, [y(H, {
+				items: t.items,
+				"highlighted-value": B.value,
+				onSelect: X,
+				onHighlight: n[1] ||= (e) => R.value = z.value.findIndex((t) => t.value === e)
+			}, _({ _: 2 }, [e.$slots.item ? {
 				name: "item",
-				fn: j(({ item: e }) => [D(t.$slots, "item", { item: e })]),
+				fn: j(({ item: t }) => [D(e.$slots, "item", { item: t })]),
 				key: "0"
-			} : void 0]), 1032, ["items", "highlighted-value"])], 38)) : p("", !0)]),
+			} : void 0]), 1032, ["items", "highlighted-value"])], 38)) : m("", !0)]),
 			_: 3
-		})], 8, ["to", "disabled"]))], 512));
+		})], 8, ["to", "disabled"]))], 16));
 	}
 });
 //#endregion
-export { W as MDropdown };
+export { U as MDropdown };