npm - @feugene/granularity - Versions diffs - 0.10.0 → 0.11.0 - Mend

@feugene/granularity 0.10.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (442) hide show

package/dist/components/GrImageViewer/chunks/{GrImageViewer-BG40DsHa.js → GrImageViewer-OCUIrNh2.js} RENAMED Viewed

@@ -1,4 +1,5 @@
-import { n as he, o as Ye, r as Ge, t as Se } from "../../../chunks/transition-mJ3PZCHH.js";
+import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
+import { n as he, o as Ye, r as Ge, t as Se } from "../../../chunks/transition-TLFw4KBn.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" };
@@ -7,12 +8,12 @@ var _hoisted_3 = { class: "pointer-events-auto flex items-center justify-between
 var _hoisted_4 = { class: "flex items-center gap-2" };
 var _hoisted_5 = {
 	key: 0,
-	"data-ds-image-viewer-progress": "",
+	"data-gr-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": "",
+	"data-gr-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"];
@@ -22,7 +23,7 @@ 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"
+	class: "rounded-[var(--gr-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" };
@@ -76,15 +77,15 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 			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" }
+		closeLabel: { default: void 0 },
+		prevLabel: { default: void 0 },
+		nextLabel: { default: void 0 },
+		zoomInLabel: { default: void 0 },
+		zoomOutLabel: { default: void 0 },
+		resetZoomLabel: { default: void 0 },
+		rotateLeftLabel: { default: void 0 },
+		rotateRightLabel: { default: void 0 },
+		emptyText: { default: void 0 }
 	},
 	emits: [
 		"update:modelValue",
@@ -94,6 +95,16 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
+		const { t } = useGranularityTranslations();
+		const resolvedCloseLabel = computed(() => props.closeLabel ?? t("gr.imageViewer.close", "Close image viewer"));
+		const resolvedPrevLabel = computed(() => props.prevLabel ?? t("gr.imageViewer.prev", "Previous image"));
+		const resolvedNextLabel = computed(() => props.nextLabel ?? t("gr.imageViewer.next", "Next image"));
+		const resolvedZoomInLabel = computed(() => props.zoomInLabel ?? t("gr.imageViewer.zoomIn", "Zoom in"));
+		const resolvedZoomOutLabel = computed(() => props.zoomOutLabel ?? t("gr.imageViewer.zoomOut", "Zoom out"));
+		const resolvedResetZoomLabel = computed(() => props.resetZoomLabel ?? t("gr.imageViewer.resetZoom", "Reset zoom"));
+		const resolvedRotateLeftLabel = computed(() => props.rotateLeftLabel ?? t("gr.imageViewer.rotateLeft", "Rotate left"));
+		const resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t("gr.imageViewer.rotateRight", "Rotate right"));
+		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.imageViewer.empty", "No image"));
 		const emit = __emit;
 		const TRAILING_ZERO_DECIMAL_RE = /\.0$/;
 		const open = computed(() => props.modelValue);
