morya-ui 0.2.9 → 0.3.1

package/dist/dropdown/index.js

@@ -1,15 +1,17 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
-import { t } from "../Icon-B6IBrJ5S.js";
-import { n, t as r } from "../overlay-oR-5MDuE.js";
-import { t as i } from "../overlayPlacement-Cd20JTD_.js";
-import { t as a } from "../Scrollbar-BYnCO8fv.js";
-import { t as o } from "../icon-iOBeyIRp.js";
-import { t as s } from "../key-CaQYVkjh.js";
-import { t as c } from "../FlyoutSubmenu-B_bkgKag.js";
-import { c as l } from "../config-BdK5ccNT.js";
-import { n as u } from "../locale-B36KH7c3.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
+import { t } from "../Icon-od9Ob-Ay.js";
+import { t as n } from "../useMotionTransition-Bxnnb_9u.js";
+import { n as r, t as i } from "../overlay-oR-5MDuE.js";
+import { t as a } from "../overlayPlacement-Cd20JTD_.js";
+import { t as o } from "../useFloatingViewportSync-DZdJ7W8n.js";
+import { t as s } from "../Scrollbar-DTeJ8P5b.js";
+import { t as c } from "../icon-COrt_N8A.js";
+import { t as l } from "../key-CaQYVkjh.js";
+import { t as u } from "../FlyoutSubmenu-BrUPmJa1.js";
+import { c as d } from "../config-CapALqt3.js";
+import { n as f } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as d, Teleport as f, Transition as p, computed as m, createBlock as h, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createSlots as y, createTextVNode as b, createVNode as x, defineComponent as S, mergeProps as C, nextTick as w, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useAttrs as ee, watch as te, withCtx as P } from "vue";
+import { Fragment as p, Teleport as m, Transition as h, computed as g, createBlock as ee, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createSlots as b, createTextVNode as x, createVNode as S, defineComponent as C, mergeProps as w, nextTick as te, normalizeClass as T, normalizeStyle as E, onBeforeUnmount as D, openBlock as O, ref as k, renderList as A, renderSlot as j, toDisplayString as M, unref as N, useAttrs as ne, watch as re, withCtx as P } from "vue";
 //#region src/components/Dropdown/DropdownNodes.vue?vue&type=script&setup=true&lang.ts
 var F = {
 	key: 0,
@@ -33,100 +35,117 @@ var F = {
 	key: 0,
 	class: "m-dropdown__icon",
 	"aria-hidden": "true"
-}, W = /* @__PURE__ */ S({
+}, W = /* @__PURE__ */ C({
 	__name: "DropdownNodes",
 	props: {
 		items: {},
 		highlightedValue: {}
 	},
-	emits: ["select", "highlight"],
+	emits: [
+		"select",
+		"highlight",
+		"submenuEnter",
+		"submenuLeave"
+	],
 	setup(e, { emit: n }) {
-		let r = n, i = k(null), l = k(null), u;
-		function f() {
-			u && clearTimeout(u), u = void 0;
+		let r = n, i = k(null), a = k(null), o;
+		function d() {
+			o && clearTimeout(o), o = void 0;
 		}
-		function p() {
-			f(), u = setTimeout(() => {
-				i.value = null, l.value = null;
+		function f() {
+			d(), o = setTimeout(() => {
+				i.value = null, a.value = null;
 			}, 150);
 		}
 		function m(e) {
 			return e.separator || e.type === "divider";
 		}
-		function y(e) {
+		function h(e) {
 			return e.type === "group";
 		}
-		function S(e, t) {
-			return s(e, t, "dd");
+		function g(e, t) {
+			return l(e, t, "dd");
 		}
 		function C(e) {
-			return o(e.icon);
+			return c(e.icon);
 		}
 		function w(e, t, n) {
-			if (e.disabled || m(e) || y(e) || (f(), r("highlight", e.value), !e.items?.length)) return;
-			i.value = S(e, t);
-			let a = n.currentTarget;
-			l.value = a?.querySelector(".m-dropdown__item--parent") ?? a;
+			if (e.disabled || m(e) || h(e) || (d(), r("highlight", e.value), !e.items?.length)) return;
+			i.value = g(e, t);
+			let o = n.currentTarget;
+			a.value = o?.querySelector(".m-dropdown__item--parent") ?? o;
+		}
+		function te() {
+			f();
 		}
 		function E() {
-			p();
+			d(), r("submenuEnter");
 		}
 		function D() {
-			f();
-		}
-		function N() {
-			p();
+			f(), r("submenuLeave");
 		}
-		return (n, r) => (O(!0), _(d, null, A(e.items, (o, s) => (O(), _(d, { key: S(o, s) }, [m(o) ? (O(), _("div", F)) : y(o) ? (O(), _("div", I, [v("div", L, M(o.label), 1), o.items?.length ? (O(), h(W, {
+		return (n, r) => (O(!0), v(p, null, A(e.items, (o, c) => (O(), v(p, { key: g(o, c) }, [m(o) ? (O(), v("div", F)) : h(o) ? (O(), v("div", I, [y("div", L, M(o.label), 1), o.items?.length ? (O(), ee(W, {
 			key: 0,
 			items: o.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"])) : g("", !0)])) : o.items?.length ? (O(), _("div", {
+			onHighlight: r[1] ||= (e) => n.$emit("highlight", e),
+			onSubmenuEnter: E,
+			onSubmenuLeave: D
+		}, b({ _: 2 }, [n.$slots.item ? {
+			name: "item",
+			fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+			key: "0"
+		} : void 0]), 1032, ["items", "highlighted-value"])) : _("", !0)])) : o.items?.length ? (O(), v("div", {
 			key: 2,
 			class: "m-dropdown__submenu-wrap",
-			onMouseenter: (e) => w(o, s, e),
-			onMouseleave: E
-		}, [v("button", {
+			onMouseenter: (e) => w(o, c, e),
+			onMouseleave: te
+		}, [y("button", {
 			type: "button",
 			class: T(["m-dropdown__item m-dropdown__item--parent", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
 			role: "menuitem",
 			disabled: o.disabled,
 			"aria-haspopup": !0
 		}, [
-			C(o) ? (O(), _("span", B, [x(t, {
+			C(o) ? (O(), v("span", B, [S(t, {
 				name: C(o),
 				size: "sm"
-			}, null, 8, ["name"])])) : g("", !0),
-			j(n.$slots, "item", { item: o }, () => [b(M(o.label), 1)]),
-			v("span", V, [x(t, {
+			}, null, 8, ["name"])])) : _("", !0),
+			j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)]),
+			y("span", V, [S(t, {
 				name: "chevron-right",
 				size: "sm"
 			})])
-		], 10, z), x(c, {
-			open: i.value === S(o, s),
-			anchor: i.value === S(o, s) ? l.value : null,
+		], 10, z), S(u, {
+			open: i.value === g(o, c),
+			anchor: i.value === g(o, c) ? a.value : null,
 			"panel-class": "m-dropdown__submenu",
-			onEnter: D,
-			onLeave: N
+			onEnter: E,
+			onLeave: D
 		}, {
-			default: P(() => [x(a, {
+			default: P(() => [S(s, {
 				class: "m-dropdown__submenu-scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__submenu-wrap-inner",
 				"view-class": "m-dropdown__submenu-view"
 			}, {
-				default: P(() => [x(W, {
+				default: P(() => [S(W, {
 					items: o.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"])]),
+					onHighlight: r[3] ||= (e) => n.$emit("highlight", e),
+					onSubmenuEnter: E,
+					onSubmenuLeave: D
+				}, b({ _: 2 }, [n.$slots.item ? {
+					name: "item",
+					fn: P(({ item: e }) => [j(n.$slots, "item", { item: e })]),
+					key: "0"
+				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 2
 			}, 1024)]),
 			_: 2
-		}, 1032, ["open", "anchor"])], 40, R)) : (O(), _("button", {
+		}, 1032, ["open", "anchor"])], 40, R)) : (O(), v("button", {
 			key: 3,
 			type: "button",
 			class: T(["m-dropdown__item", { "m-dropdown__item--highlighted": e.highlightedValue === o.value }]),
@@ -134,12 +153,12 @@ var F = {
 			disabled: o.disabled,
 			onMouseenter: (e) => !o.disabled && n.$emit("highlight", o.value),
 			onClick: (e) => n.$emit("select", o)
-		}, [C(o) ? (O(), _("span", U, [x(t, {
+		}, [C(o) ? (O(), v("span", U, [S(t, {
 			name: C(o),
 			size: "sm"
-		}, null, 8, ["name"])])) : g("", !0), j(n.$slots, "item", { item: o }, () => [b(M(o.label), 1)])], 42, H))], 64))), 128));
+		}, null, 8, ["name"])])) : _("", !0), j(n.$slots, "item", { item: o }, () => [x(M(o.label), 1)])], 42, H))], 64))), 128));
 	}
-}), ne = ["aria-expanded"], G = /* @__PURE__ */ S({
+}), ie = ["aria-expanded"], G = /* @__PURE__ */ C({
 	inheritAttrs: !1,
 	__name: "Dropdown",
 	props: {
@@ -161,125 +180,139 @@ var F = {
 			default: !0
 		},
 		appendTo: {},
-		pt: {}
+		pt: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["update:modelValue", "select"],
-	setup(t, { emit: o }) {
-		let s = t, c = o, d = ee(), { rootAttrs: S } = e(d, () => s.pt), A = l(), F = u(), I = k(null), L = k(null), R = k(null), z = k({}), B = k(-1), V = m(() => s.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), H = m(() => V.value[B.value]?.value), U, G, K = m(() => n(s, A.value.appendTo)), q = m(() => r(s, A.value.appendTo));
-		function re() {
-			B.value = V.value.length ? 0 : -1;
+	setup(t, { emit: c }) {
+		let l = t, u = c, p = ne(), { rootAttrs: C } = e(p, () => l.pt), A = d(), { transitionName: F, transitionCss: I } = n({
+			role: "popup",
+			local: () => l.transition,
+			componentName: "Dropdown",
+			fallback: "scale-fade"
+		}), L = f(), R = k(null), z = k(null), B = k(null), V = k({}), H = k(-1), U = g(() => l.items.filter((e) => !e.disabled && !e.separator && e.type !== "divider" && e.type !== "group" && !e.items?.length && e.value != null)), G = g(() => U.value[H.value]?.value), K, q, J = g(() => r(l, A.value.appendTo)), Y = g(() => i(l, A.value.appendTo));
+		function ae() {
+			H.value = U.value.length ? 0 : -1;
 		}
-		function J() {
-			if (!q.value || !L.value) return;
-			let e = L.value.getBoundingClientRect();
-			z.value = i(e, s.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
+		function X() {
+			if (!Y.value || !z.value) return;
+			let e = z.value.getBoundingClientRect();
+			V.value = a(e, l.placement === "bottom-end" ? "bottom-end" : "bottom-start", { minWidth: `${e.width}px` });
 		}
-		function Y(e) {
-			c("update:modelValue", e), e && (re(), w(() => {
-				J(), R.value?.focus({ preventScroll: !0 });
+		function Z(e) {
+			u("update:modelValue", e), e && (ae(), te(() => {
+				X(), B.value?.focus({ preventScroll: !0 });
 			}));
 		}
-		function ie() {
-			Y(!s.modelValue);
+		function oe() {
+			Z(!l.modelValue);
 		}
-		function X() {
-			s.modelValue && J();
+		function se() {
+			l.modelValue && X();
 		}
-		function Z(e) {
-			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), c("select", e), s.closeOnSelect && Y(!1));
+		function ce(e) {
+			e.disabled || e.separator || e.type === "divider" || e.type === "group" || (e.command?.(), u("select", e), l.closeOnSelect && Z(!1));
 		}
 		function Q() {
-			U && clearTimeout(U), G && clearTimeout(G), U = void 0, G = void 0;
+			K && clearTimeout(K), q && clearTimeout(q), K = void 0, q = void 0;
 		}
-		function ae() {
-			s.trigger === "hover" && (Q(), U = setTimeout(Y, s.showDelay, !0));
+		function le() {
+			l.trigger === "hover" && (Q(), K = setTimeout(Z, l.showDelay, !0));
 		}
-		function oe() {
-			s.trigger === "hover" && (Q(), G = setTimeout(Y, s.hideDelay, !1));
+		function ue() {
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
-		function se() {
-			s.trigger === "hover" && Q();
+		function de() {
+			l.trigger === "hover" && Q();
 		}
-		function ce() {
-			s.trigger === "hover" && (Q(), G = setTimeout(Y, s.hideDelay, !1));
+		function fe() {
+			l.trigger === "hover" && (Q(), q = setTimeout(Z, l.hideDelay, !1));
 		}
-		function le(e) {
-			if (s.modelValue) {
+		function pe(e) {
+			if (l.modelValue) {
 				if (e.key === "Escape") {
-					e.preventDefault(), Y(!1), L.value?.focus({ preventScroll: !0 });
+					e.preventDefault(), Z(!1), z.value?.focus({ preventScroll: !0 });
 					return;
 				}
 				if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 					e.preventDefault();
-					let t = e.key === "ArrowDown" ? 1 : -1, n = V.value.length;
-					n && (B.value = (B.value + t + n) % n);
+					let t = e.key === "ArrowDown" ? 1 : -1, n = U.value.length;
+					n && (H.value = (H.value + t + n) % n);
 				}
-				if (e.key === "Home" && (e.preventDefault(), B.value = 0), e.key === "End" && (e.preventDefault(), B.value = V.value.length - 1), e.key === "Enter" || e.key === " ") {
-					let t = V.value[B.value];
-					B.value >= 0 && t && (e.preventDefault(), Z(t));
+				if (e.key === "Home" && (e.preventDefault(), H.value = 0), e.key === "End" && (e.preventDefault(), H.value = U.value.length - 1), e.key === "Enter" || e.key === " ") {
+					let t = U.value[H.value];
+					H.value >= 0 && t && (e.preventDefault(), ce(t));
 				}
 			}
 		}
-		function ue(e) {
-			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), s.modelValue || Y(!0));
+		function me(e) {
+			(e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), l.modelValue || Z(!0));
 		}
 		function $(e) {
-			s.modelValue && I.value && !I.value.contains(e.target) && !R.value?.contains(e.target) && Y(!1);
+			l.modelValue && R.value && !R.value.contains(e.target) && !B.value?.contains(e.target) && Z(!1);
 		}
-		return te(() => s.modelValue, (e) => {
-			e ? (document.addEventListener("click", $), q.value && (window.addEventListener("resize", X), window.addEventListener("scroll", X, !0))) : (document.removeEventListener("click", $), window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0));
-		}, { immediate: !0 }), D(() => {
-			document.removeEventListener("click", $), window.removeEventListener("resize", X), window.removeEventListener("scroll", X, !0), Q();
-		}), (e, n) => (O(), _("div", C({
+		return re(() => l.modelValue, (e) => {
+			e ? document.addEventListener("click", $) : document.removeEventListener("click", $);
+		}, { immediate: !0 }), o(() => l.modelValue && Y.value, se), D(() => {
+			document.removeEventListener("click", $), Q();
+		}), (e, n) => (O(), v("div", w({
 			ref_key: "root",
-			ref: I
-		}, N(S), { class: "m-dropdown" }), [v("span", {
+			ref: R
+		}, N(C), { class: "m-dropdown" }), [y("span", {
 			ref_key: "trigger",
-			ref: L,
+			ref: z,
 			class: "m-dropdown__trigger",
 			role: "button",
 			tabindex: "0",
 			"aria-expanded": t.modelValue,
 			"aria-haspopup": "menu",
-			onClick: n[0] ||= (e) => s.trigger === "click" && ie(),
-			onMouseenter: ae,
-			onMouseleave: oe,
-			onKeydown: ue
-		}, [j(e.$slots, "trigger", {}, () => [b(M(N(F).openMenu), 1)])], 40, ne), (O(), h(f, {
-			to: K.value.to,
-			disabled: K.value.disabled
-		}, [x(p, { name: "m-scale-fade" }, {
-			default: P(() => [t.modelValue ? (O(), _("div", {
+			onClick: n[0] ||= (e) => l.trigger === "click" && oe(),
+			onMouseenter: le,
+			onMouseleave: ue,
+			onKeydown: me
+		}, [j(e.$slots, "trigger", {}, () => [x(M(N(L).openMenu), 1)])], 40, ie), (O(), ee(m, {
+			to: J.value.to,
+			disabled: J.value.disabled
+		}, [S(h, {
+			name: N(F),
+			css: N(I)
+		}, {
+			default: P(() => [t.modelValue ? (O(), v("div", {
 				key: 0,
 				ref_key: "menu",
-				ref: R,
-				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": q.value }]]),
-				style: E(q.value ? z.value : void 0),
+				ref: B,
+				class: T(["m-dropdown__menu", [`m-dropdown__menu--${t.placement}`, { "m-dropdown__menu--teleported": Y.value }]]),
+				style: E(Y.value ? V.value : void 0),
 				role: "menu",
 				tabindex: "-1",
-				onKeydown: le,
-				onMouseenter: se,
-				onMouseleave: ce
-			}, [x(a, {
+				onKeydown: pe,
+				onMouseenter: de,
+				onMouseleave: fe
+			}, [S(s, {
 				class: "m-dropdown__scroll",
 				"fit-content": "",
 				"wrap-class": "m-dropdown__scroll-wrap",
 				"view-class": "m-dropdown__scroll-view"
 			}, {
-				default: P(() => [x(W, {
+				default: P(() => [S(W, {
 					items: t.items,
-					"highlighted-value": H.value,
-					onSelect: Z,
-					onHighlight: n[1] ||= (e) => B.value = V.value.findIndex((t) => t.value === e)
-				}, y({ _: 2 }, [e.$slots.item ? {
+					"highlighted-value": G.value,
+					onSelect: ce,
+					onHighlight: n[1] ||= (e) => H.value = U.value.findIndex((t) => t.value === e),
+					onSubmenuEnter: de,
+					onSubmenuLeave: fe
+				}, b({ _: 2 }, [e.$slots.item ? {
 					name: "item",
 					fn: P(({ item: t }) => [j(e.$slots, "item", { item: t })]),
 					key: "0"
 				} : void 0]), 1032, ["items", "highlighted-value"])]),
 				_: 3
-			})], 38)) : g("", !0)]),
+			})], 38)) : _("", !0)]),
 			_: 3
-		})], 8, ["to", "disabled"]))], 16));
+		}, 8, ["name", "css"])], 8, ["to", "disabled"]))], 16));
 	}
 });
 //#endregion