@feugene/granularity 0.41.0 → 0.43.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/LICENSE +13 -162
- package/README.md +5 -5
- package/dist/chunks/config-BXRmsn3t.js +172 -0
- package/dist/chunks/config-BXRmsn3t.js.map +1 -0
- package/dist/chunks/{config-BRESvs9g.js → config-Ca8qr8Q3.js} +1 -1
- package/dist/chunks/{config-BRESvs9g.js.map → config-Ca8qr8Q3.js.map} +1 -1
- package/dist/chunks/config-Dg0bSoGw.js +81 -0
- package/dist/chunks/config-Dg0bSoGw.js.map +1 -0
- package/dist/chunks/config-DmED6aJV.js +237 -0
- package/dist/chunks/config-DmED6aJV.js.map +1 -0
- package/dist/chunks/{config-DWL81-aM.js → config-hnoZvcIM.js} +2 -20
- package/dist/chunks/config-hnoZvcIM.js.map +1 -0
- package/dist/chunks/dragSortGeometry-CY-llfrQ.js +87 -0
- package/dist/chunks/dragSortGeometry-CY-llfrQ.js.map +1 -0
- package/dist/chunks/{en-CuuLfNHX.js → en-C_QkUTRL.js} +36 -1
- package/dist/chunks/en-C_QkUTRL.js.map +1 -0
- package/dist/chunks/{es-CsmvfESn.js → es-B4t_3Wnh.js} +3 -3
- package/dist/chunks/{es-CsmvfESn.js.map → es-B4t_3Wnh.js.map} +1 -1
- package/dist/chunks/{es-CSnmrcMw.js → es-DemSEhZE.js} +36 -1
- package/dist/chunks/es-DemSEhZE.js.map +1 -0
- package/dist/chunks/{generated-B95IBXs6.js → generated-VcxJTo_q.js} +210 -0
- package/dist/chunks/generated-VcxJTo_q.js.map +1 -0
- package/dist/chunks/{grKbdStyles-DENu8pUK.js → grKbdStyles-ByMsX-lQ.js} +17 -2
- package/dist/chunks/grKbdStyles-ByMsX-lQ.js.map +1 -0
- package/dist/chunks/{granular-provider-BshNi2la.js → granular-provider-BohXQcNt.js} +8 -2
- package/dist/chunks/granular-provider-BohXQcNt.js.map +1 -0
- package/dist/chunks/{ru-BKWafECI.js → ru-CLUErjhY.js} +36 -1
- package/dist/chunks/ru-CLUErjhY.js.map +1 -0
- package/dist/chunks/scrollOverflow-B_kEdcol.js +31 -0
- package/dist/chunks/scrollOverflow-B_kEdcol.js.map +1 -0
- package/dist/chunks/tones-CRJAaYyg.js +21 -0
- package/dist/chunks/tones-CRJAaYyg.js.map +1 -0
- package/dist/components/GrAffix/chunks/GrAffix-CWtC7yi8.js +272 -0
- package/dist/components/GrAffix/chunks/GrAffix-CWtC7yi8.js.map +1 -0
- package/dist/components/GrAffix/index.js +3 -0
- package/dist/components/GrBreadcrumbs/chunks/{GrBreadcrumbs-DOpwY2EF.js → GrBreadcrumbs-D0qPry_R.js} +4 -1
- package/dist/components/GrBreadcrumbs/chunks/GrBreadcrumbs-D0qPry_R.js.map +1 -0
- package/dist/components/GrBreadcrumbs/index.js +1 -1
- package/dist/components/GrCarousel/chunks/GrCarousel-ByuughtI.js +761 -0
- package/dist/components/GrCarousel/chunks/GrCarousel-ByuughtI.js.map +1 -0
- package/dist/components/GrCarousel/index.js +3 -0
- package/dist/components/GrCarousel/styles.css +1 -0
- package/dist/components/GrColorPicker/chunks/{GrColorPicker-BwzRLs-i.js → GrColorPicker-9mTR-YZ_.js} +1 -1
- package/dist/components/GrColorPicker/chunks/{GrColorPicker-BwzRLs-i.js.map → GrColorPicker-9mTR-YZ_.js.map} +1 -1
- package/dist/components/GrColorPicker/index.js +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-CnzPuoIM.js → GrCommandPalette-Ha4s3DMT.js} +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-CnzPuoIM.js.map → GrCommandPalette-Ha4s3DMT.js.map} +1 -1
- package/dist/components/GrCommandPalette/index.js +1 -1
- package/dist/components/GrDataTable/chunks/{GrDataTable-DpyipOFx.js → GrDataTable-xNSmO_I-.js} +9 -4
- package/dist/components/GrDataTable/chunks/GrDataTable-xNSmO_I-.js.map +1 -0
- package/dist/components/GrDataTable/index.js +1 -1
- package/dist/components/GrDelta/chunks/{GrDelta-BpfqebEV.js → GrDelta-CgTvfoIN.js} +0 -0
- package/dist/components/GrDelta/chunks/GrDelta-CgTvfoIN.js.map +1 -0
- package/dist/components/GrDelta/index.js +1 -1
- package/dist/components/GrDescriptionList/chunks/{GrDescriptionList-D8ANFpn_.js → GrDescriptionList-Dz2Jj1if.js} +26 -11
- package/dist/components/GrDescriptionList/chunks/GrDescriptionList-Dz2Jj1if.js.map +1 -0
- package/dist/components/GrDescriptionList/index.js +1 -1
- package/dist/components/GrFilePreview/chunks/{GrFilePreview-PabkLgYX.js → GrFilePreview-2kVOg1C7.js} +40 -5
- package/dist/components/GrFilePreview/chunks/GrFilePreview-2kVOg1C7.js.map +1 -0
- package/dist/components/GrFilePreview/index.js +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-Dd2gJ-j_.js.map → GrImageViewer-DK-iVHHC.js.map} +1 -1
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrInputTag/chunks/{GrInputTag-3Au5HWZL.js → GrInputTag-Ci8AO1ze.js} +5 -2
- package/dist/components/GrInputTag/chunks/GrInputTag-Ci8AO1ze.js.map +1 -0
- package/dist/components/GrInputTag/index.js +1 -1
- package/dist/components/GrJsonViewer/chunks/{GrJsonViewer-CDGOX3C0.js → GrJsonViewer-CwCBMh4h.js} +34 -8
- package/dist/components/GrJsonViewer/chunks/GrJsonViewer-CwCBMh4h.js.map +1 -0
- package/dist/components/GrJsonViewer/index.js +1 -1
- package/dist/components/GrKbd/chunks/{GrKbd-D_a1mPLe.js → GrKbd-BNMeoaLV.js} +1 -1
- package/dist/components/GrKbd/chunks/{GrKbd-D_a1mPLe.js.map → GrKbd-BNMeoaLV.js.map} +1 -1
- package/dist/components/GrKbd/index.js +2 -2
- package/dist/components/GrNumberInput/chunks/{GrNumberInput-BqPydXpK.js → GrNumberInput-CL5QhOmx.js} +5 -2
- package/dist/components/GrNumberInput/chunks/GrNumberInput-CL5QhOmx.js.map +1 -0
- package/dist/components/GrNumberInput/index.js +1 -1
- package/dist/components/GrProgressBar/index.js +1 -1
- package/dist/components/GrSegmented/chunks/{GrSegmented-NKTi9bMG.js → GrSegmented-CuDaKA6S.js} +5 -1
- package/dist/components/GrSegmented/chunks/GrSegmented-CuDaKA6S.js.map +1 -0
- package/dist/components/GrSegmented/index.js +1 -1
- package/dist/components/GrSlider/chunks/{GrSlider-Db-jACXz.js.map → GrSlider-CO8N9SF6.js.map} +1 -1
- package/dist/components/GrSlider/index.js +1 -1
- package/dist/components/GrSortableList/chunks/{GrSortableList-CQCaWivn.js → GrSortableList-NKriuGm_.js} +6 -2
- package/dist/components/GrSortableList/chunks/GrSortableList-NKriuGm_.js.map +1 -0
- package/dist/components/GrSortableList/index.js +1 -1
- package/dist/components/GrSteps/chunks/{GrSteps-DXj7m-WO.js → GrSteps-Cng-Wrjk.js} +5 -1
- package/dist/components/GrSteps/chunks/GrSteps-Cng-Wrjk.js.map +1 -0
- package/dist/components/GrSteps/index.js +1 -1
- package/dist/components/GrTabs/chunks/{GrTabs-DHfv67cp.js → GrTabs-s9RzC1WX.js} +7 -32
- package/dist/components/GrTabs/chunks/GrTabs-s9RzC1WX.js.map +1 -0
- package/dist/components/GrTabs/index.js +1 -1
- package/dist/components/GrTransfer/chunks/GrTransfer-8FA78ny6.js +1368 -0
- package/dist/components/GrTransfer/chunks/GrTransfer-8FA78ny6.js.map +1 -0
- package/dist/components/GrTransfer/index.js +3 -0
- package/dist/components/GrTransfer/styles.css +1 -0
- package/dist/components/GrTree/chunks/{GrTree-BFWFc0Bm.js → GrTree-CkHzgYg1.js} +3 -3
- package/dist/components/GrTree/chunks/{GrTree-BFWFc0Bm.js.map → GrTree-CkHzgYg1.js.map} +1 -1
- package/dist/components/GrTree/index.js +1 -1
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-DJa2lYGe.js → GrTreeSelect-DUsv3_mF.js} +1 -1
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-DJa2lYGe.js.map → GrTreeSelect-DUsv3_mF.js.map} +1 -1
- package/dist/components/GrTreeSelect/index.js +1 -1
- package/dist/composables/useDragSort.js +179 -1
- package/dist/composables/useDragSort.js.map +1 -0
- package/dist/granular-provider-node.js +1 -1
- package/dist/granular-provider.js +1 -1
- package/dist/i18n/all.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/index.js +32 -28
- package/dist/theme.js +1 -1
- package/dist/tokens.js +1 -1
- package/dist/types/components/GrAffix/GrAffix.vue.d.ts +91 -0
- package/dist/types/components/GrAffix/affixState.d.ts +81 -0
- package/dist/types/components/GrAffix/config.d.ts +1 -0
- package/dist/types/components/GrAffix/grAffixStyles.d.ts +46 -0
- package/dist/types/components/GrAffix/index.d.ts +9 -0
- package/dist/types/components/GrAffix/safelist.d.ts +1 -0
- package/dist/types/components/GrAlert/GrAlert.vue.d.ts +1 -1
- package/dist/types/components/GrBadgeWrap/GrBadgeWrap.vue.d.ts +2 -2
- package/dist/types/components/GrButton/GrButton.vue.d.ts +2 -2
- package/dist/types/components/GrCard/GrCard.vue.d.ts +1 -1
- package/dist/types/components/GrCarousel/GrCarousel.vue.d.ts +151 -0
- package/dist/types/components/GrCarousel/GrCarouselSlide.vue.d.ts +53 -0
- package/dist/types/components/GrCarousel/carouselNavigation.d.ts +57 -0
- package/dist/types/components/GrCarousel/composables/useCarouselAutoplay.d.ts +33 -0
- package/dist/types/components/GrCarousel/composables/useCarouselSwipe.d.ts +20 -0
- package/dist/types/components/GrCarousel/config.d.ts +7 -0
- package/dist/types/components/GrCarousel/defaults.d.ts +13 -0
- package/dist/types/components/GrCarousel/grCarouselContext.d.ts +46 -0
- package/dist/types/components/GrCarousel/grCarouselStyles.d.ts +80 -0
- package/dist/types/components/GrCarousel/index.d.ts +12 -0
- package/dist/types/components/GrCarousel/safelist.d.ts +1 -0
- package/dist/types/components/GrCheckbox/GrCheckbox.vue.d.ts +3 -3
- package/dist/types/components/GrCheckboxGroup/GrCheckboxGroup.vue.d.ts +2 -2
- package/dist/types/components/GrChip/GrChip.vue.d.ts +2 -2
- package/dist/types/components/GrChipGroup/GrChipGroup.vue.d.ts +2 -2
- package/dist/types/components/GrCollapse/GrCollapse.vue.d.ts +1 -1
- package/dist/types/components/GrCollapse/GrCollapseItem.vue.d.ts +1 -1
- package/dist/types/components/GrColorPicker/GrColorPicker.vue.d.ts +3 -3
- package/dist/types/components/GrCommandPalette/GrCommandPalette.vue.d.ts +1 -1
- package/dist/types/components/GrConfirmDialog/GrConfirmDialog.vue.d.ts +1 -1
- package/dist/types/components/GrContextMenu/GrContextMenu.vue.d.ts +2 -2
- package/dist/types/components/GrDialog/GrDialog.vue.d.ts +1 -1
- package/dist/types/components/GrDivider/GrDivider.vue.d.ts +2 -2
- package/dist/types/components/GrDrawer/GrDrawer.vue.d.ts +1 -1
- package/dist/types/components/GrDropdown/GrDropdown.vue.d.ts +3 -3
- package/dist/types/components/GrDropdownMenu/GrDropdownMenu.vue.d.ts +3 -3
- package/dist/types/components/GrDropdownMenu/GrDropdownMenuItem.vue.d.ts +1 -1
- package/dist/types/components/GrEmptyState/GrEmptyState.vue.d.ts +1 -1
- package/dist/types/components/GrFilePreview/GrFilePreview.vue.d.ts +14 -0
- package/dist/types/components/GrFileUpload/GrFileUpload.vue.d.ts +1 -1
- package/dist/types/components/GrFormField/GrFormField.vue.d.ts +3 -3
- package/dist/types/components/GrFormFile/GrFormFile.vue.d.ts +2 -2
- package/dist/types/components/GrFormSection/GrFormSection.vue.d.ts +1 -1
- package/dist/types/components/GrIcon/GrIcon.vue.d.ts +1 -1
- package/dist/types/components/GrImageViewer/GrImageViewer.vue.d.ts +3 -3
- package/dist/types/components/GrInput/GrInput.vue.d.ts +4 -4
- package/dist/types/components/GrInputTag/GrInputTag.vue.d.ts +3 -3
- package/dist/types/components/GrKbd/GrKbd.vue.d.ts +1 -1
- package/dist/types/components/GrKbd/grKbdStyles.d.ts +17 -2
- package/dist/types/components/GrLink/GrLink.vue.d.ts +1 -1
- package/dist/types/components/GrList/GrListItem.vue.d.ts +2 -2
- package/dist/types/components/GrNavbar/GrNavbar.vue.d.ts +2 -2
- package/dist/types/components/GrNumberInput/GrNumberInput.vue.d.ts +3 -3
- package/dist/types/components/GrPagination/GrPagination.vue.d.ts +1 -1
- package/dist/types/components/GrPopover/GrPopover.vue.d.ts +3 -3
- package/dist/types/components/GrPromptDialog/GrPromptDialog.vue.d.ts +3 -3
- package/dist/types/components/GrRadio/GrRadio.vue.d.ts +2 -2
- package/dist/types/components/GrRadioGroup/GrRadioGroup.vue.d.ts +2 -2
- package/dist/types/components/GrRating/GrRating.vue.d.ts +2 -2
- package/dist/types/components/GrSegmented/GrSegmented.vue.d.ts +2 -2
- package/dist/types/components/GrSidebar/GrSidebarItem.vue.d.ts +1 -1
- package/dist/types/components/GrSkeleton/GrSkeleton.vue.d.ts +1 -1
- package/dist/types/components/GrSlider/GrSlider.vue.d.ts +3 -3
- package/dist/types/components/GrSplitter/GrSplitter.vue.d.ts +1 -1
- package/dist/types/components/GrStatistic/GrStatistic.vue.d.ts +2 -2
- package/dist/types/components/GrSwitch/GrSwitch.vue.d.ts +3 -3
- package/dist/types/components/GrTable/GrTable.vue.d.ts +1 -1
- package/dist/types/components/GrTabs/GrTabs.vue.d.ts +1 -1
- package/dist/types/components/GrTextarea/GrTextarea.vue.d.ts +2 -2
- package/dist/types/components/GrTimeline/GrTimelineItem.vue.d.ts +2 -2
- package/dist/types/components/GrToaster/GrToaster.vue.d.ts +1 -1
- package/dist/types/components/GrTooltip/GrTooltip.vue.d.ts +3 -3
- package/dist/types/components/GrTransfer/GrTransfer.vue.d.ts +103 -0
- package/dist/types/components/GrTransfer/config.d.ts +1 -0
- package/dist/types/components/GrTransfer/defaults.d.ts +15 -0
- package/dist/types/components/GrTransfer/grTransferStyles.d.ts +127 -0
- package/dist/types/components/GrTransfer/index.d.ts +11 -0
- package/dist/types/components/GrTransfer/safelist.d.ts +1 -0
- package/dist/types/components/GrTransfer/transferGeometry.d.ts +44 -0
- package/dist/types/components/GrTransfer/transferModel.d.ts +68 -0
- package/dist/types/components/GrTransfer/transferSelection.d.ts +36 -0
- package/dist/types/components/GrTransfer/useTransferDrag.d.ts +48 -0
- package/dist/types/granular-provider/shared.d.ts +3 -0
- package/dist/types/i18n/messages/en.d.ts +70 -0
- package/dist/types/i18n/messages/es.d.ts +70 -0
- package/dist/types/i18n/messages/ru.d.ts +70 -0
- package/dist/types/index.d.ts +3 -0
- package/dist/web-types.json +735 -287
- package/package.json +19 -3
- package/dist/chunks/config-DWL81-aM.js.map +0 -1
- package/dist/chunks/en-CuuLfNHX.js.map +0 -1
- package/dist/chunks/es-CSnmrcMw.js.map +0 -1
- package/dist/chunks/generated-B95IBXs6.js.map +0 -1
- package/dist/chunks/grKbdStyles-DENu8pUK.js.map +0 -1
- package/dist/chunks/granular-provider-BshNi2la.js.map +0 -1
- package/dist/chunks/ru-BKWafECI.js.map +0 -1
- package/dist/chunks/useDragSort-0l47h4yb.js +0 -265
- package/dist/chunks/useDragSort-0l47h4yb.js.map +0 -1
- package/dist/components/GrBreadcrumbs/chunks/GrBreadcrumbs-DOpwY2EF.js.map +0 -1
- package/dist/components/GrDataTable/chunks/GrDataTable-DpyipOFx.js.map +0 -1
- package/dist/components/GrDelta/chunks/GrDelta-BpfqebEV.js.map +0 -1
- package/dist/components/GrDescriptionList/chunks/GrDescriptionList-D8ANFpn_.js.map +0 -1
- package/dist/components/GrFilePreview/chunks/GrFilePreview-PabkLgYX.js.map +0 -1
- package/dist/components/GrInputTag/chunks/GrInputTag-3Au5HWZL.js.map +0 -1
- package/dist/components/GrJsonViewer/chunks/GrJsonViewer-CDGOX3C0.js.map +0 -1
- package/dist/components/GrNumberInput/chunks/GrNumberInput-BqPydXpK.js.map +0 -1
- package/dist/components/GrSegmented/chunks/GrSegmented-NKTi9bMG.js.map +0 -1
- package/dist/components/GrSortableList/chunks/GrSortableList-CQCaWivn.js.map +0 -1
- package/dist/components/GrSteps/chunks/GrSteps-DXj7m-WO.js.map +0 -1
- package/dist/components/GrTabs/chunks/GrTabs-DHfv67cp.js.map +0 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-Dd2gJ-j_.js → GrImageViewer-DK-iVHHC.js} +3 -3
- package/dist/components/GrSlider/chunks/{GrSlider-Db-jACXz.js → GrSlider-CO8N9SF6.js} +1 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrInputTag-Ci8AO1ze.js","names":[],"sources":["../../../../src/components/GrInputTag/GrInputTag.vue","../../../../src/components/GrInputTag/GrInputTag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watchEffect } from 'vue'\n\nimport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge'\nimport GrChip from '../GrChip/GrChip.vue'\nimport { chipSizeForBadgeScale } from '../GrChip/grChipStyles'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconClose from '~icons/lucide/x'\nimport IconLoader from '~icons/lucide/loader-2'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isComposingEvent } from '../../internal/keyboard'\n\nimport {\n clearButtonClass,\n grInputTagInputClass,\n grInputTagWrapperClass,\n spinnerClass,\n type GrInputTagSize,\n type GrInputTagState,\n} from './grInputTagStyles'\n\nexport type { GrInputTagSize, GrInputTagState } from './grInputTagStyles'\n\nconst REGEX_SPECIAL_CHAR_RE = /[.*+?^${}()|[\\]\\\\]/g\n\n/**\n * Props for {@link GrInputTag}.\n * Tag-input primitive: renders a set of badges with an inline `<input>` for entering new tags.\n * Splits input by configurable `separators`, supports paste, Enter and Backspace editing.\n */\nexport interface GrInputTagProps {\n modelValue: string[]\n placeholder?: string\n disabled?: boolean\n readonly?: boolean\n invalid?: boolean\n /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n required?: boolean\n state?: GrInputTagState\n size?: GrInputTagSize\n separators?: string[]\n allowDuplicates?: boolean\n trim?: boolean\n max?: number\n addOnBlur?: boolean\n clearInputOnAdd?: boolean\n /**\n * Проверка тега перед добавлением. Может быть асинхронной (проверка на\n * сервере). Отклонённый тег не добавляется и уходит в событие `reject`.\n */\n beforeAdd?: (tag: string) => boolean | Promise<boolean>\n /** Кнопка «снести все теги». Настраивается через `GrConfigProvider`. */\n clearable?: boolean\n /** Фоновая работа: спиннер + `aria-busy`. Асинхронный `beforeAdd` поднимает его сам. */\n loading?: boolean\n tagTone?: GrBadgeTone\n tagDark?: boolean\n tagSize?: GrBadgeSize\n tagRadius?: GrBadgeRadius\n tagClosable?: boolean\n /** i18n-friendly aria-label for the per-tag remove button. */\n removeTagLabel?: string\n /** i18n aria-label кнопки «снести все». */\n clearAllLabel?: string\n /**\n * Имя контрола, когда он используется вне `GrFormField`. Внутри поля имя даёт\n * связка с его `<label for>` — там проп не нужен. Без того и другого у инпута\n * нет доступного имени вовсе: placeholder именем не считается.\n */\n ariaLabel?: string\n /** Имя для нативной формы: hidden input на каждый тег. */\n name?: string\n /**\n * Ширины аддонов `prefix`/`suffix` — общий контракт контролов пакета\n * (`docs/form-controls.md`).\n */\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n prefixFixed?: boolean\n suffixFixed?: boolean\n}\n\nexport interface GrInputTagEmits {\n (e: 'update:modelValue', value: string[]): void\n (e: 'add', value: string): void\n (e: 'remove', value: string, index: number): void\n /** Тег не прошёл `beforeAdd`. */\n (e: 'reject', value: string): void\n /** Набор снесён кнопкой «очистить». */\n (e: 'clear'): void\n /** Набор тегов изменился. */\n (e: 'change', value: string[]): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrInputTagProps>(),\n {\n placeholder: undefined,\n disabled: false,\n readonly: false,\n invalid: false,\n required: false,\n state: 'default',\n // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n size: undefined,\n separators: () => [','],\n allowDuplicates: false,\n trim: true,\n max: undefined,\n addOnBlur: false,\n clearInputOnAdd: true,\n beforeAdd: undefined,\n clearable: undefined,\n loading: false,\n tagTone: 'neutral',\n tagDark: false,\n tagSize: 'md',\n tagRadius: 'round',\n tagClosable: true,\n removeTagLabel: undefined,\n clearAllLabel: undefined,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\nconst emit = defineEmits<GrInputTagEmits>()\ndefineSlots<{\n /** Аддон слева от чипов: иконка, метка. */\n prefix?: () => any\n /** Аддон справа, перед кнопкой очистки. */\n suffix?: () => any\n /** Свой чип: `remove` снимает значение. */\n tag?: (props: { tag: string, index: number, remove: () => void }) => any\n}>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required) —\n// как у GrInput и GrSelect: контрол не знает про форму, знает только про поле.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid,\n required: isRequired,\n readonly: isReadonly,\n} = useGrFormControl(() => props)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\n/** Ширина аддона по умолчанию — та же лестница, что у `GrInput`. */\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputTagSize, string> = {\n xs: '2rem',\n sm: '2.25rem',\n md: '2.5rem',\n lg: '3rem',\n}\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInputTag' })\n\n/**\n * Аддоны — флекс-соседи поля: оболочка тегового поля и так флекс-строка с\n * бейджами, поэтому места паддингом резервировать не нужно.\n */\nconst { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixStyle, suffixStyle } = useControlAddons(() => props, {\n defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n paddingX: () => '0px',\n})\nconst resolvedClearable = useGrComponentProp('GrInputTag', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedClearAllLabel = computed(() => props.clearAllLabel ?? t('gr.inputTag.clearAll', 'Clear all tags'))\n\nfunction removeTagLabelFor(tag: string): string {\n // Безликое «Remove tag» на двадцати кнопках подряд не даёт выбрать нужную:\n // имя обязано называть сам тег.\n return props.removeTagLabel ?? t('gr.inputTag.removeTagNamed', 'Remove tag {tag}', { tag })\n}\n\nconst inputValue = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Внутри корня фокус ходит между полем и кнопками удаления чипов: без границы\n// каждое такое перемещение давало бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n enter: event => emit('focus', event),\n leave: event => emit('blur', event),\n})\n/**\n * Инстансы чипов: у кольца цель — кнопка снятия внутри чипа, и достаётся она\n * через `defineExpose` (`removeEl`), а не селектором по DOM.\n */\nconst chipRefs = ref<Array<{ removeEl: HTMLButtonElement | null } | null>>([])\n\nfunction setChipRef(index: number) {\n return (el: unknown): void => {\n chipRefs.value[index] = el as { removeEl: HTMLButtonElement | null } | null\n }\n}\n\n/**\n * Проп `tagSize` объявлен по шкале бейджа и остаётся публичным контрактом:\n * `md` обязан означать для потребителя тот же кегль, что и раньше.\n */\nconst chipSize = computed(() => chipSizeForBadgeScale(props.tagSize))\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\nfunction blur(): void {\n inputEl.value?.blur()\n}\n\nconst isMaxed = computed(() => props.max !== undefined && props.modelValue.length >= props.max)\nconst canEdit = computed(() => !isDisabled.value && !isReadonly.value)\nconst showRemove = computed(() => props.tagClosable && canEdit.value)\n\n// Добавление, удаление и достигнутый предел — события, а не состояние виджета:\n// показывать их негде, объявить нужно. Это работа общего живого региона.\nconst { announce } = useAnnouncer()\n\n/**\n * Roving tabindex по крестикам: двадцать тегов давали двадцать одну остановку\n * `Tab`. В таб-порядке ровно один крестик, между ними ходят стрелками.\n *\n * Адресация индексом, а не значением тега: теги допускают повторы, и по\n * значению два одинаковых чипа было бы не различить.\n */\nconst tagIndexes = computed(() => props.modelValue.map((_, index) => index))\n\nconst roving = useRovingFocus<number>({\n items: () => tagIndexes.value,\n elementFor: index => chipRefs.value[index]?.removeEl,\n orientation: () => 'horizontal',\n // Ряд чипов — не кольцо: у него есть край, и за краем стоит поле ввода.\n wrap: () => false,\n onOverflow: (edge) => {\n // За последним чипом — поле ввода: продолжение того же ряда. Слева от\n // первого — начало строки, фокус остаётся на месте.\n if (edge === 'end')\n focus()\n return true\n },\n // Удаление чипа перерисовывает ряд: без ожидания фокус уехал бы на узел,\n // которого уже нет.\n beforeFocus: () => nextTick(),\n})\n\nasync function focusTag(index: number): Promise<void> {\n const last = props.modelValue.length - 1\n if (last < 0) {\n focus()\n return\n }\n\n await roving.focusKey(Math.min(Math.max(index, 0), last))\n}\n\nfunction escapeRegexChar(ch: string): string {\n return ch.replace(REGEX_SPECIAL_CHAR_RE, '\\\\$&')\n}\n\nconst splitRegex = computed(() => {\n const seps = (props.separators ?? []).filter(Boolean).map(s => s[0]!)\n const uniq = [...new Set([...seps, '\\n', '\\r', '\\t'])]\n const body = uniq.map(escapeRegexChar).join('')\n return new RegExp(`[${body}]+`, 'g')\n})\n\nfunction normalizeTag(raw: string): string {\n return props.trim ? raw.trim() : raw\n}\n\nfunction splitToTags(raw: string): string[] {\n return raw\n .split(splitRegex.value)\n .map(v => normalizeTag(v))\n .filter(Boolean)\n}\n\nfunction addMany(rawTags: string[]): boolean {\n if (!canEdit.value || isMaxed.value)\n return false\n\n const next = props.modelValue.slice()\n const added: string[] = []\n\n for (const raw of rawTags) {\n const tag = normalizeTag(raw)\n if (!tag)\n continue\n\n if (!props.allowDuplicates && next.includes(tag))\n continue\n\n if (props.max !== undefined && next.length >= props.max)\n break\n\n next.push(tag)\n added.push(tag)\n emit('add', tag)\n }\n\n if (!added.length)\n return false\n\n emit('update:modelValue', next)\n emit('change', next)\n announce(added.length === 1\n ? t('gr.inputTag.added', 'Tag added: {tag}', { tag: added[0]! })\n : t('gr.inputTag.addedMany', '{count} tags added', { count: added.length }))\n\n return true\n}\n\n// Счётчик запуска: пока идёт асинхронная проверка, пользователь успевает нажать\n// Enter второй раз — результат устаревшей проверки дописывать нельзя.\nlet validationRun = 0\nconst validating = ref(false)\nconst isBusy = computed(() => props.loading || validating.value)\n\nasync function filterAllowed(tags: string[], run: number): Promise<string[] | null> {\n const check = props.beforeAdd\n if (!check)\n return tags\n\n const allowed: string[] = []\n\n for (const tag of tags) {\n const ok = await check(tag)\n if (run !== validationRun)\n return null\n\n if (ok)\n allowed.push(tag)\n else\n emit('reject', tag)\n }\n\n return allowed\n}\n\nasync function commitInput(): Promise<void> {\n if (!canEdit.value || !inputValue.value)\n return\n\n if (isMaxed.value) {\n announce(t('gr.inputTag.limitReached', 'Tag limit reached'))\n return\n }\n\n const raw = inputValue.value\n const tags = splitToTags(raw)\n if (!tags.length)\n return\n\n const run = ++validationRun\n validating.value = Boolean(props.beforeAdd)\n\n const allowed = await filterAllowed(tags, run)\n\n if (run === validationRun)\n validating.value = false\n\n if (allowed === null || !allowed.length)\n return\n\n const changed = addMany(allowed)\n // Значение могло измениться, пока шла проверка: стирать чужой ввод нельзя.\n if (changed && props.clearInputOnAdd && inputValue.value === raw)\n inputValue.value = ''\n}\n\nfunction removeAt(index: number): void {\n if (!canEdit.value)\n return\n\n const next = props.modelValue.slice()\n const removed = next[index]\n if (removed === undefined)\n return\n\n next.splice(index, 1)\n emit('update:modelValue', next)\n emit('change', next)\n emit('remove', removed, index)\n announce(t('gr.inputTag.removed', 'Tag removed: {tag}', { tag: removed }))\n}\n\n/** Удаление с клавиатуры: фокус переезжает на соседний чип, а не пропадает. */\nasync function removeAtFromKeyboard(index: number): Promise<void> {\n removeAt(index)\n await nextTick()\n\n if (props.modelValue.length === 0) {\n focus()\n return\n }\n\n await focusTag(Math.min(index, props.modelValue.length - 1))\n}\n\nfunction clearAll(): void {\n if (!canEdit.value || props.modelValue.length === 0)\n return\n\n emit('update:modelValue', [])\n emit('change', [])\n emit('clear')\n announce(t('gr.inputTag.cleared', 'All tags removed'))\n focus()\n}\n\nfunction onInput(e: Event): void {\n inputValue.value = (e.target as HTMLInputElement).value\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n // Enter/сепаратор во время IME-композиции коммитят её, а не тег.\n if (isComposingEvent(e))\n return\n if (!canEdit.value)\n return\n\n if (e.key === 'Enter') {\n e.preventDefault()\n void commitInput()\n return\n }\n\n if ((props.separators ?? []).includes(e.key)) {\n e.preventDefault()\n void commitInput()\n return\n }\n\n if (inputValue.value.length === 0 && props.modelValue.length > 0) {\n if (e.key === 'Backspace') {\n e.preventDefault()\n removeAt(props.modelValue.length - 1)\n return\n }\n\n // Из пустого поля стрелка влево уводит на последний чип — дальше по чипам\n // работают те же стрелки, `Tab` для этого не нужен.\n if (e.key === 'ArrowLeft') {\n e.preventDefault()\n void focusTag(props.modelValue.length - 1)\n }\n }\n}\n\nfunction onTagKeydown(e: KeyboardEvent, index: number): void {\n if (roving.handleNavigationKeys(e)) {\n return\n }\n\n if (e.key === 'Delete' || e.key === 'Backspace') {\n e.preventDefault()\n void removeAtFromKeyboard(index)\n }\n}\n\nfunction onBlur(): void {\n if (props.addOnBlur)\n void commitInput()\n}\n\nfunction onPaste(e: ClipboardEvent): void {\n if (!canEdit.value || isMaxed.value)\n return\n\n const pasted = e.clipboardData?.getData('text')\n if (!pasted)\n return\n\n const tags = splitToTags(pasted)\n if (tags.length <= 1)\n return\n\n e.preventDefault()\n\n const run = ++validationRun\n validating.value = Boolean(props.beforeAdd)\n\n void filterAllowed(tags, run).then((allowed) => {\n if (run === validationRun)\n validating.value = false\n\n if (allowed?.length)\n addMany(allowed)\n })\n}\n\nconst wrapperClassName = computed(() => {\n return grInputTagWrapperClass({\n size: resolvedSize.value,\n state: props.state,\n invalid: isInvalid.value,\n disabled: isDisabled.value,\n })\n})\n\nconst inputClassName = computed(() => grInputTagInputClass(resolvedSize.value))\n\nconst showClearAll = computed(() => resolvedClearable.value && canEdit.value && props.modelValue.length > 0)\n\nconst placeholderText = computed(() => props.modelValue.length > 0 ? undefined : props.placeholder)\n\ndefineExpose({ focus, blur, clear: clearAll })\n\nif (__GR_DEV__) {\n watchEffect(() => {\n if (!Array.isArray(props.modelValue)) {\n console.warn(\n `[granularity] GrInputTag: обязательный проп \\`modelValue\\` должен быть массивом — получено ${String(props.modelValue)}.`,\n )\n }\n })\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-input-tag\n data-testid=\"gr-input-tag\"\n :class=\"wrapperClassName\"\n @click=\"focus\"\n @focusin=\"onFocusIn\"\n @focusout=\"onFocusOut\"\n >\n <span\n v-if=\"hasPrefix\"\n ref=\"prefixEl\"\n data-gr-input-tag-prefix\n class=\"inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]\"\n :style=\"prefixStyle\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <!-- Нативная форма: hidden на каждый тег — стандартная сериализация набора. -->\n <template v-if=\"name\">\n <input\n v-for=\"(tag, tagIndex) in modelValue\"\n :key=\"`hidden-${tagIndex}`\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"tag\"\n >\n </template>\n <!--\n `display: contents` — список нужен ради роли, а не ради раскладки: чипы\n обязаны переноситься в одном потоке с полем ввода.\n -->\n <span v-if=\"modelValue.length\" role=\"list\" class=\"contents\">\n <GrChip\n v-for=\"(tag, i) in modelValue\"\n :key=\"`${tag}-${i}`\"\n :ref=\"setChipRef(i)\"\n role=\"listitem\"\n :tone=\"tagTone\"\n :dark=\"tagDark\"\n :size=\"chipSize\"\n :radius=\"tagRadius\"\n :closable=\"showRemove\"\n :remove-label=\"removeTagLabelFor(tag)\"\n :remove-tabindex=\"roving.tabindexFor(i)\"\n data-gr-input-tag-item\n data-testid=\"gr-input-tag-item\"\n :data-index=\"i\"\n @remove=\"removeAt(i)\"\n @focusin=\"roving.setActive(i)\"\n @keydown=\"onTagKeydown($event, i)\"\n >\n <slot name=\"tag\" :tag=\"tag\" :index=\"i\" :remove=\"() => removeAt(i)\">\n <span class=\"truncate max-w-[18rem]\">{{ tag }}</span>\n </slot>\n </GrChip>\n </span>\n\n <input\n :id=\"resolvedId\"\n ref=\"inputEl\"\n data-gr-input-tag-input\n data-testid=\"gr-input-tag-input\"\n :value=\"inputValue\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :placeholder=\"placeholderText\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"describedBy\"\n :aria-required=\"isRequired ? 'true' : undefined\"\n :aria-readonly=\"isReadonly ? 'true' : undefined\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n :aria-busy=\"isBusy ? 'true' : undefined\"\n class=\"flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--gr-muted-fg)]\"\n :class=\"inputClassName\"\n @input=\"onInput\"\n @keydown=\"onKeydown\"\n @blur=\"onBlur\"\n @paste=\"onPaste\"\n >\n\n <span\n v-if=\"hasSuffix\"\n ref=\"suffixEl\"\n data-gr-input-tag-suffix\n class=\"inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]\"\n :style=\"suffixStyle\"\n >\n <slot name=\"suffix\" />\n </span>\n\n <span\n v-if=\"isBusy\"\n data-gr-input-tag-spinner\n :class=\"spinnerClass\"\n aria-hidden=\"true\"\n >\n <GrIcon size=\"sm\">\n <IconLoader class=\"animate-spin\" />\n </GrIcon>\n </span>\n\n <button\n v-if=\"showClearAll\"\n type=\"button\"\n data-gr-input-tag-clear\n :class=\"clearButtonClass\"\n :aria-label=\"resolvedClearAllLabel\"\n @mousedown.prevent.stop\n @click.stop=\"clearAll\"\n >\n <GrIcon size=\"sm\">\n <IconClose />\n </GrIcon>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watchEffect } from 'vue'\n\nimport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge'\nimport GrChip from '../GrChip/GrChip.vue'\nimport { chipSizeForBadgeScale } from '../GrChip/grChipStyles'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconClose from '~icons/lucide/x'\nimport IconLoader from '~icons/lucide/loader-2'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useControlAddons } from '../../composables/internal/useControlAddons'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useFocusWithin } from '../../composables/internal/useFocusWithin'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isComposingEvent } from '../../internal/keyboard'\n\nimport {\n clearButtonClass,\n grInputTagInputClass,\n grInputTagWrapperClass,\n spinnerClass,\n type GrInputTagSize,\n type GrInputTagState,\n} from './grInputTagStyles'\n\nexport type { GrInputTagSize, GrInputTagState } from './grInputTagStyles'\n\nconst REGEX_SPECIAL_CHAR_RE = /[.*+?^${}()|[\\]\\\\]/g\n\n/**\n * Props for {@link GrInputTag}.\n * Tag-input primitive: renders a set of badges with an inline `<input>` for entering new tags.\n * Splits input by configurable `separators`, supports paste, Enter and Backspace editing.\n */\nexport interface GrInputTagProps {\n modelValue: string[]\n placeholder?: string\n disabled?: boolean\n readonly?: boolean\n invalid?: boolean\n /** Обязательное поле (`aria-required`). Складывается с `required` у `GrFormField`. */\n required?: boolean\n state?: GrInputTagState\n size?: GrInputTagSize\n separators?: string[]\n allowDuplicates?: boolean\n trim?: boolean\n max?: number\n addOnBlur?: boolean\n clearInputOnAdd?: boolean\n /**\n * Проверка тега перед добавлением. Может быть асинхронной (проверка на\n * сервере). Отклонённый тег не добавляется и уходит в событие `reject`.\n */\n beforeAdd?: (tag: string) => boolean | Promise<boolean>\n /** Кнопка «снести все теги». Настраивается через `GrConfigProvider`. */\n clearable?: boolean\n /** Фоновая работа: спиннер + `aria-busy`. Асинхронный `beforeAdd` поднимает его сам. */\n loading?: boolean\n tagTone?: GrBadgeTone\n tagDark?: boolean\n tagSize?: GrBadgeSize\n tagRadius?: GrBadgeRadius\n tagClosable?: boolean\n /** i18n-friendly aria-label for the per-tag remove button. */\n removeTagLabel?: string\n /** i18n aria-label кнопки «снести все». */\n clearAllLabel?: string\n /**\n * Имя контрола, когда он используется вне `GrFormField`. Внутри поля имя даёт\n * связка с его `<label for>` — там проп не нужен. Без того и другого у инпута\n * нет доступного имени вовсе: placeholder именем не считается.\n */\n ariaLabel?: string\n /** Имя для нативной формы: hidden input на каждый тег. */\n name?: string\n /**\n * Ширины аддонов `prefix`/`suffix` — общий контракт контролов пакета\n * (`docs/form-controls.md`).\n */\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n prefixFixed?: boolean\n suffixFixed?: boolean\n}\n\nexport interface GrInputTagEmits {\n (e: 'update:modelValue', value: string[]): void\n (e: 'add', value: string): void\n (e: 'remove', value: string, index: number): void\n /** Тег не прошёл `beforeAdd`. */\n (e: 'reject', value: string): void\n /** Набор снесён кнопкой «очистить». */\n (e: 'clear'): void\n /** Набор тегов изменился. */\n (e: 'change', value: string[]): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(\n defineProps<GrInputTagProps>(),\n {\n placeholder: undefined,\n disabled: false,\n readonly: false,\n invalid: false,\n required: false,\n state: 'default',\n // Настраивается через `GrConfigProvider`; дефолт — в резолвере ниже.\n size: undefined,\n separators: () => [','],\n allowDuplicates: false,\n trim: true,\n max: undefined,\n addOnBlur: false,\n clearInputOnAdd: true,\n beforeAdd: undefined,\n clearable: undefined,\n loading: false,\n tagTone: 'neutral',\n tagDark: false,\n tagSize: 'md',\n tagRadius: 'round',\n tagClosable: true,\n removeTagLabel: undefined,\n clearAllLabel: undefined,\n ariaLabel: undefined,\n name: undefined,\n },\n)\n\nconst emit = defineEmits<GrInputTagEmits>()\ndefineSlots<{\n /** Аддон слева от чипов: иконка, метка. */\n prefix?: () => any\n /** Аддон справа, перед кнопкой очистки. */\n suffix?: () => any\n /** Свой чип: `remove` снимает значение. */\n tag?: (props: { tag: string, index: number, remove: () => void }) => any\n}>()\n\n// Fallback из контекста `GrFormField` (id/aria-describedby/invalid/required) —\n// как у GrInput и GrSelect: контрол не знает про форму, знает только про поле.\nconst field = useGrFormFieldContext()\nconst resolvedId = computed(() => field?.id.value)\nconst describedBy = computed(() => field?.describedById.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid,\n required: isRequired,\n readonly: isReadonly,\n} = useGrFormControl(() => props)\n\n// Эффективные значения: локальный проп → `GrConfigProvider` → дефолт компонента.\n/** Ширина аддона по умолчанию — та же лестница, что у `GrInput`. */\nconst ADDON_MIN_WIDTH_BY_SIZE: Record<GrInputTagSize, string> = {\n xs: '2rem',\n sm: '2.25rem',\n md: '2.5rem',\n lg: '3rem',\n}\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrInputTag' })\n\n/**\n * Аддоны — флекс-соседи поля: оболочка тегового поля и так флекс-строка с\n * бейджами, поэтому места паддингом резервировать не нужно.\n */\nconst { hasPrefix, hasSuffix, prefixEl, suffixEl, prefixStyle, suffixStyle } = useControlAddons(() => props, {\n defaultMinWidth: () => ADDON_MIN_WIDTH_BY_SIZE[resolvedSize.value],\n paddingX: () => '0px',\n})\nconst resolvedClearable = useGrComponentProp('GrInputTag', 'clearable', () => props.clearable, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedClearAllLabel = computed(() => props.clearAllLabel ?? t('gr.inputTag.clearAll', 'Clear all tags'))\n\nfunction removeTagLabelFor(tag: string): string {\n // Безликое «Remove tag» на двадцати кнопках подряд не даёт выбрать нужную:\n // имя обязано называть сам тег.\n return props.removeTagLabel ?? t('gr.inputTag.removeTagNamed', 'Remove tag {tag}', { tag })\n}\n\nconst inputValue = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\nconst rootEl = ref<HTMLElement | null>(null)\n\n// Внутри корня фокус ходит между полем и кнопками удаления чипов: без границы\n// каждое такое перемещение давало бы потребителю пару `blur` + `focus`.\nconst { onFocusIn, onFocusOut } = useFocusWithin(rootEl, {\n enter: event => emit('focus', event),\n leave: event => emit('blur', event),\n})\n/**\n * Инстансы чипов: у кольца цель — кнопка снятия внутри чипа, и достаётся она\n * через `defineExpose` (`removeEl`), а не селектором по DOM.\n */\nconst chipRefs = ref<Array<{ removeEl: HTMLButtonElement | null } | null>>([])\n\nfunction setChipRef(index: number) {\n return (el: unknown): void => {\n chipRefs.value[index] = el as { removeEl: HTMLButtonElement | null } | null\n }\n}\n\n/**\n * Проп `tagSize` объявлен по шкале бейджа и остаётся публичным контрактом:\n * `md` обязан означать для потребителя тот же кегль, что и раньше.\n */\nconst chipSize = computed(() => chipSizeForBadgeScale(props.tagSize))\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\nfunction blur(): void {\n inputEl.value?.blur()\n}\n\nconst isMaxed = computed(() => props.max !== undefined && props.modelValue.length >= props.max)\nconst canEdit = computed(() => !isDisabled.value && !isReadonly.value)\nconst showRemove = computed(() => props.tagClosable && canEdit.value)\n\n// Добавление, удаление и достигнутый предел — события, а не состояние виджета:\n// показывать их негде, объявить нужно. Это работа общего живого региона.\nconst { announce } = useAnnouncer()\n\n/**\n * Roving tabindex по крестикам: двадцать тегов давали двадцать одну остановку\n * `Tab`. В таб-порядке ровно один крестик, между ними ходят стрелками.\n *\n * Адресация индексом, а не значением тега: теги допускают повторы, и по\n * значению два одинаковых чипа было бы не различить.\n */\nconst tagIndexes = computed(() => props.modelValue.map((_, index) => index))\n\nconst roving = useRovingFocus<number>({\n items: () => tagIndexes.value,\n elementFor: index => chipRefs.value[index]?.removeEl,\n orientation: () => 'horizontal',\n // Ряд чипов — не кольцо: у него есть край, и за краем стоит поле ввода.\n wrap: () => false,\n onOverflow: (edge) => {\n // За последним чипом — поле ввода: продолжение того же ряда. Слева от\n // первого — начало строки, фокус остаётся на месте.\n if (edge === 'end')\n focus()\n return true\n },\n // Удаление чипа перерисовывает ряд: без ожидания фокус уехал бы на узел,\n // которого уже нет.\n beforeFocus: () => nextTick(),\n})\n\nasync function focusTag(index: number): Promise<void> {\n const last = props.modelValue.length - 1\n if (last < 0) {\n focus()\n return\n }\n\n await roving.focusKey(Math.min(Math.max(index, 0), last))\n}\n\nfunction escapeRegexChar(ch: string): string {\n return ch.replace(REGEX_SPECIAL_CHAR_RE, '\\\\$&')\n}\n\nconst splitRegex = computed(() => {\n const seps = (props.separators ?? []).filter(Boolean).map(s => s[0]!)\n const uniq = [...new Set([...seps, '\\n', '\\r', '\\t'])]\n const body = uniq.map(escapeRegexChar).join('')\n return new RegExp(`[${body}]+`, 'g')\n})\n\nfunction normalizeTag(raw: string): string {\n return props.trim ? raw.trim() : raw\n}\n\nfunction splitToTags(raw: string): string[] {\n return raw\n .split(splitRegex.value)\n .map(v => normalizeTag(v))\n .filter(Boolean)\n}\n\nfunction addMany(rawTags: string[]): boolean {\n if (!canEdit.value || isMaxed.value)\n return false\n\n const next = props.modelValue.slice()\n const added: string[] = []\n\n for (const raw of rawTags) {\n const tag = normalizeTag(raw)\n if (!tag)\n continue\n\n if (!props.allowDuplicates && next.includes(tag))\n continue\n\n if (props.max !== undefined && next.length >= props.max)\n break\n\n next.push(tag)\n added.push(tag)\n emit('add', tag)\n }\n\n if (!added.length)\n return false\n\n emit('update:modelValue', next)\n emit('change', next)\n announce(added.length === 1\n ? t('gr.inputTag.added', 'Tag added: {tag}', { tag: added[0]! })\n : t('gr.inputTag.addedMany', '{count} tags added', { count: added.length }))\n\n return true\n}\n\n// Счётчик запуска: пока идёт асинхронная проверка, пользователь успевает нажать\n// Enter второй раз — результат устаревшей проверки дописывать нельзя.\nlet validationRun = 0\nconst validating = ref(false)\nconst isBusy = computed(() => props.loading || validating.value)\n\nasync function filterAllowed(tags: string[], run: number): Promise<string[] | null> {\n const check = props.beforeAdd\n if (!check)\n return tags\n\n const allowed: string[] = []\n\n for (const tag of tags) {\n const ok = await check(tag)\n if (run !== validationRun)\n return null\n\n if (ok)\n allowed.push(tag)\n else\n emit('reject', tag)\n }\n\n return allowed\n}\n\nasync function commitInput(): Promise<void> {\n if (!canEdit.value || !inputValue.value)\n return\n\n if (isMaxed.value) {\n announce(t('gr.inputTag.limitReached', 'Tag limit reached'))\n return\n }\n\n const raw = inputValue.value\n const tags = splitToTags(raw)\n if (!tags.length)\n return\n\n const run = ++validationRun\n validating.value = Boolean(props.beforeAdd)\n\n const allowed = await filterAllowed(tags, run)\n\n if (run === validationRun)\n validating.value = false\n\n if (allowed === null || !allowed.length)\n return\n\n const changed = addMany(allowed)\n // Значение могло измениться, пока шла проверка: стирать чужой ввод нельзя.\n if (changed && props.clearInputOnAdd && inputValue.value === raw)\n inputValue.value = ''\n}\n\nfunction removeAt(index: number): void {\n if (!canEdit.value)\n return\n\n const next = props.modelValue.slice()\n const removed = next[index]\n if (removed === undefined)\n return\n\n next.splice(index, 1)\n emit('update:modelValue', next)\n emit('change', next)\n emit('remove', removed, index)\n announce(t('gr.inputTag.removed', 'Tag removed: {tag}', { tag: removed }))\n}\n\n/** Удаление с клавиатуры: фокус переезжает на соседний чип, а не пропадает. */\nasync function removeAtFromKeyboard(index: number): Promise<void> {\n removeAt(index)\n await nextTick()\n\n if (props.modelValue.length === 0) {\n focus()\n return\n }\n\n await focusTag(Math.min(index, props.modelValue.length - 1))\n}\n\nfunction clearAll(): void {\n if (!canEdit.value || props.modelValue.length === 0)\n return\n\n emit('update:modelValue', [])\n emit('change', [])\n emit('clear')\n announce(t('gr.inputTag.cleared', 'All tags removed'))\n focus()\n}\n\nfunction onInput(e: Event): void {\n inputValue.value = (e.target as HTMLInputElement).value\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n // Enter/сепаратор во время IME-композиции коммитят её, а не тег.\n if (isComposingEvent(e))\n return\n if (!canEdit.value)\n return\n\n if (e.key === 'Enter') {\n e.preventDefault()\n void commitInput()\n return\n }\n\n if ((props.separators ?? []).includes(e.key)) {\n e.preventDefault()\n void commitInput()\n return\n }\n\n if (inputValue.value.length === 0 && props.modelValue.length > 0) {\n if (e.key === 'Backspace') {\n e.preventDefault()\n removeAt(props.modelValue.length - 1)\n return\n }\n\n // Из пустого поля стрелка влево уводит на последний чип — дальше по чипам\n // работают те же стрелки, `Tab` для этого не нужен.\n if (e.key === 'ArrowLeft') {\n e.preventDefault()\n void focusTag(props.modelValue.length - 1)\n }\n }\n}\n\nfunction onTagKeydown(e: KeyboardEvent, index: number): void {\n if (roving.handleNavigationKeys(e)) {\n return\n }\n\n if (e.key === 'Delete' || e.key === 'Backspace') {\n e.preventDefault()\n void removeAtFromKeyboard(index)\n }\n}\n\nfunction onBlur(): void {\n if (props.addOnBlur)\n void commitInput()\n}\n\nfunction onPaste(e: ClipboardEvent): void {\n if (!canEdit.value || isMaxed.value)\n return\n\n const pasted = e.clipboardData?.getData('text')\n if (!pasted)\n return\n\n const tags = splitToTags(pasted)\n if (tags.length <= 1)\n return\n\n e.preventDefault()\n\n const run = ++validationRun\n validating.value = Boolean(props.beforeAdd)\n\n void filterAllowed(tags, run).then((allowed) => {\n if (run === validationRun)\n validating.value = false\n\n if (allowed?.length)\n addMany(allowed)\n })\n}\n\nconst wrapperClassName = computed(() => {\n return grInputTagWrapperClass({\n size: resolvedSize.value,\n state: props.state,\n invalid: isInvalid.value,\n disabled: isDisabled.value,\n })\n})\n\nconst inputClassName = computed(() => grInputTagInputClass(resolvedSize.value))\n\nconst showClearAll = computed(() => resolvedClearable.value && canEdit.value && props.modelValue.length > 0)\n\nconst placeholderText = computed(() => props.modelValue.length > 0 ? undefined : props.placeholder)\n\ndefineExpose({ focus, blur, clear: clearAll })\n\nif (__GR_DEV__) {\n watchEffect(() => {\n if (!Array.isArray(props.modelValue)) {\n console.warn(\n `[granularity] GrInputTag: обязательный проп \\`modelValue\\` должен быть массивом — получено ${String(props.modelValue)}.`,\n )\n }\n })\n}\n</script>\n\n<template>\n <div\n ref=\"rootEl\"\n data-gr-input-tag\n data-testid=\"gr-input-tag\"\n :class=\"wrapperClassName\"\n @click=\"focus\"\n @focusin=\"onFocusIn\"\n @focusout=\"onFocusOut\"\n >\n <span\n v-if=\"hasPrefix\"\n ref=\"prefixEl\"\n data-gr-input-tag-prefix\n class=\"inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]\"\n :style=\"prefixStyle\"\n >\n <slot name=\"prefix\" />\n </span>\n\n <!-- Нативная форма: hidden на каждый тег — стандартная сериализация набора. -->\n <template v-if=\"name\">\n <input\n v-for=\"(tag, tagIndex) in modelValue\"\n :key=\"`hidden-${tagIndex}`\"\n type=\"hidden\"\n :name=\"name\"\n :value=\"tag\"\n >\n </template>\n <!--\n `display: contents` — список нужен ради роли, а не ради раскладки: чипы\n обязаны переноситься в одном потоке с полем ввода.\n -->\n <span v-if=\"modelValue.length\" role=\"list\" class=\"contents\">\n <GrChip\n v-for=\"(tag, i) in modelValue\"\n :key=\"`${tag}-${i}`\"\n :ref=\"setChipRef(i)\"\n role=\"listitem\"\n :tone=\"tagTone\"\n :dark=\"tagDark\"\n :size=\"chipSize\"\n :radius=\"tagRadius\"\n :closable=\"showRemove\"\n :remove-label=\"removeTagLabelFor(tag)\"\n :remove-tabindex=\"roving.tabindexFor(i)\"\n data-gr-input-tag-item\n data-testid=\"gr-input-tag-item\"\n :data-index=\"i\"\n @remove=\"removeAt(i)\"\n @focusin=\"roving.setActive(i)\"\n @keydown=\"onTagKeydown($event, i)\"\n >\n <slot name=\"tag\" :tag=\"tag\" :index=\"i\" :remove=\"() => removeAt(i)\">\n <span class=\"truncate max-w-[18rem]\">{{ tag }}</span>\n </slot>\n </GrChip>\n </span>\n\n <input\n :id=\"resolvedId\"\n ref=\"inputEl\"\n data-gr-input-tag-input\n data-testid=\"gr-input-tag-input\"\n :value=\"inputValue\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :placeholder=\"placeholderText\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"describedBy\"\n :aria-required=\"isRequired ? 'true' : undefined\"\n :aria-readonly=\"isReadonly ? 'true' : undefined\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n :aria-busy=\"isBusy ? 'true' : undefined\"\n class=\"flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--gr-muted-fg)]\"\n :class=\"inputClassName\"\n @input=\"onInput\"\n @keydown=\"onKeydown\"\n @blur=\"onBlur\"\n @paste=\"onPaste\"\n >\n\n <span\n v-if=\"hasSuffix\"\n ref=\"suffixEl\"\n data-gr-input-tag-suffix\n class=\"inline-flex shrink-0 items-center justify-center text-[var(--gr-muted-fg)]\"\n :style=\"suffixStyle\"\n >\n <slot name=\"suffix\" />\n </span>\n\n <span\n v-if=\"isBusy\"\n data-gr-input-tag-spinner\n :class=\"spinnerClass\"\n aria-hidden=\"true\"\n >\n <GrIcon size=\"sm\">\n <IconLoader class=\"animate-spin\" />\n </GrIcon>\n </span>\n\n <button\n v-if=\"showClearAll\"\n type=\"button\"\n data-gr-input-tag-clear\n :class=\"clearButtonClass\"\n :aria-label=\"resolvedClearAllLabel\"\n @mousedown.prevent.stop\n @click.stop=\"clearAll\"\n >\n <GrIcon size=\"sm\">\n <IconClose />\n </GrIcon>\n </button>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { n as grInputTagSafelist, t as grInputTagConfig } from "../../chunks/config-BqT6PMzO.js";
|
|
2
|
-
import { t as GrInputTag_default } from "./chunks/GrInputTag-
|
|
2
|
+
import { t as GrInputTag_default } from "./chunks/GrInputTag-Ci8AO1ze.js";
|
|
3
3
|
export { GrInputTag_default as GrInputTag, GrInputTag_default as default, grInputTagConfig, grInputTagSafelist };
|
package/dist/components/GrJsonViewer/chunks/{GrJsonViewer-CDGOX3C0.js → GrJsonViewer-CwCBMh4h.js}
RENAMED
|
@@ -2,9 +2,9 @@ import { a as useGrComponentSize, i as useGrComponentProp } from "../../../chunk
|
|
|
2
2
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
3
3
|
import { t as check_default } from "../../../chunks/check-BZI24Qs4.js";
|
|
4
4
|
import { t as GrButton_default } from "../../GrButton/chunks/GrButton-CS4TqMtG.js";
|
|
5
|
-
import { t as GrInput_default } from "../../GrInput/chunks/GrInput-TFeBm3gQ.js";
|
|
6
5
|
import { useAnnouncer } from "../../../composables/useAnnouncer.js";
|
|
7
|
-
import { t as
|
|
6
|
+
import { t as GrInput_default } from "../../GrInput/chunks/GrInput-TFeBm3gQ.js";
|
|
7
|
+
import { t as GrTree_default } from "../../GrTree/chunks/GrTree-CkHzgYg1.js";
|
|
8
8
|
import { a as jsonViewerCopyClass, c as jsonViewerMutedClass, d as jsonViewerRowClass, f as jsonViewerSearchClass, i as jsonViewerContentClass, l as jsonViewerPunctuationClass, m as jsonViewerValueClass, o as jsonViewerGroupClass, p as jsonViewerToolbarClass, r as jsonValueClass, s as jsonViewerKeyClass, u as jsonViewerRootClass } from "../../../chunks/config-DpAYidyY.js";
|
|
9
9
|
import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, normalizeClass, onBeforeUnmount, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, watch, withCtx, withModifiers } from "vue";
|
|
10
10
|
//#region ~icons/lucide/copy
|
|
@@ -223,14 +223,38 @@ var GrJsonViewer_default = /* @__PURE__ */ defineComponent({
|
|
|
223
223
|
*
|
|
224
224
|
* Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —
|
|
225
225
|
* не «начальное значение»: дерево следит за пропом и заменяет набор целиком.
|
|
226
|
-
*
|
|
227
|
-
*
|
|
228
|
-
*
|
|
226
|
+
* Значит набор обязан быть зеркалом того, что открыто, а не только того, что
|
|
227
|
+
* открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево
|
|
228
|
+
* к памяти просмотрщика, то есть закрыло бы раскрытое руками.
|
|
229
229
|
*/
|
|
230
230
|
const expandedPaths = ref([]);
|
|
231
|
-
|
|
232
|
-
|
|
231
|
+
/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */
|
|
232
|
+
let depthApplied = false;
|
|
233
|
+
/**
|
|
234
|
+
* Обновление данных раскрытие не сбрасывает.
|
|
235
|
+
*
|
|
236
|
+
* Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на
|
|
237
|
+
* каждую смену складывал бы дерево под руками. Из набора выпадают только
|
|
238
|
+
* исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась
|
|
239
|
+
* она сама.
|
|
240
|
+
*/
|
|
241
|
+
watch([nodes, resolvedDepth], ([list, depth], previous) => {
|
|
242
|
+
const branches = branchPaths(list);
|
|
243
|
+
if (previous !== void 0 && previous[1] !== depth || !depthApplied && branches.length > 0) {
|
|
244
|
+
depthApplied = branches.length > 0;
|
|
245
|
+
expandedPaths.value = pathsToDepth(list, depth);
|
|
246
|
+
return;
|
|
247
|
+
}
|
|
248
|
+
const alive = new Set(branches);
|
|
249
|
+
expandedPaths.value = expandedPaths.value.filter((path) => alive.has(path));
|
|
233
250
|
}, { immediate: true });
|
|
251
|
+
/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */
|
|
252
|
+
function rememberExpanded(node) {
|
|
253
|
+
if (!expandedPaths.value.includes(node.path)) expandedPaths.value = [...expandedPaths.value, node.path];
|
|
254
|
+
}
|
|
255
|
+
function forgetExpanded(node) {
|
|
256
|
+
expandedPaths.value = expandedPaths.value.filter((path) => path !== node.path);
|
|
257
|
+
}
|
|
234
258
|
function expandAll() {
|
|
235
259
|
expandedPaths.value = branchPaths(nodes.value);
|
|
236
260
|
}
|
|
@@ -356,7 +380,9 @@ var GrJsonViewer_default = /* @__PURE__ */ defineComponent({
|
|
|
356
380
|
virtual: __props.virtual,
|
|
357
381
|
"max-height": __props.maxHeight,
|
|
358
382
|
size: unref(resolvedSize),
|
|
359
|
-
"aria-label": __props.ariaLabel
|
|
383
|
+
"aria-label": __props.ariaLabel,
|
|
384
|
+
onNodeExpand: rememberExpanded,
|
|
385
|
+
onNodeCollapse: forgetExpanded
|
|
360
386
|
}, {
|
|
361
387
|
default: withCtx(({ data }) => [createElementVNode("span", {
|
|
362
388
|
"data-gr-json-viewer-row": "",
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GrJsonViewer-CwCBMh4h.js","names":[],"sources":["../../../../src/components/GrJsonViewer/jsonToNodes.ts","../../../../src/components/GrJsonViewer/GrJsonViewer.vue","../../../../src/components/GrJsonViewer/GrJsonViewer.vue"],"sourcesContent":["/**\n * Разбор произвольного значения в узлы дерева.\n *\n * Компонент показывает данные из БД и от чужих сервисов, поэтому обход обязан\n * пережить всё: цикл, `BigInt`, функцию в поле, массив на десять тысяч записей,\n * строку в миллион символов. Уронить страницу он права не имеет.\n */\n\n/** Что за значение в узле. Решает и цвет, и то, раскрывается ли узел. */\nexport type GrJsonNodeKind\n = | 'object'\n | 'array'\n | 'string'\n | 'number'\n | 'boolean'\n | 'null'\n /** Значения, которых в JSON не бывает: функция, символ, `undefined`. */\n | 'unsupported'\n /** Хвост обрезанного массива — «ещё N элементов». Своего значения не имеет. */\n | 'truncation'\n\nexport type GrJsonNode = {\n /** Читаемый адрес узла (`$.items[3].name`). Он же ключ для `GrTree`. */\n path: string\n /** Имя ключа или индекс. Показывается слева от двоеточия. */\n label: string\n kind: GrJsonNodeKind\n /** Что видно в строке. У ветки — счётчик, у листа — значение, возможно обрезанное. */\n preview: string\n /** Полное значение. Копирование берёт его, а не `preview`. */\n value: unknown\n /** Показ обрезан: копирование всё равно отдаёт целое. */\n truncated: boolean\n isLeaf: boolean\n children?: GrJsonNode[]\n}\n\nexport type GrJsonToNodesOptions = {\n /** Подпись корня. */\n rootLabel?: string\n /** Длина строки, после которой значение обрезается в показе. */\n maxStringLength?: number\n /** Сколько элементов массива разбирать до заглушки «ещё N». */\n maxArrayItems?: number\n}\n\n/** Маркер ветки, которая уже встречалась выше по этой же цепочке предков. */\nexport const CIRCULAR_MARKER = '[Circular]'\n\nconst DEFAULT_ROOT_LABEL = '$'\nconst DEFAULT_MAX_STRING_LENGTH = 200\nconst DEFAULT_MAX_ARRAY_ITEMS = 100\n\n/** Ключ, который можно дописать через точку, не сломав адрес. */\nconst PLAIN_KEY = /^[A-Za-z_$][\\w$]*$/\n\nfunction appendKey(parentPath: string, key: string): string {\n return PLAIN_KEY.test(key) ? `${parentPath}.${key}` : `${parentPath}[${JSON.stringify(key)}]`\n}\n\n/**\n * Счётчик у ветки вместо её содержимого: свёрнутый узел обязан сказать, стоит\n * ли его раскрывать. Слово не склоняется — компонент не знает языка потребителя,\n * а число само по себе читается в любом.\n */\nfunction branchPreview(kind: 'object' | 'array', count: number): string {\n return kind === 'array' ? `[${count}]` : `{${count}}`\n}\n\nfunction scalarPreview(value: unknown, maxStringLength: number): { preview: string, truncated: boolean } {\n if (typeof value === 'string') {\n if (value.length <= maxStringLength)\n return { preview: JSON.stringify(value), truncated: false }\n\n // Кавычка открывается и не закрывается намеренно: закрытая читалась бы как\n // конец строки, а строка продолжается — её просто не показывают целиком.\n return { preview: `${JSON.stringify(value.slice(0, maxStringLength))}…`, truncated: true }\n }\n\n // `BigInt` представления в JSON не имеет, и `JSON.stringify` на нём бросает.\n if (typeof value === 'bigint')\n return { preview: `${value}n`, truncated: false }\n\n if (typeof value === 'function' || typeof value === 'symbol' || value === undefined)\n return { preview: String(value), truncated: false }\n\n return { preview: JSON.stringify(value) ?? String(value), truncated: false }\n}\n\nfunction kindOf(value: unknown): GrJsonNodeKind {\n if (value === null)\n return 'null'\n if (Array.isArray(value))\n return 'array'\n\n switch (typeof value) {\n case 'string': return 'string'\n case 'number': return 'number'\n case 'bigint': return 'number'\n case 'boolean': return 'boolean'\n case 'object': return 'object'\n // `undefined`, функция и символ представления в JSON не имеют — узел\n // остаётся, чтобы ключ не исчез из показа молча.\n case 'undefined':\n case 'function':\n case 'symbol': return 'unsupported'\n }\n\n // Недостижимо: ветки выше покрывают `typeof` целиком. Оставлено ради вывода\n // типов — без него TS не считает функцию всегда возвращающей.\n return 'unsupported'\n}\n\ntype BuildContext = {\n maxStringLength: number\n maxArrayItems: number\n /**\n * Цепочка предков текущего узла, а не все встреченные объекты.\n *\n * Разница принципиальна и отличает обход дерева от `replacer` у\n * `JSON.stringify`: тому стек недоступен, поэтому он метит `[Circular]` любую\n * повторную ссылку — в том числе объект, честно положенный в данные дважды.\n * Здесь стек есть, и маркер достаётся только настоящему циклу.\n */\n ancestors: Set<object>\n}\n\nfunction buildNode(label: string, path: string, value: unknown, context: BuildContext): GrJsonNode {\n const kind = kindOf(value)\n\n if (kind !== 'object' && kind !== 'array') {\n const { preview, truncated } = scalarPreview(value, context.maxStringLength)\n\n return { path, label, kind, preview, value, truncated, isLeaf: true }\n }\n\n const container = value as object\n\n if (context.ancestors.has(container)) {\n return { path, label, kind, preview: CIRCULAR_MARKER, value, truncated: false, isLeaf: true }\n }\n\n const entries = Array.isArray(value)\n ? value.map((item, index) => [String(index), item] as const)\n : Object.entries(container)\n\n // Пустой объект и пустой массив — листья: раскрывать нечего, а ветка без\n // детей рисует стрелку, которая ничего не делает.\n if (entries.length === 0) {\n return {\n path,\n label,\n kind,\n preview: Array.isArray(value) ? '[]' : '{}',\n value,\n truncated: false,\n isLeaf: true,\n }\n }\n\n context.ancestors.add(container)\n\n const limit = Math.max(0, context.maxArrayItems)\n const isOverLimit = Array.isArray(value) && entries.length > limit\n const visible = isOverLimit ? entries.slice(0, limit) : entries\n\n const children: GrJsonNode[] = visible.map(([key, item]) => buildNode(\n key,\n Array.isArray(value) ? `${path}[${key}]` : appendKey(path, key),\n item,\n context,\n ))\n\n if (isOverLimit) {\n const rest = entries.length - limit\n\n children.push({\n path: `${path}[…]`,\n label: '…',\n kind: 'truncation',\n preview: String(rest),\n value: (value as unknown[]).slice(limit),\n truncated: true,\n isLeaf: true,\n })\n }\n\n context.ancestors.delete(container)\n\n return {\n path,\n label,\n kind,\n preview: branchPreview(kind, entries.length),\n value,\n truncated: isOverLimit,\n isLeaf: false,\n children,\n }\n}\n\n/**\n * Значение → узлы дерева. Корень всегда один: даже скаляр на входе — это узел,\n * иначе дерево пришлось бы то показывать, то нет.\n */\nexport function jsonToNodes(value: unknown, options: GrJsonToNodesOptions = {}): GrJsonNode[] {\n const context: BuildContext = {\n maxStringLength: options.maxStringLength ?? DEFAULT_MAX_STRING_LENGTH,\n maxArrayItems: options.maxArrayItems ?? DEFAULT_MAX_ARRAY_ITEMS,\n ancestors: new Set(),\n }\n\n return [buildNode(options.rootLabel ?? DEFAULT_ROOT_LABEL, DEFAULT_ROOT_LABEL, value, context)]\n}\n\n/** Пути всех узлов до заданной глубины — ими задаётся начальная свёртка. */\nexport function pathsToDepth(nodes: GrJsonNode[], depth: number, level = 0): string[] {\n if (level >= depth)\n return []\n\n return nodes.flatMap(node => (\n node.children ? [node.path, ...pathsToDepth(node.children, depth, level + 1)] : []\n ))\n}\n\n/** Пути всех веток — для «раскрыть всё». */\nexport function branchPaths(nodes: GrJsonNode[]): string[] {\n return nodes.flatMap(node => (node.children ? [node.path, ...branchPaths(node.children)] : []))\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n jsonValueClass,\n jsonViewerContentClass,\n jsonViewerCopyClass,\n jsonViewerGroupClass,\n jsonViewerKeyClass,\n jsonViewerMutedClass,\n jsonViewerPunctuationClass,\n jsonViewerRootClass,\n jsonViewerRowClass,\n jsonViewerSearchClass,\n jsonViewerToolbarClass,\n jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n value: unknown\n /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n rootLabel?: string\n /** Сколько уровней раскрыто изначально. */\n defaultExpandDepth?: number\n /**\n * Длина строкового значения, после которой показ обрезается.\n *\n * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n * берут. Копирование при этом отдаёт значение целиком.\n */\n maxStringLength?: number\n /** Сколько элементов массива разбирать до заглушки «ещё N». */\n maxArrayItems?: number\n /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n searchable?: boolean\n /** Кнопка копирования узла в строке. */\n copyable?: boolean\n /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n virtual?: boolean\n /** Высота области просмотра: число — пиксели, строка — как есть. */\n maxHeight?: string | number\n /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n ariaLabel?: string\n size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n /** Узел скопирован: путь для тикета и полное значение. */\n (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n // компонент заглянет в `GrConfigProvider`.\n rootLabel: undefined,\n defaultExpandDepth: undefined,\n maxStringLength: undefined,\n maxArrayItems: undefined,\n searchable: undefined,\n copyable: undefined,\n virtual: false,\n maxHeight: undefined,\n ariaLabel: undefined,\n size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n rootLabel: props.rootLabel,\n maxStringLength: resolvedMaxString.value,\n maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n [nodes, resolvedDepth],\n ([list, depth], previous) => {\n const branches = branchPaths(list)\n const depthChanged = previous !== undefined && previous[1] !== depth\n\n if (depthChanged || (!depthApplied && branches.length > 0)) {\n depthApplied = branches.length > 0\n expandedPaths.value = pathsToDepth(list, depth)\n return\n }\n\n const alive = new Set(branches)\n expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n },\n { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n if (!expandedPaths.value.includes(node.path))\n expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n if (!value)\n return true\n\n const needle = value.toLowerCase()\n\n return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n\n if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n if (copiedTimer !== null) {\n clearTimeout(copiedTimer)\n copiedTimer = null\n }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n try {\n await navigator.clipboard.writeText(text)\n }\n catch {\n announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n return\n }\n\n copiedPath.value = node.path\n resetCopiedTimer()\n copiedTimer = window.setTimeout(() => {\n copiedPath.value = null\n copiedTimer = null\n }, 1200)\n\n announce(t('gr.jsonViewer.copied', 'Value copied'))\n emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n <GrInput\n v-model=\"query\"\n :class=\"jsonViewerSearchClass\"\n :size=\"resolvedSize\"\n clearable\n :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n />\n\n <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n </GrButton>\n <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n </GrButton>\n </div>\n\n <GrTree\n ref=\"treeRef\"\n :data=\"nodes\"\n node-key=\"path\"\n :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n :default-expanded-keys=\"expandedPaths\"\n :filter-node-method=\"matchKeyOrValue\"\n :content-class=\"jsonViewerContentClass\"\n :virtual=\"virtual\"\n :max-height=\"maxHeight\"\n :size=\"resolvedSize\"\n :aria-label=\"ariaLabel\"\n @node-expand=\"rememberExpanded\"\n @node-collapse=\"forgetExpanded\"\n >\n <template #default=\"{ data }\">\n <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n <span\n data-gr-json-viewer-value\n :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n >\n <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n </span>\n\n <span\n v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n :class=\"jsonViewerMutedClass\"\n >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n <GrButton\n v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n data-gr-json-viewer-copy\n variant=\"ghost\"\n size=\"xs\"\n square\n :class=\"jsonViewerCopyClass\"\n :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n @click.stop=\"copyNode(data as GrJsonNode)\"\n >\n <component\n :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\"\n />\n </GrButton>\n </span>\n </template>\n </GrTree>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n jsonValueClass,\n jsonViewerContentClass,\n jsonViewerCopyClass,\n jsonViewerGroupClass,\n jsonViewerKeyClass,\n jsonViewerMutedClass,\n jsonViewerPunctuationClass,\n jsonViewerRootClass,\n jsonViewerRowClass,\n jsonViewerSearchClass,\n jsonViewerToolbarClass,\n jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n value: unknown\n /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n rootLabel?: string\n /** Сколько уровней раскрыто изначально. */\n defaultExpandDepth?: number\n /**\n * Длина строкового значения, после которой показ обрезается.\n *\n * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n * берут. Копирование при этом отдаёт значение целиком.\n */\n maxStringLength?: number\n /** Сколько элементов массива разбирать до заглушки «ещё N». */\n maxArrayItems?: number\n /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n searchable?: boolean\n /** Кнопка копирования узла в строке. */\n copyable?: boolean\n /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n virtual?: boolean\n /** Высота области просмотра: число — пиксели, строка — как есть. */\n maxHeight?: string | number\n /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n ariaLabel?: string\n size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n /** Узел скопирован: путь для тикета и полное значение. */\n (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n // компонент заглянет в `GrConfigProvider`.\n rootLabel: undefined,\n defaultExpandDepth: undefined,\n maxStringLength: undefined,\n maxArrayItems: undefined,\n searchable: undefined,\n copyable: undefined,\n virtual: false,\n maxHeight: undefined,\n ariaLabel: undefined,\n size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n rootLabel: props.rootLabel,\n maxStringLength: resolvedMaxString.value,\n maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n [nodes, resolvedDepth],\n ([list, depth], previous) => {\n const branches = branchPaths(list)\n const depthChanged = previous !== undefined && previous[1] !== depth\n\n if (depthChanged || (!depthApplied && branches.length > 0)) {\n depthApplied = branches.length > 0\n expandedPaths.value = pathsToDepth(list, depth)\n return\n }\n\n const alive = new Set(branches)\n expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n },\n { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n if (!expandedPaths.value.includes(node.path))\n expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n if (!value)\n return true\n\n const needle = value.toLowerCase()\n\n return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n\n if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n if (copiedTimer !== null) {\n clearTimeout(copiedTimer)\n copiedTimer = null\n }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n try {\n await navigator.clipboard.writeText(text)\n }\n catch {\n announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n return\n }\n\n copiedPath.value = node.path\n resetCopiedTimer()\n copiedTimer = window.setTimeout(() => {\n copiedPath.value = null\n copiedTimer = null\n }, 1200)\n\n announce(t('gr.jsonViewer.copied', 'Value copied'))\n emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n <GrInput\n v-model=\"query\"\n :class=\"jsonViewerSearchClass\"\n :size=\"resolvedSize\"\n clearable\n :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n />\n\n <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n </GrButton>\n <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n </GrButton>\n </div>\n\n <GrTree\n ref=\"treeRef\"\n :data=\"nodes\"\n node-key=\"path\"\n :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n :default-expanded-keys=\"expandedPaths\"\n :filter-node-method=\"matchKeyOrValue\"\n :content-class=\"jsonViewerContentClass\"\n :virtual=\"virtual\"\n :max-height=\"maxHeight\"\n :size=\"resolvedSize\"\n :aria-label=\"ariaLabel\"\n @node-expand=\"rememberExpanded\"\n @node-collapse=\"forgetExpanded\"\n >\n <template #default=\"{ data }\">\n <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n <span\n data-gr-json-viewer-value\n :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n >\n <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n </span>\n\n <span\n v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n :class=\"jsonViewerMutedClass\"\n >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n <GrButton\n v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n data-gr-json-viewer-copy\n variant=\"ghost\"\n size=\"xs\"\n square\n :class=\"jsonViewerCopyClass\"\n :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n @click.stop=\"copyNode(data as GrJsonNode)\"\n >\n <component\n :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n class=\"h-3.5 w-3.5\"\n aria-hidden=\"true\"\n />\n </GrButton>\n </span>\n </template>\n </GrTree>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrJsonViewer_default } from "./chunks/GrJsonViewer-
|
|
1
|
+
import { t as GrJsonViewer_default } from "./chunks/GrJsonViewer-CwCBMh4h.js";
|
|
2
2
|
import { n as grJsonViewerSafelist, t as grJsonViewerConfig } from "../../chunks/config-DpAYidyY.js";
|
|
3
3
|
export { GrJsonViewer_default as GrJsonViewer, GrJsonViewer_default as default, grJsonViewerConfig, grJsonViewerSafelist };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as useGrComponentSize } from "../../../chunks/context-CPMRfwVr.js";
|
|
2
2
|
import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
|
|
3
3
|
import { a as shiftSatisfied, n as isAppleDevice, r as isComposingEvent, t as eventMatchesKey } from "../../../chunks/keyboard-DE2yhz_b.js";
|
|
4
|
-
import { a as grKbdKeyClass, d as sequenceSeparatorClass, i as grKbdInnerKeyClass, r as grKbdComboClass, u as separatorClass } from "../../../chunks/grKbdStyles-
|
|
4
|
+
import { a as grKbdKeyClass, d as sequenceSeparatorClass, i as grKbdInnerKeyClass, r as grKbdComboClass, u as separatorClass } from "../../../chunks/grKbdStyles-ByMsX-lQ.js";
|
|
5
5
|
import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, onMounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref } from "vue";
|
|
6
6
|
//#region src/components/shared/hotkeyTokens.ts
|
|
7
7
|
function symbol(label, name) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrKbd-D_a1mPLe.js","names":[],"sources":["../../../../src/components/shared/hotkeyTokens.ts","../../../../src/components/shared/hotkey.ts","../../../../src/components/GrKbd/GrKbd.vue","../../../../src/components/GrKbd/GrKbd.vue"],"sourcesContent":["/**\n * Каталог клавиш, которые понимает `keys` у `GrKbd`.\n *\n * Таблица, а не цепочка `if`, по двум причинам: во-первых, список — часть\n * публичного контракта (потребителю нужно знать, что можно написать), и\n * витрина показывает именно его, а не свою копию; во-вторых, копия в демо или\n * в доке разошлась бы с форматтером молча.\n */\n\n/** Ключи читаемых имён — `gr.kbd.<name>`. */\nexport type GrKbdKeyName\n = | 'command' | 'option' | 'shift' | 'control' | 'enter' | 'escape' | 'tab'\n | 'backspace' | 'delete' | 'pageUp' | 'pageDown'\n | 'arrowUp' | 'arrowDown' | 'arrowLeft' | 'arrowRight'\n\n/** Одна клавиша в человекочитаемом виде. */\nexport interface HotkeyKeyView {\n /** Что видно на экране: символ (`⌘`) или слово (`Ctrl`). */\n label: string\n /**\n * Ключ читаемого имени (`gr.kbd.<name>`) для символьных клавиш. У `K` или\n * `Ctrl` его нет — они и так читаются вслух.\n */\n name?: GrKbdKeyName\n /** Символ (`⌘`, `↑`) или слово (`Ctrl`, `Esc`): от этого зависит склейка в одной плашке. */\n symbol?: boolean\n}\n\n/** Смысловая группа — ею витрина и дока раскладывают каталог. */\nexport type GrKbdTokenGroup = 'modifier' | 'editing' | 'navigation'\n\nexport interface GrKbdTokenSpec {\n /** Канонический токен: его пишут в `keys`. */\n token: string\n /** Что ещё принимается — синонимы и сам глиф. */\n aliases: readonly string[]\n group: GrKbdTokenGroup\n /** Вид на macOS и на остальных платформах. */\n apple: HotkeyKeyView\n other: HotkeyKeyView\n}\n\nfunction symbol(label: string, name: GrKbdKeyName): HotkeyKeyView {\n return { label, name, symbol: true }\n}\n\nfunction word(label: string, name?: GrKbdKeyName): HotkeyKeyView {\n return name ? { label, name } : { label }\n}\n\nexport const GR_KBD_TOKENS: readonly GrKbdTokenSpec[] = [\n // Модификаторы: на macOS символы, на остальных платформах слова.\n { token: 'mod', aliases: [], group: 'modifier', apple: symbol('⌘', 'command'), other: word('Ctrl') },\n { token: 'meta', aliases: ['cmd', 'command', '⌘'], group: 'modifier', apple: symbol('⌘', 'command'), other: word('Meta') },\n { token: 'ctrl', aliases: ['control', '⌃'], group: 'modifier', apple: symbol('⌃', 'control'), other: word('Ctrl') },\n { token: 'alt', aliases: ['option', '⌥'], group: 'modifier', apple: symbol('⌥', 'option'), other: word('Alt') },\n { token: 'shift', aliases: ['⇧'], group: 'modifier', apple: symbol('⇧', 'shift'), other: word('Shift') },\n\n { token: 'enter', aliases: ['return', '↵', '↩'], group: 'editing', apple: symbol('↩', 'enter'), other: word('Enter') },\n { token: 'esc', aliases: ['escape'], group: 'editing', apple: word('Esc', 'escape'), other: word('Esc', 'escape') },\n { token: 'tab', aliases: ['⇥'], group: 'editing', apple: symbol('⇥', 'tab'), other: word('Tab') },\n { token: 'space', aliases: [], group: 'editing', apple: word('Space'), other: word('Space') },\n { token: 'backspace', aliases: ['⌫'], group: 'editing', apple: symbol('⌫', 'backspace'), other: word('Backspace') },\n { token: 'delete', aliases: ['del', '⌦'], group: 'editing', apple: symbol('⌦', 'delete'), other: word('Del') },\n\n { token: 'up', aliases: ['arrowup', '↑'], group: 'navigation', apple: symbol('↑', 'arrowUp'), other: symbol('↑', 'arrowUp') },\n { token: 'down', aliases: ['arrowdown', '↓'], group: 'navigation', apple: symbol('↓', 'arrowDown'), other: symbol('↓', 'arrowDown') },\n { token: 'left', aliases: ['arrowleft', '←'], group: 'navigation', apple: symbol('←', 'arrowLeft'), other: symbol('←', 'arrowLeft') },\n { token: 'right', aliases: ['arrowright', '→'], group: 'navigation', apple: symbol('→', 'arrowRight'), other: symbol('→', 'arrowRight') },\n { token: 'home', aliases: [], group: 'navigation', apple: word('Home'), other: word('Home') },\n { token: 'end', aliases: [], group: 'navigation', apple: word('End'), other: word('End') },\n { token: 'pageup', aliases: ['pgup', '⇞'], group: 'navigation', apple: symbol('⇞', 'pageUp'), other: word('PgUp') },\n { token: 'pagedown', aliases: ['pgdn', 'pgdown', '⇟'], group: 'navigation', apple: symbol('⇟', 'pageDown'), other: word('PgDn') },\n]\n\nconst BY_ALIAS = new Map<string, GrKbdTokenSpec>()\nfor (const spec of GR_KBD_TOKENS) {\n BY_ALIAS.set(spec.token, spec)\n for (const alias of spec.aliases) BY_ALIAS.set(alias, spec)\n}\n\n/** Токен или его синоним — в описание клавиши. Регистр не важен, глиф тоже принимается. */\nexport function findKbdToken(token: string): GrKbdTokenSpec | undefined {\n const trimmed = token.trim()\n return BY_ALIAS.get(trimmed.toLowerCase()) ?? BY_ALIAS.get(trimmed)\n}\n","/**\n * Разбор, матчинг и человекочитаемое представление сочетаний клавиш.\n *\n * Общий модуль, а не часть `GrCommandPalette`: то же нужно `GrKbd`, а импорт из\n * чужой компонентной директории на сборке дал бы ребро `GrKbd →\n * GrCommandPalette` (хелпер уехал бы в чанк палитры) — `granular doctor` считает\n * такое незадекларированной зависимостью.\n *\n * Директива `v-hotkey` для палитры не годится: ей нужен смонтированный элемент,\n * а палитра в закрытом состоянии не рендерит ничего. Поэтому здесь — свой\n * матчер на `window`, с тем же синтаксисом комбинаций плюс токен `mod`.\n */\n\nimport { eventMatchesKey, isAppleDevice, isComposingEvent, shiftSatisfied } from '../../internal/keyboard'\n\nimport { findKbdToken, type HotkeyKeyView } from './hotkeyTokens'\n\nexport { isAppleDevice } from '../../internal/keyboard'\nexport { findKbdToken, GR_KBD_TOKENS } from './hotkeyTokens'\nexport type { GrKbdKeyName, GrKbdTokenGroup, GrKbdTokenSpec, HotkeyKeyView } from './hotkeyTokens'\n\nexport type ParsedCommandHotkey = {\n key: string\n ctrl: boolean\n meta: boolean\n alt: boolean\n shift: boolean\n /** `mod` — Cmd на macOS, Ctrl на остальных платформах. */\n mod: boolean\n}\n\nexport function parseCommandHotkey(combo: string): ParsedCommandHotkey | null {\n const parts = combo.split('+').map(p => p.trim()).filter(Boolean)\n const keyToken = parts.at(-1)\n if (!keyToken)\n return null\n\n const parsed: ParsedCommandHotkey = {\n key: keyToken.length === 1 ? keyToken.toLowerCase() : keyToken,\n ctrl: false,\n meta: false,\n alt: false,\n shift: false,\n mod: false,\n }\n\n for (const part of parts.slice(0, -1)) {\n const token = part.toLowerCase()\n if (token === 'mod')\n parsed.mod = true\n else if (token === 'ctrl' || token === 'control')\n parsed.ctrl = true\n else if (token === 'meta' || token === 'cmd' || token === 'command' || token === '⌘')\n parsed.meta = true\n else if (token === 'alt' || token === 'option')\n parsed.alt = true\n else if (token === 'shift')\n parsed.shift = true\n }\n\n return parsed\n}\n\nexport function matchesCommandHotkey(\n event: KeyboardEvent,\n hotkey: ParsedCommandHotkey,\n apple = isAppleDevice(),\n): boolean {\n // Клавиша во время IME-композиции принадлежит композиции, а не сочетанию.\n if (isComposingEvent(event))\n return false\n\n const expectMeta = hotkey.meta || (hotkey.mod && apple)\n const expectCtrl = hotkey.ctrl || (hotkey.mod && !apple)\n\n if (event.metaKey !== expectMeta)\n return false\n if (event.ctrlKey !== expectCtrl)\n return false\n if (event.altKey !== hotkey.alt)\n return false\n if (!shiftSatisfied(event, hotkey.key, hotkey.shift))\n return false\n\n // Комбинация с модификаторами матчится и по физическому коду: на нелатинской\n // раскладке `mod+K` приходит как `key: 'л'`, и без кода сочетание мертво.\n return eventMatchesKey(event, hotkey.key, {\n codeFallback: expectMeta || expectCtrl || hotkey.alt,\n })\n}\n\n/** Человекочитаемые клавиши для подсказки в поле ввода (`⌘` / `Ctrl`). */\nexport function formatCommandHotkey(hotkey: ParsedCommandHotkey, apple = isAppleDevice()): string[] {\n const keys: string[] = []\n if (hotkey.meta || (hotkey.mod && apple))\n keys.push('⌘')\n if (hotkey.ctrl || (hotkey.mod && !apple))\n keys.push('Ctrl')\n if (hotkey.alt)\n keys.push(apple ? '⌥' : 'Alt')\n if (hotkey.shift)\n keys.push(apple ? '⇧' : 'Shift')\n keys.push(hotkey.key.length === 1 ? hotkey.key.toUpperCase() : hotkey.key)\n return keys\n}\n\n/**\n * Токен → то, что видит пользователь. Каталог общий с витриной и докой\n * (`hotkeyTokens.ts`): цепочка `if` расходилась бы со списком, который читает\n * потребитель.\n */\nexport function formatHotkeyToken(token: string, apple: boolean): HotkeyKeyView {\n const spec = findKbdToken(token)\n if (spec)\n return apple ? spec.apple : spec.other\n\n // Не из каталога — печатная клавиша: одиночный символ заглавным, потому что\n // `k` и `K` на клавише выглядят одинаково.\n const t = token.trim()\n return { label: t.length === 1 ? t.toUpperCase() : t }\n}\n\nexport function formatHotkeyTokens(tokens: readonly string[], apple: boolean): HotkeyKeyView[] {\n return tokens.map(token => formatHotkeyToken(token, apple))\n}\n\n/** Комбинация строкой (`mod+shift+K`) — в набор токенов в порядке показа. */\nexport function splitHotkeyCombo(combo: string): string[] {\n return combo.split('+').map(part => part.trim()).filter(Boolean)\n}\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n grKbdComboClass,\n grKbdInnerKeyClass,\n grKbdKeyClass,\n separatorClass,\n sequenceSeparatorClass,\n type GrKbdVariant,\n} from './grKbdStyles'\n\nexport interface GrKbdProps {\n size?: GrKbdSize\n /**\n * `merged` (по умолчанию) — сочетание одной плашкой, как его пишут сами\n * системы: `⌘K` на macOS, `Ctrl+K` на прочих. `split` — по плашке на клавишу.\n * `sequence` — аккорд «G затем I»: клавиши нажимают одну за другой.\n */\n variant?: GrKbdVariant\n /**\n * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n */\n keys?: string | string[]\n /**\n * Разделитель между клавишами. Не задан — авто: в общей плашке символы\n * склеиваются (`⌘K`), а слова разделяются плюсом (`Ctrl+K`); у `split` это\n * плюс, у `sequence` — слово из локали. Пустая строка — только зазор.\n */\n separator?: string\n platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\nexport type { GrKbdVariant } from './grKbdStyles'\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n defineProps<GrKbdProps>(),\n {\n size: undefined,\n variant: 'merged',\n keys: undefined,\n separator: undefined,\n platform: 'auto',\n },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n if (props.platform === 'apple')\n return true\n if (props.platform === 'other')\n return false\n return detectedApple.value\n})\n\nconst tokens = computed(() => {\n if (props.keys === undefined)\n return []\n return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst innerKeyClass = computed(() => grKbdInnerKeyClass(resolvedSize.value, props.variant))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value, props.variant))\n\n/**\n * Разделитель перед клавишей `index`.\n *\n * Авто-правило одно: в общей плашке символы склеиваются, слова — нет. Внутри\n * одной платформы набор однороден (macOS даёт `⌘⌥⇧`, прочие — `Ctrl`, `Alt`),\n * поэтому «слева символ» и означает «пишем как система».\n */\nfunction separatorAt(index: number): string {\n if (index === 0)\n return ''\n if (props.separator !== undefined)\n return props.separator\n if (props.variant === 'sequence')\n return t('gr.kbd.then', 'then')\n if (props.variant === 'split')\n return '+'\n\n return keyViews.value[index - 1]?.symbol ? '' : '+'\n}\n\nconst NAME_FALLBACKS: Record<string, string> = {\n command: 'Command',\n option: 'Option',\n shift: 'Shift',\n control: 'Control',\n enter: 'Enter',\n escape: 'Escape',\n tab: 'Tab',\n backspace: 'Backspace',\n delete: 'Delete',\n pageUp: 'Page Up',\n pageDown: 'Page Down',\n arrowUp: 'Arrow Up',\n arrowDown: 'Arrow Down',\n arrowLeft: 'Arrow Left',\n arrowRight: 'Arrow Right',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n\ndefineSlots<{\n /** Клавиша или сочетание вместо пропа `keys`. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <kbd\n v-if=\"hasCombo\"\n data-gr-kbd\n data-gr-kbd-combo\n :data-variant=\"variant\"\n :class=\"comboClass\"\n ><template\n v-for=\"(key, index) in keyViews\"\n :key=\"`${key.label}-${index}`\"\n ><span\n v-if=\"separatorAt(index)\"\n :class=\"variant === 'sequence' ? sequenceSeparatorClass : separatorClass\"\n aria-hidden=\"true\"\n >{{ separatorAt(index) }}</span><kbd\n data-gr-kbd-key\n :class=\"innerKeyClass\"\n ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n v-if=\"key.name\"\n class=\"sr-only\"\n >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n <kbd\n v-else\n data-gr-kbd\n data-gr-kbd-key\n :class=\"keyClass\"\n ><slot /></kbd>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n grKbdComboClass,\n grKbdInnerKeyClass,\n grKbdKeyClass,\n separatorClass,\n sequenceSeparatorClass,\n type GrKbdVariant,\n} from './grKbdStyles'\n\nexport interface GrKbdProps {\n size?: GrKbdSize\n /**\n * `merged` (по умолчанию) — сочетание одной плашкой, как его пишут сами\n * системы: `⌘K` на macOS, `Ctrl+K` на прочих. `split` — по плашке на клавишу.\n * `sequence` — аккорд «G затем I»: клавиши нажимают одну за другой.\n */\n variant?: GrKbdVariant\n /**\n * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n */\n keys?: string | string[]\n /**\n * Разделитель между клавишами. Не задан — авто: в общей плашке символы\n * склеиваются (`⌘K`), а слова разделяются плюсом (`Ctrl+K`); у `split` это\n * плюс, у `sequence` — слово из локали. Пустая строка — только зазор.\n */\n separator?: string\n platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\nexport type { GrKbdVariant } from './grKbdStyles'\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n defineProps<GrKbdProps>(),\n {\n size: undefined,\n variant: 'merged',\n keys: undefined,\n separator: undefined,\n platform: 'auto',\n },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n if (props.platform === 'apple')\n return true\n if (props.platform === 'other')\n return false\n return detectedApple.value\n})\n\nconst tokens = computed(() => {\n if (props.keys === undefined)\n return []\n return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst innerKeyClass = computed(() => grKbdInnerKeyClass(resolvedSize.value, props.variant))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value, props.variant))\n\n/**\n * Разделитель перед клавишей `index`.\n *\n * Авто-правило одно: в общей плашке символы склеиваются, слова — нет. Внутри\n * одной платформы набор однороден (macOS даёт `⌘⌥⇧`, прочие — `Ctrl`, `Alt`),\n * поэтому «слева символ» и означает «пишем как система».\n */\nfunction separatorAt(index: number): string {\n if (index === 0)\n return ''\n if (props.separator !== undefined)\n return props.separator\n if (props.variant === 'sequence')\n return t('gr.kbd.then', 'then')\n if (props.variant === 'split')\n return '+'\n\n return keyViews.value[index - 1]?.symbol ? '' : '+'\n}\n\nconst NAME_FALLBACKS: Record<string, string> = {\n command: 'Command',\n option: 'Option',\n shift: 'Shift',\n control: 'Control',\n enter: 'Enter',\n escape: 'Escape',\n tab: 'Tab',\n backspace: 'Backspace',\n delete: 'Delete',\n pageUp: 'Page Up',\n pageDown: 'Page Down',\n arrowUp: 'Arrow Up',\n arrowDown: 'Arrow Down',\n arrowLeft: 'Arrow Left',\n arrowRight: 'Arrow Right',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n\ndefineSlots<{\n /** Клавиша или сочетание вместо пропа `keys`. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <kbd\n v-if=\"hasCombo\"\n data-gr-kbd\n data-gr-kbd-combo\n :data-variant=\"variant\"\n :class=\"comboClass\"\n ><template\n v-for=\"(key, index) in keyViews\"\n :key=\"`${key.label}-${index}`\"\n ><span\n v-if=\"separatorAt(index)\"\n :class=\"variant === 'sequence' ? sequenceSeparatorClass : separatorClass\"\n aria-hidden=\"true\"\n >{{ separatorAt(index) }}</span><kbd\n data-gr-kbd-key\n :class=\"innerKeyClass\"\n ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n v-if=\"key.name\"\n class=\"sr-only\"\n >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n <kbd\n v-else\n data-gr-kbd\n data-gr-kbd-key\n :class=\"keyClass\"\n ><slot /></kbd>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrKbd-BNMeoaLV.js","names":[],"sources":["../../../../src/components/shared/hotkeyTokens.ts","../../../../src/components/shared/hotkey.ts","../../../../src/components/GrKbd/GrKbd.vue","../../../../src/components/GrKbd/GrKbd.vue"],"sourcesContent":["/**\n * Каталог клавиш, которые понимает `keys` у `GrKbd`.\n *\n * Таблица, а не цепочка `if`, по двум причинам: во-первых, список — часть\n * публичного контракта (потребителю нужно знать, что можно написать), и\n * витрина показывает именно его, а не свою копию; во-вторых, копия в демо или\n * в доке разошлась бы с форматтером молча.\n */\n\n/** Ключи читаемых имён — `gr.kbd.<name>`. */\nexport type GrKbdKeyName\n = | 'command' | 'option' | 'shift' | 'control' | 'enter' | 'escape' | 'tab'\n | 'backspace' | 'delete' | 'pageUp' | 'pageDown'\n | 'arrowUp' | 'arrowDown' | 'arrowLeft' | 'arrowRight'\n\n/** Одна клавиша в человекочитаемом виде. */\nexport interface HotkeyKeyView {\n /** Что видно на экране: символ (`⌘`) или слово (`Ctrl`). */\n label: string\n /**\n * Ключ читаемого имени (`gr.kbd.<name>`) для символьных клавиш. У `K` или\n * `Ctrl` его нет — они и так читаются вслух.\n */\n name?: GrKbdKeyName\n /** Символ (`⌘`, `↑`) или слово (`Ctrl`, `Esc`): от этого зависит склейка в одной плашке. */\n symbol?: boolean\n}\n\n/** Смысловая группа — ею витрина и дока раскладывают каталог. */\nexport type GrKbdTokenGroup = 'modifier' | 'editing' | 'navigation'\n\nexport interface GrKbdTokenSpec {\n /** Канонический токен: его пишут в `keys`. */\n token: string\n /** Что ещё принимается — синонимы и сам глиф. */\n aliases: readonly string[]\n group: GrKbdTokenGroup\n /** Вид на macOS и на остальных платформах. */\n apple: HotkeyKeyView\n other: HotkeyKeyView\n}\n\nfunction symbol(label: string, name: GrKbdKeyName): HotkeyKeyView {\n return { label, name, symbol: true }\n}\n\nfunction word(label: string, name?: GrKbdKeyName): HotkeyKeyView {\n return name ? { label, name } : { label }\n}\n\nexport const GR_KBD_TOKENS: readonly GrKbdTokenSpec[] = [\n // Модификаторы: на macOS символы, на остальных платформах слова.\n { token: 'mod', aliases: [], group: 'modifier', apple: symbol('⌘', 'command'), other: word('Ctrl') },\n { token: 'meta', aliases: ['cmd', 'command', '⌘'], group: 'modifier', apple: symbol('⌘', 'command'), other: word('Meta') },\n { token: 'ctrl', aliases: ['control', '⌃'], group: 'modifier', apple: symbol('⌃', 'control'), other: word('Ctrl') },\n { token: 'alt', aliases: ['option', '⌥'], group: 'modifier', apple: symbol('⌥', 'option'), other: word('Alt') },\n { token: 'shift', aliases: ['⇧'], group: 'modifier', apple: symbol('⇧', 'shift'), other: word('Shift') },\n\n { token: 'enter', aliases: ['return', '↵', '↩'], group: 'editing', apple: symbol('↩', 'enter'), other: word('Enter') },\n { token: 'esc', aliases: ['escape'], group: 'editing', apple: word('Esc', 'escape'), other: word('Esc', 'escape') },\n { token: 'tab', aliases: ['⇥'], group: 'editing', apple: symbol('⇥', 'tab'), other: word('Tab') },\n { token: 'space', aliases: [], group: 'editing', apple: word('Space'), other: word('Space') },\n { token: 'backspace', aliases: ['⌫'], group: 'editing', apple: symbol('⌫', 'backspace'), other: word('Backspace') },\n { token: 'delete', aliases: ['del', '⌦'], group: 'editing', apple: symbol('⌦', 'delete'), other: word('Del') },\n\n { token: 'up', aliases: ['arrowup', '↑'], group: 'navigation', apple: symbol('↑', 'arrowUp'), other: symbol('↑', 'arrowUp') },\n { token: 'down', aliases: ['arrowdown', '↓'], group: 'navigation', apple: symbol('↓', 'arrowDown'), other: symbol('↓', 'arrowDown') },\n { token: 'left', aliases: ['arrowleft', '←'], group: 'navigation', apple: symbol('←', 'arrowLeft'), other: symbol('←', 'arrowLeft') },\n { token: 'right', aliases: ['arrowright', '→'], group: 'navigation', apple: symbol('→', 'arrowRight'), other: symbol('→', 'arrowRight') },\n { token: 'home', aliases: [], group: 'navigation', apple: word('Home'), other: word('Home') },\n { token: 'end', aliases: [], group: 'navigation', apple: word('End'), other: word('End') },\n { token: 'pageup', aliases: ['pgup', '⇞'], group: 'navigation', apple: symbol('⇞', 'pageUp'), other: word('PgUp') },\n { token: 'pagedown', aliases: ['pgdn', 'pgdown', '⇟'], group: 'navigation', apple: symbol('⇟', 'pageDown'), other: word('PgDn') },\n]\n\nconst BY_ALIAS = new Map<string, GrKbdTokenSpec>()\nfor (const spec of GR_KBD_TOKENS) {\n BY_ALIAS.set(spec.token, spec)\n for (const alias of spec.aliases) BY_ALIAS.set(alias, spec)\n}\n\n/** Токен или его синоним — в описание клавиши. Регистр не важен, глиф тоже принимается. */\nexport function findKbdToken(token: string): GrKbdTokenSpec | undefined {\n const trimmed = token.trim()\n return BY_ALIAS.get(trimmed.toLowerCase()) ?? BY_ALIAS.get(trimmed)\n}\n","/**\n * Разбор, матчинг и человекочитаемое представление сочетаний клавиш.\n *\n * Общий модуль, а не часть `GrCommandPalette`: то же нужно `GrKbd`, а импорт из\n * чужой компонентной директории на сборке дал бы ребро `GrKbd →\n * GrCommandPalette` (хелпер уехал бы в чанк палитры) — `granular doctor` считает\n * такое незадекларированной зависимостью.\n *\n * Директива `v-hotkey` для палитры не годится: ей нужен смонтированный элемент,\n * а палитра в закрытом состоянии не рендерит ничего. Поэтому здесь — свой\n * матчер на `window`, с тем же синтаксисом комбинаций плюс токен `mod`.\n */\n\nimport { eventMatchesKey, isAppleDevice, isComposingEvent, shiftSatisfied } from '../../internal/keyboard'\n\nimport { findKbdToken, type HotkeyKeyView } from './hotkeyTokens'\n\nexport { isAppleDevice } from '../../internal/keyboard'\nexport { findKbdToken, GR_KBD_TOKENS } from './hotkeyTokens'\nexport type { GrKbdKeyName, GrKbdTokenGroup, GrKbdTokenSpec, HotkeyKeyView } from './hotkeyTokens'\n\nexport type ParsedCommandHotkey = {\n key: string\n ctrl: boolean\n meta: boolean\n alt: boolean\n shift: boolean\n /** `mod` — Cmd на macOS, Ctrl на остальных платформах. */\n mod: boolean\n}\n\nexport function parseCommandHotkey(combo: string): ParsedCommandHotkey | null {\n const parts = combo.split('+').map(p => p.trim()).filter(Boolean)\n const keyToken = parts.at(-1)\n if (!keyToken)\n return null\n\n const parsed: ParsedCommandHotkey = {\n key: keyToken.length === 1 ? keyToken.toLowerCase() : keyToken,\n ctrl: false,\n meta: false,\n alt: false,\n shift: false,\n mod: false,\n }\n\n for (const part of parts.slice(0, -1)) {\n const token = part.toLowerCase()\n if (token === 'mod')\n parsed.mod = true\n else if (token === 'ctrl' || token === 'control')\n parsed.ctrl = true\n else if (token === 'meta' || token === 'cmd' || token === 'command' || token === '⌘')\n parsed.meta = true\n else if (token === 'alt' || token === 'option')\n parsed.alt = true\n else if (token === 'shift')\n parsed.shift = true\n }\n\n return parsed\n}\n\nexport function matchesCommandHotkey(\n event: KeyboardEvent,\n hotkey: ParsedCommandHotkey,\n apple = isAppleDevice(),\n): boolean {\n // Клавиша во время IME-композиции принадлежит композиции, а не сочетанию.\n if (isComposingEvent(event))\n return false\n\n const expectMeta = hotkey.meta || (hotkey.mod && apple)\n const expectCtrl = hotkey.ctrl || (hotkey.mod && !apple)\n\n if (event.metaKey !== expectMeta)\n return false\n if (event.ctrlKey !== expectCtrl)\n return false\n if (event.altKey !== hotkey.alt)\n return false\n if (!shiftSatisfied(event, hotkey.key, hotkey.shift))\n return false\n\n // Комбинация с модификаторами матчится и по физическому коду: на нелатинской\n // раскладке `mod+K` приходит как `key: 'л'`, и без кода сочетание мертво.\n return eventMatchesKey(event, hotkey.key, {\n codeFallback: expectMeta || expectCtrl || hotkey.alt,\n })\n}\n\n/** Человекочитаемые клавиши для подсказки в поле ввода (`⌘` / `Ctrl`). */\nexport function formatCommandHotkey(hotkey: ParsedCommandHotkey, apple = isAppleDevice()): string[] {\n const keys: string[] = []\n if (hotkey.meta || (hotkey.mod && apple))\n keys.push('⌘')\n if (hotkey.ctrl || (hotkey.mod && !apple))\n keys.push('Ctrl')\n if (hotkey.alt)\n keys.push(apple ? '⌥' : 'Alt')\n if (hotkey.shift)\n keys.push(apple ? '⇧' : 'Shift')\n keys.push(hotkey.key.length === 1 ? hotkey.key.toUpperCase() : hotkey.key)\n return keys\n}\n\n/**\n * Токен → то, что видит пользователь. Каталог общий с витриной и докой\n * (`hotkeyTokens.ts`): цепочка `if` расходилась бы со списком, который читает\n * потребитель.\n */\nexport function formatHotkeyToken(token: string, apple: boolean): HotkeyKeyView {\n const spec = findKbdToken(token)\n if (spec)\n return apple ? spec.apple : spec.other\n\n // Не из каталога — печатная клавиша: одиночный символ заглавным, потому что\n // `k` и `K` на клавише выглядят одинаково.\n const t = token.trim()\n return { label: t.length === 1 ? t.toUpperCase() : t }\n}\n\nexport function formatHotkeyTokens(tokens: readonly string[], apple: boolean): HotkeyKeyView[] {\n return tokens.map(token => formatHotkeyToken(token, apple))\n}\n\n/** Комбинация строкой (`mod+shift+K`) — в набор токенов в порядке показа. */\nexport function splitHotkeyCombo(combo: string): string[] {\n return combo.split('+').map(part => part.trim()).filter(Boolean)\n}\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n grKbdComboClass,\n grKbdInnerKeyClass,\n grKbdKeyClass,\n separatorClass,\n sequenceSeparatorClass,\n type GrKbdVariant,\n} from './grKbdStyles'\n\nexport interface GrKbdProps {\n size?: GrKbdSize\n /**\n * `merged` (по умолчанию) — сочетание одной плашкой, как его пишут сами\n * системы: `⌘K` на macOS, `Ctrl+K` на прочих. `split` — по плашке на клавишу.\n * `sequence` — аккорд «G затем I»: клавиши нажимают одну за другой.\n */\n variant?: GrKbdVariant\n /**\n * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n */\n keys?: string | string[]\n /**\n * Разделитель между клавишами. Не задан — авто: в общей плашке символы\n * склеиваются (`⌘K`), а слова разделяются плюсом (`Ctrl+K`); у `split` это\n * плюс, у `sequence` — слово из локали. Пустая строка — только зазор.\n */\n separator?: string\n platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\nexport type { GrKbdVariant } from './grKbdStyles'\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n defineProps<GrKbdProps>(),\n {\n size: undefined,\n variant: 'merged',\n keys: undefined,\n separator: undefined,\n platform: 'auto',\n },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n if (props.platform === 'apple')\n return true\n if (props.platform === 'other')\n return false\n return detectedApple.value\n})\n\nconst tokens = computed(() => {\n if (props.keys === undefined)\n return []\n return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst innerKeyClass = computed(() => grKbdInnerKeyClass(resolvedSize.value, props.variant))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value, props.variant))\n\n/**\n * Разделитель перед клавишей `index`.\n *\n * Авто-правило одно: в общей плашке символы склеиваются, слова — нет. Внутри\n * одной платформы набор однороден (macOS даёт `⌘⌥⇧`, прочие — `Ctrl`, `Alt`),\n * поэтому «слева символ» и означает «пишем как система».\n */\nfunction separatorAt(index: number): string {\n if (index === 0)\n return ''\n if (props.separator !== undefined)\n return props.separator\n if (props.variant === 'sequence')\n return t('gr.kbd.then', 'then')\n if (props.variant === 'split')\n return '+'\n\n return keyViews.value[index - 1]?.symbol ? '' : '+'\n}\n\nconst NAME_FALLBACKS: Record<string, string> = {\n command: 'Command',\n option: 'Option',\n shift: 'Shift',\n control: 'Control',\n enter: 'Enter',\n escape: 'Escape',\n tab: 'Tab',\n backspace: 'Backspace',\n delete: 'Delete',\n pageUp: 'Page Up',\n pageDown: 'Page Down',\n arrowUp: 'Arrow Up',\n arrowDown: 'Arrow Down',\n arrowLeft: 'Arrow Left',\n arrowRight: 'Arrow Right',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n\ndefineSlots<{\n /** Клавиша или сочетание вместо пропа `keys`. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <kbd\n v-if=\"hasCombo\"\n data-gr-kbd\n data-gr-kbd-combo\n :data-variant=\"variant\"\n :class=\"comboClass\"\n ><template\n v-for=\"(key, index) in keyViews\"\n :key=\"`${key.label}-${index}`\"\n ><span\n v-if=\"separatorAt(index)\"\n :class=\"variant === 'sequence' ? sequenceSeparatorClass : separatorClass\"\n aria-hidden=\"true\"\n >{{ separatorAt(index) }}</span><kbd\n data-gr-kbd-key\n :class=\"innerKeyClass\"\n ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n v-if=\"key.name\"\n class=\"sr-only\"\n >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n <kbd\n v-else\n data-gr-kbd\n data-gr-kbd-key\n :class=\"keyClass\"\n ><slot /></kbd>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue'\n\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport type { GrComponentSize } from '../shared/sizes'\nimport { formatHotkeyTokens, isAppleDevice, splitHotkeyCombo } from '../shared/hotkey'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n grKbdComboClass,\n grKbdInnerKeyClass,\n grKbdKeyClass,\n separatorClass,\n sequenceSeparatorClass,\n type GrKbdVariant,\n} from './grKbdStyles'\n\nexport interface GrKbdProps {\n size?: GrKbdSize\n /**\n * `merged` (по умолчанию) — сочетание одной плашкой, как его пишут сами\n * системы: `⌘K` на macOS, `Ctrl+K` на прочих. `split` — по плашке на клавишу.\n * `sequence` — аккорд «G затем I»: клавиши нажимают одну за другой.\n */\n variant?: GrKbdVariant\n /**\n * Сочетание: строкой (`\"mod+shift+K\"`) или набором токенов\n * (`['mod', 'K']`). Токен `mod` — Cmd на macOS, Ctrl на остальных.\n */\n keys?: string | string[]\n /**\n * Разделитель между клавишами. Не задан — авто: в общей плашке символы\n * склеиваются (`⌘K`), а слова разделяются плюсом (`Ctrl+K`); у `split` это\n * плюс, у `sequence` — слово из локали. Пустая строка — только зазор.\n */\n separator?: string\n platform?: GrKbdPlatform\n}\n\n/**\n * GrKbd — GR-примитив для отображения клавиш и сочетаний (`<kbd>`).\n *\n * Одна клавиша — слотом: `<GrKbd>Esc</GrKbd>`.\n * Сочетание — пропом: `<GrKbd keys=\"mod+K\" />` (на macOS `⌘ K`, иначе `Ctrl K`).\n */\nexport type GrKbdSize = GrComponentSize\n\nexport type { GrKbdVariant } from './grKbdStyles'\n\n/** Откуда брать платформу для токена `mod`. */\nexport type GrKbdPlatform = 'auto' | 'apple' | 'other'\n\nconst props = withDefaults(\n defineProps<GrKbdProps>(),\n {\n size: undefined,\n variant: 'merged',\n keys: undefined,\n separator: undefined,\n platform: 'auto',\n },\n)\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrKbd' })\nconst { t } = useGranularityTranslations()\n\n/**\n * Платформа уточняется только после монтирования: `navigator` в теле `setup`\n * либо роняет серверный рендер, либо расходится с ним и ломает гидрацию.\n * До этого момента показываем не-Apple вариант — он же приходит с сервера.\n */\nconst detectedApple = ref(false)\n\nonMounted(() => {\n detectedApple.value = isAppleDevice()\n})\n\nconst isApple = computed(() => {\n if (props.platform === 'apple')\n return true\n if (props.platform === 'other')\n return false\n return detectedApple.value\n})\n\nconst tokens = computed(() => {\n if (props.keys === undefined)\n return []\n return Array.isArray(props.keys) ? props.keys : splitHotkeyCombo(props.keys)\n})\n\n// Сочетание рисуется вложенными `<kbd>` — приём из спецификации HTML, а не\n// обёртка-div: сочетание остаётся клавиатурным вводом целиком.\nconst keyViews = computed(() => formatHotkeyTokens(tokens.value, isApple.value))\nconst hasCombo = computed(() => keyViews.value.length > 0)\n\nconst keyClass = computed(() => grKbdKeyClass(resolvedSize.value))\nconst innerKeyClass = computed(() => grKbdInnerKeyClass(resolvedSize.value, props.variant))\nconst comboClass = computed(() => grKbdComboClass(resolvedSize.value, props.variant))\n\n/**\n * Разделитель перед клавишей `index`.\n *\n * Авто-правило одно: в общей плашке символы склеиваются, слова — нет. Внутри\n * одной платформы набор однороден (macOS даёт `⌘⌥⇧`, прочие — `Ctrl`, `Alt`),\n * поэтому «слева символ» и означает «пишем как система».\n */\nfunction separatorAt(index: number): string {\n if (index === 0)\n return ''\n if (props.separator !== undefined)\n return props.separator\n if (props.variant === 'sequence')\n return t('gr.kbd.then', 'then')\n if (props.variant === 'split')\n return '+'\n\n return keyViews.value[index - 1]?.symbol ? '' : '+'\n}\n\nconst NAME_FALLBACKS: Record<string, string> = {\n command: 'Command',\n option: 'Option',\n shift: 'Shift',\n control: 'Control',\n enter: 'Enter',\n escape: 'Escape',\n tab: 'Tab',\n backspace: 'Backspace',\n delete: 'Delete',\n pageUp: 'Page Up',\n pageDown: 'Page Down',\n arrowUp: 'Arrow Up',\n arrowDown: 'Arrow Down',\n arrowLeft: 'Arrow Left',\n arrowRight: 'Arrow Right',\n}\n\n/** Читаемое имя символьной клавиши: `⌘` без него диктор произносит как знак. */\nfunction readableName(name: string): string {\n return t(`gr.kbd.${name}`, NAME_FALLBACKS[name] ?? name)\n}\n\ndefineSlots<{\n /** Клавиша или сочетание вместо пропа `keys`. */\n default?: () => any\n}>()\n</script>\n\n<template>\n <kbd\n v-if=\"hasCombo\"\n data-gr-kbd\n data-gr-kbd-combo\n :data-variant=\"variant\"\n :class=\"comboClass\"\n ><template\n v-for=\"(key, index) in keyViews\"\n :key=\"`${key.label}-${index}`\"\n ><span\n v-if=\"separatorAt(index)\"\n :class=\"variant === 'sequence' ? sequenceSeparatorClass : separatorClass\"\n aria-hidden=\"true\"\n >{{ separatorAt(index) }}</span><kbd\n data-gr-kbd-key\n :class=\"innerKeyClass\"\n ><span :aria-hidden=\"key.name ? 'true' : undefined\">{{ key.label }}</span><span\n v-if=\"key.name\"\n class=\"sr-only\"\n >{{ readableName(key.name) }}</span></kbd></template></kbd>\n\n <kbd\n v-else\n data-gr-kbd\n data-gr-kbd-key\n :class=\"keyClass\"\n ><slot /></kbd>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { a as GR_KBD_TOKENS, o as findKbdToken, t as GrKbd_default } from "./chunks/GrKbd-
|
|
2
|
-
import { n as grKbdSafelist, t as grKbdConfig } from "../../chunks/config-
|
|
1
|
+
import { a as GR_KBD_TOKENS, o as findKbdToken, t as GrKbd_default } from "./chunks/GrKbd-BNMeoaLV.js";
|
|
2
|
+
import { n as grKbdSafelist, t as grKbdConfig } from "../../chunks/config-Ca8qr8Q3.js";
|
|
3
3
|
export { GR_KBD_TOKENS, GrKbd_default as GrKbd, GrKbd_default as default, findKbdToken, grKbdConfig, grKbdSafelist };
|
package/dist/components/GrNumberInput/chunks/{GrNumberInput-BqPydXpK.js → GrNumberInput-CL5QhOmx.js}
RENAMED
|
@@ -6,11 +6,11 @@ import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js"
|
|
|
6
6
|
import { useGrFormControl } from "../../../composables/useGrFormControl.js";
|
|
7
7
|
import { n as addLen, t as useControlAddons } from "../../../chunks/useControlAddons-asUr10Pf.js";
|
|
8
8
|
import { t as chevron_down_default } from "../../../chunks/chevron-down-CQS2OG_s.js";
|
|
9
|
-
import { t as bigStep } from "../../../chunks/numericStep-Bq2lj4ew.js";
|
|
10
9
|
import { t as chevron_left_default } from "../../../chunks/chevron-left-D8AUBAM7.js";
|
|
11
10
|
import { t as chevron_right_default } from "../../../chunks/chevron-right-C6Z01h0X.js";
|
|
11
|
+
import { t as bigStep } from "../../../chunks/numericStep-Bq2lj4ew.js";
|
|
12
12
|
import { a as grNumberInputShellClass, i as grNumberInputInputClass, o as stepperCompactClass, r as clearButtonClass, s as stepperWideClass } from "../../../chunks/config-MmPym-Z7.js";
|
|
13
|
-
import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, withCtx, withModifiers } from "vue";
|
|
13
|
+
import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, markRaw, mergeProps, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, watchEffect, withCtx, withModifiers } from "vue";
|
|
14
14
|
//#region src/components/GrNumberInput/numberInputMath.ts
|
|
15
15
|
/**
|
|
16
16
|
* Экспоненциальная запись разбирается отдельно: `String(1e-7)` — это `"1e-7"`,
|
|
@@ -488,6 +488,9 @@ var GrNumberInput_default = /* @__PURE__ */ defineComponent({
|
|
|
488
488
|
emit("clear");
|
|
489
489
|
focus();
|
|
490
490
|
}
|
|
491
|
+
if (process.env.NODE_ENV !== "production") watchEffect(() => {
|
|
492
|
+
if (props.modelValue === void 0) console.warn(`[granularity] GrNumberInput: обязательный проп \`modelValue\` не передан — получено ${String(props.modelValue)}.`);
|
|
493
|
+
});
|
|
491
494
|
return (_ctx, _cache) => {
|
|
492
495
|
return openBlock(), createElementBlock("div", {
|
|
493
496
|
"data-gr-number-input": "",
|