@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,188 +0,0 @@
|
|
|
1
|
-
import { n as useAddonMeasurement, t as addLen } from "../../../chunks/useAddonMeasurement-DM0akF4C.js";
|
|
2
|
-
import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, useSlots } from "vue";
|
|
3
|
-
//#region src/components/GrInput/GrInput.vue?vue&type=script&setup=true&lang.ts
|
|
4
|
-
var _hoisted_1 = [
|
|
5
|
-
"id",
|
|
6
|
-
"name",
|
|
7
|
-
"type",
|
|
8
|
-
"inputmode",
|
|
9
|
-
"autocomplete",
|
|
10
|
-
"placeholder",
|
|
11
|
-
"disabled",
|
|
12
|
-
"value",
|
|
13
|
-
"aria-invalid"
|
|
14
|
-
];
|
|
15
|
-
//#endregion
|
|
16
|
-
//#region src/components/GrInput/GrInput.vue
|
|
17
|
-
var GrInput_default = /* @__PURE__ */ defineComponent({
|
|
18
|
-
inheritAttrs: false,
|
|
19
|
-
__name: "GrInput",
|
|
20
|
-
props: {
|
|
21
|
-
modelValue: {},
|
|
22
|
-
type: { default: "text" },
|
|
23
|
-
placeholder: { default: void 0 },
|
|
24
|
-
autocomplete: { default: void 0 },
|
|
25
|
-
inputmode: { default: void 0 },
|
|
26
|
-
disabled: {
|
|
27
|
-
type: Boolean,
|
|
28
|
-
default: false
|
|
29
|
-
},
|
|
30
|
-
invalid: {
|
|
31
|
-
type: Boolean,
|
|
32
|
-
default: false
|
|
33
|
-
},
|
|
34
|
-
state: { default: "default" },
|
|
35
|
-
name: { default: void 0 },
|
|
36
|
-
id: { default: void 0 },
|
|
37
|
-
size: { default: "md" },
|
|
38
|
-
textAlign: { default: "left" },
|
|
39
|
-
prefixMinWidth: { default: void 0 },
|
|
40
|
-
prefixMaxWidth: { default: void 0 },
|
|
41
|
-
suffixMinWidth: { default: void 0 },
|
|
42
|
-
suffixMaxWidth: { default: void 0 },
|
|
43
|
-
prefixFixed: {
|
|
44
|
-
type: Boolean,
|
|
45
|
-
default: false
|
|
46
|
-
},
|
|
47
|
-
suffixFixed: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: false
|
|
50
|
-
}
|
|
51
|
-
},
|
|
52
|
-
emits: ["update:modelValue"],
|
|
53
|
-
setup(__props, { expose: __expose, emit: __emit }) {
|
|
54
|
-
const props = __props;
|
|
55
|
-
const emit = __emit;
|
|
56
|
-
const inputEl = ref(null);
|
|
57
|
-
function focus() {
|
|
58
|
-
inputEl.value?.focus();
|
|
59
|
-
}
|
|
60
|
-
__expose({ focus });
|
|
61
|
-
const slots = useSlots();
|
|
62
|
-
const hasPrefix = computed(() => Boolean(slots.prefix));
|
|
63
|
-
const hasSuffix = computed(() => Boolean(slots.suffix));
|
|
64
|
-
const defaultAddonMinWidth = computed(() => {
|
|
65
|
-
return {
|
|
66
|
-
xs: "2rem",
|
|
67
|
-
sm: "2.25rem",
|
|
68
|
-
md: "2.5rem",
|
|
69
|
-
lg: "3rem"
|
|
70
|
-
}[props.size];
|
|
71
|
-
});
|
|
72
|
-
const prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value);
|
|
73
|
-
const suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value);
|
|
74
|
-
const prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value);
|
|
75
|
-
const suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value);
|
|
76
|
-
const { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix);
|
|
77
|
-
const basePaddingXLen = computed(() => {
|
|
78
|
-
return {
|
|
79
|
-
xs: "10px",
|
|
80
|
-
sm: "12px",
|
|
81
|
-
md: "12px",
|
|
82
|
-
lg: "16px"
|
|
83
|
-
}[props.size];
|
|
84
|
-
});
|
|
85
|
-
const inputStyle = computed(() => {
|
|
86
|
-
const leftReserved = hasPrefix.value ? props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value : "0px";
|
|
87
|
-
const rightReserved = hasSuffix.value ? props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value : "0px";
|
|
88
|
-
return {
|
|
89
|
-
paddingLeft: hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : void 0,
|
|
90
|
-
paddingRight: hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : void 0
|
|
91
|
-
};
|
|
92
|
-
});
|
|
93
|
-
const prefixStyle = computed(() => {
|
|
94
|
-
if (props.prefixFixed) return {
|
|
95
|
-
width: prefixFixedWidth.value,
|
|
96
|
-
minWidth: prefixFixedWidth.value,
|
|
97
|
-
maxWidth: prefixFixedWidth.value
|
|
98
|
-
};
|
|
99
|
-
return {
|
|
100
|
-
minWidth: prefixMinWidth.value,
|
|
101
|
-
maxWidth: props.prefixMaxWidth
|
|
102
|
-
};
|
|
103
|
-
});
|
|
104
|
-
const suffixStyle = computed(() => {
|
|
105
|
-
if (props.suffixFixed) return {
|
|
106
|
-
width: suffixFixedWidth.value,
|
|
107
|
-
minWidth: suffixFixedWidth.value,
|
|
108
|
-
maxWidth: suffixFixedWidth.value
|
|
109
|
-
};
|
|
110
|
-
return {
|
|
111
|
-
minWidth: suffixMinWidth.value,
|
|
112
|
-
maxWidth: props.suffixMaxWidth
|
|
113
|
-
};
|
|
114
|
-
});
|
|
115
|
-
const sizeClass = computed(() => {
|
|
116
|
-
return {
|
|
117
|
-
xs: "h-7 px-2.5 text-[12px]",
|
|
118
|
-
sm: "h-8 px-3 text-[13px]",
|
|
119
|
-
md: "h-10 px-3 text-[14px]",
|
|
120
|
-
lg: "h-11 px-4 text-[16px]"
|
|
121
|
-
}[props.size];
|
|
122
|
-
});
|
|
123
|
-
const textAlignClass = computed(() => {
|
|
124
|
-
return {
|
|
125
|
-
left: "text-left",
|
|
126
|
-
center: "text-center",
|
|
127
|
-
right: "text-right"
|
|
128
|
-
}[props.textAlign];
|
|
129
|
-
});
|
|
130
|
-
const shellClass = computed(() => {
|
|
131
|
-
const state = props.state;
|
|
132
|
-
const borderByState = {
|
|
133
|
-
default: "border-[var(--brd)]",
|
|
134
|
-
success: "border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]",
|
|
135
|
-
warning: "border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]",
|
|
136
|
-
danger: "border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]"
|
|
137
|
-
};
|
|
138
|
-
return [props.invalid ? borderByState.danger : borderByState[state], props.disabled ? "opacity-50 cursor-not-allowed" : ""].filter(Boolean).join(" ");
|
|
139
|
-
});
|
|
140
|
-
const className = computed(() => {
|
|
141
|
-
return [sizeClass.value, textAlignClass.value].join(" ");
|
|
142
|
-
});
|
|
143
|
-
function onInput(e) {
|
|
144
|
-
emit("update:modelValue", e.target.value);
|
|
145
|
-
}
|
|
146
|
-
return (_ctx, _cache) => {
|
|
147
|
-
return openBlock(), createElementBlock("div", { class: normalizeClass(["relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", shellClass.value]) }, [
|
|
148
|
-
_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
|
|
149
|
-
key: 0,
|
|
150
|
-
ref_key: "prefixEl",
|
|
151
|
-
ref: prefixEl,
|
|
152
|
-
"data-testid": "gr-input-prefix",
|
|
153
|
-
class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
|
|
154
|
-
style: normalizeStyle(prefixStyle.value),
|
|
155
|
-
"aria-hidden": "true"
|
|
156
|
-
}, [renderSlot(_ctx.$slots, "prefix")], 4)) : createCommentVNode("", true),
|
|
157
|
-
createElementVNode("input", mergeProps({
|
|
158
|
-
id: props.id,
|
|
159
|
-
ref_key: "inputEl",
|
|
160
|
-
ref: inputEl
|
|
161
|
-
}, _ctx.$attrs, {
|
|
162
|
-
name: props.name,
|
|
163
|
-
type: props.type,
|
|
164
|
-
inputmode: props.inputmode,
|
|
165
|
-
autocomplete: props.autocomplete,
|
|
166
|
-
placeholder: props.placeholder,
|
|
167
|
-
disabled: props.disabled,
|
|
168
|
-
value: props.modelValue,
|
|
169
|
-
"aria-invalid": props.invalid ? "true" : void 0,
|
|
170
|
-
class: ["w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", className.value],
|
|
171
|
-
style: inputStyle.value,
|
|
172
|
-
onInput
|
|
173
|
-
}), null, 16, _hoisted_1),
|
|
174
|
-
_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
|
|
175
|
-
key: 1,
|
|
176
|
-
ref_key: "suffixEl",
|
|
177
|
-
ref: suffixEl,
|
|
178
|
-
"data-testid": "gr-input-suffix",
|
|
179
|
-
class: normalizeClass(["absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
|
|
180
|
-
style: normalizeStyle(suffixStyle.value),
|
|
181
|
-
"aria-hidden": "true"
|
|
182
|
-
}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true)
|
|
183
|
-
], 2);
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
});
|
|
187
|
-
//#endregion
|
|
188
|
-
export { GrInput_default as t };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrInput-C8pOJgCi.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrInput/GrInput.vue","../../../../src/components/GrInput/GrInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string\n type?: 'text' | 'email' | 'password' | 'number' | 'search'\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n invalid?: boolean\n state?: 'default' | 'success' | 'warning' | 'danger'\n name?: string\n id?: string\n size?: GrInputSize\n\n textAlign?: GrInputTextAlign\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n * под контент (в пределах min/max), а излишек клипается оболочкой.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n }>(),\n {\n type: 'text',\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n },\n)\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '2rem', // w-8\n sm: '2.25rem', // w-9\n md: '2.5rem', // w-10\n lg: '3rem', // w-12\n }\n\n return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '10px', // px-2.5\n sm: '12px', // px-3\n md: '12px', // px-3\n lg: '16px', // px-4\n }\n\n return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n const leftReserved = hasPrefix.value\n ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n : '0px'\n const rightReserved = hasSuffix.value\n ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n : '0px'\n\n // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: 'h-7 px-2.5 text-[12px]',\n sm: 'h-8 px-3 text-[13px]',\n md: 'h-10 px-3 text-[14px]',\n lg: 'h-11 px-4 text-[16px]',\n }\n\n return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n const map: Record<NonNullable<typeof props.textAlign>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n }\n\n return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n const state = props.state\n\n const borderByState: Record<typeof state, string> = {\n default: 'border-[var(--brd)]',\n success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n }\n\n return [\n props.invalid ? borderByState.danger : borderByState[state],\n props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n return [\n sizeClass.value,\n textAlignClass.value,\n ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n <div\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClass\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"gr-input-prefix\"\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"props.id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"props.name\"\n :type=\"props.type\"\n :inputmode=\"props.inputmode\"\n :autocomplete=\"props.autocomplete\"\n :placeholder=\"props.placeholder\"\n :disabled=\"props.disabled\"\n :value=\"props.modelValue\"\n :aria-invalid=\"props.invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"className\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"gr-input-suffix\"\n class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n defineProps<{\n modelValue: string\n type?: 'text' | 'email' | 'password' | 'number' | 'search'\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n invalid?: boolean\n state?: 'default' | 'success' | 'warning' | 'danger'\n name?: string\n id?: string\n size?: GrInputSize\n\n textAlign?: GrInputTextAlign\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n * под контент (в пределах min/max), а излишек клипается оболочкой.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n }>(),\n {\n type: 'text',\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n },\n)\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '2rem', // w-8\n sm: '2.25rem', // w-9\n md: '2.5rem', // w-10\n lg: '3rem', // w-12\n }\n\n return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: '10px', // px-2.5\n sm: '12px', // px-3\n md: '12px', // px-3\n lg: '16px', // px-4\n }\n\n return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n const leftReserved = hasPrefix.value\n ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n : '0px'\n const rightReserved = hasSuffix.value\n ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n : '0px'\n\n // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n } as Record<string, string | undefined>\n }\n\n return {\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n const map: Record<NonNullable<typeof props.size>, string> = {\n xs: 'h-7 px-2.5 text-[12px]',\n sm: 'h-8 px-3 text-[13px]',\n md: 'h-10 px-3 text-[14px]',\n lg: 'h-11 px-4 text-[16px]',\n }\n\n return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n const map: Record<NonNullable<typeof props.textAlign>, string> = {\n left: 'text-left',\n center: 'text-center',\n right: 'text-right',\n }\n\n return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n const state = props.state\n\n const borderByState: Record<typeof state, string> = {\n default: 'border-[var(--brd)]',\n success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n }\n\n return [\n props.invalid ? borderByState.danger : borderByState[state],\n props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n return [\n sizeClass.value,\n textAlignClass.value,\n ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n <div\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClass\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"gr-input-prefix\"\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"props.id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"props.name\"\n :type=\"props.type\"\n :inputmode=\"props.inputmode\"\n :autocomplete=\"props.autocomplete\"\n :placeholder=\"props.placeholder\"\n :disabled=\"props.disabled\"\n :value=\"props.modelValue\"\n :aria-invalid=\"props.invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"className\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"gr-input-suffix\"\n class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrModal-BkjW9jZS.js","names":["$slots"],"sources":["../../../../src/components/GrModal/grModalEscStack.ts","../../../../src/components/GrModal/grModalTopStack.ts","../../../../src/components/GrModal/GrModal.vue","../../../../src/components/GrModal/GrModal.vue"],"sourcesContent":["/**\n * grModalEscStack — общий стек открытых `GrModal` для корректной обработки Esc.\n *\n * Зачем нужен:\n * HeadlessUI вешает обработчик Escape на `window` у каждого открытого `<Dialog>`.\n * Когда модалки рендерятся в разных деревьях приложения (например, диалоги\n * `useDialogService` монтируются отдельным `render()` в `document.body`), их\n * HeadlessUI-стек не общий, и каждый `<Dialog>` считает себя верхним. В итоге\n * Esc перехватывает обработчик той модалки, что смонтирована раньше (нижней),\n * а реально верхнее окно (последнее открытое) остаётся.\n *\n * Решение: единый capture-обработчик на `window`, который срабатывает раньше\n * обработчиков HeadlessUI, гасит событие (`stopImmediatePropagation`) и\n * закрывает только верхнюю (последнюю зарегистрированную) модалку. Так Esc\n * всегда адресуется верхнему окну независимо от дерева рендера.\n */\n\nexport interface GrModalEscEntry {\n /** Уникальный id зарегистрированной модалки. */\n id: number\n /** Должна ли модалка закрываться по Esc (реактивный геттер `closeOnEsc`). */\n shouldClose: () => boolean\n /** Закрыть модалку (эмит `update:modelValue=false`). */\n close: () => void\n}\n\nconst stack: GrModalEscEntry[] = []\nlet listening = false\nlet nextId = 1\n\nfunction handleKeydown(event: KeyboardEvent): void {\n if (event.key !== 'Escape') return\n if (stack.length === 0) return\n\n // Верхняя модалка — последняя зарегистрированная.\n const top = stack[stack.length - 1]\n\n // Перехватываем Esc раньше HeadlessUI и нижних модалок: даже если верхнее\n // окно не закрывается (`closeOnEsc=false`), событие не должно «проваливаться»\n // к нижним окнам.\n event.preventDefault()\n event.stopPropagation()\n if (typeof event.stopImmediatePropagation === 'function')\n event.stopImmediatePropagation()\n\n if (top.shouldClose()) top.close()\n}\n\nfunction startListening(): void {\n if (listening) return\n if (typeof window === 'undefined') return\n // Capture-фаза, чтобы опередить window-обработчик Escape HeadlessUI.\n window.addEventListener('keydown', handleKeydown, true)\n listening = true\n}\n\nfunction stopListening(): void {\n if (!listening) return\n if (typeof window === 'undefined') return\n window.removeEventListener('keydown', handleKeydown, true)\n listening = false\n}\n\n/** Регистрирует открытую модалку как верхнюю и возвращает её id. */\nexport function pushGrModalEsc(entry: Omit<GrModalEscEntry, 'id'>): number {\n const id = nextId++\n stack.push({ ...entry, id })\n startListening()\n return id\n}\n\n/** Снимает модалку со стека (при закрытии или размонтировании). */\nexport function removeGrModalEsc(id: number): void {\n const index = stack.findIndex(item => item.id === id)\n if (index >= 0) stack.splice(index, 1)\n if (stack.length === 0) stopListening()\n}\n\n/** Тестовая/служебная очистка стека. */\nexport function resetGrModalEscStack(): void {\n stack.splice(0, stack.length)\n stopListening()\n}\n","/**\n * grModalTopStack — общий стек открытых `GrModal` для вычисления «верхнего»\n * (последнего открытого) окна независимо от дерева рендера.\n *\n * Зачем нужен:\n * HeadlessUI ловит фокус (`FocusTrap` с `FocusLock`) у каждого открытого\n * `<Dialog>` и помечает остальную часть страницы как inert. Когда модалки\n * рендерятся в разных деревьях (например, диалоги `useDialogService`\n * монтируются отдельным `render()` в `document.body`), их HeadlessUI-стек не\n * общий: каждый `<Dialog>` считает себя верхним и продолжает удерживать фокус.\n * В итоге нижнее окно «ворует» фокус у верхнего диалога — нельзя, например,\n * сфокусировать input в открытом поверх `prompt`.\n *\n * Решение: единый стек регистраций. Верхней считается последняя\n * зарегистрированная модалка. Все нижние окна уведомляются (`setTopmost(false)`)\n * и помечают свой корень `inert`, освобождая фокус для верхнего окна. Когда\n * верхнее окно закрывается, следующая по стеку модалка снова становится\n * верхней (`setTopmost(true)`) и снимает `inert`.\n */\n\nexport interface GrModalTopEntry {\n /** Уникальный id зарегистрированной модалки. */\n id: number\n /** Колбэк-уведомление: является ли модалка сейчас верхней. */\n setTopmost: (isTopmost: boolean) => void\n}\n\nconst stack: GrModalTopEntry[] = []\nlet nextId = 1\n\n/** Пересчитывает «верхнее» окно и уведомляет все зарегистрированные модалки. */\nfunction sync(): void {\n const lastIndex = stack.length - 1\n stack.forEach((entry, index) => entry.setTopmost(index === lastIndex))\n}\n\n/** Регистрирует открытую модалку как верхнюю и возвращает её id. */\nexport function pushGrModalTop(entry: Omit<GrModalTopEntry, 'id'>): number {\n const id = nextId++\n stack.push({ ...entry, id })\n sync()\n return id\n}\n\n/** Снимает модалку со стека (при закрытии или размонтировании). */\nexport function removeGrModalTop(id: number): void {\n const index = stack.findIndex(item => item.id === id)\n if (index >= 0) stack.splice(index, 1)\n sync()\n}\n\n/** Тестовая/служебная очистка стека. */\nexport function resetGrModalTopStack(): void {\n stack.splice(0, stack.length)\n}\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n * `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n * `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\n\nimport {\n type GrModalSize,\n getGrModalPanelClass,\n layout,\n overlay as overlayClass,\n overlayTransition,\n panelTransition,\n root as rootClass,\n shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n modelValue: boolean\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n closeOnBackdrop: true,\n closeOnEsc: true,\n size: 'md',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n const reason = closeReason.value\n closeReason.value = null\n\n if (reason === 'esc') {\n if (props.closeOnEsc) close()\n return\n }\n\n // По умолчанию (клик по оверлею или программный вызов `@close`)\n // уважаем `closeOnBackdrop`.\n if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n if (escEntryId !== null) return\n escEntryId = pushGrModalEsc({\n shouldClose: () => props.closeOnEsc,\n close,\n })\n}\n\nfunction unregisterEsc(): void {\n if (escEntryId === null) return\n removeGrModalEsc(escEntryId)\n escEntryId = null\n}\n\nfunction registerTop(): void {\n if (topEntryId !== null) return\n topEntryId = pushGrModalTop({\n setTopmost: (value) => { isTopmost.value = value },\n })\n}\n\nfunction unregisterTop(): void {\n if (topEntryId === null) return\n removeGrModalTop(topEntryId)\n topEntryId = null\n isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится —\n// для GR-примитива это мешающий UX.\nlet savedBodyOverflow: string | null = null\n\nfunction lockBodyScroll(): void {\n if (!isClient) return\n if (savedBodyOverflow !== null) return\n savedBodyOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n}\n\nfunction unlockBodyScroll(): void {\n if (!isClient) return\n if (savedBodyOverflow === null) return\n document.body.style.overflow = savedBodyOverflow\n savedBodyOverflow = null\n}\n\nwatch(\n () => props.modelValue,\n (value) => {\n if (value) {\n lockBodyScroll()\n registerEsc()\n registerTop()\n }\n else {\n unlockBodyScroll()\n unregisterEsc()\n unregisterTop()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n unlockBodyScroll()\n unregisterEsc()\n unregisterTop()\n})\n\n</script>\n\n<template>\n <teleport to=\"body\" :disabled=\"!isClient\">\n <TransitionRoot :show=\"modelValue\" as=\"template\">\n <Dialog\n as=\"div\"\n :class=\"rootClass\"\n :initial-focus=\"panelRef\"\n :inert=\"inertAttr\"\n @close=\"onDialogClose\"\n @keydown.capture=\"onRootKeydown\"\n >\n <div :class=\"shell\">\n <div :class=\"layout\">\n <TransitionChild\n as=\"template\"\n :enter=\"overlayTransition.enter\"\n :enter-from=\"overlayTransition.enterFrom\"\n :enter-to=\"overlayTransition.enterTo\"\n :leave=\"overlayTransition.leave\"\n :leave-from=\"overlayTransition.leaveFrom\"\n :leave-to=\"overlayTransition.leaveTo\"\n >\n <div\n data-gr-modal-overlay\n :class=\"overlayClass\"\n aria-hidden=\"true\"\n @pointerdown=\"onOverlayPointerDown\"\n />\n </TransitionChild>\n\n <TransitionChild\n as=\"template\"\n :enter=\"panelTransition.enter\"\n :enter-from=\"panelTransition.enterFrom\"\n :enter-to=\"panelTransition.enterTo\"\n :leave=\"panelTransition.leave\"\n :leave-from=\"panelTransition.leaveFrom\"\n :leave-to=\"panelTransition.leaveTo\"\n >\n <DialogPanel\n ref=\"panelRef\"\n data-gr-modal-panel\n tabindex=\"-1\"\n :class=\"panelClass\"\n >\n <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n <slot name=\"title\" />\n </DialogTitle>\n <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n <slot name=\"description\" />\n </DialogDescription>\n <slot />\n </DialogPanel>\n </TransitionChild>\n </div>\n </div>\n </Dialog>\n </TransitionRoot>\n </teleport>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n * `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n * `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\n\nimport {\n type GrModalSize,\n getGrModalPanelClass,\n layout,\n overlay as overlayClass,\n overlayTransition,\n panelTransition,\n root as rootClass,\n shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n modelValue: boolean\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n closeOnBackdrop: true,\n closeOnEsc: true,\n size: 'md',\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n const reason = closeReason.value\n closeReason.value = null\n\n if (reason === 'esc') {\n if (props.closeOnEsc) close()\n return\n }\n\n // По умолчанию (клик по оверлею или программный вызов `@close`)\n // уважаем `closeOnBackdrop`.\n if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n if (escEntryId !== null) return\n escEntryId = pushGrModalEsc({\n shouldClose: () => props.closeOnEsc,\n close,\n })\n}\n\nfunction unregisterEsc(): void {\n if (escEntryId === null) return\n removeGrModalEsc(escEntryId)\n escEntryId = null\n}\n\nfunction registerTop(): void {\n if (topEntryId !== null) return\n topEntryId = pushGrModalTop({\n setTopmost: (value) => { isTopmost.value = value },\n })\n}\n\nfunction unregisterTop(): void {\n if (topEntryId === null) return\n removeGrModalTop(topEntryId)\n topEntryId = null\n isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится —\n// для GR-примитива это мешающий UX.\nlet savedBodyOverflow: string | null = null\n\nfunction lockBodyScroll(): void {\n if (!isClient) return\n if (savedBodyOverflow !== null) return\n savedBodyOverflow = document.body.style.overflow\n document.body.style.overflow = 'hidden'\n}\n\nfunction unlockBodyScroll(): void {\n if (!isClient) return\n if (savedBodyOverflow === null) return\n document.body.style.overflow = savedBodyOverflow\n savedBodyOverflow = null\n}\n\nwatch(\n () => props.modelValue,\n (value) => {\n if (value) {\n lockBodyScroll()\n registerEsc()\n registerTop()\n }\n else {\n unlockBodyScroll()\n unregisterEsc()\n unregisterTop()\n }\n },\n { immediate: true },\n)\n\nonBeforeUnmount(() => {\n unlockBodyScroll()\n unregisterEsc()\n unregisterTop()\n})\n\n</script>\n\n<template>\n <teleport to=\"body\" :disabled=\"!isClient\">\n <TransitionRoot :show=\"modelValue\" as=\"template\">\n <Dialog\n as=\"div\"\n :class=\"rootClass\"\n :initial-focus=\"panelRef\"\n :inert=\"inertAttr\"\n @close=\"onDialogClose\"\n @keydown.capture=\"onRootKeydown\"\n >\n <div :class=\"shell\">\n <div :class=\"layout\">\n <TransitionChild\n as=\"template\"\n :enter=\"overlayTransition.enter\"\n :enter-from=\"overlayTransition.enterFrom\"\n :enter-to=\"overlayTransition.enterTo\"\n :leave=\"overlayTransition.leave\"\n :leave-from=\"overlayTransition.leaveFrom\"\n :leave-to=\"overlayTransition.leaveTo\"\n >\n <div\n data-gr-modal-overlay\n :class=\"overlayClass\"\n aria-hidden=\"true\"\n @pointerdown=\"onOverlayPointerDown\"\n />\n </TransitionChild>\n\n <TransitionChild\n as=\"template\"\n :enter=\"panelTransition.enter\"\n :enter-from=\"panelTransition.enterFrom\"\n :enter-to=\"panelTransition.enterTo\"\n :leave=\"panelTransition.leave\"\n :leave-from=\"panelTransition.leaveFrom\"\n :leave-to=\"panelTransition.leaveTo\"\n >\n <DialogPanel\n ref=\"panelRef\"\n data-gr-modal-panel\n tabindex=\"-1\"\n :class=\"panelClass\"\n >\n <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n <slot name=\"title\" />\n </DialogTitle>\n <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n <slot name=\"description\" />\n </DialogDescription>\n <slot />\n </DialogPanel>\n </TransitionChild>\n </div>\n </div>\n </Dialog>\n </TransitionRoot>\n </teleport>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrNumberInput-CldPIWQx.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrNumberInput/GrNumberInput.vue","../../../../src/components/GrNumberInput/GrNumberInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { InputHTMLAttributes } from 'vue'\nimport { computed, ref, useSlots } from 'vue'\n\nimport {\n grNumberInputInputClass,\n grNumberInputShellClass,\n type GrNumberInputControlsDirection,\n type GrNumberInputSize,\n type GrNumberInputState,\n type GrNumberInputTextAlign,\n} from './grNumberInputStyles'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { addLen, useAddonMeasurement } from '../../composables/internal/useAddonMeasurement'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst ADDON_PX_BY_SIZE: Record<GrNumberInputSize, number> = {\n xs: 32,\n sm: 36,\n md: 40,\n lg: 48,\n}\n\nconst BASE_PADDING_X_LEN_BY_SIZE: Record<GrNumberInputSize, string> = {\n xs: '10px',\n sm: '12px',\n md: '12px',\n lg: '16px',\n}\n\nfunction px(n: number): string {\n return `${n}px`\n}\n\nexport interface GrNumberInputProps {\n /** Значение (строка — контролируем форматирование внутри). */\n modelValue: string\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n /** Быстрый флаг невалидности; эквивалент `state='danger'` + `aria-invalid`. */\n invalid?: boolean\n state?: GrNumberInputState\n name?: string\n id?: string\n size?: GrNumberInputSize\n\n textAlign?: GrNumberInputTextAlign\n\n decimalSeparator?: string\n step?: number\n min?: number\n max?: number\n precision?: number\n\n /** Показывать кнопки +/-. */\n controls?: boolean\n controlsDirection?: GrNumberInputControlsDirection\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: жёсткая ширина (из `*MaxWidth` →\n * `*MinWidth` → дефолт) + обрезка контента по краю (prefix — справа,\n * suffix — слева). По умолчанию аддоны растягиваются под контент.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n\n /** i18n-friendly aria-label для кнопки \"увеличить\". */\n increaseLabel?: string\n /** i18n-friendly aria-label для кнопки \"уменьшить\". */\n decreaseLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrNumberInputProps>(), {\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: 'decimal',\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n decimalSeparator: '.',\n step: 1,\n min: undefined,\n max: undefined,\n precision: undefined,\n\n controls: false,\n controlsDirection: 'vertical',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n\n increaseLabel: undefined,\n decreaseLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n (e: 'change', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst { t } = useGranularityTranslations()\nconst resolvedIncreaseLabel = computed(() => props.increaseLabel ?? t('gr.numberInput.increase', 'Increase'))\nconst resolvedDecreaseLabel = computed(() => props.decreaseLabel ?? t('gr.numberInput.decrease', 'Decrease'))\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst hasHorizontalControls = computed(() => props.controls && props.controlsDirection === 'horizontal')\nconst hasVerticalControls = computed(() => props.controls && props.controlsDirection === 'vertical')\n\nconst addonPx = computed(() => ADDON_PX_BY_SIZE[props.size])\nconst addonLen = computed(() => px(addonPx.value))\nconst basePaddingXLen = computed(() => BASE_PADDING_X_LEN_BY_SIZE[props.size])\n\nconst defaultAddonMinWidth = computed(() => addonLen.value)\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst prefixLen = computed(() => {\n if (!hasPrefix.value) return '0px'\n return props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value\n})\nconst suffixLen = computed(() => {\n if (!hasSuffix.value) return '0px'\n return props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value\n})\n\nfunction addonStyle(side: 'left' | 'right', offset: string): Record<string, string> {\n return {\n width: addonLen.value,\n [side]: offset,\n }\n}\n\nconst inputStyle = computed(() => {\n const leftControls = hasHorizontalControls.value ? addonLen.value : '0px'\n const rightControlsCount = (hasHorizontalControls.value ? 1 : 0) + (hasVerticalControls.value ? 1 : 0)\n const rightControls = rightControlsCount > 0 ? px(addonPx.value * rightControlsCount) : '0px'\n\n const leftReserved = addLen(prefixLen.value, leftControls)\n const rightReserved = addLen(suffixLen.value, rightControls)\n\n const left = hasPrefix.value || hasHorizontalControls.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value || rightControlsCount > 0 ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n right: '0px',\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n }\n }\n\n return {\n right: '0px',\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n }\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n }\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n }\n})\n\nconst verticalControlsStyle = computed(() => addonStyle('right', suffixLen.value))\nconst horizontalLeftControlsStyle = computed(() => addonStyle('left', prefixLen.value))\nconst horizontalRightControlsStyle = computed(() => addonStyle('right', suffixLen.value))\n\nconst shellClassName = computed(() => {\n return grNumberInputShellClass({\n disabled: props.disabled,\n state: props.invalid ? 'danger' : props.state,\n })\n})\n\nconst inputClassName = computed(() => {\n return grNumberInputInputClass({\n size: props.size,\n textAlign: props.textAlign,\n })\n})\n\nfunction isDigit(ch: string): boolean {\n return ch >= '0' && ch <= '9'\n}\n\nfunction sanitize(raw: string): string {\n const sep = props.decimalSeparator || '.'\n\n let out = ''\n let hasSepLocal = false\n\n for (let i = 0; i < raw.length; i++) {\n const ch = raw[i]\n if (isDigit(ch)) {\n out += ch\n continue\n }\n\n if ((ch === sep || ch === '.' || ch === ',') && !hasSepLocal) {\n out += sep\n hasSepLocal = true\n }\n }\n\n return out\n}\n\nfunction toNumber(value: string): number | null {\n if (value.trim() === '') return null\n const sep = props.decimalSeparator || '.'\n const normalized = sep === '.' ? value : value.replace(sep, '.')\n const n = Number(normalized)\n if (!Number.isFinite(n)) return null\n return n\n}\n\nfunction clamp(v: number): number {\n if (props.min !== undefined) v = Math.max(props.min, v)\n if (props.max !== undefined) v = Math.min(props.max, v)\n return v\n}\n\nfunction normalize(v: number): number {\n if (props.precision === undefined) return v\n const p = Math.max(0, props.precision)\n return Number(v.toFixed(p))\n}\n\nfunction format(n: number): string {\n const sep = props.decimalSeparator || '.'\n const p = props.precision\n\n let s = p === undefined ? String(n) : n.toFixed(Math.max(0, p))\n if (sep !== '.') s = s.replace('.', sep)\n return s\n}\n\nfunction onInput(e: Event): void {\n const el = e.target as HTMLInputElement\n const next = sanitize(el.value)\n if (el.value !== next) el.value = next\n emit('update:modelValue', next)\n}\n\nfunction onChange(e: Event): void {\n const el = e.target as HTMLInputElement\n const next = sanitize(el.value)\n if (el.value !== next) el.value = next\n emit('change', next)\n}\n\nfunction stepBy(dir: 1 | -1): void {\n if (props.disabled) return\n\n const current = toNumber(props.modelValue) ?? 0\n const next = clamp(normalize(current + (props.step ?? 1) * dir))\n const nextStr = format(next)\n\n emit('update:modelValue', nextStr)\n emit('change', nextStr)\n focus()\n}\n</script>\n\n<template>\n <div\n data-gr-number-input\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClassName\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"number-input-prefix\"\n data-gr-number-input-prefix\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"name\"\n type=\"text\"\n :inputmode=\"inputmode\"\n :autocomplete=\"autocomplete\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"inputClassName\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n @change=\"onChange\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"number-input-suffix\"\n data-gr-number-input-suffix\n class=\"absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n\n <div\n v-if=\"hasVerticalControls\"\n data-testid=\"number-input-controls-vertical\"\n data-gr-number-input-controls=\"vertical\"\n class=\"absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)]\"\n :style=\"verticalControlsStyle\"\n >\n <div class=\"flex flex-col justify-center gap-1\">\n <button\n type=\"button\"\n class=\"h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedIncreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M7 14l5-5 5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n class=\"h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedDecreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(-1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M7 10l5 5 5-5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <div\n v-if=\"hasHorizontalControls\"\n data-testid=\"number-input-controls-horizontal-left\"\n data-gr-number-input-controls=\"horizontal-left\"\n class=\"absolute inset-y-0 flex items-stretch justify-center border-r border-[var(--brd)]\"\n :style=\"horizontalLeftControlsStyle\"\n >\n <button\n type=\"button\"\n class=\"h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedDecreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(-1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M14 7l-5 5 5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <div\n v-if=\"hasHorizontalControls\"\n data-testid=\"number-input-controls-horizontal-right\"\n data-gr-number-input-controls=\"horizontal-right\"\n class=\"absolute inset-y-0 flex items-stretch justify-center border-l border-[var(--brd)]\"\n :style=\"horizontalRightControlsStyle\"\n >\n <button\n type=\"button\"\n class=\"h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedIncreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M10 7l5 5-5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport type { InputHTMLAttributes } from 'vue'\nimport { computed, ref, useSlots } from 'vue'\n\nimport {\n grNumberInputInputClass,\n grNumberInputShellClass,\n type GrNumberInputControlsDirection,\n type GrNumberInputSize,\n type GrNumberInputState,\n type GrNumberInputTextAlign,\n} from './grNumberInputStyles'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { addLen, useAddonMeasurement } from '../../composables/internal/useAddonMeasurement'\n\ndefineOptions({\n inheritAttrs: false,\n})\n\nconst ADDON_PX_BY_SIZE: Record<GrNumberInputSize, number> = {\n xs: 32,\n sm: 36,\n md: 40,\n lg: 48,\n}\n\nconst BASE_PADDING_X_LEN_BY_SIZE: Record<GrNumberInputSize, string> = {\n xs: '10px',\n sm: '12px',\n md: '12px',\n lg: '16px',\n}\n\nfunction px(n: number): string {\n return `${n}px`\n}\n\nexport interface GrNumberInputProps {\n /** Значение (строка — контролируем форматирование внутри). */\n modelValue: string\n placeholder?: string\n autocomplete?: string\n inputmode?: InputHTMLAttributes['inputmode']\n disabled?: boolean\n /** Быстрый флаг невалидности; эквивалент `state='danger'` + `aria-invalid`. */\n invalid?: boolean\n state?: GrNumberInputState\n name?: string\n id?: string\n size?: GrNumberInputSize\n\n textAlign?: GrNumberInputTextAlign\n\n decimalSeparator?: string\n step?: number\n min?: number\n max?: number\n precision?: number\n\n /** Показывать кнопки +/-. */\n controls?: boolean\n controlsDirection?: GrNumberInputControlsDirection\n\n prefixMinWidth?: string\n prefixMaxWidth?: string\n suffixMinWidth?: string\n suffixMaxWidth?: string\n /**\n * Фиксированная ширина у prefix/suffix: жёсткая ширина (из `*MaxWidth` →\n * `*MinWidth` → дефолт) + обрезка контента по краю (prefix — справа,\n * suffix — слева). По умолчанию аддоны растягиваются под контент.\n */\n prefixFixed?: boolean\n suffixFixed?: boolean\n\n /** i18n-friendly aria-label для кнопки \"увеличить\". */\n increaseLabel?: string\n /** i18n-friendly aria-label для кнопки \"уменьшить\". */\n decreaseLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrNumberInputProps>(), {\n placeholder: undefined,\n autocomplete: undefined,\n inputmode: 'decimal',\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n size: 'md',\n\n textAlign: 'left',\n\n decimalSeparator: '.',\n step: 1,\n min: undefined,\n max: undefined,\n precision: undefined,\n\n controls: false,\n controlsDirection: 'vertical',\n\n prefixMinWidth: undefined,\n prefixMaxWidth: undefined,\n suffixMinWidth: undefined,\n suffixMaxWidth: undefined,\n prefixFixed: false,\n suffixFixed: false,\n\n increaseLabel: undefined,\n decreaseLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n (e: 'change', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n inputEl.value?.focus()\n}\n\ndefineExpose({\n focus,\n})\n\nconst slots = useSlots()\n\nconst { t } = useGranularityTranslations()\nconst resolvedIncreaseLabel = computed(() => props.increaseLabel ?? t('gr.numberInput.increase', 'Increase'))\nconst resolvedDecreaseLabel = computed(() => props.decreaseLabel ?? t('gr.numberInput.decrease', 'Decrease'))\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst hasHorizontalControls = computed(() => props.controls && props.controlsDirection === 'horizontal')\nconst hasVerticalControls = computed(() => props.controls && props.controlsDirection === 'vertical')\n\nconst addonPx = computed(() => ADDON_PX_BY_SIZE[props.size])\nconst addonLen = computed(() => px(addonPx.value))\nconst basePaddingXLen = computed(() => BASE_PADDING_X_LEN_BY_SIZE[props.size])\n\nconst defaultAddonMinWidth = computed(() => addonLen.value)\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst prefixLen = computed(() => {\n if (!hasPrefix.value) return '0px'\n return props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value\n})\nconst suffixLen = computed(() => {\n if (!hasSuffix.value) return '0px'\n return props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value\n})\n\nfunction addonStyle(side: 'left' | 'right', offset: string): Record<string, string> {\n return {\n width: addonLen.value,\n [side]: offset,\n }\n}\n\nconst inputStyle = computed(() => {\n const leftControls = hasHorizontalControls.value ? addonLen.value : '0px'\n const rightControlsCount = (hasHorizontalControls.value ? 1 : 0) + (hasVerticalControls.value ? 1 : 0)\n const rightControls = rightControlsCount > 0 ? px(addonPx.value * rightControlsCount) : '0px'\n\n const leftReserved = addLen(prefixLen.value, leftControls)\n const rightReserved = addLen(suffixLen.value, rightControls)\n\n const left = hasPrefix.value || hasHorizontalControls.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n const right = hasSuffix.value || rightControlsCount > 0 ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n return {\n paddingLeft: left,\n paddingRight: right,\n } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n if (props.suffixFixed) {\n return {\n right: '0px',\n width: suffixFixedWidth.value,\n minWidth: suffixFixedWidth.value,\n maxWidth: suffixFixedWidth.value,\n }\n }\n\n return {\n right: '0px',\n minWidth: suffixMinWidth.value,\n maxWidth: props.suffixMaxWidth,\n }\n})\n\nconst prefixStyle = computed(() => {\n if (props.prefixFixed) {\n return {\n width: prefixFixedWidth.value,\n minWidth: prefixFixedWidth.value,\n maxWidth: prefixFixedWidth.value,\n }\n }\n\n return {\n minWidth: prefixMinWidth.value,\n maxWidth: props.prefixMaxWidth,\n }\n})\n\nconst verticalControlsStyle = computed(() => addonStyle('right', suffixLen.value))\nconst horizontalLeftControlsStyle = computed(() => addonStyle('left', prefixLen.value))\nconst horizontalRightControlsStyle = computed(() => addonStyle('right', suffixLen.value))\n\nconst shellClassName = computed(() => {\n return grNumberInputShellClass({\n disabled: props.disabled,\n state: props.invalid ? 'danger' : props.state,\n })\n})\n\nconst inputClassName = computed(() => {\n return grNumberInputInputClass({\n size: props.size,\n textAlign: props.textAlign,\n })\n})\n\nfunction isDigit(ch: string): boolean {\n return ch >= '0' && ch <= '9'\n}\n\nfunction sanitize(raw: string): string {\n const sep = props.decimalSeparator || '.'\n\n let out = ''\n let hasSepLocal = false\n\n for (let i = 0; i < raw.length; i++) {\n const ch = raw[i]\n if (isDigit(ch)) {\n out += ch\n continue\n }\n\n if ((ch === sep || ch === '.' || ch === ',') && !hasSepLocal) {\n out += sep\n hasSepLocal = true\n }\n }\n\n return out\n}\n\nfunction toNumber(value: string): number | null {\n if (value.trim() === '') return null\n const sep = props.decimalSeparator || '.'\n const normalized = sep === '.' ? value : value.replace(sep, '.')\n const n = Number(normalized)\n if (!Number.isFinite(n)) return null\n return n\n}\n\nfunction clamp(v: number): number {\n if (props.min !== undefined) v = Math.max(props.min, v)\n if (props.max !== undefined) v = Math.min(props.max, v)\n return v\n}\n\nfunction normalize(v: number): number {\n if (props.precision === undefined) return v\n const p = Math.max(0, props.precision)\n return Number(v.toFixed(p))\n}\n\nfunction format(n: number): string {\n const sep = props.decimalSeparator || '.'\n const p = props.precision\n\n let s = p === undefined ? String(n) : n.toFixed(Math.max(0, p))\n if (sep !== '.') s = s.replace('.', sep)\n return s\n}\n\nfunction onInput(e: Event): void {\n const el = e.target as HTMLInputElement\n const next = sanitize(el.value)\n if (el.value !== next) el.value = next\n emit('update:modelValue', next)\n}\n\nfunction onChange(e: Event): void {\n const el = e.target as HTMLInputElement\n const next = sanitize(el.value)\n if (el.value !== next) el.value = next\n emit('change', next)\n}\n\nfunction stepBy(dir: 1 | -1): void {\n if (props.disabled) return\n\n const current = toNumber(props.modelValue) ?? 0\n const next = clamp(normalize(current + (props.step ?? 1) * dir))\n const nextStr = format(next)\n\n emit('update:modelValue', nextStr)\n emit('change', nextStr)\n focus()\n}\n</script>\n\n<template>\n <div\n data-gr-number-input\n class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n :class=\"shellClassName\"\n >\n <div\n v-if=\"$slots.prefix\"\n ref=\"prefixEl\"\n data-testid=\"number-input-prefix\"\n data-gr-number-input-prefix\n class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :style=\"prefixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"prefix\" />\n </div>\n\n <input\n :id=\"id\"\n ref=\"inputEl\"\n v-bind=\"$attrs\"\n :name=\"name\"\n type=\"text\"\n :inputmode=\"inputmode\"\n :autocomplete=\"autocomplete\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid ? 'true' : undefined\"\n class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n :class=\"inputClassName\"\n :style=\"inputStyle\"\n @input=\"onInput\"\n @change=\"onChange\"\n >\n\n <div\n v-if=\"$slots.suffix\"\n ref=\"suffixEl\"\n data-testid=\"number-input-suffix\"\n data-gr-number-input-suffix\n class=\"absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n :style=\"suffixStyle\"\n aria-hidden=\"true\"\n >\n <slot name=\"suffix\" />\n </div>\n\n <div\n v-if=\"hasVerticalControls\"\n data-testid=\"number-input-controls-vertical\"\n data-gr-number-input-controls=\"vertical\"\n class=\"absolute inset-y-0 flex items-center justify-center border-l border-[var(--brd)]\"\n :style=\"verticalControlsStyle\"\n >\n <div class=\"flex flex-col justify-center gap-1\">\n <button\n type=\"button\"\n class=\"h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedIncreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M7 14l5-5 5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <button\n type=\"button\"\n class=\"h-4 w-7 inline-flex items-center justify-center rounded text-[10px] text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedDecreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(-1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M7 10l5 5 5-5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n\n <div\n v-if=\"hasHorizontalControls\"\n data-testid=\"number-input-controls-horizontal-left\"\n data-gr-number-input-controls=\"horizontal-left\"\n class=\"absolute inset-y-0 flex items-stretch justify-center border-r border-[var(--brd)]\"\n :style=\"horizontalLeftControlsStyle\"\n >\n <button\n type=\"button\"\n class=\"h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedDecreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(-1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M14 7l-5 5 5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <div\n v-if=\"hasHorizontalControls\"\n data-testid=\"number-input-controls-horizontal-right\"\n data-gr-number-input-controls=\"horizontal-right\"\n class=\"absolute inset-y-0 flex items-stretch justify-center border-l border-[var(--brd)]\"\n :style=\"horizontalRightControlsStyle\"\n >\n <button\n type=\"button\"\n class=\"h-full w-full inline-flex items-center justify-center text-[var(--muted-fg)] hover:bg-[var(--muted)] active:bg-[var(--muted)] disabled:opacity-50 disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedIncreaseLabel\"\n @mousedown.prevent\n @click=\"stepBy(1)\"\n >\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path\n d=\"M10 7l5 5-5 5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrSelect-RShK21lK.js","names":[],"sources":["../../../../src/components/GrSelect/GrSelect.vue","../../../../src/components/GrSelect/GrSelect.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport GrInput from '../GrInput/GrInput.vue'\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/internal/useFloating'\nimport { useEscapeToClose } from '../../composables/internal/useEscapeToClose'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n defaultBaseClass,\n grSelectLinkNativeLabelClass,\n grSelectLinkNativeOverlayClass,\n grSelectNativeClass,\n grSelectPanelClasses,\n grSelectTriggerClass,\n linkBaseClass,\n type GrSelectModelValue,\n type GrSelectOption,\n type GrSelectOptionGroup,\n type GrSelectOptionOrGroup,\n type GrSelectOptionsView,\n type GrSelectSize,\n type GrSelectUnderline,\n type GrSelectVariant,\n type GrSelectView,\n} from './grSelectStyles'\n\nexport type {\n GrSelectModelValue,\n GrSelectOption,\n GrSelectOptionGroup,\n GrSelectOptionOrGroup,\n GrSelectOptionsView,\n GrSelectSize,\n GrSelectUnderline,\n GrSelectVariant,\n GrSelectView,\n} from './grSelectStyles'\n\n/**\n * Пропсы публичного GR-примитива «Select».\n */\nexport interface GrSelectProps {\n modelValue: GrSelectModelValue\n /** Список опций. Поддерживает плоский массив опций и группы опций (`{ label, options }`). */\n options?: GrSelectOptionOrGroup[]\n disabled?: boolean\n ariaLabel?: string\n view?: GrSelectView\n size?: GrSelectSize\n /** Placeholder (показывается, когда значение не выбрано). */\n placeholder?: string\n /** Multiple selection. */\n multiple?: boolean\n /** Как отображать список опций: нативный `<select>` или кастомная панель. */\n optionsView?: GrSelectOptionsView\n /** Разрешает ввод/выбор значения, которого нет в `options`. */\n allowCustomValue?: boolean\n /** Placeholder для инпута кастомного значения (только в `optionsView=\"panel\"`). i18n-friendly: если не задан — берётся из адаптера перевода (`gr.select.customValuePlaceholder`), иначе — встроенный fallback. */\n customValuePlaceholder?: string\n /** Максимальная высота панели (только в `optionsView=\"panel\"`). */\n dropdownMaxHeight?: number\n /** Закрывать панель после выбора (только в `optionsView=\"panel\"`). */\n closeOnSelect?: boolean\n /** Разрешает очистку выбранного значения. */\n clearable?: boolean\n /** i18n-label для кнопки очистки (`aria-label`). */\n clearLabel?: string\n /**\n * Цвет/вариант ссылки для `view=\"link\"` (аналогично `GrLink`).\n * В `view=\"default\"` не используется.\n */\n variant?: GrSelectVariant\n /**\n * Подчёркивание для `view=\"link\"` (аналогично `GrLink`).\n * В `view=\"default\"` не используется.\n */\n underline?: GrSelectUnderline\n}\n\nconst props = withDefaults(\n defineProps<GrSelectProps>(),\n {\n options: undefined,\n disabled: false,\n ariaLabel: undefined,\n view: 'default',\n size: 'md',\n\n placeholder: undefined,\n multiple: false,\n\n optionsView: 'native',\n allowCustomValue: false,\n customValuePlaceholder: undefined,\n dropdownMaxHeight: 280,\n closeOnSelect: true,\n clearable: false,\n clearLabel: undefined,\n variant: 'primary',\n underline: 'auto',\n },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedCustomValuePlaceholder = computed(() => {\n return props.customValuePlaceholder ?? t('gr.select.customValuePlaceholder', 'Add value…')\n})\n\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.common.clear', 'Clear'))\n\nconst baseClassName = computed(() => props.view === 'link' ? linkBaseClass : defaultBaseClass)\n\nconst rootClass = computed(() => props.view === 'link' ? 'relative inline-block align-baseline' : 'relative w-full')\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: GrSelectModelValue): void\n}>()\n\nconst optionsResolved = computed<GrSelectOptionOrGroup[]>(() => props.options ?? [])\n\nfunction isOptionGroup(item: GrSelectOptionOrGroup): item is GrSelectOptionGroup {\n return Array.isArray((item as GrSelectOptionGroup).options)\n}\n\n/** Плоский список всех опций (группы «развёрнуты»). Используется для всех вычислений по значениям. */\nconst flatOptions = computed<GrSelectOption[]>(() => {\n const result: GrSelectOption[] = []\n for (const item of optionsResolved.value) {\n if (isOptionGroup(item)) result.push(...item.options)\n else result.push(item)\n }\n return result\n})\n\nfunction modelToArray(value: GrSelectModelValue): string[] {\n if (Array.isArray(value)) return value\n if (!value) return []\n return [value]\n}\n\nconst modelSingle = computed(() => {\n return Array.isArray(props.modelValue) ? (props.modelValue[0] ?? '') : props.modelValue\n})\n\nconst modelMultiple = computed(() => modelToArray(props.modelValue))\n\nconst selectedValues = computed(() => {\n return props.multiple ? modelMultiple.value : (modelSingle.value ? [modelSingle.value] : [])\n})\n\nconst hasSelection = computed(() => selectedValues.value.length > 0)\n\nconst selectedOptions = computed<GrSelectOption[]>(() => {\n const byValue = new Map(flatOptions.value.map(o => [o.value, o]))\n return selectedValues.value.map((v) => byValue.get(v) ?? { value: v, label: v })\n})\n\nconst hasModelInOptions = computed(() => {\n if (props.multiple) return false\n return flatOptions.value.some((o) => o.value === modelSingle.value)\n})\n\nconst displayLabel = computed(() => {\n if (props.multiple) {\n if (!selectedValues.value.length) return ''\n return selectedValues.value\n .map((v) => flatOptions.value.find((o) => o.value === v)?.label ?? v)\n .join(', ')\n }\n\n return flatOptions.value.find((o) => o.value === modelSingle.value)?.label ?? modelSingle.value\n})\n\nconst displayText = computed(() => {\n if (hasSelection.value) return displayLabel.value\n return props.placeholder ?? ''\n})\n\n// Нативный `<select multiple>` — это многострочный listbox, а не поповер. В режиме\n// `view=\"link\"` он рендерится невидимым overlay'ем, из-за чего multiple-вариант «не\n// открывается» (клик по невидимому listbox'у ничего не показывает). Для этой\n// неподдерживаемой комбинации форсим кастомную панель, которая корректно открывается.\nconst effectiveOptionsView = computed<GrSelectOptionsView>(() => {\n if (props.view === 'link' && props.multiple && props.optionsView === 'native')\n return 'panel'\n return props.optionsView\n})\n\nconst nativeCustomOptionVisible = computed(() => {\n if (!props.allowCustomValue) return false\n if (effectiveOptionsView.value !== 'native') return false\n if (props.multiple) return false\n if (!props.options) return false\n if (modelSingle.value === '') return false\n return !hasModelInOptions.value\n})\n\nconst customValue = ref('')\nconst open = ref(false)\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst customInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst clickOutsideExclude = [() => panelEl.value]\n\n// Для `view='link'` ширина триггера = ширине выбранной опции (`inline-block w-auto`),\n// поэтому панель растёт по контенту (`matchWidth: 'min'` → `width: max-content` +\n// `min-width` от триггера), а не сжимается до неё. Для `view='default'` панель точно\n// повторяет ширину триггера (`matchWidth: true`).\nconst { floatingStyle, update: updateFloatingPosition } = useFloating(rootEl, panelEl, open, {\n placement: 'bottom-start',\n matchWidth: () => (props.view === 'link' ? 'min' : true),\n zIndexVar: '--gr-z-dropdown',\n})\n\nfunction closeDropdown(): void {\n open.value = false\n}\n\nfunction toggleDropdown(): void {\n if (props.disabled) return\n open.value = !open.value\n}\n\nuseEscapeToClose(open, closeDropdown)\n\n// `view` определяет режим `matchWidth` (см. выше) — пересчитываем позицию/ширину\n// панели, если он меняется, пока панель открыта.\nwatch(\n () => props.view,\n () => {\n if (open.value) updateFloatingPosition()\n },\n)\n\nwatch(\n open,\n async (isOpen) => {\n if (!isOpen) {\n customValue.value = ''\n return\n }\n\n if (props.allowCustomValue) {\n await nextTick()\n customInputRef.value?.focus()\n }\n },\n { immediate: true },\n)\n\nconst panelClasses = computed(() => {\n return grSelectPanelClasses\n})\n\nfunction matchesQuery(option: GrSelectOption, query: string): boolean {\n if (!query) return true\n return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query)\n}\n\n/**\n * Элемент рендера панели: либо заголовок группы, либо опция.\n * Группировка сохраняется, фильтрация по `customValue` скрывает пустые группы.\n */\ntype GrSelectPanelItem =\n | { kind: 'group', label: string, key: string }\n | { kind: 'option', option: GrSelectOption, key: string }\n\nconst panelItems = computed<GrSelectPanelItem[]>(() => {\n const q = props.allowCustomValue ? customValue.value.trim().toLowerCase() : ''\n const items: GrSelectPanelItem[] = []\n\n // Опция для кастомного значения, которого нет в options (single).\n if (props.allowCustomValue && !props.multiple && modelSingle.value !== '' && !hasModelInOptions.value) {\n const custom: GrSelectOption = { value: modelSingle.value, label: modelSingle.value }\n if (matchesQuery(custom, q)) {\n items.push({ kind: 'option', option: custom, key: `__custom__${custom.value}` })\n }\n }\n\n optionsResolved.value.forEach((item, index) => {\n if (isOptionGroup(item)) {\n const matched = item.options.filter((o) => matchesQuery(o, q))\n if (!matched.length) return\n items.push({ kind: 'group', label: item.label, key: `__group__${index}` })\n for (const option of matched) {\n // Ключ с индексом группы — одинаковое `value` в разных группах больше не даёт дубликат.\n items.push({ kind: 'option', option, key: `${index}:${option.value}` })\n }\n return\n }\n\n if (matchesQuery(item, q)) {\n items.push({ kind: 'option', option: item, key: `${index}:${item.value}` })\n }\n })\n\n return items\n})\n\nconst canAddCustom = computed(() => {\n if (!props.allowCustomValue) return false\n if (effectiveOptionsView.value !== 'panel') return false\n const v = customValue.value.trim()\n if (!v) return false\n\n if (props.multiple) {\n if (selectedValues.value.includes(v)) return false\n return !flatOptions.value.some((o) => o.value === v)\n }\n\n if (v === modelSingle.value) return false\n return !flatOptions.value.some((o) => o.value === v)\n})\n\nfunction emitValue(value: GrSelectModelValue): void {\n emit('update:modelValue', value)\n}\n\nfunction isSelected(value: string): boolean {\n return selectedValues.value.includes(value)\n}\n\nfunction isOptionDisabled(value: string): boolean {\n return flatOptions.value.find(o => o.value === value)?.disabled === true\n}\n\nfunction selectValue(value: string): void {\n emitValue(value)\n if (props.closeOnSelect) {\n closeDropdown()\n }\n}\n\nfunction toggleValue(value: string): void {\n if (isOptionDisabled(value)) return\n\n if (!props.multiple) {\n selectValue(value)\n return\n }\n\n const next = selectedValues.value.slice()\n const idx = next.indexOf(value)\n if (idx >= 0) {\n next.splice(idx, 1)\n }\n else {\n next.push(value)\n }\n\n emitValue(next)\n if (props.closeOnSelect) {\n closeDropdown()\n }\n}\n\nfunction addCustom(): void {\n const v = customValue.value.trim()\n if (!v) return\n toggleValue(v)\n}\n\nconst showNativeChevron = computed(() => {\n return effectiveOptionsView.value === 'native' && props.view !== 'link' && !props.multiple\n})\n\nconst nativeClearOptionVisible = computed(() => {\n if (!props.clearable) return false\n if (effectiveOptionsView.value !== 'native') return false\n if (props.multiple) return false\n if (!props.options) return true\n return !flatOptions.value.some(o => o.value === '')\n})\n\nconst panelClearVisible = computed(() => {\n if (!props.clearable) return false\n if (effectiveOptionsView.value !== 'panel') return false\n if (props.view === 'link') return false\n return hasSelection.value\n})\n\nconst nativeClassName = computed(() => {\n return grSelectNativeClass({\n view: props.view,\n size: props.size,\n disabled: props.disabled,\n variant: props.variant,\n underline: props.underline,\n showNativeChevron: showNativeChevron.value,\n })\n})\n\n/**\n * `view=\"link\"` в native-режиме: ширина обёртки должна определяться выбранной опцией,\n * а не самой длинной (как делает браузер по умолчанию). Поэтому рендерим прозрачный\n * `<select>`-overlay поверх видимого `<span>` с меткой — overlay принимает клики/клавиатуру,\n * span задаёт ширину компонента в закрытом состоянии.\n */\nconst isLinkNative = computed(() => props.view === 'link' && effectiveOptionsView.value === 'native')\n\nconst linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({\n size: props.size,\n variant: props.variant,\n underline: props.underline,\n disabled: props.disabled,\n}))\n\nconst linkNativeDisplayText = computed(() => {\n return displayText.value || props.placeholder || '\\u00A0'\n})\n\nconst triggerClassName = computed(() => {\n return grSelectTriggerClass({\n view: props.view,\n optionsView: effectiveOptionsView.value,\n size: props.size,\n disabled: props.disabled,\n variant: props.variant,\n underline: props.underline,\n })\n})\n\nfunction onChange(e: Event): void {\n const el = e.target as HTMLSelectElement\n\n if (props.multiple) {\n const values = Array.from(el.selectedOptions, o => o.value)\n emit('update:modelValue', values)\n return\n }\n\n emit('update:modelValue', el.value)\n}\n\nfunction clearSelection(): void {\n if (props.disabled) return\n emitValue(props.multiple ? [] : '')\n}\n</script>\n\n<template>\n <div\n v-if=\"effectiveOptionsView === 'native'\"\n data-gr-select\n :class=\"rootClass\"\n >\n <!--\n Выбор задаём per-option через `:selected` (а не `:value` на `<select>`):\n для `<select multiple>` биндинг `:value` массивом не работает — DOM не\n отражает программное изменение модели. `onChange` читает выбор из DOM.\n -->\n <select\n data-gr-select-native\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :class=\"isLinkNative ? grSelectLinkNativeOverlayClass : [baseClassName, nativeClassName]\"\n @change=\"onChange\"\n >\n <option v-if=\"nativeClearOptionVisible\" value=\"\" :selected=\"!multiple && modelSingle === ''\">\n {{ placeholder || t('gr.select.clearOption', 'None') }}\n </option>\n\n <slot>\n <option v-if=\"nativeCustomOptionVisible\" :value=\"modelSingle\" :selected=\"!multiple\">\n {{ modelSingle }}\n </option>\n <template v-for=\"(item, index) in optionsResolved\" :key=\"index\">\n <optgroup v-if=\"isOptionGroup(item)\" :label=\"item.label\">\n <option\n v-for=\"opt in item.options\"\n :key=\"`${index}:${opt.value}`\"\n :value=\"opt.value\"\n :selected=\"multiple ? modelMultiple.includes(opt.value) : modelSingle === opt.value\"\n :disabled=\"opt.disabled\"\n >\n {{ opt.label }}\n </option>\n </optgroup>\n <option\n v-else\n :value=\"item.value\"\n :selected=\"multiple ? modelMultiple.includes(item.value) : modelSingle === item.value\"\n :disabled=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n </template>\n </slot>\n </select>\n\n <span\n v-if=\"isLinkNative\"\n data-gr-select-link-label\n aria-hidden=\"true\"\n :class=\"linkNativeLabelClassName\"\n >{{ linkNativeDisplayText }}</span>\n\n <span\n v-if=\"showNativeChevron\"\n data-testid=\"gr-select-chevron\"\n class=\"absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--muted-fg)] pointer-events-none\"\n >\n <span class=\"i-lucide-chevron-down block h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </div>\n\n <div\n v-else\n ref=\"rootEl\"\n v-click-outside=\"{ handler: closeDropdown, enabled: open, exclude: clickOutsideExclude }\"\n data-gr-select\n :class=\"rootClass\"\n >\n <button\n data-testid=\"gr-select-trigger\"\n data-gr-select-trigger\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n role=\"combobox\"\n aria-readonly=\"true\"\n :aria-expanded=\"open ? 'true' : 'false'\"\n :class=\"[baseClassName, triggerClassName]\"\n @click=\"toggleDropdown\"\n >\n <span class=\"min-w-0 flex-1\">\n <slot\n name=\"value\"\n :selected-options=\"selectedOptions\"\n :selected-values=\"selectedValues\"\n :display-label=\"displayLabel\"\n :placeholder=\"placeholder\"\n :has-selection=\"hasSelection\"\n >\n <span\n class=\"block truncate\"\n :class=\"!hasSelection ? 'text-[var(--muted-fg)]' : ''\"\n >\n {{ displayText }}\n </span>\n </slot>\n </span>\n\n <span\n v-if=\"panelClearVisible\"\n class=\"shrink-0 h-4 w-4\"\n aria-hidden=\"true\"\n />\n\n <span\n v-else\n data-testid=\"gr-select-chevron\"\n class=\"shrink-0 flex items-center text-[var(--muted-fg)] pointer-events-none\"\n >\n <span class=\"i-lucide-chevron-down block h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n\n <button\n v-if=\"panelClearVisible\"\n data-testid=\"gr-select-clear\"\n data-gr-select-clear\n type=\"button\"\n class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--muted)_25%,transparent)] disabled:opacity-50\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedClearLabel\"\n @click.stop=\"clearSelection\"\n >\n <span class=\"i-lucide-x inline-block h-4 w-4\" aria-hidden=\"true\" />\n </button>\n\n <teleport to=\"body\">\n <transition\n enter-active-class=\"transition ease-out duration-150\"\n enter-from-class=\"transform opacity-0 scale-95\"\n enter-to-class=\"transform opacity-100 scale-100\"\n leave-active-class=\"transition ease-in duration-100\"\n leave-from-class=\"transform opacity-100 scale-100\"\n leave-to-class=\"transform opacity-0 scale-95\"\n >\n <div\n v-show=\"open\"\n ref=\"panelEl\"\n data-testid=\"gr-select-panel\"\n data-gr-select-panel\n :style=\"floatingStyle\"\n >\n <div :class=\"panelClasses\">\n <div v-if=\"allowCustomValue\" class=\"p-2 border-b border-[var(--brd)]\">\n <GrInput\n ref=\"customInputRef\"\n v-model=\"customValue\"\n data-testid=\"gr-select-custom-input\"\n type=\"text\"\n :placeholder=\"resolvedCustomValuePlaceholder\"\n size=\"sm\"\n @keydown.enter.prevent=\"addCustom\"\n />\n </div>\n\n <div\n data-gr-select-listbox\n class=\"p-1 overflow-auto\"\n :style=\"{ maxHeight: `${dropdownMaxHeight}px` }\"\n role=\"listbox\"\n :aria-multiselectable=\"multiple ? 'true' : undefined\"\n >\n <button\n v-if=\"canAddCustom\"\n data-testid=\"gr-select-add-option\"\n data-gr-select-add-option\n type=\"button\"\n class=\"rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : 'w-full',\n ]\"\n @click=\"addCustom\"\n >\n {{ t('gr.select.addOption', 'Add \"{value}\"', { value: customValue.trim() }) }}\n </button>\n\n <template v-for=\"item in panelItems\" :key=\"item.key\">\n <div\n v-if=\"item.kind === 'group'\"\n data-gr-select-group-label\n role=\"presentation\"\n class=\"px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-fg)]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : '',\n ]\"\n >\n {{ item.label }}\n </div>\n\n <button\n v-else\n data-gr-select-option\n type=\"button\"\n role=\"option\"\n :disabled=\"item.option.disabled\"\n :aria-selected=\"isSelected(item.option.value) ? 'true' : 'false'\"\n :aria-disabled=\"item.option.disabled ? 'true' : undefined\"\n class=\"rounded-[10px] px-3 py-2 text-left text-[13px]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : 'w-full',\n item.option.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]',\n ]\"\n @click=\"toggleValue(item.option.value)\"\n >\n <slot name=\"option\" :option=\"item.option\" :selected=\"isSelected(item.option.value)\">\n <span class=\"flex items-center gap-2 min-w-0\">\n <span\n class=\"inline-block h-4 w-4 shrink-0\"\n :class=\"isSelected(item.option.value) ? 'i-lucide-check text-[var(--primary)]' : ''\"\n aria-hidden=\"true\"\n />\n <span class=\"truncate\">{{ item.option.label }}</span>\n </span>\n </slot>\n </button>\n </template>\n </div>\n </div>\n </div>\n </transition>\n </teleport>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref, watch } from 'vue'\n\nimport GrInput from '../GrInput/GrInput.vue'\nimport { vClickOutside } from '../../directives'\nimport { useFloating } from '../../composables/internal/useFloating'\nimport { useEscapeToClose } from '../../composables/internal/useEscapeToClose'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n defaultBaseClass,\n grSelectLinkNativeLabelClass,\n grSelectLinkNativeOverlayClass,\n grSelectNativeClass,\n grSelectPanelClasses,\n grSelectTriggerClass,\n linkBaseClass,\n type GrSelectModelValue,\n type GrSelectOption,\n type GrSelectOptionGroup,\n type GrSelectOptionOrGroup,\n type GrSelectOptionsView,\n type GrSelectSize,\n type GrSelectUnderline,\n type GrSelectVariant,\n type GrSelectView,\n} from './grSelectStyles'\n\nexport type {\n GrSelectModelValue,\n GrSelectOption,\n GrSelectOptionGroup,\n GrSelectOptionOrGroup,\n GrSelectOptionsView,\n GrSelectSize,\n GrSelectUnderline,\n GrSelectVariant,\n GrSelectView,\n} from './grSelectStyles'\n\n/**\n * Пропсы публичного GR-примитива «Select».\n */\nexport interface GrSelectProps {\n modelValue: GrSelectModelValue\n /** Список опций. Поддерживает плоский массив опций и группы опций (`{ label, options }`). */\n options?: GrSelectOptionOrGroup[]\n disabled?: boolean\n ariaLabel?: string\n view?: GrSelectView\n size?: GrSelectSize\n /** Placeholder (показывается, когда значение не выбрано). */\n placeholder?: string\n /** Multiple selection. */\n multiple?: boolean\n /** Как отображать список опций: нативный `<select>` или кастомная панель. */\n optionsView?: GrSelectOptionsView\n /** Разрешает ввод/выбор значения, которого нет в `options`. */\n allowCustomValue?: boolean\n /** Placeholder для инпута кастомного значения (только в `optionsView=\"panel\"`). i18n-friendly: если не задан — берётся из адаптера перевода (`gr.select.customValuePlaceholder`), иначе — встроенный fallback. */\n customValuePlaceholder?: string\n /** Максимальная высота панели (только в `optionsView=\"panel\"`). */\n dropdownMaxHeight?: number\n /** Закрывать панель после выбора (только в `optionsView=\"panel\"`). */\n closeOnSelect?: boolean\n /** Разрешает очистку выбранного значения. */\n clearable?: boolean\n /** i18n-label для кнопки очистки (`aria-label`). */\n clearLabel?: string\n /**\n * Цвет/вариант ссылки для `view=\"link\"` (аналогично `GrLink`).\n * В `view=\"default\"` не используется.\n */\n variant?: GrSelectVariant\n /**\n * Подчёркивание для `view=\"link\"` (аналогично `GrLink`).\n * В `view=\"default\"` не используется.\n */\n underline?: GrSelectUnderline\n}\n\nconst props = withDefaults(\n defineProps<GrSelectProps>(),\n {\n options: undefined,\n disabled: false,\n ariaLabel: undefined,\n view: 'default',\n size: 'md',\n\n placeholder: undefined,\n multiple: false,\n\n optionsView: 'native',\n allowCustomValue: false,\n customValuePlaceholder: undefined,\n dropdownMaxHeight: 280,\n closeOnSelect: true,\n clearable: false,\n clearLabel: undefined,\n variant: 'primary',\n underline: 'auto',\n },\n)\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedCustomValuePlaceholder = computed(() => {\n return props.customValuePlaceholder ?? t('gr.select.customValuePlaceholder', 'Add value…')\n})\n\nconst resolvedClearLabel = computed(() => props.clearLabel ?? t('gr.common.clear', 'Clear'))\n\nconst baseClassName = computed(() => props.view === 'link' ? linkBaseClass : defaultBaseClass)\n\nconst rootClass = computed(() => props.view === 'link' ? 'relative inline-block align-baseline' : 'relative w-full')\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: GrSelectModelValue): void\n}>()\n\nconst optionsResolved = computed<GrSelectOptionOrGroup[]>(() => props.options ?? [])\n\nfunction isOptionGroup(item: GrSelectOptionOrGroup): item is GrSelectOptionGroup {\n return Array.isArray((item as GrSelectOptionGroup).options)\n}\n\n/** Плоский список всех опций (группы «развёрнуты»). Используется для всех вычислений по значениям. */\nconst flatOptions = computed<GrSelectOption[]>(() => {\n const result: GrSelectOption[] = []\n for (const item of optionsResolved.value) {\n if (isOptionGroup(item)) result.push(...item.options)\n else result.push(item)\n }\n return result\n})\n\nfunction modelToArray(value: GrSelectModelValue): string[] {\n if (Array.isArray(value)) return value\n if (!value) return []\n return [value]\n}\n\nconst modelSingle = computed(() => {\n return Array.isArray(props.modelValue) ? (props.modelValue[0] ?? '') : props.modelValue\n})\n\nconst modelMultiple = computed(() => modelToArray(props.modelValue))\n\nconst selectedValues = computed(() => {\n return props.multiple ? modelMultiple.value : (modelSingle.value ? [modelSingle.value] : [])\n})\n\nconst hasSelection = computed(() => selectedValues.value.length > 0)\n\nconst selectedOptions = computed<GrSelectOption[]>(() => {\n const byValue = new Map(flatOptions.value.map(o => [o.value, o]))\n return selectedValues.value.map((v) => byValue.get(v) ?? { value: v, label: v })\n})\n\nconst hasModelInOptions = computed(() => {\n if (props.multiple) return false\n return flatOptions.value.some((o) => o.value === modelSingle.value)\n})\n\nconst displayLabel = computed(() => {\n if (props.multiple) {\n if (!selectedValues.value.length) return ''\n return selectedValues.value\n .map((v) => flatOptions.value.find((o) => o.value === v)?.label ?? v)\n .join(', ')\n }\n\n return flatOptions.value.find((o) => o.value === modelSingle.value)?.label ?? modelSingle.value\n})\n\nconst displayText = computed(() => {\n if (hasSelection.value) return displayLabel.value\n return props.placeholder ?? ''\n})\n\n// Нативный `<select multiple>` — это многострочный listbox, а не поповер. В режиме\n// `view=\"link\"` он рендерится невидимым overlay'ем, из-за чего multiple-вариант «не\n// открывается» (клик по невидимому listbox'у ничего не показывает). Для этой\n// неподдерживаемой комбинации форсим кастомную панель, которая корректно открывается.\nconst effectiveOptionsView = computed<GrSelectOptionsView>(() => {\n if (props.view === 'link' && props.multiple && props.optionsView === 'native')\n return 'panel'\n return props.optionsView\n})\n\nconst nativeCustomOptionVisible = computed(() => {\n if (!props.allowCustomValue) return false\n if (effectiveOptionsView.value !== 'native') return false\n if (props.multiple) return false\n if (!props.options) return false\n if (modelSingle.value === '') return false\n return !hasModelInOptions.value\n})\n\nconst customValue = ref('')\nconst open = ref(false)\nconst rootEl = ref<HTMLElement | null>(null)\nconst panelEl = ref<HTMLElement | null>(null)\nconst customInputRef = ref<InstanceType<typeof GrInput> | null>(null)\nconst clickOutsideExclude = [() => panelEl.value]\n\n// Для `view='link'` ширина триггера = ширине выбранной опции (`inline-block w-auto`),\n// поэтому панель растёт по контенту (`matchWidth: 'min'` → `width: max-content` +\n// `min-width` от триггера), а не сжимается до неё. Для `view='default'` панель точно\n// повторяет ширину триггера (`matchWidth: true`).\nconst { floatingStyle, update: updateFloatingPosition } = useFloating(rootEl, panelEl, open, {\n placement: 'bottom-start',\n matchWidth: () => (props.view === 'link' ? 'min' : true),\n zIndexVar: '--gr-z-dropdown',\n})\n\nfunction closeDropdown(): void {\n open.value = false\n}\n\nfunction toggleDropdown(): void {\n if (props.disabled) return\n open.value = !open.value\n}\n\nuseEscapeToClose(open, closeDropdown)\n\n// `view` определяет режим `matchWidth` (см. выше) — пересчитываем позицию/ширину\n// панели, если он меняется, пока панель открыта.\nwatch(\n () => props.view,\n () => {\n if (open.value) updateFloatingPosition()\n },\n)\n\nwatch(\n open,\n async (isOpen) => {\n if (!isOpen) {\n customValue.value = ''\n return\n }\n\n if (props.allowCustomValue) {\n await nextTick()\n customInputRef.value?.focus()\n }\n },\n { immediate: true },\n)\n\nconst panelClasses = computed(() => {\n return grSelectPanelClasses\n})\n\nfunction matchesQuery(option: GrSelectOption, query: string): boolean {\n if (!query) return true\n return option.label.toLowerCase().includes(query) || option.value.toLowerCase().includes(query)\n}\n\n/**\n * Элемент рендера панели: либо заголовок группы, либо опция.\n * Группировка сохраняется, фильтрация по `customValue` скрывает пустые группы.\n */\ntype GrSelectPanelItem =\n | { kind: 'group', label: string, key: string }\n | { kind: 'option', option: GrSelectOption, key: string }\n\nconst panelItems = computed<GrSelectPanelItem[]>(() => {\n const q = props.allowCustomValue ? customValue.value.trim().toLowerCase() : ''\n const items: GrSelectPanelItem[] = []\n\n // Опция для кастомного значения, которого нет в options (single).\n if (props.allowCustomValue && !props.multiple && modelSingle.value !== '' && !hasModelInOptions.value) {\n const custom: GrSelectOption = { value: modelSingle.value, label: modelSingle.value }\n if (matchesQuery(custom, q)) {\n items.push({ kind: 'option', option: custom, key: `__custom__${custom.value}` })\n }\n }\n\n optionsResolved.value.forEach((item, index) => {\n if (isOptionGroup(item)) {\n const matched = item.options.filter((o) => matchesQuery(o, q))\n if (!matched.length) return\n items.push({ kind: 'group', label: item.label, key: `__group__${index}` })\n for (const option of matched) {\n // Ключ с индексом группы — одинаковое `value` в разных группах больше не даёт дубликат.\n items.push({ kind: 'option', option, key: `${index}:${option.value}` })\n }\n return\n }\n\n if (matchesQuery(item, q)) {\n items.push({ kind: 'option', option: item, key: `${index}:${item.value}` })\n }\n })\n\n return items\n})\n\nconst canAddCustom = computed(() => {\n if (!props.allowCustomValue) return false\n if (effectiveOptionsView.value !== 'panel') return false\n const v = customValue.value.trim()\n if (!v) return false\n\n if (props.multiple) {\n if (selectedValues.value.includes(v)) return false\n return !flatOptions.value.some((o) => o.value === v)\n }\n\n if (v === modelSingle.value) return false\n return !flatOptions.value.some((o) => o.value === v)\n})\n\nfunction emitValue(value: GrSelectModelValue): void {\n emit('update:modelValue', value)\n}\n\nfunction isSelected(value: string): boolean {\n return selectedValues.value.includes(value)\n}\n\nfunction isOptionDisabled(value: string): boolean {\n return flatOptions.value.find(o => o.value === value)?.disabled === true\n}\n\nfunction selectValue(value: string): void {\n emitValue(value)\n if (props.closeOnSelect) {\n closeDropdown()\n }\n}\n\nfunction toggleValue(value: string): void {\n if (isOptionDisabled(value)) return\n\n if (!props.multiple) {\n selectValue(value)\n return\n }\n\n const next = selectedValues.value.slice()\n const idx = next.indexOf(value)\n if (idx >= 0) {\n next.splice(idx, 1)\n }\n else {\n next.push(value)\n }\n\n emitValue(next)\n if (props.closeOnSelect) {\n closeDropdown()\n }\n}\n\nfunction addCustom(): void {\n const v = customValue.value.trim()\n if (!v) return\n toggleValue(v)\n}\n\nconst showNativeChevron = computed(() => {\n return effectiveOptionsView.value === 'native' && props.view !== 'link' && !props.multiple\n})\n\nconst nativeClearOptionVisible = computed(() => {\n if (!props.clearable) return false\n if (effectiveOptionsView.value !== 'native') return false\n if (props.multiple) return false\n if (!props.options) return true\n return !flatOptions.value.some(o => o.value === '')\n})\n\nconst panelClearVisible = computed(() => {\n if (!props.clearable) return false\n if (effectiveOptionsView.value !== 'panel') return false\n if (props.view === 'link') return false\n return hasSelection.value\n})\n\nconst nativeClassName = computed(() => {\n return grSelectNativeClass({\n view: props.view,\n size: props.size,\n disabled: props.disabled,\n variant: props.variant,\n underline: props.underline,\n showNativeChevron: showNativeChevron.value,\n })\n})\n\n/**\n * `view=\"link\"` в native-режиме: ширина обёртки должна определяться выбранной опцией,\n * а не самой длинной (как делает браузер по умолчанию). Поэтому рендерим прозрачный\n * `<select>`-overlay поверх видимого `<span>` с меткой — overlay принимает клики/клавиатуру,\n * span задаёт ширину компонента в закрытом состоянии.\n */\nconst isLinkNative = computed(() => props.view === 'link' && effectiveOptionsView.value === 'native')\n\nconst linkNativeLabelClassName = computed(() => grSelectLinkNativeLabelClass({\n size: props.size,\n variant: props.variant,\n underline: props.underline,\n disabled: props.disabled,\n}))\n\nconst linkNativeDisplayText = computed(() => {\n return displayText.value || props.placeholder || '\\u00A0'\n})\n\nconst triggerClassName = computed(() => {\n return grSelectTriggerClass({\n view: props.view,\n optionsView: effectiveOptionsView.value,\n size: props.size,\n disabled: props.disabled,\n variant: props.variant,\n underline: props.underline,\n })\n})\n\nfunction onChange(e: Event): void {\n const el = e.target as HTMLSelectElement\n\n if (props.multiple) {\n const values = Array.from(el.selectedOptions, o => o.value)\n emit('update:modelValue', values)\n return\n }\n\n emit('update:modelValue', el.value)\n}\n\nfunction clearSelection(): void {\n if (props.disabled) return\n emitValue(props.multiple ? [] : '')\n}\n</script>\n\n<template>\n <div\n v-if=\"effectiveOptionsView === 'native'\"\n data-gr-select\n :class=\"rootClass\"\n >\n <!--\n Выбор задаём per-option через `:selected` (а не `:value` на `<select>`):\n для `<select multiple>` биндинг `:value` массивом не работает — DOM не\n отражает программное изменение модели. `onChange` читает выбор из DOM.\n -->\n <select\n data-gr-select-native\n :multiple=\"multiple\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n :class=\"isLinkNative ? grSelectLinkNativeOverlayClass : [baseClassName, nativeClassName]\"\n @change=\"onChange\"\n >\n <option v-if=\"nativeClearOptionVisible\" value=\"\" :selected=\"!multiple && modelSingle === ''\">\n {{ placeholder || t('gr.select.clearOption', 'None') }}\n </option>\n\n <slot>\n <option v-if=\"nativeCustomOptionVisible\" :value=\"modelSingle\" :selected=\"!multiple\">\n {{ modelSingle }}\n </option>\n <template v-for=\"(item, index) in optionsResolved\" :key=\"index\">\n <optgroup v-if=\"isOptionGroup(item)\" :label=\"item.label\">\n <option\n v-for=\"opt in item.options\"\n :key=\"`${index}:${opt.value}`\"\n :value=\"opt.value\"\n :selected=\"multiple ? modelMultiple.includes(opt.value) : modelSingle === opt.value\"\n :disabled=\"opt.disabled\"\n >\n {{ opt.label }}\n </option>\n </optgroup>\n <option\n v-else\n :value=\"item.value\"\n :selected=\"multiple ? modelMultiple.includes(item.value) : modelSingle === item.value\"\n :disabled=\"item.disabled\"\n >\n {{ item.label }}\n </option>\n </template>\n </slot>\n </select>\n\n <span\n v-if=\"isLinkNative\"\n data-gr-select-link-label\n aria-hidden=\"true\"\n :class=\"linkNativeLabelClassName\"\n >{{ linkNativeDisplayText }}</span>\n\n <span\n v-if=\"showNativeChevron\"\n data-testid=\"gr-select-chevron\"\n class=\"absolute top-1/2 -translate-y-1/2 right-3 flex items-center text-[var(--muted-fg)] pointer-events-none\"\n >\n <span class=\"i-lucide-chevron-down block h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </div>\n\n <div\n v-else\n ref=\"rootEl\"\n v-click-outside=\"{ handler: closeDropdown, enabled: open, exclude: clickOutsideExclude }\"\n data-gr-select\n :class=\"rootClass\"\n >\n <button\n data-testid=\"gr-select-trigger\"\n data-gr-select-trigger\n type=\"button\"\n :disabled=\"disabled\"\n :aria-label=\"ariaLabel\"\n role=\"combobox\"\n aria-readonly=\"true\"\n :aria-expanded=\"open ? 'true' : 'false'\"\n :class=\"[baseClassName, triggerClassName]\"\n @click=\"toggleDropdown\"\n >\n <span class=\"min-w-0 flex-1\">\n <slot\n name=\"value\"\n :selected-options=\"selectedOptions\"\n :selected-values=\"selectedValues\"\n :display-label=\"displayLabel\"\n :placeholder=\"placeholder\"\n :has-selection=\"hasSelection\"\n >\n <span\n class=\"block truncate\"\n :class=\"!hasSelection ? 'text-[var(--muted-fg)]' : ''\"\n >\n {{ displayText }}\n </span>\n </slot>\n </span>\n\n <span\n v-if=\"panelClearVisible\"\n class=\"shrink-0 h-4 w-4\"\n aria-hidden=\"true\"\n />\n\n <span\n v-else\n data-testid=\"gr-select-chevron\"\n class=\"shrink-0 flex items-center text-[var(--muted-fg)] pointer-events-none\"\n >\n <span class=\"i-lucide-chevron-down block h-4 w-4\" aria-hidden=\"true\" />\n </span>\n </button>\n\n <button\n v-if=\"panelClearVisible\"\n data-testid=\"gr-select-clear\"\n data-gr-select-clear\n type=\"button\"\n class=\"absolute top-1/2 -translate-y-1/2 right-3 h-6 w-6 inline-flex items-center justify-center rounded-md text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--muted)_25%,transparent)] disabled:opacity-50\"\n :disabled=\"disabled\"\n :aria-label=\"resolvedClearLabel\"\n @click.stop=\"clearSelection\"\n >\n <span class=\"i-lucide-x inline-block h-4 w-4\" aria-hidden=\"true\" />\n </button>\n\n <teleport to=\"body\">\n <transition\n enter-active-class=\"transition ease-out duration-150\"\n enter-from-class=\"transform opacity-0 scale-95\"\n enter-to-class=\"transform opacity-100 scale-100\"\n leave-active-class=\"transition ease-in duration-100\"\n leave-from-class=\"transform opacity-100 scale-100\"\n leave-to-class=\"transform opacity-0 scale-95\"\n >\n <div\n v-show=\"open\"\n ref=\"panelEl\"\n data-testid=\"gr-select-panel\"\n data-gr-select-panel\n :style=\"floatingStyle\"\n >\n <div :class=\"panelClasses\">\n <div v-if=\"allowCustomValue\" class=\"p-2 border-b border-[var(--brd)]\">\n <GrInput\n ref=\"customInputRef\"\n v-model=\"customValue\"\n data-testid=\"gr-select-custom-input\"\n type=\"text\"\n :placeholder=\"resolvedCustomValuePlaceholder\"\n size=\"sm\"\n @keydown.enter.prevent=\"addCustom\"\n />\n </div>\n\n <div\n data-gr-select-listbox\n class=\"p-1 overflow-auto\"\n :style=\"{ maxHeight: `${dropdownMaxHeight}px` }\"\n role=\"listbox\"\n :aria-multiselectable=\"multiple ? 'true' : undefined\"\n >\n <button\n v-if=\"canAddCustom\"\n data-testid=\"gr-select-add-option\"\n data-gr-select-add-option\n type=\"button\"\n class=\"rounded-[10px] px-3 py-2 text-left text-[13px] hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : 'w-full',\n ]\"\n @click=\"addCustom\"\n >\n {{ t('gr.select.addOption', 'Add \"{value}\"', { value: customValue.trim() }) }}\n </button>\n\n <template v-for=\"item in panelItems\" :key=\"item.key\">\n <div\n v-if=\"item.kind === 'group'\"\n data-gr-select-group-label\n role=\"presentation\"\n class=\"px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-fg)]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : '',\n ]\"\n >\n {{ item.label }}\n </div>\n\n <button\n v-else\n data-gr-select-option\n type=\"button\"\n role=\"option\"\n :disabled=\"item.option.disabled\"\n :aria-selected=\"isSelected(item.option.value) ? 'true' : 'false'\"\n :aria-disabled=\"item.option.disabled ? 'true' : undefined\"\n class=\"rounded-[10px] px-3 py-2 text-left text-[13px]\" :class=\"[\n view === 'link' ? 'block min-w-full w-max whitespace-nowrap' : 'w-full',\n item.option.disabled ? 'cursor-not-allowed opacity-50' : 'hover:bg-[color-mix(in_srgb,var(--muted)_30%,transparent)]',\n ]\"\n @click=\"toggleValue(item.option.value)\"\n >\n <slot name=\"option\" :option=\"item.option\" :selected=\"isSelected(item.option.value)\">\n <span class=\"flex items-center gap-2 min-w-0\">\n <span\n class=\"inline-block h-4 w-4 shrink-0\"\n :class=\"isSelected(item.option.value) ? 'i-lucide-check text-[var(--primary)]' : ''\"\n aria-hidden=\"true\"\n />\n <span class=\"truncate\">{{ item.option.label }}</span>\n </span>\n </slot>\n </button>\n </template>\n </div>\n </div>\n </div>\n </transition>\n </teleport>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrTabs-Z-FDJUr_.js","names":[],"sources":["../../../../src/components/GrTabs/GrTabs.vue","../../../../src/components/GrTabs/GrTabs.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\n\nexport type GrTab = {\n value: string\n label: string\n badge?: string\n disabled?: boolean\n}\n\nexport type GrTabsProps = {\n modelValue: string\n tabs: GrTab[]\n}\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = defineProps<GrTabsProps>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\nfunction setButtonRef(el: unknown, index: number): void {\n if (el instanceof HTMLButtonElement)\n buttonRefs.value[index] = el\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n const tab = props.tabs[index]\n if (!tab || !isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n if (focus) {\n await nextTick()\n buttonRefs.value[index]?.focus()\n }\n}\n\nfunction findNextEnabled(from: number, direction: 1 | -1): number {\n const length = props.tabs.length\n if (length === 0)\n return -1\n let index = from\n for (let i = 0; i < length; i++) {\n index = (index + direction + length) % length\n const tab = props.tabs[index]\n if (tab && isEnabled(tab))\n return index\n }\n return -1\n}\n\nfunction firstEnabled(): number {\n return props.tabs.findIndex(isEnabled)\n}\n\nfunction lastEnabled(): number {\n for (let i = props.tabs.length - 1; i >= 0; i--) {\n const tab = props.tabs[i]\n if (tab && isEnabled(tab))\n return i\n }\n return -1\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = activeIndex.value < 0 ? 0 : activeIndex.value\n let nextIndex = -1\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = findNextEnabled(currentIndex, 1)\n break\n case 'ArrowLeft':\n nextIndex = findNextEnabled(currentIndex, -1)\n break\n case 'Home':\n nextIndex = firstEnabled()\n break\n case 'End':\n nextIndex = lastEnabled()\n break\n default:\n return\n }\n\n if (nextIndex < 0)\n return\n\n event.preventDefault()\n void selectByIndex(nextIndex, true)\n}\n\nfunction onClick(tab: GrTab): void {\n if (!isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n <div\n role=\"tablist\"\n data-gr-tabs\n class=\"inline-flex flex-wrap gap-1 rounded-[var(--gr-radius-lg)] border border-[var(--brd)] bg-[var(--muted)] p-1\"\n @keydown=\"onKeydown\"\n >\n <button\n v-for=\"(tab, index) in tabs\"\n :key=\"tab.value\"\n :ref=\"el => setButtonRef(el, index)\"\n type=\"button\"\n role=\"tab\"\n data-gr-tab\n :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n :disabled=\"tab.disabled\"\n :tabindex=\"tab.value === modelValue ? 0 : -1\"\n class=\"h-9 px-3 rounded-[10px] text-sm font-600 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-60 disabled:cursor-not-allowed\"\n :class=\"tab.value === modelValue\n ? 'bg-[var(--card)] text-[var(--fg)] border border-[var(--brd)]'\n : 'text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--card)_70%,transparent)]'\"\n @click=\"onClick(tab)\"\n >\n <span class=\"inline-flex items-center gap-2\">\n <span>{{ tab.label }}</span>\n <span\n v-if=\"tab.badge\"\n class=\"text-[11px] px-1.5 py-0.5 rounded-full bg-[var(--secondary)] text-[var(--secondary-fg)]\"\n >\n {{ tab.badge }}\n </span>\n </span>\n </button>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, ref } from 'vue'\n\nexport type GrTab = {\n value: string\n label: string\n badge?: string\n disabled?: boolean\n}\n\nexport type GrTabsProps = {\n modelValue: string\n tabs: GrTab[]\n}\n\n/**\n * GrTabs — горизонтальная группа вкладок с паттерном WAI-ARIA `tablist`.\n *\n * A11y:\n * - `role=\"tablist\"` на корне, `role=\"tab\"` на каждой вкладке.\n * - Roving `tabindex`: активная вкладка `0`, остальные `-1`.\n * - Клавиатура: `ArrowLeft`/`ArrowRight` — цикличный переход, `Home`/`End` — к первой/последней.\n * - При переключении стрелками DOM-фокус программно переносится на новую вкладку.\n *\n * Сам компонент не рендерит `tabpanel` — это ответственность консьюмера (по `aria-controls`/внешней разметке).\n */\nconst props = defineProps<GrTabsProps>()\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst buttonRefs = ref<HTMLButtonElement[]>([])\n\nfunction setButtonRef(el: unknown, index: number): void {\n if (el instanceof HTMLButtonElement)\n buttonRefs.value[index] = el\n}\n\nconst activeIndex = computed(() => props.tabs.findIndex(t => t.value === props.modelValue))\n\nfunction isEnabled(tab: GrTab): boolean {\n return !tab.disabled\n}\n\nasync function selectByIndex(index: number, focus = false): Promise<void> {\n const tab = props.tabs[index]\n if (!tab || !isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n if (focus) {\n await nextTick()\n buttonRefs.value[index]?.focus()\n }\n}\n\nfunction findNextEnabled(from: number, direction: 1 | -1): number {\n const length = props.tabs.length\n if (length === 0)\n return -1\n let index = from\n for (let i = 0; i < length; i++) {\n index = (index + direction + length) % length\n const tab = props.tabs[index]\n if (tab && isEnabled(tab))\n return index\n }\n return -1\n}\n\nfunction firstEnabled(): number {\n return props.tabs.findIndex(isEnabled)\n}\n\nfunction lastEnabled(): number {\n for (let i = props.tabs.length - 1; i >= 0; i--) {\n const tab = props.tabs[i]\n if (tab && isEnabled(tab))\n return i\n }\n return -1\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n if (props.tabs.length === 0)\n return\n\n const currentIndex = activeIndex.value < 0 ? 0 : activeIndex.value\n let nextIndex = -1\n\n switch (event.key) {\n case 'ArrowRight':\n nextIndex = findNextEnabled(currentIndex, 1)\n break\n case 'ArrowLeft':\n nextIndex = findNextEnabled(currentIndex, -1)\n break\n case 'Home':\n nextIndex = firstEnabled()\n break\n case 'End':\n nextIndex = lastEnabled()\n break\n default:\n return\n }\n\n if (nextIndex < 0)\n return\n\n event.preventDefault()\n void selectByIndex(nextIndex, true)\n}\n\nfunction onClick(tab: GrTab): void {\n if (!isEnabled(tab))\n return\n if (tab.value !== props.modelValue)\n emit('update:modelValue', tab.value)\n}\n</script>\n\n<template>\n <div\n role=\"tablist\"\n data-gr-tabs\n class=\"inline-flex flex-wrap gap-1 rounded-[var(--gr-radius-lg)] border border-[var(--brd)] bg-[var(--muted)] p-1\"\n @keydown=\"onKeydown\"\n >\n <button\n v-for=\"(tab, index) in tabs\"\n :key=\"tab.value\"\n :ref=\"el => setButtonRef(el, index)\"\n type=\"button\"\n role=\"tab\"\n data-gr-tab\n :aria-selected=\"tab.value === modelValue ? 'true' : 'false'\"\n :aria-disabled=\"tab.disabled ? 'true' : undefined\"\n :disabled=\"tab.disabled\"\n :tabindex=\"tab.value === modelValue ? 0 : -1\"\n class=\"h-9 px-3 rounded-[10px] text-sm font-600 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-60 disabled:cursor-not-allowed\"\n :class=\"tab.value === modelValue\n ? 'bg-[var(--card)] text-[var(--fg)] border border-[var(--brd)]'\n : 'text-[var(--muted-fg)] hover:text-[var(--fg)] hover:bg-[color-mix(in_srgb,var(--card)_70%,transparent)]'\"\n @click=\"onClick(tab)\"\n >\n <span class=\"inline-flex items-center gap-2\">\n <span>{{ tab.label }}</span>\n <span\n v-if=\"tab.badge\"\n class=\"text-[11px] px-1.5 py-0.5 rounded-full bg-[var(--secondary)] text-[var(--secondary-fg)]\"\n >\n {{ tab.badge }}\n </span>\n </span>\n </button>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrTextarea-D56YxhKq.js","names":[],"sources":["../../../../src/components/GrTextarea/GrTextarea.vue","../../../../src/components/GrTextarea/GrTextarea.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed } from 'vue'\nimport { type GrTextareaState, grTextareaClass } from './grTextareaStyles'\n\nconst props = withDefaults(defineProps<{\n modelValue: string\n placeholder?: string\n autocomplete?: string\n disabled?: boolean\n invalid?: boolean\n state?: GrTextareaState\n name?: string\n id?: string\n rows?: number\n}>(), {\n placeholder: undefined,\n autocomplete: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n rows: 4,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nexport type GrTextareaProps = typeof props\n\nconst className = computed(() => grTextareaClass({\n state: props.state,\n invalid: props.invalid,\n}))\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n</script>\n\n<template>\n <textarea\n :id=\"id\"\n data-gr-textarea\n :name=\"name\"\n :rows=\"rows\"\n :autocomplete=\"autocomplete\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid ? 'true' : undefined\"\n class=\"w-full rounded-md border bg-[var(--bg)] px-3 py-2 text-[14px] text-[var(--fg)] placeholder:text-[var(--muted-fg)] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :class=\"className\"\n @input=\"onInput\"\n />\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrTextarea — многострочное поле ввода GR-примитива.\n *\n * Состояния:\n * - `state`: визуальный оттенок рамки (`default | success | warning | danger`).\n * - `invalid`: форсирует `danger`-состояние и проставляет `aria-invalid=\"true\"`.\n */\nimport { computed } from 'vue'\nimport { type GrTextareaState, grTextareaClass } from './grTextareaStyles'\n\nconst props = withDefaults(defineProps<{\n modelValue: string\n placeholder?: string\n autocomplete?: string\n disabled?: boolean\n invalid?: boolean\n state?: GrTextareaState\n name?: string\n id?: string\n rows?: number\n}>(), {\n placeholder: undefined,\n autocomplete: undefined,\n disabled: false,\n invalid: false,\n state: 'default',\n name: undefined,\n id: undefined,\n rows: 4,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nexport type GrTextareaProps = typeof props\n\nconst className = computed(() => grTextareaClass({\n state: props.state,\n invalid: props.invalid,\n}))\n\nfunction onInput(e: Event): void {\n emit('update:modelValue', (e.target as HTMLTextAreaElement).value)\n}\n</script>\n\n<template>\n <textarea\n :id=\"id\"\n data-gr-textarea\n :name=\"name\"\n :rows=\"rows\"\n :autocomplete=\"autocomplete\"\n :placeholder=\"placeholder\"\n :disabled=\"disabled\"\n :value=\"modelValue\"\n :aria-invalid=\"invalid ? 'true' : undefined\"\n class=\"w-full rounded-md border bg-[var(--bg)] px-3 py-2 text-[14px] text-[var(--fg)] placeholder:text-[var(--muted-fg)] transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] disabled:opacity-50 disabled:cursor-not-allowed\"\n :class=\"className\"\n @input=\"onInput\"\n />\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAWA,MAAM,QAAQ;EAqBd,MAAM,OAAO;EAMb,MAAM,YAAY,eAAe,gBAAgB;GAC/C,OAAO,MAAM;GACb,SAAS,MAAM;EACjB,CAAC,CAAC;EAEF,SAAS,QAAQ,GAAgB;GAC/B,KAAK,qBAAsB,EAAE,OAA+B,KAAK;EACnE;;uBAIE,mBAaE,YAAA;IAZC,IAAI,QAAA;IACL,oBAAA;IACC,MAAM,QAAA;IACN,MAAM,QAAA;IACN,cAAc,QAAA;IACd,aAAa,QAAA;IACb,UAAU,QAAA;IACV,OAAO,QAAA;IACP,gBAAc,QAAA,UAAO,SAAY,KAAA;IAClC,OAAK,eAAA,CAAC,6QACE,UAAA,KAAS,CAAA;IACT"}
|