@feugene/granularity 0.10.0 → 0.12.0

package/dist/components/GrImageViewer/chunks/GrImageViewer-BG40DsHa.js

@@ -1,550 +0,0 @@
-import { n as he, o as Ye, r as Ge, t as Se } from "../../../chunks/transition-mJ3PZCHH.js";
-import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, toDisplayString, unref, watch, withCtx } from "vue";
-//#region src/components/GrImageViewer/GrImageViewer.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "fixed inset-0 overflow-hidden" };
-var _hoisted_2 = { class: "pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6" };
-var _hoisted_3 = { class: "pointer-events-auto flex items-center justify-between gap-3" };
-var _hoisted_4 = { class: "flex items-center gap-2" };
-var _hoisted_5 = {
-	key: 0,
-	"data-ds-image-viewer-progress": "",
-	class: "rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm"
-};
-var _hoisted_6 = {
-	key: 1,
-	"data-ds-image-viewer-zoom-value": "",
-	class: "rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm"
-};
-var _hoisted_7 = ["aria-label"];
-var _hoisted_8 = ["aria-label"];
-var _hoisted_9 = ["aria-label"];
-var _hoisted_10 = { class: "h-full w-full flex items-center justify-center" };
-var _hoisted_11 = ["src"];
-var _hoisted_12 = {
-	key: 1,
-	class: "rounded-[var(--ds-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80"
-};
-var _hoisted_13 = { class: "pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6" };
-var _hoisted_14 = { class: "pointer-events-auto mx-auto w-full max-w-max" };
-var _hoisted_15 = { class: "rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1" };
-var _hoisted_16 = ["aria-label"];
-var _hoisted_17 = ["aria-label"];
-var _hoisted_18 = ["aria-label"];
-var _hoisted_19 = {
-	key: 1,
-	class: "mx-1 h-6 w-px bg-white/25",
-	"aria-hidden": "true"
-};
-var _hoisted_20 = ["aria-label"];
-var _hoisted_21 = ["aria-label"];
-var DEFAULT_Z_INDEX = 2e3;
-var WHEEL_ZOOM_SENSITIVITY = .0015;
-var WHEEL_IDLE_MS = 120;
-//#endregion
-//#region src/components/GrImageViewer/GrImageViewer.vue
-var GrImageViewer_default = /* @__PURE__ */ defineComponent({
-	__name: "GrImageViewer",
-	props: {
-		modelValue: { type: Boolean },
-		urlList: {},
-		initialIndex: { default: 0 },
-		zoomRate: { default: 1.2 },
-		minScale: { default: .5 },
-		maxScale: { default: 5 },
-		hideOnClickModal: {
-			type: Boolean,
-			default: false
-		},
-		closeOnPressEscape: {
-			type: Boolean,
-			default: true
-		},
-		showProgress: {
-			type: Boolean,
-			default: false
-		},
-		showZoomValue: {
-			type: Boolean,
-			default: true
-		},
-		wheelZoom: {
-			type: Boolean,
-			default: true
-		},
-		draggable: {
-			type: Boolean,
-			default: false
-		},
-		zIndex: { default: void 0 },
-		closeLabel: { default: "Close image viewer" },
-		prevLabel: { default: "Previous image" },
-		nextLabel: { default: "Next image" },
-		zoomInLabel: { default: "Zoom in" },
-		zoomOutLabel: { default: "Zoom out" },
-		resetZoomLabel: { default: "Reset zoom" },
-		rotateLeftLabel: { default: "Rotate left" },
-		rotateRightLabel: { default: "Rotate right" },
-		emptyText: { default: "No image" }
-	},
-	emits: [
-		"update:modelValue",
-		"close",
-		"switch",
-		"rotate"
-	],
-	setup(__props, { emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const TRAILING_ZERO_DECIMAL_RE = /\.0$/;
-		const open = computed(() => props.modelValue);
-		const total = computed(() => props.urlList.length);
-		const hasImages = computed(() => total.value > 0);
-		const currentIndex = ref(0);
-		const scale = ref(1);
-		const rotation = ref(0);
-		const offsetX = ref(0);
-		const offsetY = ref(0);
-		const imageEl = ref(null);
-		const isWheelZooming = ref(false);
-		let pendingWheelDelta = 0;
-		let wheelFrameId = null;
-		let wheelIdleTimer = null;
-		const isDragging = ref(false);
-		let dragStartX = 0;
-		let dragStartY = 0;
-		let dragOffsetStartX = 0;
-		let dragOffsetStartY = 0;
-		const naturalWidth = ref(0);
-		const naturalHeight = ref(0);
-		const fittedWidth = ref(0);
-		const fittedHeight = ref(0);
-		let resizeObserver = null;
-		const currentUrl = computed(() => {
-			if (!hasImages.value) return;
-			return props.urlList[currentIndex.value];
-		});
-		const displayIndex = computed(() => {
-			if (!hasImages.value) return 0;
-			return currentIndex.value + 1;
-		});
-		const viewerStyle = computed(() => ({ zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX) }));
-		const imageStyle = computed(() => ({ transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)` }));
-		const imageTransitionClass = computed(() => isWheelZooming.value || isDragging.value ? "" : "transition-transform duration-150 ease-out");
-		const imageCursorClass = computed(() => {
-			if (!props.draggable) return "";
-			return isDragging.value ? "cursor-grabbing" : "cursor-grab";
-		});
-		function formatPercent(value) {
-			if (Number.isInteger(value)) return String(value);
-			return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, "");
-		}
-		const zoomValueText = computed(() => formatPercent(scale.value * 100));
-		const renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value));
-		const renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value));
-		const realScale = computed(() => {
-			if (!naturalWidth.value) return 0;
-			return fittedWidth.value * scale.value / naturalWidth.value;
-		});
-		const realScalePercent = computed(() => formatPercent(realScale.value * 100));
-		const toolbarSlotProps = computed(() => ({
-			index: currentIndex.value,
-			displayIndex: displayIndex.value,
-			total: total.value,
-			scale: scale.value,
-			rotation: rotation.value,
-			naturalWidth: naturalWidth.value,
-			naturalHeight: naturalHeight.value,
-			renderedWidth: renderedWidth.value,
-			renderedHeight: renderedHeight.value,
-			realScale: realScale.value,
-			realScalePercent: realScalePercent.value,
-			actions: toolbarActions
-		}));
-		function normalizeIndex(value) {
-			if (!hasImages.value) return 0;
-			return ((Number.isFinite(value) ? Math.trunc(value) : 0) % total.value + total.value) % total.value;
-		}
-		function resetTransform() {
-			scale.value = 1;
-			rotation.value = 0;
-			offsetX.value = 0;
-			offsetY.value = 0;
-			isDragging.value = false;
-		}
-		function resetImageMetrics() {
-			naturalWidth.value = 0;
-			naturalHeight.value = 0;
-			fittedWidth.value = 0;
-			fittedHeight.value = 0;
-		}
-		function measureFitted() {
-			const el = imageEl.value;
-			if (!el) return;
-			fittedWidth.value = el.offsetWidth;
-			fittedHeight.value = el.offsetHeight;
-		}
-		function onImageLoad(event) {
-			const el = event.target;
-			naturalWidth.value = el.naturalWidth;
-			naturalHeight.value = el.naturalHeight;
-			measureFitted();
-		}
-		function startObservingImage() {
-			const el = imageEl.value;
-			if (!el || typeof ResizeObserver === "undefined") return;
-			if (!resizeObserver) resizeObserver = new ResizeObserver(() => measureFitted());
-			resizeObserver.observe(el);
-			if (el.complete && el.naturalWidth) {
-				naturalWidth.value = el.naturalWidth;
-				naturalHeight.value = el.naturalHeight;
-			}
-			measureFitted();
-		}
-		function stopObservingImage() {
-			resizeObserver?.disconnect();
-		}
-		function setIndex(nextIndex, options) {
-			const normalizedIndex = normalizeIndex(nextIndex);
-			if (normalizedIndex === currentIndex.value) return;
-			currentIndex.value = normalizedIndex;
-			resetTransform();
-			resetImageMetrics();
-			endWheelZoom();
-			if (options?.emitSwitch !== false) emit("switch", normalizedIndex);
-		}
-		function syncIndexFromInitial() {
-			if (!hasImages.value) {
-				currentIndex.value = 0;
-				return;
-			}
-			currentIndex.value = normalizeIndex(props.initialIndex);
-			resetTransform();
-			resetImageMetrics();
-			endWheelZoom();
-		}
-		function preloadAt(index) {
-			const url = props.urlList[index];
-			if (!url) return;
-			const image = new Image();
-			image.decoding = "async";
-			image.src = url;
-		}
-		function closeViewer() {
-			emit("update:modelValue", false);
-			emit("close");
-		}
-		function prev() {
-			setIndex(currentIndex.value - 1);
-		}
-		function next() {
-			setIndex(currentIndex.value + 1);
-		}
-		function setScale(value) {
-			const clamped = Math.min(props.maxScale, Math.max(props.minScale, value));
-			scale.value = Number(clamped.toFixed(4));
-		}
-		function zoomIn() {
-			setScale(scale.value * props.zoomRate);
-		}
-		function zoomOut() {
-			setScale(scale.value / props.zoomRate);
-		}
-		function cancelWheelFrame() {
-			if (wheelFrameId !== null) {
-				cancelAnimationFrame(wheelFrameId);
-				wheelFrameId = null;
-			}
-		}
-		function endWheelZoom() {
-			if (wheelIdleTimer !== null) {
-				clearTimeout(wheelIdleTimer);
-				wheelIdleTimer = null;
-			}
-			isWheelZooming.value = false;
-			pendingWheelDelta = 0;
-			cancelWheelFrame();
-		}
-		function flushWheelZoom() {
-			wheelFrameId = null;
-			const delta = pendingWheelDelta;
-			pendingWheelDelta = 0;
-			if (!delta) return;
-			const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY);
-			setScale(scale.value * factor);
-		}
-		function onWheel(event) {
-			if (!props.wheelZoom || !hasImages.value) return;
-			event.preventDefault();
-			isWheelZooming.value = true;
-			pendingWheelDelta += event.deltaY;
-			if (wheelFrameId === null) wheelFrameId = requestAnimationFrame(flushWheelZoom);
-			if (wheelIdleTimer !== null) clearTimeout(wheelIdleTimer);
-			wheelIdleTimer = setTimeout(() => {
-				wheelIdleTimer = null;
-				isWheelZooming.value = false;
-			}, WHEEL_IDLE_MS);
-		}
-		function onPointerDown(event) {
-			if (!props.draggable || !hasImages.value || event.button !== 0) return;
-			event.preventDefault();
-			isDragging.value = true;
-			dragStartX = event.clientX;
-			dragStartY = event.clientY;
-			dragOffsetStartX = offsetX.value;
-			dragOffsetStartY = offsetY.value;
-			event.currentTarget.setPointerCapture?.(event.pointerId);
-		}
-		function onPointerMove(event) {
-			if (!isDragging.value) return;
-			offsetX.value = dragOffsetStartX + (event.clientX - dragStartX);
-			offsetY.value = dragOffsetStartY + (event.clientY - dragStartY);
-		}
-		function onPointerUp(event) {
-			if (!isDragging.value) return;
-			isDragging.value = false;
-			event.currentTarget.releasePointerCapture?.(event.pointerId);
-		}
-		function rotateLeft() {
-			rotation.value -= 90;
-			emit("rotate", rotation.value);
-		}
-		function rotateRight() {
-			rotation.value += 90;
-			emit("rotate", rotation.value);
-		}
-		const toolbarActions = {
-			close: closeViewer,
-			prev,
-			next,
-			zoomIn,
-			zoomOut,
-			reset: resetTransform,
-			rotateLeft,
-			rotateRight
-		};
-		function onBackdropClick() {
-			if (!props.hideOnClickModal) return;
-			closeViewer();
-		}
-		function onKeydown(event) {
-			switch (event.key) {
-				case "Escape":
-					if (!props.closeOnPressEscape) return;
-					event.preventDefault();
-					closeViewer();
-					return;
-				case "ArrowLeft":
-					event.preventDefault();
-					prev();
-					return;
-				case "ArrowRight":
-					event.preventDefault();
-					next();
-					return;
-				case "+":
-				case "=":
-				case "Add":
-					event.preventDefault();
-					zoomIn();
-					return;
-				case "-":
-				case "_":
-				case "Subtract":
-					event.preventDefault();
-					zoomOut();
-					return;
-				case "0":
-					event.preventDefault();
-					resetTransform();
-					break;
-				default:
-			}
-		}
-		watch(() => props.modelValue, async (isOpen) => {
-			if (!isOpen) {
-				stopObservingImage();
-				endWheelZoom();
-				isDragging.value = false;
-				return;
-			}
-			syncIndexFromInitial();
-			await nextTick();
-			startObservingImage();
-		}, { immediate: true });
-		watch(() => props.initialIndex, () => {
-			if (!props.modelValue) return;
-			syncIndexFromInitial();
-		});
-		watch(() => props.urlList, () => {
-			if (!props.modelValue) return;
-			syncIndexFromInitial();
-		}, { deep: true });
-		watch(currentIndex, (index) => {
-			if (!hasImages.value || total.value < 2) return;
-			preloadAt(normalizeIndex(index - 1));
-			preloadAt(normalizeIndex(index + 1));
-		}, { immediate: true });
-		onBeforeUnmount(() => {
-			stopObservingImage();
-			endWheelZoom();
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(Teleport, { to: "body" }, [createVNode(unref(Se), {
-				show: open.value,
-				as: "template"
-			}, {
-				default: withCtx(() => [createVNode(unref(Ye), {
-					as: "div",
-					class: "fixed inset-0",
-					style: normalizeStyle(viewerStyle.value),
-					role: "dialog",
-					"aria-modal": "true",
-					static: true,
-					onKeydown
-				}, {
-					default: withCtx(() => [createElementVNode("div", _hoisted_1, [createVNode(unref(he), {
-						as: "template",
-						enter: "duration-150 ease-out",
-						"enter-from": "opacity-0",
-						"enter-to": "opacity-100",
-						leave: "duration-120 ease-in",
-						"leave-from": "opacity-100",
-						"leave-to": "opacity-0"
-					}, {
-						default: withCtx(() => [createElementVNode("div", {
-							"data-ds-image-viewer-overlay": "",
-							class: "absolute inset-0 bg-black/60 backdrop-blur-sm",
-							"aria-hidden": "true",
-							onClick: onBackdropClick
-						})]),
-						_: 1
-					}), createVNode(unref(he), {
-						as: "template",
-						enter: "duration-180 ease-out",
-						"enter-from": "opacity-0 scale-98",
-						"enter-to": "opacity-100 scale-100",
-						leave: "duration-130 ease-in",
-						"leave-from": "opacity-100 scale-100",
-						"leave-to": "opacity-0 scale-98"
-					}, {
-						default: withCtx(() => [createVNode(unref(Ge), {
-							"data-ds-image-viewer-panel": "",
-							class: "relative z-10 h-full w-full outline-none",
-							tabindex: "-1"
-						}, {
-							default: withCtx(() => [
-								createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [__props.showProgress ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(displayIndex.value) + " / " + toDisplayString(total.value), 1)) : createCommentVNode("", true), __props.showZoomValue ? (openBlock(), createElementBlock("div", _hoisted_6, toDisplayString(zoomValueText.value) + "% ", 1)) : createCommentVNode("", true)]), createElementVNode("button", {
-									type: "button",
-									"data-ds-image-viewer-close": "",
-									"aria-label": __props.closeLabel,
-									class: "h-11 w-11 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-									onClick: closeViewer
-								}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
-									"aria-hidden": "true",
-									class: "text-lg leading-none"
-								}, "✕", -1)])], 8, _hoisted_7)])]),
-								createElementVNode("div", {
-									class: "relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20",
-									onWheel
-								}, [
-									total.value > 1 ? (openBlock(), createElementBlock("button", {
-										key: 0,
-										type: "button",
-										"data-ds-image-viewer-prev": "",
-										"aria-label": __props.prevLabel,
-										class: "absolute left-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:left-6",
-										onClick: prev
-									}, [..._cache[1] || (_cache[1] = [createElementVNode("span", {
-										"aria-hidden": "true",
-										class: "text-xl leading-none"
-									}, "‹", -1)])], 8, _hoisted_8)) : createCommentVNode("", true),
-									total.value > 1 ? (openBlock(), createElementBlock("button", {
-										key: 1,
-										type: "button",
-										"data-ds-image-viewer-next": "",
-										"aria-label": __props.nextLabel,
-										class: "absolute right-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:right-6",
-										onClick: next
-									}, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
-										"aria-hidden": "true",
-										class: "text-xl leading-none"
-									}, "›", -1)])], 8, _hoisted_9)) : createCommentVNode("", true),
-									createElementVNode("div", _hoisted_10, [currentUrl.value ? (openBlock(), createElementBlock("img", {
-										key: 0,
-										ref_key: "imageEl",
-										ref: imageEl,
-										"data-ds-image-viewer-image": "",
-										src: currentUrl.value,
-										alt: "",
-										draggable: "false",
-										class: normalizeClass(["max-h-full max-w-full select-none object-contain will-change-transform", [imageTransitionClass.value, imageCursorClass.value]]),
-										style: normalizeStyle(imageStyle.value),
-										onLoad: onImageLoad,
-										onPointerdown: onPointerDown,
-										onPointermove: onPointerMove,
-										onPointerup: onPointerUp,
-										onPointercancel: onPointerUp
-									}, null, 46, _hoisted_11)) : (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(__props.emptyText), 1))])
-								], 32),
-								createElementVNode("div", _hoisted_13, [createElementVNode("div", _hoisted_14, [renderSlot(_ctx.$slots, "toolbar", normalizeProps(guardReactiveProps(toolbarSlotProps.value)), () => [createElementVNode("div", _hoisted_15, [
-									createElementVNode("button", {
-										type: "button",
-										"data-ds-image-viewer-zoom-out": "",
-										"aria-label": __props.zoomOutLabel,
-										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: zoomOut
-									}, " − ", 8, _hoisted_16),
-									createElementVNode("button", {
-										type: "button",
-										"data-ds-image-viewer-zoom-reset": "",
-										"aria-label": __props.resetZoomLabel,
-										class: "h-11 min-w-11 px-3 flex items-center justify-center rounded-full text-xs font-700 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: resetTransform
-									}, " 100% ", 8, _hoisted_17),
-									createElementVNode("button", {
-										type: "button",
-										"data-ds-image-viewer-zoom-in": "",
-										"aria-label": __props.zoomInLabel,
-										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: zoomIn
-									}, " + ", 8, _hoisted_18),
-									_ctx.$slots["toolbar-actions"] ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-										_cache[3] || (_cache[3] = createElementVNode("div", {
-											class: "mx-1 h-6 w-px bg-white/25",
-											"aria-hidden": "true"
-										}, null, -1)),
-										renderSlot(_ctx.$slots, "toolbar-actions", normalizeProps(guardReactiveProps(toolbarSlotProps.value))),
-										_cache[4] || (_cache[4] = createElementVNode("div", {
-											class: "mx-1 h-6 w-px bg-white/25",
-											"aria-hidden": "true"
-										}, null, -1))
-									], 64)) : (openBlock(), createElementBlock("div", _hoisted_19)),
-									createElementVNode("button", {
-										type: "button",
-										"data-ds-image-viewer-rotate-left": "",
-										"aria-label": __props.rotateLeftLabel,
-										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: rotateLeft
-									}, " ↺ ", 8, _hoisted_20),
-									createElementVNode("button", {
-										type: "button",
-										"data-ds-image-viewer-rotate-right": "",
-										"aria-label": __props.rotateRightLabel,
-										class: "h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80",
-										onClick: rotateRight
-									}, " ↻ ", 8, _hoisted_21)
-								])])])])
-							]),
-							_: 3
-						})]),
-						_: 3
-					})])]),
-					_: 3
-				}, 8, ["style"])]),
-				_: 3
-			}, 8, ["show"])]);
-		};
-	}
-});
-//#endregion
-export { GrImageViewer_default as t };