vectis-ui 0.1.0 → 0.8.0

package/dist/components/VCarousel/VCarousel.vue_vue_type_script_setup_true_lang.js

@@ -1,40 +1,41 @@
 import { useMessages as e } from "../../i18n/state.js";
-import t from "../VIcon/VIcon.js";
-import { iconProps as n } from "../VIcon/iconProps.js";
-import r from "../VIconButton/VIconButton.js";
-import { isRtl as i } from "../../utils/direction.js";
-import { clamp as a } from "../../utils/number.js";
-import { useAriaLabel as o } from "../../composables/useAriaLabel.js";
-import { useTimer as s } from "../../composables/useTimer.js";
-import { isKeyboardFocus as c } from "../../utils/focus.js";
-import { flattenSlot as l } from "../../utils/vnode.js";
-import { cssSize as u } from "../../utils/css.js";
+import { iconProps as t } from "../VIcon/iconProps.js";
+import { cssSize as n } from "../../utils/css.js";
+import r from "../VIcon/VIcon.js";
+import i from "../VIconButton/VIconButton.js";
+import { useAriaLabel as a } from "../../composables/useAriaLabel.js";
+import { isRtl as o } from "../../utils/direction.js";
+import { clamp as s } from "../../utils/number.js";
+import { flattenSlot as c } from "../../utils/vnode.js";
+import { useTimer as l } from "../../composables/useTimer.js";
+import { isKeyboardFocus as u } from "../../utils/focus.js";
 import { arrow_downward_alt as d } from "../VIcon/icons/arrow_downward_alt.js";
 import { arrow_left_alt as f } from "../VIcon/icons/arrow_left_alt.js";
 import { arrow_right_alt as p } from "../VIcon/icons/arrow_right_alt.js";
-import { arrow_upward_alt as ee } from "../VIcon/icons/arrow_upward_alt.js";
-import { carouselKey as te } from "./context.js";
-import { Fragment as ne, cloneVNode as re, computed as m, createBlock as ie, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createVNode as v, defineComponent as y, guardReactiveProps as b, mergeModels as x, nextTick as S, normalizeProps as C, normalizeStyle as ae, onBeforeUnmount as oe, onMounted as se, openBlock as w, provide as ce, ref as T, renderList as le, renderSlot as E, resolveDynamicComponent as ue, toDisplayString as de, unref as D, useModel as fe, useSlots as pe, watch as O, withCtx as k } from "vue";
+import { arrow_upward_alt as m } from "../VIcon/icons/arrow_upward_alt.js";
+import { carouselKey as ee } from "./context.js";
+import { Fragment as te, cloneVNode as ne, computed as h, createBlock as re, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as ie, nextTick as ae, normalizeStyle as oe, onBeforeUnmount as se, onMounted as ce, openBlock as S, provide as le, ref as C, renderList as ue, renderSlot as w, resolveDynamicComponent as de, toDisplayString as fe, unref as T, useModel as pe, useSlots as me, watch as E, withCtx as he } from "vue";
 //#region src/components/VCarousel/VCarousel.vue?vue&type=script&setup=true&lang.ts