@@ -412,7 +423,7 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 						"leave-to": "opacity-0"
 					}, {
 						default: withCtx(() => [createElementVNode("div", {
-							"data-ds-image-viewer-overlay": "",
+							"data-gr-image-viewer-overlay": "",
 							class: "absolute inset-0 bg-black/60 backdrop-blur-sm",
 							"aria-hidden": "true",
 							onClick: onBackdropClick
@@ -428,15 +439,15 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 						"leave-to": "opacity-0 scale-98"
 					}, {
 						default: withCtx(() => [createVNode(unref(Ge), {
-							"data-ds-image-viewer-panel": "",
+							"data-gr-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,
+									"data-gr-image-viewer-close": "",
+									"aria-label": resolvedCloseLabel.value,
 									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", {
@@ -450,8 +461,8 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 									total.value > 1 ? (openBlock(), createElementBlock("button", {
 										key: 0,
 										type: "button",
-										"data-ds-image-viewer-prev": "",
-										"aria-label": __props.prevLabel,
+										"data-gr-image-viewer-prev": "",
+										"aria-label": resolvedPrevLabel.value,
 										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", {
@@ -461,8 +472,8 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 									total.value > 1 ? (openBlock(), createElementBlock("button", {
 										key: 1,
 										type: "button",
-										"data-ds-image-viewer-next": "",
-										"aria-label": __props.nextLabel,
+										"data-gr-image-viewer-next": "",
+										"aria-label": resolvedNextLabel.value,
 										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", {
@@ -473,7 +484,7 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										key: 0,
 										ref_key: "imageEl",
 										ref: imageEl,
-										"data-ds-image-viewer-image": "",
+										"data-gr-image-viewer-image": "",
 										src: currentUrl.value,
 										alt: "",
 										draggable: "false",
@@ -484,27 +495,27 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 										onPointermove: onPointerMove,
 										onPointerup: onPointerUp,
 										onPointercancel: onPointerUp
-									}, null, 46, _hoisted_11)) : (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(__props.emptyText), 1))])
+									}, null, 46, _hoisted_11)) : (openBlock(), createElementBlock("div", _hoisted_12, toDisplayString(resolvedEmptyText.value), 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,
+										"data-gr-image-viewer-zoom-out": "",
+										"aria-label": resolvedZoomOutLabel.value,
 										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,
+										"data-gr-image-viewer-zoom-reset": "",
+										"aria-label": resolvedResetZoomLabel.value,
 										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,
+										"data-gr-image-viewer-zoom-in": "",
+										"aria-label": resolvedZoomInLabel.value,
 										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),
@@ -521,15 +532,15 @@ var GrImageViewer_default = /* @__PURE__ */ defineComponent({
 									], 64)) : (openBlock(), createElementBlock("div", _hoisted_19)),
 									createElementVNode("button", {
 										type: "button",
-										"data-ds-image-viewer-rotate-left": "",
-										"aria-label": __props.rotateLeftLabel,
+										"data-gr-image-viewer-rotate-left": "",
+										"aria-label": resolvedRotateLeftLabel.value,
 										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,
+										"data-gr-image-viewer-rotate-right": "",
+										"aria-label": resolvedRotateRightLabel.value,
 										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)

package/dist/components/GrImageViewer/chunks/GrImageViewer-OCUIrNh2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GrImageViewer-OCUIrNh2.js","names":["$slots"],"sources":["../../../../src/components/GrImageViewer/GrImageViewer.vue","../../../../src/components/GrImageViewer/GrImageViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\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 /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\n wheelZoom?: boolean\n /** Включает перетаскивание (pan) картинки мышью. При наведении курсор «рука». По умолчанию выключено. */\n draggable?: 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 wheelZoom: true,\n draggable: false,\n zIndex: undefined,\n closeLabel: undefined,\n prevLabel: undefined,\n nextLabel: undefined,\n zoomInLabel: undefined,\n zoomOutLabel: undefined,\n resetZoomLabel: undefined,\n rotateLeftLabel: undefined,\n rotateRightLabel: undefined,\n emptyText: undefined,\n },\n)\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.imageViewer.close', 'Close image viewer'))\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? t('gr.imageViewer.prev', 'Previous image'))\nconst resolvedNextLabel = computed(() => props.nextLabel ?? t('gr.imageViewer.next', 'Next image'))\nconst resolvedZoomInLabel = computed(() => props.zoomInLabel ?? t('gr.imageViewer.zoomIn', 'Zoom in'))\nconst resolvedZoomOutLabel = computed(() => props.zoomOutLabel ?? t('gr.imageViewer.zoomOut', 'Zoom out'))\nconst resolvedResetZoomLabel = computed(() => props.resetZoomLabel ?? t('gr.imageViewer.resetZoom', 'Reset zoom'))\nconst resolvedRotateLeftLabel = computed(() => props.rotateLeftLabel ?? t('gr.imageViewer.rotateLeft', 'Rotate left'))\nconst resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t('gr.imageViewer.rotateRight', 'Rotate right'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.imageViewer.empty', 'No image'))\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\ntype GrImageViewerSlotProps = {\n index: number\n displayIndex: number\n total: number\n scale: number\n rotation: number\n /** Натуральный (исходный) размер картинки, px. 0 пока изображение не загружено. */\n naturalWidth: number\n naturalHeight: number\n /** Фактический размер изображения на экране c учётом scale, px (footprint вдоль осей картинки). */\n renderedWidth: number\n renderedHeight: number\n /** Реальный масштаб относительно натурального размера (доля): renderedWidth / naturalWidth. */\n realScale: number\n /** Реальный масштаб в процентах, отформатированный (например `67`). */\n realScalePercent: string\n actions: GrImageViewerToolbarActions\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n// Чувствительность масштабирования колесом/трекпадом: чем больше — тем резче реакция.\nconst WHEEL_ZOOM_SENSITIVITY = 0.0015\n// Сколько ms простоя после последнего wheel-события считаем «зум завершён»\n// (после этого возвращаем плавный CSS-переход).\nconst WHEEL_IDLE_MS = 120\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 imageEl = ref<HTMLImageElement | null>(null)\n\n// Флаг активного зума колесом/трекпадом. Пока true — CSS-переход отключён,\n// чтобы непрерывное масштабирование не «наслаивалось» и не дёргалось.\nconst isWheelZooming = ref(false)\n\n// Накопленный deltaY между кадрами и id запланированного rAF.\nlet pendingWheelDelta = 0\nlet wheelFrameId: number | null = null\nlet wheelIdleTimer: ReturnType<typeof setTimeout> | null = null\n\n// Флаг активного перетаскивания (pan) картинки мышью.\nconst isDragging = ref(false)\n\n// Координаты указателя и offset на момент начала перетаскивания.\nlet dragStartX = 0\nlet dragStartY = 0\nlet dragOffsetStartX = 0\nlet dragOffsetStartY = 0\n\n// Натуральный (исходный) размер картинки, читается из `<img>` при загрузке.\nconst naturalWidth = ref(0)\nconst naturalHeight = ref(0)\n\n// Layout-размер вписанного (`object-contain`) изображения без учёта CSS transform/scale.\nconst fittedWidth = ref(0)\nconst fittedHeight = ref(0)\n\nlet resizeObserver: ResizeObserver | null = null\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\n// Плавный CSS-переход transform только для дискретных зумов (кнопки/клавиши).\n// При непрерывном зуме колесом и при перетаскивании переход отключаем —\n// иначе картинка «дёргается»/наслаивается и тянется за курсором с задержкой.\nconst imageTransitionClass = computed(() =>\n isWheelZooming.value || isDragging.value ? '' : 'transition-transform duration-150 ease-out',\n)\n\n// Курсор «рука» при наведении (grab) и при зажатии (grabbing), только если включён drag.\nconst imageCursorClass = computed(() => {\n if (!props.draggable) {\n return ''\n }\n\n return isDragging.value ? 'cursor-grabbing' : 'cursor-grab'\n})\n\nfunction formatPercent(value: number): string {\n if (Number.isInteger(value)) {\n return String(value)\n }\n\n return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n}\n\nconst zoomValueText = computed(() => formatPercent(scale.value * 100))\n\n// Фактический размер изображения на экране вдоль его осей (footprint), c учётом scale.\nconst renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value))\nconst renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value))\n\n// Реальный масштаб относительно натурального размера (доля). Не зависит от rotation,\n// так как scale равномерный по осям картинки.\nconst realScale = computed(() => {\n if (!naturalWidth.value) {\n return 0\n }\n\n return (fittedWidth.value * scale.value) / naturalWidth.value\n})\n\nconst realScalePercent = computed(() => formatPercent(realScale.value * 100))\n\nconst toolbarSlotProps = computed<GrImageViewerSlotProps>(() => ({\n index: currentIndex.value,\n displayIndex: displayIndex.value,\n total: total.value,\n scale: scale.value,\n rotation: rotation.value,\n naturalWidth: naturalWidth.value,\n naturalHeight: naturalHeight.value,\n renderedWidth: renderedWidth.value,\n renderedHeight: renderedHeight.value,\n realScale: realScale.value,\n realScalePercent: realScalePercent.value,\n actions: toolbarActions,\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 isDragging.value = false\n}\n\nfunction resetImageMetrics(): void {\n naturalWidth.value = 0\n naturalHeight.value = 0\n fittedWidth.value = 0\n fittedHeight.value = 0\n}\n\nfunction measureFitted(): void {\n const el = imageEl.value\n\n if (!el) {\n return\n }\n\n // offsetWidth/Height — layout-размер вписанного изображения, без учёта CSS transform.\n fittedWidth.value = el.offsetWidth\n fittedHeight.value = el.offsetHeight\n}\n\nfunction onImageLoad(event: Event): void {\n const el = event.target as HTMLImageElement\n\n naturalWidth.value = el.naturalWidth\n naturalHeight.value = el.naturalHeight\n measureFitted()\n}\n\nfunction startObservingImage(): void {\n const el = imageEl.value\n\n if (!el || typeof ResizeObserver === 'undefined') {\n return\n }\n\n if (!resizeObserver) {\n resizeObserver = new ResizeObserver(() => measureFitted())\n }\n\n resizeObserver.observe(el)\n\n // Если картинка уже в кэше и `load` не сработал — считаем метрики сразу.\n if (el.complete && el.naturalWidth) {\n naturalWidth.value = el.naturalWidth\n naturalHeight.value = el.naturalHeight\n }\n\n measureFitted()\n}\n\nfunction stopObservingImage(): void {\n resizeObserver?.disconnect()\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 resetImageMetrics()\n endWheelZoom()\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 resetImageMetrics()\n endWheelZoom()\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 setScale(value: number): void {\n const clamped = Math.min(props.maxScale, Math.max(props.minScale, value))\n\n scale.value = Number(clamped.toFixed(4))\n}\n\nfunction zoomIn(): void {\n setScale(scale.value * props.zoomRate)\n}\n\nfunction zoomOut(): void {\n setScale(scale.value / props.zoomRate)\n}\n\nfunction cancelWheelFrame(): void {\n if (wheelFrameId !== null) {\n cancelAnimationFrame(wheelFrameId)\n wheelFrameId = null\n }\n}\n\nfunction endWheelZoom(): void {\n if (wheelIdleTimer !== null) {\n clearTimeout(wheelIdleTimer)\n wheelIdleTimer = null\n }\n\n isWheelZooming.value = false\n pendingWheelDelta = 0\n cancelWheelFrame()\n}\n\n// Применяем накопленный за кадр deltaY одним обновлением scale — так рендер\n// происходит не чаще одного раза в кадр (без «дёрганья» от частых обновлений).\nfunction flushWheelZoom(): void {\n wheelFrameId = null\n\n const delta = pendingWheelDelta\n pendingWheelDelta = 0\n\n if (!delta) {\n return\n }\n\n // Экспоненциальный шаг — плавно и одинаково ощущается и для колеса, и для трекпада.\n // delta < 0 (от себя / scroll up) — приближение, delta > 0 — отдаление.\n const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY)\n\n setScale(scale.value * factor)\n}\n\nfunction onWheel(event: WheelEvent): void {\n if (!props.wheelZoom || !hasImages.value) {\n return\n }\n\n // Не даём странице/оверлею проскроллиться — колесо отдаём под зум.\n event.preventDefault()\n\n // Во время непрерывного зума отключаем CSS-переход: плавность даёт само\n // покадровое обновление, а transition на каждом микрошаге вызывает лаг/наслоение.\n isWheelZooming.value = true\n\n pendingWheelDelta += event.deltaY\n\n if (wheelFrameId === null) {\n wheelFrameId = requestAnimationFrame(flushWheelZoom)\n }\n\n if (wheelIdleTimer !== null) {\n clearTimeout(wheelIdleTimer)\n }\n\n // По завершении жеста возвращаем плавный переход для последующих дискретных зумов.\n wheelIdleTimer = setTimeout(() => {\n wheelIdleTimer = null\n isWheelZooming.value = false\n }, WHEEL_IDLE_MS)\n}\n\nfunction onPointerDown(event: PointerEvent): void {\n // Тянем только основной кнопкой и только если drag включён и есть картинка.\n if (!props.draggable || !hasImages.value || event.button !== 0) {\n return\n }\n\n event.preventDefault()\n\n isDragging.value = true\n dragStartX = event.clientX\n dragStartY = event.clientY\n dragOffsetStartX = offsetX.value\n dragOffsetStartY = offsetY.value\n\n // Захватываем указатель, чтобы движение/отпускание ловились даже за пределами картинки.\n ;(event.currentTarget as Element).setPointerCapture?.(event.pointerId)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n if (!isDragging.value) {\n return\n }\n\n offsetX.value = dragOffsetStartX + (event.clientX - dragStartX)\n offsetY.value = dragOffsetStartY + (event.clientY - dragStartY)\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n if (!isDragging.value) {\n return\n }\n\n isDragging.value = false\n ;(event.currentTarget as Element).releasePointerCapture?.(event.pointerId)\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 async (isOpen) => {\n if (!isOpen) {\n stopObservingImage()\n endWheelZoom()\n isDragging.value = false\n return\n }\n\n syncIndexFromInitial()\n await nextTick()\n startObservingImage()\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\nonBeforeUnmount(() => {\n stopObservingImage()\n endWheelZoom()\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-gr-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-gr-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-gr-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-gr-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-gr-image-viewer-close\n :aria-label=\"resolvedCloseLabel\"\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\n class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\"\n @wheel=\"onWheel\"\n >\n <button\n v-if=\"total > 1\"\n type=\"button\"\n data-gr-image-viewer-prev\n :aria-label=\"resolvedPrevLabel\"\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-gr-image-viewer-next\n :aria-label=\"resolvedNextLabel\"\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 ref=\"imageEl\"\n data-gr-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\"\n :class=\"[imageTransitionClass, imageCursorClass]\"\n :style=\"imageStyle\"\n @load=\"onImageLoad\"\n @pointerdown=\"onPointerDown\"\n @pointermove=\"onPointerMove\"\n @pointerup=\"onPointerUp\"\n @pointercancel=\"onPointerUp\"\n >\n\n <div\n v-else\n class=\"rounded-[var(--gr-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n >\n {{ resolvedEmptyText }}\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 v-bind=\"toolbarSlotProps\"\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-gr-image-viewer-zoom-out\n :aria-label=\"resolvedZoomOutLabel\"\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-gr-image-viewer-zoom-reset\n :aria-label=\"resolvedResetZoomLabel\"\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-gr-image-viewer-zoom-in\n :aria-label=\"resolvedZoomInLabel\"\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 v-bind=\"toolbarSlotProps\"\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-gr-image-viewer-rotate-left\n :aria-label=\"resolvedRotateLeftLabel\"\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-gr-image-viewer-rotate-right\n :aria-label=\"resolvedRotateRightLabel\"\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, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\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 /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\n wheelZoom?: boolean\n /** Включает перетаскивание (pan) картинки мышью. При наведении курсор «рука». По умолчанию выключено. */\n draggable?: 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 wheelZoom: true,\n draggable: false,\n zIndex: undefined,\n closeLabel: undefined,\n prevLabel: undefined,\n nextLabel: undefined,\n zoomInLabel: undefined,\n zoomOutLabel: undefined,\n resetZoomLabel: undefined,\n rotateLeftLabel: undefined,\n rotateRightLabel: undefined,\n emptyText: undefined,\n },\n)\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.imageViewer.close', 'Close image viewer'))\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? t('gr.imageViewer.prev', 'Previous image'))\nconst resolvedNextLabel = computed(() => props.nextLabel ?? t('gr.imageViewer.next', 'Next image'))\nconst resolvedZoomInLabel = computed(() => props.zoomInLabel ?? t('gr.imageViewer.zoomIn', 'Zoom in'))\nconst resolvedZoomOutLabel = computed(() => props.zoomOutLabel ?? t('gr.imageViewer.zoomOut', 'Zoom out'))\nconst resolvedResetZoomLabel = computed(() => props.resetZoomLabel ?? t('gr.imageViewer.resetZoom', 'Reset zoom'))\nconst resolvedRotateLeftLabel = computed(() => props.rotateLeftLabel ?? t('gr.imageViewer.rotateLeft', 'Rotate left'))\nconst resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t('gr.imageViewer.rotateRight', 'Rotate right'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.imageViewer.empty', 'No image'))\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\ntype GrImageViewerSlotProps = {\n index: number\n displayIndex: number\n total: number\n scale: number\n rotation: number\n /** Натуральный (исходный) размер картинки, px. 0 пока изображение не загружено. */\n naturalWidth: number\n naturalHeight: number\n /** Фактический размер изображения на экране c учётом scale, px (footprint вдоль осей картинки). */\n renderedWidth: number\n renderedHeight: number\n /** Реальный масштаб относительно натурального размера (доля): renderedWidth / naturalWidth. */\n realScale: number\n /** Реальный масштаб в процентах, отформатированный (например `67`). */\n realScalePercent: string\n actions: GrImageViewerToolbarActions\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n// Чувствительность масштабирования колесом/трекпадом: чем больше — тем резче реакция.\nconst WHEEL_ZOOM_SENSITIVITY = 0.0015\n// Сколько ms простоя после последнего wheel-события считаем «зум завершён»\n// (после этого возвращаем плавный CSS-переход).\nconst WHEEL_IDLE_MS = 120\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 imageEl = ref<HTMLImageElement | null>(null)\n\n// Флаг активного зума колесом/трекпадом. Пока true — CSS-переход отключён,\n// чтобы непрерывное масштабирование не «наслаивалось» и не дёргалось.\nconst isWheelZooming = ref(false)\n\n// Накопленный deltaY между кадрами и id запланированного rAF.\nlet pendingWheelDelta = 0\nlet wheelFrameId: number | null = null\nlet wheelIdleTimer: ReturnType<typeof setTimeout> | null = null\n\n// Флаг активного перетаскивания (pan) картинки мышью.\nconst isDragging = ref(false)\n\n// Координаты указателя и offset на момент начала перетаскивания.\nlet dragStartX = 0\nlet dragStartY = 0\nlet dragOffsetStartX = 0\nlet dragOffsetStartY = 0\n\n// Натуральный (исходный) размер картинки, читается из `<img>` при загрузке.\nconst naturalWidth = ref(0)\nconst naturalHeight = ref(0)\n\n// Layout-размер вписанного (`object-contain`) изображения без учёта CSS transform/scale.\nconst fittedWidth = ref(0)\nconst fittedHeight = ref(0)\n\nlet resizeObserver: ResizeObserver | null = null\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\n// Плавный CSS-переход transform только для дискретных зумов (кнопки/клавиши).\n// При непрерывном зуме колесом и при перетаскивании переход отключаем —\n// иначе картинка «дёргается»/наслаивается и тянется за курсором с задержкой.\nconst imageTransitionClass = computed(() =>\n isWheelZooming.value || isDragging.value ? '' : 'transition-transform duration-150 ease-out',\n)\n\n// Курсор «рука» при наведении (grab) и при зажатии (grabbing), только если включён drag.\nconst imageCursorClass = computed(() => {\n if (!props.draggable) {\n return ''\n }\n\n return isDragging.value ? 'cursor-grabbing' : 'cursor-grab'\n})\n\nfunction formatPercent(value: number): string {\n if (Number.isInteger(value)) {\n return String(value)\n }\n\n return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n}\n\nconst zoomValueText = computed(() => formatPercent(scale.value * 100))\n\n// Фактический размер изображения на экране вдоль его осей (footprint), c учётом scale.\nconst renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value))\nconst renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value))\n\n// Реальный масштаб относительно натурального размера (доля). Не зависит от rotation,\n// так как scale равномерный по осям картинки.\nconst realScale = computed(() => {\n if (!naturalWidth.value) {\n return 0\n }\n\n return (fittedWidth.value * scale.value) / naturalWidth.value\n})\n\nconst realScalePercent = computed(() => formatPercent(realScale.value * 100))\n\nconst toolbarSlotProps = computed<GrImageViewerSlotProps>(() => ({\n index: currentIndex.value,\n displayIndex: displayIndex.value,\n total: total.value,\n scale: scale.value,\n rotation: rotation.value,\n naturalWidth: naturalWidth.value,\n naturalHeight: naturalHeight.value,\n renderedWidth: renderedWidth.value,\n renderedHeight: renderedHeight.value,\n realScale: realScale.value,\n realScalePercent: realScalePercent.value,\n actions: toolbarActions,\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 isDragging.value = false\n}\n\nfunction resetImageMetrics(): void {\n naturalWidth.value = 0\n naturalHeight.value = 0\n fittedWidth.value = 0\n fittedHeight.value = 0\n}\n\nfunction measureFitted(): void {\n const el = imageEl.value\n\n if (!el) {\n return\n }\n\n // offsetWidth/Height — layout-размер вписанного изображения, без учёта CSS transform.\n fittedWidth.value = el.offsetWidth\n fittedHeight.value = el.offsetHeight\n}\n\nfunction onImageLoad(event: Event): void {\n const el = event.target as HTMLImageElement\n\n naturalWidth.value = el.naturalWidth\n naturalHeight.value = el.naturalHeight\n measureFitted()\n}\n\nfunction startObservingImage(): void {\n const el = imageEl.value\n\n if (!el || typeof ResizeObserver === 'undefined') {\n return\n }\n\n if (!resizeObserver) {\n resizeObserver = new ResizeObserver(() => measureFitted())\n }\n\n resizeObserver.observe(el)\n\n // Если картинка уже в кэше и `load` не сработал — считаем метрики сразу.\n if (el.complete && el.naturalWidth) {\n naturalWidth.value = el.naturalWidth\n naturalHeight.value = el.naturalHeight\n }\n\n measureFitted()\n}\n\nfunction stopObservingImage(): void {\n resizeObserver?.disconnect()\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 resetImageMetrics()\n endWheelZoom()\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 resetImageMetrics()\n endWheelZoom()\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 setScale(value: number): void {\n const clamped = Math.min(props.maxScale, Math.max(props.minScale, value))\n\n scale.value = Number(clamped.toFixed(4))\n}\n\nfunction zoomIn(): void {\n setScale(scale.value * props.zoomRate)\n}\n\nfunction zoomOut(): void {\n setScale(scale.value / props.zoomRate)\n}\n\nfunction cancelWheelFrame(): void {\n if (wheelFrameId !== null) {\n cancelAnimationFrame(wheelFrameId)\n wheelFrameId = null\n }\n}\n\nfunction endWheelZoom(): void {\n if (wheelIdleTimer !== null) {\n clearTimeout(wheelIdleTimer)\n wheelIdleTimer = null\n }\n\n isWheelZooming.value = false\n pendingWheelDelta = 0\n cancelWheelFrame()\n}\n\n// Применяем накопленный за кадр deltaY одним обновлением scale — так рендер\n// происходит не чаще одного раза в кадр (без «дёрганья» от частых обновлений).\nfunction flushWheelZoom(): void {\n wheelFrameId = null\n\n const delta = pendingWheelDelta\n pendingWheelDelta = 0\n\n if (!delta) {\n return\n }\n\n // Экспоненциальный шаг — плавно и одинаково ощущается и для колеса, и для трекпада.\n // delta < 0 (от себя / scroll up) — приближение, delta > 0 — отдаление.\n const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY)\n\n setScale(scale.value * factor)\n}\n\nfunction onWheel(event: WheelEvent): void {\n if (!props.wheelZoom || !hasImages.value) {\n return\n }\n\n // Не даём странице/оверлею проскроллиться — колесо отдаём под зум.\n event.preventDefault()\n\n // Во время непрерывного зума отключаем CSS-переход: плавность даёт само\n // покадровое обновление, а transition на каждом микрошаге вызывает лаг/наслоение.\n isWheelZooming.value = true\n\n pendingWheelDelta += event.deltaY\n\n if (wheelFrameId === null) {\n wheelFrameId = requestAnimationFrame(flushWheelZoom)\n }\n\n if (wheelIdleTimer !== null) {\n clearTimeout(wheelIdleTimer)\n }\n\n // По завершении жеста возвращаем плавный переход для последующих дискретных зумов.\n wheelIdleTimer = setTimeout(() => {\n wheelIdleTimer = null\n isWheelZooming.value = false\n }, WHEEL_IDLE_MS)\n}\n\nfunction onPointerDown(event: PointerEvent): void {\n // Тянем только основной кнопкой и только если drag включён и есть картинка.\n if (!props.draggable || !hasImages.value || event.button !== 0) {\n return\n }\n\n event.preventDefault()\n\n isDragging.value = true\n dragStartX = event.clientX\n dragStartY = event.clientY\n dragOffsetStartX = offsetX.value\n dragOffsetStartY = offsetY.value\n\n // Захватываем указатель, чтобы движение/отпускание ловились даже за пределами картинки.\n ;(event.currentTarget as Element).setPointerCapture?.(event.pointerId)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n if (!isDragging.value) {\n return\n }\n\n offsetX.value = dragOffsetStartX + (event.clientX - dragStartX)\n offsetY.value = dragOffsetStartY + (event.clientY - dragStartY)\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n if (!isDragging.value) {\n return\n }\n\n isDragging.value = false\n ;(event.currentTarget as Element).releasePointerCapture?.(event.pointerId)\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 async (isOpen) => {\n if (!isOpen) {\n stopObservingImage()\n endWheelZoom()\n isDragging.value = false\n return\n }\n\n syncIndexFromInitial()\n await nextTick()\n startObservingImage()\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\nonBeforeUnmount(() => {\n stopObservingImage()\n endWheelZoom()\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-gr-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-gr-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-gr-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-gr-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-gr-image-viewer-close\n :aria-label=\"resolvedCloseLabel\"\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\n class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\"\n @wheel=\"onWheel\"\n >\n <button\n v-if=\"total > 1\"\n type=\"button\"\n data-gr-image-viewer-prev\n :aria-label=\"resolvedPrevLabel\"\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-gr-image-viewer-next\n :aria-label=\"resolvedNextLabel\"\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 ref=\"imageEl\"\n data-gr-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\"\n :class=\"[imageTransitionClass, imageCursorClass]\"\n :style=\"imageStyle\"\n @load=\"onImageLoad\"\n @pointerdown=\"onPointerDown\"\n @pointermove=\"onPointerMove\"\n @pointerup=\"onPointerUp\"\n @pointercancel=\"onPointerUp\"\n >\n\n <div\n v-else\n class=\"rounded-[var(--gr-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n >\n {{ resolvedEmptyText }}\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 v-bind=\"toolbarSlotProps\"\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-gr-image-viewer-zoom-out\n :aria-label=\"resolvedZoomOutLabel\"\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-gr-image-viewer-zoom-reset\n :aria-label=\"resolvedResetZoomLabel\"\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-gr-image-viewer-zoom-in\n :aria-label=\"resolvedZoomInLabel\"\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 v-bind=\"toolbarSlotProps\"\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-gr-image-viewer-rotate-left\n :aria-label=\"resolvedRotateLeftLabel\"\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-gr-image-viewer-rotate-right\n :aria-label=\"resolvedRotateRightLabel\"\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 CHANGED Viewed

@@ -1,3 +1,3 @@
-import { t as GrImageViewer_default } from "./chunks/GrImageViewer-BG40DsHa.js";
-import { t as grImageViewerConfig } from "../../chunks/config-Doa_gU40.js";
+import { t as GrImageViewer_default } from "./chunks/GrImageViewer-OCUIrNh2.js";
+import { t as grImageViewerConfig } from "../../chunks/config-HZto2PVy.js";
 export { GrImageViewer_default as GrImageViewer, GrImageViewer_default as default, grImageViewerConfig };

package/dist/components/GrInput/chunks/{GrInput-gwFQ1sk4.js → GrInput-C8pOJgCi.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, nextTick, normalizeStyle, onBeforeUnmount, onMounted, onUpdated, openBlock, ref, renderSlot, useSlots } from "vue";
+import { n as useAddonMeasurement, t as addLen } from "../../../chunks/useAddonMeasurement-DM0akF4C.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, useSlots } from "vue";
 //#region src/components/GrInput/GrInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { class: "relative w-full" };
-var _hoisted_2 = [
+var _hoisted_1 = [
 	"id",
 	"name",
 	"type",
@@ -39,7 +39,15 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 		prefixMinWidth: { default: void 0 },
 		prefixMaxWidth: { default: void 0 },
 		suffixMinWidth: { default: void 0 },
-		suffixMaxWidth: { default: void 0 }
+		suffixMaxWidth: { default: void 0 },
+		prefixFixed: {
+			type: Boolean,
+			default: false
+		},
+		suffixFixed: {
+			type: Boolean,
+			default: false
+		}
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { expose: __expose, emit: __emit }) {
@@ -63,49 +71,9 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 		});
 		const prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value);
 		const suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value);
-		const prefixEl = ref(null);
-		const suffixEl = ref(null);
-		const measuredPrefixWidth = ref(void 0);
-		const measuredSuffixWidth = ref(void 0);
-		let ro = null;
-		let scheduled = false;
-		function readWidthPx(el) {
-			if (!el) return void 0;
-			const width = Math.ceil(el.getBoundingClientRect().width || 0);
-			if (width <= 0) return void 0;
-			return `${width}px`;
-		}
-		function measure() {
-			measuredPrefixWidth.value = hasPrefix.value ? readWidthPx(prefixEl.value) : void 0;
-			measuredSuffixWidth.value = hasSuffix.value ? readWidthPx(suffixEl.value) : void 0;
-		}
-		function refreshObserver() {
-			if (typeof ResizeObserver === "undefined") return;
-			if (!ro) ro = new ResizeObserver(() => measure());
-			ro.disconnect();
-			if (prefixEl.value) ro.observe(prefixEl.value);
-			if (suffixEl.value) ro.observe(suffixEl.value);
-		}
-		function scheduleMeasure() {
-			if (scheduled) return;
-			scheduled = true;
-			nextTick(() => {
-				scheduled = false;
-				measure();
-				refreshObserver();
-			});
-		}
-		onMounted(() => scheduleMeasure());
-		onUpdated(() => scheduleMeasure());
-		onBeforeUnmount(() => ro?.disconnect());
-		function addLen(a, b) {
-			if (a === "0px") return b;
-			if (b === "0px") return a;
-			const apx = a.endsWith("px") ? Number(a.slice(0, -2)) : null;
-			const bpx = b.endsWith("px") ? Number(b.slice(0, -2)) : null;
-			if (apx !== null && Number.isFinite(apx) && bpx !== null && Number.isFinite(bpx)) return `${apx + bpx}px`;
-			return `calc(${a} + ${b})`;
-		}
+		const prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value);
+		const suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value);
+		const { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix);
 		const basePaddingXLen = computed(() => {
 			return {
 				xs: "10px",
@@ -115,20 +83,30 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 			}[props.size];
 		});
 		const inputStyle = computed(() => {
-			const leftReserved = hasPrefix.value ? measuredPrefixWidth.value ?? prefixMinWidth.value : "0px";
-			const rightReserved = hasSuffix.value ? measuredSuffixWidth.value ?? suffixMinWidth.value : "0px";
+			const leftReserved = hasPrefix.value ? props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value : "0px";
+			const rightReserved = hasSuffix.value ? props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value : "0px";
 			return {
 				paddingLeft: hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : void 0,
 				paddingRight: hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : void 0
 			};
 		});
 		const prefixStyle = computed(() => {
+			if (props.prefixFixed) return {
+				width: prefixFixedWidth.value,
+				minWidth: prefixFixedWidth.value,
+				maxWidth: prefixFixedWidth.value
+			};
 			return {
 				minWidth: prefixMinWidth.value,
 				maxWidth: props.prefixMaxWidth
 			};
 		});
 		const suffixStyle = computed(() => {
+			if (props.suffixFixed) return {
+				width: suffixFixedWidth.value,
+				minWidth: suffixFixedWidth.value,
+				maxWidth: suffixFixedWidth.value
+			};
 			return {
 				minWidth: suffixMinWidth.value,
 				maxWidth: props.suffixMaxWidth
@@ -149,30 +127,29 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 				right: "text-right"
 			}[props.textAlign];
 		});
