vectis-ui 0.8.0 → 0.9.0

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

@@ -1,22 +1,23 @@
-import { useMessages as e } from "../../i18n/state.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 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";
+import { isDev as e } from "../../utils/env.js";
+import { useMessages as t } from "../../i18n/state.js";
+import { iconProps as n } from "../VIcon/iconProps.js";
+import { cssSize as r } from "../../utils/css.js";
+import i from "../VIcon/VIcon.js";
+import a from "../VIconButton/VIconButton.js";
+import { useAriaLabel as o } from "../../composables/useAriaLabel.js";
+import { isRtl as s } from "../../utils/direction.js";
+import { clamp as c } from "../../utils/number.js";
+import { useSlotNodes as l } from "../../composables/useSlotNodes.js";
+import { useTimer as u } from "../../composables/useTimer.js";
+import { isKeyboardFocus as d } from "../../utils/focus.js";
+import { arrow_downward_alt as f } from "../VIcon/icons/arrow_downward_alt.js";
+import { arrow_left_alt as p } from "../VIcon/icons/arrow_left_alt.js";
+import { arrow_right_alt as m } 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 h, createBlock as ie, createCommentVNode as g, createElementBlock as _, createElementVNode as v, createVNode as y, defineComponent as b, mergeModels as x, mergeProps as S, nextTick as ae, normalizeStyle as oe, onBeforeUnmount as se, onMounted as C, 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, watch as O, watchEffect as pe, withCtx as k } from "vue";
 //#region src/components/VCarousel/VCarousel.vue?vue&type=script&setup=true&lang.ts
