@feugene/granularity 0.37.0 → 0.38.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/devHook-CiqijpNM.js +44 -0
- package/dist/chunks/devHook-CiqijpNM.js.map +1 -0
- package/dist/chunks/{overlayStack-B_UFaFzk.js → overlayStack-DH4Z7am1.js} +6 -27
- package/dist/chunks/overlayStack-DH4Z7am1.js.map +1 -0
- package/dist/chunks/{useModalOverlay-BwX8WEcI.js → useModalOverlay-ACRkflzx.js} +1 -1
- package/dist/chunks/{useModalOverlay-BwX8WEcI.js.map → useModalOverlay-ACRkflzx.js.map} +1 -1
- package/dist/components/GrColorPicker/chunks/{GrColorPicker-BNtpj_P6.js → GrColorPicker-BwzRLs-i.js} +1 -1
- package/dist/components/GrColorPicker/chunks/{GrColorPicker-BNtpj_P6.js.map → GrColorPicker-BwzRLs-i.js.map} +1 -1
- package/dist/components/GrColorPicker/index.js +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-BVZEd4yy.js → GrCommandPalette-CnzPuoIM.js} +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-BVZEd4yy.js.map → GrCommandPalette-CnzPuoIM.js.map} +1 -1
- package/dist/components/GrCommandPalette/index.js +1 -1
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-K5ht2cYq.js → GrConfirmDialog-e15nFI8M.js} +1 -1
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-K5ht2cYq.js.map → GrConfirmDialog-e15nFI8M.js.map} +1 -1
- package/dist/components/GrConfirmDialog/index.js +1 -1
- package/dist/components/GrContextMenu/chunks/{GrContextMenu-Dd2tgMoL.js → GrContextMenu-RpxMHQXH.js} +1 -1
- package/dist/components/GrContextMenu/chunks/{GrContextMenu-Dd2tgMoL.js.map → GrContextMenu-RpxMHQXH.js.map} +1 -1
- package/dist/components/GrContextMenu/index.js +1 -1
- package/dist/components/GrDialog/chunks/{GrDialog-CeJubnKJ.js → GrDialog-DDz_OEhk.js} +1 -1
- package/dist/components/GrDialog/chunks/{GrDialog-CeJubnKJ.js.map → GrDialog-DDz_OEhk.js.map} +1 -1
- package/dist/components/GrDialog/index.js +1 -1
- package/dist/components/GrDialogService/chunks/{GrDialogService-BArvw1DV.js → GrDialogService-BmXiYmUp.js} +2 -2
- package/dist/components/GrDialogService/chunks/{GrDialogService-BArvw1DV.js.map → GrDialogService-BmXiYmUp.js.map} +1 -1
- package/dist/components/GrDialogService/index.js +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-BBHNgeH0.js → GrDrawer-BRMHhvbd.js} +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-BBHNgeH0.js.map → GrDrawer-BRMHhvbd.js.map} +1 -1
- package/dist/components/GrDrawer/index.js +1 -1
- package/dist/components/GrDropdown/chunks/{GrDropdown-CUlviqMi.js → GrDropdown-cLZuZMEY.js} +1 -1
- package/dist/components/GrDropdown/chunks/{GrDropdown-CUlviqMi.js.map → GrDropdown-cLZuZMEY.js.map} +1 -1
- package/dist/components/GrDropdown/index.js +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-COOR1LCs.js → GrDropdownMenu-Dxkz_ry4.js} +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-COOR1LCs.js.map → GrDropdownMenu-Dxkz_ry4.js.map} +1 -1
- package/dist/components/GrDropdownMenu/index.js +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-BjYw-uTF.js → GrImageViewer-CcduIFsa.js} +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-BjYw-uTF.js.map → GrImageViewer-CcduIFsa.js.map} +1 -1
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrModal/chunks/{GrModal-xIWaJozo.js → GrModal-Cm0mtSXk.js} +1 -1
- package/dist/components/GrModal/chunks/{GrModal-xIWaJozo.js.map → GrModal-Cm0mtSXk.js.map} +1 -1
- package/dist/components/GrModal/index.js +1 -1
- package/dist/components/GrPopover/chunks/{GrPopover-BakLcWkX.js → GrPopover-CcWvr1ZA.js} +1 -1
- package/dist/components/GrPopover/chunks/{GrPopover-BakLcWkX.js.map → GrPopover-CcWvr1ZA.js.map} +1 -1
- package/dist/components/GrPopover/index.js +1 -1
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-C9Y1ifE_.js → GrPromptDialog-8RxQsOQ_.js} +1 -1
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-C9Y1ifE_.js.map → GrPromptDialog-8RxQsOQ_.js.map} +1 -1
- package/dist/components/GrPromptDialog/index.js +1 -1
- package/dist/composables/useFloating.js +1 -1
- package/dist/composables/useOverlayLayer.js +35 -6
- package/dist/composables/useOverlayLayer.js.map +1 -1
- package/dist/composables/useVirtualList.js +23 -1
- package/dist/composables/useVirtualList.js.map +1 -1
- package/dist/index.js +13 -13
- package/dist/types/composables/internal/overlayStack.d.ts +11 -0
- package/dist/types/internal/devHook.d.ts +66 -0
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
- package/dist/chunks/overlayStack-B_UFaFzk.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrPromptDialog-C9Y1ifE_.js","names":[],"sources":["../../../../src/components/GrPromptDialog/GrPromptDialog.vue","../../../../src/components/GrPromptDialog/GrPromptDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n *\n * Проверки сверх `required` описываются пропом `rules` — тем же движком, что и\n * у `GrForm`: третий частный случай валидации в пакете заводить незачем.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTextarea from '../GrTextarea/GrTextarea.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Именованные импорты чистых функций: разметки не тянут, поэтому в\n// `config.dependencies` не объявляются (см. правило про зависимости).\nimport { createGrFormMessageResolver, rulesForTrigger, runFieldRules } from '../GrForm/validation'\nimport type { GrFormRule, GrFormTrigger } from '../GrForm/validation'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\n\n/**\n * Тип поля выводим из самого `GrInput`, а не заводим ему именованный алиас:\n * алиас в пропе `GrInput` заменил бы в таблице API витрины список допустимых\n * значений на своё имя — документация стала бы беднее ради удобства обёртки.\n */\ntype GrInputType = NonNullable<InstanceType<typeof GrInput>['$props']['type']>\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\nimport type { InputHTMLAttributes } from 'vue'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /** Тип однострочного поля. В многострочном режиме не применяется. */\n inputType?: GrInputType\n /** Программная клавиатура на мобильных. */\n inputmode?: InputHTMLAttributes['inputmode']\n /** Ограничение длины; со `showCount` рисуется счётчик. */\n maxlength?: number\n showCount?: boolean\n /** Многострочный ввод: вместо `GrInput` рисуется `GrTextarea`. */\n multiline?: boolean\n /** Высота многострочного поля в строках. */\n rows?: number\n /** Автоподбор высоты многострочного поля под содержимое. */\n autosize?: boolean\n /**\n * Правила проверки значения — те же, что у `GrForm` (`required`, `type`,\n * `min`/`max`/`len`, `pattern`, свой в т.ч. асинхронный `validator`).\n * Прогоняются на blur (после первого касания) и на подтверждении.\n */\n rules?: GrFormRule | GrFormRule[]\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n /**\n * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n * подтверждение или проверка `rules`. Кнопка закрытия и «Отмена» остаются:\n * окно без единого выхода — ловушка.\n */\n persistent?: boolean\n}\n\nexport interface GrPromptDialogEmits {\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n // до того, как компонент заглянет в `GrConfigProvider`.\n size: undefined,\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n inputType: 'text',\n inputmode: undefined,\n maxlength: undefined,\n showCount: false,\n multiline: false,\n rows: undefined,\n autosize: false,\n rules: undefined,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrPromptDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrPromptDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst textareaRef = ref<InstanceType<typeof GrTextarea> | null>(null)\n\n/** Ошибка последнего прогона `rules`; `required` считается отдельно и мгновенно. */\nconst ruleError = ref<string | undefined>(undefined)\nconst validating = ref(false)\n\n// Сторож устаревших прогонов: асинхронное правило может ответить после того,\n// как значение уже сменилось, и дописать чужую ошибку.\nlet validationRun = 0\n\nwatch(\n () => props.modelValue,\n (isOpen) => {\n if (!isOpen)\n return\n\n touched.value = false\n ruleError.value = undefined\n validationRun += 1\n },\n)\n\nconst resolveMessage = createGrFormMessageResolver(t)\n\nconst normalizedRules = computed<GrFormRule[]>(() => {\n if (!props.rules)\n return []\n return Array.isArray(props.rules) ? props.rules : [props.rules]\n})\n\nconst requiredError = computed(() => {\n if (!props.required)\n return undefined\n return valueModel.value.trim().length > 0 ? undefined : resolvedRequiredErrorText.value\n})\n\nconst canConfirm = computed(() => !requiredError.value)\n\nconst validationError = computed(() => {\n if (!touched.value)\n return undefined\n return requiredError.value ?? ruleError.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\n/**\n * Прогоняет `rules` для триггера. Возвращает сообщение или `undefined`.\n * `required` здесь не участвует: он синхронный и считается отдельно, чтобы\n * пустое поле блокировало кнопку без похода в асинхронный движок.\n */\nasync function runRules(trigger: GrFormTrigger): Promise<string | undefined> {\n const rules = rulesForTrigger(normalizedRules.value, trigger)\n if (!rules.length)\n return undefined\n\n const run = ++validationRun\n validating.value = true\n try {\n const message = await runFieldRules(valueModel.value, rules, { value: valueModel.value }, resolveMessage)\n // Ответ устарел — значение или сам диалог успели смениться.\n if (run !== validationRun)\n return undefined\n\n ruleError.value = message\n return message\n }\n finally {\n if (run === validationRun)\n validating.value = false\n }\n}\n\nfunction onBlur(): void {\n touched.value = true\n void runRules('blur')\n}\n\n// Пока подтверждение или проверка в полёте, случайное движение не должно\n// оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && (props.confirmLoading || validating.value))\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction focusField(): void {\n if (props.multiline)\n textareaRef.value?.focus()\n else inputRef.value?.focus()\n}\n\nasync function onConfirm(): Promise<void> {\n touched.value = true\n\n if (!canConfirm.value) {\n focusField()\n return\n }\n\n if (await runRules('submit')) {\n focusField()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n\n/**\n * `Enter` подтверждает — базовое ожидание от окна, единственный смысл которого\n * ввести одно значение. В многострочном режиме `Enter` остаётся переводом\n * строки, поэтому обработчик висит только на однострочном поле.\n */\nfunction onEnter(): void {\n void onConfirm()\n}\n\n// Фокус в поле, а не на панель: диалог существует ровно ради ввода.\n//\n// Через `initialFocus` у `GrModal` это не решается: элемент рождается внутри\n// поддерева диалога, и возврат его же пропом наверх замыкает рендер в цикл\n// («Maximum recursive updates» — проверено). Поэтому фокус ставит содержимое,\n// после отрисовки (`flush: 'post'` + кадр), то есть заведомо позже, чем\n// ловушка фокуса `GrModal` переводит фокус на панель.\n// Источник — не только `modelValue`, но и само поле: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n [() => props.modelValue, inputRef, textareaRef],\n () => {\n if (!props.modelValue)\n return\n focusField()\n },\n // `immediate`: окно могут смонтировать уже открытым — тогда смены пропа не\n // будет вовсе, и без этого фокус остался бы на панели.\n { immediate: true, flush: 'post' },\n)\n\ndefineSlots<{\n /** Содержимое диалога вместо пропа `message`. */\n default?: () => any\n /** Разбор ошибки вместо встроенного баннера. */\n error?: (props: { error: ResponseErrorInfo | null }) => any\n /** Кнопки диалога вместо пары «отмена и подтверждение». */\n footer?: () => any\n}>()\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"resolvedSize\"\n :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n :close-on-esc=\"resolvedCloseOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <!-- `id` полю не задаём: `GrFormField` генерирует его сам, а поле читает\n из контекста. Литеральный id ломал два открытых диалога сразу. -->\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\">\n <GrTextarea\n v-if=\"multiline\"\n ref=\"textareaRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :rows=\"rows\"\n :autosize=\"autosize\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n />\n <GrInput\n v-else\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :type=\"inputType\"\n :inputmode=\"inputmode\"\n :placeholder=\"placeholder\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n @keydown.enter=\"onEnter\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading || validating\"\n :disabled=\"confirmDisabled || (touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n *\n * Проверки сверх `required` описываются пропом `rules` — тем же движком, что и\n * у `GrForm`: третий частный случай валидации в пакете заводить незачем.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTextarea from '../GrTextarea/GrTextarea.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Именованные импорты чистых функций: разметки не тянут, поэтому в\n// `config.dependencies` не объявляются (см. правило про зависимости).\nimport { createGrFormMessageResolver, rulesForTrigger, runFieldRules } from '../GrForm/validation'\nimport type { GrFormRule, GrFormTrigger } from '../GrForm/validation'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\n\n/**\n * Тип поля выводим из самого `GrInput`, а не заводим ему именованный алиас:\n * алиас в пропе `GrInput` заменил бы в таблице API витрины список допустимых\n * значений на своё имя — документация стала бы беднее ради удобства обёртки.\n */\ntype GrInputType = NonNullable<InstanceType<typeof GrInput>['$props']['type']>\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\nimport type { InputHTMLAttributes } from 'vue'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /** Тип однострочного поля. В многострочном режиме не применяется. */\n inputType?: GrInputType\n /** Программная клавиатура на мобильных. */\n inputmode?: InputHTMLAttributes['inputmode']\n /** Ограничение длины; со `showCount` рисуется счётчик. */\n maxlength?: number\n showCount?: boolean\n /** Многострочный ввод: вместо `GrInput` рисуется `GrTextarea`. */\n multiline?: boolean\n /** Высота многострочного поля в строках. */\n rows?: number\n /** Автоподбор высоты многострочного поля под содержимое. */\n autosize?: boolean\n /**\n * Правила проверки значения — те же, что у `GrForm` (`required`, `type`,\n * `min`/`max`/`len`, `pattern`, свой в т.ч. асинхронный `validator`).\n * Прогоняются на blur (после первого касания) и на подтверждении.\n */\n rules?: GrFormRule | GrFormRule[]\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n /**\n * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n * подтверждение или проверка `rules`. Кнопка закрытия и «Отмена» остаются:\n * окно без единого выхода — ловушка.\n */\n persistent?: boolean\n}\n\nexport interface GrPromptDialogEmits {\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n // до того, как компонент заглянет в `GrConfigProvider`.\n size: undefined,\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n inputType: 'text',\n inputmode: undefined,\n maxlength: undefined,\n showCount: false,\n multiline: false,\n rows: undefined,\n autosize: false,\n rules: undefined,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrPromptDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrPromptDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst textareaRef = ref<InstanceType<typeof GrTextarea> | null>(null)\n\n/** Ошибка последнего прогона `rules`; `required` считается отдельно и мгновенно. */\nconst ruleError = ref<string | undefined>(undefined)\nconst validating = ref(false)\n\n// Сторож устаревших прогонов: асинхронное правило может ответить после того,\n// как значение уже сменилось, и дописать чужую ошибку.\nlet validationRun = 0\n\nwatch(\n () => props.modelValue,\n (isOpen) => {\n if (!isOpen)\n return\n\n touched.value = false\n ruleError.value = undefined\n validationRun += 1\n },\n)\n\nconst resolveMessage = createGrFormMessageResolver(t)\n\nconst normalizedRules = computed<GrFormRule[]>(() => {\n if (!props.rules)\n return []\n return Array.isArray(props.rules) ? props.rules : [props.rules]\n})\n\nconst requiredError = computed(() => {\n if (!props.required)\n return undefined\n return valueModel.value.trim().length > 0 ? undefined : resolvedRequiredErrorText.value\n})\n\nconst canConfirm = computed(() => !requiredError.value)\n\nconst validationError = computed(() => {\n if (!touched.value)\n return undefined\n return requiredError.value ?? ruleError.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\n/**\n * Прогоняет `rules` для триггера. Возвращает сообщение или `undefined`.\n * `required` здесь не участвует: он синхронный и считается отдельно, чтобы\n * пустое поле блокировало кнопку без похода в асинхронный движок.\n */\nasync function runRules(trigger: GrFormTrigger): Promise<string | undefined> {\n const rules = rulesForTrigger(normalizedRules.value, trigger)\n if (!rules.length)\n return undefined\n\n const run = ++validationRun\n validating.value = true\n try {\n const message = await runFieldRules(valueModel.value, rules, { value: valueModel.value }, resolveMessage)\n // Ответ устарел — значение или сам диалог успели смениться.\n if (run !== validationRun)\n return undefined\n\n ruleError.value = message\n return message\n }\n finally {\n if (run === validationRun)\n validating.value = false\n }\n}\n\nfunction onBlur(): void {\n touched.value = true\n void runRules('blur')\n}\n\n// Пока подтверждение или проверка в полёте, случайное движение не должно\n// оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && (props.confirmLoading || validating.value))\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction focusField(): void {\n if (props.multiline)\n textareaRef.value?.focus()\n else inputRef.value?.focus()\n}\n\nasync function onConfirm(): Promise<void> {\n touched.value = true\n\n if (!canConfirm.value) {\n focusField()\n return\n }\n\n if (await runRules('submit')) {\n focusField()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n\n/**\n * `Enter` подтверждает — базовое ожидание от окна, единственный смысл которого\n * ввести одно значение. В многострочном режиме `Enter` остаётся переводом\n * строки, поэтому обработчик висит только на однострочном поле.\n */\nfunction onEnter(): void {\n void onConfirm()\n}\n\n// Фокус в поле, а не на панель: диалог существует ровно ради ввода.\n//\n// Через `initialFocus` у `GrModal` это не решается: элемент рождается внутри\n// поддерева диалога, и возврат его же пропом наверх замыкает рендер в цикл\n// («Maximum recursive updates» — проверено). Поэтому фокус ставит содержимое,\n// после отрисовки (`flush: 'post'` + кадр), то есть заведомо позже, чем\n// ловушка фокуса `GrModal` переводит фокус на панель.\n// Источник — не только `modelValue`, но и само поле: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n [() => props.modelValue, inputRef, textareaRef],\n () => {\n if (!props.modelValue)\n return\n focusField()\n },\n // `immediate`: окно могут смонтировать уже открытым — тогда смены пропа не\n // будет вовсе, и без этого фокус остался бы на панели.\n { immediate: true, flush: 'post' },\n)\n\ndefineSlots<{\n /** Содержимое диалога вместо пропа `message`. */\n default?: () => any\n /** Разбор ошибки вместо встроенного баннера. */\n error?: (props: { error: ResponseErrorInfo | null }) => any\n /** Кнопки диалога вместо пары «отмена и подтверждение». */\n footer?: () => any\n}>()\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"resolvedSize\"\n :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n :close-on-esc=\"resolvedCloseOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <!-- `id` полю не задаём: `GrFormField` генерирует его сам, а поле читает\n из контекста. Литеральный id ломал два открытых диалога сразу. -->\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\">\n <GrTextarea\n v-if=\"multiline\"\n ref=\"textareaRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :rows=\"rows\"\n :autosize=\"autosize\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n />\n <GrInput\n v-else\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :type=\"inputType\"\n :inputmode=\"inputmode\"\n :placeholder=\"placeholder\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n @keydown.enter=\"onEnter\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading || validating\"\n :disabled=\"confirmDisabled || (touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrPromptDialog-8RxQsOQ_.js","names":[],"sources":["../../../../src/components/GrPromptDialog/GrPromptDialog.vue","../../../../src/components/GrPromptDialog/GrPromptDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n *\n * Проверки сверх `required` описываются пропом `rules` — тем же движком, что и\n * у `GrForm`: третий частный случай валидации в пакете заводить незачем.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTextarea from '../GrTextarea/GrTextarea.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Именованные импорты чистых функций: разметки не тянут, поэтому в\n// `config.dependencies` не объявляются (см. правило про зависимости).\nimport { createGrFormMessageResolver, rulesForTrigger, runFieldRules } from '../GrForm/validation'\nimport type { GrFormRule, GrFormTrigger } from '../GrForm/validation'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\n\n/**\n * Тип поля выводим из самого `GrInput`, а не заводим ему именованный алиас:\n * алиас в пропе `GrInput` заменил бы в таблице API витрины список допустимых\n * значений на своё имя — документация стала бы беднее ради удобства обёртки.\n */\ntype GrInputType = NonNullable<InstanceType<typeof GrInput>['$props']['type']>\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\nimport type { InputHTMLAttributes } from 'vue'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /** Тип однострочного поля. В многострочном режиме не применяется. */\n inputType?: GrInputType\n /** Программная клавиатура на мобильных. */\n inputmode?: InputHTMLAttributes['inputmode']\n /** Ограничение длины; со `showCount` рисуется счётчик. */\n maxlength?: number\n showCount?: boolean\n /** Многострочный ввод: вместо `GrInput` рисуется `GrTextarea`. */\n multiline?: boolean\n /** Высота многострочного поля в строках. */\n rows?: number\n /** Автоподбор высоты многострочного поля под содержимое. */\n autosize?: boolean\n /**\n * Правила проверки значения — те же, что у `GrForm` (`required`, `type`,\n * `min`/`max`/`len`, `pattern`, свой в т.ч. асинхронный `validator`).\n * Прогоняются на blur (после первого касания) и на подтверждении.\n */\n rules?: GrFormRule | GrFormRule[]\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n /**\n * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n * подтверждение или проверка `rules`. Кнопка закрытия и «Отмена» остаются:\n * окно без единого выхода — ловушка.\n */\n persistent?: boolean\n}\n\nexport interface GrPromptDialogEmits {\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n // до того, как компонент заглянет в `GrConfigProvider`.\n size: undefined,\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n inputType: 'text',\n inputmode: undefined,\n maxlength: undefined,\n showCount: false,\n multiline: false,\n rows: undefined,\n autosize: false,\n rules: undefined,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrPromptDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrPromptDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst textareaRef = ref<InstanceType<typeof GrTextarea> | null>(null)\n\n/** Ошибка последнего прогона `rules`; `required` считается отдельно и мгновенно. */\nconst ruleError = ref<string | undefined>(undefined)\nconst validating = ref(false)\n\n// Сторож устаревших прогонов: асинхронное правило может ответить после того,\n// как значение уже сменилось, и дописать чужую ошибку.\nlet validationRun = 0\n\nwatch(\n () => props.modelValue,\n (isOpen) => {\n if (!isOpen)\n return\n\n touched.value = false\n ruleError.value = undefined\n validationRun += 1\n },\n)\n\nconst resolveMessage = createGrFormMessageResolver(t)\n\nconst normalizedRules = computed<GrFormRule[]>(() => {\n if (!props.rules)\n return []\n return Array.isArray(props.rules) ? props.rules : [props.rules]\n})\n\nconst requiredError = computed(() => {\n if (!props.required)\n return undefined\n return valueModel.value.trim().length > 0 ? undefined : resolvedRequiredErrorText.value\n})\n\nconst canConfirm = computed(() => !requiredError.value)\n\nconst validationError = computed(() => {\n if (!touched.value)\n return undefined\n return requiredError.value ?? ruleError.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\n/**\n * Прогоняет `rules` для триггера. Возвращает сообщение или `undefined`.\n * `required` здесь не участвует: он синхронный и считается отдельно, чтобы\n * пустое поле блокировало кнопку без похода в асинхронный движок.\n */\nasync function runRules(trigger: GrFormTrigger): Promise<string | undefined> {\n const rules = rulesForTrigger(normalizedRules.value, trigger)\n if (!rules.length)\n return undefined\n\n const run = ++validationRun\n validating.value = true\n try {\n const message = await runFieldRules(valueModel.value, rules, { value: valueModel.value }, resolveMessage)\n // Ответ устарел — значение или сам диалог успели смениться.\n if (run !== validationRun)\n return undefined\n\n ruleError.value = message\n return message\n }\n finally {\n if (run === validationRun)\n validating.value = false\n }\n}\n\nfunction onBlur(): void {\n touched.value = true\n void runRules('blur')\n}\n\n// Пока подтверждение или проверка в полёте, случайное движение не должно\n// оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && (props.confirmLoading || validating.value))\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction focusField(): void {\n if (props.multiline)\n textareaRef.value?.focus()\n else inputRef.value?.focus()\n}\n\nasync function onConfirm(): Promise<void> {\n touched.value = true\n\n if (!canConfirm.value) {\n focusField()\n return\n }\n\n if (await runRules('submit')) {\n focusField()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n\n/**\n * `Enter` подтверждает — базовое ожидание от окна, единственный смысл которого\n * ввести одно значение. В многострочном режиме `Enter` остаётся переводом\n * строки, поэтому обработчик висит только на однострочном поле.\n */\nfunction onEnter(): void {\n void onConfirm()\n}\n\n// Фокус в поле, а не на панель: диалог существует ровно ради ввода.\n//\n// Через `initialFocus` у `GrModal` это не решается: элемент рождается внутри\n// поддерева диалога, и возврат его же пропом наверх замыкает рендер в цикл\n// («Maximum recursive updates» — проверено). Поэтому фокус ставит содержимое,\n// после отрисовки (`flush: 'post'` + кадр), то есть заведомо позже, чем\n// ловушка фокуса `GrModal` переводит фокус на панель.\n// Источник — не только `modelValue`, но и само поле: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n [() => props.modelValue, inputRef, textareaRef],\n () => {\n if (!props.modelValue)\n return\n focusField()\n },\n // `immediate`: окно могут смонтировать уже открытым — тогда смены пропа не\n // будет вовсе, и без этого фокус остался бы на панели.\n { immediate: true, flush: 'post' },\n)\n\ndefineSlots<{\n /** Содержимое диалога вместо пропа `message`. */\n default?: () => any\n /** Разбор ошибки вместо встроенного баннера. */\n error?: (props: { error: ResponseErrorInfo | null }) => any\n /** Кнопки диалога вместо пары «отмена и подтверждение». */\n footer?: () => any\n}>()\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"resolvedSize\"\n :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n :close-on-esc=\"resolvedCloseOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <!-- `id` полю не задаём: `GrFormField` генерирует его сам, а поле читает\n из контекста. Литеральный id ломал два открытых диалога сразу. -->\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\">\n <GrTextarea\n v-if=\"multiline\"\n ref=\"textareaRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :rows=\"rows\"\n :autosize=\"autosize\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n />\n <GrInput\n v-else\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :type=\"inputType\"\n :inputmode=\"inputmode\"\n :placeholder=\"placeholder\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n @keydown.enter=\"onEnter\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading || validating\"\n :disabled=\"confirmDisabled || (touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n *\n * Проверки сверх `required` описываются пропом `rules` — тем же движком, что и\n * у `GrForm`: третий частный случай валидации в пакете заводить незачем.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTextarea from '../GrTextarea/GrTextarea.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n// Именованные импорты чистых функций: разметки не тянут, поэтому в\n// `config.dependencies` не объявляются (см. правило про зависимости).\nimport { createGrFormMessageResolver, rulesForTrigger, runFieldRules } from '../GrForm/validation'\nimport type { GrFormRule, GrFormTrigger } from '../GrForm/validation'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\n\n/**\n * Тип поля выводим из самого `GrInput`, а не заводим ему именованный алиас:\n * алиас в пропе `GrInput` заменил бы в таблице API витрины список допустимых\n * значений на своё имя — документация стала бы беднее ради удобства обёртки.\n */\ntype GrInputType = NonNullable<InstanceType<typeof GrInput>['$props']['type']>\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\nimport type { InputHTMLAttributes } from 'vue'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /** Тип однострочного поля. В многострочном режиме не применяется. */\n inputType?: GrInputType\n /** Программная клавиатура на мобильных. */\n inputmode?: InputHTMLAttributes['inputmode']\n /** Ограничение длины; со `showCount` рисуется счётчик. */\n maxlength?: number\n showCount?: boolean\n /** Многострочный ввод: вместо `GrInput` рисуется `GrTextarea`. */\n multiline?: boolean\n /** Высота многострочного поля в строках. */\n rows?: number\n /** Автоподбор высоты многострочного поля под содержимое. */\n autosize?: boolean\n /**\n * Правила проверки значения — те же, что у `GrForm` (`required`, `type`,\n * `min`/`max`/`len`, `pattern`, свой в т.ч. асинхронный `validator`).\n * Прогоняются на blur (после первого касания) и на подтверждении.\n */\n rules?: GrFormRule | GrFormRule[]\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n /**\n * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n * подтверждение или проверка `rules`. Кнопка закрытия и «Отмена» остаются:\n * окно без единого выхода — ловушка.\n */\n persistent?: boolean\n}\n\nexport interface GrPromptDialogEmits {\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n // до того, как компонент заглянет в `GrConfigProvider`.\n size: undefined,\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n inputType: 'text',\n inputmode: undefined,\n maxlength: undefined,\n showCount: false,\n multiline: false,\n rows: undefined,\n autosize: false,\n rules: undefined,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrPromptDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrPromptDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst textareaRef = ref<InstanceType<typeof GrTextarea> | null>(null)\n\n/** Ошибка последнего прогона `rules`; `required` считается отдельно и мгновенно. */\nconst ruleError = ref<string | undefined>(undefined)\nconst validating = ref(false)\n\n// Сторож устаревших прогонов: асинхронное правило может ответить после того,\n// как значение уже сменилось, и дописать чужую ошибку.\nlet validationRun = 0\n\nwatch(\n () => props.modelValue,\n (isOpen) => {\n if (!isOpen)\n return\n\n touched.value = false\n ruleError.value = undefined\n validationRun += 1\n },\n)\n\nconst resolveMessage = createGrFormMessageResolver(t)\n\nconst normalizedRules = computed<GrFormRule[]>(() => {\n if (!props.rules)\n return []\n return Array.isArray(props.rules) ? props.rules : [props.rules]\n})\n\nconst requiredError = computed(() => {\n if (!props.required)\n return undefined\n return valueModel.value.trim().length > 0 ? undefined : resolvedRequiredErrorText.value\n})\n\nconst canConfirm = computed(() => !requiredError.value)\n\nconst validationError = computed(() => {\n if (!touched.value)\n return undefined\n return requiredError.value ?? ruleError.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\n/**\n * Прогоняет `rules` для триггера. Возвращает сообщение или `undefined`.\n * `required` здесь не участвует: он синхронный и считается отдельно, чтобы\n * пустое поле блокировало кнопку без похода в асинхронный движок.\n */\nasync function runRules(trigger: GrFormTrigger): Promise<string | undefined> {\n const rules = rulesForTrigger(normalizedRules.value, trigger)\n if (!rules.length)\n return undefined\n\n const run = ++validationRun\n validating.value = true\n try {\n const message = await runFieldRules(valueModel.value, rules, { value: valueModel.value }, resolveMessage)\n // Ответ устарел — значение или сам диалог успели смениться.\n if (run !== validationRun)\n return undefined\n\n ruleError.value = message\n return message\n }\n finally {\n if (run === validationRun)\n validating.value = false\n }\n}\n\nfunction onBlur(): void {\n touched.value = true\n void runRules('blur')\n}\n\n// Пока подтверждение или проверка в полёте, случайное движение не должно\n// оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && (props.confirmLoading || validating.value))\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction focusField(): void {\n if (props.multiline)\n textareaRef.value?.focus()\n else inputRef.value?.focus()\n}\n\nasync function onConfirm(): Promise<void> {\n touched.value = true\n\n if (!canConfirm.value) {\n focusField()\n return\n }\n\n if (await runRules('submit')) {\n focusField()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n\n/**\n * `Enter` подтверждает — базовое ожидание от окна, единственный смысл которого\n * ввести одно значение. В многострочном режиме `Enter` остаётся переводом\n * строки, поэтому обработчик висит только на однострочном поле.\n */\nfunction onEnter(): void {\n void onConfirm()\n}\n\n// Фокус в поле, а не на панель: диалог существует ровно ради ввода.\n//\n// Через `initialFocus` у `GrModal` это не решается: элемент рождается внутри\n// поддерева диалога, и возврат его же пропом наверх замыкает рендер в цикл\n// («Maximum recursive updates» — проверено). Поэтому фокус ставит содержимое,\n// после отрисовки (`flush: 'post'` + кадр), то есть заведомо позже, чем\n// ловушка фокуса `GrModal` переводит фокус на панель.\n// Источник — не только `modelValue`, но и само поле: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n [() => props.modelValue, inputRef, textareaRef],\n () => {\n if (!props.modelValue)\n return\n focusField()\n },\n // `immediate`: окно могут смонтировать уже открытым — тогда смены пропа не\n // будет вовсе, и без этого фокус остался бы на панели.\n { immediate: true, flush: 'post' },\n)\n\ndefineSlots<{\n /** Содержимое диалога вместо пропа `message`. */\n default?: () => any\n /** Разбор ошибки вместо встроенного баннера. */\n error?: (props: { error: ResponseErrorInfo | null }) => any\n /** Кнопки диалога вместо пары «отмена и подтверждение». */\n footer?: () => any\n}>()\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"resolvedSize\"\n :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n :close-on-esc=\"resolvedCloseOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <!-- `id` полю не задаём: `GrFormField` генерирует его сам, а поле читает\n из контекста. Литеральный id ломал два открытых диалога сразу. -->\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\">\n <GrTextarea\n v-if=\"multiline\"\n ref=\"textareaRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :rows=\"rows\"\n :autosize=\"autosize\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n />\n <GrInput\n v-else\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :type=\"inputType\"\n :inputmode=\"inputmode\"\n :placeholder=\"placeholder\"\n :maxlength=\"maxlength\"\n :show-count=\"showCount\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"onBlur\"\n @keydown.enter=\"onEnter\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading || validating\"\n :disabled=\"confirmDisabled || (touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrPromptDialog_default } from "./chunks/GrPromptDialog-
|
|
1
|
+
import { t as GrPromptDialog_default } from "./chunks/GrPromptDialog-8RxQsOQ_.js";
|
|
2
2
|
import { t as grPromptDialogConfig } from "../../chunks/config-C0Ea9ePP.js";
|
|
3
3
|
export { GrPromptDialog_default as GrPromptDialog, GrPromptDialog_default as default, grPromptDialogConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as floatingLayerZIndex } from "../chunks/overlayStack-
|
|
1
|
+
import { t as floatingLayerZIndex } from "../chunks/overlayStack-DH4Z7am1.js";
|
|
2
2
|
import { nextTick, onBeforeUnmount, ref, watch } from "vue";
|
|
3
3
|
import { autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
|
|
4
4
|
//#region src/composables/useFloating.ts
|
|
@@ -1,7 +1,18 @@
|
|
|
1
|
-
import { a as removeOverlayLayer, i as pushOverlayLayer, n as layerRootsAbove } from "../chunks/overlayStack-
|
|
2
|
-
import { nextTick, onUnmounted, ref, watch } from "vue";
|
|
1
|
+
import { a as removeOverlayLayer, i as pushOverlayLayer, n as layerRootsAbove } from "../chunks/overlayStack-DH4Z7am1.js";
|
|
2
|
+
import { getCurrentInstance, nextTick, onUnmounted, ref, watch } from "vue";
|
|
3
3
|
//#region src/composables/useOverlayLayer.ts
|
|
4
4
|
/**
|
|
5
|
+
* Куда вернётся фокус — строкой: буфер наблюдателя не должен удерживать DOM
|
|
6
|
+
* закрытых слоёв.
|
|
7
|
+
*/
|
|
8
|
+
function describeElement(element) {
|
|
9
|
+
if (!element) return null;
|
|
10
|
+
const tag = element.tagName.toLowerCase();
|
|
11
|
+
const id = element.id ? `#${element.id}` : "";
|
|
12
|
+
const label = element.getAttribute("aria-label") ?? element.textContent?.trim().slice(0, 24) ?? "";
|
|
13
|
+
return `${tag}${id}${label ? ` «${label}»` : ""}`;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
5
16
|
* Регистрирует оверлей в общем стеке слоёв, пока `open` истинно.
|
|
6
17
|
*
|
|
7
18
|
* Один контракт на порядок Esc, `inert` и возврат фокуса — три механизма,
|
|
@@ -25,6 +36,7 @@ function useOverlayLayer(open, onDismiss, options = {}) {
|
|
|
25
36
|
let layerId = null;
|
|
26
37
|
let previouslyFocused = null;
|
|
27
38
|
const depth = ref(0);
|
|
39
|
+
const owner = process.env.NODE_ENV !== "production" ? (getCurrentInstance()?.type)?.__name ?? null : null;
|
|
28
40
|
function register() {
|
|
29
41
|
if (layerId !== null) return;
|
|
30
42
|
if (typeof window === "undefined") return;
|
|
@@ -37,7 +49,13 @@ function useOverlayLayer(open, onDismiss, options = {}) {
|
|
|
37
49
|
setDepth: (value) => {
|
|
38
50
|
depth.value = value;
|
|
39
51
|
},
|
|
40
|
-
root: () => options.root?.value ?? null
|
|
52
|
+
root: () => options.root?.value ?? null,
|
|
53
|
+
owner: process.env.NODE_ENV !== "production" ? owner : void 0,
|
|
54
|
+
describeFocus: process.env.NODE_ENV !== "production" ? () => ({
|
|
55
|
+
inside: focusStillInside(),
|
|
56
|
+
willRestore: options.restoreFocus !== false && previouslyFocused !== null && focusStillInside(),
|
|
57
|
+
restoreTo: describeElement(previouslyFocused)
|
|
58
|
+
}) : void 0
|
|
41
59
|
});
|
|
42
60
|
}
|
|
43
61
|
function unregister() {
|
|
@@ -46,14 +64,25 @@ function useOverlayLayer(open, onDismiss, options = {}) {
|
|
|
46
64
|
layerId = null;
|
|
47
65
|
restoreFocus();
|
|
48
66
|
}
|
|
67
|
+
/**
|
|
68
|
+
* Фокус сейчас внутри слоя (или ещё не уходил из него).
|
|
69
|
+
*
|
|
70
|
+
* Вынесено отдельной функцией не ради красоты: то же условие спрашивает
|
|
71
|
+
* наблюдатель (`describeFocus`), и разъедься они — панель показывала бы
|
|
72
|
+
* решение, которого пакет не принимает.
|
|
73
|
+
*/
|
|
74
|
+
function focusStillInside() {
|
|
75
|
+
if (typeof document === "undefined") return false;
|
|
76
|
+
const active = document.activeElement;
|
|
77
|
+
const root = options.root?.value;
|
|
78
|
+
return !(root && active && active !== document.body && !root.contains(active));
|
|
79
|
+
}
|
|
49
80
|
function restoreFocus() {
|
|
50
81
|
const target = previouslyFocused;
|
|
51
82
|
previouslyFocused = null;
|
|
52
83
|
if (options.restoreFocus === false || !target) return;
|
|
53
84
|
if (typeof document === "undefined") return;
|
|
54
|
-
|
|
55
|
-
const root = options.root?.value;
|
|
56
|
-
if (root && active && active !== document.body && !root.contains(active)) return;
|
|
85
|
+
if (!focusStillInside()) return;
|
|
57
86
|
nextTick(() => {
|
|
58
87
|
if (target.isConnected) target.focus?.();
|
|
59
88
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useOverlayLayer.js","names":[],"sources":["../../src/composables/useOverlayLayer.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { nextTick, onUnmounted, ref, watch } from 'vue'\n\nimport { layerRootsAbove, pushOverlayLayer, removeOverlayLayer } from './internal/overlayStack'\n\nexport interface UseOverlayLayerOptions {\n /**\n * Модальный слой: блокирует страницу, и модалки под ним получают `inert`.\n * Немодальные (поповеры, меню, подсказки) участвуют только в очереди Esc.\n * По умолчанию `false`.\n *\n * Геттером — там, где модальность включается пропом (`GrDrawer`): значение\n * читается в момент регистрации, то есть при каждом открытии.\n */\n modal?: boolean | (() => boolean)\n /**\n * Закрывать ли слой по Esc. Геттер, а не значение, — чтобы читать реактивный\n * проп (`closeOnEsc`). По умолчанию закрывается всегда.\n *\n * Если геттер вернёт `false`, нажатие всё равно не пройдёт на слой ниже:\n * пользователь видит верхним этот слой, и Esc адресован ему.\n */\n closeOnEscape?: () => boolean\n /**\n * Уведомление «этот модальный слой сейчас верхний». Компонент вешает по нему\n * `inert` на свой корень, когда перестал быть верхним.\n */\n onTopmostChange?: (isTopmost: boolean) => void\n /**\n * Возвращать фокус элементу, который был активен до открытия. По умолчанию —\n * да. Отключать имеет смысл там, где фокус с триггера и не уходил: `GrSelect`\n * ведёт список через `aria-activedescendant`.\n */\n restoreFocus?: boolean\n /**\n * Корень слоя. Нужен дважды: для правила возврата фокуса (если на момент\n * закрытия фокус уже вне слоя, пользователь ушёл сам — забирать нельзя) и\n * для ловушки фокуса слоя под ним, которая обязана считать этот корень\n * своим (панель селекта внутри модалки телепортирована в `body`).\n */\n root?: Ref<HTMLElement | null>\n}\n\nexport interface OverlayLayerHandle {\n /**\n * Корни слоёв, открытых поверх этого. Передаётся в `useFocusTrap` как\n * `containers`: пока панель, открытая изнутри окна, жива, фокус в ней\n * законен.\n */\n rootsAbove: () => HTMLElement[]\n /**\n * Позиция среди модальных слоёв, от нуля. По ней компонент считает высоту.\n *\n * Значение **не сбрасывается** при закрытии: слой уходит из стека сразу, а\n * его поддерево живёт до конца leave-анимации. Обнули глубину там — уходящее\n * окно нырнуло бы под соседнее прямо во время ухода.\n */\n depth: Ref<number>\n}\n\n/**\n * Регистрирует оверлей в общем стеке слоёв, пока `open` истинно.\n *\n * Один контракт на порядок Esc, `inert` и возврат фокуса — три механизма,\n * которые обязаны видеть один и тот же порядок слоёв. Что берёт на себя:\n *\n * - **Esc** — верхнему слою, вниз не проваливается;\n * - **`inert`** — через `onTopmostChange` у модальных слоёв;\n * - **возврат фокуса** — по единому правилу (см. ниже).\n *\n * Чего **не** делает: фокус-ловушку — это `useFocusTrap`, отдельный примитив.\n * Поповеру ловушка и не нужна: Tab обязан уводить фокус наружу и закрывать его,\n * поэтому связка «слой + ловушка» собирается в компоненте, а не тут.\n *\n * Правило возврата фокуса: восстанавливаем, **только если на момент закрытия\n * фокус всё ещё внутри слоя**. Если пользователь кликнул в другое поле, фокус\n * уже там — забирать его обратно нельзя. Эвристика «возвращать, если открыли с\n * клавиатуры» промахивается в обе стороны: мышью открытый слой фокус не вернёт,\n * а клавиатурный отберёт его у того, куда пользователь ушёл сам.\n */\nexport function useOverlayLayer(\n open: Ref<boolean>,\n onDismiss: () => void,\n options: UseOverlayLayerOptions = {},\n): OverlayLayerHandle {\n let layerId: number | null = null\n let previouslyFocused: HTMLElement | null = null\n const depth = ref(0)\n\n function register(): void {\n if (layerId !== null)\n return\n\n // Стек — браузерное понятие: Esc, `inert` и возврат фокуса на сервере\n // бессмысленны. Регистрируйся слой и там — он остался бы в модульном массиве\n // навсегда, потому что `onUnmounted` при `renderToString` не вызывается, и\n // каждый серверный рендер открытого оверлея копил бы замыкание со ссылками\n // на свои компоненты.\n if (typeof window === 'undefined')\n return\n\n if (options.restoreFocus !== false && typeof document !== 'undefined')\n previouslyFocused = (document.activeElement as HTMLElement) ?? null\n\n layerId = pushOverlayLayer({\n modal: typeof options.modal === 'function' ? options.modal() : options.modal ?? false,\n shouldClose: () => options.closeOnEscape?.() ?? true,\n close: onDismiss,\n setTopmost: options.onTopmostChange,\n setDepth: (value) => { depth.value = value },\n root: () => options.root?.value ?? null,\n })\n }\n\n function unregister(): void {\n if (layerId === null)\n return\n removeOverlayLayer(layerId)\n layerId = null\n\n restoreFocus()\n }\n\n function restoreFocus(): void {\n const target = previouslyFocused\n previouslyFocused = null\n\n if (options.restoreFocus === false || !target)\n return\n if (typeof document === 'undefined')\n return\n\n // Фокус уже вне слоя — пользователь ушёл сам, отбирать нельзя. Решение\n // принимаем сейчас, пока слой ещё в DOM, а применяем следующим тиком.\n
|
|
1
|
+
{"version":3,"file":"useOverlayLayer.js","names":[],"sources":["../../src/composables/useOverlayLayer.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { getCurrentInstance, nextTick, onUnmounted, ref, watch } from 'vue'\n\nimport { layerRootsAbove, pushOverlayLayer, removeOverlayLayer } from './internal/overlayStack'\n\nexport interface UseOverlayLayerOptions {\n /**\n * Модальный слой: блокирует страницу, и модалки под ним получают `inert`.\n * Немодальные (поповеры, меню, подсказки) участвуют только в очереди Esc.\n * По умолчанию `false`.\n *\n * Геттером — там, где модальность включается пропом (`GrDrawer`): значение\n * читается в момент регистрации, то есть при каждом открытии.\n */\n modal?: boolean | (() => boolean)\n /**\n * Закрывать ли слой по Esc. Геттер, а не значение, — чтобы читать реактивный\n * проп (`closeOnEsc`). По умолчанию закрывается всегда.\n *\n * Если геттер вернёт `false`, нажатие всё равно не пройдёт на слой ниже:\n * пользователь видит верхним этот слой, и Esc адресован ему.\n */\n closeOnEscape?: () => boolean\n /**\n * Уведомление «этот модальный слой сейчас верхний». Компонент вешает по нему\n * `inert` на свой корень, когда перестал быть верхним.\n */\n onTopmostChange?: (isTopmost: boolean) => void\n /**\n * Возвращать фокус элементу, который был активен до открытия. По умолчанию —\n * да. Отключать имеет смысл там, где фокус с триггера и не уходил: `GrSelect`\n * ведёт список через `aria-activedescendant`.\n */\n restoreFocus?: boolean\n /**\n * Корень слоя. Нужен дважды: для правила возврата фокуса (если на момент\n * закрытия фокус уже вне слоя, пользователь ушёл сам — забирать нельзя) и\n * для ловушки фокуса слоя под ним, которая обязана считать этот корень\n * своим (панель селекта внутри модалки телепортирована в `body`).\n */\n root?: Ref<HTMLElement | null>\n}\n\nexport interface OverlayLayerHandle {\n /**\n * Корни слоёв, открытых поверх этого. Передаётся в `useFocusTrap` как\n * `containers`: пока панель, открытая изнутри окна, жива, фокус в ней\n * законен.\n */\n rootsAbove: () => HTMLElement[]\n /**\n * Позиция среди модальных слоёв, от нуля. По ней компонент считает высоту.\n *\n * Значение **не сбрасывается** при закрытии: слой уходит из стека сразу, а\n * его поддерево живёт до конца leave-анимации. Обнули глубину там — уходящее\n * окно нырнуло бы под соседнее прямо во время ухода.\n */\n depth: Ref<number>\n}\n\n/**\n * Куда вернётся фокус — строкой: буфер наблюдателя не должен удерживать DOM\n * закрытых слоёв.\n */\nfunction describeElement(element: HTMLElement | null): string | null {\n if (!element)\n return null\n\n const tag = element.tagName.toLowerCase()\n const id = element.id ? `#${element.id}` : ''\n const label = element.getAttribute('aria-label') ?? element.textContent?.trim().slice(0, 24) ?? ''\n return `${tag}${id}${label ? ` «${label}»` : ''}`\n}\n\n/**\n * Регистрирует оверлей в общем стеке слоёв, пока `open` истинно.\n *\n * Один контракт на порядок Esc, `inert` и возврат фокуса — три механизма,\n * которые обязаны видеть один и тот же порядок слоёв. Что берёт на себя:\n *\n * - **Esc** — верхнему слою, вниз не проваливается;\n * - **`inert`** — через `onTopmostChange` у модальных слоёв;\n * - **возврат фокуса** — по единому правилу (см. ниже).\n *\n * Чего **не** делает: фокус-ловушку — это `useFocusTrap`, отдельный примитив.\n * Поповеру ловушка и не нужна: Tab обязан уводить фокус наружу и закрывать его,\n * поэтому связка «слой + ловушка» собирается в компоненте, а не тут.\n *\n * Правило возврата фокуса: восстанавливаем, **только если на момент закрытия\n * фокус всё ещё внутри слоя**. Если пользователь кликнул в другое поле, фокус\n * уже там — забирать его обратно нельзя. Эвристика «возвращать, если открыли с\n * клавиатуры» промахивается в обе стороны: мышью открытый слой фокус не вернёт,\n * а клавиатурный отберёт его у того, куда пользователь ушёл сам.\n */\nexport function useOverlayLayer(\n open: Ref<boolean>,\n onDismiss: () => void,\n options: UseOverlayLayerOptions = {},\n): OverlayLayerHandle {\n let layerId: number | null = null\n let previouslyFocused: HTMLElement | null = null\n const depth = ref(0)\n // Снимается здесь, а не в `register()`: тот вызывается и из `watch`, где\n // инстанса уже нет. Под гардом — в проде имя компонента никому не нужно.\n const owner = __GR_DEV__ ? (getCurrentInstance()?.type as { __name?: string, name?: string } | undefined)?.__name ?? null : null\n\n function register(): void {\n if (layerId !== null)\n return\n\n // Стек — браузерное понятие: Esc, `inert` и возврат фокуса на сервере\n // бессмысленны. Регистрируйся слой и там — он остался бы в модульном массиве\n // навсегда, потому что `onUnmounted` при `renderToString` не вызывается, и\n // каждый серверный рендер открытого оверлея копил бы замыкание со ссылками\n // на свои компоненты.\n if (typeof window === 'undefined')\n return\n\n if (options.restoreFocus !== false && typeof document !== 'undefined')\n previouslyFocused = (document.activeElement as HTMLElement) ?? null\n\n layerId = pushOverlayLayer({\n modal: typeof options.modal === 'function' ? options.modal() : options.modal ?? false,\n shouldClose: () => options.closeOnEscape?.() ?? true,\n close: onDismiss,\n setTopmost: options.onTopmostChange,\n setDepth: (value) => { depth.value = value },\n root: () => options.root?.value ?? null,\n // Владелец и фокус нужны только наблюдателю; в проде оба выражения\n // сворачиваются вместе с гардом.\n owner: __GR_DEV__ ? owner : undefined,\n describeFocus: __GR_DEV__\n ? () => ({\n inside: focusStillInside(),\n willRestore: options.restoreFocus !== false && previouslyFocused !== null && focusStillInside(),\n restoreTo: describeElement(previouslyFocused),\n })\n : undefined,\n })\n }\n\n function unregister(): void {\n if (layerId === null)\n return\n removeOverlayLayer(layerId)\n layerId = null\n\n restoreFocus()\n }\n\n /**\n * Фокус сейчас внутри слоя (или ещё не уходил из него).\n *\n * Вынесено отдельной функцией не ради красоты: то же условие спрашивает\n * наблюдатель (`describeFocus`), и разъедься они — панель показывала бы\n * решение, которого пакет не принимает.\n */\n function focusStillInside(): boolean {\n if (typeof document === 'undefined')\n return false\n\n const active = document.activeElement\n const root = options.root?.value\n return !(root && active && active !== document.body && !root.contains(active))\n }\n\n function restoreFocus(): void {\n const target = previouslyFocused\n previouslyFocused = null\n\n if (options.restoreFocus === false || !target)\n return\n if (typeof document === 'undefined')\n return\n\n // Фокус уже вне слоя — пользователь ушёл сам, отбирать нельзя. Решение\n // принимаем сейчас, пока слой ещё в DOM, а применяем следующим тиком.\n if (!focusStillInside())\n return\n\n // Возврат откладывается намеренно: ловушка фокуса того же слоя снимает свои\n // слушатели в этом же флаше, и сфокусируй мы триггер сразу — она затащила бы\n // фокус обратно в закрывающийся слой.\n void nextTick(() => {\n if (target.isConnected)\n target.focus?.()\n })\n }\n\n watch(\n open,\n (isOpen) => {\n if (isOpen)\n register()\n else unregister()\n },\n { immediate: true },\n )\n\n onUnmounted(unregister)\n\n return {\n rootsAbove: () => (layerId === null ? [] : layerRootsAbove(layerId)),\n depth,\n }\n}\n"],"mappings":";;;;;;;AAgEA,SAAS,gBAAgB,SAA4C;CACnE,IAAI,CAAC,SACH,OAAO;CAET,MAAM,MAAM,QAAQ,QAAQ,YAAY;CACxC,MAAM,KAAK,QAAQ,KAAK,IAAI,QAAQ,OAAO;CAC3C,MAAM,QAAQ,QAAQ,aAAa,YAAY,KAAK,QAAQ,aAAa,KAAK,CAAC,CAAC,MAAM,GAAG,EAAE,KAAK;CAChG,OAAO,GAAG,MAAM,KAAK,QAAQ,KAAK,MAAM,KAAK;AAC/C;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,gBACd,MACA,WACA,UAAkC,CAAC,GACf;CACpB,IAAI,UAAyB;CAC7B,IAAI,oBAAwC;CAC5C,MAAM,QAAQ,IAAI,CAAC;CAGnB,MAAM,QAAA,QAAA,IAAA,aAAA,gBAAsB,mBAAmB,CAAC,EAAE,KAAA,EAAyD,UAAU,OAAO;CAE5H,SAAS,WAAiB;EACxB,IAAI,YAAY,MACd;EAOF,IAAI,OAAO,WAAW,aACpB;EAEF,IAAI,QAAQ,iBAAiB,SAAS,OAAO,aAAa,aACxD,oBAAqB,SAAS,iBAAiC;EAEjE,UAAU,iBAAiB;GACzB,OAAO,OAAO,QAAQ,UAAU,aAAa,QAAQ,MAAM,IAAI,QAAQ,SAAS;GAChF,mBAAmB,QAAQ,gBAAgB,KAAK;GAChD,OAAO;GACP,YAAY,QAAQ;GACpB,WAAW,UAAU;IAAE,MAAM,QAAQ;GAAM;GAC3C,YAAY,QAAQ,MAAM,SAAS;GAGnC,OAAA,QAAA,IAAA,aAAA,eAAoB,QAAQ,KAAA;GAC5B,eAAA,QAAA,IAAA,aAAA,sBACW;IACL,QAAQ,iBAAiB;IACzB,aAAa,QAAQ,iBAAiB,SAAS,sBAAsB,QAAQ,iBAAiB;IAC9F,WAAW,gBAAgB,iBAAiB;GAC9C,KACA,KAAA;EACN,CAAC;CACH;CAEA,SAAS,aAAmB;EAC1B,IAAI,YAAY,MACd;EACF,mBAAmB,OAAO;EAC1B,UAAU;EAEV,aAAa;CACf;;;;;;;;CASA,SAAS,mBAA4B;EACnC,IAAI,OAAO,aAAa,aACtB,OAAO;EAET,MAAM,SAAS,SAAS;EACxB,MAAM,OAAO,QAAQ,MAAM;EAC3B,OAAO,EAAE,QAAQ,UAAU,WAAW,SAAS,QAAQ,CAAC,KAAK,SAAS,MAAM;CAC9E;CAEA,SAAS,eAAqB;EAC5B,MAAM,SAAS;EACf,oBAAoB;EAEpB,IAAI,QAAQ,iBAAiB,SAAS,CAAC,QACrC;EACF,IAAI,OAAO,aAAa,aACtB;EAIF,IAAI,CAAC,iBAAiB,GACpB;EAKF,eAAoB;GAClB,IAAI,OAAO,aACT,OAAO,QAAQ;EACnB,CAAC;CACH;CAEA,MACE,OACC,WAAW;EACV,IAAI,QACF,SAAS;OACN,WAAW;CAClB,GACA,EAAE,WAAW,KAAK,CACpB;CAEA,YAAY,UAAU;CAEtB,OAAO;EACL,kBAAmB,YAAY,OAAO,CAAC,IAAI,gBAAgB,OAAO;EAClE;CACF;AACF"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { r as registerGrVirtualList } from "../chunks/devHook-CiqijpNM.js";
|
|
2
|
+
import { computed, getCurrentInstance, onScopeDispose, ref, watch } from "vue";
|
|
2
3
|
//#region src/composables/useVirtualList.ts
|
|
3
4
|
var DEFAULT_OVERSCAN = 4;
|
|
4
5
|
/** Порог, ниже которого разницу замеров считаем шумом округления. */
|
|
@@ -222,10 +223,31 @@ function useVirtualList(options) {
|
|
|
222
223
|
offsets = offsets.slice(0, count + 1);
|
|
223
224
|
for (const index of [...measured.keys()]) if (index >= count) measured.delete(index);
|
|
224
225
|
}
|
|
226
|
+
const unregisterFromDevtools = process.env.NODE_ENV !== "production" ? (() => {
|
|
227
|
+
const instance = getCurrentInstance();
|
|
228
|
+
const owner = (instance?.type)?.__name ?? null;
|
|
229
|
+
return registerGrVirtualList(() => {
|
|
230
|
+
const sizes = [...measured.values()];
|
|
231
|
+
const window = range.value;
|
|
232
|
+
return {
|
|
233
|
+
owner,
|
|
234
|
+
uid: instance?.uid ?? null,
|
|
235
|
+
total: options.count(),
|
|
236
|
+
rendered: Math.max(0, window.end - window.start),
|
|
237
|
+
range: {
|
|
238
|
+
start: window.start,
|
|
239
|
+
end: window.end
|
|
240
|
+
},
|
|
241
|
+
estimated: estimateOf(window.start),
|
|
242
|
+
measured: sizes.length > 0 ? sizes.reduce((sum, size) => sum + size, 0) / sizes.length : null
|
|
243
|
+
};
|
|
244
|
+
});
|
|
245
|
+
})() : null;
|
|
225
246
|
onScopeDispose(() => {
|
|
226
247
|
detach();
|
|
227
248
|
sizeObserver?.disconnect();
|
|
228
249
|
viewportObserver?.disconnect();
|
|
250
|
+
unregisterFromDevtools?.();
|
|
229
251
|
});
|
|
230
252
|
return {
|
|
231
253
|
range,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useVirtualList.js","names":[],"sources":["../../src/composables/useVirtualList.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue'\nimport { computed, onScopeDispose, ref, watch } from 'vue'\n\n/**\n * Виртуализация длинного списка: в DOM живёт только окно вокруг вьюпорта.\n *\n * Композабл считает геометрию и отдаёт три числа — какой срез рисовать\n * (`range`), какой высоты держать распорку (`totalSize`) и на сколько сдвинуть\n * отрисованное (`offset`). Разметку строит потребитель: примитив ничего не\n * рендерит и ничего не знает про роли и клавиатуру своего списка.\n *\n * Скролл-протяжённость держат псевдоэлементы контейнера: `spacerStyle` отдаёт\n * их высоты переменными, а правило живёт в `<style>` компонента. Так\n * отрисованные строки остаются **прямыми детьми** контейнера, и роль вроде\n * `tree` или `listbox` не теряет обязательных потомков.\n *\n * ```vue\n * const container = useTemplateRef('scroller')\n * const { range, spacerStyle, measure } = useVirtualList({\n * container,\n * count: () => rows.value.length,\n * itemSize: 28,\n * viewportSize: () => props.maxHeight,\n * })\n *\n * <div\n * ref=\"scroller\"\n * role=\"tree\"\n * data-gr-virtual\n * :style=\"{ overflow: 'auto', maxHeight: '280px', ...spacerStyle }\"\n * >\n * <Row v-for=\"i in window\" :key=\"…\" :ref=\"el => measure(i, el)\" />\n * </div>\n *\n * <style scoped>\n * [data-gr-virtual]::before,\n * [data-gr-virtual]::after { content: ''; display: block; flex: none; }\n * [data-gr-virtual]::before { height: var(--gr-virtual-before, 0px); }\n * [data-gr-virtual]::after { height: var(--gr-virtual-after, 0px); }\n * </style>\n * ```\n *\n * Почему правило повторяется в каждом компоненте, а не лежит в одном файле:\n * единственный глобальный стиль пакета (`styles/base.css`) потребитель вправе\n * не подключать, и уехавшее туда правило молча ломало бы прокрутку. Сверяет\n * копии гейт `src/__tests__/virtualSpacer.test.ts`.\n */\n\n/** Куда поставить элемент относительно вьюпорта при прокрутке к нему. */\nexport type GrVirtualAlign = 'auto' | 'start' | 'center' | 'end'\n\nexport interface UseVirtualListOptions {\n /** Скроллящийся контейнер. До монтирования — `null`. */\n container: Ref<HTMLElement | null>\n /** Сколько элементов в списке. */\n count: () => number\n /**\n * Оценка высоты элемента. Фактическая берётся из замера, как только элемент\n * отрисован, — строки пакета заданы через `min-height`, и точного числа тут\n * знать неоткуда.\n */\n itemSize: number | ((index: number) => number)\n /**\n * Высота вьюпорта до первого замера контейнера. Нужна, чтобы **первый рендер\n * был детерминированным**: на сервере контейнера нет вовсе, а на клиенте он\n * ещё не измерен. Без неё сервер и клиент нарисовали бы разные окна и\n * гидрация разъехалась бы; с ней оба считают окно от одного числа.\n */\n viewportSize?: () => number | undefined\n /**\n * Идентити-токен данных списка — обычно сам массив. Смена идентичности\n * сбрасывает все замеры (`invalidate()`): они привязаны к индексам, и после\n * сортировки или замены массива хранили бы высоты чужих строк.\n *\n * Правило потребителя: **мутация массива на месте сохраняет замеры, замена\n * массива сбрасывает**. Append в тот же реактивный массив (инфинити-скролл)\n * идентичность не меняет — префикс замеров остаётся валидным.\n */\n source?: () => unknown\n /**\n * Зазор между элементами в пикселях (`gap` у flex/grid-контейнера).\n *\n * Замер элемента его не видит — `getBoundingClientRect` меряет коробку, а не\n * шаг раскладки. Без этого числа список считался бы короче, чем он есть,\n * и окно уползало бы тем сильнее, чем дальше прокрутка.\n */\n gap?: number\n /** Сколько элементов рисовать за пределами вьюпорта. По умолчанию `4`. */\n overscan?: number\n}\n\nexport interface UseVirtualListReturn {\n /** Полуинтервал индексов к отрисовке: `[start, end)`. */\n range: ComputedRef<{ start: number, end: number }>\n /** Полная высота содержимого: распорка, которая держит скроллбар. */\n totalSize: ComputedRef<number>\n /** Отступ сверху: высота срезанного до окна. */\n offset: ComputedRef<number>\n /** Отступ снизу: высота срезанного после окна. */\n offsetEnd: ComputedRef<number>\n /**\n * Стиль контейнера: высоты распорок и выключенный scroll anchoring.\n *\n * Имена переменных приезжают готовыми, поэтому написать их руками — и\n * разойтись с правилом в `<style>` — нельзя. Опечатка в имени давала бы\n * список без прокрутки, и увидеть это можно было бы только глазами.\n */\n spacerStyle: ComputedRef<Record<string, string>>\n /** Регистрация отрисованного элемента: замер и подписка на изменение высоты. */\n measure: (index: number, el: Element | null) => void\n /** Прокрутка к элементу. Без выравнивания — минимальным движением. */\n scrollToIndex: (index: number, align?: GrVirtualAlign) => void\n /**\n * Сбрасывает замеры с индекса `from` (по умолчанию — все) к оценкам.\n * Видимые строки перемеряются первым же рендером; для смены данных обычно\n * достаточно опции `source` — ручной вызов нужен, когда высоты строк\n * изменились без замены массива (смена плотности, ресайз колонок).\n */\n invalidate: (from?: number) => void\n}\n\nconst DEFAULT_OVERSCAN = 4\n\n/** Порог, ниже которого разницу замеров считаем шумом округления. */\nconst SIZE_EPSILON = 0.5\n\nfunction readSize(el: Element): number {\n const box = el.getBoundingClientRect().height\n if (box > 0)\n return box\n\n // jsdom не считает layout: `getBoundingClientRect` там всегда нулевой, а\n // `offsetHeight` тест может задать сам.\n return (el as HTMLElement).offsetHeight ?? 0\n}\n\nexport function useVirtualList(options: UseVirtualListOptions): UseVirtualListReturn {\n const overscan = Math.max(0, Math.trunc(options.overscan ?? DEFAULT_OVERSCAN))\n const gap = Math.max(0, options.gap ?? 0)\n const estimateOf = typeof options.itemSize === 'function'\n ? options.itemSize\n : () => options.itemSize as number\n\n const scrollTop = ref(0)\n const measuredViewport = ref(0)\n\n const measured = new Map<number, number>()\n const observedIndex = new WeakMap<Element, number>()\n\n // `ResizeObserver` нет ни на сервере, ни в jsdom. Без него композабл работает\n // на оценках и явных замерах из `measure()` — это рабочий режим, а не отказ.\n const hasResizeObserver = typeof ResizeObserver !== 'undefined'\n const sizeObserver = hasResizeObserver\n ? new ResizeObserver((entries) => {\n for (const entry of entries) {\n const index = observedIndex.get(entry.target)\n if (index !== undefined)\n applySize(index, readSize(entry.target))\n }\n })\n : null\n const viewportObserver = hasResizeObserver ? new ResizeObserver(() => syncViewport()) : null\n let attachedTo: HTMLElement | null = null\n let offsets: number[] = [0]\n /** До какого индекса префикс-суммы актуальны. */\n let builtTo = 0\n\n /** Шаг раскладки: коробка элемента плюс зазор до следующего. */\n function sizeAt(index: number): number {\n return (measured.get(index) ?? estimateOf(index)) + gap\n }\n\n /**\n * Достраивает префикс-суммы до нужного индекса.\n *\n * Замер инвалидирует хвост от своего индекса, а не весь массив: иначе каждая\n * отрисованная строка стоила бы полного пересчёта по всему списку.\n */\n function buildTo(index: number): void {\n const limit = Math.min(index, options.count())\n while (builtTo < limit) {\n offsets[builtTo + 1] = offsets[builtTo] + sizeAt(builtTo)\n builtTo += 1\n }\n }\n\n function offsetAt(index: number): number {\n buildTo(index)\n return offsets[Math.min(Math.max(index, 0), builtTo)] ?? 0\n }\n\n function invalidateFrom(index: number): void {\n if (index < builtTo)\n builtTo = Math.max(0, index)\n }\n\n /** Последний индекс, чьё начало не ниже `px`. */\n function indexAt(px: number): number {\n const count = options.count()\n if (count === 0)\n return 0\n\n buildTo(count)\n\n let low = 0\n let high = builtTo\n while (low < high) {\n const mid = (low + high + 1) >> 1\n if ((offsets[mid] ?? 0) <= px)\n low = mid\n else high = mid - 1\n }\n\n return Math.min(low, count - 1)\n }\n\n function viewportSize(): number {\n return measuredViewport.value || options.viewportSize?.() || 0\n }\n\n /**\n * Геометрия окна одним снимком.\n *\n * Считается явно, а не `computed`'ом поверх смещений: массив префикс-сумм\n * мутируется на месте (иначе каждый замер пересоздавал бы десять тысяч чисел),\n * и вывести из него реактивную зависимость нечем — трекер увидел бы только те\n * индексы, которые пересчитывались в последний проход.\n */\n const geometry = ref({ start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 })\n\n function recompute(): void {\n const count = options.count()\n if (count === 0) {\n geometry.value = { start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 }\n return\n }\n\n const totalSize = offsetAt(count)\n const height = viewportSize()\n\n // Высота неизвестна (контейнера нет и оценки не дали) — рисуем всё: меньше\n // «списка целиком» отрисовать нечего без риска, что до замера так и не\n // дойдёт ни одна строка.\n if (height <= 0) {\n geometry.value = { start: 0, end: count, offset: 0, offsetEnd: 0, total: totalSize }\n return\n }\n\n const start = Math.max(0, indexAt(scrollTop.value) - overscan)\n const end = Math.min(count, indexAt(scrollTop.value + height) + 1 + overscan)\n\n geometry.value = {\n start,\n end,\n offset: offsetAt(start),\n offsetEnd: Math.max(0, totalSize - offsetAt(end)),\n total: totalSize,\n }\n }\n\n const range = computed(() => ({ start: geometry.value.start, end: geometry.value.end }))\n const total = computed(() => geometry.value.total)\n const offset = computed(() => geometry.value.offset)\n const offsetEnd = computed(() => geometry.value.offsetEnd)\n\n const spacerStyle = computed(() => ({\n // Браузерный scroll anchoring обязан быть выключен. Он удерживает видимый\n // узел на месте, подправляя `scrollTop`, когда меняется высота содержимого\n // выше него, — а окно меняет её на каждом кадре прокрутки. Дальше пересчёт\n // окна и якорь начинают двигать список навстречу друг другу, и прокрутка\n // уезжает тем сильнее, чем дальше оценка строки от фактической высоты.\n 'overflow-anchor': 'none',\n '--gr-virtual-before': `${geometry.value.offset}px`,\n '--gr-virtual-after': `${geometry.value.offsetEnd}px`,\n }))\n\n function syncScrollTop(): void {\n const el = options.container.value\n if (!el)\n return\n\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function syncViewport(): void {\n const el = options.container.value\n if (!el)\n return\n\n measuredViewport.value = el.clientHeight\n recompute()\n }\n\n function measure(index: number, el: Element | null): void {\n if (!el)\n return\n\n observedIndex.set(el, index)\n sizeObserver?.observe(el)\n\n applySize(index, readSize(el))\n }\n\n function applySize(index: number, size: number): void {\n if (size <= 0)\n return\n\n const previous = measured.get(index)\n if (previous !== undefined && Math.abs(previous - size) < SIZE_EPSILON)\n return\n\n // Считаем смещение ДО правки: строка ниже вьюпорта позицию не двигает, а\n // строка выше — двигает всё содержимое под курсором.\n const start = offsetAt(index)\n const delta = size - (previous ?? estimateOf(index))\n\n measured.set(index, size)\n invalidateFrom(index)\n\n const el = options.container.value\n // Компенсация: без неё уточнение высоты уже прокрученных строк выглядит как\n // рывок списка вверх или вниз ровно в момент замера.\n if (delta !== 0 && start < scrollTop.value && el) {\n el.scrollTop += delta\n scrollTop.value = el.scrollTop\n }\n\n recompute()\n }\n\n function scrollToIndex(index: number, align: GrVirtualAlign = 'auto'): void {\n const el = options.container.value\n const count = options.count()\n if (!el || count === 0)\n return\n\n const clamped = Math.min(Math.max(index, 0), count - 1)\n const start = offsetAt(clamped)\n const size = sizeAt(clamped)\n const height = el.clientHeight || viewportSize()\n const end = start + size\n\n let next: number\n switch (align) {\n case 'start':\n next = start\n break\n case 'end':\n next = end - height\n break\n case 'center':\n next = start + size / 2 - height / 2\n break\n case 'auto':\n if (start < el.scrollTop)\n next = start\n else if (end > el.scrollTop + height)\n next = end - height\n else return\n break\n }\n\n el.scrollTop = Math.max(0, Math.min(next, offsetAt(count) - height))\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function detach(): void {\n if (!attachedTo)\n return\n attachedTo.removeEventListener('scroll', syncScrollTop)\n viewportObserver?.unobserve(attachedTo)\n attachedTo = null\n }\n\n // Первый снимок до всякого монтирования: на сервере и на первом клиентском\n // рендере контейнера ещё нет, а окно уже должно быть посчитано — и одинаково.\n recompute()\n\n watch(options.container, (el) => {\n detach()\n if (!el)\n return\n\n attachedTo = el\n el.addEventListener('scroll', syncScrollTop, { passive: true })\n viewportObserver?.observe(el)\n syncViewport()\n syncScrollTop()\n }, { immediate: true })\n\n // Длина списка изменилась. Сокращение дополнительно чистит хвост смещений и\n // замеров: он относится к строкам, которых больше нет.\n watch(() => options.count(), (count) => {\n if (count < builtTo)\n truncate(count)\n recompute()\n })\n\n function invalidate(from = 0): void {\n for (const index of [...measured.keys()]) {\n if (index >= from)\n measured.delete(index)\n }\n invalidateFrom(from)\n recompute()\n }\n\n if (options.source) {\n // Идентичность данных сменилась — замеры принадлежат прошлому набору.\n watch(options.source, () => invalidate())\n }\n\n function truncate(count: number): void {\n builtTo = count\n offsets = offsets.slice(0, count + 1)\n for (const index of [...measured.keys()]) {\n if (index >= count)\n measured.delete(index)\n }\n }\n\n onScopeDispose(() => {\n detach()\n sizeObserver?.disconnect()\n viewportObserver?.disconnect()\n })\n\n return { range, totalSize: total, offset, offsetEnd, spacerStyle, measure, scrollToIndex, invalidate }\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useVirtualList.js","names":[],"sources":["../../src/composables/useVirtualList.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue'\nimport { computed, getCurrentInstance, onScopeDispose, ref, watch } from 'vue'\n\nimport { registerGrVirtualList } from '../internal/devHook'\n\n/**\n * Виртуализация длинного списка: в DOM живёт только окно вокруг вьюпорта.\n *\n * Композабл считает геометрию и отдаёт три числа — какой срез рисовать\n * (`range`), какой высоты держать распорку (`totalSize`) и на сколько сдвинуть\n * отрисованное (`offset`). Разметку строит потребитель: примитив ничего не\n * рендерит и ничего не знает про роли и клавиатуру своего списка.\n *\n * Скролл-протяжённость держат псевдоэлементы контейнера: `spacerStyle` отдаёт\n * их высоты переменными, а правило живёт в `<style>` компонента. Так\n * отрисованные строки остаются **прямыми детьми** контейнера, и роль вроде\n * `tree` или `listbox` не теряет обязательных потомков.\n *\n * ```vue\n * const container = useTemplateRef('scroller')\n * const { range, spacerStyle, measure } = useVirtualList({\n * container,\n * count: () => rows.value.length,\n * itemSize: 28,\n * viewportSize: () => props.maxHeight,\n * })\n *\n * <div\n * ref=\"scroller\"\n * role=\"tree\"\n * data-gr-virtual\n * :style=\"{ overflow: 'auto', maxHeight: '280px', ...spacerStyle }\"\n * >\n * <Row v-for=\"i in window\" :key=\"…\" :ref=\"el => measure(i, el)\" />\n * </div>\n *\n * <style scoped>\n * [data-gr-virtual]::before,\n * [data-gr-virtual]::after { content: ''; display: block; flex: none; }\n * [data-gr-virtual]::before { height: var(--gr-virtual-before, 0px); }\n * [data-gr-virtual]::after { height: var(--gr-virtual-after, 0px); }\n * </style>\n * ```\n *\n * Почему правило повторяется в каждом компоненте, а не лежит в одном файле:\n * единственный глобальный стиль пакета (`styles/base.css`) потребитель вправе\n * не подключать, и уехавшее туда правило молча ломало бы прокрутку. Сверяет\n * копии гейт `src/__tests__/virtualSpacer.test.ts`.\n */\n\n/** Куда поставить элемент относительно вьюпорта при прокрутке к нему. */\nexport type GrVirtualAlign = 'auto' | 'start' | 'center' | 'end'\n\nexport interface UseVirtualListOptions {\n /** Скроллящийся контейнер. До монтирования — `null`. */\n container: Ref<HTMLElement | null>\n /** Сколько элементов в списке. */\n count: () => number\n /**\n * Оценка высоты элемента. Фактическая берётся из замера, как только элемент\n * отрисован, — строки пакета заданы через `min-height`, и точного числа тут\n * знать неоткуда.\n */\n itemSize: number | ((index: number) => number)\n /**\n * Высота вьюпорта до первого замера контейнера. Нужна, чтобы **первый рендер\n * был детерминированным**: на сервере контейнера нет вовсе, а на клиенте он\n * ещё не измерен. Без неё сервер и клиент нарисовали бы разные окна и\n * гидрация разъехалась бы; с ней оба считают окно от одного числа.\n */\n viewportSize?: () => number | undefined\n /**\n * Идентити-токен данных списка — обычно сам массив. Смена идентичности\n * сбрасывает все замеры (`invalidate()`): они привязаны к индексам, и после\n * сортировки или замены массива хранили бы высоты чужих строк.\n *\n * Правило потребителя: **мутация массива на месте сохраняет замеры, замена\n * массива сбрасывает**. Append в тот же реактивный массив (инфинити-скролл)\n * идентичность не меняет — префикс замеров остаётся валидным.\n */\n source?: () => unknown\n /**\n * Зазор между элементами в пикселях (`gap` у flex/grid-контейнера).\n *\n * Замер элемента его не видит — `getBoundingClientRect` меряет коробку, а не\n * шаг раскладки. Без этого числа список считался бы короче, чем он есть,\n * и окно уползало бы тем сильнее, чем дальше прокрутка.\n */\n gap?: number\n /** Сколько элементов рисовать за пределами вьюпорта. По умолчанию `4`. */\n overscan?: number\n}\n\nexport interface UseVirtualListReturn {\n /** Полуинтервал индексов к отрисовке: `[start, end)`. */\n range: ComputedRef<{ start: number, end: number }>\n /** Полная высота содержимого: распорка, которая держит скроллбар. */\n totalSize: ComputedRef<number>\n /** Отступ сверху: высота срезанного до окна. */\n offset: ComputedRef<number>\n /** Отступ снизу: высота срезанного после окна. */\n offsetEnd: ComputedRef<number>\n /**\n * Стиль контейнера: высоты распорок и выключенный scroll anchoring.\n *\n * Имена переменных приезжают готовыми, поэтому написать их руками — и\n * разойтись с правилом в `<style>` — нельзя. Опечатка в имени давала бы\n * список без прокрутки, и увидеть это можно было бы только глазами.\n */\n spacerStyle: ComputedRef<Record<string, string>>\n /** Регистрация отрисованного элемента: замер и подписка на изменение высоты. */\n measure: (index: number, el: Element | null) => void\n /** Прокрутка к элементу. Без выравнивания — минимальным движением. */\n scrollToIndex: (index: number, align?: GrVirtualAlign) => void\n /**\n * Сбрасывает замеры с индекса `from` (по умолчанию — все) к оценкам.\n * Видимые строки перемеряются первым же рендером; для смены данных обычно\n * достаточно опции `source` — ручной вызов нужен, когда высоты строк\n * изменились без замены массива (смена плотности, ресайз колонок).\n */\n invalidate: (from?: number) => void\n}\n\nconst DEFAULT_OVERSCAN = 4\n\n/** Порог, ниже которого разницу замеров считаем шумом округления. */\nconst SIZE_EPSILON = 0.5\n\nfunction readSize(el: Element): number {\n const box = el.getBoundingClientRect().height\n if (box > 0)\n return box\n\n // jsdom не считает layout: `getBoundingClientRect` там всегда нулевой, а\n // `offsetHeight` тест может задать сам.\n return (el as HTMLElement).offsetHeight ?? 0\n}\n\nexport function useVirtualList(options: UseVirtualListOptions): UseVirtualListReturn {\n const overscan = Math.max(0, Math.trunc(options.overscan ?? DEFAULT_OVERSCAN))\n const gap = Math.max(0, options.gap ?? 0)\n const estimateOf = typeof options.itemSize === 'function'\n ? options.itemSize\n : () => options.itemSize as number\n\n const scrollTop = ref(0)\n const measuredViewport = ref(0)\n\n const measured = new Map<number, number>()\n const observedIndex = new WeakMap<Element, number>()\n\n // `ResizeObserver` нет ни на сервере, ни в jsdom. Без него композабл работает\n // на оценках и явных замерах из `measure()` — это рабочий режим, а не отказ.\n const hasResizeObserver = typeof ResizeObserver !== 'undefined'\n const sizeObserver = hasResizeObserver\n ? new ResizeObserver((entries) => {\n for (const entry of entries) {\n const index = observedIndex.get(entry.target)\n if (index !== undefined)\n applySize(index, readSize(entry.target))\n }\n })\n : null\n const viewportObserver = hasResizeObserver ? new ResizeObserver(() => syncViewport()) : null\n let attachedTo: HTMLElement | null = null\n let offsets: number[] = [0]\n /** До какого индекса префикс-суммы актуальны. */\n let builtTo = 0\n\n /** Шаг раскладки: коробка элемента плюс зазор до следующего. */\n function sizeAt(index: number): number {\n return (measured.get(index) ?? estimateOf(index)) + gap\n }\n\n /**\n * Достраивает префикс-суммы до нужного индекса.\n *\n * Замер инвалидирует хвост от своего индекса, а не весь массив: иначе каждая\n * отрисованная строка стоила бы полного пересчёта по всему списку.\n */\n function buildTo(index: number): void {\n const limit = Math.min(index, options.count())\n while (builtTo < limit) {\n offsets[builtTo + 1] = offsets[builtTo] + sizeAt(builtTo)\n builtTo += 1\n }\n }\n\n function offsetAt(index: number): number {\n buildTo(index)\n return offsets[Math.min(Math.max(index, 0), builtTo)] ?? 0\n }\n\n function invalidateFrom(index: number): void {\n if (index < builtTo)\n builtTo = Math.max(0, index)\n }\n\n /** Последний индекс, чьё начало не ниже `px`. */\n function indexAt(px: number): number {\n const count = options.count()\n if (count === 0)\n return 0\n\n buildTo(count)\n\n let low = 0\n let high = builtTo\n while (low < high) {\n const mid = (low + high + 1) >> 1\n if ((offsets[mid] ?? 0) <= px)\n low = mid\n else high = mid - 1\n }\n\n return Math.min(low, count - 1)\n }\n\n function viewportSize(): number {\n return measuredViewport.value || options.viewportSize?.() || 0\n }\n\n /**\n * Геометрия окна одним снимком.\n *\n * Считается явно, а не `computed`'ом поверх смещений: массив префикс-сумм\n * мутируется на месте (иначе каждый замер пересоздавал бы десять тысяч чисел),\n * и вывести из него реактивную зависимость нечем — трекер увидел бы только те\n * индексы, которые пересчитывались в последний проход.\n */\n const geometry = ref({ start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 })\n\n function recompute(): void {\n const count = options.count()\n if (count === 0) {\n geometry.value = { start: 0, end: 0, offset: 0, offsetEnd: 0, total: 0 }\n return\n }\n\n const totalSize = offsetAt(count)\n const height = viewportSize()\n\n // Высота неизвестна (контейнера нет и оценки не дали) — рисуем всё: меньше\n // «списка целиком» отрисовать нечего без риска, что до замера так и не\n // дойдёт ни одна строка.\n if (height <= 0) {\n geometry.value = { start: 0, end: count, offset: 0, offsetEnd: 0, total: totalSize }\n return\n }\n\n const start = Math.max(0, indexAt(scrollTop.value) - overscan)\n const end = Math.min(count, indexAt(scrollTop.value + height) + 1 + overscan)\n\n geometry.value = {\n start,\n end,\n offset: offsetAt(start),\n offsetEnd: Math.max(0, totalSize - offsetAt(end)),\n total: totalSize,\n }\n }\n\n const range = computed(() => ({ start: geometry.value.start, end: geometry.value.end }))\n const total = computed(() => geometry.value.total)\n const offset = computed(() => geometry.value.offset)\n const offsetEnd = computed(() => geometry.value.offsetEnd)\n\n const spacerStyle = computed(() => ({\n // Браузерный scroll anchoring обязан быть выключен. Он удерживает видимый\n // узел на месте, подправляя `scrollTop`, когда меняется высота содержимого\n // выше него, — а окно меняет её на каждом кадре прокрутки. Дальше пересчёт\n // окна и якорь начинают двигать список навстречу друг другу, и прокрутка\n // уезжает тем сильнее, чем дальше оценка строки от фактической высоты.\n 'overflow-anchor': 'none',\n '--gr-virtual-before': `${geometry.value.offset}px`,\n '--gr-virtual-after': `${geometry.value.offsetEnd}px`,\n }))\n\n function syncScrollTop(): void {\n const el = options.container.value\n if (!el)\n return\n\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function syncViewport(): void {\n const el = options.container.value\n if (!el)\n return\n\n measuredViewport.value = el.clientHeight\n recompute()\n }\n\n function measure(index: number, el: Element | null): void {\n if (!el)\n return\n\n observedIndex.set(el, index)\n sizeObserver?.observe(el)\n\n applySize(index, readSize(el))\n }\n\n function applySize(index: number, size: number): void {\n if (size <= 0)\n return\n\n const previous = measured.get(index)\n if (previous !== undefined && Math.abs(previous - size) < SIZE_EPSILON)\n return\n\n // Считаем смещение ДО правки: строка ниже вьюпорта позицию не двигает, а\n // строка выше — двигает всё содержимое под курсором.\n const start = offsetAt(index)\n const delta = size - (previous ?? estimateOf(index))\n\n measured.set(index, size)\n invalidateFrom(index)\n\n const el = options.container.value\n // Компенсация: без неё уточнение высоты уже прокрученных строк выглядит как\n // рывок списка вверх или вниз ровно в момент замера.\n if (delta !== 0 && start < scrollTop.value && el) {\n el.scrollTop += delta\n scrollTop.value = el.scrollTop\n }\n\n recompute()\n }\n\n function scrollToIndex(index: number, align: GrVirtualAlign = 'auto'): void {\n const el = options.container.value\n const count = options.count()\n if (!el || count === 0)\n return\n\n const clamped = Math.min(Math.max(index, 0), count - 1)\n const start = offsetAt(clamped)\n const size = sizeAt(clamped)\n const height = el.clientHeight || viewportSize()\n const end = start + size\n\n let next: number\n switch (align) {\n case 'start':\n next = start\n break\n case 'end':\n next = end - height\n break\n case 'center':\n next = start + size / 2 - height / 2\n break\n case 'auto':\n if (start < el.scrollTop)\n next = start\n else if (end > el.scrollTop + height)\n next = end - height\n else return\n break\n }\n\n el.scrollTop = Math.max(0, Math.min(next, offsetAt(count) - height))\n scrollTop.value = el.scrollTop\n recompute()\n }\n\n function detach(): void {\n if (!attachedTo)\n return\n attachedTo.removeEventListener('scroll', syncScrollTop)\n viewportObserver?.unobserve(attachedTo)\n attachedTo = null\n }\n\n // Первый снимок до всякого монтирования: на сервере и на первом клиентском\n // рендере контейнера ещё нет, а окно уже должно быть посчитано — и одинаково.\n recompute()\n\n watch(options.container, (el) => {\n detach()\n if (!el)\n return\n\n attachedTo = el\n el.addEventListener('scroll', syncScrollTop, { passive: true })\n viewportObserver?.observe(el)\n syncViewport()\n syncScrollTop()\n }, { immediate: true })\n\n // Длина списка изменилась. Сокращение дополнительно чистит хвост смещений и\n // замеров: он относится к строкам, которых больше нет.\n watch(() => options.count(), (count) => {\n if (count < builtTo)\n truncate(count)\n recompute()\n })\n\n function invalidate(from = 0): void {\n for (const index of [...measured.keys()]) {\n if (index >= from)\n measured.delete(index)\n }\n invalidateFrom(from)\n recompute()\n }\n\n if (options.source) {\n // Идентичность данных сменилась — замеры принадлежат прошлому набору.\n watch(options.source, () => invalidate())\n }\n\n function truncate(count: number): void {\n builtTo = count\n offsets = offsets.slice(0, count + 1)\n for (const index of [...measured.keys()]) {\n if (index >= count)\n measured.delete(index)\n }\n }\n\n // Наблюдателю окно отдаётся реестром, а не событием: оно меняется на каждом\n // кадре прокрутки, и лента событий тут была бы бессмысленным потоком.\n const unregisterFromDevtools = __GR_DEV__\n ? (() => {\n const instance = getCurrentInstance()\n const owner = (instance?.type as { __name?: string, name?: string } | undefined)?.__name ?? null\n\n return registerGrVirtualList(() => {\n const sizes = [...measured.values()]\n const window = range.value\n\n return {\n owner,\n uid: instance?.uid ?? null,\n total: options.count(),\n rendered: Math.max(0, window.end - window.start),\n range: { start: window.start, end: window.end },\n estimated: estimateOf(window.start),\n measured: sizes.length > 0 ? sizes.reduce((sum, size) => sum + size, 0) / sizes.length : null,\n }\n })\n })()\n : null\n\n onScopeDispose(() => {\n detach()\n sizeObserver?.disconnect()\n viewportObserver?.disconnect()\n unregisterFromDevtools?.()\n })\n\n return { range, totalSize: total, offset, offsetEnd, spacerStyle, measure, scrollToIndex, invalidate }\n}\n"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -63,24 +63,24 @@ import { n as GrCollapse_default, t as GrCollapseItem_default } from "./componen
|
|
|
63
63
|
import { n as grIconSafelist, t as grIconConfig } from "./chunks/config-3bQeQvqd.js";
|
|
64
64
|
import { t as GrInput_default } from "./components/GrInput/chunks/GrInput-TFeBm3gQ.js";
|
|
65
65
|
import { t as useFocusTrap } from "./chunks/useFocusTrap-D9bIPNF6.js";
|
|
66
|
-
import { t as GrPopover_default } from "./components/GrPopover/chunks/GrPopover-
|
|
66
|
+
import { t as GrPopover_default } from "./components/GrPopover/chunks/GrPopover-CcWvr1ZA.js";
|
|
67
67
|
import { useDragGesture } from "./composables/useDragGesture.js";
|
|
68
68
|
import { t as GrSlider_default } from "./components/GrSlider/chunks/GrSlider-Db-jACXz.js";
|
|
69
|
-
import { t as GrColorPicker_default } from "./components/GrColorPicker/chunks/GrColorPicker-
|
|
69
|
+
import { t as GrColorPicker_default } from "./components/GrColorPicker/chunks/GrColorPicker-BwzRLs-i.js";
|
|
70
70
|
import { n as grColorPickerSafelist, t as grColorPickerConfig } from "./chunks/config-DIDz_E5m.js";
|
|
71
71
|
import { a as GR_KBD_TOKENS, o as findKbdToken, t as GrKbd_default } from "./components/GrKbd/chunks/GrKbd-D_a1mPLe.js";
|
|
72
|
-
import { t as GrModal_default } from "./components/GrModal/chunks/GrModal-
|
|
73
|
-
import { t as GrCommandPalette_default } from "./components/GrCommandPalette/chunks/GrCommandPalette-
|
|
72
|
+
import { t as GrModal_default } from "./components/GrModal/chunks/GrModal-Cm0mtSXk.js";
|
|
73
|
+
import { t as GrCommandPalette_default } from "./components/GrCommandPalette/chunks/GrCommandPalette-CnzPuoIM.js";
|
|
74
74
|
import { n as grCommandPaletteSafelist, t as grCommandPaletteConfig } from "./chunks/config-D0NzGYaE.js";
|
|
75
75
|
import { t as GrConfigProvider_default } from "./components/GrConfigProvider/chunks/GrConfigProvider-t9x2UToH.js";
|
|
76
76
|
import { t as grConfigProviderConfig } from "./chunks/config-B7W9VlZ7.js";
|
|
77
|
-
import { i as GrDialogFooter_default, n as GrDialogHeader_default, r as GrDialogCloseButton_default, t as GrDialog_default } from "./components/GrDialog/chunks/GrDialog-
|
|
77
|
+
import { i as GrDialogFooter_default, n as GrDialogHeader_default, r as GrDialogCloseButton_default, t as GrDialog_default } from "./components/GrDialog/chunks/GrDialog-DDz_OEhk.js";
|
|
78
78
|
import { a as extendDefaultParsers, n as coreResponseErrorParsers, r as createResponseErrorClassifier, s as normalizeError, t as GrResponseErrorBanner_default } from "./components/GrResponseErrorBanner/chunks/GrResponseErrorBanner-NEEJZ8zi.js";
|
|
79
|
-
import { t as GrConfirmDialog_default } from "./components/GrConfirmDialog/chunks/GrConfirmDialog-
|
|
79
|
+
import { t as GrConfirmDialog_default } from "./components/GrConfirmDialog/chunks/GrConfirmDialog-e15nFI8M.js";
|
|
80
80
|
import { t as grConfirmDialogConfig } from "./chunks/config-A-bBiotF.js";
|
|
81
81
|
import "./components/GrConfirmDialog/index.js";
|
|
82
82
|
import { a as GrDropdownMenuItem_default, c as GrDropdownMenuDivider_default, o as GrDropdownMenuGroup_default, s as GrDropdownMenuHeader_default, t as GrDropdownMenuList_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenuList-B33ZzwfB.js";
|
|
83
|
-
import { t as GrContextMenu_default } from "./components/GrContextMenu/chunks/GrContextMenu-
|
|
83
|
+
import { t as GrContextMenu_default } from "./components/GrContextMenu/chunks/GrContextMenu-RpxMHQXH.js";
|
|
84
84
|
import { t as grContextMenuConfig } from "./chunks/config-CsCUuukB.js";
|
|
85
85
|
import { t as GrTable_default } from "./components/GrTable/chunks/GrTable-iwzHvlMC.js";
|
|
86
86
|
import { t as useDragSort } from "./chunks/useDragSort-0l47h4yb.js";
|
|
@@ -99,17 +99,17 @@ import { n as useGrFormContext } from "./chunks/context-Bfrgsluh.js";
|
|
|
99
99
|
import { t as GrFormField_default } from "./components/GrFormField/chunks/GrFormField-DO61vxpS.js";
|
|
100
100
|
import { t as GrTextarea_default } from "./components/GrTextarea/chunks/GrTextarea-BII3w61K.js";
|
|
101
101
|
import { n as getByPath, o as runFieldRules, r as isEmpty, s as setByPath, t as createGrFormMessageResolver } from "./chunks/validation-BDjqsuGB.js";
|
|
102
|
-
import { t as GrPromptDialog_default } from "./components/GrPromptDialog/chunks/GrPromptDialog-
|
|
103
|
-
import { a as useDialogService, i as teardownDialogService, n as dialogService, r as granularityDialogServicePlugin, t as GrDialogServiceHost_default } from "./components/GrDialogService/chunks/GrDialogService-
|
|
102
|
+
import { t as GrPromptDialog_default } from "./components/GrPromptDialog/chunks/GrPromptDialog-8RxQsOQ_.js";
|
|
103
|
+
import { a as useDialogService, i as teardownDialogService, n as dialogService, r as granularityDialogServicePlugin, t as GrDialogServiceHost_default } from "./components/GrDialogService/chunks/GrDialogService-BmXiYmUp.js";
|
|
104
104
|
import { t as grDialogServiceConfig } from "./chunks/config-CjXjhphs.js";
|
|
105
105
|
import { n as grDividerSafelist, t as grDividerConfig } from "./chunks/config-D82r782v.js";
|
|
106
106
|
import { t as GrDivider_default } from "./components/GrDivider/chunks/GrDivider-DxA-zV25.js";
|
|
107
107
|
import { n as grDrawerSafelist, t as grDrawerConfig } from "./chunks/config-ChPg-BQv.js";
|
|
108
|
-
import { t as GrDrawer_default } from "./components/GrDrawer/chunks/GrDrawer-
|
|
109
|
-
import { t as GrDropdown_default } from "./components/GrDropdown/chunks/GrDropdown-
|
|
108
|
+
import { t as GrDrawer_default } from "./components/GrDrawer/chunks/GrDrawer-BRMHhvbd.js";
|
|
109
|
+
import { t as GrDropdown_default } from "./components/GrDropdown/chunks/GrDropdown-cLZuZMEY.js";
|
|
110
110
|
import { n as grDropdownSafelist, t as grDropdownConfig } from "./chunks/config-CT4lP6S4.js";
|
|
111
111
|
import "./components/GrDropdown/index.js";
|
|
112
|
-
import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-
|
|
112
|
+
import { n as GrDropdownMenuColumn_default, r as GrDropdownMenu_default, t as GrDropdownMenuColumns_default } from "./components/GrDropdownMenu/chunks/GrDropdownMenu-Dxkz_ry4.js";
|
|
113
113
|
import { n as grDropdownMenuSafelist, t as grDropdownMenuConfig } from "./chunks/config-_jbgsFpw.js";
|
|
114
114
|
import { t as GrEmptyState_default } from "./components/GrEmptyState/chunks/GrEmptyState-BbvwE-E0.js";
|
|
115
115
|
import { n as grEmptyStateSafelist, t as grEmptyStateConfig } from "./chunks/config-CWtfxkM9.js";
|
|
@@ -126,7 +126,7 @@ import { t as GrFormFile_default } from "./components/GrFormFile/chunks/GrFormFi
|
|
|
126
126
|
import { n as grFormFileSafelist, t as grFormFileConfig } from "./chunks/config-BcXX7S7B.js";
|
|
127
127
|
import { n as grFormSectionSafelist, t as grFormSectionConfig } from "./chunks/config-BEO7brpO.js";
|
|
128
128
|
import { t as GrFormSection_default } from "./components/GrFormSection/chunks/GrFormSection-DV1S6R_N.js";
|
|
129
|
-
import { t as GrImageViewer_default } from "./components/GrImageViewer/chunks/GrImageViewer-
|
|
129
|
+
import { t as GrImageViewer_default } from "./components/GrImageViewer/chunks/GrImageViewer-CcduIFsa.js";
|
|
130
130
|
import { n as grImageViewerSafelist, t as grImageViewerConfig } from "./chunks/config-BDSaD-5p.js";
|
|
131
131
|
import { n as grInputSafelist, t as grInputConfig } from "./chunks/config-CIkdsWUk.js";
|
|
132
132
|
import "./components/GrInput/index.js";
|
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
* видит слои из **разных деревьев рендера** (диалоги `useDialogService`
|
|
23
23
|
* монтируются отдельным `render()` в `body`) и знает их корни.
|
|
24
24
|
*/
|
|
25
|
+
import type { GrLayerFocus } from '../../internal/devHook';
|
|
25
26
|
export interface OverlayLayer {
|
|
26
27
|
/** Уникальный id зарегистрированного слоя. */
|
|
27
28
|
id: number;
|
|
@@ -52,6 +53,16 @@ export interface OverlayLayer {
|
|
|
52
53
|
* вне DOM-поддерева окна, но для пользователя это тот же слой.
|
|
53
54
|
*/
|
|
54
55
|
root?: () => HTMLElement | null;
|
|
56
|
+
/**
|
|
57
|
+
* Компонент, открывший слой. Только для наблюдателя: стеку он не нужен, но
|
|
58
|
+
* без него слой в панели — безымянный номер.
|
|
59
|
+
*/
|
|
60
|
+
owner?: string | null;
|
|
61
|
+
/**
|
|
62
|
+
* Картина фокуса глазами самого слоя. Геттер, а не значение: она меняется от
|
|
63
|
+
* каждого клика, а спрашивают её только в момент снимка.
|
|
64
|
+
*/
|
|
65
|
+
describeFocus?: () => GrLayerFocus | null;
|
|
55
66
|
}
|
|
56
67
|
/** Регистрирует слой как верхний и возвращает его id. */
|
|
57
68
|
export declare function pushOverlayLayer(layer: Omit<OverlayLayer, 'id'>): number;
|