-		const className = computed(() => {
+		const shellClass = computed(() => {
 			const state = props.state;
 			const borderByState = {
 				default: "border-[var(--brd)]",
-				success: "border-[var(--ds-success)] focus-visible:ring-[var(--ds-success)]",
-				warning: "border-[var(--ds-warning)] focus-visible:ring-[var(--ds-warning)]",
-				danger: "border-[var(--ds-danger)] focus-visible:ring-[var(--ds-danger)]"
+				success: "border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]",
+				warning: "border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]",
+				danger: "border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]"
 			};
-			return [
-				sizeClass.value,
-				textAlignClass.value,
-				props.invalid ? borderByState.danger : borderByState[state]
-			].join(" ");
+			return [props.invalid ? borderByState.danger : borderByState[state], props.disabled ? "opacity-50 cursor-not-allowed" : ""].filter(Boolean).join(" ");
+		});
+		const className = computed(() => {
+			return [sizeClass.value, textAlignClass.value].join(" ");
 		});
 		function onInput(e) {
 			emit("update:modelValue", e.target.value);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", shellClass.value]) }, [
 				_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
 					key: 0,
 					ref_key: "prefixEl",
 					ref: prefixEl,
-					"data-testid": "ds-input-prefix",
+					"data-testid": "gr-input-prefix",
 					class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
 					style: normalizeStyle(prefixStyle.value),
 					"aria-hidden": "true"
@@ -190,20 +167,20 @@ var GrInput_default = /* @__PURE__ */ defineComponent({
 					disabled: props.disabled,
 					value: props.modelValue,
 					"aria-invalid": props.invalid ? "true" : void 0,
-					class: ["w-full rounded-md border bg-[var(--bg)] text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed", className.value],
+					class: ["w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", className.value],
 					style: inputStyle.value,
 					onInput
-				}), null, 16, _hoisted_2),
+				}), null, 16, _hoisted_1),
 				_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
 					key: 1,
 					ref_key: "suffixEl",
 					ref: suffixEl,
