morya-ui 0.4.0 → 0.4.2

package/dist/carousel/index.js

@@ -1,163 +1,355 @@
 import { a as e } from "../useComponentAttrs-e-5QAjdw.js";
-import { t } from "../Icon-od9Ob-Ay.js";
-import { n } from "../locale-Dnk0UIie.js";
+import { t } from "../Button-BaYLh91a.js";
+import { t as n } from "../vnode-PJWBO7_h.js";
+import { n as r } from "../locale-CR2PIaxt.js";
 import "./style.js";
-import { Fragment as r, computed as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeProps as d, nextTick as ee, normalizeClass as f, normalizeStyle as p, onBeforeUnmount as m, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as x, watch as S } from "vue";
-//#region src/components/Carousel/Carousel.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-label", "disabled"], w = { class: "m-carousel__main" }, T = {
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as ee, createElementBlock as s, createElementVNode as te, createVNode as c, defineComponent as l, guardReactiveProps as ne, mergeProps as re, nextTick as u, normalizeClass as d, normalizeProps as f, normalizeStyle as ie, onBeforeUnmount as ae, onMounted as oe, openBlock as p, provide as se, ref as m, renderList as h, renderSlot as g, resolveDynamicComponent as ce, unref as _, useAttrs as le, useSlots as ue, watch as v } from "vue";
+//#region src/components/Carousel/context.ts
+var de = Symbol("m-carousel"), fe = {
 	key: 0,
-	class: "m-carousel__indicators"
-}, E = [
+	class: "m-carousel__arrows"
+}, pe = [
 	"aria-label",
-	"aria-current",
-	"onClick"
-], D = ["aria-label", "disabled"], O = 40, k = /* @__PURE__ */ u({
+	"aria-selected",
+	"onClick",
+	"onMouseenter"
+], y = 40, b = /* @__PURE__ */ l({
+	name: "MCarousel",
 	inheritAttrs: !1,
 	__name: "Carousel",
 	props: {
 		pt: {},
-		value: {},
-		page: {},
-		numVisible: { default: 1 },
-		circular: {
+		currentIndex: {},
+		defaultIndex: { default: 0 },
+		showArrow: {
 			type: Boolean,
 			default: !1
 		},
+		showDots: {
+			type: Boolean,
+			default: !0
+		},
+		dotType: { default: "dot" },
+		dotPlacement: { default: "bottom" },
+		slidesPerView: { default: 1 },
+		spaceBetween: { default: 0 },
+		centeredSlides: {
+			type: Boolean,
+			default: !1
+		},
+		direction: { default: "horizontal" },
 		autoplay: {
 			type: Boolean,
 			default: !1
 		},
-		interval: { default: 3e3 },
-		showArrows: {
+		interval: { default: 5e3 },
+		loop: {
 			type: Boolean,
 			default: !0
 		},
-		showIndicators: {
+		effect: { default: "slide" },
+		trigger: { default: "click" },
+		touchable: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		draggable: {
+			type: Boolean,
+			default: !1
+		},
+		mousewheel: {
+			type: Boolean,
+			default: !1
+		},
+		keyboard: {
+			type: Boolean,
+			default: !1
+		},
+		transitionDuration: { default: 300 }
 	},
-	emits: ["update:page"],
-	setup(u, { emit: k }) {
-		let A = u, j = k, te = x(), { rootAttrs: M } = e(te, () => A.pt), N = g(0), P = i(() => A.page ?? N.value), F = n(), I = g(!1), L = null, R = i(() => A.value.length), z = i(() => Math.max(1, A.numVisible)), B = i(() => Math.max(0, R.value - z.value)), V = i(() => Array.from({ length: B.value + 1 }, (e, t) => t)), H = i(() => {
-			let e = Math.max(R.value, 1), t = z.value;
-			return {
-				"--m-carousel-page": String(P.value),
-				"--m-carousel-count": String(e),
-				"--m-carousel-visible": String(t)
-			};
-		});
-		function U(e) {
-			let t = P.value, n = e, r = !1;
-			if (A.circular) {
-				let t = B.value + 1;
-				if (t <= 0) return;
-				(e < 0 || e > B.value) && (r = !0), n = (e % t + t) % t;
-			} else n = Math.min(B.value, Math.max(0, e));
-			n !== t && (r && (I.value = !0), N.value = n, j("update:page", n), r && ee(() => {
+	emits: ["update:currentIndex"],
+	setup(l, { expose: b, emit: x }) {
+		let S = l, me = x, he = le(), ge = ue(), { rootAttrs: _e } = e(he, () => S.pt), C = r(), ve = m(null), w = m(null), ye = m(null), T = m(0), E = m(!1), D = m(!1), O = m(0), k = m(!1), A = a(() => n(ge.default?.())), j = a(() => A.value.length), M = a(() => S.direction === "vertical"), N = a(() => S.effect === "slide"), be = a(() => !N.value || S.centeredSlides || S.slidesPerView === "auto" ? 1 : Math.max(1, Number(S.slidesPerView) || 1)), P = a(() => !N.value || S.centeredSlides || S.slidesPerView === "auto" ? Math.max(1, j.value) : Math.max(1, j.value - be.value + 1)), F = m(L(S.defaultIndex, P.value)), I = a(() => S.currentIndex === void 0 ? L(F.value, P.value) : L(S.currentIndex, P.value));
+		function L(e, t) {
+			return t <= 0 ? 0 : Math.min(t - 1, Math.max(0, e));
+		}
+		function xe(e) {
+			let t = P.value;
+			return t <= 0 ? 0 : S.loop ? (e % t + t) % t : L(e, t);
+		}
+		function R(e) {
+			let t = I.value, n = xe(e);
+			if (n === t) return;
+			let r = S.loop && Math.abs(e - t) > 1 && (e < 0 || e >= P.value);
+			r && N.value && (E.value = !0), S.currentIndex === void 0 && (F.value = n), me("update:currentIndex", n, t), r && N.value && u(() => {
 				requestAnimationFrame(() => {
-					I.value = !1;
+					E.value = !1;
 				});
-			}));
+			});
+		}
+		function z(e) {
+			R(e);
+		}
+		function B() {
+			R(I.value - 1);
+		}
+		function V() {
+			R(I.value + 1);
+		}
+		function Se() {
+			return I.value;
 		}
-		S(B, (e) => {
-			N.value > e && (N.value = e);
+		function Ce(e) {
+			return e === I.value;
+		}
+		function we(e) {
+			let t = j.value;
+			return t <= 0 ? !1 : e === (S.loop ? (I.value - 1 + t) % t : I.value - 1);
+		}
+		function Te(e) {
+			let t = j.value;
+			return t <= 0 ? !1 : e === (S.loop ? (I.value + 1) % t : I.value + 1);
+		}
+		se(de, {
+			currentIndex: I,
+			total: j,
+			isActive: Ce,
+			isPrev: we,
+			isNext: Te
 		});
-		function W() {
-			U(P.value - 1);
+		let Ee = a(() => [
+			"m-carousel",
+			`m-carousel--${S.direction}`,
+			`m-carousel--${S.effect}`,
+			`m-carousel--dots-${S.dotPlacement}`,
+			{
+				"m-carousel--show-arrow": S.showArrow,
+				"m-carousel--dragging": D.value
+			}
+		]), De = a(() => {
+			let e = {
+				"--m-carousel-duration": `${Math.max(0, S.transitionDuration)}ms`,
+				"--m-carousel-gap": `${Math.max(0, S.spaceBetween)}px`
+			};
+			if (N.value) {
+				let t = T.value - O.value;
+				e.transform = M.value ? `translate3d(0, ${-t}px, 0)` : `translate3d(${-t}px, 0, 0)`, (E.value || D.value) && (e.transitionDuration = "0ms");
+			}
+			return e;
+		});
+		function Oe(e) {
+			return {
+				"m-carousel__slide--current": Ce(e),
+				"m-carousel__slide--prev": we(e),
+				"m-carousel__slide--next": Te(e)
+			};
 		}
+		function H() {
+			let e = w.value, t = ye.value;
+			if (!e || !t || !N.value) return;
+			let n = [...t.querySelectorAll(":scope > .m-carousel__slide")];
+			if (!n.length) {
+				T.value = 0;
+				return;
+			}
+			let r = M.value ? e.clientHeight : e.clientWidth, i = Math.max(0, S.spaceBetween);
+			if (S.slidesPerView !== "auto") {
+				let e = Math.max(1, Number(S.slidesPerView) || 1), t = Math.max(0, (r - i * (e - 1)) / e);
+				for (let e of n) M.value ? (e.style.height = `${t}px`, e.style.width = "100%", e.style.flex = `0 0 ${t}px`) : (e.style.width = `${t}px`, e.style.height = "100%", e.style.flex = `0 0 ${t}px`);
+			} else for (let e of n) e.style.flex = "0 0 auto", M.value ? e.style.width = "100%" : e.style.height = "100%";
+			let a = n[Math.min(I.value, n.length - 1)];
+			if (!a) {
+				T.value = 0;
+				return;
+			}
+			let o = M.value ? a.offsetTop : a.offsetLeft;
+			if (S.centeredSlides) {
+				let e = M.value ? a.offsetHeight : a.offsetWidth;
+				o -= (r - e) / 2;
+			}
+			T.value = Math.max(0, o);
+		}
+		let U = null, W = null;
 		function G() {
-			U(P.value + 1);
+			W !== null && (clearInterval(W), W = null);
+		}
+		function ke() {
+			k.value = !0, G();
 		}
-		function K(e) {
-			e.key === "ArrowLeft" ? (e.preventDefault(), W()) : e.key === "ArrowRight" && (e.preventDefault(), G());
+		function Ae() {
+			k.value = !1, je();
 		}
-		let q = null;
-		function J(e) {
-			!e.isPrimary || e.pointerType === "mouse" || (q = e.clientX);
+		function je() {
+			G(), !(k.value || !S.autoplay || P.value <= 1) && (W = setInterval(() => {
+				if (!S.loop && I.value >= P.value - 1) {
+					z(0);
+					return;
+				}
+				V();
+			}, Math.max(400, S.interval)));
 		}
+		v(() => [
+			S.autoplay,
+			S.interval,
+			P.value,
+			S.loop,
+			S.effect,
+			S.slidesPerView,
+			S.spaceBetween,
+			S.centeredSlides,
+			S.direction,
+			j.value,
+			I.value
+		], async () => {
+			await u(), H(), je();
+		}, { immediate: !0 }), v(() => S.currentIndex, (e) => {
+			e !== void 0 && (F.value = L(e, P.value));
+		}), v(P, (e) => {
+			F.value > e - 1 && (F.value = Math.max(0, e - 1));
+		}), oe(() => {
+			typeof ResizeObserver < "u" && w.value && (U = new ResizeObserver(() => H()), U.observe(w.value)), H();
+		}), ae(() => {
+			G(), U?.disconnect(), U = null, Q();
+		});
+		let K = null, q = !1, J = !1;
 		function Y(e) {
-			if (q === null || !e.isPrimary) return;
-			let t = e.clientX - q;
-			q = null, !(Math.abs(t) < O) && (t > 0 ? W() : G());
+			return "deltaY" in e ? M.value ? e.deltaY : e.deltaX || e.deltaY : M.value ? e.clientY : e.clientX;
+		}
+		function Me(e) {
+			if (!e.isPrimary || D.value) return;
+			let t = S.touchable && e.pointerType !== "mouse", n = S.draggable && e.pointerType === "mouse";
+			!t && !n || (q = !0, K = Y(e), O.value = 0, w.value?.setPointerCapture?.(e.pointerId), Pe());
 		}
-		function X() {
-			q = null;
+		function Ne(e) {
+			if (!q || K === null) return;
+			let t = Y(e) - K;
+			!D.value && Math.abs(t) < 4 || (D.value = !0, N.value && (O.value = t), e.preventDefault());
 		}
-		function Z(e) {
-			return F.value.carouselPage.replace("{index}", String(e + 1)).replace("{total}", String(V.value.length));
+		function X(e) {
+			if (!q || K === null) return;
+			let t = Y(e) - K;
+			q = !1, K = null;
+			let n = D.value;
+			D.value = !1, O.value = 0, Q(), !(!n && Math.abs(t) < y) && (t > y ? B() : t < -40 ? V() : u(() => H()));
+		}
+		function Z() {
+			q = !1, K = null, D.value = !1, O.value = 0, Q(), u(() => H());
+		}
+		function Pe() {
+			J || (J = !0, window.addEventListener("pointermove", Ne, { passive: !1 }), window.addEventListener("pointerup", X), window.addEventListener("pointercancel", Z));
 		}
 		function Q() {
-			L !== null && (clearInterval(L), L = null);
+			J && (J = !1, window.removeEventListener("pointermove", Ne), window.removeEventListener("pointerup", X), window.removeEventListener("pointercancel", Z));
 		}
-		function $() {
-			Q(), !(!A.autoplay || A.value.length <= A.numVisible) && (L = setInterval(() => {
-				if (!A.circular && P.value >= B.value) {
-					U(0);
-					return;
-				}
-				G();
-			}, Math.max(400, A.interval)));
-		}
-		return S(() => [
-			A.autoplay,
-			A.interval,
-			A.value.length,
-			A.numVisible
-		], () => $(), { immediate: !0 }), m(Q), (e, n) => (h(), o("div", d(b(M), {
-			class: "m-carousel",
-			onKeydown: K,
-			onMouseenter: Q,
-			onMouseleave: $,
-			onFocusin: Q,
-			onFocusout: $
+		let $ = !1;
+		function Fe(e) {
+			if (!S.mousewheel || P.value <= 1) return;
+			let t = Y(e);
+			Math.abs(t) < 4 || (e.preventDefault(), !$ && ($ = !0, t > 0 ? V() : B(), window.setTimeout(() => {
+				$ = !1;
+			}, Math.max(200, S.transitionDuration))));
+		}
+		function Ie(e) {
+			S.keyboard && (M.value ? e.key === "ArrowUp" ? (e.preventDefault(), B()) : e.key === "ArrowDown" && (e.preventDefault(), V()) : e.key === "ArrowLeft" ? (e.preventDefault(), B()) : e.key === "ArrowRight" && (e.preventDefault(), V()));
+		}
+		function Le(e) {
+			return C.value.carouselPage.replace("{index}", String(e + 1)).replace("{total}", String(P.value));
+		}
+		function Re(e) {
+			S.trigger === "hover" && z(e);
+		}
+		function ze(e) {
+			S.trigger === "click" && z(e);
+		}
+		let Be = a(() => ({
+			prev: B,
+			next: V,
+			total: P.value,
+			currentIndex: I.value
+		})), Ve = a(() => ({
+			total: P.value,
+			currentIndex: I.value,
+			to: z
+		})), He = a(() => !S.loop && I.value <= 0), Ue = a(() => !S.loop && I.value >= P.value - 1);
+		return b({
+			prev: B,
+			next: V,
+			to: z,
+			getCurrentIndex: Se
+		}), (e, n) => (p(), s("div", re({
+			ref_key: "rootEl",
+			ref: ve
+		}, _(_e), {
+			class: Ee.value,
+			tabindex: "0",
+			onKeydown: Ie,
+			onMouseenter: ke,
+			onMouseleave: Ae,
+			onFocusin: ke,
+			onFocusout: Ae
 		}), [
-			u.showArrows ? (h(), o("button", {
-				key: 0,
-				type: "button",
-				class: "m-carousel__nav m-carousel__nav--prev",
-				"aria-label": b(F).prev,
-				disabled: !u.circular && P.value <= 0,
-				onClick: W
-			}, [l(t, {
-				name: "chevron-left",
-				size: "sm"
-			})], 8, C)) : a("", !0),
-			s("div", w, [s("div", {
+			te("div", {
+				ref_key: "viewportEl",
+				ref: w,
 				class: "m-carousel__viewport",
-				onPointerdown: J,
-				onPointerup: Y,
-				onPointercancel: X
-			}, [s("div", {
-				class: f(["m-carousel__track", { "m-carousel__track--instant": I.value }]),
-				style: p(H.value)
-			}, [(h(!0), o(r, null, _(u.value, (t, n) => (h(), o("div", {
-				key: n,
-				class: "m-carousel__item"
-			}, [v(e.$slots, "item", {
-				item: t,
-				index: n
-			}, () => [c(y(t), 1)])]))), 128))], 6)], 32), u.showIndicators && V.value.length > 1 ? (h(), o("div", T, [(h(!0), o(r, null, _(V.value, (e) => (h(), o("button", {
-				key: e,
-				type: "button",
-				class: f(["m-carousel__indicator", { "m-carousel__indicator--active": e === P.value }]),
-				"aria-label": Z(e),
-				"aria-current": e === P.value ? "true" : void 0,
-				onClick: (t) => U(e)
-			}, null, 10, E))), 128))])) : a("", !0)]),
-			u.showArrows ? (h(), o("button", {
+				onPointerdown: Me,
+				onPointerup: X,
+				onPointercancel: Z,
+				onWheel: Fe
+			}, [te("div", {
+				ref_key: "slidesEl",
+				ref: ye,
+				class: d(["m-carousel__slides", { "m-carousel__slides--instant": E.value || D.value }]),
+				style: ie(De.value)
+			}, [(p(!0), s(i, null, h(A.value, (e, t) => (p(), s("div", {
+				key: t,
+				class: d(["m-carousel__slide", Oe(t)])
+			}, [(p(), o(ce(e)))], 2))), 128))], 6)], 544),
+			l.showArrow && P.value > 1 ? (p(), s("div", fe, [g(e.$slots, "arrow", f(ne(Be.value)), () => [c(t, {
+				class: "m-carousel__arrow m-carousel__arrow--prev",
+				icon: "chevron-left",
+				"icon-only": "",
+				shape: "circle",
+				size: "small",
+				"aria-label": _(C).prev,
+				disabled: He.value,
+				onClick: B
+			}, null, 8, ["aria-label", "disabled"]), c(t, {
+				class: "m-carousel__arrow m-carousel__arrow--next",
+				icon: "chevron-right",
+				"icon-only": "",
+				shape: "circle",
+				size: "small",
+				"aria-label": _(C).next,
+				disabled: Ue.value,
+				onClick: V
+			}, null, 8, ["aria-label", "disabled"])])])) : ee("", !0),
+			l.showDots && P.value > 1 ? (p(), s("div", {
 				key: 1,
+				class: d(["m-carousel__dots", `m-carousel__dots--${l.dotType}`]),
+				role: "tablist"
+			}, [g(e.$slots, "dots", f(ne(Ve.value)), () => [(p(!0), s(i, null, h(P.value, (e) => (p(), s("button", {
+				key: e - 1,
 				type: "button",
-				class: "m-carousel__nav m-carousel__nav--next",
-				"aria-label": b(F).next,
-				disabled: !u.circular && P.value >= B.value,
-				onClick: G
-			}, [l(t, {
-				name: "chevron-right",
-				size: "sm"
-			})], 8, D)) : a("", !0)
+				class: d(["m-carousel__dot", { "m-carousel__dot--active": e - 1 === I.value }]),
+				role: "tab",
+				"aria-label": Le(e - 1),
+				"aria-selected": e - 1 === I.value ? "true" : "false",
+				onClick: (t) => ze(e - 1),
+				onMouseenter: (t) => Re(e - 1)
+			}, null, 42, pe))), 128))])], 2)) : ee("", !0)
 		], 16));
 	}
+}), x = /* @__PURE__ */ l({
+	name: "MCarouselItem",
+	inheritAttrs: !1,
+	__mCarouselItem: !0,
+	__name: "CarouselItem",
+	props: { pt: {} },
+	setup(t) {
+		let n = t, r = le(), { rootAttrs: i } = e(r, () => n.pt);
+		return (e, t) => (p(), s("div", re(_(i), { class: "m-carousel__slide-content" }), [g(e.$slots, "default")], 16));
+	}
 });
 //#endregion
-export { k as MCarousel };
+export { b as MCarousel, x as MCarouselItem };