morya-ui 0.1.1 → 0.2.2

package/dist/tabs/index.js

@@ -1,26 +1,29 @@
-import { t as e } from "../Icon-DfpIfo2L.js";
-import { t } from "../useMId-BXFYayPP.js";
-import { n } from "../locale-DYGhxekd.js";
+import { r as e } from "../useComponentAttrs-BTYEe61P.js";
+import { t } from "../Icon-DfpIfo2L.js";
+import { t as n } from "../useMId-BXFYayPP.js";
+import { n as r } from "../locale-DYGhxekd.js";
 import "./style.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, onMounted as p, openBlock as m, ref as h, renderList as g, renderSlot as _, toDisplayString as v, unref as y, watch as b, withModifiers as x } from "vue";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as f, normalizeClass as p, onBeforeUnmount as m, onMounted as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, useAttrs as S, watch as C, withModifiers as w } from "vue";
 //#region src/components/Tabs/Tabs.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "m-tabs__bar" }, C = ["aria-label"], w = ["aria-label"], T = [
+var T = { class: "m-tabs__bar" }, E = ["aria-label"], D = ["aria-label"], O = [
 	"id",
 	"aria-selected",
 	"aria-controls",
 	"disabled",
 	"onClick",
 	"onKeydown"
-], E = [
+], k = [
 	"aria-label",
 	"disabled",
 	"onClick"
-], D = ["aria-label"], O = ["aria-label"], k = {
+], A = ["aria-label"], j = ["aria-label"], M = {
 	key: 3,
 	class: "m-tabs__extra"
-}, A = ["id", "aria-labelledby"], j = /* @__PURE__ */ l({
+}, N = ["id", "aria-labelledby"], P = /* @__PURE__ */ u({
+	inheritAttrs: !1,
 	__name: "Tabs",
 	props: {
+		pt: {},
 		modelValue: {},
 		tabs: {},
 		type: { default: "line" },
@@ -39,20 +42,20 @@ var S = { class: "m-tabs__bar" }, C = ["aria-label"], w = ["aria-label"], T = [
 		"close",
 		"add"
 	],
-	setup(l, { emit: j }) {
-		let M = l, N = j, P = n(), F = t(), I = h(null), L = h(!1), R = i(() => M.modelValue ?? M.tabs.find((e) => !e.disabled)?.value);
-		function z(e) {
-			N("update:modelValue", e), N("change", e);
+	setup(u, { emit: P }) {
+		let F = u, I = S(), { rootAttrs: L } = e(I, () => F.pt), R = P, z = r(), B = n(), V = _(null), H = _(!1), U = a(() => F.modelValue ?? F.tabs.find((e) => !e.disabled)?.value);
+		function W(e) {
+			R("update:modelValue", e), R("change", e);
 		}
-		function B(e) {
-			return e.closable ?? M.closable;
+		function G(e) {
+			return e.closable ?? F.closable;
 		}
-		function V(e) {
-			if (e.disabled || (N("close", e.value), R.value !== e.value)) return;
-			let t = M.tabs.find((t) => t.value !== e.value && !t.disabled);
-			t && z(t.value);
+		function K(e) {
+			if (e.disabled || (R("close", e.value), U.value !== e.value)) return;
+			let t = F.tabs.find((t) => t.value !== e.value && !t.disabled);
+			t && W(t.value);
 		}
-		function H(e, t) {
+		function q(e, t) {
 			if (![
 				"ArrowRight",
 				"ArrowLeft",
@@ -60,15 +63,15 @@ var S = { class: "m-tabs__bar" }, C = ["aria-label"], w = ["aria-label"], T = [
 				"End"
 			].includes(e.key)) return;
 			e.preventDefault();
-			let n = M.tabs.filter((e) => !e.disabled), r = n.findIndex((e) => e.value === M.tabs[t]?.value), i = n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : (r + (e.key === "ArrowRight" ? 1 : -1) + n.length) % n.length];
-			i && (z(i.value), requestAnimationFrame(() => document.getElementById(`m-tab-${i.value}`)?.focus({ preventScroll: !0 })));
+			let n = F.tabs.filter((e) => !e.disabled), r = n.findIndex((e) => e.value === F.tabs[t]?.value), i = n[e.key === "Home" ? 0 : e.key === "End" ? n.length - 1 : (r + (e.key === "ArrowRight" ? 1 : -1) + n.length) % n.length];
+			i && (W(i.value), requestAnimationFrame(() => document.getElementById(`m-tab-${i.value}`)?.focus({ preventScroll: !0 })));
 		}
-		function U() {
-			let e = I.value;
-			L.value = !!(e && e.scrollWidth > e.clientWidth + 1);
+		function J() {
+			let e = V.value;
+			H.value = !!(e && e.scrollWidth > e.clientWidth + 1);
 		}
-		function W(e) {
-			let t = I.value;
+		function Y(e) {
+			let t = V.value;
 			if (!t) return;
 			let n = Math.round(t.clientWidth * .75) * Math.sign(e);
 			t.scrollBy({
@@ -76,83 +79,83 @@ var S = { class: "m-tabs__bar" }, C = ["aria-label"], w = ["aria-label"], T = [
 				behavior: "smooth"
 			});
 		}
-		let G;
-		return p(() => {
-			U(), !(!I.value || typeof ResizeObserver > "u") && (G = new ResizeObserver(() => U()), G.observe(I.value));
-		}), b(() => M.tabs, () => {
-			u(U);
-		}, { deep: !0 }), f(() => G?.disconnect()), (t, n) => (m(), o("div", { class: d(["m-tabs", `m-tabs--${l.type}`]) }, [s("div", S, [
-			L.value ? (m(), o("button", {
+		let X;
+		return h(() => {
+			J(), !(!V.value || typeof ResizeObserver > "u") && (X = new ResizeObserver(() => J()), X.observe(V.value));
+		}), C(() => F.tabs, () => {
+			f(J);
+		}, { deep: !0 }), m(() => X?.disconnect()), (e, n) => (g(), s("div", d(x(L), { class: ["m-tabs", `m-tabs--${u.type}`] }), [c("div", T, [
+			H.value ? (g(), s("button", {
 				key: 0,
 				type: "button",
 				class: "m-tabs__scroll",
-				"aria-label": y(P).prev,
-				onClick: n[0] ||= (e) => W(-1)
-			}, [c(e, {
+				"aria-label": x(z).prev,
+				onClick: n[0] ||= (e) => Y(-1)
+			}, [l(t, {
 				name: "chevron-left",
 				size: "sm"
-			})], 8, C)) : a("", !0),
-			s("div", {
+			})], 8, E)) : o("", !0),
+			c("div", {
 				ref_key: "scroller",
-				ref: I,
+				ref: V,
 				class: "m-tabs__scroller"
-			}, [s("div", {
+			}, [c("div", {
 				class: "m-tabs__list",
 				role: "tablist",
-				"aria-label": y(P).tabs
-			}, [(m(!0), o(r, null, g(l.tabs, (t, n) => (m(), o("div", {
-				key: t.value,
-				class: d(["m-tabs__item", { "m-tabs__item--active": R.value === t.value }])
-			}, [s("button", {
-				id: `m-tab-${t.value}`,
-				class: d(["m-tabs__tab", { "m-tabs__tab--active": R.value === t.value }]),
+				"aria-label": x(z).tabs
+			}, [(g(!0), s(i, null, v(u.tabs, (e, n) => (g(), s("div", {
+				key: e.value,
+				class: p(["m-tabs__item", { "m-tabs__item--active": U.value === e.value }])
+			}, [c("button", {
+				id: `m-tab-${e.value}`,
+				class: p(["m-tabs__tab", { "m-tabs__tab--active": U.value === e.value }]),
 				type: "button",
 				role: "tab",
-				"aria-selected": R.value === t.value,
-				"aria-controls": `${y(F)}-panel-${t.value}`,
-				disabled: t.disabled,
-				onClick: (e) => z(t.value),
-				onKeydown: (e) => H(e, n)
-			}, v(t.label), 43, T), B(t) ? (m(), o("button", {
+				"aria-selected": U.value === e.value,
+				"aria-controls": `${x(B)}-panel-${e.value}`,
+				disabled: e.disabled,
+				onClick: (t) => W(e.value),
+				onKeydown: (e) => q(e, n)
+			}, b(e.label), 43, O), G(e) ? (g(), s("button", {
 				key: 0,
 				type: "button",
 				class: "m-tabs__close",
-				"aria-label": y(P).closeTab,
-				disabled: t.disabled,
-				onClick: x((e) => V(t), ["stop"])
-			}, [c(e, {
+				"aria-label": x(z).closeTab,
+				disabled: e.disabled,
+				onClick: w((t) => K(e), ["stop"])
+			}, [l(t, {
 				name: "close",
 				size: "sm"
-			})], 8, E)) : a("", !0)], 2))), 128))], 8, w)], 512),
-			L.value ? (m(), o("button", {
+			})], 8, k)) : o("", !0)], 2))), 128))], 8, D)], 512),
+			H.value ? (g(), s("button", {
 				key: 1,
 				type: "button",
 				class: "m-tabs__scroll",
-				"aria-label": y(P).next,
-				onClick: n[1] ||= (e) => W(1)
-			}, [c(e, {
+				"aria-label": x(z).next,
+				onClick: n[1] ||= (e) => Y(1)
+			}, [l(t, {
 				name: "chevron-right",
 				size: "sm"
-			})], 8, D)) : a("", !0),
-			l.addable ? (m(), o("button", {
+			})], 8, A)) : o("", !0),
+			u.addable ? (g(), s("button", {
 				key: 2,
 				type: "button",
 				class: "m-tabs__add",
-				"aria-label": y(P).addTab,
-				onClick: n[2] ||= (e) => N("add")
-			}, [c(e, {
+				"aria-label": x(z).addTab,
+				onClick: n[2] ||= (e) => R("add")
+			}, [l(t, {
 				name: "plus",
 				size: "sm"
-			})], 8, O)) : a("", !0),
-			t.$slots.extra ? (m(), o("div", k, [_(t.$slots, "extra")])) : a("", !0)
-		]), R.value ? (m(), o("div", {
+			})], 8, j)) : o("", !0),
+			e.$slots.extra ? (g(), s("div", M, [y(e.$slots, "extra")])) : o("", !0)
+		]), U.value ? (g(), s("div", {
 			key: 0,
-			id: `${y(F)}-panel-${R.value}`,
+			id: `${x(B)}-panel-${U.value}`,
 			class: "m-tabs__panel",
 			role: "tabpanel",
-			"aria-labelledby": `m-tab-${R.value}`
-		}, [_(t.$slots, "default", { activeValue: R.value })], 8, A)) : a("", !0)], 2));
+			"aria-labelledby": `m-tab-${U.value}`
+		}, [y(e.$slots, "default", { activeValue: U.value })], 8, N)) : o("", !0)], 16));
 	}
 });
 //#endregion
-export { j as MTabs };
+export { P as MTabs };