-					"data-testid": "ds-input-suffix",
-					class: "absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
+					"data-testid": "gr-input-suffix",
+					class: normalizeClass(["absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
 					style: normalizeStyle(suffixStyle.value),
 					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "suffix")], 4)) : createCommentVNode("", true)
-			]);
+				}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true)
+			], 2);
 		};
 	}
 });

package/dist/components/GrInput/chunks/GrInput-C8pOJgCi.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GrInput-C8pOJgCi.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrInput/GrInput.vue","../../../../src/components/GrInput/GrInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string\n type?: 'text' | 'email' | 'password' | 'number' | 'search'\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n invalid?: boolean\n state?: 'default' | 'success' | 'warning' | 'danger'\n name?: string\n id?: string\n size?: GrInputSize\n\n textAlign?: GrInputTextAlign\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n * под контент (в пределах min/max), а излишек клипается оболочкой.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n }>(),\n {\n type: 'text',\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n },\n)\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '2rem', // w-8\n sm: '2.25rem', // w-9\n md: '2.5rem', // w-10\n lg: '3rem', // w-12\n }\n\n return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '10px', // px-2.5\n sm: '12px', // px-3\n md: '12px', // px-3\n lg: '16px', // px-4\n }\n\n return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n const leftReserved = hasPrefix.value\n ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n : '0px'\n const rightReserved = hasSuffix.value\n ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n : '0px'\n\n // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: 'h-7 px-2.5 text-[12px]',\n sm: 'h-8 px-3 text-[13px]',\n md: 'h-10 px-3 text-[14px]',\n lg: 'h-11 px-4 text-[16px]',\n }\n\n return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n const map: Record<NonNullable<typeof props.textAlign>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n }\n\n return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n const state = props.state\n\n const borderByState: Record<typeof state, string> = {\n default: 'border-[var(--brd)]',\n success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n }\n\n return [\n props.invalid ? borderByState.danger : borderByState[state],\n props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n return [\n sizeClass.value,\n textAlignClass.value,\n ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n <div\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClass\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"gr-input-prefix\"\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"props.id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"props.name\"\n :type=\"props.type\"\n :inputmode=\"props.inputmode\"\n :autocomplete=\"props.autocomplete\"\n :placeholder=\"props.placeholder\"\n :disabled=\"props.disabled\"\n :value=\"props.modelValue\"\n :aria-invalid=\"props.invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"className\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"gr-input-suffix\"\n class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string\n type?: 'text' | 'email' | 'password' | 'number' | 'search'\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n invalid?: boolean\n state?: 'default' | 'success' | 'warning' | 'danger'\n name?: string\n id?: string\n size?: GrInputSize\n\n textAlign?: GrInputTextAlign\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n * под контент (в пределах min/max), а излишек клипается оболочкой.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n }>(),\n {\n type: 'text',\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n },\n)\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '2rem', // w-8\n sm: '2.25rem', // w-9\n md: '2.5rem', // w-10\n lg: '3rem', // w-12\n }\n\n return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '10px', // px-2.5\n sm: '12px', // px-3\n md: '12px', // px-3\n lg: '16px', // px-4\n }\n\n return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n const leftReserved = hasPrefix.value\n ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n : '0px'\n const rightReserved = hasSuffix.value\n ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n : '0px'\n\n // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: 'h-7 px-2.5 text-[12px]',\n sm: 'h-8 px-3 text-[13px]',\n md: 'h-10 px-3 text-[14px]',\n lg: 'h-11 px-4 text-[16px]',\n }\n\n return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n const map: Record<NonNullable<typeof props.textAlign>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n }\n\n return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n const state = props.state\n\n const borderByState: Record<typeof state, string> = {\n default: 'border-[var(--brd)]',\n success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n }\n\n return [\n props.invalid ? borderByState.danger : borderByState[state],\n props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n return [\n sizeClass.value,\n textAlignClass.value,\n ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n <div\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClass\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"gr-input-prefix\"\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"props.id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"props.name\"\n :type=\"props.type\"\n :inputmode=\"props.inputmode\"\n :autocomplete=\"props.autocomplete\"\n :placeholder=\"props.placeholder\"\n :disabled=\"props.disabled\"\n :value=\"props.modelValue\"\n :aria-invalid=\"props.invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"className\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"gr-input-suffix\"\n class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrInput/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { t as GrInput_default } from "./chunks/GrInput-gwFQ1sk4.js";
-import { n as grInputSafelist, t as grInputConfig } from "../../chunks/config-8f8624RN.js";
+import { t as GrInput_default } from "./chunks/GrInput-C8pOJgCi.js";
+import { n as grInputSafelist, t as grInputConfig } from "../../chunks/config-D_R56_gT.js";
 export { GrInput_default as GrInput, GrInput_default as default, grInputConfig, grInputSafelist };