@feugene/granularity 0.49.0 → 0.50.0

package/dist/components/GrCarousel/chunks/{GrCarousel-ByuughtI.js → GrCarousel-CBj-PEPB.js}

@@ -2,13 +2,15 @@ import { i as useGrComponentProp } from "../../../chunks/context-CPMRfwVr.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
 import { t as useFocusWithin } from "../../../chunks/useFocusWithin-BwHE0rzm.js";
 import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
 import { useAnnouncer } from "../../../composables/useAnnouncer.js";
 import { t as resolveScrollOverflow } from "../../../chunks/scrollOverflow-B_kEdcol.js";
 import { useDragGesture } from "../../../composables/useDragGesture.js";
-import { a as carouselSlideBase, c as carouselToggleClass, d as carouselViewportSwipeClass, f as grCarouselControlClass, i as carouselRootBase, l as carouselTrackBase, m as grCarouselIndicatorsClass, o as carouselThumbFallbackClass, p as grCarouselIndicatorClass, r as carouselIconClass, s as carouselThumbImageClass, u as carouselViewportBase } from "../../../chunks/config-BXRmsn3t.js";
+import { _ as grCarouselControlClass, a as carouselRootBase, c as carouselThumbFallbackClass, d as carouselTrackAxis, f as carouselTrackBase, g as carouselViewportTouchAction, h as carouselViewportSwipeClass, i as carouselRootAxis, l as carouselThumbImageClass, m as carouselViewportBase, o as carouselSlideAxis, p as carouselViewportAxis, r as carouselIconClass, s as carouselSlideBase, u as carouselToggleClass, v as grCarouselIndicatorClass, y as grCarouselIndicatorsClass } from "../../../chunks/config-CPhcZzHi.js";
 import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
 import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
-import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, markRaw, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect } from "vue";
+import { t as chevron_up_default } from "../../../chunks/chevron-up-BhW6hi8L.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, inject, markRaw, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, openBlock, provide, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useSlots, watch, watchEffect, withModifiers } from "vue";
 import '../styles.css';/**
 * Доля ширины вьюпорта, начиная с которой жест засчитывается. Работает вместе
 * с {@link SWIPE_THRESHOLD_PX} по максимуму: 60px на герое шириной 1200px —
@@ -178,8 +180,9 @@ function useCarouselSwipe(options) {
 		},
 		onMove: (event) => {
 			event.preventDefault();
-			const dx = event.clientX - startX;
-			const dy = event.clientY - startY;
+			const vertical = options.orientation?.() === "vertical";
+			const dx = vertical ? event.clientY - startY : event.clientX - startX;
+			const dy = vertical ? event.clientX - startX : event.clientY - startY;
 			if (Math.abs(dx) < Math.abs(dy) * 1.5) {
 				offset.value = 0;
 				return;
@@ -188,7 +191,7 @@ function useCarouselSwipe(options) {
 			offset.value = resistOffset(dx, options.atEdge(logical));
 		},
 		onEnd: (event) => {
-			const direction = event ? resolveSwipeDirection(event.clientX - startX, event.clientY - startY, threshold) : 0;
+			const direction = event ? resolveSwipeDirection(options.orientation?.() === "vertical" ? event.clientY - startY : event.clientX - startX, options.orientation?.() === "vertical" ? event.clientX - startX : event.clientY - startY, threshold) : 0;
 			reset();
 			if (direction !== 0) options.onSwipe(physicalToLogical(direction));
 		},
@@ -269,15 +272,16 @@ var _hoisted_1$1 = [
 	"aria-labelledby"
 ];
 var _hoisted_2 = ["aria-live"];
-var _hoisted_3 = ["aria-label"];
-var _hoisted_4 = ["aria-disabled", "aria-label"];
+var _hoisted_3 = ["data-gr-carousel-vertical", "data-gr-carousel-wrapping"];
+var _hoisted_4 = ["aria-label"];
 var _hoisted_5 = ["aria-disabled", "aria-label"];
-var _hoisted_6 = [
+var _hoisted_6 = ["aria-disabled", "aria-label"];
+var _hoisted_7 = [
 	"data-variant",
 	"data-overflow",
 	"aria-label"
 ];
-var _hoisted_7 = [
+var _hoisted_8 = [
 	"id",
 	"aria-selected",
 	"aria-controls",
@@ -285,7 +289,8 @@ var _hoisted_7 = [
 	"tabindex",
 	"onClick"
 ];
-var _hoisted_8 = ["src"];
+var _hoisted_9 = ["src"];
+var WRAP_FALLBACK_MS = 600;
 //#endregion
 //#region src/components/GrCarousel/GrCarousel.vue
 var GrCarousel_default = /* @__PURE__ */ defineComponent({
@@ -301,6 +306,12 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 			type: Boolean,
 			default: true
 		},
+		orientation: { default: "horizontal" },
+		virtual: {
+			type: Boolean,
+			default: false
+		},
+		virtualOverscan: { default: 1 },
 		indicators: { default: void 0 },
 		tone: { default: void 0 },
 		activationMode: { default: void 0 },
@@ -368,8 +379,93 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 				scheduleReorder();
 			};
 		}
