@feugene/granularity 0.11.0 → 0.13.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/GrBadge.css +1 -1
- package/dist/GrFormFile.css +1 -1
- package/dist/GrToaster.css +1 -1
- package/dist/GrTree.css +1 -1
- package/dist/chunks/{config-ClhKPJvg.js → config-23WtUiAL.js} +1 -1
- package/dist/chunks/config-23WtUiAL.js.map +1 -0
- package/dist/chunks/config-8Pcutu1j.js.map +1 -0
- package/dist/chunks/{config-1uSYl98Y.js → config-B0i5r8kH.js} +1 -1
- package/dist/chunks/config-B0i5r8kH.js.map +1 -0
- package/dist/chunks/{config-BOlr7qw7.js → config-B5Rknzkd.js} +33 -39
- package/dist/chunks/config-B5Rknzkd.js.map +1 -0
- package/dist/chunks/config-B7W9VlZ7.js +5 -0
- package/dist/chunks/config-B7W9VlZ7.js.map +1 -0
- package/dist/chunks/config-BDSHekVC.js +84 -0
- package/dist/chunks/config-BDSHekVC.js.map +1 -0
- package/dist/chunks/config-BLHqZhy-.js.map +1 -0
- package/dist/chunks/{config-eYLZYOUS2.js → config-BMKNHFMD2.js} +15 -15
- package/dist/chunks/config-BMKNHFMD2.js.map +1 -0
- package/dist/chunks/config-BUHuGBik2.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-BX1JTrkV.js.map +1 -0
- package/dist/chunks/config-BZFUM3Ky.js +75 -0
- package/dist/chunks/config-BZFUM3Ky.js.map +1 -0
- package/dist/chunks/{config-DUcu1D68.js → config-BmNT0Fmx.js} +2 -2
- package/dist/chunks/config-BmNT0Fmx.js.map +1 -0
- package/dist/chunks/{config-C49QUoJL.js → config-BvVq2gbd.js} +1 -1
- package/dist/chunks/{config-C49QUoJL.js.map → config-BvVq2gbd.js.map} +1 -1
- package/dist/chunks/{config-CrG1XiE7.js → config-C4hJxXDa.js} +5 -5
- package/dist/chunks/config-C4hJxXDa.js.map +1 -0
- package/dist/chunks/config-CB4RVt9M.js +66 -0
- package/dist/chunks/config-CB4RVt9M.js.map +1 -0
- package/dist/chunks/config-COE_vZ-l.js +52 -0
- package/dist/chunks/config-COE_vZ-l.js.map +1 -0
- package/dist/chunks/{config-CziwTDDL.js → config-CPdmr7tC.js} +1 -1
- package/dist/chunks/{config-CziwTDDL.js.map → config-CPdmr7tC.js.map} +1 -1
- package/dist/chunks/{config-BIRO0vDJ2.js → config-DPDFYzIa.js} +2 -2
- package/dist/chunks/config-DPDFYzIa.js.map +1 -0
- package/dist/chunks/{config-DnvPqu4g.js → config-DRKXJ9PW2.js} +1 -1
- package/dist/chunks/config-DRKXJ9PW2.js.map +1 -0
- package/dist/chunks/config-DToHb81g.js +45 -0
- package/dist/chunks/config-DToHb81g.js.map +1 -0
- package/dist/chunks/{config-jBp9wVv-.js → config-D_myOZbA.js} +1 -1
- package/dist/chunks/{config-jBp9wVv-.js.map → config-D_myOZbA.js.map} +1 -1
- package/dist/chunks/{config-D_R56_gT.js → config-Dg_6FTvJ.js} +1 -1
- package/dist/chunks/config-Dg_6FTvJ.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-DpqOnJiz.js.map +1 -0
- package/dist/chunks/config-Dqy0rPPO2.js.map +1 -0
- package/dist/chunks/config-Droqn55j.js +8 -0
- package/dist/chunks/config-Droqn55j.js.map +1 -0
- package/dist/chunks/{config-C4snOIXg.js → config-KXuionN3.js} +1 -1
- package/dist/chunks/{config-C4snOIXg.js.map → config-KXuionN3.js.map} +1 -1
- package/dist/chunks/config-LGrZIdaZ.js.map +1 -0
- package/dist/chunks/{config-DezDih8_.js → config-LqDC_rvp.js} +2 -2
- package/dist/chunks/config-LqDC_rvp.js.map +1 -0
- package/dist/chunks/config-QaIc_gRa2.js.map +1 -0
- package/dist/chunks/config-U4m9PSql2.js.map +1 -0
- package/dist/chunks/{config-B7IIWGt_2.js → config-XmTv4pnI.js} +2 -2
- package/dist/chunks/config-XmTv4pnI.js.map +1 -0
- package/dist/chunks/config-eXB87DOi.js +9 -0
- package/dist/chunks/config-eXB87DOi.js.map +1 -0
- package/dist/chunks/{config-C7NpDrfO.js → config-gZWR75Bh2.js} +1 -1
- package/dist/chunks/config-gZWR75Bh2.js.map +1 -0
- package/dist/chunks/config-ipvU0lzP.js.map +1 -0
- package/dist/chunks/config-xR4XVmcy2.js.map +1 -0
- package/dist/chunks/context-Bfrgsluh.js +9 -0
- package/dist/chunks/context-Bfrgsluh.js.map +1 -0
- package/dist/chunks/context-DdNIxa1w.js +9 -0
- package/dist/chunks/context-DdNIxa1w.js.map +1 -0
- package/dist/chunks/context-DfWYCBB-.js +129 -0
- package/dist/chunks/context-DfWYCBB-.js.map +1 -0
- package/dist/chunks/{en-BdtiS2d3.js → en-Cr6EkG8c.js} +52 -4
- package/dist/chunks/en-Cr6EkG8c.js.map +1 -0
- package/dist/chunks/{es-DBhctWg-.js → es-DuYb1Qju.js} +3 -3
- package/dist/chunks/{es-DBhctWg-.js.map → es-DuYb1Qju.js.map} +1 -1
- package/dist/chunks/{es-BGRMZbe9.js → es-i08e9Sdo.js} +52 -4
- package/dist/chunks/es-i08e9Sdo.js.map +1 -0
- package/dist/chunks/{grBadgeStyles-DrycBuKT.js → grBadgeStyles-D3dFjr_N.js} +12 -12
- package/dist/chunks/grBadgeStyles-D3dFjr_N.js.map +1 -0
- package/dist/chunks/{grButtonStyles-C7Yga_Q1.js → grButtonStyles-DRBgDmOp.js} +28 -28
- package/dist/chunks/grButtonStyles-DRBgDmOp.js.map +1 -0
- package/dist/chunks/{grDropdownStyles-B_-DKytw.js → grDropdownStyles-HBPkghVr.js} +2 -2
- package/dist/chunks/{grDropdownStyles-B_-DKytw.js.map → grDropdownStyles-HBPkghVr.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/{grModalStyles-DWd3i05Q.js → grModalStyles-D8-shx9A.js} +1 -1
- package/dist/chunks/grModalStyles-D8-shx9A.js.map +1 -0
- package/dist/chunks/{grSelectStyles-CLK5hRd3.js → grSelectStyles-CwMUQrBZ.js} +12 -12
- package/dist/chunks/grSelectStyles-CwMUQrBZ.js.map +1 -0
- package/dist/chunks/{grStyle-Blc9otAx.js → grStyle-CdvxTXPH.js} +2 -2
- package/dist/chunks/grStyle-CdvxTXPH.js.map +1 -0
- package/dist/chunks/{granularityI18n-DoV7Ca2m.js → granularityI18n-SH0I--GW.js} +1 -1
- package/dist/chunks/{granularityI18n-DoV7Ca2m.js.map → granularityI18n-SH0I--GW.js.map} +1 -1
- package/dist/chunks/{ru-BFCnOiML.js → ru-B5XOOYZt.js} +52 -4
- package/dist/chunks/ru-B5XOOYZt.js.map +1 -0
- package/dist/chunks/{safelist-Do2RtzLB.js → safelist-BvO8HPnE.js} +1 -1
- package/dist/chunks/{safelist-Do2RtzLB.js.map → safelist-BvO8HPnE.js.map} +1 -1
- package/dist/chunks/shared-D-v9lit0.js +188 -0
- package/dist/chunks/shared-D-v9lit0.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/GrAlert/chunks/GrAlert-B9gmpoPC.js +251 -0
- package/dist/components/GrAlert/chunks/GrAlert-B9gmpoPC.js.map +1 -0
- package/dist/components/GrAlert/index.js +2 -2
- package/dist/components/GrAutocomplete/chunks/GrAutocomplete-BVLoQ5tZ.js +499 -0
- package/dist/components/GrAutocomplete/chunks/GrAutocomplete-BVLoQ5tZ.js.map +1 -0
- package/dist/components/GrAutocomplete/index.js +3 -0
- package/dist/components/GrAvatar/chunks/{GrAvatar-96CpTCq5.js → GrAvatar-CTOUVBF7.js} +1 -1
- package/dist/components/GrAvatar/chunks/GrAvatar-CTOUVBF7.js.map +1 -0
- package/dist/components/GrAvatar/index.js +1 -1
- package/dist/components/GrBadge/chunks/{GrBadge-B77XlaqE.js → GrBadge-D1jefy4S.js} +12 -8
- package/dist/components/GrBadge/chunks/GrBadge-D1jefy4S.js.map +1 -0
- package/dist/components/GrBadge/index.js +2 -2
- package/dist/components/GrBadgeWrap/chunks/{GrBadgeWrap-CcktMOdg.js → GrBadgeWrap-DWDxHdiQ.js} +1 -1
- package/dist/components/GrBadgeWrap/chunks/GrBadgeWrap-DWDxHdiQ.js.map +1 -0
- package/dist/components/GrBadgeWrap/index.js +1 -1
- package/dist/components/GrBottomNav/chunks/{GrBottomNav-usuMgG8_.js → GrBottomNav-vSE4LXmk.js} +2 -2
- package/dist/components/GrBottomNav/chunks/GrBottomNav-vSE4LXmk.js.map +1 -0
- package/dist/components/GrBottomNav/index.js +1 -1
- package/dist/components/GrButton/chunks/{GrButton-BlffdeJr.js → GrButton-DCi4CUpo.js} +18 -14
- package/dist/components/GrButton/chunks/GrButton-DCi4CUpo.js.map +1 -0
- package/dist/components/GrButton/index.js +4 -4
- package/dist/components/GrCard/chunks/{GrCard-DUNMkuHW.js → GrCard-CxCjyHMb.js} +1 -1
- package/dist/components/GrCard/chunks/GrCard-CxCjyHMb.js.map +1 -0
- package/dist/components/GrCard/index.js +1 -1
- package/dist/components/GrCheckbox/chunks/{GrCheckbox-DJhzZZdO.js → GrCheckbox-BbIDRXtl.js} +5 -5
- package/dist/components/GrCheckbox/chunks/GrCheckbox-BbIDRXtl.js.map +1 -0
- package/dist/components/GrCheckbox/index.js +1 -1
- package/dist/components/GrCollapse/chunks/{GrCollapse-CPPLh_xU.js → GrCollapse-DApXztn8.js} +6 -6
- package/dist/components/GrCollapse/chunks/GrCollapse-DApXztn8.js.map +1 -0
- package/dist/components/GrCollapse/index.js +2 -2
- package/dist/components/GrCommandPalette/chunks/GrCommandPalette-6OyvNbek.js +410 -0
- package/dist/components/GrCommandPalette/chunks/GrCommandPalette-6OyvNbek.js.map +1 -0
- package/dist/components/GrCommandPalette/index.js +3 -0
- package/dist/components/GrConfigProvider/chunks/GrConfigProvider-BtyeBGm8.js +57 -0
- package/dist/components/GrConfigProvider/chunks/GrConfigProvider-BtyeBGm8.js.map +1 -0
- package/dist/components/GrConfigProvider/index.js +4 -0
- package/dist/components/GrConfirmDialog/chunks/{GrConfirmDialog-BWYKCsHd.js → GrConfirmDialog-e4120mWw.js} +5 -5
- package/dist/components/GrConfirmDialog/chunks/GrConfirmDialog-e4120mWw.js.map +1 -0
- package/dist/components/GrConfirmDialog/index.js +1 -1
- package/dist/components/GrDataTable/chunks/GrDataTable-C1CzxV0p.js +307 -0
- package/dist/components/GrDataTable/chunks/GrDataTable-C1CzxV0p.js.map +1 -0
- package/dist/components/GrDataTable/index.js +2 -2
- package/dist/components/GrDialog/chunks/{GrDialog-5DAS-1Lb.js → GrDialog-BPMvDHOz.js} +6 -6
- package/dist/components/GrDialog/chunks/GrDialog-BPMvDHOz.js.map +1 -0
- package/dist/components/GrDialog/index.js +1 -1
- package/dist/components/GrDialogService/chunks/{GrDialogService-DY_fmaMu.js → GrDialogService-CYXCTGm3.js} +36 -11
- package/dist/components/GrDialogService/chunks/GrDialogService-CYXCTGm3.js.map +1 -0
- package/dist/components/GrDialogService/index.js +2 -2
- package/dist/components/GrDivider/chunks/GrDivider-BdENZ1w0.js +54 -0
- package/dist/components/GrDivider/chunks/GrDivider-BdENZ1w0.js.map +1 -0
- package/dist/components/GrDivider/index.js +3 -0
- package/dist/components/GrDrawer/chunks/{GrDrawer-D1kzsjXN.js → GrDrawer-KevdZ5BB.js} +41 -17
- package/dist/components/GrDrawer/chunks/GrDrawer-KevdZ5BB.js.map +1 -0
- package/dist/components/GrDrawer/index.js +2 -2
- package/dist/components/GrDropdown/chunks/{GrDropdown-BXb5Cxxf.js → GrDropdown-BKoy8hm-.js} +91 -5
- package/dist/components/GrDropdown/chunks/GrDropdown-BKoy8hm-.js.map +1 -0
- package/dist/components/GrDropdown/index.js +2 -2
- package/dist/components/GrDropdownMenu/chunks/{GrDropdownMenu-DFEJLPcV.js → GrDropdownMenu-zCatXzmt.js} +11 -11
- package/dist/components/GrDropdownMenu/chunks/GrDropdownMenu-zCatXzmt.js.map +1 -0
- package/dist/components/GrDropdownMenu/index.js +1 -1
- package/dist/components/GrEmptyState/chunks/{GrEmptyState-CA3BiTV7.js → GrEmptyState-CNb0BzjG.js} +3 -3
- package/dist/components/GrEmptyState/chunks/GrEmptyState-CNb0BzjG.js.map +1 -0
- package/dist/components/GrEmptyState/index.js +1 -1
- package/dist/components/GrFileUpload/chunks/{GrFileUpload-DvWPpiJS.js → GrFileUpload-CnLgUGDF.js} +12 -12
- package/dist/components/GrFileUpload/chunks/GrFileUpload-CnLgUGDF.js.map +1 -0
- package/dist/components/GrFileUpload/index.js +1 -1
- package/dist/components/GrForm/chunks/GrForm-CdaFjcyl.js +234 -0
- package/dist/components/GrForm/chunks/GrForm-CdaFjcyl.js.map +1 -0
- package/dist/components/GrForm/index.js +4 -0
- package/dist/components/GrFormField/chunks/GrFormField-CXCDBd99.js +100 -0
- package/dist/components/GrFormField/chunks/GrFormField-CXCDBd99.js.map +1 -0
- package/dist/components/GrFormField/index.js +3 -2
- package/dist/components/GrFormFile/chunks/{GrFormFile-CXcqqdvV.js → GrFormFile-CqacSbUl.js} +9 -9
- package/dist/components/GrFormFile/chunks/GrFormFile-CqacSbUl.js.map +1 -0
- package/dist/components/GrFormFile/index.js +1 -1
- package/dist/components/GrFormSection/chunks/{GrFormSection-Ce21jcgo.js → GrFormSection-C3w9DQJf.js} +1 -1
- package/dist/components/GrFormSection/chunks/GrFormSection-C3w9DQJf.js.map +1 -0
- package/dist/components/GrFormSection/index.js +1 -1
- package/dist/components/GrImageViewer/chunks/{GrImageViewer-OCUIrNh2.js → GrImageViewer-DDLJkvIU.js} +312 -223
- package/dist/components/GrImageViewer/chunks/GrImageViewer-DDLJkvIU.js.map +1 -0
- package/dist/components/GrImageViewer/index.js +1 -1
- package/dist/components/GrInput/chunks/GrInput-C1VBL0dg.js +337 -0
- package/dist/components/GrInput/chunks/GrInput-C1VBL0dg.js.map +1 -0
- package/dist/components/GrInput/index.js +2 -2
- package/dist/components/GrInputTag/chunks/{GrInputTag-zMgFqp2g.js → GrInputTag-BMk9jm42.js} +6 -6
- package/dist/components/GrInputTag/chunks/GrInputTag-BMk9jm42.js.map +1 -0
- package/dist/components/GrInputTag/index.js +2 -2
- package/dist/components/GrKbd/chunks/GrKbd-DTspwtoN.js +22 -0
- package/dist/components/GrKbd/chunks/GrKbd-DTspwtoN.js.map +1 -0
- package/dist/components/GrKbd/index.js +3 -0
- package/dist/components/GrLink/chunks/{GrLink-CYUe-Q8k.js → GrLink-BP0YrnL9.js} +1 -1
- package/dist/components/GrLink/chunks/{GrLink-CYUe-Q8k.js.map → GrLink-BP0YrnL9.js.map} +1 -1
- package/dist/components/GrLink/index.js +2 -2
- package/dist/components/GrList/chunks/{GrList-Dx772Ns4.js → GrList-5RA-tZzE.js} +3 -3
- package/dist/components/GrList/chunks/GrList-5RA-tZzE.js.map +1 -0
- package/dist/components/GrList/index.js +1 -1
- package/dist/components/GrLoading/chunks/{GrLoading--X_7rdbb.js → GrLoading-fRDtVfi7.js} +3 -3
- package/dist/components/GrLoading/chunks/GrLoading-fRDtVfi7.js.map +1 -0
- package/dist/components/GrLoading/index.js +2 -2
- package/dist/components/GrModal/chunks/{GrModal-BkjW9jZS.js → GrModal-BTu1-5eY.js} +4 -57
- package/dist/components/GrModal/chunks/GrModal-BTu1-5eY.js.map +1 -0
- package/dist/components/GrModal/index.js +3 -3
- package/dist/components/GrNavbar/chunks/{GrNavbar-DW3MiIIf.js → GrNavbar-keKT_mIM.js} +3 -3
- package/dist/components/GrNavbar/chunks/GrNavbar-keKT_mIM.js.map +1 -0
- package/dist/components/GrNavbar/index.js +1 -1
- package/dist/components/GrNumberInput/chunks/{GrNumberInput-CldPIWQx.js → GrNumberInput-l9ZOHG9D.js} +112 -28
- package/dist/components/GrNumberInput/chunks/GrNumberInput-l9ZOHG9D.js.map +1 -0
- package/dist/components/GrNumberInput/index.js +2 -2
- package/dist/components/GrPagination/chunks/{GrPagination-Bu9wv6it.js → GrPagination-C5Y69CuK.js} +59 -16
- package/dist/components/GrPagination/chunks/GrPagination-C5Y69CuK.js.map +1 -0
- package/dist/components/GrPagination/index.js +1 -1
- package/dist/components/GrProgressBar/chunks/{GrProgressBar-CC3z-Zqp.js → GrProgressBar-Dqg4Fj9S.js} +2 -2
- package/dist/components/GrProgressBar/chunks/GrProgressBar-Dqg4Fj9S.js.map +1 -0
- package/dist/components/GrProgressBar/index.js +2 -2
- package/dist/components/GrPromptDialog/chunks/{GrPromptDialog-TmWXbpEP.js → GrPromptDialog-DNUjRVB9.js} +7 -7
- package/dist/components/GrPromptDialog/chunks/GrPromptDialog-DNUjRVB9.js.map +1 -0
- package/dist/components/GrPromptDialog/index.js +2 -2
- package/dist/components/GrRadio/chunks/{GrRadio-CPTixXaY.js → GrRadio-DlhxPGqf.js} +5 -7
- package/dist/components/GrRadio/chunks/GrRadio-DlhxPGqf.js.map +1 -0
- package/dist/components/GrRadio/index.js +2 -2
- package/dist/components/GrRadioGroup/chunks/{GrRadioGroup-vKZCbkCp.js → GrRadioGroup-BXt9iw4q.js} +7 -5
- package/dist/components/GrRadioGroup/chunks/GrRadioGroup-BXt9iw4q.js.map +1 -0
- package/dist/components/GrRadioGroup/index.js +2 -2
- package/dist/components/GrRating/chunks/GrRating-Co-3Rk4h.js +241 -0
- package/dist/components/GrRating/chunks/GrRating-Co-3Rk4h.js.map +1 -0
- package/dist/components/GrRating/index.js +3 -0
- package/dist/components/GrResponseErrorBanner/chunks/{GrResponseErrorBanner-BWJNe2gr.js → GrResponseErrorBanner-2CvM7Z08.js} +2 -2
- package/dist/components/GrResponseErrorBanner/chunks/{GrResponseErrorBanner-BWJNe2gr.js.map → GrResponseErrorBanner-2CvM7Z08.js.map} +1 -1
- package/dist/components/GrResponseErrorBanner/chunks/{GrResponseErrorBanner-Cdu9ekK9.js → GrResponseErrorBanner-C8NGx8pE.js} +3 -3
- package/dist/components/GrResponseErrorBanner/chunks/{GrResponseErrorBanner-Cdu9ekK9.js.map → GrResponseErrorBanner-C8NGx8pE.js.map} +1 -1
- package/dist/components/GrResponseErrorBanner/index.js +2 -2
- package/dist/components/GrSegmented/chunks/{GrSegmented-C1y0UXpQ.js → GrSegmented-CTd3n4PA.js} +14 -11
- package/dist/components/GrSegmented/chunks/GrSegmented-CTd3n4PA.js.map +1 -0
- package/dist/components/GrSegmented/index.js +2 -2
- package/dist/components/GrSelect/chunks/{GrSelect-RShK21lK.js → GrSelect-Dn3FgJ3Z.js} +293 -87
- package/dist/components/GrSelect/chunks/GrSelect-Dn3FgJ3Z.js.map +1 -0
- package/dist/components/GrSelect/index.js +2 -2
- package/dist/components/GrSidebar/chunks/{GrSidebar-DkWozzwA.js → GrSidebar-cvnzBfj3.js} +7 -7
- package/dist/components/GrSidebar/chunks/GrSidebar-cvnzBfj3.js.map +1 -0
- package/dist/components/GrSidebar/index.js +1 -1
- package/dist/components/GrSkeleton/chunks/{GrSkeleton-DsN-_CDZ.js → GrSkeleton-BucA5F4J.js} +1 -1
- package/dist/components/GrSkeleton/chunks/GrSkeleton-BucA5F4J.js.map +1 -0
- package/dist/components/GrSkeleton/index.js +2 -2
- package/dist/components/GrSlider/chunks/GrSlider-CzzJ3bD-.js +286 -0
- package/dist/components/GrSlider/chunks/GrSlider-CzzJ3bD-.js.map +1 -0
- package/dist/components/GrSlider/index.js +3 -0
- package/dist/components/GrStatistic/chunks/GrStatistic-gHiAwrX5.js +128 -0
- package/dist/components/GrStatistic/chunks/GrStatistic-gHiAwrX5.js.map +1 -0
- package/dist/components/GrStatistic/index.js +3 -0
- package/dist/components/GrSwitch/chunks/{GrSwitch-DAioyccZ.js → GrSwitch-CJdRvS0s.js} +16 -7
- package/dist/components/GrSwitch/chunks/GrSwitch-CJdRvS0s.js.map +1 -0
- package/dist/components/GrSwitch/index.js +2 -2
- package/dist/components/GrTabPanels/chunks/GrTabPanels-DeEMgb_y.js +68 -0
- package/dist/components/GrTabPanels/chunks/GrTabPanels-DeEMgb_y.js.map +1 -0
- package/dist/components/GrTabPanels/index.js +3 -0
- package/dist/components/GrTable/chunks/{GrTable-Db3hRnKA.js → GrTable-sNvsA8wa.js} +24 -11
- package/dist/components/GrTable/chunks/GrTable-sNvsA8wa.js.map +1 -0
- package/dist/components/GrTable/index.js +2 -2
- package/dist/components/GrTabs/chunks/{GrTabs-Z-FDJUr_.js → GrTabs-BqTak0SR.js} +9 -4
- package/dist/components/GrTabs/chunks/GrTabs-BqTak0SR.js.map +1 -0
- package/dist/components/GrTabs/index.js +2 -2
- package/dist/components/GrTextarea/chunks/{GrTextarea-D56YxhKq.js → GrTextarea-DIYBAPpP.js} +16 -6
- package/dist/components/GrTextarea/chunks/GrTextarea-DIYBAPpP.js.map +1 -0
- package/dist/components/GrTextarea/index.js +2 -2
- package/dist/components/GrToaster/chunks/{GrToaster-eI8YvnIo.js → GrToaster-BVHjIHcM.js} +52 -11
- package/dist/components/GrToaster/chunks/GrToaster-BVHjIHcM.js.map +1 -0
- package/dist/components/GrToaster/index.js +2 -2
- package/dist/components/GrTooltip/chunks/{GrTooltip-BeyZ8ssR.js → GrTooltip-BMKH2lIx.js} +3 -3
- package/dist/components/GrTooltip/chunks/GrTooltip-BMKH2lIx.js.map +1 -0
- package/dist/components/GrTooltip/index.js +1 -1
- package/dist/components/GrTree/chunks/{GrTree-D3ODe2dB.js → GrTree-_12ChXRQ.js} +108 -9
- package/dist/components/GrTree/chunks/GrTree-_12ChXRQ.js.map +1 -0
- package/dist/components/GrTree/index.js +2 -2
- package/dist/components/GrTreeSelect/chunks/{GrTreeSelect-B2xBKs5Q.js → GrTreeSelect-CdaLG7Xq.js} +10 -10
- package/dist/components/GrTreeSelect/chunks/GrTreeSelect-CdaLG7Xq.js.map +1 -0
- package/dist/components/GrTreeSelect/index.js +2 -2
- package/dist/composables/useToast.js +3 -1
- package/dist/composables/useToast.js.map +1 -1
- package/dist/directives/loading.js +1 -1
- package/dist/granular-provider-node.js +6 -6
- package/dist/granular-provider-node.js.map +1 -1
- package/dist/granular-provider.js +1 -1
- package/dist/i18n/all.js +1 -1
- package/dist/i18n/index.js +1 -1
- package/dist/index.js +112 -87
- package/dist/index.js.map +1 -1
- package/dist/styles/base.css +30 -8
- package/dist/styles/index.css +6 -3
- package/dist/styles/preflight.css +8 -4
- package/dist/styles/themes/dark.css +52 -40
- package/dist/styles/themes/light.css +70 -45
- package/dist/styles/tokens.css +20 -20
- package/dist/types/src/components/GrAlert/GrAlert.vue.d.ts +26 -14
- package/dist/types/src/components/GrAlert/defaults.d.ts +17 -0
- package/dist/types/src/components/GrAlert/grAlertStyles.d.ts +55 -0
- package/dist/types/src/components/GrAlert/index.d.ts +4 -1
- package/dist/types/src/components/GrAutocomplete/GrAutocomplete.vue.d.ts +153 -0
- package/dist/types/src/components/GrAutocomplete/config.d.ts +1 -0
- package/dist/types/src/components/GrAutocomplete/defaults.d.ts +15 -0
- package/dist/types/src/components/GrAutocomplete/grAutocompleteStyles.d.ts +27 -0
- package/dist/types/src/components/GrAutocomplete/index.d.ts +6 -0
- package/dist/types/src/components/GrAutocomplete/safelist.d.ts +1 -0
- package/dist/types/src/components/GrAvatar/GrAvatar.vue.d.ts +1 -1
- package/dist/types/src/components/GrBadge/GrBadge.vue.d.ts +7 -7
- package/dist/types/src/components/GrBadge/defaults.d.ts +15 -0
- package/dist/types/src/components/GrBadge/index.d.ts +1 -0
- package/dist/types/src/components/GrBadgeWrap/GrBadgeWrap.vue.d.ts +1 -1
- package/dist/types/src/components/GrButton/GrButton.vue.d.ts +12 -12
- package/dist/types/src/components/GrButton/defaults.d.ts +25 -0
- package/dist/types/src/components/GrButton/grButtonStyles.d.ts +2 -2
- package/dist/types/src/components/GrButton/index.d.ts +1 -0
- package/dist/types/src/components/GrCheckbox/GrCheckbox.vue.d.ts +4 -4
- package/dist/types/src/components/GrCollapse/GrCollapse.vue.d.ts +2 -2
- package/dist/types/src/components/GrCollapse/GrCollapseItem.vue.d.ts +1 -1
- package/dist/types/src/components/GrCommandPalette/GrCommandPalette.vue.d.ts +128 -0
- package/dist/types/src/components/GrCommandPalette/config.d.ts +1 -0
- package/dist/types/src/components/GrCommandPalette/filtering.d.ts +35 -0
- package/dist/types/src/components/GrCommandPalette/grCommandPaletteStyles.d.ts +20 -0
- package/dist/types/src/components/GrCommandPalette/hotkey.d.ts +23 -0
- package/dist/types/src/components/GrCommandPalette/index.d.ts +6 -0
- package/dist/types/src/components/GrCommandPalette/safelist.d.ts +1 -0
- package/dist/types/src/components/GrConfigProvider/GrConfigProvider.vue.d.ts +59 -0
- package/dist/types/src/components/GrConfigProvider/config.d.ts +1 -0
- package/dist/types/src/components/GrConfigProvider/context.d.ts +131 -0
- package/dist/types/src/components/GrConfigProvider/index.d.ts +5 -0
- package/dist/types/src/components/GrConfirmDialog/GrConfirmDialog.vue.d.ts +2 -2
- package/dist/types/src/components/GrDataTable/GrDataTable.vue.d.ts +48 -4
- package/dist/types/src/components/GrDialog/GrDialog.vue.d.ts +1 -1
- package/dist/types/src/components/GrDialogService/store.d.ts +18 -0
- 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 +5 -5
- package/dist/types/src/components/GrDropdown/GrDropdown.vue.d.ts +8 -1
- package/dist/types/src/components/GrDropdownMenu/GrDropdownMenu.vue.d.ts +7 -1
- package/dist/types/src/components/GrDropdownMenu/GrDropdownMenuItem.vue.d.ts +1 -1
- package/dist/types/src/components/GrFileUpload/GrFileUpload.vue.d.ts +3 -3
- package/dist/types/src/components/GrForm/GrForm.vue.d.ts +93 -0
- package/dist/types/src/components/GrForm/config.d.ts +1 -0
- package/dist/types/src/components/GrForm/context.d.ts +27 -0
- package/dist/types/src/components/GrForm/index.d.ts +6 -0
- package/dist/types/src/components/GrForm/validation.d.ts +52 -0
- package/dist/types/src/components/GrFormField/GrFormField.vue.d.ts +25 -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/GrFormFile/GrFormFile.vue.d.ts +4 -4
- package/dist/types/src/components/GrImageViewer/GrImageViewer.vue.d.ts +7 -3
- 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 +49 -10
- package/dist/types/src/components/GrInput/defaults.d.ts +18 -0
- package/dist/types/src/components/GrInput/grInputStyles.d.ts +1 -1
- package/dist/types/src/components/GrInput/index.d.ts +1 -0
- package/dist/types/src/components/GrInputTag/GrInputTag.vue.d.ts +3 -3
- 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/GrLink/GrLink.vue.d.ts +3 -3
- package/dist/types/src/components/GrLink/grLinkStyles.d.ts +3 -3
- package/dist/types/src/components/GrModal/grModalStyles.d.ts +1 -1
- package/dist/types/src/components/GrNumberInput/GrNumberInput.vue.d.ts +25 -9
- package/dist/types/src/components/GrNumberInput/defaults.d.ts +14 -0
- package/dist/types/src/components/GrNumberInput/index.d.ts +1 -0
- package/dist/types/src/components/GrPagination/GrPagination.vue.d.ts +18 -0
- package/dist/types/src/components/GrPromptDialog/GrPromptDialog.vue.d.ts +4 -4
- package/dist/types/src/components/GrRadio/GrRadio.vue.d.ts +5 -5
- package/dist/types/src/components/GrRadio/defaults.d.ts +14 -0
- package/dist/types/src/components/GrRadio/grRadioStyles.d.ts +3 -3
- package/dist/types/src/components/GrRadio/index.d.ts +1 -0
- package/dist/types/src/components/GrRadioGroup/GrRadioGroup.vue.d.ts +4 -4
- package/dist/types/src/components/GrRadioGroup/defaults.d.ts +14 -0
- package/dist/types/src/components/GrRadioGroup/index.d.ts +1 -0
- package/dist/types/src/components/GrRating/GrRating.vue.d.ts +124 -0
- package/dist/types/src/components/GrRating/config.d.ts +1 -0
- package/dist/types/src/components/GrRating/defaults.d.ts +14 -0
- package/dist/types/src/components/GrRating/grRatingStyles.d.ts +21 -0
- package/dist/types/src/components/GrRating/index.d.ts +6 -0
- package/dist/types/src/components/GrRating/safelist.d.ts +1 -0
- package/dist/types/src/components/GrResponseErrorBanner/GrUploadErrorBanner.vue.d.ts +1 -1
- package/dist/types/src/components/GrSegmented/GrSegmented.vue.d.ts +7 -7
- package/dist/types/src/components/GrSegmented/defaults.d.ts +15 -0
- package/dist/types/src/components/GrSegmented/grSegmentedStyles.d.ts +1 -1
- package/dist/types/src/components/GrSegmented/index.d.ts +1 -0
- package/dist/types/src/components/GrSelect/GrSelect.vue.d.ts +57 -17
- package/dist/types/src/components/GrSelect/defaults.d.ts +17 -0
- package/dist/types/src/components/GrSelect/grSelectStyles.d.ts +3 -3
- package/dist/types/src/components/GrSelect/index.d.ts +1 -0
- package/dist/types/src/components/GrSidebar/GrSidebarItem.vue.d.ts +2 -2
- package/dist/types/src/components/GrSkeleton/GrSkeleton.vue.d.ts +1 -1
- package/dist/types/src/components/GrSlider/GrSlider.vue.d.ts +88 -0
- package/dist/types/src/components/GrSlider/config.d.ts +1 -0
- package/dist/types/src/components/GrSlider/defaults.d.ts +14 -0
- package/dist/types/src/components/GrSlider/grSliderStyles.d.ts +36 -0
- package/dist/types/src/components/GrSlider/index.d.ts +6 -0
- package/dist/types/src/components/GrSlider/safelist.d.ts +1 -0
- package/dist/types/src/components/GrStatistic/GrStatistic.vue.d.ts +116 -0
- package/dist/types/src/components/GrStatistic/config.d.ts +1 -0
- package/dist/types/src/components/GrStatistic/formatStatisticValue.d.ts +16 -0
- package/dist/types/src/components/GrStatistic/grStatisticStyles.d.ts +24 -0
- package/dist/types/src/components/GrStatistic/index.d.ts +6 -0
- package/dist/types/src/components/GrStatistic/safelist.d.ts +1 -0
- package/dist/types/src/components/GrSwitch/GrSwitch.vue.d.ts +4 -4
- package/dist/types/src/components/GrSwitch/defaults.d.ts +14 -0
- package/dist/types/src/components/GrSwitch/grSwitchStyles.d.ts +2 -2
- package/dist/types/src/components/GrSwitch/index.d.ts +1 -0
- 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/GrTable/GrTable.vue.d.ts +16 -0
- package/dist/types/src/components/GrTabs/GrTabs.vue.d.ts +6 -0
- package/dist/types/src/components/GrTextarea/GrTextarea.vue.d.ts +5 -5
- package/dist/types/src/components/GrToaster/GrToaster.vue.d.ts +19 -2
- package/dist/types/src/components/GrToaster/index.d.ts +1 -1
- package/dist/types/src/components/GrTooltip/GrTooltip.vue.d.ts +1 -1
- package/dist/types/src/components/GrTree/grTreeInteractionContext.d.ts +2 -0
- package/dist/types/src/components/GrTreeSelect/GrTreeSelect.vue.d.ts +1 -1
- package/dist/types/src/components/GrTreeSelect/grTreeSelectStyles.d.ts +1 -1
- package/dist/types/src/composables/internal/useScrollLock.d.ts +24 -0
- package/dist/types/src/composables/useToast.d.ts +24 -0
- package/dist/types/src/granular-provider/shared.d.ts +10 -0
- package/dist/types/src/i18n/messages/en.d.ts +84 -0
- package/dist/types/src/i18n/messages/es.d.ts +84 -0
- package/dist/types/src/i18n/messages/ru.d.ts +84 -0
- package/dist/types/src/index.d.ts +10 -0
- package/dist/web-types.json +1642 -356
- package/package.json +41 -1
- package/dist/chunks/config-1uSYl98Y.js.map +0 -1
- package/dist/chunks/config-8Pcutu1j2.js.map +0 -1
- package/dist/chunks/config-B7IIWGt_2.js.map +0 -1
- package/dist/chunks/config-BIRO0vDJ2.js.map +0 -1
- package/dist/chunks/config-BLHqZhy-2.js.map +0 -1
- package/dist/chunks/config-BOlr7qw7.js.map +0 -1
- package/dist/chunks/config-BUHuGBik.js.map +0 -1
- package/dist/chunks/config-BX1JTrkV2.js.map +0 -1
- package/dist/chunks/config-C7NpDrfO.js.map +0 -1
- package/dist/chunks/config-ClhKPJvg.js.map +0 -1
- package/dist/chunks/config-Cpi9Mh2J.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-D_R56_gT.js.map +0 -1
- package/dist/chunks/config-DezDih8_.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-LGrZIdaZ2.js.map +0 -1
- package/dist/chunks/config-QaIc_gRa.js.map +0 -1
- package/dist/chunks/config-U4m9PSql.js.map +0 -1
- package/dist/chunks/config-eYLZYOUS2.js.map +0 -1
- package/dist/chunks/config-ipvU0lzP2.js.map +0 -1
- package/dist/chunks/config-xR4XVmcy.js.map +0 -1
- package/dist/chunks/en-BdtiS2d3.js.map +0 -1
- package/dist/chunks/es-BGRMZbe9.js.map +0 -1
- package/dist/chunks/grBadgeStyles-DrycBuKT.js.map +0 -1
- package/dist/chunks/grButtonStyles-C7Yga_Q1.js.map +0 -1
- package/dist/chunks/grModalStyles-DWd3i05Q.js.map +0 -1
- package/dist/chunks/grSelectStyles-CLK5hRd3.js.map +0 -1
- package/dist/chunks/grStyle-Blc9otAx.js.map +0 -1
- package/dist/chunks/ru-BFCnOiML.js.map +0 -1
- package/dist/chunks/shared-ChvcQgDl.js +0 -168
- package/dist/chunks/shared-ChvcQgDl.js.map +0 -1
- package/dist/chunks/transition-TLFw4KBn.js.map +0 -1
- package/dist/components/GrAlert/chunks/GrAlert-DPJSU_fG.js +0 -163
- package/dist/components/GrAlert/chunks/GrAlert-DPJSU_fG.js.map +0 -1
- package/dist/components/GrAvatar/chunks/GrAvatar-96CpTCq5.js.map +0 -1
- package/dist/components/GrBadge/chunks/GrBadge-B77XlaqE.js.map +0 -1
- package/dist/components/GrBadgeWrap/chunks/GrBadgeWrap-CcktMOdg.js.map +0 -1
- package/dist/components/GrBottomNav/chunks/GrBottomNav-usuMgG8_.js.map +0 -1
- package/dist/components/GrButton/chunks/GrButton-BlffdeJr.js.map +0 -1
- package/dist/components/GrCard/chunks/GrCard-DUNMkuHW.js.map +0 -1
- package/dist/components/GrCheckbox/chunks/GrCheckbox-DJhzZZdO.js.map +0 -1
- package/dist/components/GrCollapse/chunks/GrCollapse-CPPLh_xU.js.map +0 -1
- package/dist/components/GrConfirmDialog/chunks/GrConfirmDialog-BWYKCsHd.js.map +0 -1
- package/dist/components/GrDataTable/chunks/GrDataTable-ptbARmJ3.js +0 -179
- package/dist/components/GrDataTable/chunks/GrDataTable-ptbARmJ3.js.map +0 -1
- package/dist/components/GrDialog/chunks/GrDialog-5DAS-1Lb.js.map +0 -1
- package/dist/components/GrDialogService/chunks/GrDialogService-DY_fmaMu.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/GrDropdownMenu/chunks/GrDropdownMenu-DFEJLPcV.js.map +0 -1
- package/dist/components/GrEmptyState/chunks/GrEmptyState-CA3BiTV7.js.map +0 -1
- package/dist/components/GrFileUpload/chunks/GrFileUpload-DvWPpiJS.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/GrFormFile/chunks/GrFormFile-CXcqqdvV.js.map +0 -1
- package/dist/components/GrFormSection/chunks/GrFormSection-Ce21jcgo.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/GrInputTag/chunks/GrInputTag-zMgFqp2g.js.map +0 -1
- package/dist/components/GrList/chunks/GrList-Dx772Ns4.js.map +0 -1
- package/dist/components/GrLoading/chunks/GrLoading--X_7rdbb.js.map +0 -1
- package/dist/components/GrModal/chunks/GrModal-BkjW9jZS.js.map +0 -1
- package/dist/components/GrNavbar/chunks/GrNavbar-DW3MiIIf.js.map +0 -1
- package/dist/components/GrNumberInput/chunks/GrNumberInput-CldPIWQx.js.map +0 -1
- package/dist/components/GrPagination/chunks/GrPagination-Bu9wv6it.js.map +0 -1
- package/dist/components/GrProgressBar/chunks/GrProgressBar-CC3z-Zqp.js.map +0 -1
- package/dist/components/GrPromptDialog/chunks/GrPromptDialog-TmWXbpEP.js.map +0 -1
- package/dist/components/GrRadio/chunks/GrRadio-CPTixXaY.js.map +0 -1
- package/dist/components/GrRadioGroup/chunks/GrRadioGroup-vKZCbkCp.js.map +0 -1
- package/dist/components/GrSegmented/chunks/GrSegmented-C1y0UXpQ.js.map +0 -1
- package/dist/components/GrSelect/chunks/GrSelect-RShK21lK.js.map +0 -1
- package/dist/components/GrSidebar/chunks/GrSidebar-DkWozzwA.js.map +0 -1
- package/dist/components/GrSkeleton/chunks/GrSkeleton-DsN-_CDZ.js.map +0 -1
- package/dist/components/GrSwitch/chunks/GrSwitch-DAioyccZ.js.map +0 -1
- package/dist/components/GrTable/chunks/GrTable-Db3hRnKA.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/GrToaster/chunks/GrToaster-eI8YvnIo.js.map +0 -1
- package/dist/components/GrTooltip/chunks/GrTooltip-BeyZ8ssR.js.map +0 -1
- package/dist/components/GrTree/chunks/GrTree-D3ODe2dB.js.map +0 -1
- package/dist/components/GrTreeSelect/chunks/GrTreeSelect-B2xBKs5Q.js.map +0 -1
- package/dist/chunks/{config-8Pcutu1j2.js → config-8Pcutu1j.js} +0 -0
- package/dist/chunks/{config-BLHqZhy-2.js → config-BLHqZhy-.js} +0 -0
- package/dist/chunks/{config-BUHuGBik.js → config-BUHuGBik2.js} +0 -0
- package/dist/chunks/{config-BX1JTrkV2.js → config-BX1JTrkV.js} +0 -0
- package/dist/chunks/{config-DpqOnJiz2.js → config-DpqOnJiz.js} +0 -0
- package/dist/chunks/{config-Cpi9Mh2J.js → config-Dqy0rPPO2.js} +1 -1
- /package/dist/chunks/{config-LGrZIdaZ2.js → config-LGrZIdaZ.js} +0 -0
- /package/dist/chunks/{config-QaIc_gRa.js → config-QaIc_gRa2.js} +0 -0
- /package/dist/chunks/{config-U4m9PSql.js → config-U4m9PSql2.js} +0 -0
- /package/dist/chunks/{config-ipvU0lzP2.js → config-ipvU0lzP.js} +0 -0
- /package/dist/chunks/{config-xR4XVmcy.js → config-xR4XVmcy2.js} +0 -0
|
@@ -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":"GrPagination-Bu9wv6it.js","names":[],"sources":["../../../../src/components/GrPagination/GrPagination.vue","../../../../src/components/GrPagination/GrPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrSelect from '../GrSelect/GrSelect.vue'\n\n/**\n * Пропы пагинации.\n *\n * `total` интерпретируется как общее количество элементов; число страниц\n * вычисляется из `total` и `pageSize`. Номера усекаются многоточием\n * (алгоритм boundary/sibling, как у MUI): всегда видны первая/последняя страница\n * и `siblingCount` соседей вокруг текущей.\n */\nexport interface GrPaginationProps {\n page: number\n pageSize: number\n total: number\n pageSizes?: number[]\n /** Сколько соседних страниц показывать вокруг текущей. По умолчанию `1`. */\n siblingCount?: number\n /** Сколько крайних страниц всегда показывать с каждого края. По умолчанию `1`. */\n boundaryCount?: number\n}\n\nconst { t } = useGranularityTranslations()\n\nconst props = withDefaults(defineProps<GrPaginationProps>(), {\n pageSizes: () => [10, 20, 50],\n siblingCount: 1,\n boundaryCount: 1,\n})\n\nconst emit = defineEmits<{\n (e: 'update:page', value: number): void\n (e: 'update:pageSize', value: number): void\n}>()\n\nconst pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))\n\n// Контролируемый компонент: если `total`/`pageSize` уменьшились и текущая `page`\n// вышла за диапазон — просим родителя подтянуть её к последней странице.\nwatch(pageCount, (count) => {\n if (props.page > count)\n emit('update:page', count)\n})\n\nconst pageSizeModel = computed({\n get: () => String(props.pageSize),\n set: (value: string) => emit('update:pageSize', Number(value)),\n})\n\nconst pageSizeOptions = computed(() =>\n props.pageSizes.map(pageSize => ({\n value: String(pageSize),\n label: String(pageSize),\n })),\n)\n\ntype PaginationItem = number | 'ellipsis-start' | 'ellipsis-end'\n\nfunction range(start: number, end: number): number[] {\n const list: number[] = []\n for (let page = start; page <= end; page += 1)\n list.push(page)\n return list\n}\n\n// Алгоритм usePagination как в MUI: крайние `boundaryCount` страниц + `siblingCount`\n// соседей вокруг текущей, разрывы схлопываются в многоточие. Одиночный «пропущенный»\n// номер показываем как номер, а не как «…» (визуально ровнее).\nconst items = computed<PaginationItem[]>(() => {\n const count = pageCount.value\n const current = props.page\n const boundaryCount = Math.max(0, props.boundaryCount)\n const siblingCount = Math.max(0, props.siblingCount)\n\n const startPages = range(1, Math.min(boundaryCount, count))\n const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n const siblingsStart = Math.max(\n Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n boundaryCount + 2,\n )\n const siblingsEnd = Math.min(\n Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),\n endPages.length > 0 ? endPages[0] - 2 : count - 1,\n )\n\n return [\n ...startPages,\n ...(siblingsStart > boundaryCount + 2\n ? ['ellipsis-start' as const]\n : boundaryCount + 1 < count - boundaryCount\n ? [boundaryCount + 1]\n : []),\n ...range(siblingsStart, siblingsEnd),\n ...(siblingsEnd < count - boundaryCount - 1\n ? ['ellipsis-end' as const]\n : count - boundaryCount > boundaryCount\n ? [count - boundaryCount]\n : []),\n ...endPages,\n ]\n})\n\nfunction goTo(page: number): void {\n emit('update:page', page)\n}\n\nfunction prev(): void {\n goTo(Math.max(1, props.page - 1))\n}\n\nfunction next(): void {\n goTo(Math.min(pageCount.value, props.page + 1))\n}\n\nfunction first(): void {\n goTo(1)\n}\n\nfunction last(): void {\n goTo(pageCount.value)\n}\n</script>\n\n<template>\n <div\n class=\"flex flex-wrap items-center justify-end gap-3\"\n data-gr-pagination\n role=\"navigation\"\n :aria-label=\"t('gr.pagination.label', 'Pagination')\"\n >\n <div class=\"min-w-[100px]\">\n <GrSelect\n v-model=\"pageSizeModel\"\n :options=\"pageSizeOptions\"\n :aria-label=\"t('gr.pagination.pageSize', 'Page size')\"\n />\n </div>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page <= 1\" :aria-label=\"t('gr.pagination.first', 'First page')\" data-gr-pagination-first @click=\"first\">\n «\n </GrButton>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page <= 1\" data-gr-pagination-prev @click=\"prev\">\n {{ t('gr.pagination.prev', 'Prev') }}\n </GrButton>\n\n <div class=\"flex items-center gap-1\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <span\n v-if=\"item === 'ellipsis-start' || item === 'ellipsis-end'\"\n data-gr-pagination-ellipsis\n aria-hidden=\"true\"\n class=\"h-8 min-w-8 px-1 grid place-items-center text-sm text-[var(--muted-fg)]\"\n >…</span>\n <button\n v-else\n type=\"button\"\n data-gr-pagination-page\n :aria-current=\"item === page ? 'page' : undefined\"\n :aria-label=\"t('gr.pagination.page', 'Page {n}', { n: item })\"\n class=\"h-8 min-w-8 px-2 rounded-md text-sm font-600 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :class=\"item === page ? 'bg-[var(--primary)] text-[var(--primary-fg)]' : 'text-[var(--muted-fg)] hover:bg-[var(--muted)] hover:text-[var(--fg)]'\"\n @click=\"goTo(item)\"\n >\n {{ item }}\n </button>\n </template>\n </div>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page >= pageCount\" data-gr-pagination-next @click=\"next\">\n {{ t('gr.pagination.next', 'Next') }}\n </GrButton>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page >= pageCount\" :aria-label=\"t('gr.pagination.last', 'Last page')\" data-gr-pagination-last @click=\"last\">\n »\n </GrButton>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, watch } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrSelect from '../GrSelect/GrSelect.vue'\n\n/**\n * Пропы пагинации.\n *\n * `total` интерпретируется как общее количество элементов; число страниц\n * вычисляется из `total` и `pageSize`. Номера усекаются многоточием\n * (алгоритм boundary/sibling, как у MUI): всегда видны первая/последняя страница\n * и `siblingCount` соседей вокруг текущей.\n */\nexport interface GrPaginationProps {\n page: number\n pageSize: number\n total: number\n pageSizes?: number[]\n /** Сколько соседних страниц показывать вокруг текущей. По умолчанию `1`. */\n siblingCount?: number\n /** Сколько крайних страниц всегда показывать с каждого края. По умолчанию `1`. */\n boundaryCount?: number\n}\n\nconst { t } = useGranularityTranslations()\n\nconst props = withDefaults(defineProps<GrPaginationProps>(), {\n pageSizes: () => [10, 20, 50],\n siblingCount: 1,\n boundaryCount: 1,\n})\n\nconst emit = defineEmits<{\n (e: 'update:page', value: number): void\n (e: 'update:pageSize', value: number): void\n}>()\n\nconst pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))\n\n// Контролируемый компонент: если `total`/`pageSize` уменьшились и текущая `page`\n// вышла за диапазон — просим родителя подтянуть её к последней странице.\nwatch(pageCount, (count) => {\n if (props.page > count)\n emit('update:page', count)\n})\n\nconst pageSizeModel = computed({\n get: () => String(props.pageSize),\n set: (value: string) => emit('update:pageSize', Number(value)),\n})\n\nconst pageSizeOptions = computed(() =>\n props.pageSizes.map(pageSize => ({\n value: String(pageSize),\n label: String(pageSize),\n })),\n)\n\ntype PaginationItem = number | 'ellipsis-start' | 'ellipsis-end'\n\nfunction range(start: number, end: number): number[] {\n const list: number[] = []\n for (let page = start; page <= end; page += 1)\n list.push(page)\n return list\n}\n\n// Алгоритм usePagination как в MUI: крайние `boundaryCount` страниц + `siblingCount`\n// соседей вокруг текущей, разрывы схлопываются в многоточие. Одиночный «пропущенный»\n// номер показываем как номер, а не как «…» (визуально ровнее).\nconst items = computed<PaginationItem[]>(() => {\n const count = pageCount.value\n const current = props.page\n const boundaryCount = Math.max(0, props.boundaryCount)\n const siblingCount = Math.max(0, props.siblingCount)\n\n const startPages = range(1, Math.min(boundaryCount, count))\n const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count)\n\n const siblingsStart = Math.max(\n Math.min(current - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n boundaryCount + 2,\n )\n const siblingsEnd = Math.min(\n Math.max(current + siblingCount, boundaryCount + siblingCount * 2 + 2),\n endPages.length > 0 ? endPages[0] - 2 : count - 1,\n )\n\n return [\n ...startPages,\n ...(siblingsStart > boundaryCount + 2\n ? ['ellipsis-start' as const]\n : boundaryCount + 1 < count - boundaryCount\n ? [boundaryCount + 1]\n : []),\n ...range(siblingsStart, siblingsEnd),\n ...(siblingsEnd < count - boundaryCount - 1\n ? ['ellipsis-end' as const]\n : count - boundaryCount > boundaryCount\n ? [count - boundaryCount]\n : []),\n ...endPages,\n ]\n})\n\nfunction goTo(page: number): void {\n emit('update:page', page)\n}\n\nfunction prev(): void {\n goTo(Math.max(1, props.page - 1))\n}\n\nfunction next(): void {\n goTo(Math.min(pageCount.value, props.page + 1))\n}\n\nfunction first(): void {\n goTo(1)\n}\n\nfunction last(): void {\n goTo(pageCount.value)\n}\n</script>\n\n<template>\n <div\n class=\"flex flex-wrap items-center justify-end gap-3\"\n data-gr-pagination\n role=\"navigation\"\n :aria-label=\"t('gr.pagination.label', 'Pagination')\"\n >\n <div class=\"min-w-[100px]\">\n <GrSelect\n v-model=\"pageSizeModel\"\n :options=\"pageSizeOptions\"\n :aria-label=\"t('gr.pagination.pageSize', 'Page size')\"\n />\n </div>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page <= 1\" :aria-label=\"t('gr.pagination.first', 'First page')\" data-gr-pagination-first @click=\"first\">\n «\n </GrButton>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page <= 1\" data-gr-pagination-prev @click=\"prev\">\n {{ t('gr.pagination.prev', 'Prev') }}\n </GrButton>\n\n <div class=\"flex items-center gap-1\">\n <template v-for=\"(item, index) in items\" :key=\"index\">\n <span\n v-if=\"item === 'ellipsis-start' || item === 'ellipsis-end'\"\n data-gr-pagination-ellipsis\n aria-hidden=\"true\"\n class=\"h-8 min-w-8 px-1 grid place-items-center text-sm text-[var(--muted-fg)]\"\n >…</span>\n <button\n v-else\n type=\"button\"\n data-gr-pagination-page\n :aria-current=\"item === page ? 'page' : undefined\"\n :aria-label=\"t('gr.pagination.page', 'Page {n}', { n: item })\"\n class=\"h-8 min-w-8 px-2 rounded-md text-sm font-600 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n :class=\"item === page ? 'bg-[var(--primary)] text-[var(--primary-fg)]' : 'text-[var(--muted-fg)] hover:bg-[var(--muted)] hover:text-[var(--fg)]'\"\n @click=\"goTo(item)\"\n >\n {{ item }}\n </button>\n </template>\n </div>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page >= pageCount\" data-gr-pagination-next @click=\"next\">\n {{ t('gr.pagination.next', 'Next') }}\n </GrButton>\n\n <GrButton variant=\"ghost\" size=\"sm\" :disabled=\"page >= pageCount\" :aria-label=\"t('gr.pagination.last', 'Last page')\" data-gr-pagination-last @click=\"last\">\n »\n </GrButton>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrProgressBar-CC3z-Zqp.js","names":[],"sources":["../../../../src/components/GrProgressBar/GrProgressBar.vue","../../../../src/components/GrProgressBar/GrProgressBar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { grProgressBarFillClass, type GrProgressBarTone } from './grStyle'\n\n/**\n * GrProgressBar — линейный индикатор прогресса.\n *\n * @prop value — текущее значение `0..100`; выходящие за границы значения клампятся, `NaN` → `0`.\n * @prop ariaLabel — метка для скринридера (обязательна, если рядом нет видимого заголовка).\n * @prop tone — цветовая тональность заливки (CSS-переменная из `tokens.css`).\n */\nexport interface GrProgressBarProps {\n value: number\n ariaLabel?: string\n tone?: GrProgressBarTone\n}\n\nconst props = withDefaults(defineProps<GrProgressBarProps>(), {\n ariaLabel: undefined,\n tone: 'primary',\n})\n\nconst safe = computed(() => {\n if (Number.isNaN(props.value))\n return 0\n return Math.min(100, Math.max(0, props.value))\n})\n\nconst fillClassName = computed(() => grProgressBarFillClass(props.tone))\n</script>\n\n<template>\n <div\n data-gr-progress-bar\n role=\"progressbar\"\n :aria-label=\"ariaLabel\"\n :aria-valuenow=\"safe\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"h-2 w-full rounded-full bg-[var(--muted)] border border-[var(--brd)] overflow-hidden\"\n >\n <div\n data-gr-progress-bar-fill\n class=\"h-full\"\n :class=\"fillClassName\"\n :style=\"{ width: `${safe}%` }\"\n />\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { grProgressBarFillClass, type GrProgressBarTone } from './grStyle'\n\n/**\n * GrProgressBar — линейный индикатор прогресса.\n *\n * @prop value — текущее значение `0..100`; выходящие за границы значения клампятся, `NaN` → `0`.\n * @prop ariaLabel — метка для скринридера (обязательна, если рядом нет видимого заголовка).\n * @prop tone — цветовая тональность заливки (CSS-переменная из `tokens.css`).\n */\nexport interface GrProgressBarProps {\n value: number\n ariaLabel?: string\n tone?: GrProgressBarTone\n}\n\nconst props = withDefaults(defineProps<GrProgressBarProps>(), {\n ariaLabel: undefined,\n tone: 'primary',\n})\n\nconst safe = computed(() => {\n if (Number.isNaN(props.value))\n return 0\n return Math.min(100, Math.max(0, props.value))\n})\n\nconst fillClassName = computed(() => grProgressBarFillClass(props.tone))\n</script>\n\n<template>\n <div\n data-gr-progress-bar\n role=\"progressbar\"\n :aria-label=\"ariaLabel\"\n :aria-valuenow=\"safe\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"h-2 w-full rounded-full bg-[var(--muted)] border border-[var(--brd)] overflow-hidden\"\n >\n <div\n data-gr-progress-bar-fill\n class=\"h-full\"\n :class=\"fillClassName\"\n :style=\"{ width: `${safe}%` }\"\n />\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,QAAQ;EAKd,MAAM,OAAO,eAAe;GAC1B,IAAI,OAAO,MAAM,MAAM,KAAK,GAC1B,OAAO;GACT,OAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,MAAM,KAAK,CAAC;EAC/C,CAAC;EAED,MAAM,gBAAgB,eAAe,uBAAuB,MAAM,IAAI,CAAC;;uBAIrE,mBAeM,OAAA;IAdJ,wBAAA;IACA,MAAK;IACJ,cAAY,QAAA;IACZ,iBAAe,KAAA;IAChB,iBAAc;IACd,iBAAc;IACd,OAAM;OAEN,mBAKE,OAAA;IAJA,6BAAA;IACA,OAAK,eAAA,CAAC,UACE,cAAA,KAAa,CAAA;IACpB,OAAK,eAAA,EAAA,OAAA,GAAc,KAAA,MAAI,GAAA,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrPromptDialog-TmWXbpEP.js","names":[],"sources":["../../../../src/components/GrPromptDialog/GrPromptDialog.vue","../../../../src/components/GrPromptDialog/GrPromptDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrPromptDialog — GR-примитив диалога ввода значения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Поведение `required=true` (по умолчанию): пустое значение подсвечивается\n * ошибкой только после первого «касания» (blur или попытка confirm),\n * чтобы не шуметь при открытии.\n */\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrFormField from '../GrFormField/GrFormField.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\nexport interface GrPromptDialogProps {\n modelValue: boolean\n value: string\n title?: string\n description?: string\n label?: string\n placeholder?: string\n closeOnBackdrop?: boolean\n closeOnEsc?: boolean\n showHeader?: boolean\n showCloseButton?: boolean\n size?: GrDialogSize\n headerConfig?: GrDialogSectionConfig\n footerConfig?: GrDialogSectionConfig\n bodyConfig?: GrDialogSectionConfig\n /** A11y-лейбл кнопки закрытия (i18n). */\n closeLabel?: string\n buttonSize?: GrButtonSize\n confirmText?: string\n cancelText?: string\n /** Текст ошибки для пустого значения при `required=true` (i18n). */\n requiredErrorText?: string\n confirmVariant?: GrButtonVariant\n confirmTone?: GrButtonTone\n required?: boolean\n /**\n * Структура ошибки ответа сервера для показа общим блоком в теле диалога\n * (через `GrResponseErrorBanner`). `null` — блок скрыт.\n */\n error?: ResponseErrorInfo | null\n /**\n * Внешняя ошибка поля ввода (например, серверная валидация). Имеет приоритет\n * над встроенной проверкой `required`. `null`/`undefined` — нет внешней ошибки.\n */\n fieldError?: string | null\n /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n confirmLoading?: boolean\n /** Принудительно дизейблит кнопку Confirm. */\n confirmDisabled?: boolean\n /**\n * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`.\n * `false` — отдаёт управление закрытием наружу (нужно `useDialogService`).\n */\n closeOnConfirm?: boolean\n}\n\nconst props = withDefaults(defineProps<GrPromptDialogProps>(), {\n title: undefined,\n description: undefined,\n label: undefined,\n placeholder: undefined,\n closeOnBackdrop: true,\n closeOnEsc: true,\n showHeader: true,\n showCloseButton: true,\n size: 'md',\n headerConfig: undefined,\n footerConfig: undefined,\n bodyConfig: undefined,\n closeLabel: undefined,\n buttonSize: undefined,\n confirmText: undefined,\n cancelText: undefined,\n requiredErrorText: undefined,\n confirmVariant: 'primary',\n confirmTone: 'primary',\n required: true,\n error: null,\n fieldError: null,\n confirmLoading: false,\n confirmDisabled: false,\n closeOnConfirm: true,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: boolean): void\n (e: 'update:value', value: string): void\n (e: 'confirm', value: string): void\n (e: 'cancel'): void\n}>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.prompt.title', 'Prompt'))\nconst resolvedLabel = computed(() => props.label ?? t('gr.dialog.prompt.label', 'Value'))\nconst resolvedRequiredErrorText = computed(() => props.requiredErrorText ?? t('gr.dialog.prompt.required', 'Enter a value.'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n get: () => props.modelValue,\n set: (v: boolean) => emit('update:modelValue', v),\n})\n\nconst valueModel = computed({\n get: () => props.value,\n set: (v: string) => emit('update:value', v),\n})\n\nconst touched = ref(false)\nconst inputRef = ref<InstanceType<typeof GrInput> | null>(null)\n\nwatch(\n () => props.modelValue,\n (v) => {\n if (v) touched.value = false\n },\n)\n\nconst canConfirm = computed(() => {\n if (!props.required) return true\n return valueModel.value.trim().length > 0\n})\n\nconst validationError = computed(() => {\n if (!props.required) return undefined\n if (!touched.value) return undefined\n return valueModel.value.trim().length > 0\n ? undefined\n : resolvedRequiredErrorText.value\n})\n\n// Внешняя ошибка поля (серверная валидация) имеет приоритет над встроенной.\nconst fieldErrorMessage = computed(() => props.fieldError ?? validationError.value ?? undefined)\n\nfunction onCancel(): void {\n emit('cancel')\n emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n if (!canConfirm.value) {\n touched.value = true\n inputRef.value?.focus()\n return\n }\n\n emit('confirm', valueModel.value)\n if (props.closeOnConfirm)\n emit('update:modelValue', false)\n}\n</script>\n\n<template>\n <GrDialog\n v-model=\"open\"\n :title=\"resolvedTitle\"\n :size=\"size\"\n :close-on-backdrop=\"closeOnBackdrop\"\n :close-on-esc=\"closeOnEsc\"\n :show-header=\"showHeader\"\n :show-close-button=\"showCloseButton\"\n :header-config=\"headerConfig\"\n :footer-config=\"footerConfig\"\n :body-config=\"bodyConfig\"\n :close-label=\"resolvedCloseLabel\"\n >\n <div class=\"grid gap-4\">\n <slot>\n <div v-if=\"description\" class=\"text-[14px] text-[var(--muted-fg)]\">\n {{ description }}\n </div>\n </slot>\n\n <GrFormField :label=\"resolvedLabel\" :error=\"fieldErrorMessage\" for-id=\"gr-prompt-input\">\n <GrInput\n id=\"gr-prompt-input\"\n ref=\"inputRef\"\n v-model=\"valueModel\"\n data-testid=\"gr-prompt-input\"\n :placeholder=\"placeholder\"\n :invalid=\"!!fieldErrorMessage\"\n @blur=\"touched = true\"\n />\n </GrFormField>\n\n <slot name=\"error\" :error=\"error\">\n <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n </slot>\n </div>\n\n <template #footer>\n <slot name=\"footer\">\n <div class=\"flex items-center justify-end gap-3\">\n <GrButton data-testid=\"gr-prompt-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n {{ resolvedCancelText }}\n </GrButton>\n <GrButton\n data-testid=\"gr-prompt-confirm\"\n :variant=\"confirmVariant\"\n :tone=\"confirmTone\"\n :size=\"buttonSize\"\n :loading=\"confirmLoading\"\n :disabled=\"confirmDisabled || (required && touched && !canConfirm)\"\n @click=\"onConfirm\"\n >\n {{ resolvedConfirmText }}\n </GrButton>\n </div>\n </slot>\n </template>\n </GrDialog>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrRadio-CPTixXaY.js","names":[],"sources":["../../../../src/components/GrRadio/grRadioGroupContext.ts","../../../../src/components/GrRadio/GrRadio.vue","../../../../src/components/GrRadio/GrRadio.vue"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton/grButtonStyles'\n\nexport type GrRadioGroupContext = {\n modelValue: ComputedRef<string>\n name: ComputedRef<string | undefined>\n disabled: ComputedRef<boolean>\n size: ComputedRef<GrButtonSize>\n setValue: (value: string) => void\n}\n\nexport const GR_RADIO_GROUP_CONTEXT: InjectionKey<GrRadioGroupContext> = Symbol('GR_RADIO_GROUP_CONTEXT')","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, inject } from 'vue'\n\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\n\nimport {\n grRadioButtonClass,\n grRadioControlClass,\n grRadioDotBaseClass,\n grRadioDotClass,\n grRadioRootClass,\n type GrRadioVariant,\n} from './grRadioStyles'\nimport { GR_RADIO_GROUP_CONTEXT } from './grRadioGroupContext'\n\n/**\n * GrRadio — одиночный элемент группы выбора.\n *\n * Может работать автономно (через `v-model`) либо внутри `GrRadioGroup`\n * (тогда `modelValue`/`disabled`/`size`/`name` приходят через `inject`).\n *\n * @prop value — значение этого элемента, сравнивается с `modelValue` группы.\n * @prop variant — визуальное представление: `radiobox` (круг+dot) или `button` (стиль `GrButton`).\n */\nexport interface GrRadioProps {\n value: string\n modelValue?: string\n disabled?: boolean\n name?: string\n required?: boolean\n form?: string\n id?: string\n size?: GrButtonSize\n variant?: GrRadioVariant\n buttonVariant?: GrButtonVariant\n buttonTone?: GrButtonTone\n selectedButtonVariant?: GrButtonVariant\n selectedButtonTone?: GrButtonTone\n ariaLabel?: string\n}\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\nconst props = withDefaults(defineProps<GrRadioProps>(), {\n modelValue: undefined,\n disabled: undefined,\n name: undefined,\n required: false,\n form: undefined,\n id: undefined,\n size: undefined,\n variant: 'radiobox',\n buttonVariant: 'outline',\n buttonTone: 'neutral',\n selectedButtonVariant: 'primary',\n selectedButtonTone: 'primary',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nconst group = inject(GR_RADIO_GROUP_CONTEXT, null)\n\nconst resolvedModelValue = computed(() => {\n if (props.modelValue !== undefined)\n return props.modelValue\n\n return group?.modelValue.value ?? ''\n})\n\nconst resolvedDisabled = computed(() => {\n if (props.disabled !== undefined)\n return props.disabled\n\n return group?.disabled.value ?? false\n})\n\nconst resolvedName = computed(() => {\n if (props.name)\n return props.name\n\n return group?.name.value\n})\n\nconst resolvedSize = computed<GrButtonSize>(() => {\n if (props.size)\n return props.size\n\n return group?.size.value ?? 'md'\n})\n\nconst checked = computed(() => resolvedModelValue.value === props.value)\n\nconst buttonClassName = computed(() => {\n return grRadioButtonClass({\n checked: checked.value,\n disabled: resolvedDisabled.value,\n size: resolvedSize.value,\n buttonVariant: props.buttonVariant,\n buttonTone: props.buttonTone,\n selectedButtonVariant: props.selectedButtonVariant,\n selectedButtonTone: props.selectedButtonTone,\n })\n})\n\nconst rootClassName = computed(() => grRadioRootClass(resolvedDisabled.value))\nconst controlClassName = computed(() => grRadioControlClass(checked.value))\nconst dotClassName = computed(() => grRadioDotClass(checked.value))\n\nfunction setValue(next: string): void {\n if (resolvedDisabled.value)\n return\n\n if (props.modelValue !== undefined) {\n emit('update:modelValue', next)\n return\n }\n\n group?.setValue(next)\n}\n\nfunction onButtonClick(): void {\n setValue(props.value)\n}\n</script>\n\n<template>\n <div\n v-if=\"variant === 'button'\"\n data-gr-button\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n :class=\"buttonClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot />\n </div>\n\n <div\n v-else\n data-gr-radio\n role=\"radio\"\n :aria-checked=\"checked ? 'true' : 'false'\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"resolvedDisabled ? 'true' : undefined\"\n :tabindex=\"resolvedDisabled ? -1 : 0\"\n class=\"inline-flex items-center gap-2 select-none focus-visible:outline-none focus-visible:rounded-[8px] focus-visible:shadow-[0_0_0_2px_var(--ring),0_0_0_4px_var(--bg)]\"\n :class=\"rootClassName\"\n @click=\"onButtonClick\"\n @keydown.space.prevent=\"onButtonClick\"\n @keydown.enter.prevent=\"onButtonClick\"\n >\n <input\n :id=\"id\"\n type=\"radio\"\n :checked=\"checked\"\n :disabled=\"resolvedDisabled\"\n :name=\"resolvedName\"\n :value=\"value\"\n :required=\"required\"\n :form=\"form\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :style=\"hiddenInputStyle\"\n >\n\n <span\n data-gr-radio-control\n aria-hidden=\"true\"\n class=\"h-4 w-4 rounded-full border flex items-center justify-center transition-colors duration-150\"\n :class=\"controlClassName\"\n >\n <span\n data-gr-radio-dot\n :class=\"[grRadioDotBaseClass, dotClassName]\"\n />\n </span>\n\n <span class=\"text-sm text-[var(--muted-fg)]\">\n <slot />\n </span>\n </div>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrRadioGroup-vKZCbkCp.js","names":["$slots"],"sources":["../../../../src/components/GrRadioGroup/GrRadioGroup.vue","../../../../src/components/GrRadioGroup/GrRadioGroup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton'\nimport GrButtonGroup from '../GrButtonGroup/GrButtonGroup.vue'\nimport GrRadio from '../GrRadio/GrRadio.vue'\nimport { GR_RADIO_GROUP_CONTEXT } from '../GrRadio'\n\nexport type GrRadioGroupVariant = 'radiobox' | 'button'\nexport interface GrRadioGroupOption { value: string, label: string }\n\n/**\n * GrRadioGroup — контейнер группы `GrRadio`.\n *\n * Может работать как через слот (ручной рендер `GrRadio`), так и через проп `options`.\n * Предоставляет дочерним `GrRadio` общий `modelValue`/`disabled`/`size`/`name` через `inject`.\n */\nexport interface GrRadioGroupProps {\n modelValue: string\n options?: GrRadioGroupOption[]\n name?: string\n disabled?: boolean\n variant?: GrRadioGroupVariant\n size?: GrButtonSize\n ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrRadioGroupProps>(), {\n options: undefined,\n name: undefined,\n disabled: false,\n variant: 'radiobox',\n size: 'md',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nfunction setValue(next: string): void {\n if (props.disabled)\n return\n emit('update:modelValue', next)\n}\n\nprovide(GR_RADIO_GROUP_CONTEXT, {\n modelValue: computed(() => props.modelValue),\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n size: computed(() => props.size),\n setValue,\n})\n</script>\n\n<template>\n <div\n data-gr-radio-group\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n >\n <template v-if=\"$slots.default\">\n <GrButtonGroup v-if=\"variant === 'button'\">\n <slot />\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <slot />\n </div>\n </template>\n <template v-else>\n <GrButtonGroup v-if=\"variant === 'button'\">\n <GrRadio\n v-for=\"opt in options ?? []\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n variant=\"button\"\n :size=\"size\"\n >\n {{ opt.label }}\n </GrRadio>\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <GrRadio v-for=\"opt in options ?? []\" :key=\"opt.value\" :value=\"opt.value\">\n {{ opt.label }}\n </GrRadio>\n </div>\n </template>\n </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, provide } from 'vue'\n\nimport type { GrButtonSize } from '../GrButton'\nimport GrButtonGroup from '../GrButtonGroup/GrButtonGroup.vue'\nimport GrRadio from '../GrRadio/GrRadio.vue'\nimport { GR_RADIO_GROUP_CONTEXT } from '../GrRadio'\n\nexport type GrRadioGroupVariant = 'radiobox' | 'button'\nexport interface GrRadioGroupOption { value: string, label: string }\n\n/**\n * GrRadioGroup — контейнер группы `GrRadio`.\n *\n * Может работать как через слот (ручной рендер `GrRadio`), так и через проп `options`.\n * Предоставляет дочерним `GrRadio` общий `modelValue`/`disabled`/`size`/`name` через `inject`.\n */\nexport interface GrRadioGroupProps {\n modelValue: string\n options?: GrRadioGroupOption[]\n name?: string\n disabled?: boolean\n variant?: GrRadioGroupVariant\n size?: GrButtonSize\n ariaLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrRadioGroupProps>(), {\n options: undefined,\n name: undefined,\n disabled: false,\n variant: 'radiobox',\n size: 'md',\n ariaLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:modelValue', value: string): void\n}>()\n\nfunction setValue(next: string): void {\n if (props.disabled)\n return\n emit('update:modelValue', next)\n}\n\nprovide(GR_RADIO_GROUP_CONTEXT, {\n modelValue: computed(() => props.modelValue),\n name: computed(() => props.name),\n disabled: computed(() => props.disabled),\n size: computed(() => props.size),\n setValue,\n})\n</script>\n\n<template>\n <div\n data-gr-radio-group\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n >\n <template v-if=\"$slots.default\">\n <GrButtonGroup v-if=\"variant === 'button'\">\n <slot />\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <slot />\n </div>\n </template>\n <template v-else>\n <GrButtonGroup v-if=\"variant === 'button'\">\n <GrRadio\n v-for=\"opt in options ?? []\"\n :key=\"opt.value\"\n :value=\"opt.value\"\n variant=\"button\"\n :size=\"size\"\n >\n {{ opt.label }}\n </GrRadio>\n </GrButtonGroup>\n <div v-else class=\"grid gap-2\">\n <GrRadio v-for=\"opt in options ?? []\" :key=\"opt.value\" :value=\"opt.value\">\n {{ opt.label }}\n </GrRadio>\n </div>\n </template>\n </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAIb,SAAS,SAAS,MAAoB;GACpC,IAAI,MAAM,UACR;GACF,KAAK,qBAAqB,IAAI;EAChC;EAEA,QAAQ,wBAAwB;GAC9B,YAAY,eAAe,MAAM,UAAU;GAC3C,MAAM,eAAe,MAAM,IAAI;GAC/B,UAAU,eAAe,MAAM,QAAQ;GACvC,MAAM,eAAe,MAAM,IAAI;GAC/B;EACF,CAAC;;uBAIC,mBAgCM,OAAA;IA/BJ,uBAAA;IACA,MAAK;IACJ,cAAY,QAAA;IACZ,iBAAe,QAAA,WAAQ,SAAY,KAAA;OAEpBA,KAAAA,OAAO,WAAA,UAAA,GAAvB,mBAOW,UAAA,EAAA,KAAA,EAAA,GAAA,CANY,QAAA,YAAO,YAAA,UAAA,GAA5B,YAEgB,uBAAA,EAAA,KAAA,EAAA,GAAA;2BADN,CAAR,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;;uBAEV,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,EAAA,GAAA,EAAA,MAAA,UAAA,GAGZ,mBAiBW,UAAA,EAAA,KAAA,EAAA,GAAA,CAhBY,QAAA,YAAO,YAAA,UAAA,GAA5B,YAUgB,uBAAA,EAAA,KAAA,EAAA,GAAA;2BARgB,EAAA,UAAA,IAAA,GAD9B,mBAQU,UAAA,MAAA,WAPM,QAAA,WAAO,CAAA,IAAd,QAAG;yBADZ,YAQU,iBAAA;MANP,KAAK,IAAI;MACT,OAAO,IAAI;MACZ,SAAQ;MACP,MAAM,QAAA;;6BAEQ,CAAA,gBAAA,gBAAZ,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA;;;;;uBAGhB,mBAIM,OAJN,YAIM,EAAA,UAAA,IAAA,GAHJ,mBAEU,UAAA,MAAA,WAFa,QAAA,WAAO,CAAA,IAAd,QAAG;wBAAnB,YAEU,iBAAA;KAF6B,KAAK,IAAI;KAAQ,OAAO,IAAI;;4BAClD,CAAA,gBAAA,gBAAZ,IAAI,KAAK,GAAA,CAAA,CAAA,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrSegmented-C1y0UXpQ.js","names":[],"sources":["../../../../src/components/GrSegmented/GrSegmented.vue","../../../../src/components/GrSegmented/GrSegmented.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { ComponentPublicInstance } from 'vue'\n\nimport {\n grSegmentedIndicatorClass,\n grSegmentedItemClass,\n grSegmentedItemIconClass,\n grSegmentedItemLabelClass,\n grSegmentedRootClass,\n grSegmentedRootStyle,\n type GrSegmentedOption,\n type GrSegmentedSize,\n type GrSegmentedValue,\n type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\ntype IndicatorGeometry = {\n width: number\n height: number\n x: number\n y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n modelValue: GrSegmentedValue\n options: GrSegmentedOption[]\n variant?: GrSegmentedVariant\n size?: GrSegmentedSize\n /** Длительность анимации индикатора в мс. */\n indicatorDuration?: number\n /** Растягивать сегмент на всю ширину контейнера. */\n block?: boolean\n disabled?: boolean\n /** Имя скрытых radio-inputs для интеграции с нативной формой. */\n name?: string\n ariaLabel?: string\n}\n\nconst props = withDefaults(\n defineProps<GrSegmentedProps>(),\n {\n variant: 'pills',\n size: 'md',\n indicatorDuration: 300,\n block: false,\n disabled: false,\n name: undefined,\n ariaLabel: undefined,\n },\n)\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: GrSegmentedValue): void\n (event: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n}>()\n\nconst instance = getCurrentInstance()\nconst fallbackName = `gr-segmented-${instance?.uid ?? Math.random()}`\n\nconst rootRef = ref<HTMLElement | null>(null)\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst enabledOptions = computed(() => props.options.filter(option => !resolveOptionDisabled(option)))\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst rootClassName = computed(() => grSegmentedRootClass({\n variant: props.variant,\n block: props.block,\n disabled: props.disabled,\n}))\nconst rootStyle = computed<Record<string, string>>(() => ({\n ...grSegmentedRootStyle({\n variant: props.variant,\n size: props.size,\n }),\n gridTemplateColumns: props.options.length > 0\n ? props.options.map(() => props.block ? 'minmax(0,1fr)' : 'minmax(0,max-content)').join(' ')\n : 'none',\n}))\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(props.variant))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n const geometry = indicatorGeometry.value\n if (!geometry) {\n return {\n opacity: '0',\n width: '0px',\n height: '0px',\n transitionDuration: `${indicatorDuration.value}ms`,\n transform: 'translate3d(0px, 0px, 0px)',\n }\n }\n\n return {\n opacity: indicatorReady.value ? '1' : '0',\n width: `${geometry.width}px`,\n height: `${geometry.height}px`,\n transitionDuration: `${indicatorDuration.value}ms`,\n transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n return props.disabled || Boolean(option.disabled)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n return Boolean(option.icon) && !option.label\n}\n\nfunction isFocusableOption(option: GrSegmentedOption, index: number): boolean {\n if (resolveOptionDisabled(option)) {\n return false\n }\n\n if (isOptionSelected(option)) {\n return true\n }\n\n if (selectedIndex.value !== -1) {\n return false\n }\n\n return enabledOptions.value[0]?.value === props.options[index]?.value\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n const key = getOptionKey(value)\n\n if (!(element instanceof HTMLElement)) {\n itemRefs.value.delete(key)\n return\n }\n\n itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n if (left === right) {\n return true\n }\n\n if (!left || !right) {\n return false\n }\n\n return left.width === right.width\n && left.height === right.height\n && left.x === right.x\n && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n const root = rootRef.value\n const option = selectedOption.value\n if (!root || !option) {\n if (indicatorGeometry.value !== null)\n indicatorGeometry.value = null\n\n if (indicatorReady.value)\n indicatorReady.value = false\n\n return\n }\n\n const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n if (!selectedItem) {\n return\n }\n\n const rootRect = root.getBoundingClientRect()\n const itemRect = selectedItem.getBoundingClientRect()\n\n const nextGeometry = {\n width: Math.max(Math.round(itemRect.width), 0),\n height: Math.max(Math.round(itemRect.height), 0),\n x: Math.round(itemRect.left - rootRect.left),\n y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n } satisfies IndicatorGeometry\n\n if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n indicatorGeometry.value = nextGeometry\n }\n\n const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n if (indicatorReady.value !== nextReady) {\n indicatorReady.value = nextReady\n }\n}\n\nfunction refreshObserver(): void {\n if (typeof ResizeObserver === 'undefined') {\n return\n }\n\n const root = rootRef.value\n const option = selectedOption.value\n const selectedItem = option\n ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n : null\n\n if (!resizeObserver) {\n resizeObserver = new ResizeObserver(() => scheduleMeasure())\n }\n\n if (!root) {\n resizeObserver.disconnect()\n observedRoot = null\n observedItem = null\n return\n }\n\n if (observedRoot === root && observedItem === selectedItem) {\n return\n }\n\n resizeObserver.disconnect()\n resizeObserver.observe(root)\n\n if (selectedItem) {\n resizeObserver.observe(selectedItem)\n }\n\n observedRoot = root\n observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n if (scheduled) {\n return\n }\n\n scheduled = true\n void nextTick(() => {\n scheduled = false\n measureIndicator()\n refreshObserver()\n })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n if (resolveOptionDisabled(option) || option.value === props.modelValue) {\n return\n }\n\n emit('update:modelValue', option.value)\n emit('change', option.value, option)\n}\n\nfunction getNextEnabledIndex(startIndex: number, direction: 1 | -1): number {\n if (props.options.length === 0) {\n return -1\n }\n\n let cursor = startIndex\n for (let step = 0; step < props.options.length; step += 1) {\n cursor = (cursor + direction + props.options.length) % props.options.length\n const option = props.options[cursor]\n if (option && !resolveOptionDisabled(option)) {\n return cursor\n }\n }\n\n return -1\n}\n\nfunction focusIndex(index: number): void {\n const option = props.options[index]\n if (!option) {\n return\n }\n\n itemRefs.value.get(getOptionKey(option.value))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n if (props.disabled) {\n return\n }\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n event.preventDefault()\n const nextIndex = getNextEnabledIndex(index, 1)\n if (nextIndex === -1) {\n return\n }\n\n const option = props.options[nextIndex]\n if (option) {\n emitValue(option)\n focusIndex(nextIndex)\n }\n return\n }\n\n if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n event.preventDefault()\n const nextIndex = getNextEnabledIndex(index, -1)\n if (nextIndex === -1) {\n return\n }\n\n const option = props.options[nextIndex]\n if (option) {\n emitValue(option)\n focusIndex(nextIndex)\n }\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n const firstOption = enabledOptions.value[0]\n if (!firstOption) {\n return\n }\n\n emitValue(firstOption)\n focusIndex(props.options.findIndex(option => option.value === firstOption.value))\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n const lastOption = enabledOptions.value.at(-1)\n if (!lastOption) {\n return\n }\n\n emitValue(lastOption)\n focusIndex(props.options.findIndex(option => option.value === lastOption.value))\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n const option = props.options[index]\n if (option) {\n emitValue(option)\n }\n }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(() => props.variant, () => scheduleMeasure())\nwatch(() => props.size, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n resizeObserver?.disconnect()\n observedRoot = null\n observedItem = null\n})\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n data-gr-segmented\n :data-variant=\"variant\"\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :class=\"rootClassName\"\n :style=\"rootStyle\"\n >\n <span\n v-if=\"hasIndicator\"\n data-gr-segmented-indicator\n aria-hidden=\"true\"\n :class=\"indicatorClassName\"\n :style=\"indicatorStyle\"\n />\n\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n :ref=\"element => setItemRef(option.value, element)\"\n data-gr-segmented-item\n :data-value=\"String(option.value)\"\n type=\"button\"\n role=\"radio\"\n :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n :disabled=\"resolveOptionDisabled(option)\"\n :tabindex=\"isFocusableOption(option, index) ? 0 : -1\"\n :class=\"grSegmentedItemClass({\n variant,\n selected: isOptionSelected(option),\n disabled: resolveOptionDisabled(option),\n iconOnly: isIconOnlyOption(option),\n })\"\n @click=\"emitValue(option)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <input\n type=\"radio\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :name=\"resolvedName\"\n :value=\"option.value\"\n :checked=\"isOptionSelected(option)\"\n :disabled=\"resolveOptionDisabled(option)\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot\n :option=\"option\"\n :selected=\"isOptionSelected(option)\"\n :disabled=\"resolveOptionDisabled(option)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n aria-hidden=\"true\"\n :class=\"grSegmentedItemIconClass\"\n />\n <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n {{ option.label }}\n </span>\n </slot>\n </button>\n </div>\n</template>","<script setup lang=\"ts\">\nimport { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport type { ComponentPublicInstance } from 'vue'\n\nimport {\n grSegmentedIndicatorClass,\n grSegmentedItemClass,\n grSegmentedItemIconClass,\n grSegmentedItemLabelClass,\n grSegmentedRootClass,\n grSegmentedRootStyle,\n type GrSegmentedOption,\n type GrSegmentedSize,\n type GrSegmentedValue,\n type GrSegmentedVariant,\n} from './grSegmentedStyles'\n\nconst hiddenInputStyle = {\n position: 'absolute',\n opacity: '0',\n width: '0',\n height: '0',\n pointerEvents: 'none',\n} as const\n\ntype IndicatorGeometry = {\n width: number\n height: number\n x: number\n y: number\n}\n\n/**\n * Пропсы публичного GR-примитива «Segmented».\n */\nexport interface GrSegmentedProps {\n modelValue: GrSegmentedValue\n options: GrSegmentedOption[]\n variant?: GrSegmentedVariant\n size?: GrSegmentedSize\n /** Длительность анимации индикатора в мс. */\n indicatorDuration?: number\n /** Растягивать сегмент на всю ширину контейнера. */\n block?: boolean\n disabled?: boolean\n /** Имя скрытых radio-inputs для интеграции с нативной формой. */\n name?: string\n ariaLabel?: string\n}\n\nconst props = withDefaults(\n defineProps<GrSegmentedProps>(),\n {\n variant: 'pills',\n size: 'md',\n indicatorDuration: 300,\n block: false,\n disabled: false,\n name: undefined,\n ariaLabel: undefined,\n },\n)\n\nconst emit = defineEmits<{\n (event: 'update:modelValue', value: GrSegmentedValue): void\n (event: 'change', value: GrSegmentedValue, option: GrSegmentedOption): void\n}>()\n\nconst instance = getCurrentInstance()\nconst fallbackName = `gr-segmented-${instance?.uid ?? Math.random()}`\n\nconst rootRef = ref<HTMLElement | null>(null)\nconst itemRefs = ref(new Map<string, HTMLElement>())\nconst indicatorGeometry = ref<IndicatorGeometry | null>(null)\nconst indicatorReady = ref(false)\n\nlet resizeObserver: ResizeObserver | null = null\nlet observedRoot: HTMLElement | null = null\nlet observedItem: HTMLElement | null = null\nlet scheduled = false\n\nconst selectedIndex = computed(() => props.options.findIndex(option => option.value === props.modelValue))\nconst selectedOption = computed(() => props.options[selectedIndex.value] ?? null)\nconst enabledOptions = computed(() => props.options.filter(option => !resolveOptionDisabled(option)))\nconst indicatorDuration = computed(() => Math.max(0, Math.round(props.indicatorDuration)))\nconst rootClassName = computed(() => grSegmentedRootClass({\n variant: props.variant,\n block: props.block,\n disabled: props.disabled,\n}))\nconst rootStyle = computed<Record<string, string>>(() => ({\n ...grSegmentedRootStyle({\n variant: props.variant,\n size: props.size,\n }),\n gridTemplateColumns: props.options.length > 0\n ? props.options.map(() => props.block ? 'minmax(0,1fr)' : 'minmax(0,max-content)').join(' ')\n : 'none',\n}))\nconst indicatorClassName = computed(() => grSegmentedIndicatorClass(props.variant))\nconst resolvedName = computed(() => props.name ?? fallbackName)\nconst hasIndicator = computed(() => selectedIndex.value !== -1 && indicatorGeometry.value !== null)\n\nconst indicatorStyle = computed<Record<string, string>>(() => {\n const geometry = indicatorGeometry.value\n if (!geometry) {\n return {\n opacity: '0',\n width: '0px',\n height: '0px',\n transitionDuration: `${indicatorDuration.value}ms`,\n transform: 'translate3d(0px, 0px, 0px)',\n }\n }\n\n return {\n opacity: indicatorReady.value ? '1' : '0',\n width: `${geometry.width}px`,\n height: `${geometry.height}px`,\n transitionDuration: `${indicatorDuration.value}ms`,\n transform: `translate3d(${geometry.x}px, ${geometry.y}px, 0)`,\n }\n})\n\nfunction getOptionKey(value: GrSegmentedValue): string {\n return String(value)\n}\n\nfunction resolveOptionDisabled(option: GrSegmentedOption): boolean {\n return props.disabled || Boolean(option.disabled)\n}\n\nfunction isOptionSelected(option: GrSegmentedOption): boolean {\n return option.value === props.modelValue\n}\n\nfunction isIconOnlyOption(option: GrSegmentedOption): boolean {\n return Boolean(option.icon) && !option.label\n}\n\nfunction isFocusableOption(option: GrSegmentedOption, index: number): boolean {\n if (resolveOptionDisabled(option)) {\n return false\n }\n\n if (isOptionSelected(option)) {\n return true\n }\n\n if (selectedIndex.value !== -1) {\n return false\n }\n\n return enabledOptions.value[0]?.value === props.options[index]?.value\n}\n\nfunction setItemRef(value: GrSegmentedValue, element: Element | ComponentPublicInstance | null): void {\n const key = getOptionKey(value)\n\n if (!(element instanceof HTMLElement)) {\n itemRefs.value.delete(key)\n return\n }\n\n itemRefs.value.set(key, element)\n}\n\nfunction isSameGeometry(left: IndicatorGeometry | null, right: IndicatorGeometry | null): boolean {\n if (left === right) {\n return true\n }\n\n if (!left || !right) {\n return false\n }\n\n return left.width === right.width\n && left.height === right.height\n && left.x === right.x\n && left.y === right.y\n}\n\nfunction measureIndicator(): void {\n const root = rootRef.value\n const option = selectedOption.value\n if (!root || !option) {\n if (indicatorGeometry.value !== null)\n indicatorGeometry.value = null\n\n if (indicatorReady.value)\n indicatorReady.value = false\n\n return\n }\n\n const selectedItem = itemRefs.value.get(getOptionKey(option.value))\n if (!selectedItem) {\n return\n }\n\n const rootRect = root.getBoundingClientRect()\n const itemRect = selectedItem.getBoundingClientRect()\n\n const nextGeometry = {\n width: Math.max(Math.round(itemRect.width), 0),\n height: Math.max(Math.round(itemRect.height), 0),\n x: Math.round(itemRect.left - rootRect.left),\n y: Math.max(Math.round(itemRect.top - rootRect.top) - 1, 0),\n } satisfies IndicatorGeometry\n\n if (!isSameGeometry(indicatorGeometry.value, nextGeometry)) {\n indicatorGeometry.value = nextGeometry\n }\n\n const nextReady = nextGeometry.width > 0 && nextGeometry.height > 0\n if (indicatorReady.value !== nextReady) {\n indicatorReady.value = nextReady\n }\n}\n\nfunction refreshObserver(): void {\n if (typeof ResizeObserver === 'undefined') {\n return\n }\n\n const root = rootRef.value\n const option = selectedOption.value\n const selectedItem = option\n ? itemRefs.value.get(getOptionKey(option.value)) ?? null\n : null\n\n if (!resizeObserver) {\n resizeObserver = new ResizeObserver(() => scheduleMeasure())\n }\n\n if (!root) {\n resizeObserver.disconnect()\n observedRoot = null\n observedItem = null\n return\n }\n\n if (observedRoot === root && observedItem === selectedItem) {\n return\n }\n\n resizeObserver.disconnect()\n resizeObserver.observe(root)\n\n if (selectedItem) {\n resizeObserver.observe(selectedItem)\n }\n\n observedRoot = root\n observedItem = selectedItem\n}\n\nfunction scheduleMeasure(): void {\n if (scheduled) {\n return\n }\n\n scheduled = true\n void nextTick(() => {\n scheduled = false\n measureIndicator()\n refreshObserver()\n })\n}\n\nfunction emitValue(option: GrSegmentedOption): void {\n if (resolveOptionDisabled(option) || option.value === props.modelValue) {\n return\n }\n\n emit('update:modelValue', option.value)\n emit('change', option.value, option)\n}\n\nfunction getNextEnabledIndex(startIndex: number, direction: 1 | -1): number {\n if (props.options.length === 0) {\n return -1\n }\n\n let cursor = startIndex\n for (let step = 0; step < props.options.length; step += 1) {\n cursor = (cursor + direction + props.options.length) % props.options.length\n const option = props.options[cursor]\n if (option && !resolveOptionDisabled(option)) {\n return cursor\n }\n }\n\n return -1\n}\n\nfunction focusIndex(index: number): void {\n const option = props.options[index]\n if (!option) {\n return\n }\n\n itemRefs.value.get(getOptionKey(option.value))?.focus()\n}\n\nfunction onKeydown(event: KeyboardEvent, index: number): void {\n if (props.disabled) {\n return\n }\n\n if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {\n event.preventDefault()\n const nextIndex = getNextEnabledIndex(index, 1)\n if (nextIndex === -1) {\n return\n }\n\n const option = props.options[nextIndex]\n if (option) {\n emitValue(option)\n focusIndex(nextIndex)\n }\n return\n }\n\n if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {\n event.preventDefault()\n const nextIndex = getNextEnabledIndex(index, -1)\n if (nextIndex === -1) {\n return\n }\n\n const option = props.options[nextIndex]\n if (option) {\n emitValue(option)\n focusIndex(nextIndex)\n }\n return\n }\n\n if (event.key === 'Home') {\n event.preventDefault()\n const firstOption = enabledOptions.value[0]\n if (!firstOption) {\n return\n }\n\n emitValue(firstOption)\n focusIndex(props.options.findIndex(option => option.value === firstOption.value))\n return\n }\n\n if (event.key === 'End') {\n event.preventDefault()\n const lastOption = enabledOptions.value.at(-1)\n if (!lastOption) {\n return\n }\n\n emitValue(lastOption)\n focusIndex(props.options.findIndex(option => option.value === lastOption.value))\n return\n }\n\n if (event.key === ' ' || event.key === 'Enter') {\n event.preventDefault()\n const option = props.options[index]\n if (option) {\n emitValue(option)\n }\n }\n}\n\nwatch(() => props.modelValue, () => scheduleMeasure())\nwatch(() => props.options, () => scheduleMeasure(), { deep: true })\nwatch(() => props.variant, () => scheduleMeasure())\nwatch(() => props.size, () => scheduleMeasure())\nwatch(() => props.block, () => scheduleMeasure())\n\nonMounted(() => scheduleMeasure())\nonBeforeUnmount(() => {\n resizeObserver?.disconnect()\n observedRoot = null\n observedItem = null\n})\n</script>\n\n<template>\n <div\n ref=\"rootRef\"\n data-gr-segmented\n :data-variant=\"variant\"\n role=\"radiogroup\"\n :aria-label=\"ariaLabel\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :class=\"rootClassName\"\n :style=\"rootStyle\"\n >\n <span\n v-if=\"hasIndicator\"\n data-gr-segmented-indicator\n aria-hidden=\"true\"\n :class=\"indicatorClassName\"\n :style=\"indicatorStyle\"\n />\n\n <button\n v-for=\"(option, index) in options\"\n :key=\"option.value\"\n :ref=\"element => setItemRef(option.value, element)\"\n data-gr-segmented-item\n :data-value=\"String(option.value)\"\n type=\"button\"\n role=\"radio\"\n :aria-checked=\"isOptionSelected(option) ? 'true' : 'false'\"\n :aria-disabled=\"resolveOptionDisabled(option) ? 'true' : undefined\"\n :disabled=\"resolveOptionDisabled(option)\"\n :tabindex=\"isFocusableOption(option, index) ? 0 : -1\"\n :class=\"grSegmentedItemClass({\n variant,\n selected: isOptionSelected(option),\n disabled: resolveOptionDisabled(option),\n iconOnly: isIconOnlyOption(option),\n })\"\n @click=\"emitValue(option)\"\n @keydown=\"onKeydown($event, index)\"\n >\n <input\n type=\"radio\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n :name=\"resolvedName\"\n :value=\"option.value\"\n :checked=\"isOptionSelected(option)\"\n :disabled=\"resolveOptionDisabled(option)\"\n :style=\"hiddenInputStyle\"\n >\n\n <slot\n :option=\"option\"\n :selected=\"isOptionSelected(option)\"\n :disabled=\"resolveOptionDisabled(option)\"\n >\n <component\n :is=\"option.icon\"\n v-if=\"option.icon\"\n aria-hidden=\"true\"\n :class=\"grSegmentedItemIconClass\"\n />\n <span v-if=\"option.label\" :class=\"grSegmentedItemLabelClass\">\n {{ option.label }}\n </span>\n </slot>\n </button>\n </div>\n</template>"],"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":"GrSidebar-DkWozzwA.js","names":["$slots"],"sources":["../../../../src/components/GrSidebar/sidebarContext.ts","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebar.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue","../../../../src/components/GrSidebar/GrSidebarItem.vue"],"sourcesContent":["import type { InjectionKey, Ref } from 'vue'\n\n/**\n * Контекст `GrSidebar`, который потребляют `GrSidebarItem`'ы: свёрнута ли панель.\n * В свёрнутом состоянии пункты показывают только иконку (или первую букву метки).\n */\nexport interface GrSidebarContext {\n collapsed: Ref<boolean>\n}\n\nexport const GR_SIDEBAR_KEY: InjectionKey<GrSidebarContext> = Symbol.for('@feugene/granularity/sidebar')\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\n\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. */\n toggleLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:collapsed', value: boolean): void\n}>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() =>\n props.toggleLabel ?? (collapsedState.value ? 'Expand sidebar' : 'Collapse sidebar'),\n)\n</script>\n\n<template>\n <aside\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n class=\"flex flex-col border-r border-[var(--sidebar-brd)] bg-[var(--sidebar)] text-[var(--sidebar-fg)] transition-[width] duration-200 ease-out\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n class=\"flex items-center gap-2 border-b border-[var(--sidebar-brd)] px-3 py-4\"\n :class=\"collapsedState ? 'justify-center' : 'justify-between'\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n class=\"truncate text-[14px] text-[var(--muted-fg)]\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n class=\"truncate text-[18px] font-700\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\" aria-hidden=\"true\">\n <IconChevronRight v-if=\"collapsedState\" />\n <IconChevronLeft v-else />\n </GrIcon>\n </GrButton>\n </div>\n\n <div class=\"flex-1 overflow-y-auto\" :class=\"collapsedState ? 'p-2' : 'p-3'\">\n <slot />\n </div>\n </aside>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebar — боковая панель приложения с опциональным заголовком, кнопкой\n * сворачивания и слотом контента (обычно — список `GrSidebarItem`).\n *\n * - Свёрнутое состояние (`collapsed`, поддерживает `v-model:collapsed`) сужает\n * панель до иконочной ширины; `GrSidebarItem`'ы через inject показывают только\n * иконку (или первую букву метки).\n * - Кнопка тогла (`show-toggle-button`) переключает состояние.\n * - Хедер рендерится только если есть `title`/`subtitle` (или кнопка тогла) —\n * иначе панель начинается сразу с контента.\n * - Слоты `#title` / `#subtitle` имеют приоритет над одноимёнными пропами.\n */\nimport { computed, provide, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconChevronLeft from '~icons/lucide/chevron-left'\nimport IconChevronRight from '~icons/lucide/chevron-right'\n\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nexport interface GrSidebarProps {\n title?: string\n subtitle?: string\n /** Свёрнутое состояние. Поддерживает `v-model:collapsed`. */\n collapsed?: boolean\n /** Показать кнопку сворачивания/разворачивания в хедере. */\n showToggleButton?: boolean\n /** Ширина в развёрнутом состоянии. */\n width?: string\n /** Ширина в свёрнутом состоянии. */\n collapsedWidth?: string\n /** A11y-лейбл кнопки тогла. */\n toggleLabel?: string\n}\n\nconst props = withDefaults(defineProps<GrSidebarProps>(), {\n title: undefined,\n subtitle: undefined,\n collapsed: false,\n showToggleButton: false,\n width: '240px',\n collapsedWidth: '64px',\n toggleLabel: undefined,\n})\n\nconst emit = defineEmits<{\n (e: 'update:collapsed', value: boolean): void\n}>()\n\n// Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n// (`v-model:collapsed`), и uncontrolled (панель сама помнит состояние).\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\nfunction toggle(): void {\n collapsedState.value = !collapsedState.value\n emit('update:collapsed', collapsedState.value)\n}\n\n// Даём `GrSidebarItem`'ам знать про свёрнутость.\nprovide(GR_SIDEBAR_KEY, { collapsed: collapsedState })\n\nconst hasTitle = computed(() => Boolean(props.title))\nconst hasSubtitle = computed(() => Boolean(props.subtitle))\nconst showHeader = computed(() => Boolean(hasTitle.value || hasSubtitle.value || props.showToggleButton))\n\nconst asideStyle = computed(() => ({\n width: collapsedState.value ? props.collapsedWidth : props.width,\n}))\n\nconst resolvedToggleLabel = computed(() =>\n props.toggleLabel ?? (collapsedState.value ? 'Expand sidebar' : 'Collapse sidebar'),\n)\n</script>\n\n<template>\n <aside\n data-gr-sidebar\n :data-collapsed=\"collapsedState ? 'true' : undefined\"\n class=\"flex flex-col border-r border-[var(--sidebar-brd)] bg-[var(--sidebar)] text-[var(--sidebar-fg)] transition-[width] duration-200 ease-out\"\n :style=\"asideStyle\"\n >\n <div\n v-if=\"showHeader\"\n data-gr-sidebar-header\n class=\"flex items-center gap-2 border-b border-[var(--sidebar-brd)] px-3 py-4\"\n :class=\"collapsedState ? 'justify-center' : 'justify-between'\"\n >\n <div\n v-if=\"!collapsedState && (hasTitle || hasSubtitle || $slots.title || $slots.subtitle)\"\n class=\"min-w-0\"\n >\n <div\n v-if=\"$slots.subtitle || hasSubtitle\"\n data-gr-sidebar-subtitle\n class=\"truncate text-[14px] text-[var(--muted-fg)]\"\n >\n <slot name=\"subtitle\">\n {{ subtitle }}\n </slot>\n </div>\n <div\n v-if=\"$slots.title || hasTitle\"\n data-gr-sidebar-title\n class=\"truncate text-[18px] font-700\"\n >\n <slot name=\"title\">\n {{ title }}\n </slot>\n </div>\n </div>\n\n <GrButton\n v-if=\"showToggleButton\"\n data-gr-sidebar-toggle\n variant=\"ghost\"\n size=\"sm\"\n square\n :aria-label=\"resolvedToggleLabel\"\n :aria-expanded=\"collapsedState ? 'false' : 'true'\"\n @click=\"toggle\"\n >\n <GrIcon :size=\"16\" aria-hidden=\"true\">\n <IconChevronRight v-if=\"collapsedState\" />\n <IconChevronLeft v-else />\n </GrIcon>\n </GrButton>\n </div>\n\n <div class=\"flex-1 overflow-y-auto\" :class=\"collapsedState ? 'p-2' : 'p-3'\">\n <slot />\n </div>\n </aside>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nconst props = withDefaults(defineProps<{\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\nconst rootClass = computed(() => [\n 'group relative flex w-full items-center rounded-lg text-sm transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]',\n collapsed.value ? 'justify-center px-0 py-2' : 'gap-3 px-3 py-2',\n props.disabled\n ? 'cursor-not-allowed opacity-50'\n : props.active\n ? 'bg-[var(--muted)] font-600 text-[var(--fg)]'\n : 'text-[var(--sidebar-fg)] hover:bg-[color-mix(in_srgb,var(--sidebar-fg)_8%,transparent)]',\n])\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootTag === 'a' ? href : undefined\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" class=\"text-[13px] font-700 leading-none\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span\n v-if=\"badge != null\"\n class=\"shrink-0 rounded-full bg-[color-mix(in_srgb,var(--sidebar-fg)_12%,transparent)] px-1.5 py-0.5 text-[11px] font-600\"\n >{{ badge }}</span>\n </template>\n </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrSidebarItem — пункт навигации боковой панели `GrSidebar`.\n *\n * Контракт:\n * - развёрнутая панель — `[иконка] метка [бейдж]`;\n * - свёрнутая панель — только иконка; если иконки нет, показывается ПЕРВАЯ БУКВА\n * метки (uppercase). В свёрнутом виде метка уходит в `title`/`aria-label` для\n * доступности и tooltip.\n *\n * Корневой тег: `as` → `<a href>` → `<button>` (в этом порядке).\n */\nimport { computed, inject, markRaw, type Component } from 'vue'\n\nimport { GR_SIDEBAR_KEY } from './sidebarContext'\n\nconst props = withDefaults(defineProps<{\n label: string\n /** Иконка: класс UnoCSS-иконки (`'i-lucide-home'`) или Vue-компонент. */\n icon?: string | Component\n href?: string\n as?: string | Component\n active?: boolean\n disabled?: boolean\n badge?: string | number\n}>(), {\n icon: undefined,\n href: undefined,\n as: undefined,\n active: false,\n disabled: false,\n badge: undefined,\n})\n\nconst sidebar = inject(GR_SIDEBAR_KEY, null)\nconst collapsed = computed(() => sidebar?.collapsed.value ?? false)\n\nconst isStringIcon = computed(() => typeof props.icon === 'string')\nconst iconComponent = computed(() => (props.icon && typeof props.icon !== 'string' ? markRaw(props.icon as Component) : null))\nconst firstLetter = computed(() => props.label.trim().charAt(0).toUpperCase() || '•')\n\nconst rootTag = computed<string | Component>(() => {\n if (props.disabled) return 'span'\n if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n return props.href ? 'a' : 'button'\n})\n\nconst rootClass = computed(() => [\n 'group relative flex w-full items-center rounded-lg text-sm transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]',\n collapsed.value ? 'justify-center px-0 py-2' : 'gap-3 px-3 py-2',\n props.disabled\n ? 'cursor-not-allowed opacity-50'\n : props.active\n ? 'bg-[var(--muted)] font-600 text-[var(--fg)]'\n : 'text-[var(--sidebar-fg)] hover:bg-[color-mix(in_srgb,var(--sidebar-fg)_8%,transparent)]',\n])\n</script>\n\n<template>\n <component\n :is=\"rootTag\"\n data-gr-sidebar-item\n :type=\"rootTag === 'button' ? 'button' : undefined\"\n :href=\"rootTag === 'a' ? href : undefined\"\n :aria-current=\"active ? 'page' : undefined\"\n :aria-disabled=\"disabled ? 'true' : undefined\"\n :title=\"collapsed ? label : undefined\"\n :aria-label=\"collapsed ? label : undefined\"\n :class=\"rootClass\"\n >\n <span class=\"flex h-5 w-5 shrink-0 items-center justify-center\">\n <component :is=\"iconComponent\" v-if=\"iconComponent\" class=\"h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"isStringIcon\" :class=\"icon\" class=\"block h-5 w-5\" aria-hidden=\"true\" />\n <span v-else-if=\"collapsed\" class=\"text-[13px] font-700 leading-none\" aria-hidden=\"true\">{{ firstLetter }}</span>\n </span>\n\n <template v-if=\"!collapsed\">\n <span class=\"min-w-0 flex-1 truncate text-left\">{{ label }}</span>\n <span\n v-if=\"badge != null\"\n class=\"shrink-0 rounded-full bg-[color-mix(in_srgb,var(--sidebar-fg)_12%,transparent)] px-1.5 py-0.5 text-[11px] font-600\"\n >{{ badge }}</span>\n </template>\n </component>\n</template>\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"GrSkeleton-DsN-_CDZ.js","names":[],"sources":["../../../../src/components/GrSkeleton/GrSkeleton.vue","../../../../src/components/GrSkeleton/GrSkeleton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrSkeleton — заглушка-плейсхолдер для загружающегося контента.\n *\n * Помечен `aria-hidden=\"true\"`, чтобы скринридер не озвучивал «пустой» узел;\n * внешний контейнер обычно имеет `aria-busy=\"true\"` + `aria-live`.\n */\nexport interface GrSkeletonProps {\n height?: string\n width?: string\n rounded?: string\n}\n\nwithDefaults(defineProps<GrSkeletonProps>(), {\n height: '12px',\n width: '100%',\n rounded: '9999px',\n})\n</script>\n\n<template>\n <div\n data-gr-skeleton\n aria-hidden=\"true\"\n class=\"bg-[var(--muted)] border border-[var(--brd)]\"\n :style=\"{ height, width, borderRadius: rounded }\"\n />\n</template>\n\n<style>\n@keyframes gr-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n[data-gr-skeleton] {\n animation: gr-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-gr-skeleton] {\n animation: none;\n }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrSkeleton — заглушка-плейсхолдер для загружающегося контента.\n *\n * Помечен `aria-hidden=\"true\"`, чтобы скринридер не озвучивал «пустой» узел;\n * внешний контейнер обычно имеет `aria-busy=\"true\"` + `aria-live`.\n */\nexport interface GrSkeletonProps {\n height?: string\n width?: string\n rounded?: string\n}\n\nwithDefaults(defineProps<GrSkeletonProps>(), {\n height: '12px',\n width: '100%',\n rounded: '9999px',\n})\n</script>\n\n<template>\n <div\n data-gr-skeleton\n aria-hidden=\"true\"\n class=\"bg-[var(--muted)] border border-[var(--brd)]\"\n :style=\"{ height, width, borderRadius: rounded }\"\n />\n</template>\n\n<style>\n@keyframes gr-skeleton-pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n[data-gr-skeleton] {\n animation: gr-skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n@media (prefers-reduced-motion: reduce) {\n [data-gr-skeleton] {\n animation: none;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;uBAqBE,mBAKE,OAAA;IAJE,oBAAA;IACA,eAAY;IACZ,OAAM;IACL,OAAK,eAAA;KAAA,QAAI,QAAA;KAAM,OAAE,QAAA;KAAK,cAAgB,QAAA;IAAO,CAAA"}
|