morya-ui 0.2.8 → 0.3.0

package/dist/split-button/index.js

@@ -1,29 +1,31 @@
-import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
 import { r as t } from "../types-DGuu4Eg4.js";
-import { a as ee, t as n } from "../Icon-DfpIfo2L.js";
-import { n as te, t as ne } from "../overlay-oR-5MDuE.js";
-import { t as re } from "../overlayPlacement-Cd20JTD_.js";
-import { t as r } from "../useMenuKeyboard-BedmYE4W.js";
-import { t as i } from "../useMId-BXFYayPP.js";
-import { c as a, o } from "../config-BdK5ccNT.js";
-import { n as s } from "../locale-B36KH7c3.js";
+import { a as ee, t as n } from "../Icon-lcN1rS87.js";
+import { t as te } 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 ne } from "../useMenuKeyboard-BedmYE4W.js";
+import { t as re } from "../useMId-BXFYayPP.js";
+import { c as ie, o as ae } from "../config-CapALqt3.js";
+import { n as oe } from "../locale-Bzm2nbEp.js";
 import "./style.js";
-import { Fragment as c, Teleport as ie, Transition as ae, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, mergeProps as _, nextTick as v, normalizeClass as y, normalizeStyle as oe, onBeforeUnmount as se, openBlock as b, ref as x, renderList as ce, renderSlot as le, toDisplayString as S, unref as C, useAttrs as ue, watch as w, withCtx as de } from "vue";
+import { Fragment as s, Teleport as se, Transition as ce, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeProps as le, nextTick as g, normalizeClass as ue, normalizeStyle as de, onBeforeUnmount as fe, openBlock as _, ref as v, renderList as pe, renderSlot as me, toDisplayString as y, unref as b, useAttrs as he, watch as x, withCtx as ge } from "vue";
 //#region src/components/SplitButton/SplitButton.vue?vue&type=script&setup=true&lang.ts