+		/**
+		* Потолок ожидания конца перехода ленты. `--gr-duration-base` — 240ms; запас
+		* нужен на прерванный переход и на среду, где переходов нет вовсе.
+		*/
 		const internalIndex = ref(0);
 		const currentIndex = computed(() => clampIndex(props.modelValue ?? internalIndex.value, total.value));
+		/**
+		* Замыкание кольца: `1` — идём с последнего кадра на первый, `-1` — обратно,
+		* `0` — обычный шаг.
+		*
+		* Раньше `loop` просто сбрасывал индекс, и лента **прокручивалась назад через
+		* все кадры**: на десятикадровой карусели с автопрокруткой каждый десятый шаг
+		* был длинным обратным ходом. Теперь крайний слайд временно переезжает на
+		* противоположный конец, лента доезжает до него как до соседа, и уже после
+		* перехода индекс снимается без анимации.
+		*/
+		const wrapStep = ref(0);
+		/** Сама лента: по ней делается принудительная перерисовка при снятии кольца. */
+		const trackEl = ref(null);
+		/** На время снятия индекса переход выключается — иначе снятие само поедет. */
+		const suppressTransition = ref(false);
+		let wrapFallback;
+		/** Позиция ленты: при замыкании она уезжает на один кадр за край. */
+		const trackIndex = computed(() => {
+			if (wrapStep.value === 1) return total.value;
+			if (wrapStep.value === -1) return -1;
+			return currentIndex.value;
+		});
+		/**
+		* Смещение слайда, изображающего соседа за краем. Вперёд — первый кадр уезжает
+		* за последний, назад — последний встаёт перед первым.
+		*/
+		function displacementOf(id) {
+			if (wrapStep.value === 0 || total.value < 2) return 0;
+			const index = entries.value.findIndex((entry) => entry.id === id);
+			if (wrapStep.value === 1) return index === 0 ? total.value * 100 : 0;
+			return index === total.value - 1 ? total.value * -100 : 0;
+		}
+		/**
+		* Попадает ли кадр в окно отрисовки. Окно замкнуто вместе с лентой: при `loop`
+		* соседи последнего кадра — первые, и не нарисовать их значит показать пустоту
+		* ровно в момент замыкания кольца.
+		*/
+		function shouldRender(id) {
+			if (!props.virtual) return true;
+			const count = total.value;
+			if (count === 0) return true;
+			const index = entries.value.findIndex((entry) => entry.id === id);
+			if (index < 0) return true;
+			const overscan = Math.max(1, Math.trunc(props.virtualOverscan));
+			const distance = Math.abs(index - currentIndex.value);
+			return props.loop ? Math.min(distance, count - distance) <= overscan : distance <= overscan;
+		}
+		/**
+		* Конец замыкания: лента возвращается с позиции «за краем» на настоящий индекс.
+		*
+		* Модель здесь уже давно на новом кадре — её обновил `startWrap`. Отложи мы её
+		* до этого момента, `update:modelValue` опаздывал бы на длительность перехода,
+		* а там, где переходов нет вовсе, — на страховочный таймер.
+		*/
+		function finishWrap() {
+			if (wrapStep.value === 0) return;
+			clearTimeout(wrapFallback);
+			wrapFallback = void 0;
+			suppressTransition.value = true;
+			wrapStep.value = 0;
+			nextTick().then(() => {
+				trackEl.value?.offsetHeight;
+				suppressTransition.value = false;
+			});
+		}
+		/**
+		* Замкнуть кольцо в сторону `direction`. Возвращает `false`, если шаг обычный
+		* и его надо выполнить как раньше.
+		*/
+		function startWrap(direction) {
+			if (!props.loop || total.value < 2) return false;
+			const atLast = currentIndex.value === total.value - 1;
+			const atFirst = currentIndex.value === 0;
+			if (!(direction === 1 ? atLast : atFirst)) return false;
+			finishWrap();
+			wrapStep.value = direction;
+			setIndex(direction === 1 ? 0 : total.value - 1);
+			wrapFallback = setTimeout(finishWrap, WRAP_FALLBACK_MS);
+			return true;
+		}
+		onBeforeUnmount(() => clearTimeout(wrapFallback));
 		function setIndex(next) {
 			const value = clampIndex(next, total.value);
 			if (value === currentIndex.value) return;
@@ -395,10 +491,11 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 		const swipeGesture = useCarouselSwipe({
 			disabled: () => !props.swipe || total.value <= 1,
 			viewport: () => viewportEl.value,
+			orientation: () => props.orientation,
 			atEdge: (direction) => direction === 1 ? atEnd.value : atStart.value,
 			onStart: stopAutoplay,
 			onSwipe: (direction) => {
-				commitUserNavigation(stepIndex(currentIndex.value, direction, total.value, props.loop));
+				stepBy(direction);
 			}
 		});
 		const autoplayTimer = useCarouselAutoplay({
@@ -406,11 +503,13 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 			enabled: () => playing.value,
 			paused: () => hovered.value || documentHidden.value || swipeGesture.isDragging.value,
 			advance: () => {
+				if (startWrap(1)) return;
 				const next = stepIndex(currentIndex.value, 1, total.value, props.loop);
 				if (next === currentIndex.value) {
 					userIntent.value = false;
 					return;
 				}
+				finishWrap();
 				setIndex(next);
 			}
 		});
@@ -428,8 +527,29 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 				stopAutoplay();
 				await nextTick();
 			}
