morya-ui 0.2.2 → 0.2.4

package/dist/tabs/index.js

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