@feugene/granularity 0.33.0 → 0.34.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/{config-vYMJ3Cr1.js → config-CYthTVK2.js} +2 -2
- package/dist/chunks/config-CYthTVK2.js.map +1 -0
- package/dist/chunks/{config-CPSxM7XE.js → config-CsCUuukB.js} +1 -0
- package/dist/chunks/config-CsCUuukB.js.map +1 -0
- package/dist/chunks/{config-BTwYMQaz2.js → config-DBXCIb6r2.js} +4 -3
- package/dist/chunks/config-DBXCIb6r2.js.map +1 -0
- package/dist/chunks/{config-uzUuosv7.js → config-DGGaKf4R.js} +6 -5
- package/dist/chunks/config-DGGaKf4R.js.map +1 -0
- package/dist/chunks/{config-DnF472Ox.js → config-DOYz_SVK.js} +2 -2
- package/dist/chunks/{config-DnF472Ox.js.map → config-DOYz_SVK.js.map} +1 -1
- package/dist/chunks/{config-T3-DMXYm.js → config-DUNH02Fg.js} +2 -2
- package/dist/chunks/config-DUNH02Fg.js.map +1 -0
- package/dist/chunks/{generated-CSyPsWtM.js → generated-Buw6W7Te.js} +7 -0
- package/dist/chunks/{generated-CSyPsWtM.js.map → generated-Buw6W7Te.js.map} +1 -1
- package/dist/chunks/grDropdownStyles-DLToHWMX.js +5 -0
- package/dist/chunks/grDropdownStyles-DLToHWMX.js.map +1 -0
- package/dist/chunks/grPopoverStyles-DKwigt7b.js +91 -0
- package/dist/chunks/grPopoverStyles-DKwigt7b.js.map +1 -0
- package/dist/chunks/{grSelectStyles-Cdtd10eY.js → grSelectStyles-D9EQ-pgK.js} +2 -1
- package/dist/chunks/grSelectStyles-D9EQ-pgK.js.map +1 -0
- package/dist/chunks/{granular-provider-CrQua8PT.js → granular-provider-3LUawDPh.js} +6 -6
- package/dist/chunks/{granular-provider-CrQua8PT.js.map → granular-provider-3LUawDPh.js.map} +1 -1
- package/dist/chunks/{overlayTransition-0Fj5tQbq.js → overlayPanelSurface-BKeMhRx4.js} +24 -1
- package/dist/chunks/overlayPanelSurface-BKeMhRx4.js.map +1 -0
- package/dist/chunks/{focusables-BkzK42SQ.js → useFocusTrap-D9bIPNF6.js} +123 -1
- package/dist/chunks/useFocusTrap-D9bIPNF6.js.map +1 -0
- package/dist/chunks/{useMenuItemsFocus-B6TldmGf.js → useMenuItemsFocus-B7Bl_aFA.js} +1 -1
- package/dist/chunks/{useMenuItemsFocus-B6TldmGf.js.map → useMenuItemsFocus-B7Bl_aFA.js.map} +1 -1
- package/dist/chunks/{useModalOverlay-D__CqLGn.js → useModalOverlay-BnAGZpcI.js} +1 -1
- package/dist/chunks/{useModalOverlay-D__CqLGn.js.map → useModalOverlay-BnAGZpcI.js.map} +1 -1
- package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-CoQjEF8h.js → GrAutocomplete-BQsSE7sj.js} +2 -2
- package/dist/components/GrAutocomplete/chunks/{GrAutocomplete-CoQjEF8h.js.map → GrAutocomplete-BQsSE7sj.js.map} +1 -1
- package/dist/components/GrAutocomplete/index.js +2 -2
- package/dist/components/GrColorPicker/chunks/{GrColorPicker-p2XH_8cE.js → GrColorPicker-D1Iis7jf.js} +2 -1
- package/dist/components/GrColorPicker/chunks/GrColorPicker-D1Iis7jf.js.map +1 -0
- package/dist/components/GrColorPicker/index.js +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-BXbh3q7O.js → GrCommandPalette-BZHUKlux.js} +1 -1
- package/dist/components/GrCommandPalette/chunks/{GrCommandPalette-BXbh3q7O.js.map → GrCommandPalette-BZHUKlux.js.map} +1 -1
- package/dist/components/GrCommandPalette/index.js +1 -1
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-CUP43q__.js → GrConfirmDialog-jRDs_E6C.js} +1 -1
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-CUP43q__.js.map → GrConfirmDialog-jRDs_E6C.js.map} +1 -1
- package/dist/components/GrConfirmDialog/index.js +1 -1
- package/dist/components/GrContextMenu/chunks/{GrContextMenu-ClkVjdcP.js → GrContextMenu-CWmgrzpi.js} +17 -3
- package/dist/components/GrContextMenu/chunks/GrContextMenu-CWmgrzpi.js.map +1 -0
- package/dist/components/GrContextMenu/index.js +2 -2
- package/dist/components/GrDialog/chunks/{GrDialog-BiMJ9_T4.js → GrDialog-C01Hhk6G.js} +1 -1
- package/dist/components/GrDialog/chunks/{GrDialog-BiMJ9_T4.js.map → GrDialog-C01Hhk6G.js.map} +1 -1
- package/dist/components/GrDialog/index.js +1 -1
- package/dist/components/GrDialogService/chunks/{GrDialogService-BxNK6crD.js → GrDialogService-CmsJNUmM.js} +7 -2
- package/dist/components/GrDialogService/chunks/{GrDialogService-BxNK6crD.js.map → GrDialogService-CmsJNUmM.js.map} +1 -1
- package/dist/components/GrDialogService/index.js +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-Ce2l3zaG.js → GrDrawer-xfoy-MCj.js} +1 -1
- package/dist/components/GrDrawer/chunks/{GrDrawer-Ce2l3zaG.js.map → GrDrawer-xfoy-MCj.js.map} +1 -1
- package/dist/components/GrDrawer/index.js +1 -1
- package/dist/components/GrDropdown/chunks/GrDropdown-CDkPkvIJ.js +180 -0
- package/dist/components/GrDropdown/chunks/GrDropdown-CDkPkvIJ.js.map +1 -0
- package/dist/components/GrDropdown/index.js +2 -2
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-GOzuAXsi.js → GrDropdownMenu-DQrZ_yPV.js} +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-GOzuAXsi.js.map → GrDropdownMenu-DQrZ_yPV.js.map} +1 -1
- package/dist/components/GrDropdownMenu/index.js +1 -1
- package/dist/components/GrFileUpload/chunks/{GrFileUpload-NsHkRRIa.js → GrFileUpload-LL8RZvC0.js} +10 -0
- package/dist/components/GrFileUpload/chunks/GrFileUpload-LL8RZvC0.js.map +1 -0
- package/dist/components/GrFileUpload/index.js +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-CG4vUBg_.js → GrImageViewer--BU8yrfx.js} +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-CG4vUBg_.js.map → GrImageViewer--BU8yrfx.js.map} +1 -1
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrModal/chunks/{GrModal-D0mf1SAx.js → GrModal-_JrDhon-.js} +1 -1
- package/dist/components/GrModal/chunks/{GrModal-D0mf1SAx.js.map → GrModal-_JrDhon-.js.map} +1 -1
- package/dist/components/GrModal/index.js +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-FiiXzVyv.js → GrPagination-gBoWVHk6.js} +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-FiiXzVyv.js.map → GrPagination-gBoWVHk6.js.map} +1 -1
- package/dist/components/GrPagination/index.js +1 -1
- package/dist/components/GrPopover/chunks/{GrPopover-faJanmGs.js → GrPopover-CzeXMcvh.js} +87 -13
- package/dist/components/GrPopover/chunks/GrPopover-CzeXMcvh.js.map +1 -0
- package/dist/components/GrPopover/index.js +2 -2
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-C6QGC7QJ.js → GrPromptDialog-CailXSqW.js} +1 -1
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-C6QGC7QJ.js.map → GrPromptDialog-CailXSqW.js.map} +1 -1
- package/dist/components/GrPromptDialog/index.js +1 -1
- package/dist/components/GrSelect/chunks/{GrSelect-Dt8iqruc.js → GrSelect-CZqV1Eg4.js} +2 -2
- package/dist/components/GrSelect/chunks/{GrSelect-Dt8iqruc.js.map → GrSelect-CZqV1Eg4.js.map} +1 -1
- package/dist/components/GrSelect/index.js +2 -2
- package/dist/components/GrTabs/chunks/{GrTabs-ugDnkk-2.js → GrTabs-UsO4j8zv.js} +5 -0
- package/dist/components/GrTabs/chunks/GrTabs-UsO4j8zv.js.map +1 -0
- package/dist/components/GrTabs/index.js +1 -1
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-BHwgGJcT.js → GrTreeSelect-DOXcpWq2.js} +2 -2
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-BHwgGJcT.js.map → GrTreeSelect-DOXcpWq2.js.map} +1 -1
- package/dist/components/GrTreeSelect/index.js +2 -2
- package/dist/composables/useFocusTrap.js +1 -123
- package/dist/granular-provider-node.js +1 -1
- package/dist/granular-provider.js +1 -1
- package/dist/index.js +26 -26
- package/dist/theme.js +1 -1
- package/dist/tokens.js +1 -1
- package/dist/types/components/GrAutocomplete/grAutocompleteStyles.d.ts +1 -1
- package/dist/types/components/GrDropdown/GrDropdown.vue.d.ts +5 -5
- package/dist/types/components/GrDropdown/grDropdownStyles.d.ts +8 -2
- package/dist/types/components/GrDropdownMenu/GrDropdownMenu.vue.d.ts +2 -2
- package/dist/types/components/GrPopover/GrPopover.vue.d.ts +54 -4
- package/dist/types/components/GrPopover/grPopoverStyles.d.ts +19 -11
- package/dist/types/components/GrSelect/grSelectStyles.d.ts +1 -1
- package/dist/types/components/GrTreeSelect/grTreeSelectStyles.d.ts +1 -1
- package/dist/types/components/shared/overlayOrigin.d.ts +22 -0
- package/dist/types/components/shared/overlayPanelSurface.d.ts +21 -0
- package/dist/web-types.json +40 -4
- package/package.json +1 -1
- package/dist/chunks/config-BTwYMQaz2.js.map +0 -1
- package/dist/chunks/config-CPSxM7XE.js.map +0 -1
- package/dist/chunks/config-T3-DMXYm.js.map +0 -1
- package/dist/chunks/config-uzUuosv7.js.map +0 -1
- package/dist/chunks/config-vYMJ3Cr1.js.map +0 -1
- package/dist/chunks/focusables-BkzK42SQ.js.map +0 -1
- package/dist/chunks/grDropdownStyles-V7TRiCXn.js +0 -24
- package/dist/chunks/grDropdownStyles-V7TRiCXn.js.map +0 -1
- package/dist/chunks/grPopoverStyles-Djh5RNhn.js +0 -59
- package/dist/chunks/grPopoverStyles-Djh5RNhn.js.map +0 -1
- package/dist/chunks/grSelectStyles-Cdtd10eY.js.map +0 -1
- package/dist/chunks/overlayTransition-0Fj5tQbq.js.map +0 -1
- package/dist/components/GrColorPicker/chunks/GrColorPicker-p2XH_8cE.js.map +0 -1
- package/dist/components/GrContextMenu/chunks/GrContextMenu-ClkVjdcP.js.map +0 -1
- package/dist/components/GrDropdown/chunks/GrDropdown-13Wt9eB_.js +0 -239
- package/dist/components/GrDropdown/chunks/GrDropdown-13Wt9eB_.js.map +0 -1
- package/dist/components/GrFileUpload/chunks/GrFileUpload-NsHkRRIa.js.map +0 -1
- package/dist/components/GrPopover/chunks/GrPopover-faJanmGs.js.map +0 -1
- package/dist/components/GrTabs/chunks/GrTabs-ugDnkk-2.js.map +0 -1
- package/dist/composables/useFocusTrap.js.map +0 -1
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"config-vYMJ3Cr1.js","names":[],"sources":["../../src/components/GrAutocomplete/grAutocompleteStyles.ts","../../src/components/GrAutocomplete/safelist.ts","../../src/components/GrAutocomplete/config.ts"],"sourcesContent":["import type { GrComponentSize } from '../shared/sizes'\n\nexport type GrAutocompleteSize = GrComponentSize\n/**\n * Тип значения опции — те же примитивы, что у `GrSelect`: значение должно\n * однозначно восстанавливаться из строкового представления.\n */\nexport type GrAutocompleteValue = string | number\n\n/** Опция автокомплита. Метка — строка, значение параметризуется. */\nexport type GrAutocompleteOption<TValue extends GrAutocompleteValue = string> = {\n value: TValue\n label: string\n disabled?: boolean\n}\nexport type GrAutocompleteModelValue<TValue extends GrAutocompleteValue = string> = TValue | TValue[]\n\n/**\n * Оболочка (визуально повторяет `GrInput`): бордер + focus-ring по `focus-within`,\n * т.к. фокус живёт на вложенном `<input role=\"combobox\">`. Flex-контейнер с\n * `flex-wrap` — чтобы chips в multiple-режиме переносились и коробка росла в высоту.\n */\nexport const autocompleteShellBase = 'relative flex w-full flex-wrap items-center gap-1 rounded-[var(--gr-radius-control)] border text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus-within:ring-2 focus-within:ring-[var(--gr-ring)]'\n\nexport const autocompleteShellEnabledClass = 'bg-[var(--gr-bg)]'\n\n/**\n * Заблокированная оболочка гасится фоном, а не `opacity` (как `GrInput`):\n * прозрачность разбавляет выверенные на AA токены текста и роняет контраст.\n * Фон взаимоисключающий с `autocompleteShellEnabledClass` — два `bg-*` одной\n * специфичности разрулил бы порядок в сгенерированном CSS, а не порядок в\n * списке классов.\n */\nexport const autocompleteShellDisabledClass = 'bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] cursor-not-allowed'\n\n/**\n * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:\n * тема вправе развести вердикт валидации и подсветку по решению разработчика.\n */\nexport const invalidShellClass = 'border-[var(--gr-invalid-brd)] focus-within:ring-[var(--gr-invalid-ring)]'\n\n// Размеры совпадают с `GrInput`/`GrSelect` (h → min-h, чтобы multiple мог расти).\nexport const autocompleteSizeClassBySize: Record<GrAutocompleteSize, string> = {\n xs: 'min-h-7 px-2.5 py-1 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n sm: 'min-h-8 px-3 py-1 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n md: 'min-h-10 px-3 py-1.5 text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]',\n lg: 'min-h-11 px-4 py-2 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]',\n}\n\nexport function autocompleteShellClass(options: {\n size: GrAutocompleteSize\n disabled: boolean\n invalid: boolean\n}): string {\n return [\n autocompleteShellBase,\n autocompleteSizeClassBySize[options.size],\n options.invalid ? invalidShellClass : 'border-[var(--gr-brd)]',\n options.disabled ? autocompleteShellDisabledClass : autocompleteShellEnabledClass,\n ]\n .filter(Boolean)\n .join(' ')\n}\n\n/** Общая подсветка наведения и активной опции. */\nconst autocompleteOptionHighlight = 'bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]'\n\nexport const autocompleteOptionBaseClass = 'w-full rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]'\nexport const autocompleteOptionActiveClass = autocompleteOptionHighlight\nexport const autocompleteOptionEnabledClass = `hover:${autocompleteOptionHighlight}`\n/** Выключенная опция гасится токеном текста — по той же причине, что и оболочка. */\nexport const autocompleteOptionDisabledClass = 'cursor-not-allowed text-[var(--gr-muted-fg)]'\n\nexport function autocompleteOptionClass(options: { disabled: boolean, active: boolean }): string {\n return [\n autocompleteOptionBaseClass,\n options.disabled ? autocompleteOptionDisabledClass : autocompleteOptionEnabledClass,\n !options.disabled && options.active ? autocompleteOptionActiveClass : '',\n ]\n .filter(Boolean)\n .join(' ')\n}\n\n/**\n * Строка состояния панели: загрузка, «введите ещё N», «ничего не найдено».\n *\n * По центру и с двойным вертикальным воздухом — как у `GrSelect` и палитры команд.\n * Слева, как у опций, она стоять не может: опции лежат внутри listbox с его `p-1`,\n * а состояние — сиблинг, и текст расходился с опциями на 4px.\n */\nexport const autocompleteStateClass = 'flex items-center justify-center gap-2 px-3 py-4 text-center text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-muted-fg)]'\n\n/**\n * Панель списка опций — тот же «язык» поверхностей, что у `GrSelect`\n * (card + бордер + shadow-2 + скругление). Держим локальную копию строки,\n * чтобы не тянуть зависимость от `GrSelect` (компоненты гранулярно независимы).\n */\nexport const autocompletePanelClasses = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden'\n","import { flattenTransitionTokens, splitClassTokens } from '../shared/classTokens'\nimport { panelPopTransition } from '../shared/overlayTransition'\nimport {\n autocompleteOptionActiveClass,\n autocompleteOptionBaseClass,\n autocompleteOptionDisabledClass,\n autocompleteOptionEnabledClass,\n autocompletePanelClasses,\n autocompleteShellBase,\n autocompleteShellDisabledClass,\n autocompleteShellEnabledClass,\n autocompleteSizeClassBySize,\n autocompleteStateClass,\n invalidShellClass,\n} from './grAutocompleteStyles'\n\n// Всё, что живёт в `grAutocompleteStyles.ts`: и вычисляемые мапы, и строковые\n// литералы оболочки, опций и панели (чип — это `GrBadge`, его safelist приезжает\n// зависимостью). Хелпер уезжает в общий\n// `dist/chunks/`, вне области скана компонента — гейт `src/__tests__/safelist.test.ts`.\nexport const grAutocompleteSafelist = [...new Set([\n ...Object.values(autocompleteSizeClassBySize).flatMap(splitClassTokens),\n ...splitClassTokens(autocompleteShellBase),\n ...splitClassTokens(autocompleteShellEnabledClass),\n ...splitClassTokens(autocompleteShellDisabledClass),\n ...splitClassTokens(autocompletePanelClasses),\n ...splitClassTokens(autocompleteOptionBaseClass),\n ...splitClassTokens(autocompleteOptionEnabledClass),\n ...splitClassTokens(autocompleteOptionActiveClass),\n ...splitClassTokens(autocompleteOptionDisabledClass),\n ...splitClassTokens(autocompleteStateClass),\n ...splitClassTokens(invalidShellClass),\n ...splitClassTokens('border-[var(--gr-brd)]'),\n // Набор перехода панели общий на пять компонентов и живёт безадресным\n // модулем в `shared/`: в `dist` он лежит в общем чанке, который пресет не\n // сканирует, поэтому объявить его обязан каждый потребитель.\n ...flattenTransitionTokens(panelPopTransition),\n])]\n","import { defineGranularComponent } from '@feugene/unocss-preset-granular/contract'\n\nimport { grAutocompleteSafelist } from './safelist'\n\nexport const grAutocompleteConfig = defineGranularComponent(import.meta.url, {\n name: 'GrAutocomplete',\n dependencies: ['GrChip'],\n safelist: grAutocompleteSafelist,\n})\n"],"mappings":";;;;;;;;;AAsBA,IAAa,wBAAwB;AAErC,IAAa,gCAAgC;;;;;;;;AAS7C,IAAa,iCAAiC;;;;;AAM9C,IAAa,oBAAoB;AAGjC,IAAa,8BAAkE;CAC7E,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,SAAgB,uBAAuB,SAI5B;CACT,OAAO;EACL;EACA,4BAA4B,QAAQ;EACpC,QAAQ,UAAU,oBAAoB;EACtC,QAAQ,WAAW,iCAAiC;CACtD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;AAGA,IAAM,8BAA8B;AAEpC,IAAa,8BAA8B;AAC3C,IAAa,gCAAgC;AAC7C,IAAa,iCAAiC,SAAS;;AAEvD,IAAa,kCAAkC;AAE/C,SAAgB,wBAAwB,SAAyD;CAC/F,OAAO;EACL;EACA,QAAQ,WAAW,kCAAkC;EACrD,CAAC,QAAQ,YAAY,QAAQ,SAAS,gCAAgC;CACxE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;;;;;;;;AASA,IAAa,yBAAyB;;;;;;AAOtC,IAAa,2BAA2B;;;AC7ExC,IAAa,yBAAyB,CAAC,mBAAG,IAAI,IAAI;CAChD,GAAG,OAAO,OAAO,2BAA2B,CAAC,CAAC,QAAQ,gBAAgB;CACtE,GAAG,iBAAiB,qBAAqB;CACzC,GAAG,iBAAiB,6BAA6B;CACjD,GAAG,iBAAiB,8BAA8B;CAClD,GAAG,iBAAiB,wBAAwB;CAC5C,GAAG,iBAAiB,2BAA2B;CAC/C,GAAG,iBAAiB,8BAA8B;CAClD,GAAG,iBAAiB,6BAA6B;CACjD,GAAG,iBAAiB,+BAA+B;CACnD,GAAG,iBAAiB,sBAAsB;CAC1C,GAAG,iBAAiB,iBAAiB;CACrC,GAAG,iBAAiB,wBAAwB;CAI5C,GAAG,wBAAwB,kBAAkB;AAC/C,CAAC,CAAC;;;ACjCF,IAAa,uBAAuB,wBAAwB,OAAO,KAAK,KAAK;CAC3E,MAAM;CACN,cAAc,CAAC,QAAQ;CACvB,UAAU;AACZ,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"focusables-BkzK42SQ.js","names":[],"sources":["../../src/composables/internal/focusables.ts"],"sourcesContent":["/**\n * Что пакет считает фокусируемым.\n *\n * Один источник правды на ловушку фокуса, roving-навигацию и «первый элемент\n * панели». До него каждый компонент собирал свой селектор: у `GrDropdown` в\n * список не попадали `select` и `textarea`, а фильтр видимости стоял на\n * `offsetParent !== null` — он врёт на `position: fixed` (у таких элементов\n * `offsetParent` всегда `null`), то есть на панелях самих оверлеев.\n */\n\nconst FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled]):not([type=\"hidden\"])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n 'iframe',\n 'audio[controls]',\n 'video[controls]',\n '[contenteditable]:not([contenteditable=\"false\"])',\n '[tabindex]',\n].join(',')\n\n/**\n * Видимость.\n *\n * В браузере спрашиваем `checkVisibility()` — он единственный учитывает скрытых\n * предков, `content-visibility` и `display: contents`. В jsdom его нет и\n * раскладки тоже нет, поэтому там остаётся проверка собственных стилей: этого\n * достаточно, чтобы тесты видели ту же логику, а не пустой список.\n */\nfunction isVisible(element: HTMLElement): boolean {\n if (element.hidden)\n return false\n\n if (typeof element.checkVisibility === 'function')\n return element.checkVisibility({ contentVisibilityAuto: true, visibilityProperty: true })\n\n const style = element.ownerDocument.defaultView?.getComputedStyle(element)\n if (!style)\n return true\n return style.display !== 'none' && style.visibility !== 'hidden'\n}\n\n/** Элемент внутри `inert`-поддерева не фокусируем — браузер его не отдаёт. */\nfunction isInert(element: HTMLElement): boolean {\n return element.closest('[inert]') !== null\n}\n\nexport function isFocusable(element: HTMLElement): boolean {\n if (!element.matches(FOCUSABLE_SELECTOR))\n return false\n if (element.hasAttribute('disabled'))\n return false\n if (element.getAttribute('aria-hidden') === 'true')\n return false\n return !isInert(element) && isVisible(element)\n}\n\n/** Участвует ли элемент в таб-порядке (`tabindex=\"-1\"` — нет). */\nexport function isTabbable(element: HTMLElement): boolean {\n if (!isFocusable(element))\n return false\n return Number.parseInt(element.getAttribute('tabindex') ?? '0', 10) >= 0\n}\n\n/**\n * Фокусируемые внутри корня, в порядке документа.\n *\n * `tabbableOnly` (по умолчанию) оставляет только участников таб-порядка — это\n * то, что нужно циклу Tab. Полный список нужен «первому фокусируемому» при\n * открытии: панель с `tabindex=\"-1\"` фокусируется программно.\n */\nexport function getFocusableElements(\n root: HTMLElement | null | undefined,\n options: { tabbableOnly?: boolean } = {},\n): HTMLElement[] {\n if (!root)\n return []\n\n const tabbableOnly = options.tabbableOnly ?? true\n const matches = Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR))\n\n return matches.filter(element => (tabbableOnly ? isTabbable(element) : isFocusable(element)))\n}\n\n/**\n * Фокусируемые сразу в нескольких корнях, в порядке документа.\n *\n * Нужен ловушке: панель селекта, открытого внутри модалки, телепортирована в\n * `body` и лежит вне DOM-поддерева окна, но для пользователя это продолжение\n * того же слоя.\n */\nexport function getFocusableElementsIn(roots: (HTMLElement | null | undefined)[]): HTMLElement[] {\n const unique = new Set<HTMLElement>()\n\n for (const root of roots) {\n for (const element of getFocusableElements(root)) unique.add(element)\n }\n\n return Array.from(unique).sort((left, right) => {\n const position = left.compareDocumentPosition(right)\n if (position & Node.DOCUMENT_POSITION_FOLLOWING)\n return -1\n if (position & Node.DOCUMENT_POSITION_PRECEDING)\n return 1\n return 0\n })\n}\n"],"mappings":";;;;;;;;;;AAUA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;;AAUV,SAAS,UAAU,SAA+B;CAChD,IAAI,QAAQ,QACV,OAAO;CAET,IAAI,OAAO,QAAQ,oBAAoB,YACrC,OAAO,QAAQ,gBAAgB;EAAE,uBAAuB;EAAM,oBAAoB;CAAK,CAAC;CAE1F,MAAM,QAAQ,QAAQ,cAAc,aAAa,iBAAiB,OAAO;CACzE,IAAI,CAAC,OACH,OAAO;CACT,OAAO,MAAM,YAAY,UAAU,MAAM,eAAe;AAC1D;;AAGA,SAAS,QAAQ,SAA+B;CAC9C,OAAO,QAAQ,QAAQ,SAAS,MAAM;AACxC;AAEA,SAAgB,YAAY,SAA+B;CACzD,IAAI,CAAC,QAAQ,QAAQ,kBAAkB,GACrC,OAAO;CACT,IAAI,QAAQ,aAAa,UAAU,GACjC,OAAO;CACT,IAAI,QAAQ,aAAa,aAAa,MAAM,QAC1C,OAAO;CACT,OAAO,CAAC,QAAQ,OAAO,KAAK,UAAU,OAAO;AAC/C;;AAGA,SAAgB,WAAW,SAA+B;CACxD,IAAI,CAAC,YAAY,OAAO,GACtB,OAAO;CACT,OAAO,OAAO,SAAS,QAAQ,aAAa,UAAU,KAAK,KAAK,EAAE,KAAK;AACzE;;;;;;;;AASA,SAAgB,qBACd,MACA,UAAsC,CAAC,GACxB;CACf,IAAI,CAAC,MACH,OAAO,CAAC;CAEV,MAAM,eAAe,QAAQ,gBAAgB;CAG7C,OAFgB,MAAM,KAAK,KAAK,iBAA8B,kBAAkB,CAEzE,CAAA,CAAQ,QAAO,YAAY,eAAe,WAAW,OAAO,IAAI,YAAY,OAAO,CAAE;AAC9F;;;;;;;;AASA,SAAgB,uBAAuB,OAA0D;CAC/F,MAAM,yBAAS,IAAI,IAAiB;CAEpC,KAAK,MAAM,QAAQ,OACjB,KAAK,MAAM,WAAW,qBAAqB,IAAI,GAAG,OAAO,IAAI,OAAO;CAGtE,OAAO,MAAM,KAAK,MAAM,CAAC,CAAC,MAAM,MAAM,UAAU;EAC9C,MAAM,WAAW,KAAK,wBAAwB,KAAK;EACnD,IAAI,WAAW,KAAK,6BAClB,OAAO;EACT,IAAI,WAAW,KAAK,6BAClB,OAAO;EACT,OAAO;CACT,CAAC;AACH"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
//#region src/components/GrDropdown/grDropdownStyles.ts
|
|
2
|
-
var originClassByPlacement = {
|
|
3
|
-
"bottom-start": "origin-top-left",
|
|
4
|
-
"bottom-end": "origin-top-right",
|
|
5
|
-
"bottom": "origin-top",
|
|
6
|
-
"top-start": "origin-bottom-left",
|
|
7
|
-
"top-end": "origin-bottom-right",
|
|
8
|
-
"top": "origin-bottom",
|
|
9
|
-
"left-start": "origin-top-right",
|
|
10
|
-
"left-end": "origin-bottom-right",
|
|
11
|
-
"left": "origin-right",
|
|
12
|
-
"right-start": "origin-top-left",
|
|
13
|
-
"right-end": "origin-bottom-left",
|
|
14
|
-
"right": "origin-left"
|
|
15
|
-
};
|
|
16
|
-
function grDropdownOriginClass(placement) {
|
|
17
|
-
return originClassByPlacement[placement] ?? "origin-top";
|
|
18
|
-
}
|
|
19
|
-
var dropdownContentBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] p-1";
|
|
20
|
-
function grDropdownContentClass(contentClass) {
|
|
21
|
-
return [dropdownContentBaseClass, contentClass].filter(Boolean).join(" ");
|
|
22
|
-
}
|
|
23
|
-
//#endregion
|
|
24
|
-
export { originClassByPlacement as i, grDropdownContentClass as n, grDropdownOriginClass as r, dropdownContentBaseClass as t };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grDropdownStyles-V7TRiCXn.js","names":[],"sources":["../../src/components/GrDropdown/grDropdownStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\n/** Ширина панели: число — пиксели, строка — CSS-длина, `auto` — по контенту. */\nexport type GrDropdownWidth = number | string\n\n// `transform-origin` для scale-transition — координата x/y уже приходит от\n// `useFloating` (см. `floatingStyle`), здесь остаётся только направление\n// \"роста\" панели относительно триггера. Ключи — это `resolvedPlacement` ПОСЛЕ\n// применения `flip`, поэтому origin остаётся верным и когда панели не хватило\n// места снизу и её перевернуло вверх.\nexport const originClassByPlacement: Record<Placement, string> = {\n 'bottom-start': 'origin-top-left',\n 'bottom-end': 'origin-top-right',\n 'bottom': 'origin-top',\n 'top-start': 'origin-bottom-left',\n 'top-end': 'origin-bottom-right',\n 'top': 'origin-bottom',\n 'left-start': 'origin-top-right',\n 'left-end': 'origin-bottom-right',\n 'left': 'origin-right',\n 'right-start': 'origin-top-left',\n 'right-end': 'origin-bottom-left',\n 'right': 'origin-left',\n}\n\nexport function grDropdownOriginClass(placement: Placement): string {\n return originClassByPlacement[placement] ?? 'origin-top'\n}\n\nexport const dropdownContentBaseClass = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] p-1'\n\nexport function grDropdownContentClass(contentClass?: string): string {\n return [\n dropdownContentBaseClass,\n contentClass,\n ].filter(Boolean).join(' ')\n}\n"],"mappings":";AAUA,IAAa,yBAAoD;CAC/D,gBAAgB;CAChB,cAAc;CACd,UAAU;CACV,aAAa;CACb,WAAW;CACX,OAAO;CACP,cAAc;CACd,YAAY;CACZ,QAAQ;CACR,eAAe;CACf,aAAa;CACb,SAAS;AACX;AAEA,SAAgB,sBAAsB,WAA8B;CAClE,OAAO,uBAAuB,cAAc;AAC9C;AAEA,IAAa,2BAA2B;AAExC,SAAgB,uBAAuB,cAA+B;CACpE,OAAO,CACL,0BACA,YACF,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
//#region src/components/GrPopover/grPopoverStyles.ts
|
|
2
|
-
var panelSizes = {
|
|
3
|
-
xs: "p-2 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
|
|
4
|
-
sm: "p-2.5 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
|
|
5
|
-
md: "p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]",
|
|
6
|
-
lg: "p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]"
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* `transform-origin` для scale-анимации: координаты панели уже посчитал
|
|
10
|
-
* `useFloating`, здесь остаётся направление «роста» относительно триггера.
|
|
11
|
-
*
|
|
12
|
-
* Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не
|
|
13
|
-
* хватило места и панель перевернуло вверх, origin переворачивается вместе с ней.
|
|
14
|
-
*/
|
|
15
|
-
var originClassByPlacement = {
|
|
16
|
-
"bottom": "origin-top",
|
|
17
|
-
"bottom-start": "origin-top-left",
|
|
18
|
-
"bottom-end": "origin-top-right",
|
|
19
|
-
"top": "origin-bottom",
|
|
20
|
-
"top-start": "origin-bottom-left",
|
|
21
|
-
"top-end": "origin-bottom-right",
|
|
22
|
-
"left": "origin-right",
|
|
23
|
-
"left-start": "origin-top-right",
|
|
24
|
-
"left-end": "origin-bottom-right",
|
|
25
|
-
"right": "origin-left",
|
|
26
|
-
"right-start": "origin-top-left",
|
|
27
|
-
"right-end": "origin-bottom-left"
|
|
28
|
-
};
|
|
29
|
-
function grPopoverOriginClass(placement) {
|
|
30
|
-
return originClassByPlacement[placement] ?? "origin-top";
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Поверхность панели. `max-w-[min(...)]` не даёт поповеру вылезти за узкий
|
|
34
|
-
* экран: `useFloating` смещает панель в пределах viewport, но не сужает её.
|
|
35
|
-
*/
|
|
36
|
-
/**
|
|
37
|
-
* Кегль без поля.
|
|
38
|
-
*
|
|
39
|
-
* Отдельная мапа, а не `contentClass="p-0"`: поле и кегль приезжают одной
|
|
40
|
-
* строкой равной специфичности, и кто победит — решал бы порядок правил в
|
|
41
|
-
* сгенерированном CSS. Меню внутри поповера с `p-3` — визуально не меню.
|
|
42
|
-
*/
|
|
43
|
-
var panelSizesFlush = {
|
|
44
|
-
xs: "text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]",
|
|
45
|
-
sm: "text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]",
|
|
46
|
-
md: "text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]",
|
|
47
|
-
lg: "text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]"
|
|
48
|
-
};
|
|
49
|
-
var popoverPanelBaseClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(22rem,calc(100vw-1rem))] focus:outline-none";
|
|
50
|
-
function grPopoverPanelClass(size, placement, extra, padding = "default") {
|
|
51
|
-
return [
|
|
52
|
-
popoverPanelBaseClass,
|
|
53
|
-
padding === "none" ? panelSizesFlush[size] : panelSizes[size],
|
|
54
|
-
grPopoverOriginClass(placement),
|
|
55
|
-
extra ?? ""
|
|
56
|
-
].filter(Boolean).join(" ");
|
|
57
|
-
}
|
|
58
|
-
//#endregion
|
|
59
|
-
export { popoverPanelBaseClass as a, panelSizesFlush as i, originClassByPlacement as n, panelSizes as r, grPopoverPanelClass as t };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grPopoverStyles-Djh5RNhn.js","names":[],"sources":["../../src/components/GrPopover/grPopoverStyles.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type GrPopoverSize = GrComponentSize\n\n/**\n * Роль панели.\n *\n * `dialog` — произвольный интерактивный контент (значение по умолчанию).\n * Остальные нужны компонентам, которые строятся поверх этого примитива:\n * меню (`GrMenu`, `GrContextMenu`), списки, палитры. Роль задаёт потребитель,\n * потому что клавиатурный паттерн принадлежит ему, а не поповеру.\n */\nexport type GrPopoverRole = 'dialog' | 'menu' | 'listbox' | 'grid' | 'group' | 'none'\n\n/** Поле панели. `none` — поле рисует содержимое (меню, список опций). */\nexport type GrPopoverPadding = 'default' | 'none'\n\nexport const panelSizes: Record<GrPopoverSize, string> = {\n xs: 'p-2 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n sm: 'p-2.5 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n md: 'p-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n lg: 'p-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\n/**\n * `transform-origin` для scale-анимации: координаты панели уже посчитал\n * `useFloating`, здесь остаётся направление «роста» относительно триггера.\n *\n * Ключ — `resolvedPlacement`, то есть положение **после** `flip`: если снизу не\n * хватило места и панель перевернуло вверх, origin переворачивается вместе с ней.\n */\nexport const originClassByPlacement: Partial<Record<Placement, string>> = {\n 'bottom': 'origin-top',\n 'bottom-start': 'origin-top-left',\n 'bottom-end': 'origin-top-right',\n 'top': 'origin-bottom',\n 'top-start': 'origin-bottom-left',\n 'top-end': 'origin-bottom-right',\n 'left': 'origin-right',\n 'left-start': 'origin-top-right',\n 'left-end': 'origin-bottom-right',\n 'right': 'origin-left',\n 'right-start': 'origin-top-left',\n 'right-end': 'origin-bottom-left',\n}\n\nexport function grPopoverOriginClass(placement: Placement): string {\n return originClassByPlacement[placement] ?? 'origin-top'\n}\n\n/**\n * Поверхность панели. `max-w-[min(...)]` не даёт поповеру вылезти за узкий\n * экран: `useFloating` смещает панель в пределах viewport, но не сужает её.\n */\n/**\n * Кегль без поля.\n *\n * Отдельная мапа, а не `contentClass=\"p-0\"`: поле и кегль приезжают одной\n * строкой равной специфичности, и кто победит — решал бы порядок правил в\n * сгенерированном CSS. Меню внутри поповера с `p-3` — визуально не меню.\n */\nexport const panelSizesFlush: Record<GrPopoverSize, string> = {\n xs: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n sm: 'text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n md: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-leading-sm)]',\n lg: 'text-[length:var(--gr-control-text-lg)] leading-[var(--gr-leading-base)]',\n}\n\nexport const popoverPanelBaseClass = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] max-w-[min(22rem,calc(100vw-1rem))] focus:outline-none'\n\nexport function grPopoverPanelClass(\n size: GrPopoverSize,\n placement: Placement,\n extra?: string,\n padding: GrPopoverPadding = 'default',\n): string {\n return [\n popoverPanelBaseClass,\n padding === 'none' ? panelSizesFlush[size] : panelSizes[size],\n grPopoverOriginClass(placement),\n extra ?? '',\n ].filter(Boolean).join(' ')\n}\n"],"mappings":";AAmBA,IAAa,aAA4C;CACvD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;AASA,IAAa,yBAA6D;CACxE,UAAU;CACV,gBAAgB;CAChB,cAAc;CACd,OAAO;CACP,aAAa;CACb,WAAW;CACX,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,SAAS;CACT,eAAe;CACf,aAAa;AACf;AAEA,SAAgB,qBAAqB,WAA8B;CACjE,OAAO,uBAAuB,cAAc;AAC9C;;;;;;;;;;;;AAaA,IAAa,kBAAiD;CAC5D,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,wBAAwB;AAErC,SAAgB,oBACd,MACA,WACA,OACA,UAA4B,WACpB;CACR,OAAO;EACL;EACA,YAAY,SAAS,gBAAgB,QAAQ,WAAW;EACxD,qBAAqB,SAAS;EAC9B,SAAS;CACX,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AAC5B"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grSelectStyles-Cdtd10eY.js","names":[],"sources":["../../src/components/GrSelect/grSelectStyles.ts"],"sourcesContent":["import type { GrComponentSize, GrControlState } from '../shared/sizes'\n\nexport type GrSelectView = 'default' | 'link'\nexport type GrSelectSize = GrComponentSize\nexport type GrSelectVariant = 'primary' | 'default' | 'muted' | 'danger'\nexport type GrSelectUnderline = 'auto' | 'always' | 'none'\nimport type { GrChipTone } from '../GrChip/grChipStyles'\n\nexport type GrSelectOptionsView = 'native' | 'panel'\n/**\n * Тип значения опции. Ограничен примитивами, которые переживают путь через DOM:\n * нативный `<select>` хранит в `option.value` только строку, поэтому значение\n * должно однозначно восстанавливаться из своего строкового представления.\n * Объектные модели потребовали бы отдельного key-экстрактора — см. `docs/components.md`.\n */\n/**\n * Значение опции. Объект допустим, но тогда обязателен проп `valueKey`: в DOM\n * значение живёт строкой, и без ключа объекты неотличимы друг от друга.\n */\nexport type GrSelectValue = string | number | object\nexport type GrSelectState = GrControlState\n\nexport type GrSelectOption<TValue extends GrSelectValue = string> = {\n value: TValue\n label: string\n disabled?: boolean\n /**\n * Тон чипа в режиме `tags` — перекрывает `tagTone` для этой опции.\n *\n * Цвет у каждого тега свой — обычная модель (метки, категории, статусы), и\n * без неё потребитель уходил в слот `#value` рисовать выбранное сам, теряя\n * ровно то, что в `tags` сделано правильно: чипы снаружи `role=\"combobox\"`,\n * снятие крестиком, сворачивание в «+N» и клавиатуру.\n */\n tone?: GrChipTone\n /** Плотная заливка чипа этой опции — перекрывает `tagDark`. */\n dark?: boolean\n}\n/** Группа опций: заголовок `label` + вложенные опции `options`. */\nexport type GrSelectOptionGroup<TValue extends GrSelectValue = string> = {\n label: string\n options: GrSelectOption<TValue>[]\n}\n/** Элемент списка опций: либо одиночная опция, либо группа опций. */\nexport type GrSelectOptionOrGroup<TValue extends GrSelectValue = string>\n = | GrSelectOption<TValue>\n | GrSelectOptionGroup<TValue>\nexport type GrSelectModelValue<TValue extends GrSelectValue = string> = TValue | TValue[]\n\nexport const defaultBaseClass = 'w-full rounded-[var(--gr-radius-control)] border bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\n/**\n * Цвет рамки по состоянию — та же карта, что у `GrInput` и `GrTextarea`: поля\n * одной формы обязаны показывать ошибку одинаково.\n */\nexport const borderClassByState: Record<GrSelectState, string> = {\n default: 'border-[var(--gr-brd)]',\n success: 'border-[var(--gr-success)] focus-visible:ring-[var(--gr-success)]',\n warning: 'border-[var(--gr-warning)] focus-visible:ring-[var(--gr-warning)]',\n danger: 'border-[var(--gr-danger)] focus-visible:ring-[var(--gr-danger)]',\n}\n\n/**\n * Ошибка валидации красится своей ролью, а не декоративным тоном `danger`:\n * `state=\"danger\"` — это подсветка по решению разработчика, `invalid` — вердикт\n * валидации, и тема вправе развести их по цвету.\n */\nexport const invalidBorderClass = 'border-[var(--gr-invalid-brd)] focus-visible:ring-[var(--gr-invalid-ring)]'\nexport const linkBaseClass = 'cursor-pointer inline-block w-auto align-baseline appearance-none bg-transparent border border-transparent px-0 py-0 rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]'\n\nexport const selectSizeClassBySize: Record<GrSelectSize, string> = {\n xs: 'h-7 px-2.5 text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n sm: 'h-8 px-3 text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n md: 'h-10 px-3 text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]',\n lg: 'h-11 px-4 text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]',\n}\n\nexport const selectLinkSizeClassBySize: Record<GrSelectSize, string> = {\n xs: 'text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]',\n sm: 'text-[length:var(--gr-control-text-sm)] leading-[var(--gr-control-leading-sm)]',\n md: 'text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)]',\n lg: 'text-[length:var(--gr-control-text-lg)] leading-[var(--gr-control-leading-lg)]',\n}\n\n/**\n * Ссылка — это ТЕКСТ на фоне страницы, поэтому опасный тон берётся из\n * `--gr-danger-text`, а не из насыщенного `--gr-danger` (последний под текст не\n * рассчитан). Hover/active выводятся подмесом `--gr-fg` — той же формулой, что\n * `GrLink`. `primary` берётся из `--gr-primary-text` по той же причине: на фоне\n * страницы насыщенный `--gr-primary` под текст не рассчитан.\n *\n * Классы записаны литералами, а не собраны интерполяцией: safelist и скан\n * UnoCSS читают исходник, и вычисленная строка для них не класс.\n */\nexport const selectLinkVariantClassByVariant: Record<GrSelectVariant, string> = {\n primary: 'text-[var(--gr-primary-text)] hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n default: 'text-[var(--gr-fg)] hover:text-[var(--gr-primary-text)] active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n muted: 'text-[var(--gr-muted-fg)] hover:text-[var(--gr-fg)] active:text-[var(--gr-fg)]',\n danger: 'text-[var(--gr-danger-text)] hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]',\n}\n\n/**\n * Variant-классы для видимой метки в `view=\"link\"` + `optionsView=\"native\"`.\n * Hover-цвет приходит через `peer-hover:` от прозрачного `<select>`-overlay,\n * т.к. видимая метка имеет `pointer-events-none` и не получает hover напрямую.\n */\nexport const selectLinkNativeLabelVariantClassByVariant: Record<GrSelectVariant, string> = {\n primary: 'text-[var(--gr-primary-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-primary-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n default: 'text-[var(--gr-fg)] peer-hover:text-[var(--gr-primary-text)] peer-active:text-[color-mix(in_srgb,var(--gr-primary-text)_84%,var(--gr-fg))]',\n muted: 'text-[var(--gr-muted-fg)] peer-hover:text-[var(--gr-fg)] peer-active:text-[var(--gr-fg)]',\n danger: 'text-[var(--gr-danger-text)] peer-hover:text-[color-mix(in_srgb,var(--gr-danger-text)_92%,var(--gr-fg))] peer-active:text-[color-mix(in_srgb,var(--gr-danger-text)_84%,var(--gr-fg))]',\n}\n\nfunction selectLinkUnderlineClass(options: { underline: GrSelectUnderline, disabled: boolean }): string {\n if (options.disabled)\n return 'no-underline'\n if (options.underline === 'always')\n return 'underline underline-offset-4'\n if (options.underline === 'none')\n return 'no-underline'\n return 'no-underline hover:underline hover:underline-offset-4'\n}\n\n/**\n * Underline-классы для видимой метки в `view=\"link\"` + `optionsView=\"native\"`.\n * Видимая метка имеет `pointer-events-none`, а hover получает прозрачный\n * `<select>`-overlay (peer), поэтому для `underline=\"auto\"` используем\n * `peer-hover:underline` вместо `hover:underline`.\n */\nfunction selectLinkNativeLabelUnderlineClass(options: { underline: GrSelectUnderline, disabled: boolean }): string {\n if (options.disabled)\n return 'no-underline'\n if (options.underline === 'always')\n return 'underline underline-offset-4'\n if (options.underline === 'none')\n return 'no-underline'\n return 'no-underline peer-hover:underline peer-hover:underline-offset-4'\n}\n\n/**\n * Классы прозрачного `<select>`-overlay для `view=\"link\"` + `optionsView=\"native\"`.\n * Нативный селект растягивается на всю обёртку, но визуально невидим — ширину обёртки\n * задаёт видимый `<span>` с выбранной меткой, благодаря чему компонент в закрытом\n * состоянии занимает столько места, сколько нужно текущей опции (а не самой длинной).\n */\nexport const grSelectLinkNativeOverlayClass = 'peer absolute inset-0 w-full h-full m-0 p-0 border-0 bg-transparent text-transparent appearance-none opacity-0 cursor-pointer disabled:cursor-not-allowed focus:outline-none'\n\n/**\n * Классы видимой метки для `view=\"link\"` + `optionsView=\"native\"` (поверх прозрачного `<select>`).\n * Получает все link-стили (size/variant/underline), а также focus-ring через `peer-focus-visible`.\n */\nexport const grSelectLinkNativeLabelBaseClass = 'pointer-events-none inline-block whitespace-nowrap align-baseline rounded-[var(--gr-radius-control)] transition-colors duration-[var(--gr-duration-fast)]'\nexport const grSelectLinkNativeLabelDisabledClass = 'cursor-not-allowed text-[var(--gr-muted-fg)] no-underline'\nexport const grSelectLinkNativeLabelFocusClass = 'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--gr-ring)]'\n\nexport function grSelectLinkNativeLabelClass(options: {\n size: GrSelectSize\n variant: GrSelectVariant\n underline: GrSelectUnderline\n disabled: boolean\n}): string {\n return [\n grSelectLinkNativeLabelBaseClass,\n selectLinkSizeClassBySize[options.size],\n selectLinkNativeLabelUnderlineClass({ underline: options.underline, disabled: options.disabled }),\n selectLinkNativeLabelVariantClassByVariant[options.variant],\n options.disabled ? grSelectLinkNativeLabelDisabledClass : '',\n grSelectLinkNativeLabelFocusClass,\n ]\n .filter(Boolean)\n .join(' ')\n}\n\nexport function grSelectClass(options: {\n view: GrSelectView\n size: GrSelectSize\n disabled: boolean\n variant: GrSelectVariant\n underline: GrSelectUnderline\n state?: GrSelectState\n invalid?: boolean\n}): string {\n if (options.view === 'link') {\n return [\n selectLinkSizeClassBySize[options.size],\n selectLinkUnderlineClass({ underline: options.underline, disabled: options.disabled }),\n selectLinkVariantClassByVariant[options.variant],\n 'disabled:cursor-not-allowed disabled:text-[var(--gr-muted-fg)] disabled:no-underline',\n ].join(' ')\n }\n\n return [\n selectSizeClassBySize[options.size],\n // `invalid` сильнее `state`: ошибка перекрывает любую другую подсветку.\n options.invalid ? invalidBorderClass : borderClassByState[options.state ?? 'default'],\n // Заблокированный контрол гасится фоном и цветом текста, а не `opacity`:\n // прозрачность разбавляет выверенные на AA токены и роняет контраст.\n 'disabled:cursor-not-allowed disabled:bg-[var(--gr-muted)] disabled:text-[var(--gr-muted-fg)]',\n ].join(' ')\n}\n\nexport function grSelectNativeClass(options: {\n view: GrSelectView\n size: GrSelectSize\n disabled: boolean\n variant: GrSelectVariant\n underline: GrSelectUnderline\n showNativeChevron: boolean\n state?: GrSelectState\n invalid?: boolean\n}): string {\n return [\n grSelectClass(options),\n options.showNativeChevron ? 'appearance-none pr-9' : '',\n ]\n .filter(Boolean)\n .join(' ')\n}\n\nexport function grSelectTriggerClass(options: {\n view: GrSelectView\n optionsView: GrSelectOptionsView\n size: GrSelectSize\n disabled: boolean\n variant: GrSelectVariant\n underline: GrSelectUnderline\n state?: GrSelectState\n invalid?: boolean\n}): string {\n if (options.optionsView !== 'panel') {\n return grSelectClass(options)\n }\n\n if (options.view === 'link') {\n return [\n grSelectClass(options),\n 'inline-flex items-center gap-1 text-left',\n ].join(' ')\n }\n\n return [\n grSelectClass(options),\n 'flex items-center justify-between text-left',\n ].join(' ')\n}\n\nexport const grSelectPanelClasses = 'rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-card)] text-[var(--gr-card-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden'\n\n/** Общая подсветка наведения и активной опции панели. */\nconst selectOptionHighlight = 'bg-[color-mix(in_srgb,var(--gr-muted)_30%,transparent)]'\n\nexport const selectOptionBaseClass = 'rounded-[var(--gr-radius-md)] px-3 py-2 text-left text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]'\nexport const selectOptionLinkWidthClass = 'block min-w-full w-max whitespace-nowrap'\nexport const selectOptionWidthClass = 'w-full'\nexport const selectOptionEnabledClass = `hover:${selectOptionHighlight}`\nexport const selectOptionActiveClass = selectOptionHighlight\n/** Выключенная опция гасится токеном текста — по той же причине, что и контрол. */\nexport const selectOptionDisabledClass = 'cursor-not-allowed text-[var(--gr-muted-fg)]'\n\nexport function grSelectOptionClass(options: {\n view: GrSelectView\n disabled: boolean\n active: boolean\n}): string {\n return [\n selectOptionBaseClass,\n options.view === 'link' ? selectOptionLinkWidthClass : selectOptionWidthClass,\n options.disabled ? selectOptionDisabledClass : selectOptionEnabledClass,\n !options.disabled && options.active ? selectOptionActiveClass : '',\n ]\n .filter(Boolean)\n .join(' ')\n}\n"],"mappings":";AAiDA,IAAa,mBAAmB;;;;;AAMhC,IAAa,qBAAoD;CAC/D,SAAS;CACT,SAAS;CACT,SAAS;CACT,QAAQ;AACV;;;;;;AAOA,IAAa,qBAAqB;AAClC,IAAa,gBAAgB;AAE7B,IAAa,wBAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,4BAA0D;CACrE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;;;;;;;;;;;AAYA,IAAa,kCAAmE;CAC9E,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;AACV;;;;;;AAOA,IAAa,6CAA8E;CACzF,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;AACV;AAEA,SAAS,yBAAyB,SAAsE;CACtG,IAAI,QAAQ,UACV,OAAO;CACT,IAAI,QAAQ,cAAc,UACxB,OAAO;CACT,IAAI,QAAQ,cAAc,QACxB,OAAO;CACT,OAAO;AACT;;;;;;;AAQA,SAAS,oCAAoC,SAAsE;CACjH,IAAI,QAAQ,UACV,OAAO;CACT,IAAI,QAAQ,cAAc,UACxB,OAAO;CACT,IAAI,QAAQ,cAAc,QACxB,OAAO;CACT,OAAO;AACT;;;;;;;AAQA,IAAa,iCAAiC;;;;;AAM9C,IAAa,mCAAmC;AAChD,IAAa,uCAAuC;AACpD,IAAa,oCAAoC;AAEjD,SAAgB,6BAA6B,SAKlC;CACT,OAAO;EACL;EACA,0BAA0B,QAAQ;EAClC,oCAAoC;GAAE,WAAW,QAAQ;GAAW,UAAU,QAAQ;EAAS,CAAC;EAChG,2CAA2C,QAAQ;EACnD,QAAQ,WAAW,uCAAuC;EAC1D;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,cAAc,SAQnB;CACT,IAAI,QAAQ,SAAS,QACnB,OAAO;EACL,0BAA0B,QAAQ;EAClC,yBAAyB;GAAE,WAAW,QAAQ;GAAW,UAAU,QAAQ;EAAS,CAAC;EACrF,gCAAgC,QAAQ;EACxC;CACF,CAAC,CAAC,KAAK,GAAG;CAGZ,OAAO;EACL,sBAAsB,QAAQ;EAE9B,QAAQ,UAAU,qBAAqB,mBAAmB,QAAQ,SAAS;EAG3E;CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,SAAgB,oBAAoB,SASzB;CACT,OAAO,CACL,cAAc,OAAO,GACrB,QAAQ,oBAAoB,yBAAyB,EACvD,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb;AAEA,SAAgB,qBAAqB,SAS1B;CACT,IAAI,QAAQ,gBAAgB,SAC1B,OAAO,cAAc,OAAO;CAG9B,IAAI,QAAQ,SAAS,QACnB,OAAO,CACL,cAAc,OAAO,GACrB,0CACF,CAAC,CAAC,KAAK,GAAG;CAGZ,OAAO,CACL,cAAc,OAAO,GACrB,6CACF,CAAC,CAAC,KAAK,GAAG;AACZ;AAEA,IAAa,uBAAuB;;AAGpC,IAAM,wBAAwB;AAE9B,IAAa,wBAAwB;AACrC,IAAa,6BAA6B;AAC1C,IAAa,yBAAyB;AACtC,IAAa,2BAA2B,SAAS;AACjD,IAAa,0BAA0B;;AAEvC,IAAa,4BAA4B;AAEzC,SAAgB,oBAAoB,SAIzB;CACT,OAAO;EACL;EACA,QAAQ,SAAS,SAAS,6BAA6B;EACvD,QAAQ,WAAW,4BAA4B;EAC/C,CAAC,QAAQ,YAAY,QAAQ,SAAS,0BAA0B;CAClE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;AACb"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"overlayTransition-0Fj5tQbq.js","names":[],"sources":["../../src/components/shared/overlayTransition.ts"],"sourcesContent":["/**\n * Набор перехода всплывающей панели.\n *\n * Пять панелей — выпадающее меню, поповер, списки выбора — появляются\n * одинаково, и до выноса держали этот набор литералами в своих шаблонах:\n * шесть строк, повторённых дословно пять раз. Разъезжались они молча, потому\n * что визуально расхождение в одной фазе заметно только рядом с эталоном.\n *\n * Форма — объект по фазам, как `overlayTransition`/`panelTransition` у\n * `GrModal`: так набор биндится в `<transition>` по одному имени на фазу и\n * разворачивается в safelist одним вызовом, не превращаясь в «мешок токенов».\n *\n * Два правила, оба следуют из того, что модуль безадресный (в `dist` он лежит\n * в общем чанке, который пресет не сканирует):\n *\n * 1. **Каждый потребитель обязан объявить эти классы в своём `safelist.ts`** —\n * через `flattenTransitionTokens`. Гейт `src/__tests__/safelist.test.ts`\n * проверяет это обходом импортов; забывшего он назовёт поимённо.\n * 2. **Один пресет — один файл.** Второй набор, положенный сюда же, обложил бы\n * налогом потребителей первого: safelist считается по модулю целиком, и\n * `GrDropdown` понёс бы классы, которых не рендерит.\n *\n * Набор с единственным потребителем сюда не переезжает вовсе — литералы в его\n * `.vue` находит скан, и это дешевле. Поэтому здесь нет фейда `GrTooltip`.\n */\nexport const panelPopTransition = {\n enter: 'transition ease-[var(--gr-ease-out)] duration-[var(--gr-duration-fast)]',\n enterFrom: 'transform opacity-0 scale-95',\n enterTo: 'transform opacity-100 scale-100',\n leave: 'transition ease-[var(--gr-ease-in)] duration-[var(--gr-duration-fast)]',\n leaveFrom: 'transform opacity-100 scale-100',\n leaveTo: 'transform opacity-0 scale-95',\n} as const\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,qBAAqB;CAChC,OAAO;CACP,WAAW;CACX,SAAS;CACT,OAAO;CACP,WAAW;CACX,SAAS;AACX"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrColorPicker-p2XH_8cE.js","names":[],"sources":["../../../../src/components/GrColorPicker/color.ts","../../../../src/components/GrColorPicker/GrColorPicker.vue","../../../../src/components/GrColorPicker/GrColorPicker.vue"],"sourcesContent":["/**\n * Арифметика цвета для `GrColorPicker` — чистый модуль без Vue.\n *\n * Модель компонента — hex-строка (в такой форме цвет лежит в токенах темы),\n * а панель работает в HSL: у оттенка, насыщенности и светлоты есть шкала, по\n * которой можно вести слайдер, а у каналов RGB её нет.\n *\n * Свой парсер, а не `__tests__/cssContrast.ts`: тот — инфраструктура гейтов, и\n * тянуть тестовый модуль в поставляемый код нельзя.\n */\n\nexport type GrHsla = {\n /** Оттенок, 0…359 (круговой: 360 — это 0). */\n h: number\n /** Насыщенность, 0…100. */\n s: number\n /** Светлота, 0…100. */\n l: number\n /** Непрозрачность, 0…1. */\n a: number\n}\n\ntype Rgb = { r: number, g: number, b: number }\n\nconst HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Оттенок цикличен: 360° — тот же цвет, что 0°.\n *\n * Округления здесь нет намеренно: `#3b82f6` даёт 217.22°, и округлив его до\n * целого, обратное преобразование вернуло бы `#3b83f6` — компонент молча\n * переписывал бы чужой цвет при первом же открытии панели. Целые градусы\n * появляются там, где они и нужны, — на шкале слайдера (`normalizeHsla`).\n */\nfunction normalizeHue(hue: number): number {\n if (!Number.isFinite(hue))\n return 0\n return ((hue % 360) + 360) % 360\n}\n\n/** Короткая форма `#abc` разворачивается в `#aabbcc` — так её читает и CSS. */\nfunction expandShorthand(hex: string): string | null {\n if (hex.length === 3 || hex.length === 4)\n return [...hex].map(char => char + char).join('')\n\n if (hex.length === 6 || hex.length === 8)\n return hex\n\n return null\n}\n\nfunction rgbToHsl({ r, g, b }: Rgb): { h: number, s: number, l: number } {\n const red = r / 255\n const green = g / 255\n const blue = b / 255\n\n const max = Math.max(red, green, blue)\n const min = Math.min(red, green, blue)\n const delta = max - min\n const lightness = (max + min) / 2\n\n if (delta === 0)\n return { h: 0, s: 0, l: lightness * 100 }\n\n const saturation = delta / (1 - Math.abs(2 * lightness - 1))\n\n let hue: number\n if (max === red)\n hue = ((green - blue) / delta) % 6\n else if (max === green)\n hue = (blue - red) / delta + 2\n else hue = (red - green) / delta + 4\n\n return { h: normalizeHue(hue * 60), s: saturation * 100, l: lightness * 100 }\n}\n\nfunction hslToRgb({ h, s, l }: Omit<GrHsla, 'a'>): Rgb {\n const saturation = clamp(s, 0, 100) / 100\n const lightness = clamp(l, 0, 100) / 100\n const hue = normalizeHue(h)\n\n const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation\n const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1))\n const match = lightness - chroma / 2\n\n const [red, green, blue] = ((): [number, number, number] => {\n if (hue < 60)\n return [chroma, second, 0]\n if (hue < 120)\n return [second, chroma, 0]\n if (hue < 180)\n return [0, chroma, second]\n if (hue < 240)\n return [0, second, chroma]\n if (hue < 300)\n return [second, 0, chroma]\n return [chroma, 0, second]\n })()\n\n return {\n r: Math.round((red + match) * 255),\n g: Math.round((green + match) * 255),\n b: Math.round((blue + match) * 255),\n }\n}\n\nfunction toHexPair(value: number): string {\n return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0')\n}\n\n/**\n * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),\n * регистр и решётка необязательны.\n *\n * Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и\n * из поля ввода, и упавший компонент — худший ответ на опечатку.\n */\nexport function parseHexColor(value: unknown): GrHsla | null {\n if (typeof value !== 'string')\n return null\n\n const match = HEX_PATTERN.exec(value.trim())\n if (!match)\n return null\n\n const hex = expandShorthand(match[1])\n if (!hex)\n return null\n\n const rgb: Rgb = {\n r: Number.parseInt(hex.slice(0, 2), 16),\n g: Number.parseInt(hex.slice(2, 4), 16),\n b: Number.parseInt(hex.slice(4, 6), 16),\n }\n\n const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1\n\n return { ...rgbToHsl(rgb), a: alpha }\n}\n\n/**\n * Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до\n * непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную\n * форму, которую потребитель не ждёт.\n */\nexport function formatHexColor(color: GrHsla, withAlpha = false): string {\n const { r, g, b } = hslToRgb(color)\n const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`\n\n if (!withAlpha)\n return base\n\n return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`\n}\n\n/** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */\nfunction trim(value: number): number {\n return Math.round(value * 100) / 100\n}\n\n/** CSS-запись цвета для превью и градиентов. */\nexport function hslaToCss(color: GrHsla): string {\n const h = trim(normalizeHue(color.h))\n const s = trim(clamp(color.s, 0, 100))\n const l = trim(clamp(color.l, 0, 100))\n\n return `hsl(${h} ${s}% ${l}% / ${trim(clamp(color.a, 0, 1))})`\n}\n\n/** Приводит произвольный объект к валидному диапазону каналов. */\nexport function normalizeHsla(color: GrHsla): GrHsla {\n return {\n h: Math.round(normalizeHue(color.h)) % 360,\n s: clamp(Math.round(color.s), 0, 100),\n l: clamp(Math.round(color.l), 0, 100),\n a: clamp(color.a, 0, 1),\n }\n}\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n checkerClass,\n grColorPickerPanelClass,\n grColorPickerPresetClass,\n grColorPickerTriggerClass,\n presetsGridClass,\n previewClass,\n rowClass,\n rowLabelClass,\n rowValueClass,\n swatchBaseClass,\n swatchFillClass,\n triggerSwatchSizeBySize,\n triggerValueClass,\n type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n modelValue: string\n /** Четвёртый слайдер и восьмизначная форма hex. */\n alpha?: boolean\n /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n presets?: string[]\n size?: GrColorPickerSize\n /** Контролируемое состояние панели (`v-model:open`). */\n open?: boolean\n /** Сторона, с которой раскрывается панель. */\n placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n /** Имя для нативной формы: значение уходит скрытым полем. */\n name?: string\n disabled?: boolean\n /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n readonly?: boolean\n invalid?: boolean\n required?: boolean\n ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n (e: 'update:modelValue', value: string): void\n (e: 'change', value: string): void\n (e: 'update:open', value: boolean): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n alpha: false,\n presets: () => [],\n // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n // заглянет в `GrConfigProvider`.\n size: undefined,\n open: undefined,\n placement: 'bottom-start',\n name: undefined,\n disabled: false,\n readonly: false,\n invalid: false,\n required: false,\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid,\n required: isRequired,\n readonly: isReadonly,\n // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n field?.describedById.value,\n stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n if (next === lastEmitted)\n return\n\n const parsed = parseHexColor(next)\n if (parsed)\n state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n if (isLocked.value)\n return\n\n state.value = normalizeHsla(next)\n\n const hex = formatHexColor(state.value, props.alpha)\n lastEmitted = hex\n emit('update:modelValue', hex)\n emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n return computed<number>({\n get: () => Math.round(state.value[key] * scale),\n set: value => commit({ ...state.value, [key]: value / scale }),\n })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n hexDraft.value = next\n})\n\nfunction commitHex(): void {\n const parsed = parseHexColor(hexDraft.value)\n\n // Мусор откатывается к текущему значению: держать в поле невалидный текст\n // после коммита — значит показывать цвет, которого нет.\n //\n // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n // остался бы набранный мусор.\n if (!parsed) {\n void nextTick(() => {\n hexDraft.value = hexValue.value\n })\n return\n }\n\n commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n get: () => props.open ?? isOpen.value,\n set: (value) => {\n isOpen.value = value\n emit('update:open', value)\n },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n const parsed = parseHexColor(preset)\n return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n const parsed = parseHexColor(preset)\n if (parsed)\n commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n size: resolvedSize.value,\n disabled: isDisabled.value,\n invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n const { h, s, l } = state.value\n const solid = hslaToCss({ h, s, l, a: 1 })\n\n return {\n '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n }\n})\n</script>\n\n<template>\n <div data-gr-color-picker>\n <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n контрола внутри виджета быть не должно. -->\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n <GrPopover\n v-model:open=\"panelOpen\"\n :size=\"resolvedSize\"\n :placement=\"placement\"\n :disabled=\"isDisabled\"\n :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n :close-on-content-click=\"false\"\n >\n <template #trigger=\"{ triggerProps }\">\n <button\n :id=\"fieldId\"\n ref=\"triggerEl\"\n v-bind=\"triggerProps\"\n data-gr-color-picker-trigger\n type=\"button\"\n :class=\"triggerClass\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n @focus=\"emit('focus', $event)\"\n @blur=\"emit('blur', $event)\"\n >\n <span\n data-gr-color-picker-swatch\n aria-hidden=\"true\"\n :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n </span>\n\n <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n </button>\n </template>\n\n <template #content>\n <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n <div\n data-gr-color-picker-preview\n aria-hidden=\"true\"\n :class=\"[previewClass, checkerClass]\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n </div>\n\n <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n <GrSlider\n v-model=\"hue\"\n :min=\"0\"\n :max=\"359\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"degrees\"\n :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n />\n <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n </div>\n\n <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n <GrSlider\n v-model=\"saturation\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n />\n <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n </div>\n\n <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n <GrSlider\n v-model=\"lightness\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n />\n <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n </div>\n\n <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n <GrSlider\n v-model=\"opacity\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n />\n <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n </div>\n\n <GrInput\n v-model=\"hexDraft\"\n data-gr-color-picker-hex\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n @change=\"commitHex\"\n @keydown.enter=\"commitHex\"\n />\n\n <div\n v-if=\"presetList.length\"\n data-gr-color-picker-presets\n :class=\"presetsGridClass\"\n role=\"group\"\n :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n >\n <button\n v-for=\"preset in presetList\"\n :key=\"preset\"\n data-gr-color-picker-preset\n type=\"button\"\n :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n :disabled=\"isLocked\"\n @click=\"selectPreset(preset)\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n </button>\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n background-image:\n conic-gradient(\n from 90deg,\n var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n );\n background-size:\n calc(var(--gr-color-picker-checker-size, 6px) * 2)\n calc(var(--gr-color-picker-checker-size, 6px) * 2);\n /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n background-color: transparent;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n checkerClass,\n grColorPickerPanelClass,\n grColorPickerPresetClass,\n grColorPickerTriggerClass,\n presetsGridClass,\n previewClass,\n rowClass,\n rowLabelClass,\n rowValueClass,\n swatchBaseClass,\n swatchFillClass,\n triggerSwatchSizeBySize,\n triggerValueClass,\n type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n modelValue: string\n /** Четвёртый слайдер и восьмизначная форма hex. */\n alpha?: boolean\n /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n presets?: string[]\n size?: GrColorPickerSize\n /** Контролируемое состояние панели (`v-model:open`). */\n open?: boolean\n /** Сторона, с которой раскрывается панель. */\n placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n /** Имя для нативной формы: значение уходит скрытым полем. */\n name?: string\n disabled?: boolean\n /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n readonly?: boolean\n invalid?: boolean\n required?: boolean\n ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n (e: 'update:modelValue', value: string): void\n (e: 'change', value: string): void\n (e: 'update:open', value: boolean): void\n (e: 'focus', event: FocusEvent): void\n (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n alpha: false,\n presets: () => [],\n // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n // заглянет в `GrConfigProvider`.\n size: undefined,\n open: undefined,\n placement: 'bottom-start',\n name: undefined,\n disabled: false,\n readonly: false,\n invalid: false,\n required: false,\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n disabled: isDisabled,\n invalid: isInvalid,\n required: isRequired,\n readonly: isReadonly,\n // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n field?.describedById.value,\n stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n if (next === lastEmitted)\n return\n\n const parsed = parseHexColor(next)\n if (parsed)\n state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n if (isLocked.value)\n return\n\n state.value = normalizeHsla(next)\n\n const hex = formatHexColor(state.value, props.alpha)\n lastEmitted = hex\n emit('update:modelValue', hex)\n emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n return computed<number>({\n get: () => Math.round(state.value[key] * scale),\n set: value => commit({ ...state.value, [key]: value / scale }),\n })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n hexDraft.value = next\n})\n\nfunction commitHex(): void {\n const parsed = parseHexColor(hexDraft.value)\n\n // Мусор откатывается к текущему значению: держать в поле невалидный текст\n // после коммита — значит показывать цвет, которого нет.\n //\n // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n // остался бы набранный мусор.\n if (!parsed) {\n void nextTick(() => {\n hexDraft.value = hexValue.value\n })\n return\n }\n\n commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n get: () => props.open ?? isOpen.value,\n set: (value) => {\n isOpen.value = value\n emit('update:open', value)\n },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n const parsed = parseHexColor(preset)\n return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n const parsed = parseHexColor(preset)\n if (parsed)\n commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n size: resolvedSize.value,\n disabled: isDisabled.value,\n invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n const { h, s, l } = state.value\n const solid = hslaToCss({ h, s, l, a: 1 })\n\n return {\n '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n }\n})\n</script>\n\n<template>\n <div data-gr-color-picker>\n <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n контрола внутри виджета быть не должно. -->\n <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n <GrPopover\n v-model:open=\"panelOpen\"\n :size=\"resolvedSize\"\n :placement=\"placement\"\n :disabled=\"isDisabled\"\n :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n :close-on-content-click=\"false\"\n >\n <template #trigger=\"{ triggerProps }\">\n <button\n :id=\"fieldId\"\n ref=\"triggerEl\"\n v-bind=\"triggerProps\"\n data-gr-color-picker-trigger\n type=\"button\"\n :class=\"triggerClass\"\n :aria-label=\"ariaLabel\"\n :aria-describedby=\"describedBy\"\n :aria-invalid=\"isInvalid ? 'true' : undefined\"\n @focus=\"emit('focus', $event)\"\n @blur=\"emit('blur', $event)\"\n >\n <span\n data-gr-color-picker-swatch\n aria-hidden=\"true\"\n :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n </span>\n\n <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n </button>\n </template>\n\n <template #content>\n <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n <div\n data-gr-color-picker-preview\n aria-hidden=\"true\"\n :class=\"[previewClass, checkerClass]\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n </div>\n\n <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n <GrSlider\n v-model=\"hue\"\n :min=\"0\"\n :max=\"359\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"degrees\"\n :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n />\n <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n </div>\n\n <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n <GrSlider\n v-model=\"saturation\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n />\n <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n </div>\n\n <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n <GrSlider\n v-model=\"lightness\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n />\n <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n </div>\n\n <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n <GrSlider\n v-model=\"opacity\"\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :format-tooltip=\"percent\"\n :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n />\n <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n </div>\n\n <GrInput\n v-model=\"hexDraft\"\n data-gr-color-picker-hex\n :size=\"resolvedSize\"\n :disabled=\"isDisabled\"\n :readonly=\"isReadonly\"\n :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n @change=\"commitHex\"\n @keydown.enter=\"commitHex\"\n />\n\n <div\n v-if=\"presetList.length\"\n data-gr-color-picker-presets\n :class=\"presetsGridClass\"\n role=\"group\"\n :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n >\n <button\n v-for=\"preset in presetList\"\n :key=\"preset\"\n data-gr-color-picker-preset\n type=\"button\"\n :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n :disabled=\"isLocked\"\n @click=\"selectPreset(preset)\"\n >\n <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n </button>\n </div>\n </div>\n </template>\n </GrPopover>\n </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n background-image:\n conic-gradient(\n from 90deg,\n var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n );\n background-size:\n calc(var(--gr-color-picker-checker-size, 6px) * 2)\n calc(var(--gr-color-picker-checker-size, 6px) * 2);\n /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n background-color: transparent;\n}\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrContextMenu-ClkVjdcP.js","names":[],"sources":["../../../../src/components/GrContextMenu/contextMenuAnchor.ts","../../../../src/components/GrContextMenu/GrContextMenu.vue","../../../../src/components/GrContextMenu/GrContextMenu.vue"],"sourcesContent":["import type { GrFloatingAnchorRect } from '../../composables/useFloating'\n\n/** Точка курсора — якорь нулевого размера. */\nexport function anchorFromPointer(event: MouseEvent): GrFloatingAnchorRect {\n return { x: event.clientX, y: event.clientY }\n}\n\n/**\n * Прямоугольник элемента — якорь клавиатурного вызова.\n *\n * Не угол и не точка: меню, вызванное с клавиатуры, принадлежит **строке**, и\n * при нехватке места снизу обязано перевернуться относительно неё целиком.\n */\nexport function anchorFromElement(element: Element): GrFloatingAnchorRect {\n const rect = element.getBoundingClientRect()\n\n return { x: rect.left, y: rect.top, width: rect.width, height: rect.height }\n}\n\n/**\n * `contextmenu` пришёл с клавиатуры, а не от мыши.\n *\n * Браузеры порождают это событие и для `Shift+F10`, но координаты в нём\n * бесполезны: то угол элемента, то нули. Признаков два сразу, потому что по\n * отдельности каждый ошибается — правый клик всегда `button === 2`, а\n * клавиатурный вызов всегда без «числа кликов».\n */\nexport function isKeyboardContextMenu(event: MouseEvent): boolean {\n return event.button !== 2 && event.detail === 0\n}\n\n/**\n * Пользователь просит нативное меню браузера.\n *\n * `Shift`+правый клик — де-факто escape-hatch, в Firefox задокументированный.\n * `ctrlKey` сюда не входит намеренно: на macOS Ctrl+клик **и есть** правый\n * клик, и меню перестало бы открываться у части пользователей.\n */\nexport function wantsNativeMenu(event: MouseEvent): boolean {\n return event.shiftKey\n}\n\n/** Клавиатурный запрос контекстного меню: `Shift+F10` или клавиша `ContextMenu`. */\nexport function isContextMenuKey(event: KeyboardEvent): boolean {\n return event.key === 'ContextMenu' || (event.key === 'F10' && event.shiftKey)\n}\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"contentClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrContextMenu — меню по правому клику.\n *\n * Отличие от `GrDropdownMenu` не в содержимом, а в том, откуда меню растёт: у\n * дропдауна есть триггер-элемент, здесь — точка курсора, которой в DOM нет.\n * Поэтому слой берётся у `GrPopover` в якорном режиме, а не собирается заново.\n *\n * A11y: панель — `role=\"menu\"` с доступным именем, пункты приезжают из\n * `GrDropdownMenu` вместе со своими ролями. Меню, открываемое только правым\n * кликом, недоступно с клавиатуры, поэтому обёртка ловит `Shift+F10` и клавишу\n * `ContextMenu` — это условие приёмки, а не удобство.\n */\nimport { computed, nextTick, onBeforeUnmount, ref, useSlots, watch } from 'vue'\n\nimport { useControlledOpen } from '../../composables/internal/useControlledOpen'\nimport { useMenuItemsFocus } from '../../composables/internal/useMenuItemsFocus'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isEditableTarget } from '../../internal/keyboard'\nimport GrDropdownMenuEntries from '../GrDropdownMenu/GrDropdownMenuEntries.vue'\nimport GrDropdownMenuList from '../GrDropdownMenu/GrDropdownMenuList.vue'\nimport type { GrDropdownMenuAction, GrDropdownMenuEntry } from '../GrDropdownMenu/menuModel'\nimport { isMenuAction, isMenuSection } from '../GrDropdownMenu/menuModel'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport type { GrFloatingAnchorRect, UseFloatingPlacement } from '../../composables/useFloating'\n\nimport {\n anchorFromElement,\n anchorFromPointer,\n isContextMenuKey,\n isKeyboardContextMenu,\n wantsNativeMenu,\n} from './contextMenuAnchor'\n\n/** Чем открывается меню. `manual` — только императивно, из кода потребителя. */\nexport type GrContextMenuTrigger = 'contextmenu' | 'manual'\n\n/** Откуда пришло открытие: указатель, клавиатура или вызов из кода. */\nexport type GrContextMenuSource = 'pointer' | 'keyboard' | 'api'\n\nexport interface GrContextMenuOpenContext {\n source: GrContextMenuSource\n /** По чему кликнули или что было в фокусе — отсюда потребитель берёт строку. */\n target: HTMLElement | null\n anchor: GrFloatingAnchorRect\n event: MouseEvent | KeyboardEvent | null\n}\n\nexport interface GrContextMenuProps {\n /** Декларативное меню. Слот `#content` сильнее. */\n items?: GrDropdownMenuEntry[]\n /** Открыто ли меню. Без пропа компонент ведёт состояние сам. */\n open?: boolean\n trigger?: GrContextMenuTrigger\n disabled?: boolean\n placement?: UseFloatingPlacement\n /** Зазор от якоря. Ноль по умолчанию: меню липнет к курсору. */\n offsetPx?: number\n /** Меню из коротких слов не должно быть шириной в слово. */\n minWidth?: number | string\n ariaLabel?: string\n labelledBy?: string\n teleportTo?: string | HTMLElement\n contentClass?: string\n listClass?: string\n dividers?: boolean\n /**\n * Закрывать при прокрутке страницы. Якорь — точка вьюпорта, и панель осталась\n * бы висеть на экране, пока контент под ней уезжает. Так же ведут себя\n * нативные меню.\n */\n closeOnScroll?: boolean\n /** Пропускать `Shift`+правый клик к браузеру. */\n allowNativeMenu?: boolean\n}\n\nexport interface GrContextMenuEmits {\n (e: 'update:open', value: boolean): void\n /**\n * Меню собирается открыться у этой цели. Приходит **до** открытия, чтобы\n * потребитель успел пересобрать `items` под неё: пункты для папки и для файла\n * разные, а узнать цель иначе неоткуда. Пустая модель после этого просто не\n * откроется — отдельный способ отменить открытие не нужен.\n */\n (e: 'beforeOpen', context: GrContextMenuOpenContext): void\n (e: 'select', item: GrDropdownMenuAction): void\n}\n\nconst props = withDefaults(defineProps<GrContextMenuProps>(), {\n items: undefined,\n open: undefined,\n trigger: 'contextmenu',\n disabled: false,\n placement: 'bottom-start',\n offsetPx: 0,\n minWidth: '11rem',\n ariaLabel: undefined,\n labelledBy: undefined,\n teleportTo: undefined,\n contentClass: undefined,\n listClass: undefined,\n dividers: false,\n closeOnScroll: true,\n allowNativeMenu: true,\n})\n\nconst emit = defineEmits<GrContextMenuEmits>()\n\nconst slots = useSlots()\nconst { t } = useGranularityTranslations()\n\nconst { open: isOpen, setOpen } = useControlledOpen(\n () => props.open,\n next => emit('update:open', next),\n)\n\nconst areaEl = ref<HTMLElement | null>(null)\nconst listRef = ref<{ $el?: HTMLElement } | null>(null)\nconst anchor = ref<GrFloatingAnchorRect | null>(null)\n\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.contextMenu.label', 'Context menu'))\n\nconst listStyle = computed(() => ({\n minWidth: typeof props.minWidth === 'number' ? `${props.minWidth}px` : props.minWidth,\n}))\n\n/**\n * Меню без единого действия не открывается: фокусировать в нём нечего, и оно\n * становится ловушкой, из которой есть только Esc.\n */\nconst isEmpty = computed(() => {\n if (slots.content)\n return false\n\n return (props.items ?? []).every(entry => !isMenuAction(entry)\n && (!isMenuSection(entry) || entry.items.length === 0))\n})\n\nconst menu = useMenuItemsFocus({\n container: () => listRef.value?.$el ?? null,\n close: () => close(),\n})\n\nfunction panelOf(): HTMLElement | null {\n return listRef.value?.$el?.closest('[data-gr-popover-panel]') ?? null\n}\n\nfunction isInsidePanel(target: EventTarget | null): boolean {\n return target instanceof Node && (panelOf()?.contains(target) ?? false)\n}\n\nasync function openWith(context: GrContextMenuOpenContext): Promise<void> {\n if (props.disabled)\n return\n\n anchor.value = context.anchor\n emit('beforeOpen', context)\n\n // Тик между уведомлением и открытием — не перестраховка: `items` доезжают сюда\n // пропом, то есть следующим рендером родителя. Без ожидания меню под узел\n // дерева открылось бы с пунктами от предыдущей цели.\n await nextTick()\n\n if (isEmpty.value)\n return\n\n setOpen(true)\n\n await nextTick()\n menu.focusAt(0)\n}\n\n/** Открыть у точки курсора или у произвольного прямоугольника вьюпорта. */\nfunction openAt(at: MouseEvent | GrFloatingAnchorRect): void {\n const fromPointer = at instanceof MouseEvent\n\n void openWith({\n source: fromPointer ? 'pointer' : 'api',\n target: fromPointer ? (at.target as HTMLElement | null) : null,\n anchor: fromPointer ? anchorFromPointer(at) : at,\n event: fromPointer ? at : null,\n })\n}\n\n/** Открыть у прямоугольника элемента — клавиатурный путь для внешних композитов. */\nfunction openAtElement(element: Element): void {\n void openWith({\n source: 'api',\n target: element instanceof HTMLElement ? element : null,\n anchor: anchorFromElement(element),\n event: null,\n })\n}\n\nfunction open(): void {\n if (anchor.value)\n void openWith({ source: 'api', target: null, anchor: anchor.value, event: null })\n else if (areaEl.value)\n openAtElement(areaEl.value)\n}\n\nfunction close(): void {\n setOpen(false)\n menu.reset()\n}\n\nfunction toggle(): void {\n isOpen.value ? close() : open()\n}\n\nfunction onSelect(item: GrDropdownMenuAction): void {\n emit('select', item)\n}\n\nfunction onAreaContextMenu(event: MouseEvent): void {\n if (props.trigger !== 'contextmenu' || props.disabled)\n return\n\n if (props.allowNativeMenu && wantsNativeMenu(event))\n return\n\n event.preventDefault()\n // Вложенные области: побеждает ближайшая к цели, как в нативных приложениях.\n event.stopPropagation()\n\n if (isKeyboardContextMenu(event)) {\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (target)\n openAtElement(target)\n return\n }\n\n openAt(event)\n}\n\n/**\n * `trigger` здесь намеренно не проверяется: `manual` отключает открытие\n * указателем, а клавиатурный путь оставить обязан — иначе меню недоступно с\n * клавиатуры в принципе, и потребителю пришлось бы писать этот обработчик\n * заново на каждой странице.\n */\nfunction onAreaKeydown(event: KeyboardEvent): void {\n if (props.disabled)\n return\n\n if (!isContextMenuKey(event))\n return\n\n // В поле ввода нативное меню (орфография, буфер) полезнее нашего.\n if (isEditableTarget(event.target))\n return\n\n // Отмена keydown гасит `contextmenu`, который браузер породил бы следом:\n // без неё меню открылось бы дважды и второй раз — по координатам, а не по\n // прямоугольнику строки.\n event.preventDefault()\n\n const target = (document.activeElement as HTMLElement | null) ?? areaEl.value\n if (!target)\n return\n\n void openWith({\n source: 'keyboard',\n target,\n anchor: anchorFromElement(target),\n event,\n })\n}\n\n/**\n * Правый клик мимо меню его не закрывает: `v-click-outside` отбрасывает всё,\n * что не левая кнопка, а `contextmenu` вообще не порождает `click`. Ослаблять\n * директиву нельзя — гард бережёт дропдауны, — поэтому слушаем сами.\n */\nfunction onDocumentContextMenu(event: MouseEvent): void {\n if (isInsidePanel(event.target)) {\n event.preventDefault()\n return\n }\n\n // Внутри своей области меню не закрываем: обработчик области перенесёт его к\n // новой точке, а закрытие с последующим открытием мигало бы панелью.\n if (event.target instanceof Node && areaEl.value?.contains(event.target))\n return\n\n close()\n}\n\nfunction onDocumentScroll(event: Event): void {\n if (isInsidePanel(event.target))\n return\n\n close()\n}\n\nlet scrollFrame: number | undefined\n\nfunction stopListening(): void {\n if (scrollFrame !== undefined) {\n cancelAnimationFrame(scrollFrame)\n scrollFrame = undefined\n }\n\n window.removeEventListener('contextmenu', onDocumentContextMenu, true)\n window.removeEventListener('scroll', onDocumentScroll, true)\n}\n\nwatch(isOpen, (next) => {\n if (typeof window === 'undefined')\n return\n\n if (!next) {\n stopListening()\n return\n }\n\n window.addEventListener('contextmenu', onDocumentContextMenu, true)\n\n // Слушатель прокрутки — со следующего кадра: само открытие прокручивает\n // страницу (браузер подтягивает в вид то, по чему кликнули и что получило\n // фокус), и меню закрывало бы само себя ровно в момент появления.\n if (props.closeOnScroll) {\n scrollFrame = requestAnimationFrame(() => {\n scrollFrame = undefined\n window.addEventListener('scroll', onDocumentScroll, { capture: true, passive: true })\n })\n }\n})\n\nonBeforeUnmount(() => {\n if (typeof window === 'undefined')\n return\n\n stopListening()\n})\n\ndefineExpose({ openAt, openAtElement, open, close, toggle })\n\ndefineSlots<{\n /** Область, по которой вызывается меню. */\n default?: (props: { open: boolean }) => any\n /** Содержимое меню. */\n content?: (props: { close: () => void }) => any\n}>()\n</script>\n\n<template>\n <div data-gr-context-menu>\n <div\n v-if=\"slots.default\"\n ref=\"areaEl\"\n data-gr-context-menu-area\n @contextmenu=\"onAreaContextMenu\"\n @keydown=\"onAreaKeydown\"\n >\n <slot :open=\"isOpen\" />\n </div>\n\n <GrPopover\n :open=\"isOpen\"\n :anchor=\"anchor\"\n :placement=\"placement\"\n :offset-px=\"offsetPx\"\n :teleport-to=\"teleportTo\"\n :content-class=\"contentClass\"\n :aria-label=\"labelledBy ? undefined : resolvedAriaLabel\"\n :labelled-by=\"labelledBy\"\n role=\"menu\"\n trigger=\"manual\"\n padding=\"none\"\n close-on-content-click\n :auto-focus=\"false\"\n @update:open=\"setOpen($event)\"\n >\n <template #content=\"{ close: closePanel }\">\n <GrDropdownMenuList\n ref=\"listRef\"\n class=\"p-1\"\n :style=\"listStyle\"\n :dividers=\"dividers\"\n :class=\"listClass\"\n @keydown=\"menu.onKeydown\"\n >\n <slot name=\"content\" :close=\"closePanel\">\n <GrDropdownMenuEntries :items=\"items\" @select=\"onSelect\" />\n </slot>\n </GrDropdownMenuList>\n </template>\n </GrPopover>\n </div>\n</template>\n"],"mappings":"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"}
|