+			finishWrap();
 			setIndex(next);
 		}
+		/**
+		* Шаг на соседний кадр. На краю кольца замыкание идёт через смещение крайнего
+		* слайда, а не через сброс индекса: сброс прокручивал бы ленту назад через всё.
+		*/
+		async function stepBy(delta) {
+			if (playing.value) {
+				stopAutoplay();
+				await nextTick();
+			}
+			if (startWrap(delta)) return;
+			finishWrap();
+			setIndex(stepIndex(currentIndex.value, delta, total.value, props.loop));
+		}
+		/**
+		* Переход ленты доехал — можно снимать замыкание. Слушаем только свой узел
+		* (`.self`): всплывший переход дочернего кадра снял бы кольцо раньше времени.
+		*/
+		function onTrackTransitionEnd(event) {
+			if (event.propertyName === "transform") finishWrap();
+		}
 		function toggleAutoplay() {
 			if (playing.value) {
 				stopAutoplay();
@@ -442,7 +562,7 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 			commitUserNavigation(clampIndex(index, total.value));
 		}
 		function step(delta) {
-			commitUserNavigation(stepIndex(currentIndex.value, delta, total.value, props.loop));
+			stepBy(delta);
 		}
 		const roving = useRovingFocus({
 			items: () => entries.value.map((_, index) => index),
@@ -554,7 +674,7 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 		}
 		const trackStyle = computed(() => {
 			const style = {
-				"--gr-carousel-index": String(currentIndex.value),
+				"--gr-carousel-index": String(trackIndex.value),
 				"--gr-carousel-drag": `${swipeGesture.offset.value}px`
 			};
 			if (swipeGesture.isDragging.value) style.transition = "none";
@@ -575,13 +695,22 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 			positionLabel: (id) => {
 				const index = entries.value.findIndex((entry) => entry.id === id);
 				return positionLabelAt(index >= 0 ? index : 0);
-			}
-		});
-		if (process.env.NODE_ENV !== "production") watchEffect(() => {
-			if (!props.ariaLabel && !props.ariaLabelledby) console.warn("[granularity] GrCarousel: у карусели нет доступного имени — передайте `ariaLabel` или `ariaLabelledby`. `aria-roledescription` именем не является.");
-			if (!props.arrows && resolvedIndicators.value === "none" && total.value > 1) console.warn("[granularity] GrCarousel: `arrows: false` вместе с `indicators: \"none\"` не оставляет ни одного способа сменить кадр с клавиатуры.");
-			if (isThumbnails.value && total.value > 0 && entries.value.every((entry) => !entry.hasThumbnail() && !entry.thumbnailSrc())) console.warn("[granularity] GrCarousel: `indicators=\"thumbnails\"`, но ни один слайд не дал миниатюру — задайте проп `thumbnail` или слот `#thumbnail` у `GrCarouselSlide`.");
+			},
+			displacementOf,
+			orientation: computed(() => props.orientation),
+			shouldRender
 		});
+		if (process.env.NODE_ENV !== "production") {
+			onMounted(() => {
+				if (props.orientation !== "vertical") return;
+				if ((viewportEl.value?.clientHeight ?? 0) === 0) console.warn("[granularity] GrCarousel: у вертикальной ленты нулевая высота вьюпорта — шаг считается от неё. Задайте высоту классом или стилем, иначе кадры встанут столбцом.");
+			});
+			watchEffect(() => {
+				if (!props.ariaLabel && !props.ariaLabelledby) console.warn("[granularity] GrCarousel: у карусели нет доступного имени — передайте `ariaLabel` или `ariaLabelledby`. `aria-roledescription` именем не является.");
+				if (!props.arrows && resolvedIndicators.value === "none" && total.value > 1) console.warn("[granularity] GrCarousel: `arrows: false` вместе с `indicators: \"none\"` не оставляет ни одного способа сменить кадр с клавиатуры.");
+				if (isThumbnails.value && total.value > 0 && entries.value.every((entry) => !entry.hasThumbnail() && !entry.thumbnailSrc())) console.warn("[granularity] GrCarousel: `indicators=\"thumbnails\"`, но ни один слайд не дал миниатюру — задайте проп `thumbnail` или слот `#thumbnail` у `GrCarouselSlide`.");
+			});
+		}
 		__expose({
 			/** Текущий кадр — единственный способ прочитать позицию без `v-model`. */
 			index: computed(() => currentIndex.value),
@@ -602,7 +731,7 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 				ref_key: "rootEl",
 				ref: rootEl,
 				"data-gr-carousel": "",
-				class: normalizeClass(unref(carouselRootBase)),
+				class: normalizeClass([unref(carouselRootBase), unref(carouselRootAxis)[props.orientation]]),
 				role: __props.landmark ? "region" : "group",
 				"aria-roledescription": unref(t)("gr.carousel.roledescription", "carousel"),
 				"aria-label": __props.ariaLabelledby ? void 0 : __props.ariaLabel,
@@ -615,16 +744,26 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 				ref_key: "viewportEl",
 				ref: viewportEl,
 				"data-gr-carousel-viewport": "",
-				class: normalizeClass([unref(carouselViewportBase), props.swipe ? unref(carouselViewportSwipeClass) : ""]),
+				class: normalizeClass([
+					unref(carouselViewportBase),
+					unref(carouselViewportAxis)[props.orientation],
+					unref(carouselViewportTouchAction)[props.orientation],
+					props.swipe ? unref(carouselViewportSwipeClass) : ""
+				]),
 				"aria-live": liveMode.value,
 				"aria-atomic": "true",
 				onPointerdown: _cache[2] || (_cache[2] = (...args) => unref(swipeGesture).start && unref(swipeGesture).start(...args))
 			}, [
 				createElementVNode("div", {
+					ref_key: "trackEl",
+					ref: trackEl,
 					"data-gr-carousel-track": "",
-					class: normalizeClass(unref(carouselTrackBase)),
-					style: normalizeStyle(trackStyle.value)
-				}, [renderSlot(_ctx.$slots, "default")], 6),
+					"data-gr-carousel-vertical": props.orientation === "vertical" ? "" : void 0,
+					"data-gr-carousel-wrapping": suppressTransition.value ? "" : void 0,
+					class: normalizeClass([unref(carouselTrackBase), unref(carouselTrackAxis)[props.orientation]]),
+					style: normalizeStyle(trackStyle.value),
+					onTransitionend: withModifiers(onTrackTransitionEnd, ["self"])
+				}, [renderSlot(_ctx.$slots, "default")], 46, _hoisted_3),
 				props.autoplay && total.value > 1 ? (openBlock(), createElementBlock("button", {
 					key: 0,
 					type: "button",
@@ -635,31 +774,31 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 				}, [(openBlock(), createBlock(resolveDynamicComponent(playing.value ? unref(pause_default) : unref(play_default)), {
 					class: normalizeClass(unref(carouselIconClass)),
 					"aria-hidden": "true"
-				}, null, 8, ["class"]))], 10, _hoisted_3)) : createCommentVNode("", true),
+				}, null, 8, ["class"]))], 10, _hoisted_4)) : createCommentVNode("", true),
 				showArrows.value ? (openBlock(), createElementBlock("button", {
 					key: 1,
 					type: "button",
 					"data-gr-carousel-prev": "",
-					class: normalizeClass(unref(grCarouselControlClass)("prev", atStart.value)),
+					class: normalizeClass(unref(grCarouselControlClass)("prev", atStart.value, props.orientation)),
 					"aria-disabled": atStart.value ? "true" : void 0,
 					"aria-label": __props.prevLabel ?? unref(t)("gr.carousel.previous", "Previous slide"),
 					onClick: _cache[0] || (_cache[0] = ($event) => atStart.value ? void 0 : step(-1))
-				}, [renderSlot(_ctx.$slots, "prev", { disabled: atStart.value }, () => [createVNode(unref(chevron_left_default), {
+				}, [renderSlot(_ctx.$slots, "prev", { disabled: atStart.value }, () => [(openBlock(), createBlock(resolveDynamicComponent(props.orientation === "vertical" ? unref(chevron_up_default) : unref(chevron_left_default)), {
 					class: normalizeClass(unref(carouselIconClass)),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])])], 10, _hoisted_4)) : createCommentVNode("", true),
+				}, null, 8, ["class"]))])], 10, _hoisted_5)) : createCommentVNode("", true),
 				showArrows.value ? (openBlock(), createElementBlock("button", {
 					key: 2,
 					type: "button",
 					"data-gr-carousel-next": "",
-					class: normalizeClass(unref(grCarouselControlClass)("next", atEnd.value)),
+					class: normalizeClass(unref(grCarouselControlClass)("next", atEnd.value, props.orientation)),
 					"aria-disabled": atEnd.value ? "true" : void 0,
 					"aria-label": __props.nextLabel ?? unref(t)("gr.carousel.next", "Next slide"),
 					onClick: _cache[1] || (_cache[1] = ($event) => atEnd.value ? void 0 : step(1))
-				}, [renderSlot(_ctx.$slots, "next", { disabled: atEnd.value }, () => [createVNode(unref(chevron_right_default), {
+				}, [renderSlot(_ctx.$slots, "next", { disabled: atEnd.value }, () => [(openBlock(), createBlock(resolveDynamicComponent(props.orientation === "vertical" ? unref(chevron_down_default) : unref(chevron_right_default)), {
 					class: normalizeClass(unref(carouselIconClass)),
 					"aria-hidden": "true"
-				}, null, 8, ["class"])])], 10, _hoisted_5)) : createCommentVNode("", true)
+				}, null, 8, ["class"]))])], 10, _hoisted_6)) : createCommentVNode("", true)
 			], 42, _hoisted_2), showIndicators.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
 				ref_key: "indicatorsEl",
