@feugene/granularity 0.11.0 → 0.12.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/GrTree.css +1 -1
- package/dist/chunks/config-1uSYl98Y2.js.map +1 -0
- package/dist/chunks/config-BIRO0vDJ.js.map +1 -0
- package/dist/chunks/config-BWiPnygb.js +5 -0
- package/dist/chunks/config-BWiPnygb.js.map +1 -0
- package/dist/chunks/config-BXtAmU3s2.js.map +1 -0
- package/dist/chunks/config-CGHLoBlH.js.map +1 -0
- package/dist/chunks/config-CrG1XiE72.js.map +1 -0
- package/dist/chunks/config-DUcu1D682.js.map +1 -0
- package/dist/chunks/config-Dlm49Jp5.js +5 -0
- package/dist/chunks/config-Dlm49Jp5.js.map +1 -0
- package/dist/chunks/config-DnvPqu4g2.js.map +1 -0
- package/dist/chunks/config-DpqOnJiz.js.map +1 -0
- package/dist/chunks/config-JpHA4Xx02.js.map +1 -0
- package/dist/chunks/config-LGrZIdaZ.js.map +1 -0
- package/dist/chunks/config-eXB87DOi2.js +9 -0
- package/dist/chunks/config-eXB87DOi2.js.map +1 -0
- package/dist/chunks/context-DdNIxa1w.js +9 -0
- package/dist/chunks/context-DdNIxa1w.js.map +1 -0
- package/dist/chunks/{en-BdtiS2d3.js → en-CfkDa4GX.js} +8 -2
- package/dist/chunks/{en-BdtiS2d3.js.map → en-CfkDa4GX.js.map} +1 -1
- package/dist/chunks/{es-DBhctWg-.js → es-CgaLnFYx.js} +3 -3
- package/dist/chunks/{es-DBhctWg-.js.map → es-CgaLnFYx.js.map} +1 -1
- package/dist/chunks/{es-BGRMZbe9.js → es-FkgECuCm.js} +8 -2
- package/dist/chunks/{es-BGRMZbe9.js.map → es-FkgECuCm.js.map} +1 -1
- package/dist/chunks/grModalEscStack-BXk-9mv7.js +43 -0
- package/dist/chunks/grModalEscStack-BXk-9mv7.js.map +1 -0
- package/dist/chunks/{ru-BFCnOiML.js → ru-Bl8CxpEa.js} +8 -2
- package/dist/chunks/{ru-BFCnOiML.js.map → ru-Bl8CxpEa.js.map} +1 -1
- package/dist/chunks/{shared-ChvcQgDl.js → shared-B6Ay2081.js} +17 -11
- package/dist/chunks/shared-B6Ay2081.js.map +1 -0
- package/dist/chunks/{transition-TLFw4KBn.js → useScrollLock-K7kaP2Ud.js} +52 -1
- package/dist/chunks/useScrollLock-K7kaP2Ud.js.map +1 -0
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-BWYKCsHd.js → GrConfirmDialog-D8CkOtqv.js} +1 -1
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-BWYKCsHd.js.map → GrConfirmDialog-D8CkOtqv.js.map} +1 -1
- package/dist/components/GrConfirmDialog/index.js +2 -2
- package/dist/components/GrDataTable/chunks/{GrDataTable-ptbARmJ3.js → GrDataTable-Ds5OeGat.js} +42 -16
- package/dist/components/GrDataTable/chunks/GrDataTable-Ds5OeGat.js.map +1 -0
- package/dist/components/GrDataTable/index.js +1 -1
- package/dist/components/GrDialog/chunks/{GrDialog-5DAS-1Lb.js → GrDialog-Ctucxju9.js} +2 -2
- package/dist/components/GrDialog/chunks/{GrDialog-5DAS-1Lb.js.map → GrDialog-Ctucxju9.js.map} +1 -1
- package/dist/components/GrDialog/index.js +1 -1
- package/dist/components/GrDialogService/chunks/{GrDialogService-DY_fmaMu.js → GrDialogService-CU1Fbonc.js} +2 -2
- package/dist/components/GrDialogService/chunks/{GrDialogService-DY_fmaMu.js.map → GrDialogService-CU1Fbonc.js.map} +1 -1
- package/dist/components/GrDialogService/index.js +1 -1
- package/dist/components/GrDivider/chunks/GrDivider-5bcE-BB4.js +54 -0
- package/dist/components/GrDivider/chunks/GrDivider-5bcE-BB4.js.map +1 -0
- package/dist/components/GrDivider/index.js +3 -0
- package/dist/components/GrDrawer/chunks/{GrDrawer-D1kzsjXN.js → GrDrawer-SLGKCY2A.js} +37 -13
- package/dist/components/GrDrawer/chunks/GrDrawer-SLGKCY2A.js.map +1 -0
- package/dist/components/GrDrawer/index.js +2 -2
- package/dist/components/GrDropdown/chunks/{GrDropdown-BXb5Cxxf.js → GrDropdown-BnDMYP8v.js} +90 -4
- package/dist/components/GrDropdown/chunks/GrDropdown-BnDMYP8v.js.map +1 -0
- package/dist/components/GrDropdown/index.js +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-DFEJLPcV.js → GrDropdownMenu--g9Vofcq.js} +1 -1
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-DFEJLPcV.js.map → GrDropdownMenu--g9Vofcq.js.map} +1 -1
- package/dist/components/GrDropdownMenu/index.js +1 -1
- package/dist/components/GrFormField/chunks/GrFormField-DnfMHx_U.js +73 -0
- package/dist/components/GrFormField/chunks/GrFormField-DnfMHx_U.js.map +1 -0
- package/dist/components/GrFormField/index.js +3 -2
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-OCUIrNh2.js → GrImageViewer-Dla9IBkd.js} +311 -222
- package/dist/components/GrImageViewer/chunks/GrImageViewer-Dla9IBkd.js.map +1 -0
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrInput/chunks/GrInput-B8dd3JaA.js +334 -0
- package/dist/components/GrInput/chunks/GrInput-B8dd3JaA.js.map +1 -0
- package/dist/components/GrInput/index.js +1 -1
- package/dist/components/GrKbd/chunks/GrKbd-BEoYxWhE.js +22 -0
- package/dist/components/GrKbd/chunks/GrKbd-BEoYxWhE.js.map +1 -0
- package/dist/components/GrKbd/index.js +3 -0
- package/dist/components/GrModal/chunks/{GrModal-BkjW9jZS.js → GrModal-C0GZrHN3.js} +3 -56
- package/dist/components/GrModal/chunks/GrModal-C0GZrHN3.js.map +1 -0
- package/dist/components/GrModal/index.js +1 -1
- package/dist/components/GrNumberInput/chunks/{GrNumberInput-CldPIWQx.js → GrNumberInput-DxCEvL7V.js} +93 -11
- package/dist/components/GrNumberInput/chunks/GrNumberInput-DxCEvL7V.js.map +1 -0
- package/dist/components/GrNumberInput/index.js +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-Bu9wv6it.js → GrPagination-mlyfLjQY.js} +1 -1
- package/dist/components/GrPagination/chunks/{GrPagination-Bu9wv6it.js.map → GrPagination-mlyfLjQY.js.map} +1 -1
- package/dist/components/GrPagination/index.js +2 -2
- package/dist/components/GrProgressBar/index.js +1 -1
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-TmWXbpEP.js → GrPromptDialog-C-_BMNuY.js} +3 -3
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-TmWXbpEP.js.map → GrPromptDialog-C-_BMNuY.js.map} +1 -1
- package/dist/components/GrPromptDialog/index.js +1 -1
- package/dist/components/GrRadio/chunks/{GrRadio-CPTixXaY.js → GrRadio-Dr-pvs_9.js} +1 -1
- package/dist/components/GrRadio/chunks/{GrRadio-CPTixXaY.js.map → GrRadio-Dr-pvs_9.js.map} +1 -1
- package/dist/components/GrRadio/index.js +2 -2
- package/dist/components/GrRadioGroup/chunks/{GrRadioGroup-vKZCbkCp.js → GrRadioGroup-nOdvfV_g.js} +1 -1
- package/dist/components/GrRadioGroup/chunks/{GrRadioGroup-vKZCbkCp.js.map → GrRadioGroup-nOdvfV_g.js.map} +1 -1
- package/dist/components/GrRadioGroup/index.js +1 -1
- package/dist/components/GrSelect/chunks/{GrSelect-RShK21lK.js → GrSelect-BVCmitqa.js} +147 -27
- package/dist/components/GrSelect/chunks/GrSelect-BVCmitqa.js.map +1 -0
- package/dist/components/GrSelect/index.js +1 -1
- package/dist/components/GrSidebar/index.js +1 -1
- package/dist/components/GrTabPanels/chunks/GrTabPanels-DbKybwe-.js +68 -0
- package/dist/components/GrTabPanels/chunks/GrTabPanels-DbKybwe-.js.map +1 -0
- package/dist/components/GrTabPanels/index.js +3 -0
- package/dist/components/GrTabs/chunks/{GrTabs-Z-FDJUr_.js → GrTabs-DsLwWoRz.js} +6 -1
- package/dist/components/GrTabs/chunks/GrTabs-DsLwWoRz.js.map +1 -0
- package/dist/components/GrTabs/index.js +1 -1
- package/dist/components/GrTextarea/chunks/{GrTextarea-D56YxhKq.js → GrTextarea-CKukGlNl.js} +15 -5
- package/dist/components/GrTextarea/chunks/GrTextarea-CKukGlNl.js.map +1 -0
- package/dist/components/GrTextarea/index.js +2 -2
- package/dist/components/GrToaster/chunks/{GrToaster-eI8YvnIo.js → GrToaster-L2cu6cSR.js} +1 -1
- package/dist/components/GrToaster/chunks/{GrToaster-eI8YvnIo.js.map → GrToaster-L2cu6cSR.js.map} +1 -1
- package/dist/components/GrToaster/index.js +2 -2
- package/dist/components/GrTree/chunks/{GrTree-D3ODe2dB.js → GrTree-B2_yW6g1.js} +107 -8
- package/dist/components/GrTree/chunks/GrTree-B2_yW6g1.js.map +1 -0
- package/dist/components/GrTree/index.js +2 -2
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-B2xBKs5Q.js → GrTreeSelect-0aM62xyu.js} +3 -3
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-B2xBKs5Q.js.map → GrTreeSelect-0aM62xyu.js.map} +1 -1
- package/dist/components/GrTreeSelect/index.js +2 -2
- package/dist/granular-provider-node.js +2 -2
- package/dist/granular-provider.js +1 -1
- package/dist/i18n/all.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/index.js +40 -33
- package/dist/index.js.map +1 -1
- package/dist/styles/base.css +30 -8
- package/dist/styles/preflight.css +5 -1
- package/dist/types/src/components/GrDataTable/GrDataTable.vue.d.ts +28 -4
- package/dist/types/src/components/GrDivider/GrDivider.vue.d.ts +58 -0
- package/dist/types/src/components/GrDivider/config.d.ts +1 -0
- package/dist/types/src/components/GrDivider/index.d.ts +4 -0
- package/dist/types/src/components/GrDrawer/GrDrawer.vue.d.ts +4 -4
- package/dist/types/src/components/GrDropdown/GrDropdown.vue.d.ts +7 -0
- package/dist/types/src/components/GrDropdownMenu/GrDropdownMenu.vue.d.ts +6 -0
- package/dist/types/src/components/GrFormField/GrFormField.vue.d.ts +15 -2
- package/dist/types/src/components/GrFormField/context.d.ts +20 -0
- package/dist/types/src/components/GrFormField/index.d.ts +1 -0
- package/dist/types/src/components/GrImageViewer/GrImageViewer.vue.d.ts +4 -0
- package/dist/types/src/components/GrImageViewer/composables/useViewerKeyboard.d.ts +20 -0
- package/dist/types/src/components/GrImageViewer/composables/useWheelGesture.d.ts +16 -0
- package/dist/types/src/components/GrImageViewer/composables/useZoomPan.d.ts +50 -0
- package/dist/types/src/components/GrInput/GrInput.vue.d.ts +41 -2
- package/dist/types/src/components/GrKbd/GrKbd.vue.d.ts +46 -0
- package/dist/types/src/components/GrKbd/config.d.ts +1 -0
- package/dist/types/src/components/GrKbd/index.d.ts +4 -0
- package/dist/types/src/components/GrNumberInput/GrNumberInput.vue.d.ts +16 -0
- package/dist/types/src/components/GrSelect/GrSelect.vue.d.ts +2 -2
- package/dist/types/src/components/GrTabPanels/GrTabPanel.vue.d.ts +46 -0
- package/dist/types/src/components/GrTabPanels/GrTabPanels.vue.d.ts +51 -0
- package/dist/types/src/components/GrTabPanels/config.d.ts +5 -0
- package/dist/types/src/components/GrTabPanels/context.d.ts +9 -0
- package/dist/types/src/components/GrTabPanels/index.d.ts +6 -0
- package/dist/types/src/components/GrTabs/GrTabs.vue.d.ts +6 -0
- package/dist/types/src/components/GrTree/grTreeInteractionContext.d.ts +2 -0
- package/dist/types/src/composables/internal/useScrollLock.d.ts +24 -0
- package/dist/types/src/granular-provider/shared.d.ts +3 -0
- package/dist/types/src/i18n/messages/en.d.ts +10 -0
- package/dist/types/src/i18n/messages/es.d.ts +10 -0
- package/dist/types/src/i18n/messages/ru.d.ts +10 -0
- package/dist/types/src/index.d.ts +3 -0
- package/dist/web-types.json +275 -26
- package/package.json +13 -1
- package/dist/chunks/config-1uSYl98Y.js.map +0 -1
- package/dist/chunks/config-BIRO0vDJ2.js.map +0 -1
- package/dist/chunks/config-BXtAmU3s.js.map +0 -1
- package/dist/chunks/config-CGHLoBlH2.js.map +0 -1
- package/dist/chunks/config-CrG1XiE7.js.map +0 -1
- package/dist/chunks/config-DUcu1D68.js.map +0 -1
- package/dist/chunks/config-DnvPqu4g.js.map +0 -1
- package/dist/chunks/config-DpqOnJiz2.js.map +0 -1
- package/dist/chunks/config-JpHA4Xx0.js.map +0 -1
- package/dist/chunks/config-LGrZIdaZ2.js.map +0 -1
- package/dist/chunks/shared-ChvcQgDl.js.map +0 -1
- package/dist/chunks/transition-TLFw4KBn.js.map +0 -1
- package/dist/components/GrDataTable/chunks/GrDataTable-ptbARmJ3.js.map +0 -1
- package/dist/components/GrDrawer/chunks/GrDrawer-D1kzsjXN.js.map +0 -1
- package/dist/components/GrDropdown/chunks/GrDropdown-BXb5Cxxf.js.map +0 -1
- package/dist/components/GrFormField/chunks/GrFormField-BujNQrw8.js +0 -35
- package/dist/components/GrFormField/chunks/GrFormField-BujNQrw8.js.map +0 -1
- package/dist/components/GrImageViewer/chunks/GrImageViewer-OCUIrNh2.js.map +0 -1
- package/dist/components/GrInput/chunks/GrInput-C8pOJgCi.js +0 -188
- package/dist/components/GrInput/chunks/GrInput-C8pOJgCi.js.map +0 -1
- package/dist/components/GrModal/chunks/GrModal-BkjW9jZS.js.map +0 -1
- package/dist/components/GrNumberInput/chunks/GrNumberInput-CldPIWQx.js.map +0 -1
- package/dist/components/GrSelect/chunks/GrSelect-RShK21lK.js.map +0 -1
- package/dist/components/GrTabs/chunks/GrTabs-Z-FDJUr_.js.map +0 -1
- package/dist/components/GrTextarea/chunks/GrTextarea-D56YxhKq.js.map +0 -1
- package/dist/components/GrTree/chunks/GrTree-D3ODe2dB.js.map +0 -1
- /package/dist/chunks/{config-1uSYl98Y.js → config-1uSYl98Y2.js} +0 -0
- /package/dist/chunks/{config-BIRO0vDJ2.js → config-BIRO0vDJ.js} +0 -0
- /package/dist/chunks/{config-BXtAmU3s.js → config-BXtAmU3s2.js} +0 -0
- /package/dist/chunks/{config-CGHLoBlH2.js → config-CGHLoBlH.js} +0 -0
- /package/dist/chunks/{config-CrG1XiE7.js → config-CrG1XiE72.js} +0 -0
- /package/dist/chunks/{config-DUcu1D68.js → config-DUcu1D682.js} +0 -0
- /package/dist/chunks/{config-DnvPqu4g.js → config-DnvPqu4g2.js} +0 -0
- /package/dist/chunks/{config-DpqOnJiz2.js → config-DpqOnJiz.js} +0 -0
- /package/dist/chunks/{config-JpHA4Xx0.js → config-JpHA4Xx02.js} +0 -0
- /package/dist/chunks/{config-LGrZIdaZ2.js → config-LGrZIdaZ.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrPromptDialog-TmWXbpEP.js","names":[],"sources":["../../../../src/components/GrPromptDialog/GrPromptDialog.vue","../../../../src/components/GrPromptDialog/GrPromptDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrPromptDialog-C-_BMNuY.js","names":[],"sources":["../../../../src/components/GrPromptDialog/GrPromptDialog.vue","../../../../src/components/GrPromptDialog/GrPromptDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrPromptDialog_default } from "./chunks/GrPromptDialog-
|
|
1
|
+
import { t as GrPromptDialog_default } from "./chunks/GrPromptDialog-C-_BMNuY.js";
|
|
2
2
|
import { t as grPromptDialogConfig } from "../../chunks/config-BUHuGBik.js";
|
|
3
3
|
export { GrPromptDialog_default as GrPromptDialog, GrPromptDialog_default as default, grPromptDialogConfig };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as grRadioDotBaseClass, i as grRadioControlClass, o as grRadioDotClass, r as grRadioButtonClass, s as grRadioRootClass } from "../../../chunks/config-
|
|
1
|
+
import { a as grRadioDotBaseClass, i as grRadioControlClass, o as grRadioDotClass, r as grRadioButtonClass, s as grRadioRootClass } from "../../../chunks/config-CrG1XiE72.js";
|
|
2
2
|
import { computed, createElementBlock, createElementVNode, defineComponent, inject, normalizeClass, openBlock, renderSlot, unref, withKeys, withModifiers } from "vue";
|
|
3
3
|
//#region src/components/GrRadio/grRadioGroupContext.ts
|
|
4
4
|
var GR_RADIO_GROUP_CONTEXT = Symbol("GR_RADIO_GROUP_CONTEXT");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrRadio-CPTixXaY.js","names":[],"sources":["../../../../src/components/GrRadio/grRadioGroupContext.ts","../../../../src/components/GrRadio/GrRadio.vue","../../../../src/components/GrRadio/GrRadio.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton/grButtonStyles'\n\nexport type GrRadioGroupContext = {\n modelValue: ComputedRef<string>\n name: ComputedRef<string | undefined>\n disabled: ComputedRef<boolean>\n size: ComputedRef<GrButtonSize>\n setValue: (value: string) => void\n}\n\nexport const GR_RADIO_GROUP_CONTEXT: InjectionKey<GrRadioGroupContext> = Symbol('GR_RADIO_GROUP_CONTEXT')","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GrRadio-Dr-pvs_9.js","names":[],"sources":["../../../../src/components/GrRadio/grRadioGroupContext.ts","../../../../src/components/GrRadio/GrRadio.vue","../../../../src/components/GrRadio/GrRadio.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton/grButtonStyles'\n\nexport type GrRadioGroupContext = {\n modelValue: ComputedRef<string>\n name: ComputedRef<string | undefined>\n disabled: ComputedRef<boolean>\n size: ComputedRef<GrButtonSize>\n setValue: (value: string) => void\n}\n\nexport const GR_RADIO_GROUP_CONTEXT: InjectionKey<GrRadioGroupContext> = Symbol('GR_RADIO_GROUP_CONTEXT')","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { n as grRadioSafelist, t as grRadioConfig } from "../../chunks/config-
|
|
2
|
-
import { n as GR_RADIO_GROUP_CONTEXT, t as GrRadio_default } from "./chunks/GrRadio-
|
|
1
|
+
import { n as grRadioSafelist, t as grRadioConfig } from "../../chunks/config-CrG1XiE72.js";
|
|
2
|
+
import { n as GR_RADIO_GROUP_CONTEXT, t as GrRadio_default } from "./chunks/GrRadio-Dr-pvs_9.js";
|
|
3
3
|
export { GR_RADIO_GROUP_CONTEXT, GrRadio_default as GrRadio, GrRadio_default as default, grRadioConfig, grRadioSafelist };
|
package/dist/components/GrRadioGroup/chunks/{GrRadioGroup-vKZCbkCp.js → GrRadioGroup-nOdvfV_g.js}
RENAMED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as GrButtonGroup_default } from "../../GrButtonGroup/chunks/GrButtonGroup-Bs9dEKfA.js";
|
|
2
|
-
import { n as GR_RADIO_GROUP_CONTEXT, t as GrRadio_default } from "../../GrRadio/chunks/GrRadio-
|
|
2
|
+
import { n as GR_RADIO_GROUP_CONTEXT, t as GrRadio_default } from "../../GrRadio/chunks/GrRadio-Dr-pvs_9.js";
|
|
3
3
|
import { Fragment, computed, createBlock, createElementBlock, createTextVNode, defineComponent, openBlock, provide, renderList, renderSlot, toDisplayString, withCtx } from "vue";
|
|
4
4
|
//#region src/components/GrRadioGroup/GrRadioGroup.vue?vue&type=script&setup=true&lang.ts
|
|
5
5
|
var _hoisted_1 = ["aria-label", "aria-disabled"];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GrRadioGroup-
|
|
1
|
+
{"version":3,"file":"GrRadioGroup-nOdvfV_g.js","names":["$slots"],"sources":["../../../../src/components/GrRadioGroup/GrRadioGroup.vue","../../../../src/components/GrRadioGroup/GrRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton'\nimport GrButtonGroup from '../GrButtonGroup/GrButtonGroup.vue'\nimport GrRadio from '../GrRadio/GrRadio.vue'\nimport { GR_RADIO_GROUP_CONTEXT } from '../GrRadio'\n\nexport type GrRadioGroupVariant = 'radiobox' | 'button'\nexport interface GrRadioGroupOption { value: string, label: string }\n\n/**\n * GrRadioGroup — контейнер группы `GrRadio`.\n *\n * Может работать как через слот (ручной рендер `GrRadio`), так и через проп `options`.\n * Предоставляет дочерним `GrRadio` общий `modelValue`/`disabled`/`size`/`name` через `inject`.\n */\nexport interface GrRadioGroupProps {\n modelValue: string\n options?: GrRadioGroupOption[]\n name?: string\n disabled?: boolean\n variant?: GrRadioGroupVariant\n size?: GrButtonSize\n ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrRadioGroupProps>(), {\n options: undefined,\n name: undefined,\n disabled: false,\n variant: 'radiobox',\n size: 'md',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nfunction setValue(next: string): void {\n if (props.disabled)\n return\n emit('update:modelValue', next)\n}\n\nprovide(GR_RADIO_GROUP_CONTEXT, {\n modelValue: computed(() => props.modelValue),\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n size: computed(() => props.size),\n setValue,\n})\n</script>\n\n<template>\n <div\n data-gr-radio-group\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n >\n <template v-if=\"$slots.default\">\n <GrButtonGroup v-if=\"variant === 'button'\">\n <slot />\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <slot />\n </div>\n </template>\n <template v-else>\n <GrButtonGroup v-if=\"variant === 'button'\">\n <GrRadio\n v-for=\"opt in options ?? []\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n variant=\"button\"\n :size=\"size\"\n >\n {{ opt.label }}\n </GrRadio>\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <GrRadio v-for=\"opt in options ?? []\" :key=\"opt.value\" :value=\"opt.value\">\n {{ opt.label }}\n </GrRadio>\n </div>\n </template>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton'\nimport GrButtonGroup from '../GrButtonGroup/GrButtonGroup.vue'\nimport GrRadio from '../GrRadio/GrRadio.vue'\nimport { GR_RADIO_GROUP_CONTEXT } from '../GrRadio'\n\nexport type GrRadioGroupVariant = 'radiobox' | 'button'\nexport interface GrRadioGroupOption { value: string, label: string }\n\n/**\n * GrRadioGroup — контейнер группы `GrRadio`.\n *\n * Может работать как через слот (ручной рендер `GrRadio`), так и через проп `options`.\n * Предоставляет дочерним `GrRadio` общий `modelValue`/`disabled`/`size`/`name` через `inject`.\n */\nexport interface GrRadioGroupProps {\n modelValue: string\n options?: GrRadioGroupOption[]\n name?: string\n disabled?: boolean\n variant?: GrRadioGroupVariant\n size?: GrButtonSize\n ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrRadioGroupProps>(), {\n options: undefined,\n name: undefined,\n disabled: false,\n variant: 'radiobox',\n size: 'md',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nfunction setValue(next: string): void {\n if (props.disabled)\n return\n emit('update:modelValue', next)\n}\n\nprovide(GR_RADIO_GROUP_CONTEXT, {\n modelValue: computed(() => props.modelValue),\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n size: computed(() => props.size),\n setValue,\n})\n</script>\n\n<template>\n <div\n data-gr-radio-group\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n >\n <template v-if=\"$slots.default\">\n <GrButtonGroup v-if=\"variant === 'button'\">\n <slot />\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <slot />\n </div>\n </template>\n <template v-else>\n <GrButtonGroup v-if=\"variant === 'button'\">\n <GrRadio\n v-for=\"opt in options ?? []\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n variant=\"button\"\n :size=\"size\"\n >\n {{ opt.label }}\n </GrRadio>\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <GrRadio v-for=\"opt in options ?? []\" :key=\"opt.value\" :value=\"opt.value\">\n {{ opt.label }}\n </GrRadio>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,SAAS,SAAS,MAAoB;GACpC,IAAI,MAAM,UACR;GACF,KAAK,qBAAqB,IAAI;EAChC;EAEA,QAAQ,wBAAwB;GAC9B,YAAY,eAAe,MAAM,UAAU;GAC3C,MAAM,eAAe,MAAM,IAAI;GAC/B,UAAU,eAAe,MAAM,QAAQ;GACvC,MAAM,eAAe,MAAM,IAAI;GAC/B;EACF,CAAC;;uBAIC,mBAgCM,OAAA;IA/BJ,uBAAA;IACA,MAAK;IACJ,cAAY,QAAA;IACZ,iBAAe,QAAA,WAAQ,SAAY,KAAA;OAEpBA,KAAAA,OAAO,WAAA,UAAA,GAAvB,mBAOW,UAAA,EAAA,KAAA,EAAA,GAAA,CANY,QAAA,YAAO,YAAA,UAAA,GAA5B,YAEgB,uBAAA,EAAA,KAAA,EAAA,GAAA;2BADN,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;uBAEV,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,EAAA,GAAA,EAAA,MAAA,UAAA,GAGZ,mBAiBW,UAAA,EAAA,KAAA,EAAA,GAAA,CAhBY,QAAA,YAAO,YAAA,UAAA,GAA5B,YAUgB,uBAAA,EAAA,KAAA,EAAA,GAAA;2BARgB,EAAA,UAAA,IAAA,GAD9B,mBAQU,UAAA,MAAA,WAPM,QAAA,WAAO,CAAA,IAAd,QAAG;yBADZ,YAQU,iBAAA;MANP,KAAK,IAAI;MACT,OAAO,IAAI;MACZ,SAAQ;MACP,MAAM,QAAA;;6BAEQ,CAAA,gBAAA,gBAAZ,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;uBAGhB,mBAIM,OAJN,YAIM,EAAA,UAAA,IAAA,GAHJ,mBAEU,UAAA,MAAA,WAFa,QAAA,WAAO,CAAA,IAAd,QAAG;wBAAnB,YAEU,iBAAA;KAF6B,KAAK,IAAI;KAAQ,OAAO,IAAI;;4BAClD,CAAA,gBAAA,gBAAZ,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { t as GrRadioGroup_default } from "./chunks/GrRadioGroup-
|
|
1
|
+
import { t as GrRadioGroup_default } from "./chunks/GrRadioGroup-nOdvfV_g.js";
|
|
2
2
|
import { t as grRadioGroupConfig } from "../../chunks/config-QaIc_gRa.js";
|
|
3
3
|
export { GrRadioGroup_default as GrRadioGroup, GrRadioGroup_default as default, grRadioGroupConfig };
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { t as useGranularityTranslations } from "../../../chunks/granularityI18n-DoV7Ca2m.js";
|
|
2
|
-
import {
|
|
2
|
+
import { n as useGrFormFieldContext } from "../../../chunks/context-DdNIxa1w.js";
|
|
3
|
+
import { t as GrInput_default } from "../../GrInput/chunks/GrInput-B8dd3JaA.js";
|
|
3
4
|
import { vClickOutside } from "../../../directives/clickOutside.js";
|
|
4
5
|
import { t as useFloating } from "../../../chunks/useFloating-DtM6TyE4.js";
|
|
5
6
|
import { t as useEscapeToClose } from "../../../chunks/useEscapeToClose-C2t_S1gh.js";
|
|
6
7
|
import { a as grSelectPanelClasses, i as grSelectNativeClass, n as grSelectLinkNativeLabelClass, o as grSelectTriggerClass, r as grSelectLinkNativeOverlayClass, s as linkBaseClass, t as defaultBaseClass } from "../../../chunks/grSelectStyles-CLK5hRd3.js";
|
|
7
|
-
import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, vShow, watch, withCtx, withDirectives,
|
|
8
|
+
import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, useId, vShow, watch, withCtx, withDirectives, withModifiers } from "vue";
|
|
8
9
|
//#region src/components/GrSelect/GrSelect.vue?vue&type=script&setup=true&lang.ts
|
|
9
10
|
var _hoisted_1 = [
|
|
11
|
+
"id",
|
|
10
12
|
"multiple",
|
|
11
13
|
"disabled",
|
|
12
|
-
"aria-label"
|
|
14
|
+
"aria-label",
|
|
15
|
+
"aria-invalid",
|
|
16
|
+
"aria-describedby",
|
|
17
|
+
"aria-required"
|
|
13
18
|
];
|
|
14
19
|
var _hoisted_2 = ["selected"];
|
|
15
20
|
var _hoisted_3 = ["value", "selected"];
|
|
@@ -30,8 +35,14 @@ var _hoisted_7 = {
|
|
|
30
35
|
class: "absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--muted-fg)] pointer-events-none"
|
|
31
36
|
};
|
|
32
37
|
var _hoisted_8 = [
|
|
38
|
+
"id",
|
|
33
39
|
"disabled",
|
|
34
40
|
"aria-label",
|
|
41
|
+
"aria-invalid",
|
|
42
|
+
"aria-describedby",
|
|
43
|
+
"aria-required",
|
|
44
|
+
"aria-controls",
|
|
45
|
+
"aria-activedescendant",
|
|
35
46
|
"aria-expanded"
|
|
36
47
|
];
|
|
37
48
|
var _hoisted_9 = { class: "min-w-0 flex-1" };
|
|
@@ -50,12 +61,14 @@ var _hoisted_13 = {
|
|
|
50
61
|
key: 0,
|
|
51
62
|
class: "p-2 border-b border-[var(--brd)]"
|
|
52
63
|
};
|
|
53
|
-
var _hoisted_14 = ["aria-multiselectable"];
|
|
64
|
+
var _hoisted_14 = ["id", "aria-multiselectable"];
|
|
54
65
|
var _hoisted_15 = [
|
|
66
|
+
"id",
|
|
55
67
|
"disabled",
|
|
56
68
|
"aria-selected",
|
|
57
69
|
"aria-disabled",
|
|
58
|
-
"onClick"
|
|
70
|
+
"onClick",
|
|
71
|
+
"onMousemove"
|
|
59
72
|
];
|
|
60
73
|
var _hoisted_16 = { class: "flex items-center gap-2 min-w-0" };
|
|
61
74
|
var _hoisted_17 = { class: "truncate" };
|
|
@@ -108,6 +121,11 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
108
121
|
const baseClassName = computed(() => props.view === "link" ? linkBaseClass : defaultBaseClass);
|
|
109
122
|
const rootClass = computed(() => props.view === "link" ? "relative inline-block align-baseline" : "relative w-full");
|
|
110
123
|
const emit = __emit;
|
|
124
|
+
const field = useGrFormFieldContext();
|
|
125
|
+
const resolvedId = computed(() => field?.id.value);
|
|
126
|
+
const isInvalid = computed(() => Boolean(field?.invalid.value));
|
|
127
|
+
const describedBy = computed(() => field?.describedById.value);
|
|
128
|
+
const isRequired = computed(() => Boolean(field?.required.value));
|
|
111
129
|
const optionsResolved = computed(() => props.options ?? []);
|
|
112
130
|
function isOptionGroup(item) {
|
|
113
131
|
return Array.isArray(item.options);
|
|
@@ -188,16 +206,6 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
188
206
|
watch(() => props.view, () => {
|
|
189
207
|
if (open.value) updateFloatingPosition();
|
|
190
208
|
});
|
|
191
|
-
watch(open, async (isOpen) => {
|
|
192
|
-
if (!isOpen) {
|
|
193
|
-
customValue.value = "";
|
|
194
|
-
return;
|
|
195
|
-
}
|
|
196
|
-
if (props.allowCustomValue) {
|
|
197
|
-
await nextTick();
|
|
198
|
-
customInputRef.value?.focus();
|
|
199
|
-
}
|
|
200
|
-
}, { immediate: true });
|
|
201
209
|
const panelClasses = computed(() => {
|
|
202
210
|
return grSelectPanelClasses;
|
|
203
211
|
});
|
|
@@ -290,6 +298,104 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
290
298
|
if (!v) return;
|
|
291
299
|
toggleValue(v);
|
|
292
300
|
}
|
|
301
|
+
const listboxId = useId();
|
|
302
|
+
const activeIndex = ref(-1);
|
|
303
|
+
function optionDomId(value) {
|
|
304
|
+
return `${listboxId}-opt-${value}`;
|
|
305
|
+
}
|
|
306
|
+
const navigableValues = computed(() => panelItems.value.filter((item) => item.kind === "option" && !item.option.disabled).map((item) => item.option.value));
|
|
307
|
+
const activeValue = computed(() => activeIndex.value >= 0 ? navigableValues.value[activeIndex.value] : void 0);
|
|
308
|
+
const activeDescendantId = computed(() => open.value && activeValue.value !== void 0 ? optionDomId(activeValue.value) : void 0);
|
|
309
|
+
function clampActive(index) {
|
|
310
|
+
const len = navigableValues.value.length;
|
|
311
|
+
if (len === 0) return -1;
|
|
312
|
+
return (index % len + len) % len;
|
|
313
|
+
}
|
|
314
|
+
async function scrollActiveIntoView() {
|
|
315
|
+
await nextTick();
|
|
316
|
+
const value = activeValue.value;
|
|
317
|
+
if (value === void 0) return;
|
|
318
|
+
document.getElementById(optionDomId(value))?.scrollIntoView?.({ block: "nearest" });
|
|
319
|
+
}
|
|
320
|
+
function setActive(index) {
|
|
321
|
+
activeIndex.value = clampActive(index);
|
|
322
|
+
scrollActiveIntoView();
|
|
323
|
+
}
|
|
324
|
+
function initActiveIndex() {
|
|
325
|
+
const selectedIdx = navigableValues.value.findIndex((v) => isSelected(v));
|
|
326
|
+
activeIndex.value = selectedIdx >= 0 ? selectedIdx : navigableValues.value.length ? 0 : -1;
|
|
327
|
+
}
|
|
328
|
+
function openDropdown() {
|
|
329
|
+
if (props.disabled || open.value) return;
|
|
330
|
+
open.value = true;
|
|
331
|
+
}
|
|
332
|
+
let typeaheadBuffer = "";
|
|
333
|
+
let typeaheadTimer = null;
|
|
334
|
+
function typeahead(char) {
|
|
335
|
+
typeaheadBuffer += char.toLowerCase();
|
|
336
|
+
if (typeaheadTimer) clearTimeout(typeaheadTimer);
|
|
337
|
+
typeaheadTimer = setTimeout(() => {
|
|
338
|
+
typeaheadBuffer = "";
|
|
339
|
+
}, 600);
|
|
340
|
+
const idx = navigableValues.value.findIndex((v) => {
|
|
341
|
+
return flatOptions.value.find((o) => o.value === v)?.label.toLowerCase().startsWith(typeaheadBuffer);
|
|
342
|
+
});
|
|
343
|
+
if (idx >= 0) setActive(idx);
|
|
344
|
+
}
|
|
345
|
+
function onComboKeydown(event) {
|
|
346
|
+
if (props.disabled) return;
|
|
347
|
+
if (!open.value) {
|
|
348
|
+
if ([
|
|
349
|
+
"ArrowDown",
|
|
350
|
+
"ArrowUp",
|
|
351
|
+
"Enter",
|
|
352
|
+
" "
|
|
353
|
+
].includes(event.key)) {
|
|
354
|
+
event.preventDefault();
|
|
355
|
+
openDropdown();
|
|
356
|
+
}
|
|
357
|
+
return;
|
|
358
|
+
}
|
|
359
|
+
switch (event.key) {
|
|
360
|
+
case "ArrowDown":
|
|
361
|
+
event.preventDefault();
|
|
362
|
+
setActive(activeIndex.value + 1);
|
|
363
|
+
break;
|
|
364
|
+
case "ArrowUp":
|
|
365
|
+
event.preventDefault();
|
|
366
|
+
setActive(activeIndex.value - 1);
|
|
367
|
+
break;
|
|
368
|
+
case "Home":
|
|
369
|
+
event.preventDefault();
|
|
370
|
+
setActive(0);
|
|
371
|
+
break;
|
|
372
|
+
case "End":
|
|
373
|
+
event.preventDefault();
|
|
374
|
+
setActive(navigableValues.value.length - 1);
|
|
375
|
+
break;
|
|
376
|
+
case "Enter":
|
|
377
|
+
event.preventDefault();
|
|
378
|
+
if (props.allowCustomValue && canAddCustom.value) addCustom();
|
|
379
|
+
else if (activeValue.value !== void 0) toggleValue(activeValue.value);
|
|
380
|
+
break;
|
|
381
|
+
case "Tab":
|
|
382
|
+
closeDropdown();
|
|
383
|
+
break;
|
|
384
|
+
default: if (!props.allowCustomValue && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) typeahead(event.key);
|
|
385
|
+
}
|
|
386
|
+
}
|
|
387
|
+
watch(open, async (isOpen) => {
|
|
388
|
+
if (!isOpen) {
|
|
389
|
+
customValue.value = "";
|
|
390
|
+
activeIndex.value = -1;
|
|
391
|
+
return;
|
|
392
|
+
}
|
|
393
|
+
initActiveIndex();
|
|
394
|
+
if (props.allowCustomValue) {
|
|
395
|
+
await nextTick();
|
|
396
|
+
customInputRef.value?.focus();
|
|
397
|
+
}
|
|
398
|
+
}, { immediate: true });
|
|
293
399
|
const showNativeChevron = computed(() => {
|
|
294
400
|
return effectiveOptionsView.value === "native" && props.view !== "link" && !props.multiple;
|
|
295
401
|
});
|
|
@@ -362,10 +468,14 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
362
468
|
class: normalizeClass(rootClass.value)
|
|
363
469
|
}, [
|
|
364
470
|
createElementVNode("select", {
|
|
471
|
+
id: resolvedId.value,
|
|
365
472
|
"data-gr-select-native": "",
|
|
366
473
|
multiple: __props.multiple,
|
|
367
474
|
disabled: __props.disabled,
|
|
368
475
|
"aria-label": __props.ariaLabel,
|
|
476
|
+
"aria-invalid": isInvalid.value ? "true" : void 0,
|
|
477
|
+
"aria-describedby": describedBy.value,
|
|
478
|
+
"aria-required": isRequired.value ? "true" : void 0,
|
|
369
479
|
class: normalizeClass(isLinkNative.value ? unref(grSelectLinkNativeOverlayClass) : [baseClassName.value, nativeClassName.value]),
|
|
370
480
|
onChange
|
|
371
481
|
}, [nativeClearOptionVisible.value ? (openBlock(), createElementBlock("option", {
|
|
@@ -412,16 +522,23 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
412
522
|
class: normalizeClass(rootClass.value)
|
|
413
523
|
}, [
|
|
414
524
|
createElementVNode("button", {
|
|
525
|
+
id: resolvedId.value,
|
|
415
526
|
"data-testid": "gr-select-trigger",
|
|
416
527
|
"data-gr-select-trigger": "",
|
|
417
528
|
type: "button",
|
|
418
529
|
disabled: __props.disabled,
|
|
419
530
|
"aria-label": __props.ariaLabel,
|
|
531
|
+
"aria-invalid": isInvalid.value ? "true" : void 0,
|
|
532
|
+
"aria-describedby": describedBy.value,
|
|
533
|
+
"aria-required": isRequired.value ? "true" : void 0,
|
|
420
534
|
role: "combobox",
|
|
421
|
-
"aria-
|
|
535
|
+
"aria-haspopup": "listbox",
|
|
536
|
+
"aria-controls": open.value ? unref(listboxId) : void 0,
|
|
537
|
+
"aria-activedescendant": activeDescendantId.value,
|
|
422
538
|
"aria-expanded": open.value ? "true" : "false",
|
|
423
539
|
class: normalizeClass([baseClassName.value, triggerClassName.value]),
|
|
424
|
-
onClick: toggleDropdown
|
|
540
|
+
onClick: toggleDropdown,
|
|
541
|
+
onKeydown: onComboKeydown
|
|
425
542
|
}, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "value", {
|
|
426
543
|
selectedOptions: selectedOptions.value,
|
|
427
544
|
selectedValues: selectedValues.value,
|
|
@@ -431,7 +548,7 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
431
548
|
}, () => [createElementVNode("span", { class: normalizeClass(["block truncate", !hasSelection.value ? "text-[var(--muted-fg)]" : ""]) }, toDisplayString(displayText.value), 3)])]), panelClearVisible.value ? (openBlock(), createElementBlock("span", _hoisted_10)) : (openBlock(), createElementBlock("span", _hoisted_11, [..._cache[2] || (_cache[2] = [createElementVNode("span", {
|
|
432
549
|
class: "i-lucide-chevron-down block h-4 w-4",
|
|
433
550
|
"aria-hidden": "true"
|
|
434
|
-
}, null, -1)])]))],
|
|
551
|
+
}, null, -1)])]))], 42, _hoisted_8),
|
|
435
552
|
panelClearVisible.value ? (openBlock(), createElementBlock("button", {
|
|
436
553
|
key: 0,
|
|
437
554
|
"data-testid": "gr-select-clear",
|
|
@@ -468,12 +585,9 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
468
585
|
type: "text",
|
|
469
586
|
placeholder: resolvedCustomValuePlaceholder.value,
|
|
470
587
|
size: "sm",
|
|
471
|
-
onKeydown:
|
|
472
|
-
}, null, 8, [
|
|
473
|
-
|
|
474
|
-
"placeholder",
|
|
475
|
-
"onKeydown"
|
|
476
|
-
])])) : createCommentVNode("", true), createElementVNode("div", {
|
|
588
|
+
onKeydown: onComboKeydown
|
|
589
|
+
}, null, 8, ["modelValue", "placeholder"])])) : createCommentVNode("", true), createElementVNode("div", {
|
|
590
|
+
id: unref(listboxId),
|
|
477
591
|
"data-gr-select-listbox": "",
|
|
478
592
|
class: "p-1 overflow-auto",
|
|
479
593
|
style: normalizeStyle({ maxHeight: `${__props.dropdownMaxHeight}px` }),
|
|
@@ -494,21 +608,27 @@ var GrSelect_default = /* @__PURE__ */ defineComponent({
|
|
|
494
608
|
class: normalizeClass(["px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-fg)]", [__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : ""]])
|
|
495
609
|
}, toDisplayString(item.label), 3)) : (openBlock(), createElementBlock("button", {
|
|
496
610
|
key: 1,
|
|
611
|
+
id: optionDomId(item.option.value),
|
|
497
612
|
"data-gr-select-option": "",
|
|
498
613
|
type: "button",
|
|
499
614
|
role: "option",
|
|
500
615
|
disabled: item.option.disabled,
|
|
501
616
|
"aria-selected": isSelected(item.option.value) ? "true" : "false",
|
|
502
617
|
"aria-disabled": item.option.disabled ? "true" : void 0,
|
|
503
|
-
class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
|
|
504
|
-
|
|
618
|
+
class: normalizeClass(["rounded-[10px] px-3 py-2 text-left text-[13px]", [
|
|
619
|
+
__props.view === "link" ? "block min-w-full w-max whitespace-nowrap" : "w-full",
|
|
620
|
+
item.option.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]",
|
|
621
|
+
activeValue.value === item.option.value && !item.option.disabled ? "bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]" : ""
|
|
622
|
+
]]),
|
|
623
|
+
onClick: ($event) => toggleValue(item.option.value),
|
|
624
|
+
onMousemove: ($event) => activeIndex.value = navigableValues.value.indexOf(item.option.value)
|
|
505
625
|
}, [renderSlot(_ctx.$slots, "option", {
|
|
506
626
|
option: item.option,
|
|
507
627
|
selected: isSelected(item.option.value)
|
|
508
628
|
}, () => [createElementVNode("span", _hoisted_16, [createElementVNode("span", {
|
|
509
629
|
class: normalizeClass(["inline-block h-4 w-4 shrink-0", isSelected(item.option.value) ? "i-lucide-check text-[var(--primary)]" : ""]),
|
|
510
630
|
"aria-hidden": "true"
|
|
511
|
-
}, null, 2), createElementVNode("span", _hoisted_17, toDisplayString(item.option.label), 1)])])],
|
|
631
|
+
}, null, 2), createElementVNode("span", _hoisted_17, toDisplayString(item.option.label), 1)])])], 42, _hoisted_15))], 64);
|
|
512
632
|
}), 128))], 12, _hoisted_14)], 2)], 4), [[vShow, open.value]])]),
|
|
513
633
|
_: 3
|
|
514
634
|
})]))
|