@feugene/granularity 0.4.0 → 0.4.2

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

@@ -0,0 +1,397 @@
+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, normalizeStyle, 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 = { class: "relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20" };
+var _hoisted_9 = ["aria-label"];
+var _hoisted_10 = ["aria-label"];
+var _hoisted_11 = { class: "h-full w-full flex items-center justify-center" };
+var _hoisted_12 = ["src"];
+var _hoisted_13 = {
+	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_14 = { class: "pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6" };
+var _hoisted_15 = { class: "pointer-events-auto mx-auto w-full max-w-max" };
+var _hoisted_16 = { class: "rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1" };
+var _hoisted_17 = ["aria-label"];
+var _hoisted_18 = ["aria-label"];
+var _hoisted_19 = ["aria-label"];
+var _hoisted_20 = {
+	key: 1,
+	class: "mx-1 h-6 w-px bg-white/25",
+	"aria-hidden": "true"
+};
+var _hoisted_21 = ["aria-label"];
+var _hoisted_22 = ["aria-label"];
+var DEFAULT_Z_INDEX = 2e3;
+//#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
+		},
+		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 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 zoomValueText = computed(() => {
+			const zoomPercent = scale.value * 100;
+			if (Number.isInteger(zoomPercent)) return String(zoomPercent);
+			return zoomPercent.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, "");
+		});
+		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;
+		}
+		function setIndex(nextIndex, options) {
+			const normalizedIndex = normalizeIndex(nextIndex);
+			if (normalizedIndex === currentIndex.value) return;
+			currentIndex.value = normalizedIndex;
+			resetTransform();
+			if (options?.emitSwitch !== false) emit("switch", normalizedIndex);
+		}
+		function syncIndexFromInitial() {
+			if (!hasImages.value) {
+				currentIndex.value = 0;
+				return;
+			}
+			currentIndex.value = normalizeIndex(props.initialIndex);
+			resetTransform();
+		}
+		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 zoomIn() {
+			scale.value = Math.min(props.maxScale, Number((scale.value * props.zoomRate).toFixed(4)));
+		}
+		function zoomOut() {
+			scale.value = Math.max(props.minScale, Number((scale.value / props.zoomRate).toFixed(4)));
+		}
+		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, (isOpen) => {
+			if (!isOpen) return;
+			syncIndexFromInitial();
+		}, { 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 });
+		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", _hoisted_8, [
+									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_9)) : 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_10)) : createCommentVNode("", true),
+									createElementVNode("div", _hoisted_11, [currentUrl.value ? (openBlock(), createElementBlock("img", {
+										key: 0,
+										"data-ds-image-viewer-image": "",
+										src: currentUrl.value,
+										alt: "",
+										draggable: "false",
+										class: "max-h-full max-w-full select-none object-contain will-change-transform transition-transform duration-150 ease-out",
+										style: normalizeStyle(imageStyle.value)
+									}, null, 12, _hoisted_12)) : (openBlock(), createElementBlock("div", _hoisted_13, toDisplayString(__props.emptyText), 1))])
+								]),
+								createElementVNode("div", _hoisted_14, [createElementVNode("div", _hoisted_15, [renderSlot(_ctx.$slots, "toolbar", {
+									index: currentIndex.value,
+									displayIndex: displayIndex.value,
+									total: total.value,
+									scale: scale.value,
+									rotation: rotation.value,
+									actions: toolbarActions
+								}, () => [createElementVNode("div", _hoisted_16, [
+									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_17),
+									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_18),
+									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_19),
+									_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", {
+											index: currentIndex.value,
+											displayIndex: displayIndex.value,
+											total: total.value,
+											scale: scale.value,
+											rotation: rotation.value,
+											actions: toolbarActions
+										}),
+										_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_20)),
+									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_21),
+									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_22)
+								])])])])
+							]),
+							_: 3
+						})]),
+						_: 3
+					})])]),
+					_: 3
+				}, 8, ["style"])]),
+				_: 3
+			}, 8, ["show"])]);
+		};
+	}
+});
+//#endregion
+export { GrImageViewer_default as t };

