@feugene/granularity 0.9.3 → 0.10.0

package/dist/components/GrFormFile/chunks/{GrFormFile-CIleXnfr.js.map → GrFormFile-CkR6cYqf.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrFormFile-CIleXnfr.js","names":[],"sources":["../../../../src/components/GrFormFile/GrFormFile.vue","../../../../src/components/GrFormFile/GrFormFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\n\ndefineOptions({\n  name: 'GrFormFile',\n})\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    disabled: false,\n    accept: undefined,\n    uploadText: 'Upload file',\n    changeText: 'Change file',\n    removeText: 'Remove',\n    clearAllText: 'Clear all',\n    placeholder: 'No files selected',\n    validators: undefined,\n    validate: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  (e: 'validation', errors: GrFormFileError[]): void\n  (e: 'update:errors', errors: GrFormFileError[]): void\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst localErrors = ref<GrFormFileError[]>([])\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('validation', next)\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (localErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  const res = runFileValidators(nextFiles, validators, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (props.disabled) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (props.disabled) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (props.disabled) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  if (issue.fileName) return `${issue.fileName}: ${issue.message}`\n  return issue.message\n}\n\nconst dropzone = computed(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  return {\n    enabled: !props.disabled,\n    multiple: props.multiple,\n    validators,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: 'Failed to validate dropped files',\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    v-dropzone=\"dropzone\"\n    data-ds-form-file\n    class=\"rounded-[var(--ds-radius-md)]\"\n    :class=\"disabled ? 'opacity-60 cursor-not-allowed' : ''\"\n  >\n    <input\n      ref=\"inputRef\"\n      data-ds-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <GrButton\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-upload-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconUpload />\n          </GrIcon>\n          <span class=\"ml-2\">{{ hasFiles ? changeText : uploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ removeText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-all-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ clearAllText }}</span>\n        </GrButton>\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n          data-ds-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)]\"\n          data-ds-form-file-placeholder\n        >\n          {{ placeholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col gap-2\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"`${file.name}-${file.size}-${index}`\"\n          class=\"flex items-center gap-2\"\n          data-ds-form-file-item\n        >\n          <span\n            class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n            :title=\"file.name\"\n            data-ds-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <button\n            type=\"button\"\n            class=\"text-xs text-[var(--muted-fg)] hover:text-[var(--fg)]\"\n            data-ds-form-file-item-remove\n            :disabled=\"disabled\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ removeText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"errors\" :errors=\"localErrors\">\n        <div v-if=\"localErrors.length\" class=\"text-sm text-[var(--ds-danger)]\" data-ds-form-file-errors>\n          <div v-for=\"(e, i) in localErrors\" :key=\"i\" data-ds-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-ds-form-file].ds-dropzone--over {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\n\ndefineOptions({\n  name: 'GrFormFile',\n})\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    disabled: false,\n    accept: undefined,\n    uploadText: 'Upload file',\n    changeText: 'Change file',\n    removeText: 'Remove',\n    clearAllText: 'Clear all',\n    placeholder: 'No files selected',\n    validators: undefined,\n    validate: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  (e: 'validation', errors: GrFormFileError[]): void\n  (e: 'update:errors', errors: GrFormFileError[]): void\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst localErrors = ref<GrFormFileError[]>([])\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('validation', next)\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (localErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  const res = runFileValidators(nextFiles, validators, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (props.disabled) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (props.disabled) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (props.disabled) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  if (issue.fileName) return `${issue.fileName}: ${issue.message}`\n  return issue.message\n}\n\nconst dropzone = computed(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  return {\n    enabled: !props.disabled,\n    multiple: props.multiple,\n    validators,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: 'Failed to validate dropped files',\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    v-dropzone=\"dropzone\"\n    data-ds-form-file\n    class=\"rounded-[var(--ds-radius-md)]\"\n    :class=\"disabled ? 'opacity-60 cursor-not-allowed' : ''\"\n  >\n    <input\n      ref=\"inputRef\"\n      data-ds-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <GrButton\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-upload-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconUpload />\n          </GrIcon>\n          <span class=\"ml-2\">{{ hasFiles ? changeText : uploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ removeText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-all-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ clearAllText }}</span>\n        </GrButton>\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n          data-ds-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)]\"\n          data-ds-form-file-placeholder\n        >\n          {{ placeholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col gap-2\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"`${file.name}-${file.size}-${index}`\"\n          class=\"flex items-center gap-2\"\n          data-ds-form-file-item\n        >\n          <span\n            class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n            :title=\"file.name\"\n            data-ds-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <button\n            type=\"button\"\n            class=\"text-xs text-[var(--muted-fg)] hover:text-[var(--fg)]\"\n            data-ds-form-file-item-remove\n            :disabled=\"disabled\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ removeText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"errors\" :errors=\"localErrors\">\n        <div v-if=\"localErrors.length\" class=\"text-sm text-[var(--ds-danger)]\" data-ds-form-file-errors>\n          <div v-for=\"(e, i) in localErrors\" :key=\"i\" data-ds-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-ds-form-file].ds-dropzone--over {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"GrFormFile-CkR6cYqf.js","names":[],"sources":["../../../../src/components/GrFormFile/GrFormFile.vue","../../../../src/components/GrFormFile/GrFormFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\n\ndefineOptions({\n  name: 'GrFormFile',\n})\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    disabled: false,\n    accept: undefined,\n    uploadText: 'Upload file',\n    changeText: 'Change file',\n    removeText: 'Remove',\n    clearAllText: 'Clear all',\n    placeholder: 'No files selected',\n    validators: undefined,\n    validate: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  (e: 'validation', errors: GrFormFileError[]): void\n  (e: 'update:errors', errors: GrFormFileError[]): void\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst localErrors = ref<GrFormFileError[]>([])\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('validation', next)\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (localErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  const res = runFileValidators(nextFiles, validators, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (props.disabled) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (props.disabled) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (props.disabled) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  if (issue.fileName) return `${issue.fileName}: ${issue.message}`\n  return issue.message\n}\n\nconst dropzone = computed(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  return {\n    enabled: !props.disabled,\n    multiple: props.multiple,\n    validators,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: 'Failed to validate dropped files',\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    v-dropzone=\"dropzone\"\n    data-ds-form-file\n    class=\"rounded-[var(--ds-radius-md)]\"\n    :class=\"disabled ? 'opacity-60 cursor-not-allowed' : ''\"\n  >\n    <input\n      ref=\"inputRef\"\n      data-ds-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <GrButton\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-upload-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconUpload />\n          </GrIcon>\n          <span class=\"ml-2\">{{ hasFiles ? changeText : uploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ removeText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-all-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ clearAllText }}</span>\n        </GrButton>\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n          data-ds-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)]\"\n          data-ds-form-file-placeholder\n        >\n          {{ placeholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col gap-2\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"`${file.name}-${file.size}-${index}`\"\n          class=\"flex items-center gap-2\"\n          data-ds-form-file-item\n        >\n          <span\n            class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n            :title=\"file.name\"\n            data-ds-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <button\n            type=\"button\"\n            class=\"text-xs text-[var(--muted-fg)] hover:text-[var(--fg)]\"\n            data-ds-form-file-item-remove\n            :disabled=\"disabled\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ removeText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"errors\" :errors=\"localErrors\">\n        <div v-if=\"localErrors.length\" class=\"text-sm text-[var(--ds-danger)]\" data-ds-form-file-errors>\n          <div v-for=\"(e, i) in localErrors\" :key=\"i\" data-ds-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-ds-form-file].ds-dropzone--over {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport IconUpload from '~icons/lucide/upload'\nimport IconX from '~icons/lucide/x'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport { vDropzone } from '../../directives'\nimport { acceptValidator, FileValidationError, runFileValidators } from '../../fileValidation'\nimport type { FileValidationIssue, FileValidator } from '../../fileValidation'\n\ndefineOptions({\n  name: 'GrFormFile',\n})\n\nexport type GrFormFileError = FileValidationIssue\n\n/**\n * Пропы `GrFormFile` — форма-поле для выбора файлов с встроенной валидацией,\n * drag&drop (через `v-dropzone`) и списком выбранных файлов.\n *\n * Все `*Text`/`placeholder` — i18n-friendly, принимают готовые строки локали.\n */\nexport interface GrFormFileProps {\n  modelValue: File | File[] | null\n  multiple?: boolean\n  disabled?: boolean\n  /** W3C `accept` для `<input type=\"file\">` + sugar к `acceptValidator(...)`. */\n  accept?: string\n  validators?: FileValidator[]\n  uploadText?: string\n  changeText?: string\n  removeText?: string\n  clearAllText?: string\n  placeholder?: string\n  /** Дополнительная (кастомная) валидация на стороне потребителя. */\n  validate?: (files: File[]) => GrFormFileError[] | Promise<GrFormFileError[]>\n}\n\nconst props = withDefaults(\n  defineProps<GrFormFileProps>(),\n  {\n    multiple: false,\n    disabled: false,\n    accept: undefined,\n    uploadText: 'Upload file',\n    changeText: 'Change file',\n    removeText: 'Remove',\n    clearAllText: 'Clear all',\n    placeholder: 'No files selected',\n    validators: undefined,\n    validate: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: File | File[] | null): void\n  (e: 'change', value: File | File[] | null): void\n  (e: 'clear'): void\n  (e: 'validation', errors: GrFormFileError[]): void\n  (e: 'update:errors', errors: GrFormFileError[]): void\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\nconst localErrors = ref<GrFormFileError[]>([])\n\nconst files = computed<File[]>(() => {\n  if (props.multiple) {\n    return Array.isArray(props.modelValue) ? props.modelValue : []\n  }\n\n  return props.modelValue instanceof File ? [props.modelValue] : []\n})\n\nconst hasFiles = computed(() => files.value.length > 0)\n\nfunction clearInputValue() {\n  if (!inputRef.value) return\n  inputRef.value.value = ''\n}\n\nfunction setErrors(next: GrFormFileError[]) {\n  localErrors.value = next\n  emit('validation', next)\n  emit('update:errors', next)\n}\n\nfunction clearErrors() {\n  if (localErrors.value.length === 0) return\n  setErrors([])\n}\n\nfunction openDialog() {\n  if (props.disabled) return\n  inputRef.value?.click()\n}\n\nfunction emitModel(nextFiles: File[]) {\n  const value: File | File[] | null = props.multiple\n    ? nextFiles\n    : (nextFiles[0] ?? null)\n\n  emit('update:modelValue', value)\n  emit('change', value)\n}\n\nasync function applyFiles(nextFiles: File[]) {\n  const isPromiseLike = (value: unknown): value is PromiseLike<any> => {\n    return !!value && typeof (value as any).then === 'function'\n  }\n\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  const res = runFileValidators(nextFiles, validators, {\n    source: 'input',\n    multiple: props.multiple,\n  })\n\n  const { files: picked, issues } = isPromiseLike(res) ? await res : res\n\n  if (issues.length > 0) {\n    setErrors(issues)\n    clearInputValue()\n    await nextTick()\n    return\n  }\n\n  clearErrors()\n  emitModel(picked)\n  clearInputValue()\n  await nextTick()\n}\n\nasync function onInputChange(event: Event) {\n  if (props.disabled) return\n\n  const target = event.target as HTMLInputElement | null\n  const nextFiles = target?.files ? Array.prototype.slice.call(target.files) as File[] : []\n\n  // Reset value so selecting the same file twice triggers change.\n  if (target) target.value = ''\n  await nextTick()\n\n  await applyFiles(nextFiles)\n}\n\nfunction clearAll() {\n  if (props.disabled) return\n  clearErrors()\n  clearInputValue()\n  emit('clear')\n\n  emit('update:modelValue', props.multiple ? [] : null)\n  emit('change', props.multiple ? [] : null)\n}\n\nfunction removeAt(index: number) {\n  if (props.disabled) return\n  if (!props.multiple) {\n    clearAll()\n    return\n  }\n\n  const next = files.value.slice()\n  next.splice(index, 1)\n\n  emit('update:modelValue', next)\n  emit('change', next)\n}\n\nfunction issueMessage(issue: GrFormFileError): string {\n  if (issue.fileName) return `${issue.fileName}: ${issue.message}`\n  return issue.message\n}\n\nconst dropzone = computed(() => {\n  const customValidator: FileValidator | undefined = props.validate\n    ? async ({ files }) => (await props.validate?.(files)) ?? []\n    : undefined\n\n  const validators: FileValidator[] = [\n    acceptValidator(props.accept),\n    ...(props.validators ?? []),\n    ...(customValidator ? [customValidator] : []),\n  ]\n\n  return {\n    enabled: !props.disabled,\n    multiple: props.multiple,\n    validators,\n    onFiles: async (dropped: File[]) => {\n      // `v-dropzone` уже выполнил валидаторы и нормализацию по `multiple`.\n      clearErrors()\n      emitModel(dropped)\n      clearInputValue()\n      await nextTick()\n    },\n    onError: (error: unknown) => {\n      if (error instanceof FileValidationError) {\n        setErrors(error.issues)\n      }\n      else {\n        setErrors([\n          {\n            code: 'accept',\n            message: 'Failed to validate dropped files',\n          },\n        ])\n      }\n    },\n  }\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (!inputRef.value) return\n\n    if (!value || (Array.isArray(value) && value.length === 0)) {\n      // Позволяет выбрать тот же файл снова после внешнего сброса.\n      inputRef.value.value = ''\n    }\n  },\n)\n</script>\n\n<template>\n  <div\n    v-dropzone=\"dropzone\"\n    data-ds-form-file\n    class=\"rounded-[var(--ds-radius-md)]\"\n    :class=\"disabled ? 'opacity-60 cursor-not-allowed' : ''\"\n  >\n    <input\n      ref=\"inputRef\"\n      data-ds-form-file-input\n      type=\"file\"\n      tabindex=\"-1\"\n      aria-hidden=\"true\"\n      class=\"absolute opacity-0 w-px h-px pointer-events-none\"\n      :multiple=\"multiple\"\n      :accept=\"accept\"\n      :disabled=\"disabled\"\n      @change=\"onInputChange\"\n    >\n\n    <div class=\"flex flex-col gap-2\">\n      <div class=\"flex flex-wrap items-center gap-3\">\n        <GrButton\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-upload-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"openDialog\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconUpload />\n          </GrIcon>\n          <span class=\"ml-2\">{{ hasFiles ? changeText : uploadText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"hasFiles && !multiple\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ removeText }}</span>\n        </GrButton>\n\n        <GrButton\n          v-if=\"multiple && hasFiles\"\n          variant=\"secondary\"\n          size=\"sm\"\n          data-ds-form-file-clear-all-btn\n          :disabled=\"disabled\"\n          @click.prevent=\"clearAll\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconX />\n          </GrIcon>\n          <span class=\"ml-2\">{{ clearAllText }}</span>\n        </GrButton>\n\n        <span\n          v-if=\"!multiple && hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n          data-ds-form-file-single-name\n          :title=\"files[0]?.name\"\n        >\n          {{ files[0]?.name }}\n        </span>\n\n        <span\n          v-if=\"!hasFiles\"\n          class=\"text-sm text-[var(--muted-fg)]\"\n          data-ds-form-file-placeholder\n        >\n          {{ placeholder }}\n        </span>\n      </div>\n\n      <div v-if=\"multiple && hasFiles\" class=\"flex flex-col gap-2\">\n        <div\n          v-for=\"(file, index) in files\"\n          :key=\"`${file.name}-${file.size}-${index}`\"\n          class=\"flex items-center gap-2\"\n          data-ds-form-file-item\n        >\n          <span\n            class=\"text-sm text-[var(--muted-fg)] truncate max-w-[240px]\"\n            :title=\"file.name\"\n            data-ds-form-file-item-name\n          >\n            {{ file.name }}\n          </span>\n\n          <button\n            type=\"button\"\n            class=\"text-xs text-[var(--muted-fg)] hover:text-[var(--fg)]\"\n            data-ds-form-file-item-remove\n            :disabled=\"disabled\"\n            @click.prevent=\"removeAt(index)\"\n          >\n            {{ removeText }}\n          </button>\n        </div>\n      </div>\n\n      <slot name=\"errors\" :errors=\"localErrors\">\n        <div v-if=\"localErrors.length\" class=\"text-sm text-[var(--ds-danger)]\" data-ds-form-file-errors>\n          <div v-for=\"(e, i) in localErrors\" :key=\"i\" data-ds-form-file-error>\n            {{ issueMessage(e) }}\n          </div>\n        </div>\n      </slot>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n[data-ds-form-file].ds-dropzone--over {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrFormFile/index.js

@@ -1,3 +1,3 @@
-import { t as GrFormFile_default } from "./chunks/GrFormFile-CIleXnfr.js";
-import { t as grFormFileConfig } from "../../chunks/config-BbKroFtR.js";
+import { t as GrFormFile_default } from "./chunks/GrFormFile-CkR6cYqf.js";
+import { t as grFormFileConfig } from "../../chunks/config-C5-ujXCI.js";
 export { GrFormFile_default as GrFormFile, GrFormFile_default as default, grFormFileConfig };

package/dist/components/GrFormSection/chunks/{GrFormSection-DpGhY7MX.js.map → GrFormSection-dbyzqxYk.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrFormSection-DpGhY7MX.js","names":[],"sources":["../../../../src/components/GrFormSection/GrFormSection.vue","../../../../src/components/GrFormSection/GrFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-ds-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-ds-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,UAAU,OAAM;EACtB,MAAM,gBAAgB,OAAM;;uBAI1B,mBAmBU,WAAA;IAlBR,wBAAA;IACA,OAAM;IACL,mBAAiB,MAAA,QAAO;IACxB,oBAAkB,QAAA,cAAc,MAAA,cAAa,GAAG,KAAA;OAEjD,mBAWM,OAAA,MAAA,CAVJ,mBAEM,OAAA;IAFA,IAAI,MAAA,QAAO;IAAE,OAAM;sBACpB,QAAA,MAAK,EAAA,GAAA,WAAA,EAGF,QAAA,eAAA,WAAA,EADR,mBAMM,OAAA;;IAJH,IAAI,MAAA,cAAa;IAClB,OAAM;sBAEH,QAAA,YAAW,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,EAGlB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}
+{"version":3,"file":"GrFormSection-dbyzqxYk.js","names":[],"sources":["../../../../src/components/GrFormSection/GrFormSection.vue","../../../../src/components/GrFormSection/GrFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-ds-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-ds-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,UAAU,OAAM;EACtB,MAAM,gBAAgB,OAAM;;uBAI1B,mBAmBU,WAAA;IAlBR,wBAAA;IACA,OAAM;IACL,mBAAiB,MAAA,QAAO;IACxB,oBAAkB,QAAA,cAAc,MAAA,cAAa,GAAG,KAAA;OAEjD,mBAWM,OAAA,MAAA,CAVJ,mBAEM,OAAA;IAFA,IAAI,MAAA,QAAO;IAAE,OAAM;sBACpB,QAAA,MAAK,EAAA,GAAA,WAAA,EAGF,QAAA,eAAA,WAAA,EADR,mBAMM,OAAA;;IAJH,IAAI,MAAA,cAAa;IAClB,OAAM;sBAEH,QAAA,YAAW,EAAA,GAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,CAAA,CAAA,EAGlB,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,GAAA,WAAA"}

package/dist/components/GrFormSection/index.js

@@ -1,3 +1,3 @@
-import { t as GrFormSection_default } from "./chunks/GrFormSection-DpGhY7MX.js";
-import { t as grFormSectionConfig } from "../../chunks/config-DoBk_CzG.js";
+import { t as GrFormSection_default } from "./chunks/GrFormSection-dbyzqxYk.js";
+import { t as grFormSectionConfig } from "../../chunks/config-VJuoznpH.js";
 export { GrFormSection_default as GrFormSection, GrFormSection_default as default, grFormSectionConfig };

package/dist/components/GrImageViewer/chunks/{GrImageViewer-CsvXQHM9.js.map → GrImageViewer-BG40DsHa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrImageViewer-CsvXQHM9.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\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: '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\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-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\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-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                    ref=\"imageEl\"\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\"\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(--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                    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-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                          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-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, nextTick, onBeforeUnmount, 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    /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\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: '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\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-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\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-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                    ref=\"imageEl\"\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\"\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(--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                    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-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                          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-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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"}
+{"version":3,"file":"GrImageViewer-BG40DsHa.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\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: '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\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-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\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-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                    ref=\"imageEl\"\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\"\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(--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                    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-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                          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-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, nextTick, onBeforeUnmount, 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    /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\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: '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\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-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\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-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                    ref=\"imageEl\"\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\"\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(--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                    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-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                          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-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 GrImageViewer_default } from "./chunks/GrImageViewer-CsvXQHM9.js";
-import { t as grImageViewerConfig } from "../../chunks/config-CvGdaXvH.js";
+import { t as GrImageViewer_default } from "./chunks/GrImageViewer-BG40DsHa.js";
+import { t as grImageViewerConfig } from "../../chunks/config-Doa_gU40.js";
 export { GrImageViewer_default as GrImageViewer, GrImageViewer_default as default, grImageViewerConfig };

package/dist/components/GrInput/index.js

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

package/dist/components/GrInputTag/chunks/{GrInputTag-Dcj3F6rQ.js → GrInputTag-g-KdUI_Z.js}

@@ -1,7 +1,7 @@
 import { t as x_default } from "../../../chunks/x-Pa6C2hwi.js";
 import { t as GrBadge_default } from "../../GrBadge/chunks/GrBadge-Cs_cVfuO.js";
 import { t as GrIcon_default } from "../../GrIcon/chunks/GrIcon-BV7RBU_0.js";
-import { i as grInputTagWrapperClass, r as grInputTagInputClass } from "../../../chunks/config-BnWSHTEU.js";
+import { i as grInputTagWrapperClass, r as grInputTagInputClass } from "../../../chunks/config-XspHtPsU.js";
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
 //#region src/components/GrInputTag/GrInputTag.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "truncate max-w-[18rem]" };