-var fe = ["disabled"], pe = {
+var _e = ["disabled"], S = {
 	key: 0,
 	class: "m-splitbutton__icon",
 	"aria-hidden": "true"
-}, me = { key: 1 }, T = [
+}, ve = { key: 1 }, C = [
 	"aria-label",
 	"aria-expanded",
 	"aria-controls",
 	"disabled"
-], he = ["id"], E = [
+], w = ["id"], T = [
 	"disabled",
 	"tabindex",
 	"onClick"
-], D = /* @__PURE__ */ g({
+], E = /* @__PURE__ */ h({
 	inheritAttrs: !1,
 	__name: "SplitButton",
 	props: {
@@ -45,68 +47,77 @@ var fe = ["disabled"], pe = {
 			type: Boolean,
 			default: !0
 		},
-		appendTo: {}
+		appendTo: {},
+		transition: {
+			type: [String, Boolean],
+			default: void 0
+		}
 	},
 	emits: ["click", "command"],
-	setup(g, { emit: D }) {
-		let O = g, k = D, A = ue(), { rootAttrs: j } = e(A, () => O.pt), M = a(), N = s(), P = x(!1), F = x(null), I = x(null), L = x(null), R = x({}), z = i("m-splitbutton-menu"), B = o("SplitButton", () => O.size), V = l(() => t(B.value)), H = l(() => O.icon && ee(O.icon) ? O.icon : void 0), U = l(() => O.icon && !H.value ? O.icon : void 0), W = l(() => te(O, M.value.appendTo)), G = l(() => ne(O, M.value.appendTo)), ge = l(() => [
+	setup(h, { emit: E }) {
+		let D = h, O = E, k = he(), { rootAttrs: A } = e(k, () => D.pt), j = ie(), { transitionName: M, transitionCss: N } = te({
+			role: "popup",
+			local: () => D.transition,
+			componentName: "SplitButton",
+			fallback: "scale-fade"
+		}), P = oe(), F = v(!1), I = v(null), L = v(null), R = v(null), z = v({}), B = re("m-splitbutton-menu"), V = ae("SplitButton", () => D.size), H = c(() => t(V.value)), U = c(() => D.icon && ee(D.icon) ? D.icon : void 0), W = c(() => D.icon && !U.value ? D.icon : void 0), G = c(() => r(D, j.value.appendTo)), K = c(() => i(D, j.value.appendTo)), ye = c(() => [
 			"m-splitbutton",
-			`m-splitbutton--${B.value}`,
+			`m-splitbutton--${V.value}`,
 			{
-				"m-splitbutton--disabled": O.disabled,
-				"m-splitbutton--outlined": O.outlined,
-				[`m-splitbutton--${O.severity}`]: !!O.severity,
-				"m-splitbutton--open": P.value
+				"m-splitbutton--disabled": D.disabled,
+				"m-splitbutton--outlined": D.outlined,
+				[`m-splitbutton--${D.severity}`]: !!D.severity,
+				"m-splitbutton--open": F.value
 			}
 		]);
-		function K() {
-			if (!G.value || !F.value) return;
-			let e = F.value.getBoundingClientRect();
-			R.value = re(e, "bottom-end", {
+		function q() {
+			if (!K.value || !I.value) return;
+			let e = I.value.getBoundingClientRect();
+			z.value = a(e, "bottom-end", {
 				gap: 4,
 				minWidth: `${e.width}px`
 			});
 		}
-		function q() {
-			P.value && K();
+		function be() {
+			F.value && q();
 		}
-		let J = r({
-			itemCount: () => O.model.length,
-			isItemDisabled: (e) => !!O.model[e]?.disabled,
-			enabled: P,
+		let J = ne({
+			itemCount: () => D.model.length,
+			isItemDisabled: (e) => !!D.model[e]?.disabled,
+			enabled: F,
 			onActivate: (e) => {
-				let t = O.model[e];
+				let t = D.model[e];
 				t && Z(t);
 			},
 			onEscape: () => {
-				P.value = !1;
+				F.value = !1;
 			},
-			returnFocusTo: I
+			returnFocusTo: L
 		});
 		function Y() {
 			let e = J.activeIndex.value;
-			e < 0 || L.value?.querySelectorAll(".m-splitbutton__item")[e]?.focus({ preventScroll: !0 });
+			e < 0 || R.value?.querySelectorAll(".m-splitbutton__item")[e]?.focus({ preventScroll: !0 });
 		}
-		function _e(e) {
-			O.disabled || k("click", e);
+		function xe(e) {
+			D.disabled || O("click", e);
 		}
 		function X() {
-			P.value = !0, v(() => {
-				K(), J.moveFirst(), Y();
+			F.value = !0, g(() => {
+				q(), J.moveFirst(), Y();
 			});
 		}
-		function ve() {
-			if (!O.disabled) {
-				if (P.value) {
-					P.value = !1;
+		function Se() {
+			if (!D.disabled) {
+				if (F.value) {
+					F.value = !1;
 					return;
 				}
 				X();
 			}
 		}
-		function ye(e) {
-			if (!O.disabled) {
-				if (!P.value) {
+		function Ce(e) {
+			if (!D.disabled) {
+				if (!F.value) {
 					(e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), X());
 					return;
 				}
@@ -114,81 +125,84 @@ var fe = ["disabled"], pe = {
 			}
 		}
 		function Z(e) {
-			e.disabled || O.disabled || (e.command?.(), k("command", e), P.value = !1, I.value?.focus({ preventScroll: !0 }));
+			e.disabled || D.disabled || (e.command?.(), O("command", e), F.value = !1, L.value?.focus({ preventScroll: !0 }));
 		}
 		function Q(e) {
 			let t = e.target;
-			F.value?.contains(t) || L.value?.contains(t) || (P.value = !1);
+			I.value?.contains(t) || R.value?.contains(t) || (F.value = !1);
 		}
 		function $(e) {
 			let t = e.target;
-			F.value?.contains(t) || L.value?.contains(t) || (P.value = !1);
+			I.value?.contains(t) || R.value?.contains(t) || (F.value = !1);
 		}
-		return w(J.activeIndex, () => {
-			P.value && Y();
-		}), w(P, (e) => {
-			e ? (document.addEventListener("click", Q), document.addEventListener("focusin", $), v(() => K()), G.value && (window.addEventListener("resize", q), window.addEventListener("scroll", q, !0))) : (J.reset(), document.removeEventListener("click", Q), document.removeEventListener("focusin", $), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0));
-		}), se(() => {
-			document.removeEventListener("click", Q), document.removeEventListener("focusin", $), window.removeEventListener("resize", q), window.removeEventListener("scroll", q, !0);
-		}), (e, t) => (b(), f("div", _(C(j), {
+		return x(J.activeIndex, () => {
+			F.value && Y();
+		}), o(() => F.value && K.value, be), x(F, (e) => {
+			e ? (document.addEventListener("click", Q), document.addEventListener("focusin", $), g(() => q())) : (J.reset(), document.removeEventListener("click", Q), document.removeEventListener("focusin", $));
+		}), fe(() => {
+			document.removeEventListener("click", Q), document.removeEventListener("focusin", $);
+		}), (e, t) => (_(), d("div", le(b(A), {
 			ref_key: "root",
-			ref: F,
-			class: ge.value
+			ref: I,
+			class: ye.value
 		}), [
-			p("button", {
+			f("button", {
 				type: "button",
 				class: "m-splitbutton__main",
-				disabled: g.disabled,
-				onClick: _e
-			}, [le(e.$slots, "default", {}, () => [H.value || U.value ? (b(), f("span", pe, [H.value ? (b(), u(n, {
+				disabled: h.disabled,
+				onClick: xe
+			}, [me(e.$slots, "default", {}, () => [U.value || W.value ? (_(), d("span", S, [U.value ? (_(), l(n, {
 				key: 0,
-				name: H.value,
-				size: V.value
-			}, null, 8, ["name", "size"])) : (b(), f(c, { key: 1 }, [m(S(U.value), 1)], 64))])) : d("", !0), g.label ? (b(), f("span", me, S(g.label), 1)) : d("", !0)])], 8, fe),
-			p("button", {
+				name: U.value,
+				size: H.value
+			}, null, 8, ["name", "size"])) : (_(), d(s, { key: 1 }, [p(y(W.value), 1)], 64))])) : u("", !0), h.label ? (_(), d("span", ve, y(h.label), 1)) : u("", !0)])], 8, _e),
+			f("button", {
 				ref_key: "trigger",
-				ref: I,
+				ref: L,
 				type: "button",
 				class: "m-splitbutton__trigger",
-				"aria-label": C(N).moreActions,
-				"aria-expanded": P.value,
-				"aria-controls": P.value ? C(z) : void 0,
+				"aria-label": b(P).moreActions,
+				"aria-expanded": F.value,
+				"aria-controls": F.value ? b(B) : void 0,
 				"aria-haspopup": "menu",
-				disabled: g.disabled,
-				onClick: ve,
-				onKeydown: ye
-			}, [h(n, {
+				disabled: h.disabled,
+				onClick: Se,
+				onKeydown: Ce
+			}, [m(n, {
 				name: "chevron-down",
-				size: V.value
-			}, null, 8, ["size"])], 40, T),
-			(b(), u(ie, {
-				to: W.value.to,
-				disabled: W.value.disabled
-			}, [h(ae, { name: "m-scale-fade" }, {
-				default: de(() => [P.value ? (b(), f("ul", {
+				size: H.value
+			}, null, 8, ["size"])], 40, C),
+			(_(), l(se, {
+				to: G.value.to,
+				disabled: G.value.disabled
+			}, [m(ce, {
+				name: b(M),
+				css: b(N)
+			}, {
+				default: ge(() => [F.value ? (_(), d("ul", {
 					key: 0,
-					id: C(z),
+					id: b(B),
 					ref_key: "menu",
-					ref: L,
-					class: y(["m-splitbutton__menu", { "m-splitbutton__menu--teleported": G.value }]),
-					style: oe(G.value ? R.value : void 0),
+					ref: R,
+					class: ue(["m-splitbutton__menu", { "m-splitbutton__menu--teleported": K.value }]),
+					style: de(K.value ? z.value : void 0),
 					role: "menu",
-					onKeydown: t[0] ||= (...e) => C(J).onKeydown && C(J).onKeydown(...e)
-				}, [(b(!0), f(c, null, ce(g.model, (e, t) => (b(), f("li", {
+					onKeydown: t[0] ||= (...e) => b(J).onKeydown && b(J).onKeydown(...e)
+				}, [(_(!0), d(s, null, pe(h.model, (e, t) => (_(), d("li", {
 					key: `${e.label}-${t}`,
 					role: "presentation"
-				}, [p("button", {
+				}, [f("button", {
 					type: "button",
 					class: "m-splitbutton__item",
 					role: "menuitem",
 					disabled: e.disabled,
-					tabindex: C(J).tabindexFor(t),
+					tabindex: b(J).tabindexFor(t),
 					onClick: (t) => Z(e)
-				}, S(e.label), 9, E)]))), 128))], 46, he)) : d("", !0)]),
+				}, y(e.label), 9, T)]))), 128))], 46, w)) : u("", !0)]),
 				_: 1
-			})], 8, ["to", "disabled"]))
+			}, 8, ["name", "css"])], 8, ["to", "disabled"]))
 		], 16));
 	}
 });
 //#endregion
-export { D as MSplitButton };
+export { E as MSplitButton };