package/dist/components/GrImageViewer/chunks/GrImageViewer-CjSnohW7.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrImageViewer-CjSnohW7.js","names":["$slots"],"sources":["../../../../src/components/GrImageViewer/GrImageViewer.vue","../../../../src/components/GrImageViewer/GrImageViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\n/**\n * Usage:\n *\n * <GrImageViewer\n *   v-model=\"open\"\n *   :url-list=\"images\"\n *   :initial-index=\"0\"\n *   show-progress\n *   hide-on-click-modal\n * />\n */\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    urlList: string[]\n    initialIndex?: number\n    zoomRate?: number\n    minScale?: number\n    maxScale?: number\n    hideOnClickModal?: boolean\n    closeOnPressEscape?: boolean\n    showProgress?: boolean\n    showZoomValue?: boolean\n    zIndex?: number\n    /** i18n: aria-label кнопки закрытия. */\n    closeLabel?: string\n    /** i18n: aria-label кнопки «предыдущее изображение». */\n    prevLabel?: string\n    /** i18n: aria-label кнопки «следующее изображение». */\n    nextLabel?: string\n    /** i18n: aria-label кнопки «увеличить». */\n    zoomInLabel?: string\n    /** i18n: aria-label кнопки «уменьшить». */\n    zoomOutLabel?: string\n    /** i18n: aria-label кнопки «сбросить масштаб». */\n    resetZoomLabel?: string\n    /** i18n: aria-label кнопки «повернуть влево». */\n    rotateLeftLabel?: string\n    /** i18n: aria-label кнопки «повернуть вправо». */\n    rotateRightLabel?: string\n    /** i18n: текст в пустом состоянии (нет изображений). */\n    emptyText?: string\n  }>(),\n  {\n    initialIndex: 0,\n    zoomRate: 1.2,\n    minScale: 0.5,\n    maxScale: 5,\n    hideOnClickModal: false,\n    closeOnPressEscape: true,\n    showProgress: false,\n    showZoomValue: true,\n    zIndex: undefined,\n    closeLabel: 'Close image viewer',\n    prevLabel: 'Previous image',\n    nextLabel: 'Next image',\n    zoomInLabel: 'Zoom in',\n    zoomOutLabel: 'Zoom out',\n    resetZoomLabel: 'Reset zoom',\n    rotateLeftLabel: 'Rotate left',\n    rotateRightLabel: 'Rotate right',\n    emptyText: 'No image',\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'close'): void\n  (e: 'switch', newIndex: number): void\n  (e: 'rotate', deg: number): void\n}>()\n\ntype GrImageViewerToolbarActions = {\n  close: () => void\n  prev: () => void\n  next: () => void\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  rotateLeft: () => void\n  rotateRight: () => void\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n\nconst open = computed(() => props.modelValue)\nconst total = computed(() => props.urlList.length)\nconst hasImages = computed(() => total.value > 0)\n\nconst currentIndex = ref(0)\nconst scale = ref(1)\nconst rotation = ref(0)\nconst offsetX = ref(0)\nconst offsetY = ref(0)\n\nconst currentUrl = computed(() => {\n  if (!hasImages.value) {\n    return undefined\n  }\n\n  return props.urlList[currentIndex.value]\n})\n\nconst displayIndex = computed(() => {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  return currentIndex.value + 1\n})\n\nconst viewerStyle = computed(() => ({\n  zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX),\n}))\n\nconst imageStyle = computed(() => ({\n  transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)`,\n}))\n\nconst zoomValueText = computed(() => {\n  const zoomPercent = scale.value * 100\n\n  if (Number.isInteger(zoomPercent)) {\n    return String(zoomPercent)\n  }\n\n  return zoomPercent.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n})\n\nfunction normalizeIndex(value: number): number {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  const normalized = Number.isFinite(value) ? Math.trunc(value) : 0\n\n  return ((normalized % total.value) + total.value) % total.value\n}\n\nfunction resetTransform(): void {\n  scale.value = 1\n  rotation.value = 0\n  offsetX.value = 0\n  offsetY.value = 0\n}\n\nfunction setIndex(nextIndex: number, options?: { emitSwitch?: boolean }): void {\n  const normalizedIndex = normalizeIndex(nextIndex)\n\n  if (normalizedIndex === currentIndex.value) {\n    return\n  }\n\n  currentIndex.value = normalizedIndex\n  resetTransform()\n\n  if (options?.emitSwitch !== false) {\n    emit('switch', normalizedIndex)\n  }\n}\n\nfunction syncIndexFromInitial(): void {\n  if (!hasImages.value) {\n    currentIndex.value = 0\n    return\n  }\n\n  currentIndex.value = normalizeIndex(props.initialIndex)\n  resetTransform()\n}\n\nfunction preloadAt(index: number): void {\n  const url = props.urlList[index]\n\n  if (!url) {\n    return\n  }\n\n  const image = new Image()\n  image.decoding = 'async'\n  image.src = url\n}\n\nfunction closeViewer(): void {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction prev(): void {\n  setIndex(currentIndex.value - 1)\n}\n\nfunction next(): void {\n  setIndex(currentIndex.value + 1)\n}\n\nfunction zoomIn(): void {\n  scale.value = Math.min(props.maxScale, Number((scale.value * props.zoomRate).toFixed(4)))\n}\n\nfunction zoomOut(): void {\n  scale.value = Math.max(props.minScale, Number((scale.value / props.zoomRate).toFixed(4)))\n}\n\nfunction rotateLeft(): void {\n  rotation.value -= 90\n  emit('rotate', rotation.value)\n}\n\nfunction rotateRight(): void {\n  rotation.value += 90\n  emit('rotate', rotation.value)\n}\n\nconst toolbarActions: GrImageViewerToolbarActions = {\n  close: closeViewer,\n  prev,\n  next,\n  zoomIn,\n  zoomOut,\n  reset: resetTransform,\n  rotateLeft,\n  rotateRight,\n}\n\nfunction onBackdropClick(): void {\n  if (!props.hideOnClickModal) {\n    return\n  }\n\n  closeViewer()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  switch (event.key) {\n    case 'Escape':\n      if (!props.closeOnPressEscape) {\n        return\n      }\n\n      event.preventDefault()\n      closeViewer()\n      return\n\n    case 'ArrowLeft':\n      event.preventDefault()\n      prev()\n      return\n\n    case 'ArrowRight':\n      event.preventDefault()\n      next()\n      return\n\n    case '+':\n    case '=':\n    case 'Add':\n      event.preventDefault()\n      zoomIn()\n      return\n\n    case '-':\n    case '_':\n    case 'Subtract':\n      event.preventDefault()\n      zoomOut()\n      return\n\n    case '0':\n      event.preventDefault()\n      resetTransform()\n      break\n\n    default:\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (!isOpen) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.initialIndex,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n)\n\nwatch(\n  () => props.urlList,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { deep: true },\n)\n\nwatch(\n  currentIndex,\n  (index) => {\n    if (!hasImages.value || total.value < 2) {\n      return\n    }\n\n    preloadAt(normalizeIndex(index - 1))\n    preloadAt(normalizeIndex(index + 1))\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"open\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        class=\"fixed inset-0\"\n        :style=\"viewerStyle\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :static=\"true\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0 overflow-hidden\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-150 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-120 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-ds-image-viewer-overlay\n              class=\"absolute inset-0 bg-black/60 backdrop-blur-sm\"\n              aria-hidden=\"true\"\n              @click=\"onBackdropClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-180 ease-out\"\n            enter-from=\"opacity-0 scale-98\"\n            enter-to=\"opacity-100 scale-100\"\n            leave=\"duration-130 ease-in\"\n            leave-from=\"opacity-100 scale-100\"\n            leave-to=\"opacity-0 scale-98\"\n          >\n            <DialogPanel\n              data-ds-image-viewer-panel\n              class=\"relative z-10 h-full w-full outline-none\"\n              tabindex=\"-1\"\n            >\n              <div class=\"pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6\">\n                <div class=\"pointer-events-auto flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      v-if=\"showProgress\"\n                      data-ds-image-viewer-progress\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm\"\n                    >\n                      {{ displayIndex }} / {{ total }}\n                    </div>\n\n                    <div\n                      v-if=\"showZoomValue\"\n                      data-ds-image-viewer-zoom-value\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm\"\n                    >\n                      {{ zoomValueText }}%\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    data-ds-image-viewer-close\n                    :aria-label=\"closeLabel\"\n                    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\"\n                    @click=\"closeViewer\"\n                  >\n                    <span aria-hidden=\"true\" class=\"text-lg leading-none\">✕</span>\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\">\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-ds-image-viewer-prev\n                  :aria-label=\"prevLabel\"\n                  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\"\n                  @click=\"prev\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">‹</span>\n                </button>\n\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-ds-image-viewer-next\n                  :aria-label=\"nextLabel\"\n                  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\"\n                  @click=\"next\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">›</span>\n                </button>\n\n                <div class=\"h-full w-full flex items-center justify-center\">\n                  <img\n                    v-if=\"currentUrl\"\n                    data-ds-image-viewer-image\n                    :src=\"currentUrl\"\n                    alt=\"\"\n                    draggable=\"false\"\n                    class=\"max-h-full max-w-full select-none object-contain will-change-transform transition-transform duration-150 ease-out\"\n                    :style=\"imageStyle\"\n                  >\n\n                  <div\n                    v-else\n                    class=\"rounded-[var(--ds-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n                  >\n                    {{ emptyText }}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6\">\n                <div class=\"pointer-events-auto mx-auto w-full max-w-max\">\n                  <slot\n                    name=\"toolbar\"\n                    :index=\"currentIndex\"\n                    :display-index=\"displayIndex\"\n                    :total=\"total\"\n                    :scale=\"scale\"\n                    :rotation=\"rotation\"\n                    :actions=\"toolbarActions\"\n                  >\n                    <div class=\"rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-out\n                        :aria-label=\"zoomOutLabel\"\n                        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\"\n                        @click=\"zoomOut\"\n                      >\n                        −\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-reset\n                        :aria-label=\"resetZoomLabel\"\n                        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\"\n                        @click=\"resetTransform\"\n                      >\n                        100%\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-in\n                        :aria-label=\"zoomInLabel\"\n                        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\"\n                        @click=\"zoomIn\"\n                      >\n                        +\n                      </button>\n\n                      <template v-if=\"$slots['toolbar-actions']\">\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                        <slot\n                          name=\"toolbar-actions\"\n                          :index=\"currentIndex\"\n                          :display-index=\"displayIndex\"\n                          :total=\"total\"\n                          :scale=\"scale\"\n                          :rotation=\"rotation\"\n                          :actions=\"toolbarActions\"\n                        />\n\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n                      </template>\n\n                      <div v-else class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-rotate-left\n                        :aria-label=\"rotateLeftLabel\"\n                        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\"\n                        @click=\"rotateLeft\"\n                      >\n                        ↺\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-rotate-right\n                        :aria-label=\"rotateRightLabel\"\n                        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\"\n                        @click=\"rotateRight\"\n                      >\n                        ↻\n                      </button>\n                    </div>\n                  </slot>\n                </div>\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>","<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\n/**\n * Usage:\n *\n * <GrImageViewer\n *   v-model=\"open\"\n *   :url-list=\"images\"\n *   :initial-index=\"0\"\n *   show-progress\n *   hide-on-click-modal\n * />\n */\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    urlList: string[]\n    initialIndex?: number\n    zoomRate?: number\n    minScale?: number\n    maxScale?: number\n    hideOnClickModal?: boolean\n    closeOnPressEscape?: boolean\n    showProgress?: boolean\n    showZoomValue?: boolean\n    zIndex?: number\n    /** i18n: aria-label кнопки закрытия. */\n    closeLabel?: string\n    /** i18n: aria-label кнопки «предыдущее изображение». */\n    prevLabel?: string\n    /** i18n: aria-label кнопки «следующее изображение». */\n    nextLabel?: string\n    /** i18n: aria-label кнопки «увеличить». */\n    zoomInLabel?: string\n    /** i18n: aria-label кнопки «уменьшить». */\n    zoomOutLabel?: string\n    /** i18n: aria-label кнопки «сбросить масштаб». */\n    resetZoomLabel?: string\n    /** i18n: aria-label кнопки «повернуть влево». */\n    rotateLeftLabel?: string\n    /** i18n: aria-label кнопки «повернуть вправо». */\n    rotateRightLabel?: string\n    /** i18n: текст в пустом состоянии (нет изображений). */\n    emptyText?: string\n  }>(),\n  {\n    initialIndex: 0,\n    zoomRate: 1.2,\n    minScale: 0.5,\n    maxScale: 5,\n    hideOnClickModal: false,\n    closeOnPressEscape: true,\n    showProgress: false,\n    showZoomValue: true,\n    zIndex: undefined,\n    closeLabel: 'Close image viewer',\n    prevLabel: 'Previous image',\n    nextLabel: 'Next image',\n    zoomInLabel: 'Zoom in',\n    zoomOutLabel: 'Zoom out',\n    resetZoomLabel: 'Reset zoom',\n    rotateLeftLabel: 'Rotate left',\n    rotateRightLabel: 'Rotate right',\n    emptyText: 'No image',\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'close'): void\n  (e: 'switch', newIndex: number): void\n  (e: 'rotate', deg: number): void\n}>()\n\ntype GrImageViewerToolbarActions = {\n  close: () => void\n  prev: () => void\n  next: () => void\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  rotateLeft: () => void\n  rotateRight: () => void\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n\nconst open = computed(() => props.modelValue)\nconst total = computed(() => props.urlList.length)\nconst hasImages = computed(() => total.value > 0)\n\nconst currentIndex = ref(0)\nconst scale = ref(1)\nconst rotation = ref(0)\nconst offsetX = ref(0)\nconst offsetY = ref(0)\n\nconst currentUrl = computed(() => {\n  if (!hasImages.value) {\n    return undefined\n  }\n\n  return props.urlList[currentIndex.value]\n})\n\nconst displayIndex = computed(() => {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  return currentIndex.value + 1\n})\n\nconst viewerStyle = computed(() => ({\n  zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX),\n}))\n\nconst imageStyle = computed(() => ({\n  transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)`,\n}))\n\nconst zoomValueText = computed(() => {\n  const zoomPercent = scale.value * 100\n\n  if (Number.isInteger(zoomPercent)) {\n    return String(zoomPercent)\n  }\n\n  return zoomPercent.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n})\n\nfunction normalizeIndex(value: number): number {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  const normalized = Number.isFinite(value) ? Math.trunc(value) : 0\n\n  return ((normalized % total.value) + total.value) % total.value\n}\n\nfunction resetTransform(): void {\n  scale.value = 1\n  rotation.value = 0\n  offsetX.value = 0\n  offsetY.value = 0\n}\n\nfunction setIndex(nextIndex: number, options?: { emitSwitch?: boolean }): void {\n  const normalizedIndex = normalizeIndex(nextIndex)\n\n  if (normalizedIndex === currentIndex.value) {\n    return\n  }\n\n  currentIndex.value = normalizedIndex\n  resetTransform()\n\n  if (options?.emitSwitch !== false) {\n    emit('switch', normalizedIndex)\n  }\n}\n\nfunction syncIndexFromInitial(): void {\n  if (!hasImages.value) {\n    currentIndex.value = 0\n    return\n  }\n\n  currentIndex.value = normalizeIndex(props.initialIndex)\n  resetTransform()\n}\n\nfunction preloadAt(index: number): void {\n  const url = props.urlList[index]\n\n  if (!url) {\n    return\n  }\n\n  const image = new Image()\n  image.decoding = 'async'\n  image.src = url\n}\n\nfunction closeViewer(): void {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction prev(): void {\n  setIndex(currentIndex.value - 1)\n}\n\nfunction next(): void {\n  setIndex(currentIndex.value + 1)\n}\n\nfunction zoomIn(): void {\n  scale.value = Math.min(props.maxScale, Number((scale.value * props.zoomRate).toFixed(4)))\n}\n\nfunction zoomOut(): void {\n  scale.value = Math.max(props.minScale, Number((scale.value / props.zoomRate).toFixed(4)))\n}\n\nfunction rotateLeft(): void {\n  rotation.value -= 90\n  emit('rotate', rotation.value)\n}\n\nfunction rotateRight(): void {\n  rotation.value += 90\n  emit('rotate', rotation.value)\n}\n\nconst toolbarActions: GrImageViewerToolbarActions = {\n  close: closeViewer,\n  prev,\n  next,\n  zoomIn,\n  zoomOut,\n  reset: resetTransform,\n  rotateLeft,\n  rotateRight,\n}\n\nfunction onBackdropClick(): void {\n  if (!props.hideOnClickModal) {\n    return\n  }\n\n  closeViewer()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  switch (event.key) {\n    case 'Escape':\n      if (!props.closeOnPressEscape) {\n        return\n      }\n\n      event.preventDefault()\n      closeViewer()\n      return\n\n    case 'ArrowLeft':\n      event.preventDefault()\n      prev()\n      return\n\n    case 'ArrowRight':\n      event.preventDefault()\n      next()\n      return\n\n    case '+':\n    case '=':\n    case 'Add':\n      event.preventDefault()\n      zoomIn()\n      return\n\n    case '-':\n    case '_':\n    case 'Subtract':\n      event.preventDefault()\n      zoomOut()\n      return\n\n    case '0':\n      event.preventDefault()\n      resetTransform()\n      break\n\n    default:\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  (isOpen) => {\n    if (!isOpen) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.initialIndex,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n)\n\nwatch(\n  () => props.urlList,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { deep: true },\n)\n\nwatch(\n  currentIndex,\n  (index) => {\n    if (!hasImages.value || total.value < 2) {\n      return\n    }\n\n    preloadAt(normalizeIndex(index - 1))\n    preloadAt(normalizeIndex(index + 1))\n  },\n  { immediate: true },\n)\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"open\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        class=\"fixed inset-0\"\n        :style=\"viewerStyle\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :static=\"true\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0 overflow-hidden\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-150 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-120 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-ds-image-viewer-overlay\n              class=\"absolute inset-0 bg-black/60 backdrop-blur-sm\"\n              aria-hidden=\"true\"\n              @click=\"onBackdropClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-180 ease-out\"\n            enter-from=\"opacity-0 scale-98\"\n            enter-to=\"opacity-100 scale-100\"\n            leave=\"duration-130 ease-in\"\n            leave-from=\"opacity-100 scale-100\"\n            leave-to=\"opacity-0 scale-98\"\n          >\n            <DialogPanel\n              data-ds-image-viewer-panel\n              class=\"relative z-10 h-full w-full outline-none\"\n              tabindex=\"-1\"\n            >\n              <div class=\"pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6\">\n                <div class=\"pointer-events-auto flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      v-if=\"showProgress\"\n                      data-ds-image-viewer-progress\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm\"\n                    >\n                      {{ displayIndex }} / {{ total }}\n                    </div>\n\n                    <div\n                      v-if=\"showZoomValue\"\n                      data-ds-image-viewer-zoom-value\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm\"\n                    >\n                      {{ zoomValueText }}%\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    data-ds-image-viewer-close\n                    :aria-label=\"closeLabel\"\n                    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\"\n                    @click=\"closeViewer\"\n                  >\n                    <span aria-hidden=\"true\" class=\"text-lg leading-none\">✕</span>\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\">\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-ds-image-viewer-prev\n                  :aria-label=\"prevLabel\"\n                  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\"\n                  @click=\"prev\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">‹</span>\n                </button>\n\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-ds-image-viewer-next\n                  :aria-label=\"nextLabel\"\n                  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\"\n                  @click=\"next\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">›</span>\n                </button>\n\n                <div class=\"h-full w-full flex items-center justify-center\">\n                  <img\n                    v-if=\"currentUrl\"\n                    data-ds-image-viewer-image\n                    :src=\"currentUrl\"\n                    alt=\"\"\n                    draggable=\"false\"\n                    class=\"max-h-full max-w-full select-none object-contain will-change-transform transition-transform duration-150 ease-out\"\n                    :style=\"imageStyle\"\n                  >\n\n                  <div\n                    v-else\n                    class=\"rounded-[var(--ds-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n                  >\n                    {{ emptyText }}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6\">\n                <div class=\"pointer-events-auto mx-auto w-full max-w-max\">\n                  <slot\n                    name=\"toolbar\"\n                    :index=\"currentIndex\"\n                    :display-index=\"displayIndex\"\n                    :total=\"total\"\n                    :scale=\"scale\"\n                    :rotation=\"rotation\"\n                    :actions=\"toolbarActions\"\n                  >\n                    <div class=\"rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-out\n                        :aria-label=\"zoomOutLabel\"\n                        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\"\n                        @click=\"zoomOut\"\n                      >\n                        −\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-reset\n                        :aria-label=\"resetZoomLabel\"\n                        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\"\n                        @click=\"resetTransform\"\n                      >\n                        100%\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-zoom-in\n                        :aria-label=\"zoomInLabel\"\n                        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\"\n                        @click=\"zoomIn\"\n                      >\n                        +\n                      </button>\n\n                      <template v-if=\"$slots['toolbar-actions']\">\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                        <slot\n                          name=\"toolbar-actions\"\n                          :index=\"currentIndex\"\n                          :display-index=\"displayIndex\"\n                          :total=\"total\"\n                          :scale=\"scale\"\n                          :rotation=\"rotation\"\n                          :actions=\"toolbarActions\"\n                        />\n\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n                      </template>\n\n                      <div v-else class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-rotate-left\n                        :aria-label=\"rotateLeftLabel\"\n                        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\"\n                        @click=\"rotateLeft\"\n                      >\n                        ↺\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-ds-image-viewer-rotate-right\n                        :aria-label=\"rotateRightLabel\"\n                        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\"\n                        @click=\"rotateRight\"\n                      >\n                        ↻\n                      </button>\n                    </div>\n                  </slot>\n                </div>\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>"],"mappings":"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"}

package/dist/components/GrImageViewer/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "./chunks/GrImageViewer-CQSNx-D7.js";
-import { t } from "../../chunks/config-FGAkxHFh.js";
-export { e as GrImageViewer, e as default, t as grImageViewerConfig };
+import { t as GrImageViewer_default } from "./chunks/GrImageViewer-CjSnohW7.js";
+import { t as grImageViewerConfig } from "../../chunks/config-BA0BWYzs.js";
+export { GrImageViewer_default as GrImageViewer, GrImageViewer_default as default, grImageViewerConfig };