-var ge = [
+var me = [
 	"aria-roledescription",
 	"aria-label",
 	"data-orientation",
@@ -25,17 +26,14 @@ var ge = [
 	"data-controls",
 	"data-indicators",
 	"data-controls-visibility"
-], _e = { class: "v-carousel-stage" }, ve = ["aria-label"], ye = {
+], he = { class: "v-carousel-stage" }, ge = ["aria-label"], _e = {
 	key: 0,
 	class: "v-carousel-controls"
-}, be = ["aria-label"], xe = [
+}, ve = ["aria-label"], ye = [
 	"aria-label",
 	"aria-current",
 	"onClick"
-], Se = {
-	class: "v-visually-hidden",
-	role: "status"
-}, D = 2, O = /*@__PURE__*/ b({
+], be = ["aria-live"], A = 2, j = ":scope > [data-carousel-index]", M = /*@__PURE__*/ b({
 	__name: "VCarousel",
 	props: /*@__PURE__*/ x({
 		itemsPerView: { default: 1 },
@@ -74,29 +72,33 @@ var ge = [
 	}),
 	emits: ["update:modelValue"],
 	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, {
+		let x = b, M = fe(b, "modelValue"), N = t(), xe = o(() => x.label ?? N.value.carousel.label), Se = h(() => x.prevLabel ?? N.value.carousel.previous), Ce = h(() => x.nextLabel ?? N.value.carousel.next), P = h(() => x.orientation === "vertical"), we = h(() => x.prevIcon ?? (P.value ? ee : p)), Te = h(() => x.nextIcon ?? (P.value ? f : m)), F = l(), I = h(() => F.value.length), Ee = () => F.value.map((e, t) => re(e, {
 			index: t,
 			key: e.key ?? t
-		})), 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, {
+		})), De = h(() => x.peek !== void 0 && Number.parseFloat(String(x.peek)) !== 0), L = h(() => x.effect === "fade" && (x.itemsPerView > 1 || De.value) ? "slide" : x.effect);
+		ce(te, {
 			get slideRoleDescription() {
-				return A.value.carousel.slideRoleDescription;
+				return N.value.carousel.slideRoleDescription;
 			},
-			slideLabel: (e) => A.value.carousel.slide(e + 1, N.value)
+			slideLabel: (e) => N.value.carousel.slide(e + 1, I.value)
 		});
-		let P = C(), F = C(1), je = h(() => ({
+		let R = T(), z = T(1);
+		function Oe(e) {
+			e.animationName.startsWith("v-carousel-jump-") && e.target?.closest(".v-carousel") === e.currentTarget && (R.value = void 0);
+		}
+		let ke = h(() => ({
 			"--carousel-per-view": String(x.itemsPerView),
-			"--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}']`);
+			"--carousel-item-min": r(x.itemMinSize),
+			"--carousel-peek": r(x.peek),
+			"--carousel-gap": r(x.gap),
+			"--carousel-viewport-block": r(x.height),
+			"--carousel-jump-dir": String(z.value)
+		})), B = T(null), V = T(!1), Ae = () => {
+			let e = B.value;
+			e && Fe(e), V.value = !1;
+		}, H = !1;
+		function je(e, t) {
+			let n = e.querySelector(`:scope > [data-carousel-index='${t}']`);
 			if (!n) return;
 			let r = n.getBoundingClientRect(), i = e.getBoundingClientRect();
 			return {
@@ -104,16 +106,16 @@ var ge = [
 				top: r.top - i.top
 			};
 		}
-		let B = (e) => Math.abs(e.left) < 1 && Math.abs(e.top) < 1;
+		let Me = (e) => Math.abs(e.left) < 1 && Math.abs(e.top) < 1;
 		function Ne(e, t = e) {
-			let n = I.value;
+			let n = B.value;
 			if (!n) return;
-			let r = z(n, e);
+			let r = je(n, e);
 			if (!r) return;
 			let { left: i, top: a } = r;
-			if (B(r)) return;
+			if (Me(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 ? {
+			o && (z.value = e > t ? 1 : -1, R.value = R.value === "a" ? "b" : "a"), V.value = !0, n.scrollBy?.(o ? {
 				left: i,
 				top: a,
 				behavior: "instant"
@@ -121,30 +123,30 @@ var ge = [
 				left: i,
 				top: a
 			}), o && requestAnimationFrame(() => {
-				let t = z(n, e);
-				t && !B(t) && n.scrollBy?.({
+				let t = je(n, e);
+				t && !Me(t) && n.scrollBy?.({
 					...t,
 					behavior: "instant"
 				});
 			});
 		}
-		E(k, (e, t) => {
-			R || ae(() => Ne(e, t));
+		O(M, (e, t) => {
+			H || ae(() => Ne(e, t));
 		});
-		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();
+		let U = T(), Pe = T();
+		function Fe(e) {
+			let t = e.querySelectorAll(j), 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 a = e.getBoundingClientRect(), o = P.value, s = Math.abs(o ? r.top - n.top : r.left - n.left);
+			if (s <= 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 + A) / s), f = u - d * s, p = d + 1 + +(f > A), m = l >= u - A ? p - 1 : Math.round(l / s);
+			Pe.value = p, U.value = c(m, 0, W.value - 1);
 		}
-		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) => {
+		let W = h(() => I.value === 0 ? 0 : c(Pe.value ?? I.value - x.itemsPerView + 1, 1, I.value)), Ie = h(() => JSON.stringify(F.value.map((e, t) => String(e.key ?? t))));
+		C(() => O([B, Ie], ([e], t, n) => {
 			if (!e || typeof IntersectionObserver > "u") return;
 			let r = new IntersectionObserver(() => {
-				U(e), V.value === k.value && (L.value = !1);
+				Fe(e), U.value === M.value && (V.value = !1);
 			}, {
 				root: e,
 				threshold: [
@@ -155,26 +157,34 @@ var ge = [
 					1
 				]
 			});
-			for (let t of e.querySelectorAll("[data-carousel-index]")) r.observe(t);
+			for (let t of e.querySelectorAll(j)) r.observe(t);
 			n(() => r.disconnect());
-		}, { 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));
+		}, {
+			flush: "post",
+			immediate: !0
+		})), O([U, V], () => {
+			let e = U.value;
+			V.value || e === void 0 || e === M.value || (H = !0, M.value = e, ae(() => H = !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 G = h(() => x.loop && W.value > 1), K = h(() => !G.value && M.value <= 0), q = h(() => !G.value && M.value >= W.value - 1);
+		function J(e) {
 			let t = W.value;
-			k.value = G.value ? (e % t + t) % t : s(e, 0, t - 1);
+			M.value = G.value ? (e % t + t) % t : c(e, 0, t - 1);
 		}
-		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;
+		C(() => O([M, W], ([e, t]) => {
+			if (t === 0) return;
+			let n = Number.isFinite(e) ? c(Math.round(e), 0, t - 1) : 0;
+			n !== e && (M.value = n);
+		}, { immediate: !0 }));
+		let Le = () => J(M.value - 1), Y = () => J(M.value + 1);
+		function Re(e) {
+			let t = B.value;
+			if (!t || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || e.target !== e.currentTarget || e.defaultPrevented) return;
 			if (e.key === "Home" || e.key === "End") {
-				e.preventDefault(), q(e.key === "Home" ? 0 : W.value - 1);
+				e.preventDefault(), J(e.key === "Home" ? 0 : W.value - 1);
 				return;
 			}
-			let n = (j.value ? {
+			let n = (P.value ? {
 				ArrowUp: -1,
 				ArrowDown: 1
 			} : {
@@ -183,108 +193,127 @@ var ge = [
 			})[e.key];
 			if (n === void 0) return;
 			e.preventDefault();
-			let r = !j.value && o(t);
-			q(k.value + (r ? -n : n));
+			let r = !P.value && s(t);
+			J(M.value + (r ? -n : n));
 		}
-		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 });
+		C(() => O([K, q], ([e, t], [n, r]) => {
+			let i = B.value, a = i?.parentElement;
+			if (!i || !a) return;
+			let [o, s] = a.querySelectorAll(":scope > .v-carousel-controls > .v-carousel-control"), c = document.activeElement;
+			e && !n && c === o ? (t ? i : s)?.focus() : t && !r && c === s && (e ? i : o)?.focus();
+		}));
+		let { start: ze, cancel: Be } = u(), X = T(!1), Z = T(!1), Ve = T(!1), Q = h(() => x.autoplay > 0 && !X.value && !Z.value && !Ve.value && !q.value);
+		C(() => O([Q, M], () => {
+			Be(), Q.value && ze(Y, x.autoplay);
+		}, { immediate: !0 }));
 		let $;
-		ce(() => {
+		C(() => {
 			let e = window.matchMedia?.("(prefers-reduced-motion: reduce)");
 			if (!e) return;
-			let t = () => Z.value = e.matches;
+			let t = () => Ve.value = e.matches;
 			t(), e.addEventListener("change", t), $ = () => e.removeEventListener("change", t);
 		}), se(() => $?.());
-		let ze = h(() => Q.value || N.value === 0 ? "" : A.value.carousel.slide(k.value + 1, N.value));
-		return (e, n) => (S(), _("div", {
+		let He = h(() => I.value === 0 ? "" : N.value.carousel.slide(M.value + 1, I.value));
+		if (e) {
+			let e = /* @__PURE__ */ new Set(), t = (t, n) => {
+				e.has(t) || (e.add(t), console.warn(n));
+			};
+			pe(() => {
+				x.effect !== L.value && t("fade", x.itemsPerView > 1 ? "[VCarousel] `fade` needs one item per view: over a single view timeline every slide is counter-translated onto the same spot, so they would pile up. Downgraded to `slide`." : "[VCarousel] `fade` and `peek` are mutually exclusive: the counter-translate parks every slide over the viewport, so the peeked strip is covered. Downgraded to `slide`."), x.loop && x.autoplay > 0 && t("loop", "[VCarousel] `loop` with `autoplay` rotates for as long as the page is open, so WCAG 2.2.2 asks for a way to stop it. Bind `autoplay` to 0 from a control of your own."), P.value && x.height === void 0 && t("height", "[VCarousel] a vertical carousel needs a `height`: a percentage flex-basis has no definite reference on the block axis. Falling back to --vectis-control-size-carousel-block."), (!Number.isInteger(x.itemsPerView) || x.itemsPerView < 1) && t("itemsPerView", `[VCarousel] \`itemsPerView\` must be an integer ≥ 1, got ${x.itemsPerView}.`);
+			});
+		}
+		return (e, t) => (w(), _("div", {
 			class: "v-carousel",
 			role: "region",
-			"aria-roledescription": T(A).carousel.roleDescription,
-			"aria-label": T(Ce),
-			style: oe(je.value),
+			"aria-roledescription": D(N).carousel.roleDescription,
+			"aria-label": D(xe),
+			style: oe(ke.value),
 			"data-orientation": b.orientation,
-			"data-effect": Ae.value,
-			"data-jump": P.value,
+			"data-effect": L.value,
+			"data-jump": R.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
+			onPointerenter: t[0] ||= (e) => X.value = !0,
+			onPointerleave: t[1] ||= (e) => X.value = !1,
+			onFocusin: t[2] ||= (e) => Z.value = D(d)(e.target),
+			onFocusout: t[3] ||= (e) => Z.value = !1,
+			onAnimationend: Oe
 		}, [
-			v("div", _e, [v("div", {
+			v("div", he, [v("div", {
 				ref_key: "viewportEl",
-				ref: I,
+				ref: B,
 				class: "v-carousel-viewport",
 				role: "group",
 				tabindex: "0",
-				"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: k.value,
-				count: N.value,
+				"aria-label": D(N).carousel.slides,
+				onKeydown: Re,
+				onScrollend: Ae
+			}, [(w(), ie(ue(Ee)))], 40, ge), E(e.$slots, "controls", {
+				previous: Le,
+				next: Y,
+				atStart: K.value,
+				atEnd: q.value,
+				index: M.value,
+				count: I.value,
 				pageCount: W.value,
 				orientation: b.orientation
-			}, () => [b.controls ? (S(), _("div", ye, [y(i, {
+			}, () => [b.controls ? (w(), _("div", _e, [y(a, {
 				class: "v-carousel-control",
-				label: we.value,
+				label: Se.value,
 				variant: "ghost",
 				tone: "neutral",
 				shape: "circular",
 				elevated: "",
-				disabled: Pe.value,
-				onClick: Fe
+				disabled: K.value,
+				onClick: Le
 			}, {
-				default: he(() => [y(r, ie(T(t)(Ee.value), { mirrored: !j.value }), null, 16, ["mirrored"])]),
+				default: k(() => [y(i, S(D(n)(we.value), { mirrored: !P.value }), null, 16, ["mirrored"])]),
 				_: 1
-			}, 8, ["label", "disabled"]), y(i, {
+			}, 8, ["label", "disabled"]), y(a, {
 				class: "v-carousel-control",
-				label: Te.value,
+				label: Ce.value,
 				variant: "ghost",
 				tone: "neutral",
 				shape: "circular",
 				elevated: "",
-				disabled: K.value,
-				onClick: J
+				disabled: q.value,
+				onClick: Y
 			}, {
-				default: he(() => [y(r, ie(T(t)(De.value), { mirrored: !j.value }), null, 16, ["mirrored"])]),
+				default: k(() => [y(i, S(D(n)(Te.value), { mirrored: !P.value }), null, 16, ["mirrored"])]),
 				_: 1
 			}, 8, ["label", "disabled"])])) : g("", !0)])]),
-			w(e.$slots, "indicators", {
-				index: k.value,
-				count: N.value,
+			E(e.$slots, "indicators", {
+				index: M.value,
+				count: I.value,
 				pageCount: W.value,
-				goTo: q,
+				goTo: J,
 				orientation: b.orientation
-			}, () => [b.indicators ? (S(), _("div", {
+			}, () => [b.indicators ? (w(), _("div", {
 				key: 0,
 				class: "v-carousel-indicators",
 				role: "group",
-				"aria-label": T(A).carousel.indicators
-			}, [(S(!0), _(te, null, ue(W.value, (t) => (S(), _("button", {
-				key: t,
+				"aria-label": D(N).carousel.indicators
+			}, [(w(!0), _(ne, null, le(W.value, (n) => (w(), _("button", {
+				key: n,
 				type: "button",
 				class: "v-carousel-indicator",
-				"aria-label": T(A).carousel.slide(t, N.value),
-				"aria-current": t - 1 === k.value ? "true" : void 0,
-				onClick: (e) => q(t - 1)
-			}, [w(e.$slots, "indicator", {
-				index: t - 1,
-				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));
+				"aria-label": D(N).carousel.slide(n, I.value),
+				"aria-current": n - 1 === M.value ? "true" : void 0,
+				onClick: (e) => J(n - 1)
+			}, [E(e.$slots, "indicator", {
+				index: n - 1,
+				active: n - 1 === M.value
+			}, () => [t[4] ||= v("span", { class: "v-carousel-dot" }, null, -1)])], 8, ye))), 128))], 8, ve)) : g("", !0)]),
+			v("span", {
+				class: "v-visually-hidden",
+				role: "status",
+				"aria-live": Q.value ? "off" : "polite"
+			}, de(He.value), 9, be)
+		], 44, me));
 	}
 });
 //#endregion
-export { O as default };
+export { M as default };
 
 //# sourceMappingURL=VCarousel.vue_vue_type_script_setup_true_lang.js.map