-var me = [
+var ge = [
 	"aria-roledescription",
 	"aria-label",
 	"data-orientation",
 	"data-effect",
+	"data-jump",
 	"data-controls",
 	"data-indicators",
 	"data-controls-visibility"
-], he = { class: "v-carousel-stage" }, ge = ["aria-label"], _e = {
+], _e = { class: "v-carousel-stage" }, ve = ["aria-label"], ye = {
 	key: 0,
 	class: "v-carousel-controls"
-}, ve = ["aria-label"], ye = [
+}, be = ["aria-label"], xe = [
 	"aria-label",
 	"aria-current",
 	"onClick"
-], be = {
+], Se = {
 	class: "v-visually-hidden",
 	role: "status"
-}, A = 2, j = /*@__PURE__*/ y({
+}, D = 2, O = /*@__PURE__*/ b({
 	__name: "VCarousel",
 	props: /*@__PURE__*/ x({
 		itemsPerView: { default: 1 },
@@ -48,6 +49,10 @@ var me = [
 			type: Boolean,
 			default: !1
 		},
+		noJump: {
+			type: Boolean,
+			default: !1
+		},
 		autoplay: { default: 0 },
 		controls: {
 			type: [Boolean, String],
@@ -68,56 +73,78 @@ var me = [
 		modelModifiers: {}
 	}),
 	emits: ["update:modelValue"],
-	setup(y) {
-		let x = y, j = pe(), M = fe(y, "modelValue"), N = e(), xe = o(() => x.label ?? N.value.carousel.label), Se = m(() => x.prevLabel ?? N.value.carousel.previous), Ce = m(() => x.nextLabel ?? N.value.carousel.next), P = m(() => x.orientation === "vertical"), we = m(() => x.prevIcon ?? (P.value ? ee : f)), Te = m(() => x.nextIcon ?? (P.value ? d : p)), F = m(() => l(j.default?.())), I = m(() => F.value.length), Ee = () => F.value.map((e, t) => re(e, {
+	setup(b) {
+		let x = b, O = me(), k = pe(b, "modelValue"), A = e(), Ce = a(() => x.label ?? A.value.carousel.label), we = h(() => x.prevLabel ?? A.value.carousel.previous), Te = h(() => x.nextLabel ?? A.value.carousel.next), j = h(() => x.orientation === "vertical"), Ee = h(() => x.prevIcon ?? (j.value ? m : f)), De = h(() => x.nextIcon ?? (j.value ? d : p)), M = h(() => c(O.default?.())), N = h(() => M.value.length), Oe = () => M.value.map((e, t) => ne(e, {
 			index: t,
 			key: e.key ?? t
-		})), De = m(() => x.effect === "fade" && (x.itemsPerView > 1 || x.peek !== void 0) ? "slide" : x.effect);
-		ce(te, {
-			get count() {
-				return I.value;
-			},
+		})), ke = h(() => x.peek !== void 0 && Number.parseFloat(String(x.peek)) !== 0), Ae = h(() => x.effect === "fade" && (x.itemsPerView > 1 || ke.value) ? "slide" : x.effect);
+		le(ee, {
 			get slideRoleDescription() {
-				return N.value.carousel.slideRoleDescription;
+				return A.value.carousel.slideRoleDescription;
 			},
-			slideLabel: (e) => N.value.carousel.slide(e + 1, I.value)
+			slideLabel: (e) => A.value.carousel.slide(e + 1, N.value)
 		});
-		let Oe = m(() => ({
+		let P = C(), F = C(1), je = h(() => ({
 			"--carousel-per-view": String(x.itemsPerView),
-			"--carousel-item-min": u(x.itemMinSize),
-			"--carousel-peek": u(x.peek),
-			"--carousel-gap": u(x.gap),
-			"--carousel-viewport-block": u(x.height)
-		})), L = T(null), R = T(!1), ke = () => {
-			let e = L.value;
-			e && H(e), R.value = !1;
-		}, z = !1;
-		function Ae(e) {
-			let t = L.value, n = t?.querySelector(`[data-carousel-index='${e}']`);
-			if (!t || !n) return;
-			let r = n.getBoundingClientRect(), i = t.getBoundingClientRect(), a = r.left - i.left, o = r.top - i.top;
-			Math.abs(a) < 1 && Math.abs(o) < 1 || (R.value = !0, t.scrollBy?.({
-				left: a,
-				top: o
-			}));
+			"--carousel-item-min": n(x.itemMinSize),
+			"--carousel-peek": n(x.peek),
+			"--carousel-gap": n(x.gap),
+			"--carousel-viewport-block": n(x.height),
+			"--carousel-jump-dir": String(F.value)
+		})), I = C(null), L = C(!1), Me = () => {
+			let e = I.value;
+			e && U(e), L.value = !1;
+		}, R = !1;
+		function z(e, t) {
+			let n = e.querySelector(`[data-carousel-index='${t}']`);
+			if (!n) return;
+			let r = n.getBoundingClientRect(), i = e.getBoundingClientRect();
+			return {
+				left: r.left - i.left,
+				top: r.top - i.top
+			};
 		}
-		O(M, (e) => {
-			z || S(() => Ae(e));
+		let B = (e) => Math.abs(e.left) < 1 && Math.abs(e.top) < 1;
+		function Ne(e, t = e) {
+			let n = I.value;
+			if (!n) return;
+			let r = z(n, e);
+			if (!r) return;
+			let { left: i, top: a } = r;
+			if (B(r)) return;
+			let o = !x.noJump && Math.abs(e - t) > 1;
+			o && (F.value = e > t ? 1 : -1, P.value = P.value === "a" ? "b" : "a"), L.value = !0, n.scrollBy?.(o ? {
+				left: i,
+				top: a,
+				behavior: "instant"
+			} : {
+				left: i,
+				top: a
+			}), o && requestAnimationFrame(() => {
+				let t = z(n, e);
+				t && !B(t) && n.scrollBy?.({
+					...t,
+					behavior: "instant"
+				});
+			});
+		}
+		E(k, (e, t) => {
+			R || ae(() => Ne(e, t));
 		});
-		let B = T(), V = T();
-		function H(e) {
-			let t = e.querySelectorAll("[data-carousel-index]"), n = t[0]?.getBoundingClientRect(), r = t[1]?.getBoundingClientRect();
-			if (!n || !r) return;
-			let i = e.getBoundingClientRect(), o = P.value, s = Math.abs(o ? r.top - n.top : r.left - n.left);
-			if (s <= 0) return;
-			let c = Math.abs(o ? n.top - i.top : n.left - i.left), l = o ? e.scrollHeight - e.clientHeight : e.scrollWidth - e.clientWidth, u = Math.floor((l + A) / s), d = l - u * s, f = u + 1 + +(d > A), p = c >= l - A ? f - 1 : Math.round(c / s);
-			V.value = f, B.value = a(p, 0, U.value - 1);
+		let V = C(), H = C();
+		function U(e) {
+			let t = e.querySelectorAll("[data-carousel-index]"), n = t[0]?.getBoundingClientRect(), r = t[1]?.getBoundingClientRect(), i = t[t.length - 1]?.getBoundingClientRect();
+			if (!n || !r || !i) return;
+			let a = e.getBoundingClientRect(), o = j.value, c = Math.abs(o ? r.top - n.top : r.left - n.left);
+			if (c <= 0) return;
+			let l = Math.abs(o ? n.top - a.top : n.left - a.left), u = (o ? Math.max(n.bottom, i.bottom) - Math.min(n.top, i.top) : Math.max(n.right, i.right) - Math.min(n.left, i.left)) - (o ? e.clientHeight : e.clientWidth), d = Math.floor((u + D) / c), f = u - d * c, p = d + 1 + +(f > D), m = l >= u - D ? p - 1 : Math.round(l / c);
+			H.value = p, V.value = s(m, 0, W.value - 1);
 		}
-		let U = m(() => I.value === 0 ? 0 : a(V.value ?? I.value - x.itemsPerView + 1, 1, I.value));
-		O([L, I], ([e], t, n) => {
+		let W = h(() => N.value === 0 ? 0 : s(H.value ?? N.value - x.itemsPerView + 1, 1, N.value));
+		E([I, h(() => JSON.stringify(M.value.map((e, t) => String(e.key ?? t))))], ([e], t, n) => {
 			if (!e || typeof IntersectionObserver > "u") return;
 			let r = new IntersectionObserver(() => {
-				H(e), B.value === M.value && (R.value = !1);
+				U(e), V.value === k.value && (L.value = !1);
 			}, {
 				root: e,
 				threshold: [
@@ -130,24 +157,24 @@ var me = [
 			});
 			for (let t of e.querySelectorAll("[data-carousel-index]")) r.observe(t);
 			n(() => r.disconnect());
-		}, { flush: "post" }), O([B, R], () => {
-			let e = B.value;
-			R.value || e === void 0 || e === M.value || (z = !0, M.value = e, S(() => z = !1));
+		}, { flush: "post" }), E([V, L], () => {
+			let e = V.value;
+			L.value || e === void 0 || e === k.value || (R = !0, k.value = e, ae(() => R = !1));
 		});
-		let W = m(() => x.loop && U.value > 1), G = m(() => !W.value && M.value <= 0), K = m(() => !W.value && M.value >= U.value - 1);
+		let G = h(() => x.loop && W.value > 1), Pe = h(() => !G.value && k.value <= 0), K = h(() => !G.value && k.value >= W.value - 1);
 		function q(e) {
-			let t = U.value;
-			M.value = W.value ? (e % t + t) % t : a(e, 0, t - 1);
+			let t = W.value;
+			k.value = G.value ? (e % t + t) % t : s(e, 0, t - 1);
 		}
-		let J = () => q(M.value - 1), Y = () => q(M.value + 1);
-		function je(e) {
-			let t = L.value;
+		let Fe = () => q(k.value - 1), J = () => q(k.value + 1);
+		function Ie(e) {
+			let t = I.value;
 			if (!t || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
 			if (e.key === "Home" || e.key === "End") {
-				e.preventDefault(), q(e.key === "Home" ? 0 : U.value - 1);
+				e.preventDefault(), q(e.key === "Home" ? 0 : W.value - 1);
 				return;
 			}
-			let n = (P.value ? {
+			let n = (j.value ? {
 				ArrowUp: -1,
 				ArrowDown: 1
 			} : {
@@ -156,107 +183,108 @@ var me = [
 			})[e.key];
 			if (n === void 0) return;
 			e.preventDefault();
-			let r = !P.value && i(t);
-			q(M.value + (r ? -n : n));
+			let r = !j.value && o(t);
+			q(k.value + (r ? -n : n));
 		}
-		let { start: Me, cancel: Ne } = s(), X = T(!1), Z = T(!1), Pe = T(!1), Q = m(() => x.autoplay > 0 && !X.value && !Z.value && !Pe.value && !K.value);
-		O([Q, M], () => {
-			Ne(), Q.value && Me(Y, x.autoplay);
+		let { start: Le, cancel: Re } = l(), Y = C(!1), X = C(!1), Z = C(!1), Q = h(() => x.autoplay > 0 && !Y.value && !X.value && !Z.value && !K.value);
+		E([Q, k], () => {
+			Re(), Q.value && Le(J, x.autoplay);
 		}, { immediate: !0 });
 		let $;
-		se(() => {
+		ce(() => {
 			let e = window.matchMedia?.("(prefers-reduced-motion: reduce)");
 			if (!e) return;
-			let t = () => Pe.value = e.matches;
+			let t = () => Z.value = e.matches;
 			t(), e.addEventListener("change", t), $ = () => e.removeEventListener("change", t);
-		}), oe(() => $?.());
-		let Fe = m(() => Q.value || I.value === 0 ? "" : N.value.carousel.slide(M.value + 1, I.value));
-		return (e, i) => (w(), g("div", {
+		}), se(() => $?.());
+		let ze = h(() => Q.value || N.value === 0 ? "" : A.value.carousel.slide(k.value + 1, N.value));
+		return (e, n) => (S(), _("div", {
 			class: "v-carousel",
 			role: "region",
-			"aria-roledescription": D(N).carousel.roleDescription,
-			"aria-label": D(xe),
-			style: ae(Oe.value),
-			"data-orientation": y.orientation,
-			"data-effect": De.value,
-			"data-controls": y.controls || void 0,
-			"data-indicators": y.indicators || void 0,
-			"data-controls-visibility": y.controlsVisibility,
-			onPointerenter: i[0] ||= (e) => X.value = !0,
-			onPointerleave: i[1] ||= (e) => X.value = !1,
-			onFocusin: i[2] ||= (e) => Z.value = D(c)(e.target),
-			onFocusout: i[3] ||= (e) => Z.value = !1
+			"aria-roledescription": T(A).carousel.roleDescription,
+			"aria-label": T(Ce),
+			style: oe(je.value),
+			"data-orientation": b.orientation,
+			"data-effect": Ae.value,
+			"data-jump": P.value,
+			"data-controls": b.controls || void 0,
+			"data-indicators": b.indicators || void 0,
+			"data-controls-visibility": b.controlsVisibility,
+			onPointerenter: n[0] ||= (e) => Y.value = !0,
+			onPointerleave: n[1] ||= (e) => Y.value = !1,
+			onFocusin: n[2] ||= (e) => X.value = T(u)(e.target),
+			onFocusout: n[3] ||= (e) => X.value = !1
 		}, [
-			_("div", he, [_("div", {
+			v("div", _e, [v("div", {
 				ref_key: "viewportEl",
-				ref: L,
+				ref: I,
 				class: "v-carousel-viewport",
 				role: "group",
 				tabindex: "0",
-				"aria-label": D(N).carousel.slides,
-				onKeydown: je,
-				onScrollend: ke
-			}, [(w(), ie(ue(Ee)))], 40, ge), E(e.$slots, "controls", {
-				previous: J,
-				next: Y,
-				atStart: G.value,
+				"aria-label": T(A).carousel.slides,
+				onKeydown: Ie,
+				onScrollend: Me
+			}, [(S(), re(de(Oe)))], 40, ve), w(e.$slots, "controls", {
+				previous: Fe,
+				next: J,
+				atStart: Pe.value,
 				atEnd: K.value,
-				index: M.value,
-				count: I.value,
-				pageCount: U.value,
-				orientation: y.orientation
-			}, () => [y.controls ? (w(), g("div", _e, [v(r, {
+				index: k.value,
+				count: N.value,
+				pageCount: W.value,
+				orientation: b.orientation
+			}, () => [b.controls ? (S(), _("div", ye, [y(i, {
 				class: "v-carousel-control",
-				label: Se.value,
+				label: we.value,
 				variant: "ghost",
 				tone: "neutral",
 				shape: "circular",
 				elevated: "",
-				disabled: G.value,
-				onClick: J
+				disabled: Pe.value,
+				onClick: Fe
 			}, {
-				default: k(() => [v(t, C(b(D(n)(we.value))), null, 16)]),
+				default: he(() => [y(r, ie(T(t)(Ee.value), { mirrored: !j.value }), null, 16, ["mirrored"])]),
 				_: 1
-			}, 8, ["label", "disabled"]), v(r, {
+			}, 8, ["label", "disabled"]), y(i, {
 				class: "v-carousel-control",
-				label: Ce.value,
+				label: Te.value,
 				variant: "ghost",
 				tone: "neutral",
 				shape: "circular",
 				elevated: "",
 				disabled: K.value,
-				onClick: Y
+				onClick: J
 			}, {
-				default: k(() => [v(t, C(b(D(n)(Te.value))), null, 16)]),
+				default: he(() => [y(r, ie(T(t)(De.value), { mirrored: !j.value }), null, 16, ["mirrored"])]),
 				_: 1
-			}, 8, ["label", "disabled"])])) : h("", !0)])]),
-			E(e.$slots, "indicators", {
-				index: M.value,
-				count: I.value,
-				pageCount: U.value,
+			}, 8, ["label", "disabled"])])) : g("", !0)])]),
+			w(e.$slots, "indicators", {
+				index: k.value,
+				count: N.value,
+				pageCount: W.value,
 				goTo: q,
-				orientation: y.orientation
-			}, () => [y.indicators ? (w(), g("div", {
+				orientation: b.orientation
+			}, () => [b.indicators ? (S(), _("div", {
 				key: 0,
 				class: "v-carousel-indicators",
 				role: "group",
-				"aria-label": D(N).carousel.indicators
-			}, [(w(!0), g(ne, null, le(U.value, (t) => (w(), g("button", {
+				"aria-label": T(A).carousel.indicators
+			}, [(S(!0), _(te, null, ue(W.value, (t) => (S(), _("button", {
 				key: t,
 				type: "button",
 				class: "v-carousel-indicator",
-				"aria-label": D(N).carousel.slide(t, I.value),
-				"aria-current": t - 1 === M.value ? "true" : void 0,
+				"aria-label": T(A).carousel.slide(t, N.value),
+				"aria-current": t - 1 === k.value ? "true" : void 0,
 				onClick: (e) => q(t - 1)
-			}, [E(e.$slots, "indicator", {
+			}, [w(e.$slots, "indicator", {
 				index: t - 1,
-				active: t - 1 === M.value
-			}, () => [i[4] ||= _("span", { class: "v-carousel-dot" }, null, -1)])], 8, ye))), 128))], 8, ve)) : h("", !0)]),
-			_("span", be, de(Fe.value), 1)
-		], 44, me));
+				active: t - 1 === k.value
+			}, () => [n[4] ||= v("span", { class: "v-carousel-dot" }, null, -1)])], 8, xe))), 128))], 8, be)) : g("", !0)]),
+			v("span", Se, fe(ze.value), 1)
+		], 44, ge));
 	}
 });
 //#endregion
-export { j as default };
+export { O as default };
 
 //# sourceMappingURL=VCarousel.vue_vue_type_script_setup_true_lang.js.map