@ryuzaki13/react-foundation-ui 3.2.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/table-column-interactions-DzEvVuXe.js.map +1 -1
- package/dist/layout-picker/index.js +91 -60
- package/dist/layout-picker/index.js.map +1 -1
- package/dist/layout-picker/ui/LayoutPicker.d.ts +17 -1
- package/dist/layout-picker/ui/LayoutPicker.d.ts.map +1 -1
- package/dist/layout-picker/ui/LayoutPresetPreview.d.ts +8 -0
- package/dist/layout-picker/ui/LayoutPresetPreview.d.ts.map +1 -0
- package/dist/splitter/SplitterHeightContainer.d.ts +24 -0
- package/dist/splitter/SplitterHeightContainer.d.ts.map +1 -0
- package/dist/splitter/index.d.ts +1 -0
- package/dist/splitter/index.d.ts.map +1 -1
- package/dist/splitter/index.js +161 -64
- package/dist/splitter/index.js.map +1 -1
- package/dist/splitter/useSplitterContainerHeight.d.ts +24 -0
- package/dist/splitter/useSplitterContainerHeight.d.ts.map +1 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/styles/mixins/_mixin.scss +43 -0
- package/storybook-static/assets/{Badge-B1TTGHWx.js → Badge-D_miams1.js} +1 -1
- package/storybook-static/assets/{Badge.stories-m0BYb22G.js → Badge.stories-C53rR6-m.js} +1 -1
- package/storybook-static/assets/{BadgeList-slD8D0kC.js → BadgeList-CXhMsbHN.js} +1 -1
- package/storybook-static/assets/{BarcodeScannerDialog.stories-upAfBzGS.js → BarcodeScannerDialog.stories-seqRo6OE.js} +1 -1
- package/storybook-static/assets/{Button-mtVz4t8e.js → Button-CnG8UaLy.js} +1 -1
- package/storybook-static/assets/{Button-wEcm3PeA.js → Button-HcCf8ewy.js} +1 -1
- package/storybook-static/assets/{Button.stories-80YoPts7.js → Button.stories-BHSzUc2w.js} +1 -1
- package/storybook-static/assets/{CalendarView-CciHYZbO.js → CalendarView-XtXqdANe.js} +1 -1
- package/storybook-static/assets/{CheckBox-4LmQO_eu.js → CheckBox-CVtYfxZ9.js} +1 -1
- package/storybook-static/assets/{CheckBox-Cuizrqhy.js → CheckBox-D6vctcKk.js} +1 -1
- package/storybook-static/assets/{CheckBox.stories-BVlzOlCH.js → CheckBox.stories-DHXvTXOu.js} +1 -1
- package/storybook-static/assets/{Color-6AOWCN3U-p_cf8_j5.js → Color-6AOWCN3U-BbiWLCrL.js} +1 -1
- package/storybook-static/assets/{ContextMenu-CnlaWMhJ.js → ContextMenu-CveMvmMr.js} +1 -1
- package/storybook-static/assets/{ContextMenu-Qi9jyPRQ.js → ContextMenu-nOxBI728.js} +1 -1
- package/storybook-static/assets/{ContextMenu.stories-8u4LM_VP.js → ContextMenu.stories-BX-U2HL5.js} +1 -1
- package/storybook-static/assets/{CustomOptionButton-Be9f_V0i.js → CustomOptionButton-CeQkVSnm.js} +1 -1
- package/storybook-static/assets/{DateInput-BAa-CGeP.js → DateInput-Cl0jsK8W.js} +1 -1
- package/storybook-static/assets/{DateInput-CB1YwIXG.js → DateInput-DZulw10a.js} +1 -1
- package/storybook-static/assets/{DateInput.stories-D2TdFkNU.js → DateInput.stories-BAk7jvdQ.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-DjRdo1nJ.js → DateRangePresetSelect-BbP1EZha.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect-C__hQdoH.js → DateRangePresetSelect-fHheb8Qb.js} +1 -1
- package/storybook-static/assets/{DateRangePresetSelect.stories-Cfd8knqx.js → DateRangePresetSelect.stories-DAE_gknP.js} +1 -1
- package/storybook-static/assets/{Detail-D_eCEfW5.js → Detail-COtF87BC.js} +1 -1
- package/storybook-static/assets/{Detail.stories-BaBaaNck.js → Detail.stories-CSfAEQCi.js} +1 -1
- package/storybook-static/assets/{Dialog-CoHzabh8.js → Dialog-BrBqkDX8.js} +1 -1
- package/storybook-static/assets/{Dialog-CBBa80xk.js → Dialog-C2uB9kIV.js} +1 -1
- package/storybook-static/assets/{Dialog.stories-8LPXtaFM.js → Dialog.stories-Bm3UXA9U.js} +1 -1
- package/storybook-static/assets/{Disclosure-BE4gJXEI.js → Disclosure-xhFEOG3w.js} +1 -1
- package/storybook-static/assets/{Disclosure.stories-pV92k8Dz.js → Disclosure.stories-Vl98lnzh.js} +1 -1
- package/storybook-static/assets/{DisclosureGroup-B81hAh7v.js → DisclosureGroup-DUChaiu8.js} +1 -1
- package/storybook-static/assets/{DocsRenderer-JROSPFPF-DWm72idc.js → DocsRenderer-JROSPFPF-C_WINtPH.js} +1 -1
- package/storybook-static/assets/{DropZone-DZRf8WwR.js → DropZone-1gMBb4LE.js} +1 -1
- package/storybook-static/assets/{DropZone-1RJBvaFC.js → DropZone-BZvrpfEI.js} +1 -1
- package/storybook-static/assets/{DropZone.stories-D1XK6U6E.js → DropZone.stories-DVD3fCWD.js} +1 -1
- package/storybook-static/assets/{DropdownMenu-BSRQUQ4l.js → DropdownMenu-DTeBES3S.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel-DgeVn8wz.js → ExpandableActionPanel-3gzSQS7e.js} +1 -1
- package/storybook-static/assets/{ExpandableActionPanel.stories-C9Rhq3ki.js → ExpandableActionPanel.stories-D19yOaYM.js} +1 -1
- package/storybook-static/assets/{Flex-DaZWQHPt.js → Flex-DIZfsMsu.js} +1 -1
- package/storybook-static/assets/{Flex.stories-Bs__SjCv.js → Flex.stories-b6asO6Wg.js} +1 -1
- package/storybook-static/assets/{FloatingPopover-Z028tMRL.js → FloatingPopover-BMKn-ql-.js} +1 -1
- package/storybook-static/assets/{FormattedTableCell-BQg_ZMEh.js → FormattedTableCell-BT4z527d.js} +1 -1
- package/storybook-static/assets/FormattedTableCell-CXlMRNU9.css +1 -0
- package/storybook-static/assets/{Grid-CnX_bhEG.js → Grid-DOOnMH98.js} +1 -1
- package/storybook-static/assets/{Grid.stories-B7jXD20g.js → Grid.stories-BytLkIod.js} +1 -1
- package/storybook-static/assets/{ImageCropper.stories-1DjfXXxs.js → ImageCropper.stories-mOkJIs2l.js} +1 -1
- package/storybook-static/assets/{ImageRenderer-DI9hvpAc.js → ImageRenderer-CZRbXgZb.js} +1 -1
- package/storybook-static/assets/{ImageRenderer.stories-B27u6j14.js → ImageRenderer.stories-DTw8oVgX.js} +1 -1
- package/storybook-static/assets/{ImageView.stories-BM0aNseh.js → ImageView.stories-C_y-kuMM.js} +1 -1
- package/storybook-static/assets/{ImageViewer.stories-C5wouJNn.js → ImageViewer.stories-BMW63e3_.js} +2 -2
- package/storybook-static/assets/{ImageViewerRuntime-CW0NRJa4.js → ImageViewerRuntime-CNlV0hTZ.js} +1 -1
- package/storybook-static/assets/{Input-C7XSD_dt.js → Input-CVU8GJSJ.js} +1 -1
- package/storybook-static/assets/{Input-C2bvv3jL.js → Input-D7ogoGUR.js} +1 -1
- package/storybook-static/assets/{Input.stories-BbuxMsTz.js → Input.stories-Ck5NAzN5.js} +1 -1
- package/storybook-static/assets/{InputDateTime-2nXK3nym.js → InputDateTime-BtQKShpA.js} +1 -1
- package/storybook-static/assets/{InputDateTime.stories-BbNtupBI.js → InputDateTime.stories-Ck_Vdd0f.js} +1 -1
- package/storybook-static/assets/{InputFile-COZCRhFO.js → InputFile-BtrIqfKw.js} +1 -1
- package/storybook-static/assets/{InputFile-BEkTqx8y.js → InputFile-C-wYyGvd.js} +1 -1
- package/storybook-static/assets/{InputFile.stories-Cu8n9jPc.js → InputFile.stories-Hz_10-5g.js} +1 -1
- package/storybook-static/assets/{InputFiles-D4UX-p-O.js → InputFiles-fMA23_Bz.js} +1 -1
- package/storybook-static/assets/{InputFiles-Fqt7W6Sx.js → InputFiles-kGadQIOr.js} +1 -1
- package/storybook-static/assets/{InputFiles.stories-AQFSxEo-.js → InputFiles.stories-DCGwLGsk.js} +1 -1
- package/storybook-static/assets/{InputFilesList-Dl9kpcb-.js → InputFilesList-D2d_PfYA.js} +1 -1
- package/storybook-static/assets/{InputImage-OFDcbwsC.js → InputImage-DUthKRXu.js} +1 -1
- package/storybook-static/assets/{InputImage-By2cPpXy.js → InputImage-DmHkPJAH.js} +1 -1
- package/storybook-static/assets/{InputImage.stories-CSnV2rMp.js → InputImage.stories-jatpBa1U.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents-K3FQ5oIY.js → InteractiveComponents-DoYiFxrU.js} +1 -1
- package/storybook-static/assets/{InteractiveComponents.stories-B31U1CpF.js → InteractiveComponents.stories-C7MNF767.js} +1 -1
- package/storybook-static/assets/LayoutPicker-BXPyXDP-.js +85 -0
- package/storybook-static/assets/{LayoutPicker-Cmw9sDIb.js → LayoutPicker-C-QQvpXv.js} +39 -2
- package/storybook-static/assets/LayoutPicker.stories-Dwo08nCV.js +91 -0
- package/storybook-static/assets/{Listbox-DlD8gsbi.js → Listbox-CVTOtx7h.js} +1 -1
- package/storybook-static/assets/{Listbox-apRjZaS-.js → Listbox-lOsGVKCt.js} +1 -1
- package/storybook-static/assets/{Listbox.stories-Ccfez6pD.js → Listbox.stories-JF_tgMsM.js} +1 -1
- package/storybook-static/assets/{Modal-C7tZEU45.js → Modal-DNDnh6eL.js} +1 -1
- package/storybook-static/assets/{Modal-DsUFnBz_.js → Modal-XipTBtwq.js} +1 -1
- package/storybook-static/assets/{Modal.stories-C7z4-Upz.js → Modal.stories-C-D2Op2H.js} +1 -1
- package/storybook-static/assets/{ModalManagerProvider-CFSyB9oN.js → ModalManagerProvider-BSgCQPE0.js} +1 -1
- package/storybook-static/assets/{MultiSelect-hG56GrpU.js → MultiSelect-BkjfbN5S.js} +1 -1
- package/storybook-static/assets/{MultiSelect-GKFkNsBv.js → MultiSelect-juwreD-7.js} +1 -1
- package/storybook-static/assets/{MultiSelect.stories-DDy2bmb6.js → MultiSelect.stories-DpH2Lt7S.js} +1 -1
- package/storybook-static/assets/{NoData-BMwLVlW7.js → NoData-A59EYm0a.js} +1 -1
- package/storybook-static/assets/{NotificationsHost-svZxowAr.js → NotificationsHost-Dmp9bSBy.js} +1 -1
- package/storybook-static/assets/{NotificationsHost.stories-jyHqSHpV.js → NotificationsHost.stories-Ds9fPqPw.js} +1 -1
- package/storybook-static/assets/{ODataMultiSelect-CDZl1LYK.js → ODataMultiSelect-ATFN6j03.js} +1 -1
- package/storybook-static/assets/{ODataMultiSelect.stories-BRV8hqOa.js → ODataMultiSelect.stories-BZHufWhw.js} +1 -1
- package/storybook-static/assets/{ODataSelect-CH_KEIgG.js → ODataSelect-wsq-aKaL.js} +1 -1
- package/storybook-static/assets/{ODataSelect.stories-CdJ4ueMz.js → ODataSelect.stories-DDJckPji.js} +1 -1
- package/storybook-static/assets/{ODataTreeMultiSelect-DoDprp2D.js → ODataTreeMultiSelect-DRkVACkc.js} +1 -1
- package/storybook-static/assets/{ODataTreeMultiSelect.stories-BBa6dAWY.js → ODataTreeMultiSelect.stories-Cf9f-c1A.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect-jBq76QJv.js → ODataTreeSelect-DmpAqcJn.js} +1 -1
- package/storybook-static/assets/{ODataTreeSelect.stories-B0kASy4Q.js → ODataTreeSelect.stories-CmjLCIoB.js} +1 -1
- package/storybook-static/assets/{OneStepScroller-DgK5zRf5.js → OneStepScroller-EAhOZmWt.js} +1 -1
- package/storybook-static/assets/{Option-C0S3Jhd2.js → Option-Bc5-OwJm.js} +1 -1
- package/storybook-static/assets/{OptionButton-Bw4h_7Fd.js → OptionButton-PxwmoR0s.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-iAqhhTCd.js → PeriodSelect-B-NPWAUQ.js} +1 -1
- package/storybook-static/assets/{PeriodSelect-BUZlKThq.js → PeriodSelect-Dd3tAy-l.js} +1 -1
- package/storybook-static/assets/{PeriodSelect.stories-Cqu2cvpS.js → PeriodSelect.stories-BCRagfo9.js} +1 -1
- package/storybook-static/assets/{PickerField-kCraJolS.js → PickerField-BSGmEh4a.js} +1 -1
- package/storybook-static/assets/{PickerTriggerActions-DCrbv85j.js → PickerTriggerActions-CbcemWC5.js} +1 -1
- package/storybook-static/assets/{Popover-CAobkmJT.js → Popover-ChIXyBaB.js} +1 -1
- package/storybook-static/assets/{Popover-D2M0JiO7.js → Popover-DDcNjJVQ.js} +1 -1
- package/storybook-static/assets/{Popover.stories-BWrN-v1w.js → Popover.stories-DFA9Jxpy.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-BrsrppQR.js → PresetRangeDateInput-BqXmZpJv.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput-BskW--2E.js → PresetRangeDateInput-CbqvxYsV.js} +1 -1
- package/storybook-static/assets/{PresetRangeDateInput.stories-B4cQ8O68.js → PresetRangeDateInput.stories-BHQTcW_z.js} +1 -1
- package/storybook-static/assets/{PresetSelect-DEOf0a4I.js → PresetSelect-CtDoIWSg.js} +1 -1
- package/storybook-static/assets/{README-eoM28QGj.js → README-87vCeikt.js} +1 -1
- package/storybook-static/assets/{README-CKYbHRQu.js → README-8ieYbwRv.js} +1 -1
- package/storybook-static/assets/{README-CjDR0DCT.js → README-B2UhI-qx.js} +1 -1
- package/storybook-static/assets/{README-Weoeni8A.js → README-B3SMW4TV.js} +1 -1
- package/storybook-static/assets/{README-Bczkeo4S.js → README-B43WmszX.js} +1 -1
- package/storybook-static/assets/{README-C5ESwpCt.js → README-B5rpg-Bo.js} +1 -1
- package/storybook-static/assets/{README-PYQ__oB1.js → README-BAPMV_Cm.js} +1 -1
- package/storybook-static/assets/{README-DYHYOkUz.js → README-BEzdp9qB.js} +1 -1
- package/storybook-static/assets/{README-CcYawVkC.js → README-BHN17dUh.js} +1 -1
- package/storybook-static/assets/{README-Dh4uSHUd.js → README-BPBvX2pu.js} +1 -1
- package/storybook-static/assets/{README-tEKPrWDG.js → README-BRozDrPV.js} +1 -1
- package/storybook-static/assets/{README-BWG_J-15.js → README-BS2qCis7.js} +1 -1
- package/storybook-static/assets/{README-C2j_R02h.js → README-BS9CB7TR.js} +1 -1
- package/storybook-static/assets/{README-CrSfz44u.js → README-BTI7-oMS.js} +1 -1
- package/storybook-static/assets/{README-DEB7jN2G.js → README-Bf13jEbX.js} +1 -1
- package/storybook-static/assets/{README-FC7XUYVa.js → README-BmX_gdJm.js} +1 -1
- package/storybook-static/assets/{README-CJ-L25gm.js → README-BuUZJLLD.js} +1 -1
- package/storybook-static/assets/{README-CZdf7Jyj.js → README-BviZJCGw.js} +1 -1
- package/storybook-static/assets/{README-BlP3CzTg.js → README-CD0CH2Wy.js} +1 -1
- package/storybook-static/assets/{README-HfXKFrXY.js → README-CNQJDOEQ.js} +1 -1
- package/storybook-static/assets/{README-DjPRryHg.js → README-COGC_G42.js} +1 -1
- package/storybook-static/assets/{README-CdRI75Jm.js → README-CSYTh4FM.js} +1 -1
- package/storybook-static/assets/{README-CtBT6KJo.js → README-CVzeBBbC.js} +1 -1
- package/storybook-static/assets/{README-BkqBbuZP.js → README-CYkJGsO-.js} +1 -1
- package/storybook-static/assets/{README-CUXxO9Db.js → README-ClbpyGVv.js} +1 -1
- package/storybook-static/assets/{README-BZkpUcN4.js → README-CvznQ5DE.js} +1 -1
- package/storybook-static/assets/{README-CwOlh0x_.js → README-D1_Y0Xmw.js} +1 -1
- package/storybook-static/assets/{README-DOju-G9e.js → README-D2yCfl2o.js} +1 -1
- package/storybook-static/assets/{README-tneYNBR2.js → README-D9bg9f74.js} +1 -1
- package/storybook-static/assets/{README-BVm2h5gQ.js → README-DJ1jDUnA.js} +1 -1
- package/storybook-static/assets/{README-Cr5pvD2a.js → README-DMbTryDc.js} +1 -1
- package/storybook-static/assets/{README-CPB57-BD.js → README-DNjzB9pT.js} +1 -1
- package/storybook-static/assets/{README-pJNBrsHp.js → README-DTAFDnFQ.js} +1 -1
- package/storybook-static/assets/{README-DGnQ3O8r.js → README-DUBJn2Ju.js} +1 -1
- package/storybook-static/assets/{README-CLKKSnvI.js → README-D_RZ1dEa.js} +1 -1
- package/storybook-static/assets/{README-BDZ-UeI_.js → README-DaHZmDOI.js} +1 -1
- package/storybook-static/assets/{README-CPE-B9NJ.js → README-Daclz_Vq.js} +1 -1
- package/storybook-static/assets/{README-CXhg-Avp.js → README-Dl_o4aSe.js} +1 -1
- package/storybook-static/assets/{README-BRy5W4qi.js → README-DmaK5qEx.js} +1 -1
- package/storybook-static/assets/{README-h_Ia4l0F.js → README-DxeEPo-5.js} +1 -1
- package/storybook-static/assets/{README-DL8HYHzC.js → README-Dxm4jPJX.js} +1 -1
- package/storybook-static/assets/{README-ChM2WYvT.js → README-ErUs-WY2.js} +1 -1
- package/storybook-static/assets/{README-BedW-6Qh.js → README-OfF6wOio.js} +1 -1
- package/storybook-static/assets/{README-UBWohyzP.js → README-QZVvMoOB.js} +1 -1
- package/storybook-static/assets/{README-77pVTGG0.js → README-QjVUi8kc.js} +1 -1
- package/storybook-static/assets/{README-DzzON1ye.js → README-SZH6KGw3.js} +1 -1
- package/storybook-static/assets/{README-DzhqH1NW.js → README-ZR6Xp0dF.js} +1 -1
- package/storybook-static/assets/{README-DOpYTKui.js → README-a77qa4ty.js} +1 -1
- package/storybook-static/assets/{README-C04l6A_V.js → README-ex5nxaXZ.js} +1 -1
- package/storybook-static/assets/{README-D5Wgm_6F.js → README-g1OFGqQI.js} +1 -1
- package/storybook-static/assets/{README-BbqX48ZX.js → README-gx4Fd1mY.js} +1 -1
- package/storybook-static/assets/{README-CRfW_mwG.js → README-q1qdBpXc.js} +1 -1
- package/storybook-static/assets/{README-DEYu86HB.js → README-vD1-Ulbp.js} +1 -1
- package/storybook-static/assets/{RadioButton-C_7MrkSd.js → RadioButton-CF3QPcrf.js} +1 -1
- package/storybook-static/assets/{RadioButton-zjLDV_vA.js → RadioButton-hjjU5sk5.js} +1 -1
- package/storybook-static/assets/{RadioButton.stories-C81aMJWs.js → RadioButton.stories-koM1Ljav.js} +1 -1
- package/storybook-static/assets/{RadioGroup-G1nrB231.js → RadioGroup-Br-l88J6.js} +1 -1
- package/storybook-static/assets/{RadioGroup-BmMpfAxw.js → RadioGroup-D5eW-uDY.js} +1 -1
- package/storybook-static/assets/{RadioGroup.stories-U8Q6ChKN.js → RadioGroup.stories-DrwOi4QH.js} +1 -1
- package/storybook-static/assets/{Scrollable-7F5dqi9H.js → Scrollable-BrsRmcMz.js} +1 -1
- package/storybook-static/assets/{Select-CEfw0HMD.js → Select-Bf5M5oc0.js} +1 -1
- package/storybook-static/assets/{Select-Cr6CgIIx.js → Select-Cmlknxsv.js} +1 -1
- package/storybook-static/assets/{Select.stories-DgA0I8m1.js → Select.stories-BM8U-sIP.js} +1 -1
- package/storybook-static/assets/{SerializableSelect-CQyHtiSK.js → SerializableSelect-DF8HELZf.js} +1 -1
- package/storybook-static/assets/{SerializableSelect.stories-Dj0qXUbg.js → SerializableSelect.stories-BfDNuils.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-k6cU5HTO.js → SingleDateTimeInput-4p_cgs10.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput-C96e9Bnk.js → SingleDateTimeInput-DEOj7KGq.js} +1 -1
- package/storybook-static/assets/{SingleDateTimeInput.stories-DW1owBoF.js → SingleDateTimeInput.stories-D2EI6quF.js} +1 -1
- package/storybook-static/assets/Slider-Bz4wP74t.js +1 -0
- package/storybook-static/assets/{Slider-Bq2uMF2q.js → Slider-XVAOSj2a.js} +1 -1
- package/storybook-static/assets/{Slider.stories-VjnPqsrP.js → Slider.stories-B8_8QSd8.js} +1 -1
- package/storybook-static/assets/{SliderInput-BeAfEJOt.js → SliderInput-1U-1F8y3.js} +1 -1
- package/storybook-static/assets/SliderInput-BmIo8trQ.js +2 -0
- package/storybook-static/assets/{SliderInput.stories-DBlgmZyR.js → SliderInput.stories-Da1hcUQg.js} +1 -1
- package/storybook-static/assets/{Sortable-4hmW6aYf.js → Sortable-DdSm1U01.js} +1 -1
- package/storybook-static/assets/{Sortable.stories-BQ8KVECH.js → Sortable.stories-B3vBG-Wg.js} +1 -1
- package/storybook-static/assets/Splitter-BdSyx5Lj.css +1 -0
- package/storybook-static/assets/Splitter-SV-d9MZj.js +105 -0
- package/storybook-static/assets/Splitter.stories-jPF9QpQ5.js +52 -0
- package/storybook-static/assets/{StateSelect-CIbsxjVP.js → StateSelect-CLYa34QZ.js} +1 -1
- package/storybook-static/assets/{StateSelect-DNu5sYFr.js → StateSelect-Dg6j3tmo.js} +1 -1
- package/storybook-static/assets/{StateSelect.stories-BrgfGby7.js → StateSelect.stories-B-XXt836.js} +1 -1
- package/storybook-static/assets/{StatusIndicator-BAJHtEXU.js → StatusIndicator-SmIOAZiH.js} +1 -1
- package/storybook-static/assets/{StatusIndicator.stories-ELJXgKGF.js → StatusIndicator.stories-Dxn-Ph9C.js} +1 -1
- package/storybook-static/assets/{StringToggle.stories-Bp4AH2PM.js → StringToggle.stories-Dm_95aFz.js} +1 -1
- package/storybook-static/assets/{Switch-CEMTONNK.js → Switch-DHKEAZQb.js} +1 -1
- package/storybook-static/assets/{Switch-Dp2mfJMY.js → Switch-_tgHhBGP.js} +1 -1
- package/storybook-static/assets/{Switch.stories-CxSCdM1U.js → Switch.stories-BHEJkS4S.js} +1 -1
- package/storybook-static/assets/{Table-DFenIYxk.js → Table-DlSI_r_q.js} +1 -1
- package/storybook-static/assets/{Table.stories-D4hfPD50.js → Table.stories-B5rgYs9g.js} +1 -1
- package/storybook-static/assets/{TableEditor.stories-FUN04jRt.js → TableEditor.stories-KVe48GsE.js} +1 -1
- package/storybook-static/assets/{Tabs-DQITegdm.js → Tabs-DrYsqBrH.js} +1 -1
- package/storybook-static/assets/{Tabs.stories-iOhYWtXS.js → Tabs.stories-BPct4JgR.js} +1 -1
- package/storybook-static/assets/{TabsBox-Cu2hSQ0_.js → TabsBox-AWLl9n9k.js} +1 -1
- package/storybook-static/assets/{TagInput-BSHH7VHG.js → TagInput-Bhnrf28Y.js} +1 -1
- package/storybook-static/assets/{TagInput.stories-CMvjjSGz.js → TagInput.stories-Bkt4gArB.js} +1 -1
- package/storybook-static/assets/{Text-BSnmJ5Rc.js → Text-BgFSnObV.js} +1 -1
- package/storybook-static/assets/{Textarea-DCko2hh9.js → Textarea-BNJPblVu.js} +1 -1
- package/storybook-static/assets/{Textarea-BURqjbfm.js → Textarea-ClwEnzFe.js} +1 -1
- package/storybook-static/assets/{Textarea.stories-D9bD-zxp.js → Textarea.stories-DpKH8ULU.js} +1 -1
- package/storybook-static/assets/{TimePanel-ZM6IEZ23.js → TimePanel-BZwQNhG_.js} +1 -1
- package/storybook-static/assets/{TimePanel.stories-BPFzdjrk.js → TimePanel.stories-4TgrKbYT.js} +1 -1
- package/storybook-static/assets/{Toggle-Co-9WIQM.js → Toggle-CO8Ij90u.js} +1 -1
- package/storybook-static/assets/{Toggle-BGYpWyl-.js → Toggle-DbixMwD6.js} +1 -1
- package/storybook-static/assets/{Toggle.stories-DH28lc09.js → Toggle.stories-Dc4VwIpg.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-BiNv5d9H.js → TreeMultiSelect-C-_TH1CD.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect-DbqIa68V.js → TreeMultiSelect-CriZ1qIe.js} +1 -1
- package/storybook-static/assets/{TreeMultiSelect.stories-CBbmYs0g.js → TreeMultiSelect.stories-d_SN0Sy2.js} +1 -1
- package/storybook-static/assets/{TreePickerBase-DtDat39S.js → TreePickerBase-DrIewo4F.js} +1 -1
- package/storybook-static/assets/{TreeSelect-BWHuf3sH.js → TreeSelect-9_6a1BFQ.js} +1 -1
- package/storybook-static/assets/{TreeSelect-tQtWX3eZ.js → TreeSelect-Bbt4VmZS.js} +1 -1
- package/storybook-static/assets/{TreeSelect.stories-BFefku3r.js → TreeSelect.stories-pu8ExKD5.js} +1 -1
- package/storybook-static/assets/{TreeTable-ZOKoR3S8.js → TreeTable-DophWkj1.js} +1 -1
- package/storybook-static/assets/{TreeTable.stories-jWFBqYVA.js → TreeTable.stories-Pfm9IHtt.js} +1 -1
- package/storybook-static/assets/{blocks-CkyPJxFn.js → blocks-B8YtS91C.js} +3 -3
- package/storybook-static/assets/{check-DuSyNDf0.js → check-Dpmf3AX3.js} +1 -1
- package/storybook-static/assets/{chevron-down-T_Hptvkv.js → chevron-down-DNiHhbIr.js} +1 -1
- package/storybook-static/assets/{chevron-left-BcH0yrC3.js → chevron-left-DOGuNTdf.js} +1 -1
- package/storybook-static/assets/{chevron-right-Dk1ulWkk.js → chevron-right-Dpww2xSW.js} +1 -1
- package/storybook-static/assets/{chunk-W22LQPXL-CdmMdLH3.js → chunk-W22LQPXL-DMKzrwT-.js} +1 -1
- package/storybook-static/assets/{circle-alert-CiZtyFLl.js → circle-alert-0JRaOQ6l.js} +1 -1
- package/storybook-static/assets/{circle-check-N8FNJhb5.js → circle-check-cScFaPMW.js} +1 -1
- package/storybook-static/assets/{components-BuQ4azTo.js → components-CX2-Yz0X.js} +3 -3
- package/storybook-static/assets/{contextMenu-ChdzMmup.js → contextMenu-9tIzHxoE.js} +1 -1
- package/storybook-static/assets/{download-CEAUuG15.js → download-DgVtY66c.js} +1 -1
- package/storybook-static/assets/{floating-ui.react-DO4IuDDt.js → floating-ui.react-DoTNEH-V.js} +1 -1
- package/storybook-static/assets/{foundationApi-D4_39zNT.js → foundationApi-CrfT1bel.js} +1 -1
- package/storybook-static/assets/{foundationLib-D36HDBKZ.js → foundationLib-C3lg6eHJ.js} +1 -1
- package/storybook-static/assets/{hooks-DaCAWteV.js → hooks-DUjApVwU.js} +1 -1
- package/storybook-static/assets/{iframe-C3wMnNgT.js → iframe-BNEMNAEw.js} +4 -4
- package/storybook-static/assets/iframe-DRW7Blys.js +1 -0
- package/storybook-static/assets/{info-CgD0dwe7.js → info-DLaCn50r.js} +1 -1
- package/storybook-static/assets/number-scale-D2KTkjVQ.js +1 -0
- package/storybook-static/assets/{odata-DuWK9X6F.js → odata-gcOB7kIq.js} +1 -1
- package/storybook-static/assets/{odataStoryFixtures-BlYK5gCH.js → odataStoryFixtures-DYyQ-sVj.js} +1 -1
- package/storybook-static/assets/{react-6aa8UN0d.js → react-E46PZk5t.js} +1 -1
- package/storybook-static/assets/{refresh-cw-C-kY50XM.js → refresh-cw-DOoEo5nW.js} +1 -1
- package/storybook-static/assets/{settings-2-Lw5jPpcm.js → settings-2-qiHcSfL1.js} +1 -1
- package/storybook-static/assets/{sortable-BMxBXOba.js → sortable-YPosiOrw.js} +1 -1
- package/storybook-static/assets/{syntaxhighlighter-QEQV7K2Y-C6nhsm5S.js → syntaxhighlighter-QEQV7K2Y-Cb3owL36.js} +1 -1
- package/storybook-static/assets/{trash-2-DDRTzebt.js → trash-2-m2QWUX7a.js} +1 -1
- package/storybook-static/assets/{triangle-alert--SWMyXwt.js → triangle-alert-dC_KzK0I.js} +1 -1
- package/storybook-static/assets/{useODataSelectBase-B_3Zl3-d.js → useODataSelectBase-CZT1sCI4.js} +1 -1
- package/storybook-static/assets/{useODataTreeData-D5U-f8-Y.js → useODataTreeData-C4C8qk14.js} +1 -1
- package/storybook-static/assets/{usePickerQuery-BQ85tBVK.js → usePickerQuery-BVa-C4dI.js} +1 -1
- package/storybook-static/assets/{usePickerTriggerController-DUaswv5t.js → usePickerTriggerController-DSGNNIhS.js} +1 -1
- package/storybook-static/assets/{x-B4c2IwTW.js → x-B7mf6jeL.js} +1 -1
- package/storybook-static/iframe.html +2 -2
- package/storybook-static/index.json +1 -1
- package/storybook-static/project.json +1 -1
- package/storybook-static/assets/FormattedTableCell-CTIL_ueu.css +0 -1
- package/storybook-static/assets/LayoutPicker-RN42vmef.js +0 -66
- package/storybook-static/assets/LayoutPicker.stories-C5nHgi9s.js +0 -74
- package/storybook-static/assets/Slider-B1T2FRiM.js +0 -1
- package/storybook-static/assets/SliderInput-DJpNIGZl.js +0 -2
- package/storybook-static/assets/Splitter-08NDE539.js +0 -84
- package/storybook-static/assets/Splitter-D-LmmQad.css +0 -1
- package/storybook-static/assets/Splitter.stories-DOVSidH9.js +0 -39
- package/storybook-static/assets/iframe-VKLQYnIk.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"generatedAt":
|
|
1
|
+
{"generatedAt":1789470021090,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":false,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"tanstack-react","packageName":"@tanstack/react-router","version":"1.170.32"},"knownPackages":{"testPackages":{"@chromatic-com/storybook":"5.3.0","@storybook/addon-vitest":"10.5.10","@testing-library/dom":"10.4.1","@testing-library/react":"16.3.3","@testing-library/user-event":"^14.6.1","@vitest/browser":"4.1.11","playwright":"1.62.1","vitest":"4.1.11"},"stateManagementPackages":{"zustand":"5.0.0"},"dataFetchingPackages":{"@tanstack/react-query":"5.101.4"},"routerPackages":{"@tanstack/react-router":"1.170.23"}},"hasRouterPackage":false,"packageManager":{"type":"npm","version":"11.7.0","agent":"npm","nodeLinker":"node_modules"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/react-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/react","portableStoriesFileCount":1,"applicationFileCount":9,"storybookVersion":"10.5.10","storybookVersionSpecifier":"^10.5.5","language":"typescript","storybookPackages":{"@storybook/react-vite":{"version":"10.5.10"},"storybook":{}},"addons":{"@chromatic-com/storybook":{"version":"5.3.0"},"@storybook/addon-docs":{"version":"10.5.10"},"@storybook/addon-a11y":{"version":"10.5.10"},"@storybook/addon-vitest":{"version":"10.5.10"}},"packageJsonType":"module"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.UMTbLD{color:inherit;border-left-style:solid;border-left-color:var(--state-border-color,transparent);border-left-width:.0625em;padding-left:.25em;text-decoration:none;display:block}.UMTbLD.cz57Fx{border-left-width:.3125em;padding-left:0}.UMTbLD.cz57Fx.oPzAxu{border-left-color:var(--info-fill)}.UMTbLD.cz57Fx.MBu26r{border-left-color:var(--success-fill)}.UMTbLD.cz57Fx._03z-1l{border-left-color:var(--warning-fill)}.UMTbLD.cz57Fx._0RqsqJ{border-left-color:var(--error-fill)}.mXkUoM.oPzAxu{color:var(--info-text);fill:var(--info-fill);stroke:var(--info-on-fill)}.mXkUoM.MBu26r{color:var(--success-text);fill:var(--success-fill);stroke:var(--success-on-fill)}.mXkUoM._03z-1l{color:var(--warning-text);fill:var(--warning-fill);stroke:var(--warning-on-fill);stroke-width:2px}.mXkUoM._0RqsqJ{color:var(--error-text);fill:var(--error-fill);stroke:var(--error-on-fill)}.YJUVjb{cursor:col-resize;touch-action:none;-webkit-user-select:none;user-select:none;z-index:1;width:6px;height:100%;position:absolute;top:0;right:0}.YJUVjb:hover,.YJUVjb:focus-visible{background:var(--focus-ring)}.YJUVjb:focus-visible{outline:var(--focus);outline-offset:calc(var(--focus-offset) * -1)}._0rNBMr,.gp-7Db{min-width:0}.Ck-sXP{border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums;-webkit-hyphens:auto;hyphens:auto;width:100%}.-F3gli{z-index:10}.V5tPM-{box-shadow:inset var(--focus-offset) 0 0 var(--border-0)}._2VJbvj{background-color:var(--surface-0)}.AD8NkG{padding:var(--space-sm) var(--space-md);background-color:var(--surface-2);border-bottom:var(--border);color:var(--content-0);vertical-align:middle;position:relative}.qqixKn{min-width:0}.dVDRNv{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.dVDRNv:active{cursor:grabbing}.klOoMz{opacity:.75}.fJvFJA{z-index:12;position:sticky}._7D8xa9{transition:background-color var(--transition-fast) ease}._3j87pS{cursor:pointer}._3j87pS:hover .uwojkJ,._3j87pS:focus-visible .uwojkJ,.lLsmW6 .uwojkJ{background-color:var(--surface-1)}.uwojkJ{padding:var(--space-sm) var(--space-md);background-color:var(--surface-0);border-bottom:var(--border);vertical-align:middle}.uYvZ5P{z-index:2;position:sticky}.QIS3xA{border-bottom-color:#0000}.a580w0{padding:var(--space-md);background-color:var(--surface-0)}.UOhaMF .a580w0{border-bottom:0}.DtKAgs{pointer-events:none;z-index:40;position:absolute;inset:0}.jPPyP7,.Oa7e5P,.KhQtgF{width:100%;min-width:0}.Oa7e5P,.KhQtgF{align-items:center;display:flex}.KhQtgF{gap:var(--space-xs)}
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-C3wMnNgT.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-CkyPJxFn.js";import{a as p,c as m,i as h,n as g,o as _,r as v,s as y,t as b}from"./LayoutPicker.stories-C5nHgi9s.js";function x(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,C.jsxs)(C.Fragment,{children:[(0,C.jsx)(s,{of:_,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,C.jsx)(u,{children:`LayoutPicker`}),`
|
|
3
|
-
`,(0,C.jsx)(o,{children:`Контролируемый выбор layout-пресета со схематичным превью`}),`
|
|
4
|
-
`,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`LayoutPicker`}),` нужен для выбора схемы размещения независимых областей: графиков, панелей, секций дашборда или другого UI, где сама раскладка хранится во внешней модели.
|
|
5
|
-
Компонент не знает, что будет внутри ячеек: он показывает только превью, принимает текущий `,(0,C.jsx)(t.code,{children:`value`}),` как ID пресета и возвращает выбранный ID через `,(0,C.jsx)(t.code,{children:`onChange`}),`.
|
|
6
|
-
По умолчанию trigger отображает только иконку текущей раскладки. Чтобы добавить рядом поясняющий текст, передайте `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`: компонент покажет именно строку из `,(0,C.jsx)(t.code,{children:`placeholder`}),`, не заменяя её названием выбранного пресета.`]}),`
|
|
7
|
-
`,(0,C.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
8
|
-
`,(0,C.jsx)(f,{}),`
|
|
9
|
-
`,(0,C.jsx)(i,{of:b}),`
|
|
10
|
-
`,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
|
|
11
|
-
|
|
12
|
-
import { LayoutPicker } from "@ryuzaki13/react-foundation-ui";
|
|
13
|
-
|
|
14
|
-
export function Example() {
|
|
15
|
-
const [layoutId, setLayoutId] = useState("two-columns");
|
|
16
|
-
|
|
17
|
-
return <LayoutPicker label="Layout панели" value={layoutId} onChange={setLayoutId} />;
|
|
18
|
-
}
|
|
19
|
-
`})}),`
|
|
20
|
-
`,(0,C.jsx)(t.h2,{id:`контракт-пресета`,children:`Контракт пресета`}),`
|
|
21
|
-
`,(0,C.jsxs)(t.p,{children:[`Пресет описывает размер сетки и расположение ячеек внутри CSS Grid. `,(0,C.jsx)(t.code,{children:`LayoutPicker`}),` использует эти данные только для превью и не применяет раскладку к пользовательскому контенту. Публичный `,(0,C.jsx)(t.code,{children:`onChange`}),` остаётся совместимым с `,(0,C.jsx)(t.code,{children:`UiBaseProps<string>`}),` и отдаёт только `,(0,C.jsx)(t.code,{children:`preset.id`}),`.`]}),`
|
|
22
|
-
`,(0,C.jsx)(t.pre,{children:(0,C.jsx)(t.code,{className:`language-tsx`,children:`import { type LayoutPickerPreset } from "@ryuzaki13/react-foundation-ui";
|
|
23
|
-
|
|
24
|
-
const dashboardPreset: LayoutPickerPreset = {
|
|
25
|
-
id: "dashboard-main-aside",
|
|
26
|
-
label: "Основной блок + сайдбар",
|
|
27
|
-
description: "Большая рабочая область слева и вертикальная колонка справа.",
|
|
28
|
-
columns: 3,
|
|
29
|
-
rows: 2,
|
|
30
|
-
cells: [
|
|
31
|
-
{ id: "main", column: 1, columnSpan: 2, row: 1, rowSpan: 2 },
|
|
32
|
-
{ id: "aside-top", column: 3, columnSpan: 1, row: 1, rowSpan: 1 },
|
|
33
|
-
{ id: "aside-bottom", column: 3, columnSpan: 1, row: 2, rowSpan: 1 }
|
|
34
|
-
]
|
|
35
|
-
};
|
|
36
|
-
`})}),`
|
|
37
|
-
`,(0,C.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
38
|
-
`,(0,C.jsxs)(t.ul,{children:[`
|
|
39
|
-
`,(0,C.jsxs)(t.li,{children:[`Храните во внешней модели только `,(0,C.jsx)(t.code,{children:`preset.id`}),`, а полный пресет берите из стабильного списка `,(0,C.jsx)(t.code,{children:`presets`}),`.`]}),`
|
|
40
|
-
`,(0,C.jsxs)(t.li,{children:[`Передавайте `,(0,C.jsx)(t.code,{children:`ariaLabel`}),`, когда рядом нет видимой подписи поля.`]}),`
|
|
41
|
-
`,(0,C.jsxs)(t.li,{children:[`Используйте `,(0,C.jsx)(t.code,{children:`getPresetDisabled`}),`, если отдельные схемы временно недоступны из-за лимитов, прав или текущего режима.`]}),`
|
|
42
|
-
`,(0,C.jsxs)(t.li,{children:[`Не помещайте бизнес-данные ячеек в `,(0,C.jsx)(t.code,{children:`shared/ui`}),`: назначение содержимого должно оставаться в вызывающем слое.`]}),`
|
|
43
|
-
`]}),`
|
|
44
|
-
`,(0,C.jsx)(t.h2,{id:`сценарии-использования`,children:`Сценарии использования`}),`
|
|
45
|
-
`,(0,C.jsxs)(t.h3,{id:`контролируемый-выбор-синхронизирует-value-с-storybook-args`,children:[`Контролируемый выбор синхронизирует `,(0,C.jsx)(t.code,{children:`value`}),` с Storybook args`]}),`
|
|
46
|
-
`,(0,C.jsxs)(t.p,{children:[`Главный story обновляет `,(0,C.jsx)(t.code,{children:`value`}),` через `,(0,C.jsx)(t.code,{children:`useArgs`}),`, поэтому Controls отражают выбранный layout.`]}),`
|
|
47
|
-
`,(0,C.jsx)(d,{of:b}),`
|
|
48
|
-
`,(0,C.jsx)(t.h3,{id:`состояние-без-выбранного-значения`,children:`Состояние без выбранного значения`}),`
|
|
49
|
-
`,(0,C.jsxs)(t.p,{children:[`Story явно включает `,(0,C.jsx)(t.code,{children:`showPlaceholder`}),`, поэтому trigger показывает переданный текст `,(0,C.jsx)(t.code,{children:`placeholder`}),` рядом с иконкой. Без этого пропса trigger остаётся icon-only независимо от наличия выбранного пресета.`]}),`
|
|
50
|
-
`,(0,C.jsx)(d,{of:y}),`
|
|
51
|
-
`,(0,C.jsx)(t.h3,{id:`кастомный-набор-пресетов`,children:`Кастомный набор пресетов`}),`
|
|
52
|
-
`,(0,C.jsxs)(t.p,{children:[`Компонент принимает произвольный список `,(0,C.jsx)(t.code,{children:`LayoutPickerPreset`}),`, пока каждая ячейка описана координатами grid.`]}),`
|
|
53
|
-
`,(0,C.jsx)(d,{of:g}),`
|
|
54
|
-
`,(0,C.jsx)(t.h3,{id:`заблокированные-пресеты`,children:`Заблокированные пресеты`}),`
|
|
55
|
-
`,(0,C.jsxs)(t.p,{children:[(0,C.jsx)(t.code,{children:`getPresetDisabled`}),` блокирует отдельные варианты, не отключая весь контрол.`]}),`
|
|
56
|
-
`,(0,C.jsx)(d,{of:h}),`
|
|
57
|
-
`,(0,C.jsx)(t.h3,{id:`пример-в-панели-настройки`,children:`Пример в панели настройки`}),`
|
|
58
|
-
`,(0,C.jsx)(t.p,{children:`Сценарий показывает типичную связку: выбор layout, сводку текущего пресета и превью областей, которые уже рендерит вызывающий слой.`}),`
|
|
59
|
-
`,(0,C.jsx)(d,{of:p}),`
|
|
60
|
-
`,(0,C.jsx)(t.h3,{id:`заблокированный-контрол`,children:`Заблокированный контрол`}),`
|
|
61
|
-
`,(0,C.jsxs)(t.p,{children:[`Полное `,(0,C.jsx)(t.code,{children:`disabled`}),`-состояние блокирует trigger и открытие popup.`]}),`
|
|
62
|
-
`,(0,C.jsx)(d,{of:v}),`
|
|
63
|
-
`,(0,C.jsx)(t.h2,{id:`api`,children:`API`}),`
|
|
64
|
-
`,(0,C.jsx)(l,{of:_}),`
|
|
65
|
-
`,(0,C.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
66
|
-
`,(0,C.jsx)(a,{includePrimary:!1})]})}function S(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,C.jsx)(t,{...e,children:(0,C.jsx)(x,{...e})}):x(e)}var C;function w(){return(w=e((()=>{C=t(),r(),c(),m()})))()}w();export{S as default};
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-C3wMnNgT.js";import{i,n as a,r as o,t as s}from"./LayoutPicker-Cmw9sDIb.js";var c,l,u,d,f,p,m,h,g,_;function v(){return(v=e((()=>{c=`buT8ds`,l=`vDpJVR`,u=`-GMI1h`,d=`Xgkzn9`,f=`X--lo-`,p=`W5rEjx`,m=`BgilL7`,h=`ALGrVl`,g=`IrqK1d`,_={canvas:c,toolbar:l,summary:u,summaryItem:d,summaryValue:f,muted:p,layoutPreview:m,layoutCell:h,layoutCellTitle:g}})))()}var y=t({Controlled:()=>A,CustomPresets:()=>M,Disabled:()=>F,DisabledPresets:()=>N,InToolbar:()=>P,Placeholder:()=>j,__namedExportsOrder:()=>I,default:()=>k});function b(e,t){return t.find(t=>t.id===e)}function x({value:e,presets:t}){let n=b(e,t);return(0,T.jsxs)(`div`,{className:_.summary,"aria-live":`polite`,children:[(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`ID`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:e||`не выбрано`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Название`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.label??`Layout не выбран`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Сетка`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?`${n.columns} x ${n.rows}`:`нет данных`})]}),(0,T.jsxs)(`div`,{className:_.summaryItem,children:[(0,T.jsx)(`span`,{children:`Ячеек`}),(0,T.jsx)(`span`,{className:_.summaryValue,children:n?.cells.length??0})]})]})}function S({value:e,presets:t}){let n=b(e,t);if(!n)return null;let r=n.columns,i=n.rows,a=n.cells;return(0,T.jsx)(`div`,{className:_.layoutPreview,style:{gridTemplateColumns:`repeat(${r}, minmax(0, 1fr))`,gridTemplateRows:`repeat(${i}, minmax(0, 1fr))`},children:a.map((e,t)=>(0,T.jsxs)(`div`,{className:_.layoutCell,style:{gridColumn:`${e.column} / span ${e.columnSpan}`,gridRow:`${e.row} / span ${e.rowSpan}`},children:[(0,T.jsxs)(`span`,{className:_.layoutCellTitle,children:[`Область `,t+1]}),(0,T.jsxs)(`span`,{className:_.muted,children:[`Колонка `,e.column,`, строка `,e.row,`; span `,e.columnSpan,` x `,e.rowSpan]})]},e.id))})}function C(){let[e,t]=(0,w.useState)(`1x2`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(`div`,{className:_.toolbar,children:(0,T.jsx)(s,{label:`Layout панели`,value:e,onChange:t,ariaLabel:`Выбрать layout панели`})}),(0,T.jsx)(x,{value:e,presets:o}),(0,T.jsx)(S,{value:e,presets:o})]})}var w,T,E,D,O,k,A,j,M,N,P,F,I;function L(){return(L=e((()=>{w=n(),i(),a(),v(),T=r(),{useArgs:E}=__STORYBOOK_MODULE_PREVIEW_API__,{fn:D}=__STORYBOOK_MODULE_TEST__,O=[{id:`dashboard-summary`,label:`Сводка + детали`,description:`Один широкий блок сверху и две области детализации снизу.`,columns:2,rows:2,cells:[{id:`summary`,column:1,columnSpan:2,row:1,rowSpan:1},{id:`left-detail`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`right-detail`,column:2,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-main-aside`,label:`Основной блок + сайдбар`,description:`Большая рабочая область слева и вертикальная колонка справа.`,columns:3,rows:2,cells:[{id:`main`,column:1,columnSpan:2,row:1,rowSpan:2},{id:`aside-top`,column:3,columnSpan:1,row:1,rowSpan:1},{id:`aside-bottom`,column:3,columnSpan:1,row:2,rowSpan:1}]},{id:`dashboard-quad`,label:`Четыре равных блока`,description:`Плотная сетка для сравнения нескольких независимых виджетов.`,columns:2,rows:2,cells:[{id:`top-left`,column:1,columnSpan:1,row:1,rowSpan:1},{id:`top-right`,column:2,columnSpan:1,row:1,rowSpan:1},{id:`bottom-left`,column:1,columnSpan:1,row:2,rowSpan:1},{id:`bottom-right`,column:2,columnSpan:1,row:2,rowSpan:1}]}],k={title:`UI/LayoutPicker`,component:s,args:{label:`Layout панели`,description:`Выберите схему размещения областей.`,value:o[0].id,onChange:D(),presets:o,disabled:!1,placeholder:`Выберите layout`,showPlaceholder:!1,ariaLabel:`Выбрать layout`,placement:`bottom-start`},parameters:{atomicCanvas:!0,layout:`padded`,docs:{description:{component:`Контролируемый выбор layout-пресета со схематичным превью. Компонент хранит только UI-состояние popup и возвращает наружу ID выбранного пресета.`}}},argTypes:{id:{description:"ID кнопки выбора. Если не передан, компонент создаёт стабильный `useId`.",control:`text`},label:{description:`Заголовок поля.`,control:`text`},description:{description:`Описание под заголовком.`,control:`text`},value:{description:`ID текущего выбранного layout-пресета.`,control:`text`},onChange:{description:`Вызывается с ID выбранного layout-пресета.`,control:!1},presets:{description:"Список layout-пресетов. По умолчанию используется `DEFAULT_LAYOUT_PICKER_PRESETS`.",control:!1},disabled:{description:`Блокирует кнопку выбора и открытие popup.`,control:`boolean`},getPresetDisabled:{description:`Позволяет заблокировать отдельные пресеты внутри popup.`,control:!1},placeholder:{description:"Текст, который можно явно показать рядом с превью через `showPlaceholder`.",control:`text`},showPlaceholder:{description:"Показывает рядом с превью именно строку `placeholder`. По умолчанию trigger содержит только иконку.",control:`boolean`},ariaLabel:{description:`Доступное имя trigger-кнопки. Если не передано, строится из текущего значения.`,control:`text`},size:{description:"Размер поля из общего `UiBaseProps`.",control:`select`,options:[`xs`,`sm`,`md`,`lg`,`xl`]},className:{description:`Дополнительный CSS-класс корневого контейнера.`,control:`text`},triggerClassName:{description:`Дополнительный CSS-класс trigger-кнопки.`,control:`text`},popupClassName:{description:`Дополнительный CSS-класс popup.`,control:`text`},placement:{description:`Позиционирование popup относительно trigger.`,control:`select`,options:[`bottom-start`,`bottom-end`,`top-start`,`top-end`,`right-start`,`left-start`]}}},A={args:{value:`2x1`},name:`Контролируемый выбор`,render:function(e){let[,t]=E(),n=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,presets:n,onChange:n=>{e.onChange(n),t({value:n})}}),(0,T.jsx)(x,{value:e.value??``,presets:n})]})}},j={name:`Без выбранного значения`,render:e=>{let[t,n]=(0,w.useState)(``),r=e.presets??o;return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:r,placeholder:`Layout ещё не выбран`,showPlaceholder:!0,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:r})]})},args:{value:``}},M={name:`Кастомные пресеты`,render:e=>{let[t,n]=(0,w.useState)(O[0].id);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,presets:O,ariaLabel:`Выбрать layout дашборда`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(x,{value:t,presets:O}),(0,T.jsx)(S,{value:t,presets:O})]})},args:{value:O[0].id,presets:O}},N={name:`Заблокированные пресеты`,render:e=>{let[t,n]=(0,w.useState)(`1x1`);return(0,T.jsxs)(`div`,{className:_.canvas,children:[(0,T.jsx)(s,{...e,value:t,getPresetDisabled:e=>e.id===`1x2`||e.id===`2x2-l`,onChange:t=>{n(t),e.onChange(t)}}),(0,T.jsx)(`div`,{className:_.muted,children:`Пресеты с двумя колонками в этом сценарии недоступны.`}),(0,T.jsx)(x,{value:t,presets:o})]})}},P={name:`В панели настройки`,render:()=>(0,T.jsx)(C,{})},F={name:`Заблокированный контрол`,args:{disabled:!0,value:`1x2`}},A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
args: {
|
|
3
|
-
value: "2x1"
|
|
4
|
-
},
|
|
5
|
-
name: "Контролируемый выбор",
|
|
6
|
-
render: function Render(args) {
|
|
7
|
-
const [, updateArgs] = useArgs<LayoutPickerProps>();
|
|
8
|
-
const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
|
|
9
|
-
return <div className={styles.canvas}>
|
|
10
|
-
<LayoutPicker {...args} presets={presets} onChange={layoutId => {
|
|
11
|
-
args.onChange(layoutId);
|
|
12
|
-
updateArgs({
|
|
13
|
-
value: layoutId
|
|
14
|
-
});
|
|
15
|
-
}} />
|
|
16
|
-
<PresetSummary value={args.value ?? ""} presets={presets} />
|
|
17
|
-
</div>;
|
|
18
|
-
}
|
|
19
|
-
}`,...A.parameters?.docs?.source}}},j.parameters={...j.parameters,docs:{...j.parameters?.docs,source:{originalSource:`{
|
|
20
|
-
name: "Без выбранного значения",
|
|
21
|
-
render: args => {
|
|
22
|
-
const [value, setValue] = useState("");
|
|
23
|
-
const presets = args.presets ?? DEFAULT_LAYOUT_PICKER_PRESETS;
|
|
24
|
-
return <div className={styles.canvas}>
|
|
25
|
-
<LayoutPicker {...args} value={value} presets={presets} placeholder="Layout ещё не выбран" showPlaceholder onChange={layoutId => {
|
|
26
|
-
setValue(layoutId);
|
|
27
|
-
args.onChange(layoutId);
|
|
28
|
-
}} />
|
|
29
|
-
<PresetSummary value={value} presets={presets} />
|
|
30
|
-
</div>;
|
|
31
|
-
},
|
|
32
|
-
args: {
|
|
33
|
-
value: ""
|
|
34
|
-
}
|
|
35
|
-
}`,...j.parameters?.docs?.source}}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
|
|
36
|
-
name: "Кастомные пресеты",
|
|
37
|
-
render: args => {
|
|
38
|
-
const [value, setValue] = useState<string>(dashboardPresets[0].id);
|
|
39
|
-
return <div className={styles.canvas}>
|
|
40
|
-
<LayoutPicker {...args} value={value} presets={dashboardPresets} ariaLabel="Выбрать layout дашборда" onChange={layoutId => {
|
|
41
|
-
setValue(layoutId);
|
|
42
|
-
args.onChange(layoutId);
|
|
43
|
-
}} />
|
|
44
|
-
<PresetSummary value={value} presets={dashboardPresets} />
|
|
45
|
-
<LayoutPreview value={value} presets={dashboardPresets} />
|
|
46
|
-
</div>;
|
|
47
|
-
},
|
|
48
|
-
args: {
|
|
49
|
-
value: dashboardPresets[0].id,
|
|
50
|
-
presets: dashboardPresets
|
|
51
|
-
}
|
|
52
|
-
}`,...M.parameters?.docs?.source}}},N.parameters={...N.parameters,docs:{...N.parameters?.docs,source:{originalSource:`{
|
|
53
|
-
name: "Заблокированные пресеты",
|
|
54
|
-
render: args => {
|
|
55
|
-
const [value, setValue] = useState("1x1");
|
|
56
|
-
return <div className={styles.canvas}>
|
|
57
|
-
<LayoutPicker {...args} value={value} getPresetDisabled={preset => preset.id === "1x2" || preset.id === "2x2-l"} onChange={layoutId => {
|
|
58
|
-
setValue(layoutId);
|
|
59
|
-
args.onChange(layoutId);
|
|
60
|
-
}} />
|
|
61
|
-
<div className={styles.muted}>Пресеты с двумя колонками в этом сценарии недоступны.</div>
|
|
62
|
-
<PresetSummary value={value} presets={DEFAULT_LAYOUT_PICKER_PRESETS} />
|
|
63
|
-
</div>;
|
|
64
|
-
}
|
|
65
|
-
}`,...N.parameters?.docs?.source}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
|
|
66
|
-
name: "В панели настройки",
|
|
67
|
-
render: () => <ControlledExample />
|
|
68
|
-
}`,...P.parameters?.docs?.source}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
|
|
69
|
-
name: "Заблокированный контрол",
|
|
70
|
-
args: {
|
|
71
|
-
disabled: true,
|
|
72
|
-
value: "1x2"
|
|
73
|
-
}
|
|
74
|
-
}`,...F.parameters?.docs?.source}}},I=[`Controlled`,`Placeholder`,`CustomPresets`,`DisabledPresets`,`InToolbar`,`Disabled`]})))()}export{P as a,L as c,N as i,M as n,y as o,F as r,j as s,A as t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{a as e,n as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-C3wMnNgT.js";import{a as i,i as a}from"./utils-tg3ibbzi.js";import{n as o,t as s}from"./FloatingPopover-Z028tMRL.js";import{d as c,l,s as ee,u as te}from"./Input-C7XSD_dt.js";function u(e){if(!Number.isFinite(e))return 0;let t=e.toString().toLowerCase(),n=t.indexOf(`e-`);if(n>=0)return Number(t.slice(n+2));let r=t.indexOf(`.`);return r>=0?t.length-r-1:0}function d(e,t){if(t<=0)return Math.round(e);let n=10**t;return Math.round(e*n)/n}function f(e,t){return!Number.isFinite(e)||!Number.isFinite(t)?{min:0,max:100}:e<=t?{min:e,max:t}:{min:t,max:e}}function p(e,t,n){return Number.isFinite(e)?Math.min(n,Math.max(t,e)):t}function m(e){return!Number.isFinite(e)||e===void 0||e<=0?1:e}function h(e,t,n){if(!e?.length)return[];let r=new Set;return e.filter(e=>Number.isFinite(e.value)&&e.value>=t&&e.value<=n).slice().sort((e,t)=>e.value-t.value).filter(e=>!r.has(e.value)&&(r.add(e.value),!0))}function g(e,t,n,r){let i=m(r),a=p(e,t,n),o=Math.max(u(i),u(t),u(n));return p(d(t+Math.round((a-t)/i)*i,o),t,n)}function _(e,t){if(!t.length)return;let n=t[0],r=Math.abs(e-n.value);for(let i=1;i<t.length;i+=1){let a=t[i],o=Math.abs(e-a.value);o<r&&(n=a,r=o)}return n}function v(e,t,n,r){if(!t.length)return p(e,n,r);let i=p(e,n,r);return _(i,t)?.value??i}function y(e,t){let{min:n,max:r}=f(t.min,t.max),i=h(t.marks,n,r);return i.length>0?v(e,i,n,r):g(e,n,r,t.step)}function b(e,t,n){return n<=t?0:(p(e,t,n)-t)/(n-t)*100}function ne(e,t,n){if(n<=t)return t;let r=p(e,0,100);return t+(n-t)*r/100}function x(e,t,n,r,i=`value`){return i===`index`&&t.length>1?e/(t.length-1)*100:i===`index`?0:b(t[e]?.value??n,n,r)}function S(e,t,n,r,i=`value`){if(!t.length)return;let a=p(e,0,100),o=t[0],s=Math.abs(a-x(0,t,n,r,i));for(let e=1;e<t.length;e+=1){let c=Math.abs(a-x(e,t,n,r,i));c<s&&(o=t[e],s=c)}return o}function re(e,t,n,r=n.min,i=n.max){let{min:a,max:o}=f(r,i),s=h(n.marks,a,o);if(s.length>0){let n=s.map(e=>e.value),r=0,i=Math.abs(e-n[0]);for(let t=1;t<n.length;t+=1){let a=Math.abs(e-n[t]);a<i&&(i=a,r=t)}return n[p(r+t,0,n.length-1)]}let c=m(n.step);return g(e+t*c,a,o,c)}function C(){return(C=t((()=>{})))()}function w(e,t,n){return h(e,t,n)}function T(e,t,n){let r=t.findIndex(t=>t.value===e.value);return x(Math.max(0,r),t,n.min,n.max,n.marksPosition)}function E(e,t){let{min:n,max:r}=f(t.min,t.max),i=w(t.marks,n,r);if(i.length>0){let a=i.find(t=>t.value===e)??_(e,i);if(a)return T(a,i,{...t,min:n,max:r,marks:i})}return b(e,n,r)}function ie(e,t){let{min:n,max:r}=f(t.min,t.max);return S(e,w(t.marks,n,r),n,r,t.marksPosition)}function D(e,t){return y(e,t)}function ae(e,t){let{min:n,max:r}=f(t.min,t.max);return e===void 0?n:D(e,{...t,min:n,max:r})}function O(e){if(e)return!Object.hasOwn(e,`outputValue`)||e.outputValue===void 0?e.value:e.outputValue}function k(e,t,n){let r=t.filter(t=>O(t)===e);if(r.length)return e===null?n===0?r[0]:r[r.length-1]:r[0]}function A(e,t,n){let r=k(e,t,n);if(r)return r;let i,a=1/0;for(let n of t){let t=O(n);if(typeof t!=`number`||!Number.isFinite(t))continue;let r=Math.abs(e-t);r<a&&(i=n,a=r)}return i}function j(e,t,n,r){if(e===null)return null;let{min:i,max:a}=f(r.min,r.max),o=w(r.marks,i,a),s=Number.isFinite(e)?e:t;if(o.length>0){let e=A(s,o,n),r=O(e);return r===void 0?e?.value??t:r}return g(s,i,a,r.step)}function M(e,t){let{min:n,max:r}=f(t.min,t.max);if(!e)return[null,null];let i=j(e[0],n,0,{...t,min:n,max:r}),a=j(e[1],r,1,{...t,min:n,max:r});return i!==null&&a!==null&&i>a?[a,i]:[i,a]}function N(e,t,n,r){if(e===null)return t;let{min:i,max:a}=f(r.min,r.max),o=w(r.marks,i,a);return o.length>0?(k(e,o,n)??(typeof e==`number`?A(e,o,n):void 0))?.value??t:g(e,i,a,r.step)}function oe(e,t){let{min:n,max:r}=f(t.min,t.max),i=M(e,{...t,min:n,max:r}),a=N(i[0],n,0,{...t,min:n,max:r}),o=N(i[1],r,1,{...t,min:n,max:r});return a<=o?[a,o]:[o,a]}function se(e,t){let{min:n,max:r}=f(t.min,t.max),i=w(t.marks,n,r);if(i.length>0){let t=_(e,i),n=O(t);return n===void 0?t?.value??e:n}return g(e,n,r,t.step)}function ce(e,t){let[n,r]=t;return Math.abs(e-n)<=Math.abs(e-r)?0:1}function le(e,t){let{min:n,max:r}=f(t.min,t.max);return Array.isArray(e)?{startPercent:E(e[0],{...t,min:n,max:r}),endPercent:E(e[1],{...t,min:n,max:r})}:{startPercent:0,endPercent:E(e,{...t,min:n,max:r})}}function P(){return(P=t((()=>{})))()}var ue,F,I,L,R,z,B,V,H,U,W,G,K,q,J,de,fe,Y;function X(){return(X=t((()=>{ue=`fA7zne`,F=`gg-atO`,I=`bTLJZl`,L=`vDAmRy`,R=`PpaxP2`,z=`_9K78Fi`,B=`TMbaqW`,V=`_77qn1L`,H=`cxJQqh`,U=`-X13t0`,W=`iNrV0y`,G=`vzEDBe`,K=`_0OWJh0`,q=`Mk4xi2`,J=`SL0IDQ`,de=`mdezg5`,fe=`a4R18g`,Y={slider:ue,rail:F,fill:I,thumb:L,mark:R,compactMark:z,sliderCompact:B,trackShell:V,track:H,tooltipReference:U,marks:W,markDot:G,markLabel:K,popoverContent:q,rangeInputControl:J,rangeSegmentInput:de,rangeSeparator:fe}})))()}function pe(e){return e===`ArrowLeft`||e===`ArrowDown`?-1:e===`ArrowRight`||e===`ArrowUp`?1:e===`PageDown`?-10:e===`PageUp`?10:null}function me(e,t){return!!e&&e[0]===t[0]&&e[1]===t[1]}function he(e,t){return e===null?t===0?`-∞`:`∞`:String(e)}function ge(e,t){return t.find(t=>t.value===e)?.label??String(e)}function _e(e){return typeof e==`string`||typeof e==`number`?(0,$.jsx)(`span`,{className:`textNoWrap`,children:e}):e}function ve({position:e,children:t}){return(0,$.jsx)(`span`,{"data-slot":`slider-tooltip-reference`,className:Y.tooltipReference,style:{left:`${e}%`},children:t})}function Z(e){let{min:t,max:n,step:r,marks:a,marksPosition:o=`value`,marksDisplay:l=`compact`,className:te,error:u,onClearError:d,label:p,description:m,disabled:h,size:g}=e,{min:_,max:v}=(0,Q.useMemo)(()=>f(t,n),[t,n]),y=(0,Q.useMemo)(()=>w(a,_,v),[a,_,v]),b=(0,Q.useMemo)(()=>({min:_,max:v,step:r,marks:y,marksPosition:o}),[_,v,r,y,o]),x=e.mode===`range`,S=x?void 0:ae(e.value,b),C=x?M(e.value,b):void 0,D=x?oe(e.value,b):void 0,O=x?D:[S],k=le(x?D:S,b),A=(0,Q.useRef)(null),j=(0,Q.useRef)([]),N=(0,Q.useRef)(null),P=(0,Q.useRef)(null),[ue,F]=(0,Q.useState)(null),{controlId:I,labelId:L,descriptionId:R,errorId:z,describedBy:B}=c({hasLabel:p!=null,hasDescription:!!m,hasError:!!u}),V=t=>{h||e.mode!==`single`||(e.value===void 0||e.value!==t)&&(e.onChange(t),d?.())},H=t=>{h||e.mode!==`range`||me(e.value,t)||(e.onChange(t),d?.())},U=(t,n)=>{if(!h){if(e.mode===`range`){let[e,r]=D,[i,a]=C,o=M(n===0?[se(Math.min(t,r),b),a]:[i,se(Math.max(t,e),b)],b);H(o);return}V(ae(t,b))}},W=e=>{let t=A.current?.getBoundingClientRect();if(!t)return _;let n=(e-t.left)/t.width*100;return(y.length>0?ie(n,b):void 0)?.value??ne(n,_,v)},G=(0,Q.useRef)(U),K=(0,Q.useRef)(W);(0,Q.useEffect)(()=>{G.current=U,K.current=W}),(0,Q.useEffect)(()=>{let e=e=>{P.current!==null&&e&&e.pointerId!==P.current||(P.current=null,N.current=null,F(null))},t=e=>{N.current!==null&&(P.current===null||e.pointerId===P.current)&&G.current(K.current(e.clientX),N.current)};return window.addEventListener(`pointermove`,t),window.addEventListener(`pointerup`,e),window.addEventListener(`pointercancel`,e),()=>{window.removeEventListener(`pointermove`,t),window.removeEventListener(`pointerup`,e),window.removeEventListener(`pointercancel`,e)}},[]);let q=(e,t)=>{P.current=e,N.current=t,F(t),j.current[t]?.focus()},J=e=>{if(h)return;e.preventDefault();let t=W(e.clientX),n=x?ce(t,D):0;U(t,n),q(e.pointerId,n)},de=e=>t=>{h||(t.preventDefault(),t.stopPropagation(),q(t.pointerId,e))},fe=e=>t=>{if(h)return;let n=x&&e===1?D[0]:_,r=x&&e===0?D[1]:v,i=pe(t.key);if(t.key===`Home`){t.preventDefault(),U(n,e);return}if(t.key===`End`){t.preventDefault(),U(r,e);return}if(i===null)return;t.preventDefault();let a=O[e],o=re(a,i,b,n,r);U(o,e)},X=e=>{if(h)return;let t=x?ce(e,D):0;U(e,t),j.current[t]?.focus()},Z=(e,t)=>{if(x){let n=C[t];return y.find(t=>t.value===e)?.label??he(n,t)}return ge(e,y)};return(0,$.jsx)(ee,{label:p,description:m,disabled:h,className:te,size:g,error:u,controlId:I,labelId:L,descriptionId:R,errorId:z,children:(0,$.jsxs)(`div`,{id:I,className:i(Y.slider,l===`compact`&&Y.sliderCompact),"data-disabled":h||void 0,children:[(0,$.jsx)(`div`,{className:Y.trackShell,children:(0,$.jsxs)(`div`,{ref:A,"data-slot":`track`,className:Y.track,role:`presentation`,onPointerDown:J,children:[(0,$.jsx)(`div`,{className:Y.rail}),(0,$.jsx)(`div`,{"data-slot":`fill`,className:Y.fill,style:{left:`${k.startPercent}%`,width:`${k.endPercent-k.startPercent}%`}}),l===`compact`&&y.map(e=>{let t=T(e,y,b),n=x?e.value>=D[0]&&e.value<=D[1]:e.value<=S;return(0,$.jsx)(ve,{position:t,children:(0,$.jsx)(s,{tooltip:!0,placement:`top`,content:_e(e.label),children:(0,$.jsx)(`button`,{type:`button`,"data-slot":`mark`,"data-active":n?``:void 0,className:Y.compactMark,"aria-label":e.ariaLabel,disabled:h,onClick:()=>X(e.value),children:(0,$.jsx)(`span`,{className:Y.markDot,"aria-hidden":`true`})})})},e.value)}),O.map((e,t)=>{let n=Z(e,t);return(0,$.jsx)(ve,{position:E(e,b),children:(0,$.jsx)(s,{tooltip:!0,placement:`top`,content:_e(n),openDelay:0,closeDelay:100,positionUpdateKey:e,children:(0,$.jsx)(`button`,{ref:e=>{j.current[t]=e},type:`button`,role:`slider`,"data-slot":`thumb`,"data-thumb-index":t,"data-dragging":ue===t?``:void 0,className:Y.thumb,disabled:h,"aria-disabled":h||void 0,"aria-orientation":`horizontal`,"aria-valuemin":x&&t===1?D[0]:_,"aria-valuemax":x&&t===0?D[1]:v,"aria-valuenow":e,"aria-valuetext":typeof n==`string`||typeof n==`number`?String(n):void 0,"aria-labelledby":L,"aria-describedby":B,"aria-label":L?void 0:x?t===0?`Минимальное значение`:`Максимальное значение`:`Значение`,onPointerDown:de(t),onKeyDown:fe(t)})})},t)})]})}),l===`full`&&y.length>0&&(0,$.jsx)(`div`,{className:Y.marks,children:y.map(e=>{let t=x?e.value>=D[0]&&e.value<=D[1]:e.value<=S;return(0,$.jsxs)(`button`,{type:`button`,"data-slot":`mark`,"data-active":t?``:void 0,className:Y.mark,style:{left:`${T(e,y,b)}%`},"aria-label":e.ariaLabel,disabled:h,onClick:()=>X(e.value),children:[(0,$.jsx)(`span`,{className:Y.markDot,"aria-hidden":`true`}),(0,$.jsx)(`span`,{className:Y.markLabel,children:e.label})]},e.value)})})]})})}function ye(e){return(0,$.jsx)(Z,{...e,mode:`single`,marksDisplay:`compact`})}function be(e){return(0,$.jsx)(Z,{...e,mode:`range`,marksDisplay:`compact`})}var Q,$;function xe(){return(xe=t((()=>{Q=e(n(),1),a(),l(),te(),o(),P(),X(),$=r(),Z.__docgenInfo={description:``,methods:[],displayName:`SliderBase`},ye.__docgenInfo={description:``,methods:[],displayName:`Slider`,props:{min:{required:!0,tsType:{name:`number`},description:`Минимальная координата шкалы. Marks вне этой границы отбрасываются.`},max:{required:!0,tsType:{name:`number`},description:`Максимальная координата шкалы. Marks вне этой границы отбрасываются.`},step:{required:!1,tsType:{name:`number`},description:"Шаг изменения, когда `marks` не заданы или после фильтрации не осталось валидных marks."},marks:{required:!1,tsType:{name:`unknown`},description:`Дискретные точки выбора. Если заданы, бегунок всегда ходит только по marks.`},marksPosition:{required:!1,tsType:{name:`NumberScaleMarksPosition`},description:"Способ визуального размещения marks и бегунка: по числовой координате `value` или равномерно по индексу."},className:{required:!1,tsType:{name:`string`},description:`Внешний CSS-класс контейнера поля.`},error:{required:!1,tsType:{name:`string`},description:"Текст внешней ошибки, отображается через общую `InputUI`-обёртку."},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Вызывается после успешного изменения значения, чтобы потребитель мог сбросить внешнюю ошибку.`}},composes:[`Omit`]},be.__docgenInfo={description:``,methods:[],displayName:`SliderRange`,props:{min:{required:!0,tsType:{name:`number`},description:`Минимальная координата шкалы. Marks вне этой границы отбрасываются.`},max:{required:!0,tsType:{name:`number`},description:`Максимальная координата шкалы. Marks вне этой границы отбрасываются.`},step:{required:!1,tsType:{name:`number`},description:"Шаг изменения, когда `marks` не заданы или после фильтрации не осталось валидных marks."},marks:{required:!1,tsType:{name:`unknown`},description:`Дискретные точки выбора. Если заданы, бегунок всегда ходит только по marks.`},marksPosition:{required:!1,tsType:{name:`NumberScaleMarksPosition`},description:"Способ визуального размещения marks и бегунка: по числовой координате `value` или равномерно по индексу."},className:{required:!1,tsType:{name:`string`},description:`Внешний CSS-класс контейнера поля.`},error:{required:!1,tsType:{name:`string`},description:"Текст внешней ошибки, отображается через общую `InputUI`-обёртку."},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Вызывается после успешного изменения значения, чтобы потребитель мог сбросить внешнюю ошибку.`}},composes:[`Omit`]}})))()}export{Y as a,P as c,w as d,C as f,xe as i,M as l,Z as n,X as o,f as p,be as r,O as s,ye as t,ae as u};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{t}from"./react-BZJXY1be.js";import{n}from"./iframe-C3wMnNgT.js";import{a as r,i}from"./utils-tg3ibbzi.js";import{g as a,p as o}from"./odata-service-CWkHASdw-DAt28ZWr.js";import{n as s,t as c}from"./Popover-CAobkmJT.js";import{n as l,t as u}from"./ui.module-Ci4WdQwm.js";import{d,l as f,o as p,r as m,s as h,u as g}from"./Input-C7XSD_dt.js";import{n as _,t as v}from"./PickerTriggerActions-DCrbv85j.js";import{a as y,c as b,d as x,i as S,l as C,n as w,o as T,p as E,s as D,u as O}from"./Slider-B1T2FRiM.js";function k({open:e,disabled:t,setOpen:n}){return(0,B.jsx)(c.Trigger,{passive:!0,children:(0,B.jsx)(`div`,{children:(0,B.jsx)(v,{open:e,disabled:t,openAriaLabel:`Открыть слайдер`,closeAriaLabel:`Закрыть слайдер`,onToggleMouseDown:e=>e.preventDefault(),onToggleClick:()=>n(e=>!e)})})})}function A(e,t){let n=C(e,t);return{start:n[0]===null?`-∞`:String(n[0]),end:n[1]===null?`∞`:String(n[1])}}function j(e,t){let n=e.trim();return n===``||n===t?null:o(n)}function M(e,t,n){let r=t.filter(t=>D(t)===e);if(r.length)return e===null&&n===`end`?r[r.length-1]:r[0]}function N(e,t){return e?.readonlyLabel?.trim()?e.readonlyLabel.trim():typeof e?.label==`string`||typeof e?.label==`number`?String(e.label):t===null?``:String(t)}function P(e,t,n){return N(M(e,t,n),e)}function F(e,t,n){let[r,i]=e,a=r===null,o=i===null;return a&&o?n??``:a?`Меньше ${P(i,t,`end`)}`:o?`Больше ${P(r,t,`start`)}`:r===i?`Равно ${P(r,t,`start`)}`:`От ${P(r,t,`start`)} до ${P(i,t,`end`)}`}function I({value:e,onChange:t,min:n,max:r,step:i,marks:a,marksPosition:s=`value`,className:l,error:u,onClearError:d,label:f,description:m,placeholder:h,disabled:g,size:_}){let{min:v,max:b}=(0,z.useMemo)(()=>E(n,r),[n,r]),S=(0,z.useMemo)(()=>x(a,v,b),[a,v,b]),C=(0,z.useMemo)(()=>({min:v,max:b,step:i,marks:S,marksPosition:s}),[v,b,i,S,s]),T=O(e,C),[D,A]=(0,z.useState)(!1),[j,M]=(0,z.useState)(()=>({sourceValue:T,value:String(T)})),N=j.sourceValue===T?j.value:String(T),P=e=>{M({sourceValue:T,value:e})},F=(0,z.useCallback)(()=>{if(g){M({sourceValue:T,value:String(T)});return}let n=o(N);if(n===void 0){M({sourceValue:T,value:String(T)});return}let r=O(n,C);e!==r&&(t(r),d?.()),M({sourceValue:r,value:String(r)})},[g,N,T,t,d,C,e]);return(0,B.jsxs)(c,{open:D,onOpenChange:A,children:[(0,B.jsx)(p,{label:f,description:m,placeholder:h,disabled:g,size:_,className:l,error:u,value:N,onChange:P,onBlur:F,onKeyDown:e=>{e.key===`Enter`&&(e.preventDefault(),F())},endAdornmentWidth:`var(--control-height)`,endAdornment:k({open:D,disabled:g,setOpen:A})}),(0,B.jsx)(c.Content,{background:`primary`,children:(0,B.jsx)(`div`,{className:y.popoverContent,children:(0,B.jsx)(w,{mode:`single`,min:v,max:b,step:i,marks:S,marksPosition:s,marksDisplay:`full`,value:e,onChange:e=>{t(e),M({sourceValue:e,value:String(e)}),d?.()},disabled:g})})})]})}function L({value:e,onChange:t,min:n,max:i,step:a,marks:o,marksPosition:s=`value`,className:u,error:f,onClearError:p,label:g,description:_,readonlyValueText:v,placeholder:b,disabled:S,size:T}){let{min:D,max:O}=(0,z.useMemo)(()=>E(n,i),[n,i]),M=(0,z.useMemo)(()=>x(o,D,O),[o,D,O]),N=(0,z.useMemo)(()=>({min:D,max:O,step:a,marks:M,marksPosition:s}),[D,O,a,M,s]),P=(0,z.useMemo)(()=>C(e,N),[N,e]),I=(0,z.useMemo)(()=>A(P,N),[P,N]),[L,V]=(0,z.useState)(!1),[H,U]=(0,z.useState)(()=>({sourceValue:P,start:I.start,end:I.end})),[W,G]=(0,z.useState)(P),K=L||R(H.sourceValue,P),q=K?H.start:I.start,J=K?H.end:I.end,ee=e=>{U({sourceValue:P,start:e,end:J})},te=e=>{U({sourceValue:P,start:q,end:e})},{controlId:Y,labelId:X,descriptionId:ne,errorId:re,describedBy:ie}=d({hasLabel:g!=null,hasDescription:!!_,hasError:!!f}),Z=(0,z.useCallback)(()=>{U({sourceValue:P,start:I.start,end:I.end})},[I.end,I.start,P]),Q=(0,z.useCallback)(()=>{if(S){Z();return}let e=j(q,`-∞`),n=j(J,`∞`);if(e===void 0||n===void 0){Z();return}let r=C([e,n],N);R(P,r)||(t(r),p?.());let i=A(r,N);U({sourceValue:r,start:i.start,end:i.end}),G(r)},[S,J,q,P,t,p,Z,N]),ae=(0,z.useCallback)(e=>{let n=C(e,N);R(P,n)||(t(n),p?.());let r=A(n,N);U({sourceValue:n,start:r.start,end:r.end}),G(n)},[P,t,p,N]),$=e=>{!L&&e&&(G(P),U({sourceValue:P,start:I.start,end:I.end})),L&&!e&&!S&&ae(W),V(e)},oe=e=>{e.key===`Enter`&&(e.preventDefault(),Q())},se=e=>{let t=C(e,N);G(t);let n=A(t,N);U({sourceValue:P,start:n.start,end:n.end})},ce=v?F(L?W:P,M,b):void 0;return(0,B.jsxs)(c,{open:L,onOpenChange:$,children:[(0,B.jsx)(h,{label:g,description:_,disabled:S,className:u,size:T,error:f,controlId:Y,labelId:X,descriptionId:ne,errorId:re,children:(0,B.jsx)(m,{endAdornmentWidth:`var(--control-height)`,endAdornment:k({open:L,disabled:S,setOpen:e=>{$(typeof e==`function`?e(L):e)}}),children:({controlClassName:e})=>(0,B.jsx)(`div`,{id:Y,className:r(l.uiInputControlFake,y.rangeInputControl,e),"data-invalid":f?``:void 0,"data-disabled":S||void 0,role:`group`,"aria-invalid":!!f||void 0,"aria-label":typeof g==`string`?g:`Диапазон`,"aria-labelledby":typeof g==`string`?void 0:X,"aria-describedby":ie,children:v?(0,B.jsx)(`span`,{className:r(`flexEllipsis`,!ce&&l.uiPlaceholder),children:ce||b}):(0,B.jsxs)(B.Fragment,{children:[(0,B.jsx)(`input`,{type:`text`,inputMode:`decimal`,className:y.rangeSegmentInput,value:q,disabled:S,"aria-label":`Начало диапазона`,onChange:e=>ee(e.target.value),onBlur:Q,onKeyDown:oe}),(0,B.jsx)(`span`,{className:y.rangeSeparator,"data-disabled":S||void 0,children:`-`}),(0,B.jsx)(`input`,{type:`text`,inputMode:`decimal`,className:y.rangeSegmentInput,value:J,disabled:S,"aria-label":`Конец диапазона`,onChange:e=>te(e.target.value),onBlur:Q,onKeyDown:oe})]})})})}),(0,B.jsx)(c.Content,{background:`primary`,children:(0,B.jsx)(`div`,{className:y.popoverContent,children:(0,B.jsx)(w,{mode:`range`,min:D,max:O,step:a,marks:M,marksPosition:s,marksDisplay:`full`,value:W,onChange:se,disabled:S})})})]})}function R(e,t){return e[0]===t[0]&&e[1]===t[1]}var z,B;function V(){return(V=e((()=>{z=t(),a(),i(),f(),g(),_(),s(),u(),b(),S(),T(),B=n(),I.__docgenInfo={description:``,methods:[],displayName:`SliderInput`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},min:{required:!0,tsType:{name:`number`},description:`Минимальная координата шкалы. Marks вне этой границы не участвуют в выборе.`},max:{required:!0,tsType:{name:`number`},description:`Максимальная координата шкалы. Marks вне этой границы не участвуют в выборе.`},step:{required:!1,tsType:{name:`number`},description:`Шаг ручного ввода и слайдера, если не заданы marks.`},marksPosition:{required:!1,tsType:{name:`NumberScaleMarksPosition`},description:`Способ визуального размещения marks и бегунка в popover.`,defaultValue:{value:`"value"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:`Внешний CSS-класс общей обёртки поля.`},error:{required:!1,tsType:{name:`string`},description:`Текст внешней ошибки.`},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Сбрасывает внешнюю ошибку после успешного commit или выбора в popover.`},marks:{required:!1,tsType:{name:`unknown`},description:"Marks single-слайдера. Single-компонент отдаёт наружу `mark.value`."}}},L.__docgenInfo={description:``,methods:[],displayName:`SliderRangeInput`,props:{label:{required:!1,tsType:{name:`ReactNode`},description:``},description:{required:!1,tsType:{name:`string`},description:``},placeholder:{required:!1,tsType:{name:`string`},description:``},disabled:{required:!1,tsType:{name:`boolean`},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``},value:{required:!0,tsType:{name:`V`},description:"Если начальное состояние может быть `null | undefined`\nзначит `onChange` тоже должен ументь сбрасывать.\nПоэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`"},onChange:{required:!0,tsType:{name:`signature`,type:`function`,raw:`(value: T) => void`,signature:{arguments:[{type:{name:`C`},name:`value`}],return:{name:`void`}}},description:``},min:{required:!0,tsType:{name:`number`},description:`Минимальная координата шкалы. Marks вне этой границы не участвуют в выборе.`},max:{required:!0,tsType:{name:`number`},description:`Максимальная координата шкалы. Marks вне этой границы не участвуют в выборе.`},step:{required:!1,tsType:{name:`number`},description:`Шаг ручного ввода и слайдера, если не заданы marks.`},marksPosition:{required:!1,tsType:{name:`NumberScaleMarksPosition`},description:`Способ визуального размещения marks и бегунка в popover.`,defaultValue:{value:`"value"`,computed:!1}},className:{required:!1,tsType:{name:`string`},description:`Внешний CSS-класс общей обёртки поля.`},error:{required:!1,tsType:{name:`string`},description:`Текст внешней ошибки.`},onClearError:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:`Сбрасывает внешнюю ошибку после успешного commit или выбора в popover.`},marks:{required:!1,tsType:{name:`unknown`},description:"Marks range-слайдера. `value` задаёт координату на шкале, `outputValue` задаёт публичное значение для потребителя."},readonlyValueText:{required:!1,tsType:{name:`boolean`},description:`Показывает вместо ручных сегментов готовый текст по выбранным marks.
|
|
2
|
-
Popover остаётся единственным способом изменить значение через слайдер, а потребитель получает изменение при закрытии popover.`}}}})))()}export{L as n,V as r,I as t};
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-C3wMnNgT.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-CkyPJxFn.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Splitter.stories-DOVSidH9.js";function y(e){let t={code:`code`,h2:`h2`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:p,parameters:{docs:{toc:!0}}}),`
|
|
2
|
-
`,(0,x.jsx)(u,{children:`Splitter`}),`
|
|
3
|
-
`,(0,x.jsx)(o,{children:(0,x.jsx)(t.p,{children:`Компонент для интерактивного разделения рабочей области на две панели с поддержкой вложенности, клавиатуры и ограничений по размеру`})}),`
|
|
4
|
-
`,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`Splitter`}),` подходит для интерфейсов, где пользователь должен самостоятельно перераспределять пространство между соседними областями: навигацией и контентом, таблицей и деталями, превью и журналом событий.`]}),`
|
|
5
|
-
`,(0,x.jsxs)(t.p,{children:[`Компонент ожидает ровно два прямых дочерних элемента. Если нужно больше областей, их лучше собирать через вложенные `,(0,x.jsx)(t.code,{children:`Splitter`}),`, чтобы сохранить простую модель поведения и предсказуемый resize.`]}),`
|
|
6
|
-
`,(0,x.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
|
|
7
|
-
`,(0,x.jsx)(f,{}),`
|
|
8
|
-
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui";
|
|
9
|
-
|
|
10
|
-
export function Example() {
|
|
11
|
-
return (
|
|
12
|
-
<div style={{ height: 420 }}>
|
|
13
|
-
<Splitter initial={0.45}>
|
|
14
|
-
<div>Левая панель</div>
|
|
15
|
-
<div>Правая панель</div>
|
|
16
|
-
</Splitter>
|
|
17
|
-
</div>
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
`})}),`
|
|
21
|
-
`,(0,x.jsx)(i,{of:v}),`
|
|
22
|
-
`,(0,x.jsx)(t.h2,{id:`что-важно-про-поведение`,children:`Что важно про поведение`}),`
|
|
23
|
-
`,(0,x.jsxs)(t.ul,{children:[`
|
|
24
|
-
`,(0,x.jsx)(t.li,{children:`Во время перетаскивания компонент обновляет размеры панелей напрямую через DOM, а состояние React фиксирует только после завершения drag. Это уменьшает число лишних перерендеров и делает resize заметно плавнее.`}),`
|
|
25
|
-
`,(0,x.jsxs)(t.li,{children:[(0,x.jsx)(t.code,{children:`onChange`}),` получает итоговую долю первой панели после завершения drag или одного клавиатурного шага. Его можно использовать для сохранения настройки без записи на каждом `,(0,x.jsx)(t.code,{children:`pointermove`}),`.`]}),`
|
|
26
|
-
`,(0,x.jsxs)(t.li,{children:[`Значения `,(0,x.jsx)(t.code,{children:`initial`}),`, `,(0,x.jsx)(t.code,{children:`min`}),` и `,(0,x.jsx)(t.code,{children:`max`}),` автоматически нормализуются в диапазон `,(0,x.jsx)(t.code,{children:`0..1`}),`.`]}),`
|
|
27
|
-
`,(0,x.jsxs)(t.li,{children:[`Если `,(0,x.jsx)(t.code,{children:`min`}),` и `,(0,x.jsx)(t.code,{children:`max`}),` заданы в обратном порядке, компонент сам исправляет диапазон.`]}),`
|
|
28
|
-
`,(0,x.jsxs)(t.li,{children:[`Разделитель управляется клавиатурой: стрелки двигают границу пошагово, `,(0,x.jsx)(t.code,{children:`Home`}),` переводит в минимум, `,(0,x.jsx)(t.code,{children:`End`}),` в максимум.`]}),`
|
|
29
|
-
`]}),`
|
|
30
|
-
`,(0,x.jsx)(t.h2,{id:`разделение-на-2-части`,children:`Разделение на 2 части`}),`
|
|
31
|
-
`,(0,x.jsx)(t.p,{children:`Это базовый и самый частый сценарий: левая панель под навигацию, правая под основное содержимое.`}),`
|
|
32
|
-
`,(0,x.jsx)(d,{of:v}),`
|
|
33
|
-
`,(0,x.jsx)(t.h2,{id:`горизонтальное-разделение`,children:`Горизонтальное разделение`}),`
|
|
34
|
-
`,(0,x.jsx)(t.p,{children:`Горизонтальный режим полезен для layout вида "контент сверху, журнал или детали снизу".`}),`
|
|
35
|
-
`,(0,x.jsx)(d,{of:_}),`
|
|
36
|
-
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui";
|
|
37
|
-
|
|
38
|
-
export function HorizontalLayout() {
|
|
39
|
-
return (
|
|
40
|
-
<div style={{ height: 420 }}>
|
|
41
|
-
<Splitter direction="horizontal" initial={0.55}>
|
|
42
|
-
<div>Верхняя панель</div>
|
|
43
|
-
<div>Нижняя панель</div>
|
|
44
|
-
</Splitter>
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
}
|
|
48
|
-
`})}),`
|
|
49
|
-
`,(0,x.jsx)(t.h2,{id:`разделение-на-4-части`,children:`Разделение на 4 части`}),`
|
|
50
|
-
`,(0,x.jsxs)(t.p,{children:[`Чтобы собрать четыре независимые области, используйте `,(0,x.jsx)(t.code,{children:`Splitter`}),` внутри `,(0,x.jsx)(t.code,{children:`Splitter`}),`. Такой подход даёт предсказуемую вложенную структуру и хорошо масштабируется для сложных рабочих экранов.`]}),`
|
|
51
|
-
`,(0,x.jsx)(d,{of:m}),`
|
|
52
|
-
`,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Splitter } from "@ryuzaki13/react-foundation-ui";
|
|
53
|
-
|
|
54
|
-
export function FourPaneLayout() {
|
|
55
|
-
return (
|
|
56
|
-
<div style={{ height: 420 }}>
|
|
57
|
-
<Splitter initial={0.48} min={0.25} max={0.75}>
|
|
58
|
-
<Splitter direction="horizontal" initial={0.58}>
|
|
59
|
-
<div>Левая верхняя панель</div>
|
|
60
|
-
<div>Левая нижняя панель</div>
|
|
61
|
-
</Splitter>
|
|
62
|
-
<Splitter direction="horizontal" initial={0.36}>
|
|
63
|
-
<div>Правая верхняя панель</div>
|
|
64
|
-
<div>Правая нижняя панель</div>
|
|
65
|
-
</Splitter>
|
|
66
|
-
</Splitter>
|
|
67
|
-
</div>
|
|
68
|
-
);
|
|
69
|
-
}
|
|
70
|
-
`})}),`
|
|
71
|
-
`,(0,x.jsx)(t.h2,{id:`ограничения-и-клавиатура`,children:`Ограничения и клавиатура`}),`
|
|
72
|
-
`,(0,x.jsx)(t.p,{children:`В этом сценарии удобно проверять, что пользователь не может схлопнуть область сильнее допустимого минимума, а разделитель стабильно работает не только мышью, но и с клавиатуры.`}),`
|
|
73
|
-
`,(0,x.jsx)(d,{of:h}),`
|
|
74
|
-
`,(0,x.jsx)(t.h2,{id:`практические-рекомендации`,children:`Практические рекомендации`}),`
|
|
75
|
-
`,(0,x.jsxs)(t.ul,{children:[`
|
|
76
|
-
`,(0,x.jsxs)(t.li,{children:[`Родительский контейнер должен иметь явную высоту, иначе `,(0,x.jsx)(t.code,{children:`Splitter`}),` не сможет корректно распределить пространство по вертикали.`]}),`
|
|
77
|
-
`,(0,x.jsxs)(t.li,{children:[`Держите в `,(0,x.jsx)(t.code,{children:`Splitter`}),` только два прямых потомка. Для трёх и более областей используйте вложенность.`]}),`
|
|
78
|
-
`,(0,x.jsx)(t.li,{children:`Если в панелях живут тяжёлые таблицы, графики или сложные формы, лучше избегать лишней бизнес-логики, завязанной на каждое движение разделителя.`}),`
|
|
79
|
-
`,(0,x.jsx)(t.li,{children:`Для touch-сценариев разделитель уже блокирует нативный скролл жеста на самом handle, поэтому drag остаётся предсказуемым.`}),`
|
|
80
|
-
`]}),`
|
|
81
|
-
`,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
|
|
82
|
-
`,(0,x.jsx)(l,{of:p}),`
|
|
83
|
-
`,(0,x.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
|
|
84
|
-
`,(0,x.jsx)(a,{includePrimary:!1})]})}function b(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,x.jsx)(t,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;function S(){return(S=e((()=>{x=t(),r(),c(),g()})))()}S();export{b as default};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
.wAovST{width:100%;height:100%;display:flex;overflow:hidden}.wAovST.QVVMwe{flex-direction:row}.wAovST.QVVMwe .H43AJ8{cursor:col-resize;border-left:var(--border);border-right:var(--border);margin-inline:var(--space-md)}.wAovST.pgo8sW{flex-direction:column}.wAovST.pgo8sW .H43AJ8{cursor:row-resize;margin-block:var(--space-md)}._8fCvqA{flex-grow:0;flex-shrink:0}.t6RFcI{flex-grow:1}._8fCvqA,.t6RFcI{min-width:0;min-height:0;overflow:auto}.H43AJ8{flex-basis:var(--space-sm);border-radius:var(--radius-sm);border:var(--border);background-color:var(--border-0);-webkit-user-select:none;user-select:none;touch-action:none;flex-grow:0;flex-shrink:0;position:relative}.H43AJ8:hover{border-color:var(--border-1);background-color:var(--border-1)}.H43AJ8:active{border-color:var(--border-2);background-color:var(--border-2)}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import{n as e,r as t}from"./rolldown-runtime-DkW27tQK.js";import{t as n}from"./react-BZJXY1be.js";import{n as r}from"./iframe-C3wMnNgT.js";import{a as i,i as a}from"./utils-tg3ibbzi.js";var o,s,c,l,u,d,f;function p(){return(p=e((()=>{o=`wAovST`,s=`QVVMwe`,c=`H43AJ8`,l=`pgo8sW`,u=`_8fCvqA`,d=`t6RFcI`,f={splitter:o,vertical:s,separator:c,horizontal:l,topLeft:u,bottomRight:d}})))()}function m(e,t,n){return Math.min(n,Math.max(t,e))}function h(e,t){return Number.isFinite(e)?m(e,0,1):t}function g(e,t){let n=h(e,E),r=h(t,D);return n<=r?[n,r]:[r,n]}function _(e,t){return e===`vertical`?t.clientX:t.clientY}function v(e,t){return e===`vertical`?t.width:t.height}function y(e,t){if(e===`vertical`){if(t===`ArrowLeft`)return-.02;if(t===`ArrowRight`)return k}if(e===`horizontal`){if(t===`ArrowUp`)return-.02;if(t===`ArrowDown`)return k}return null}function b(e,t){return t===`start`?0:t===`end`?1:e}function x({direction:e,initial:t,min:n,max:r,onChange:i,collapsedPane:a}){let[o,s]=g(n,r),c=(0,w.useRef)(null),l=(0,w.useRef)(null),u=(0,w.useRef)(null),d=(0,w.useRef)(null),f=(0,w.useRef)(null),p=(0,w.useRef)(null),x=(0,w.useRef)(0),S=(0,w.useRef)(m(h(t,O),o,s)),C=(0,w.useRef)(t),[T,E]=(0,w.useState)(()=>m(h(t,O),o,s)),D=(0,w.useRef)(T),k=(0,w.useCallback)(e=>{D.current=e,l.current?.style.setProperty(`flex-basis`,`${b(e,a)*100}%`),u.current?.setAttribute(`aria-valuenow`,`${Math.round(e*100)}`)},[a]),A=()=>{if(p.current!==null&&(cancelAnimationFrame(p.current),p.current=null),f.current===null)return D.current;let e=f.current;return f.current=null,k(e),e},j=e=>{f.current=e,p.current===null&&(p.current=requestAnimationFrame(()=>{p.current=null,f.current!==null&&k(f.current)}))},M=()=>{d.current?.(),d.current=null},N=(e,t=D.current)=>{A();let n=m(e,o,s);E(n),n!==t&&i?.(n)};return(0,w.useLayoutEffect)(()=>{k(T)},[k,T]),(0,w.useEffect)(()=>{E(e=>{let n=C.current!==t;return C.current=t,m(n?h(t,O):e,o,s)})},[t,o,s]),(0,w.useEffect)(()=>()=>{M(),p.current!==null&&cancelAnimationFrame(p.current)},[]),{containerRef:c,topLeftRef:l,separatorRef:u,ratio:T,minRatio:o,maxRatio:s,handleSeparatorPointerDown:t=>{if(t.button!==0)return;t.preventDefault();let n=c.current;if(!n)return;M();try{t.currentTarget.setPointerCapture?.(t.pointerId)}catch{}x.current=_(e,t),S.current=D.current;let r=t=>{let r=v(e,n.getBoundingClientRect());if(r<=0)return;let i=_(e,t)-x.current,a=m(S.current+i/r,o,s);j(a)},i=()=>{M(),N(A(),S.current)};d.current=()=>{document.removeEventListener(`pointermove`,r),document.removeEventListener(`pointerup`,i),document.removeEventListener(`pointercancel`,i)},document.addEventListener(`pointermove`,r),document.addEventListener(`pointerup`,i),document.addEventListener(`pointercancel`,i)},handleSeparatorKeyDown:t=>{let n=y(e,t.key);if(n!==null){t.preventDefault(),N(D.current+n);return}if(t.key===`Home`){t.preventDefault(),N(o);return}t.key===`End`&&(t.preventDefault(),N(s))}}}function S({className:e,direction:t,left:n,right:r,collapsedPane:a,logic:o}){let{containerRef:s,topLeftRef:c,separatorRef:l,ratio:u,minRatio:d,maxRatio:p,handleSeparatorPointerDown:m,handleSeparatorKeyDown:h}=o,g=b(u,a),_=a===`start`,v=a===`end`,y=a===null;return(0,T.jsxs)(`div`,{ref:s,className:i(f.splitter,f[t],e),children:[(0,T.jsx)(`div`,{ref:c,className:f.topLeft,style:{flexBasis:`${g*100}%`},hidden:_,children:n}),(0,T.jsx)(`div`,{ref:l,hidden:!y,role:`separator`,"aria-orientation":t===`vertical`?`vertical`:`horizontal`,"aria-valuemin":Math.round(d*100),"aria-valuemax":Math.round(p*100),"aria-valuenow":Math.round(u*100),tabIndex:y?0:-1,onPointerDown:m,onKeyDown:h,className:f.separator}),(0,T.jsx)(`div`,{className:f.bottomRight,hidden:v,children:r})]})}function C({direction:e=`vertical`,initial:t=O,min:n=E,max:r=D,onChange:i,className:a,collapsedPane:o=null,children:s}){let[c,l]=w.Children.toArray(s),u=x({direction:e,initial:t,min:n,max:r,onChange:i,collapsedPane:o});return l?(0,T.jsx)(S,{className:a,direction:e,left:c,right:l,collapsedPane:o,logic:u}):c}var w,T,E,D,O,k;function A(){return(A=e((()=>{w=n(),a(),p(),T=r(),E=.1,D=.9,O=.7,k=.02,C.__docgenInfo={description:``,methods:[],displayName:`Splitter`,props:{direction:{defaultValue:{value:`"vertical"`,computed:!1},required:!1},initial:{defaultValue:{value:`0.7`,computed:!1},required:!1},min:{defaultValue:{value:`0.1`,computed:!1},required:!1},max:{defaultValue:{value:`0.9`,computed:!1},required:!1},collapsedPane:{defaultValue:{value:`null`,computed:!1},required:!1}}}})))()}var j=t({Basic:()=>B,Constrained:()=>U,Horizontal:()=>V,NestedFourPanels:()=>H,__namedExportsOrder:()=>W,default:()=>z});function M({children:e}){return(0,L.jsx)(`div`,{style:{height:490},children:e})}function N({title:e,description:t,items:n=[]}){return(0,L.jsxs)(`div`,{style:{height:`100%`,padding:`var(--space-md)`,borderRadius:`var(--radius-md)`,border:`var(--border)`,display:`grid`,alignContent:`start`,gap:`var(--space-md)`},className:`scrollable`,children:[(0,L.jsxs)(`div`,{children:[(0,L.jsx)(`h2`,{children:e}),(0,L.jsx)(`p`,{children:t})]}),n.length>0&&(0,L.jsx)(`div`,{style:{display:`grid`,gap:`var(--space-sm)`},children:n.map(e=>(0,L.jsx)(`div`,{style:{padding:`var(--space-sm) var(--space-md)`,borderRadius:`var(--radius-sm)`,background:`var(--surface-1)`},children:e},e))})]})}function P(e){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{...e,children:[(0,L.jsx)(N,{title:`Навигация`,description:`Левая панель подходит для фильтров, дерева разделов, списка сущностей или структуры документа.`,items:[`Раздел 1`,`Раздел 2`,`Раздел 3`,`Раздел 4`]}),(0,L.jsx)(N,{title:`Рабочая область`,description:`Правая панель обычно содержит детальный контент: таблицу, карточку объекта, форму или вкладки.`,items:[`Текущий документ`,`История изменений`,`Комментарии`,`Связанные объекты`,`Параметры отображения`]})]})})}function F(e){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{...e,children:[(0,L.jsxs)(C,{direction:`horizontal`,initial:.58,min:.25,max:.75,children:[(0,L.jsx)(N,{title:`Список`,description:`Верхняя левая панель может держать навигацию или результат поиска.`,items:[`Поиск`,`Фильтр по статусу`,`Группы`,`Быстрые действия`]}),(0,L.jsx)(N,{title:`Подробности`,description:`Нижняя левая панель подходит для связанного контента по выбранному элементу.`,items:[`Свойства`,`Ответственный`,`Теги`,`Контекст`]})]}),(0,L.jsxs)(C,{direction:`horizontal`,initial:.36,min:.2,max:.8,children:[(0,L.jsx)(N,{title:`Превью`,description:`Верхняя правая панель может содержать документ, схему, карту или live-просмотр.`,items:[`Предпросмотр файла`,`Масштаб 100%`,`Слой подсветки`]}),(0,L.jsx)(N,{title:`Журнал`,description:`Нижняя правая панель часто используется для событий, логов или вспомогательных данных.`,items:[`10:31 Импорт завершён`,`10:34 Индексация`,`10:36 Синхронизация`,`10:38 Проверка целостности`]})]})]})})}function I(e){return(0,L.jsx)(M,{children:(0,L.jsxs)(C,{...e,children:[(0,L.jsx)(N,{title:`Фиксированные ограничения`,description:"У этой панели ужаты границы `min` и `max`, поэтому splitter нельзя увести слишком далеко.",items:[`Нажмите на разделитель`,`Используйте стрелки`,`Home = минимум`,`End = максимум`]}),(0,L.jsx)(N,{title:`Проверка доступности`,description:`Сценарий помогает проверить клавиатурное управление, устойчивость границ и отсутствие рывков при drag.`,items:[`ArrowLeft / ArrowRight`,`ArrowUp / ArrowDown`,`Перетаскивание мышью`,`Перетаскивание на тач-устройстве`]})]})})}var L,R,z,B,V,H,U,W;function G(){return(G=e((()=>{A(),L=r(),{useArgs:R}=__STORYBOOK_MODULE_PREVIEW_API__,z={title:`UI/Splitter`,component:C,parameters:{atomicCanvas:!0,layout:`padded`},args:{direction:`vertical`,initial:.45,min:.15,max:.85},argTypes:{direction:{description:`Направление разделения: вертикальное по ширине или горизонтальное по высоте.`,control:`inline-radio`,options:[`vertical`,`horizontal`]},initial:{description:`Начальная доля первой панели в диапазоне от 0 до 1.`,control:{type:`range`,min:0,max:1,step:.01}},min:{description:`Минимальная доля первой панели. Значение автоматически нормализуется в диапазон 0..1.`,control:{type:`range`,min:0,max:1,step:.01}},max:{description:"Максимальная доля первой панели. Если `min` и `max` перепутаны местами, компонент сам исправит диапазон.",control:{type:`range`,min:0,max:1,step:.01}},onChange:{description:`Получает итоговую долю первой панели после завершения drag или клавиатурного шага.`,control:!1},collapsedPane:{description:`Сворачивает начальную или конечную панель.`,control:`inline-radio`,options:[null,`start`,`end`]},children:{description:`Splitter ожидает ровно два прямых дочерних элемента. Для большего количества областей используйте вложенные Splitter.`,control:!1}}},B={name:`Две панели`,render:function(){let[e]=R();return(0,L.jsx)(P,{...e})}},V={name:`Горизонтальное разделение`,render:function(){let[e]=R();return(0,L.jsx)(P,{...e})},args:{direction:`horizontal`,initial:.55}},H={name:`Четыре панели через вложенность`,render:function(){let[e]=R();return(0,L.jsx)(F,{...e})},args:{initial:.48,min:.25,max:.75}},U={name:`Ограничения и клавиатура`,render:function(){let[e]=R();return(0,L.jsx)(I,{...e})},args:{initial:.35,min:.25,max:.55}},B.parameters={...B.parameters,docs:{...B.parameters?.docs,source:{originalSource:`{
|
|
2
|
-
name: "Две панели",
|
|
3
|
-
render: function Render() {
|
|
4
|
-
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
5
|
-
return <TwoPaneLayout {...args} />;
|
|
6
|
-
}
|
|
7
|
-
}`,...B.parameters?.docs?.source}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
|
|
8
|
-
name: "Горизонтальное разделение",
|
|
9
|
-
render: function Render() {
|
|
10
|
-
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
11
|
-
return <TwoPaneLayout {...args} />;
|
|
12
|
-
},
|
|
13
|
-
args: {
|
|
14
|
-
direction: "horizontal",
|
|
15
|
-
initial: 0.55
|
|
16
|
-
}
|
|
17
|
-
}`,...V.parameters?.docs?.source}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
|
|
18
|
-
name: "Четыре панели через вложенность",
|
|
19
|
-
render: function Render() {
|
|
20
|
-
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
21
|
-
return <NestedFourPaneLayout {...args} />;
|
|
22
|
-
},
|
|
23
|
-
args: {
|
|
24
|
-
initial: 0.48,
|
|
25
|
-
min: 0.25,
|
|
26
|
-
max: 0.75
|
|
27
|
-
}
|
|
28
|
-
}`,...H.parameters?.docs?.source}}},U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
|
|
29
|
-
name: "Ограничения и клавиатура",
|
|
30
|
-
render: function Render() {
|
|
31
|
-
const [args] = useArgs<ComponentProps<typeof Splitter>>();
|
|
32
|
-
return <ConstrainedLayout {...args} />;
|
|
33
|
-
},
|
|
34
|
-
args: {
|
|
35
|
-
initial: 0.35,
|
|
36
|
-
min: 0.25,
|
|
37
|
-
max: 0.55
|
|
38
|
-
}
|
|
39
|
-
}`,...U.parameters?.docs?.source}}},W=[`Basic`,`Horizontal`,`NestedFourPanels`,`Constrained`]})))()}export{j as a,H as i,U as n,G as o,V as r,B as t};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{t as e}from"./iframe-C3wMnNgT.js";e();
|