@@ -694,11 +833,11 @@ var GrCarousel_default = /* @__PURE__ */ defineComponent({
 					loading: "lazy",
 					decoding: "async",
 					class: normalizeClass(unref(carouselThumbImageClass))
-				}, null, 10, _hoisted_8)) : isThumbnails.value ? (openBlock(), createElementBlock("span", {
+				}, null, 10, _hoisted_9)) : isThumbnails.value ? (openBlock(), createElementBlock("span", {
 					key: 2,
 					class: normalizeClass(unref(carouselThumbFallbackClass))
-				}, toDisplayString(index + 1), 3)) : createCommentVNode("", true)], 10, _hoisted_7);
-			}), 128))], 42, _hoisted_6)) : createCommentVNode("", true)], 42, _hoisted_1$1);
+				}, toDisplayString(index + 1), 3)) : createCommentVNode("", true)], 10, _hoisted_8);
+			}), 128))], 42, _hoisted_7)) : createCommentVNode("", true)], 42, _hoisted_1$1);
 		};
 	}
 });
@@ -739,6 +878,15 @@ var GrCarouselSlide_default = /* @__PURE__ */ defineComponent({
 			el: () => rootEl.value
 		}));
 		const isCurrent = computed(() => carousel.isCurrent(slideId));
+		const renders = computed(() => carousel.shouldRender(slideId));
+		/**
+		* Слайд не анимирует своё смещение намеренно: он обязан оказаться на новом
+		* месте **до** того, как поедет лента, иначе кадр гнался бы за ней.
+		*/
+		const displacementStyle = computed(() => {
+			const percent = carousel.displacementOf(slideId);
+			return percent === 0 ? void 0 : { transform: `translateX(${percent}%)` };
+		});
 		const labelledBy = computed(() => carousel.tabIdFor(slideId));
 		const accessibleName = computed(() => props.label ?? carousel.positionLabel(slideId));
 		return (_ctx, _cache) => {
@@ -747,13 +895,14 @@ var GrCarouselSlide_default = /* @__PURE__ */ defineComponent({
 				ref_key: "rootEl",
 				ref: rootEl,
 				"data-gr-carousel-slide": "",
-				class: normalizeClass(unref(carouselSlideBase)),
+				class: normalizeClass([unref(carouselSlideBase), unref(carouselSlideAxis)[unref(carousel).orientation.value]]),
 				role: unref(carousel).slideRole.value,
 				"aria-roledescription": unref(carousel).slideRoledescription.value,
 				"aria-labelledby": labelledBy.value,
 				"aria-label": labelledBy.value ? void 0 : accessibleName.value,
-				inert: isCurrent.value ? void 0 : true
-			}, [renderSlot(_ctx.$slots, "default")], 10, _hoisted_1);
+				inert: isCurrent.value ? void 0 : true,
+				style: normalizeStyle(displacementStyle.value)
+			}, [renders.value ? renderSlot(_ctx.$slots, "default", {}, void 0, void 0, 0) : createCommentVNode("", true)], 14, _hoisted_1);
 		};
 	}
 });