@robot-admin/naive-ui-components 0.6.10 → 0.6.12
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/CHANGELOG.md +48 -48
- package/README.md +36 -20
- package/dist/C_ActionBar-jZPsiXtT.css.map +1 -0
- package/dist/C_ActionBar-nnfbZCea.css.map +1 -0
- package/dist/C_ActionBar.css +47 -47
- package/dist/C_ActionBar.js.map +1 -1
- package/dist/C_ActionBar2.js +1 -1
- package/dist/C_ActionBar2.js.map +1 -1
- package/dist/{C_AntV-BY8jqqmi.css.map → C_AntV-A3NXx_sF.css.map} +1 -1
- package/dist/{C_AntV-BbkHc-_a.css.map → C_AntV-D2Zp2qQF.css.map} +1 -1
- package/dist/C_AntV.css +78 -78
- package/dist/C_AntV.js.map +1 -1
- package/dist/C_AntV2.js +2 -2
- package/dist/C_AntV2.js.map +1 -1
- package/dist/C_AudioPlayer-CXl4yP_m.css.map +1 -0
- package/dist/C_AudioPlayer-CcBtt71m.css.map +1 -0
- package/dist/C_AudioPlayer.cjs +1 -0
- package/dist/C_AudioPlayer.css +283 -0
- package/dist/C_AudioPlayer.d.cts +2 -0
- package/dist/C_AudioPlayer.d.ts +2 -0
- package/dist/C_AudioPlayer.js +1 -0
- package/dist/C_AudioPlayer.js.map +1 -0
- package/dist/C_AudioPlayer2.js +2 -0
- package/dist/C_AudioPlayer2.js.map +1 -0
- package/dist/C_AvatarGroup-CtPhfH9h.css.map +1 -0
- package/dist/C_AvatarGroup-M1dNPH3E.css.map +1 -0
- package/dist/C_AvatarGroup.cjs +1 -0
- package/dist/C_AvatarGroup.css +107 -0
- package/dist/C_AvatarGroup.d.cts +2 -0
- package/dist/C_AvatarGroup.d.ts +2 -0
- package/dist/C_AvatarGroup.js +1 -0
- package/dist/C_AvatarGroup.js.map +1 -0
- package/dist/C_AvatarGroup2.js +2 -0
- package/dist/C_AvatarGroup2.js.map +1 -0
- package/dist/{C_Barcode-DYDRDe2O.css.map → C_Barcode-DjTmDkbQ.css.map} +1 -1
- package/dist/{C_Barcode-muJdc_O4.css.map → C_Barcode-Do1Ozsmh.css.map} +1 -1
- package/dist/C_Barcode.css +7 -7
- package/dist/C_Barcode.d.cts +1 -1
- package/dist/C_Barcode.d.ts +1 -1
- package/dist/C_Barcode.js.map +1 -1
- package/dist/C_Barcode2.js +1 -1
- package/dist/C_Barcode2.js.map +1 -1
- package/dist/C_Breadcrumb.d.cts +1 -1
- package/dist/C_Breadcrumb.d.ts +1 -1
- package/dist/C_Breadcrumb.js.map +1 -1
- package/dist/C_Breadcrumb2.js.map +1 -1
- package/dist/{C_Captcha-9_hk6VmY.css.map → C_Captcha-CZmAETly.css.map} +1 -1
- package/dist/{C_Captcha-MtASlJ0f.css.map → C_Captcha-Ccq3DMrR.css.map} +1 -1
- package/dist/C_Captcha.css +19 -19
- package/dist/C_Captcha.d.cts +1 -1
- package/dist/C_Captcha.d.ts +1 -1
- package/dist/C_Captcha.js.map +1 -1
- package/dist/C_Captcha2.js +1 -1
- package/dist/C_Captcha2.js.map +1 -1
- package/dist/C_Cascade.d.cts +1 -1
- package/dist/C_Cascade.d.ts +1 -1
- package/dist/C_Chat-CcdWgVE8.css.map +1 -0
- package/dist/C_Chat-Cx0woEEe.css.map +1 -0
- package/dist/C_Chat.cjs +1 -0
- package/dist/C_Chat.css +395 -0
- package/dist/C_Chat.d.cts +2 -0
- package/dist/C_Chat.d.ts +2 -0
- package/dist/C_Chat.js +1 -0
- package/dist/C_Chat.js.map +1 -0
- package/dist/C_Chat2.js +2 -0
- package/dist/C_Chat2.js.map +1 -0
- package/dist/{C_City-Bam08Qv3.css.map → C_City-Cv5BESaN.css.map} +1 -1
- package/dist/{C_City-Bb3W-KaN.css.map → C_City-DNKv4MpH.css.map} +1 -1
- package/dist/C_City.css +29 -29
- package/dist/C_City.d.cts +1 -1
- package/dist/C_City.d.ts +1 -1
- package/dist/C_City.js.map +1 -1
- package/dist/C_City2.js +1 -1
- package/dist/C_City2.js.map +1 -1
- package/dist/C_Code-DPZlNSxL.css.map +1 -0
- package/dist/C_Code-avZjAnHD.css.map +1 -0
- package/dist/C_Code.css +3 -3
- package/dist/C_Code.d.cts +1 -1
- package/dist/C_Code.d.ts +1 -1
- package/dist/C_Code.js.map +1 -1
- package/dist/C_Code2.js +1 -1
- package/dist/C_Code2.js.map +1 -1
- package/dist/{C_CollapsePanel-BCmTFuDz.css.map → C_CollapsePanel-BpofCDyl.css.map} +1 -1
- package/dist/{C_CollapsePanel-Bxnh4Zy-.css.map → C_CollapsePanel-Fap-lv_5.css.map} +1 -1
- package/dist/C_CollapsePanel.css +35 -35
- package/dist/C_CollapsePanel.js.map +1 -1
- package/dist/C_CollapsePanel2.js +1 -1
- package/dist/C_CollapsePanel2.js.map +1 -1
- package/dist/C_ContextMenu-CCsCeI39.css.map +1 -0
- package/dist/C_ContextMenu-DOTBeltf.css.map +1 -0
- package/dist/C_ContextMenu.cjs +1 -0
- package/dist/C_ContextMenu.css +115 -0
- package/dist/C_ContextMenu.d.cts +2 -0
- package/dist/C_ContextMenu.d.ts +2 -0
- package/dist/C_ContextMenu.js +1 -0
- package/dist/C_ContextMenu.js.map +1 -0
- package/dist/C_ContextMenu2.js +2 -0
- package/dist/C_ContextMenu2.js.map +1 -0
- package/dist/{C_Cron-Civir5-I.css.map → C_Cron-C0-8b5af.css.map} +1 -1
- package/dist/{C_Cron-iw3qpMsy.css.map → C_Cron-DqHQ92LN.css.map} +1 -1
- package/dist/C_Cron.css +37 -37
- package/dist/C_Cron.js.map +1 -1
- package/dist/C_Cron2.js +1 -1
- package/dist/C_Cron2.js.map +1 -1
- package/dist/C_Date.d.cts +1 -1
- package/dist/C_Date.d.ts +1 -1
- package/dist/{C_Draggable-BCjIvIwT.css.map → C_Draggable-Bq6o0qXn.css.map} +1 -1
- package/dist/{C_Draggable-DwkSlCOS.css.map → C_Draggable-r6nhx3yM.css.map} +1 -1
- package/dist/C_Draggable.css +46 -46
- package/dist/C_Draggable.js.map +1 -1
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_Draggable2.js.map +1 -1
- package/dist/C_Editor.d.cts +1 -1
- package/dist/C_Editor.d.ts +1 -1
- package/dist/{C_FilePreview-BhcbiXsV.css.map → C_FilePreview-BVarVvnD.css.map} +1 -1
- package/dist/{C_FilePreview-DJudcIbW.css.map → C_FilePreview-DHGlV4OR.css.map} +1 -1
- package/dist/C_FilePreview.css +91 -91
- package/dist/C_FilePreview.js.map +1 -1
- package/dist/C_FilePreview2.js +1 -1
- package/dist/C_FilePreview2.js.map +1 -1
- package/dist/{C_Form-BtcAPIRi.css.map → C_Form-BciQUPpS.css.map} +1 -1
- package/dist/{C_Form-D_gwQ7hC.css.map → C_Form-CKHvXL3O.css.map} +1 -1
- package/dist/C_Form.css +222 -222
- package/dist/C_Form.js.map +1 -1
- package/dist/C_Form2.js +1 -1
- package/dist/C_Form2.js.map +1 -1
- package/dist/{C_FormSearch-Bi4XYjjk.css.map → C_FormSearch-Bmd2CmG6.css.map} +1 -1
- package/dist/{C_FormSearch-DUGOoX0u.css.map → C_FormSearch-DBNtnjaL.css.map} +1 -1
- package/dist/C_FormSearch.css +45 -45
- package/dist/C_FormSearch.js.map +1 -1
- package/dist/C_FormSearch2.js +1 -1
- package/dist/C_FormSearch2.js.map +1 -1
- package/dist/{C_FormulaEditor-CJk3SSUJ.css.map → C_FormulaEditor-3WG2vtQl.css.map} +1 -1
- package/dist/{C_FormulaEditor-Cy7mjfVO.css.map → C_FormulaEditor-Cm0CokN5.css.map} +1 -1
- package/dist/C_FormulaEditor.css +78 -78
- package/dist/C_FormulaEditor.js.map +1 -1
- package/dist/C_FormulaEditor2.js +1 -1
- package/dist/C_FormulaEditor2.js.map +1 -1
- package/dist/C_FullCalendar-1U4VlG7X.css.map +1 -0
- package/dist/C_FullCalendar-DLUdCtqf.css.map +1 -0
- package/dist/C_FullCalendar.css +3 -3
- package/dist/C_FullCalendar.js.map +1 -1
- package/dist/C_FullCalendar2.js +1 -1
- package/dist/C_FullCalendar2.js.map +1 -1
- package/dist/C_Guide.d.cts +1 -1
- package/dist/C_Guide.d.ts +1 -1
- package/dist/C_Icon.d.cts +1 -1
- package/dist/C_Icon.d.ts +1 -1
- package/dist/C_Icon.js.map +1 -1
- package/dist/C_Icon2.js.map +1 -1
- package/dist/{C_ImageCropper-BqZpkZfU.css.map → C_ImageCropper-D3L2-J_J.css.map} +1 -1
- package/dist/{C_ImageCropper-CylwGuzS.css.map → C_ImageCropper-DrmUlaLi.css.map} +1 -1
- package/dist/C_ImageCropper.css +10 -10
- package/dist/C_ImageCropper.js.map +1 -1
- package/dist/C_ImageCropper2.js +1 -1
- package/dist/C_ImageCropper2.js.map +1 -1
- package/dist/C_Language.d.cts +1 -1
- package/dist/C_Language.d.ts +1 -1
- package/dist/C_Login-Cst_W1XC.css.map +1 -0
- package/dist/C_Login-DWZ_6K1x.css.map +1 -0
- package/dist/C_Login.cjs +1 -0
- package/dist/C_Login.css +515 -0
- package/dist/C_Login.d.cts +2 -0
- package/dist/C_Login.d.ts +2 -0
- package/dist/C_Login.js +1 -0
- package/dist/C_Login.js.map +1 -0
- package/dist/C_Login2.js +2 -0
- package/dist/C_Login2.js.map +1 -0
- package/dist/{C_Map-DNnBcY70.css.map → C_Map-BCJmDnJT.css.map} +1 -1
- package/dist/{C_Map-LEXIx6zM.css.map → C_Map-WUMXSAfy.css.map} +1 -1
- package/dist/C_Map.css +4 -4
- package/dist/C_Map.js.map +1 -1
- package/dist/C_Map2.js +1 -1
- package/dist/C_Map2.js.map +1 -1
- package/dist/{C_Markdown-Kujzx1qG.css.map → C_Markdown-7iBnLDtL.css.map} +1 -1
- package/dist/{C_Markdown-YCAmBbNF.css.map → C_Markdown-BbTvdFCl.css.map} +1 -1
- package/dist/C_Markdown.css +33 -33
- package/dist/C_Markdown.d.cts +1 -1
- package/dist/C_Markdown.d.ts +1 -1
- package/dist/C_Markdown.js.map +1 -1
- package/dist/C_Markdown2.js +1 -1
- package/dist/C_Markdown2.js.map +1 -1
- package/dist/C_Menu.d.cts +1 -1
- package/dist/C_Menu.d.ts +1 -1
- package/dist/C_Progress.d.cts +1 -1
- package/dist/C_Progress.d.ts +1 -1
- package/dist/{C_QRCode-CFNTda_1.css.map → C_QRCode-DMxSyogU.css.map} +1 -1
- package/dist/{C_QRCode-CmWr9lK-.css.map → C_QRCode-G7fiAkm4.css.map} +1 -1
- package/dist/C_QRCode.css +9 -9
- package/dist/C_QRCode.js.map +1 -1
- package/dist/C_QRCode2.js +1 -1
- package/dist/C_QRCode2.js.map +1 -1
- package/dist/{C_Signature-PN4GOLRX.css.map → C_Signature-B5fFz6RD.css.map} +1 -1
- package/dist/{C_Signature-fWQqGIZ-.css.map → C_Signature-es-ZNPzr.css.map} +1 -1
- package/dist/C_Signature.css +14 -14
- package/dist/C_Signature.js.map +1 -1
- package/dist/C_Signature2.js +1 -1
- package/dist/C_Signature2.js.map +1 -1
- package/dist/{C_SplitPane-BOwr1C7K.css.map → C_SplitPane-Br2eK8IG.css.map} +1 -1
- package/dist/{C_SplitPane-N-a_D-7F.css.map → C_SplitPane-DuyzUhKB.css.map} +1 -1
- package/dist/C_SplitPane.css +31 -31
- package/dist/C_SplitPane.js.map +1 -1
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_SplitPane2.js.map +1 -1
- package/dist/C_Steps-B1Wf3E73.css.map +1 -0
- package/dist/C_Steps-C8cOf_tu.css.map +1 -0
- package/dist/C_Steps.css +41 -41
- package/dist/C_Steps.d.cts +1 -1
- package/dist/C_Steps.d.ts +1 -1
- package/dist/C_Steps.js.map +1 -1
- package/dist/C_Steps2.js +1 -1
- package/dist/C_Steps2.js.map +1 -1
- package/dist/{C_Table-BV1wUw6f.css.map → C_Table-vZlcgH6x.css.map} +1 -1
- package/dist/{C_Table-LlJ-JEdm.css.map → C_Table-wzAO43l0.css.map} +1 -1
- package/dist/C_Table.css +93 -93
- package/dist/C_Table.js.map +1 -1
- package/dist/C_Table2.js +1 -1
- package/dist/C_Table2.js.map +1 -1
- package/dist/{C_TagsView-DX3LecK1.css.map → C_TagsView-BsutyC3U.css.map} +1 -1
- package/dist/{C_TagsView-DqOTa8bL.css.map → C_TagsView-Crm7yWg9.css.map} +1 -1
- package/dist/C_TagsView.css +36 -36
- package/dist/C_TagsView.d.cts +1 -1
- package/dist/C_TagsView.d.ts +1 -1
- package/dist/C_TagsView.js.map +1 -1
- package/dist/C_TagsView2.js +1 -1
- package/dist/C_TagsView2.js.map +1 -1
- package/dist/C_Theme.d.cts +1 -1
- package/dist/C_Theme.d.ts +1 -1
- package/dist/C_Time-Bd_e1YDN.css.map +1 -0
- package/dist/C_Time-CKb_fwdm.css.map +1 -0
- package/dist/C_Time.css +5 -5
- package/dist/C_Time.js.map +1 -1
- package/dist/C_Time2.js +1 -1
- package/dist/C_Time2.js.map +1 -1
- package/dist/C_Timeline-CGTFTMX0.css.map +1 -0
- package/dist/C_Timeline-DxKyvKer.css.map +1 -0
- package/dist/C_Timeline.cjs +1 -0
- package/dist/C_Timeline.css +271 -0
- package/dist/C_Timeline.d.cts +2 -0
- package/dist/C_Timeline.d.ts +2 -0
- package/dist/C_Timeline.js +1 -0
- package/dist/C_Timeline.js.map +1 -0
- package/dist/C_Timeline2.js +2 -0
- package/dist/C_Timeline2.js.map +1 -0
- package/dist/C_Transfer-CCEqnC-v.css.map +1 -0
- package/dist/C_Transfer-CStPm4NP.css.map +1 -0
- package/dist/C_Transfer.cjs +1 -0
- package/dist/C_Transfer.css +193 -0
- package/dist/C_Transfer.d.cts +2 -0
- package/dist/C_Transfer.d.ts +2 -0
- package/dist/C_Transfer.js +1 -0
- package/dist/C_Transfer.js.map +1 -0
- package/dist/C_Transfer2.js +2 -0
- package/dist/C_Transfer2.js.map +1 -0
- package/dist/{C_Tree-D98nX9qT.css.map → C_Tree-B-Le4hjQ.css.map} +1 -1
- package/dist/{C_Tree-ulfm7b-P.css.map → C_Tree-DnGc_MPb.css.map} +1 -1
- package/dist/C_Tree.css +33 -33
- package/dist/C_Tree.js.map +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Tree2.js.map +1 -1
- package/dist/{C_VideoPlayer-4J96tKfK.css.map → C_VideoPlayer-Cdgv4Zq0.css.map} +1 -1
- package/dist/{C_VideoPlayer-D35seHkm.css.map → C_VideoPlayer-rm0MODUv.css.map} +1 -1
- package/dist/C_VideoPlayer.css +13 -13
- package/dist/C_VideoPlayer.js.map +1 -1
- package/dist/C_VideoPlayer2.js +1 -1
- package/dist/C_VideoPlayer2.js.map +1 -1
- package/dist/{C_VtableGantt-C2lxFmWg.css.map → C_VtableGantt-BpY-Rng3.css.map} +1 -1
- package/dist/{C_VtableGantt-Dwnkw_WL.css.map → C_VtableGantt-DB87-jdS.css.map} +1 -1
- package/dist/C_VtableGantt.css +15 -15
- package/dist/C_VtableGantt.d.cts +1 -1
- package/dist/C_VtableGantt.d.ts +1 -1
- package/dist/C_VtableGantt.js.map +1 -1
- package/dist/C_VtableGantt2.js +1 -1
- package/dist/C_VtableGantt2.js.map +1 -1
- package/dist/{C_WorkFlow-2hJfvvTK.css.map → C_WorkFlow-7F6op6qN.css.map} +1 -1
- package/dist/{C_WorkFlow-DHoNjl8-.css.map → C_WorkFlow-Cy3HWA6A.css.map} +1 -1
- package/dist/C_WorkFlow.css +108 -108
- package/dist/C_WorkFlow.js.map +1 -1
- package/dist/C_WorkFlow2.js +1 -1
- package/dist/C_WorkFlow2.js.map +1 -1
- package/dist/constants.d.ts +4 -4
- package/dist/constants2.d.ts +4 -4
- package/dist/constants3.d.ts +5 -5
- package/dist/constants4.d.ts +2 -2
- package/dist/data.d.ts +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +48 -41
- package/dist/index.d.ts +48 -41
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index10.vue.d.ts +41 -23
- package/dist/index11.vue.d.ts +80 -63
- package/dist/index12.vue.d.ts +48 -20
- package/dist/index13.vue.d.ts +23 -63
- package/dist/index14.vue.d.ts +21 -58
- package/dist/index15.vue.d.ts +65 -48
- package/dist/index16.vue.d.ts +16 -21
- package/dist/index17.vue.d.ts +106 -77
- package/dist/index18.vue.d.ts +74 -11
- package/dist/index19.vue.d.ts +58 -653
- package/dist/index2.vue.d.ts +75 -30
- package/dist/index20.vue.d.ts +55 -0
- package/dist/index21.vue.d.ts +33 -0
- package/dist/index22.vue.d.ts +88 -0
- package/dist/index23.vue.d.ts +18 -0
- package/dist/index24.vue.d.ts +112 -0
- package/dist/index25.vue.d.ts +81 -0
- package/dist/index26.vue.d.ts +662 -0
- package/dist/index3.vue.d.ts +77 -19
- package/dist/index4.vue.d.ts +29 -36
- package/dist/index5.vue.d.ts +19 -20
- package/dist/index6.vue.d.ts +36 -26
- package/dist/index7.vue.d.ts +23 -40
- package/dist/index8.vue.d.ts +117 -45
- package/dist/index9.vue.d.ts +19 -25
- package/dist/menuAdapter.js.map +1 -1
- package/dist/resolver.cjs +1 -1
- package/dist/resolver.cjs.map +1 -1
- package/dist/resolver.d.cts +1 -1
- package/dist/resolver.d.ts +1 -1
- package/dist/resolver.js +1 -1
- package/dist/resolver.js.map +1 -1
- package/dist/style.css +3121 -1228
- package/dist/useCollapsePanel.d.ts +2 -2
- package/dist/useCropperCore.d.ts +5 -5
- package/dist/useDraggableLayout.d.ts +2 -2
- package/dist/useDynamicFormState.d.ts +4 -4
- package/dist/useEdgeInteraction.d.ts +2 -2
- package/dist/useFullscreen.d.ts +2 -2
- package/dist/useInfiniteScroll.d.ts +3 -3
- package/dist/useModalEdit.d.ts +2 -2
- package/dist/useQRCode.d.ts +1 -1
- package/dist/useSearchState.d.ts +2 -2
- package/dist/useSignatureHistory.d.ts +2 -2
- package/dist/useSplitResize.d.ts +6 -6
- package/dist/useTimeSelection.d.ts +1 -1
- package/dist/useTreeOperations.d.ts +2 -2
- package/dist/useWorkflowValidation.d.ts +3 -3
- package/package.json +2 -2
- package/dist/C_ActionBar-DYG0Yf3A.css.map +0 -1
- package/dist/C_ActionBar-MAjRhqcI.css.map +0 -1
- package/dist/C_Code-BFi5xxnM.css.map +0 -1
- package/dist/C_Code-CZ7yfnri.css.map +0 -1
- package/dist/C_FullCalendar-BQA0OjGB.css.map +0 -1
- package/dist/C_FullCalendar-ChJUosAi.css.map +0 -1
- package/dist/C_Steps-DLW2vbqC.css.map +0 -1
- package/dist/C_Steps-DwMRHbG2.css.map +0 -1
- package/dist/C_Time-BzyQVvTS.css.map +0 -1
- package/dist/C_Time-DmpKLQHc.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
# @robot-admin/naive-ui-components
|
|
2
|
-
|
|
3
|
-
## 0.6.2
|
|
4
|
-
|
|
5
|
-
### Patch Changes
|
|
6
|
-
|
|
7
|
-
- 修复菜单图标在生产环境下错位问题
|
|
8
|
-
- menuAdapter 的 defaultRenderIcon 中 `inline-flex items-center` 原子类改为内联 style
|
|
9
|
-
- 组件库不应依赖宿主项目的 UnoCSS/Tailwind 原子类,否则生产构建时可能丢失样式
|
|
10
|
-
|
|
11
|
-
## 0.6.1
|
|
12
|
-
|
|
13
|
-
### Patch Changes
|
|
14
|
-
|
|
15
|
-
- 修复 C_Table loading 状态在 crud 模式下失效的问题
|
|
16
|
-
- `loading` prop 默认值从 `false` 改为 `undefined`,使 `??` 运算符能正确回退到 `crud.loading.value`
|
|
17
|
-
- 之前 `false ?? crud.loading.value` 始终返回 `false`(`??` 不回退 falsy 值,只回退 null/undefined)
|
|
18
|
-
|
|
19
|
-
## 0.6.0
|
|
20
|
-
|
|
21
|
-
### Minor Changes
|
|
22
|
-
|
|
23
|
-
- 依赖架构优化 + CSS 按需导入 + Changesets 集成
|
|
24
|
-
- 将 optionalDependencies 迁移至 dependencies,消费端自动传递安装
|
|
25
|
-
- 新增按组件 CSS 导出 (`C_*/style.css`),支持样式按需导入
|
|
26
|
-
- 修复 merge-css.js 中 esm/cjs CSS 重复合并问题
|
|
27
|
-
- Resolver 新增 `importStyle` 选项,自动注入组件样式
|
|
28
|
-
- 集成 @changesets/cli 自动化版本管理
|
|
29
|
-
|
|
30
|
-
- 提取 C_Menu / C_Breadcrumb / C_TagsView 布局组件 + 适配器架构
|
|
31
|
-
- 新增 `_shared` 模块:统一类型定义(RouteItem, TagItem, BreadcrumbItem)+ menuAdapter 适配器
|
|
32
|
-
- `createMenuOptions(routes, config)` 工厂函数:将 RouteItem[] 转换为 NMenu MenuOption[]
|
|
33
|
-
- `flattenRoutes()` 辅助:扁平化嵌套路由用于标签页匹配
|
|
34
|
-
- C_Menu:支持双输入(options / routes),内置 labelFormatter 回调解耦 i18n
|
|
35
|
-
- C_Breadcrumb:auto(route.matched)+ manual(items)双模式
|
|
36
|
-
- C_TagsView:useTagsView composable + localStorage 持久化 + 右键菜单
|
|
37
|
-
- vue-router ^4.0.0 新增为 peerDependency
|
|
38
|
-
|
|
39
|
-
## 0.5.0
|
|
40
|
-
|
|
41
|
-
### Minor Changes
|
|
42
|
-
|
|
43
|
-
- 依赖架构优化 + CSS 按需导入 + Changesets 集成
|
|
44
|
-
- 将 optionalDependencies 迁移至 dependencies,消费端自动传递安装
|
|
45
|
-
- 新增按组件 CSS 导出 (`C_*/style.css`),支持样式按需导入
|
|
46
|
-
- 修复 merge-css.js 中 esm/cjs CSS 重复合并问题
|
|
47
|
-
- Resolver 新增 `importStyle` 选项,自动注入组件样式
|
|
48
|
-
- 集成 @changesets/cli 自动化版本管理
|
|
1
|
+
# @robot-admin/naive-ui-components
|
|
2
|
+
|
|
3
|
+
## 0.6.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 修复菜单图标在生产环境下错位问题
|
|
8
|
+
- menuAdapter 的 defaultRenderIcon 中 `inline-flex items-center` 原子类改为内联 style
|
|
9
|
+
- 组件库不应依赖宿主项目的 UnoCSS/Tailwind 原子类,否则生产构建时可能丢失样式
|
|
10
|
+
|
|
11
|
+
## 0.6.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- 修复 C_Table loading 状态在 crud 模式下失效的问题
|
|
16
|
+
- `loading` prop 默认值从 `false` 改为 `undefined`,使 `??` 运算符能正确回退到 `crud.loading.value`
|
|
17
|
+
- 之前 `false ?? crud.loading.value` 始终返回 `false`(`??` 不回退 falsy 值,只回退 null/undefined)
|
|
18
|
+
|
|
19
|
+
## 0.6.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- 依赖架构优化 + CSS 按需导入 + Changesets 集成
|
|
24
|
+
- 将 optionalDependencies 迁移至 dependencies,消费端自动传递安装
|
|
25
|
+
- 新增按组件 CSS 导出 (`C_*/style.css`),支持样式按需导入
|
|
26
|
+
- 修复 merge-css.js 中 esm/cjs CSS 重复合并问题
|
|
27
|
+
- Resolver 新增 `importStyle` 选项,自动注入组件样式
|
|
28
|
+
- 集成 @changesets/cli 自动化版本管理
|
|
29
|
+
|
|
30
|
+
- 提取 C_Menu / C_Breadcrumb / C_TagsView 布局组件 + 适配器架构
|
|
31
|
+
- 新增 `_shared` 模块:统一类型定义(RouteItem, TagItem, BreadcrumbItem)+ menuAdapter 适配器
|
|
32
|
+
- `createMenuOptions(routes, config)` 工厂函数:将 RouteItem[] 转换为 NMenu MenuOption[]
|
|
33
|
+
- `flattenRoutes()` 辅助:扁平化嵌套路由用于标签页匹配
|
|
34
|
+
- C_Menu:支持双输入(options / routes),内置 labelFormatter 回调解耦 i18n
|
|
35
|
+
- C_Breadcrumb:auto(route.matched)+ manual(items)双模式
|
|
36
|
+
- C_TagsView:useTagsView composable + localStorage 持久化 + 右键菜单
|
|
37
|
+
- vue-router ^4.0.0 新增为 peerDependency
|
|
38
|
+
|
|
39
|
+
## 0.5.0
|
|
40
|
+
|
|
41
|
+
### Minor Changes
|
|
42
|
+
|
|
43
|
+
- 依赖架构优化 + CSS 按需导入 + Changesets 集成
|
|
44
|
+
- 将 optionalDependencies 迁移至 dependencies,消费端自动传递安装
|
|
45
|
+
- 新增按组件 CSS 导出 (`C_*/style.css`),支持样式按需导入
|
|
46
|
+
- 修复 merge-css.js 中 esm/cjs CSS 重复合并问题
|
|
47
|
+
- Resolver 新增 `importStyle` 选项,自动注入组件样式
|
|
48
|
+
- 集成 @changesets/cli 自动化版本管理
|
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @agile-team/naive-ui-components
|
|
2
2
|
|
|
3
|
-
基于 **Naive UI** 的 Vue 3 企业级组件库,从 Robot Admin 中提炼的
|
|
3
|
+
基于 **Naive UI** 的 Vue 3 企业级组件库,从 Robot Admin 中提炼的 49 个高质量业务组件。
|
|
4
4
|
|
|
5
5
|
支持 **全量注册**、**按需导入(Tree-Shaking)** 和 **子路径独立导入**,配合多入口构建输出 ESM / CJS / DTS,满足不同集成场景。
|
|
6
6
|
|
|
@@ -64,27 +64,32 @@ import {
|
|
|
64
64
|
} from '@agile-team/naive-ui-components'
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
## 📋 组件清单(
|
|
67
|
+
## 📋 组件清单(49 个)
|
|
68
68
|
|
|
69
69
|
> 💡 所有组件均提供 **在线交互演示**,访问 [组件文档](https://www.tzagileteam.com/robot/components/preface) 可直接在页面中体验真实效果(通过 iframe 嵌入 Robot Admin 生产环境)。
|
|
70
70
|
|
|
71
71
|
### 基础组件
|
|
72
72
|
|
|
73
|
-
| 组件
|
|
74
|
-
|
|
|
75
|
-
| `C_Icon`
|
|
76
|
-
| `C_Code`
|
|
77
|
-
| `C_Barcode`
|
|
78
|
-
| `C_Captcha`
|
|
79
|
-
| `C_Cascade`
|
|
80
|
-
| `C_Guide`
|
|
81
|
-
| `C_Progress`
|
|
82
|
-
| `C_Steps`
|
|
83
|
-
| `C_ActionBar`
|
|
84
|
-
| `C_Theme`
|
|
85
|
-
| `C_Language`
|
|
86
|
-
| `C_Date`
|
|
87
|
-
| `C_City`
|
|
73
|
+
| 组件 | 说明 | 外部依赖 |
|
|
74
|
+
| ---------------- | ---------------- | --------------------------- |
|
|
75
|
+
| `C_Icon` | Iconify 图标封装 | `@iconify/vue` |
|
|
76
|
+
| `C_Code` | 代码高亮显示 | `highlight.js` |
|
|
77
|
+
| `C_Barcode` | 条形码生成器 | `@chenfengyuan/vue-barcode` |
|
|
78
|
+
| `C_Captcha` | 拼图验证码 | `vue3-puzzle-vcode` |
|
|
79
|
+
| `C_Cascade` | 级联面板选择器 | - |
|
|
80
|
+
| `C_Guide` | 新手引导 | `driver.js` |
|
|
81
|
+
| `C_Progress` | 增强进度条 | - |
|
|
82
|
+
| `C_Steps` | 步骤条 | - |
|
|
83
|
+
| `C_ActionBar` | 操作按钮栏 | - |
|
|
84
|
+
| `C_Theme` | 主题切换器 | - |
|
|
85
|
+
| `C_Language` | 语言切换器 | - |
|
|
86
|
+
| `C_Date` | 日期选择器增强 | - |
|
|
87
|
+
| `C_City` | 省市区三级联动 | - |
|
|
88
|
+
| `C_Breadcrumb` | 面包屑导航 | - |
|
|
89
|
+
| `C_Menu` | 导航菜单 | - |
|
|
90
|
+
| `C_TagsView` | 标签页导航 | - |
|
|
91
|
+
| `C_GlobalSearch` | 全局搜索面板 | - |
|
|
92
|
+
| `C_AvatarGroup` | 头像组合展示 | - |
|
|
88
93
|
|
|
89
94
|
### 内容 & 编辑组件
|
|
90
95
|
|
|
@@ -108,7 +113,9 @@ import {
|
|
|
108
113
|
| `C_WaterFall` | 瀑布流布局 | - |
|
|
109
114
|
| `C_FullCalendar` | 日历事件 | `@fullcalendar/*` |
|
|
110
115
|
| `C_VideoPlayer` | 视频播放器(HLS/字幕/书签/章节) | `xgplayer`、`xgplayer-hls` |
|
|
116
|
+
| `C_AudioPlayer` | 音频播放器(波形/进度/播放列表) | - |
|
|
111
117
|
| `C_FilePreview` | 文件预览(PDF/Word/Excel) | `xlsx`、`mammoth`、`@tato30/vue-pdf` |
|
|
118
|
+
| `C_Timeline` | 时间线(垂直/水平/可折叠) | - |
|
|
112
119
|
|
|
113
120
|
### 表单 & 布局组件
|
|
114
121
|
|
|
@@ -122,6 +129,15 @@ import {
|
|
|
122
129
|
| `C_Tree` | 高级树形控件 | - |
|
|
123
130
|
| `C_Time` | 时间选择器增强 | - |
|
|
124
131
|
| `C_Cron` | Cron 表达式编辑器 | - |
|
|
132
|
+
| `C_Transfer` | 穿梭框(搜索/全选/批量操作) | - |
|
|
133
|
+
|
|
134
|
+
### 交互 & 业务组件
|
|
135
|
+
|
|
136
|
+
| 组件 | 说明 | 外部依赖 |
|
|
137
|
+
| --------------- | -------------------------------------- | -------- |
|
|
138
|
+
| `C_Chat` | 聊天组件(联系人/消息气泡/输入框) | - |
|
|
139
|
+
| `C_ContextMenu` | 右键菜单(嵌套子菜单/快捷键/危险操作) | - |
|
|
140
|
+
| `C_Login` | 登录组件(5种模式/验证码/记住密码) | - |
|
|
125
141
|
|
|
126
142
|
### 流程 & 通知组件
|
|
127
143
|
|
|
@@ -161,7 +177,7 @@ bun add expr-eval
|
|
|
161
177
|
|
|
162
178
|
```
|
|
163
179
|
bun run build
|
|
164
|
-
├── 1. tsdown → 多入口打包(
|
|
180
|
+
├── 1. tsdown → 多入口打包(49 组件 ESM/CJS/DTS)
|
|
165
181
|
├── 2. sass CLI → 编译 global.scss → global-scss.css
|
|
166
182
|
├── 3. merge-css.js → 合并 SFC CSS + global SCSS → style.css
|
|
167
183
|
└── 4. gen-exports.js → 自动生成 package.json exports 映射
|
|
@@ -169,7 +185,7 @@ bun run build
|
|
|
169
185
|
|
|
170
186
|
### 技术要点
|
|
171
187
|
|
|
172
|
-
- **构建引擎**:[tsdown](https://github.com/rolldown/tsdown)(基于 Rolldown),
|
|
188
|
+
- **构建引擎**:[tsdown](https://github.com/rolldown/tsdown)(基于 Rolldown),49 个独立入口并行编译
|
|
173
189
|
- **SCSS 处理**:自定义 `scssTransformPlugin` 在 Rolldown 管线内编译 SFC SCSS,独立 Sass CLI 编译全局样式
|
|
174
190
|
- **CSS 合并**:构建后将分散的 per-chunk CSS 与 `global-scss.css` 合并为单一 `style.css`
|
|
175
191
|
- **类型导出**:统一 `export *` barrel 模式,自动生成完整 `.d.ts`
|
|
@@ -181,7 +197,7 @@ bun run build
|
|
|
181
197
|
```
|
|
182
198
|
dist/
|
|
183
199
|
├── index.js / index.cjs / index.d.ts # 主入口
|
|
184
|
-
├── C_Form.js / C_Form.cjs / C_Form.d.ts # 子路径入口(
|
|
200
|
+
├── C_Form.js / C_Form.cjs / C_Form.d.ts # 子路径入口(49 组件)
|
|
185
201
|
├── style.css # 合并后的全量样式
|
|
186
202
|
└── [chunk].js # 共享代码块
|
|
187
203
|
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_ActionBar-jZPsiXtT.css","names":[],"sources":["../src/components/C_ActionBar/index.vue?vue&type=style&index=0&scoped=c7b6bc21&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 通用操作按钮组件样式 */\n/* ================= 主容器 ================= */\n.c-action-bar[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 16px;\n background: var(--c-bg-card);\n border-radius: var(--c-radius);\n border: 1px solid var(--c-border);\n transition: all 0.3s ease;\n}\n.c-action-bar.is-align-left[data-v-c7b6bc21] {\n justify-content: flex-start;\n}\n.c-action-bar.is-align-center[data-v-c7b6bc21] {\n justify-content: center;\n}\n.c-action-bar.is-align-right[data-v-c7b6bc21] {\n justify-content: flex-end;\n}\n.c-action-bar.is-align-space-between[data-v-c7b6bc21] {\n justify-content: space-between;\n}\n.c-action-bar.is-align-space-around[data-v-c7b6bc21] {\n justify-content: space-around;\n}\n.c-action-bar.is-compact[data-v-c7b6bc21] {\n padding: 12px;\n margin-bottom: 12px;\n}\n.c-action-bar.is-inline[data-v-c7b6bc21] {\n padding: 0;\n margin-bottom: 0;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n}\n.c-action-bar.is-wrap[data-v-c7b6bc21] {\n flex-wrap: wrap;\n gap: 12px;\n}\n@media (max-width: 768px) {\n.c-action-bar[data-v-c7b6bc21] {\n flex-direction: column;\n gap: 12px;\n}\n.c-action-bar .actions-group[data-v-c7b6bc21] {\n width: 100%;\n justify-content: center;\n}\n}\n\n/* ================= 按钮组 ================= */\n.actions-group[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n}\n.actions-group.actions-left[data-v-c7b6bc21] {\n justify-content: flex-start;\n}\n.actions-group.actions-right[data-v-c7b6bc21] {\n justify-content: flex-end;\n}\n.c-action-bar.has-only-left.is-align-center .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-center .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: center;\n}\n.c-action-bar.has-only-left.is-align-space-between .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-between .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: space-between;\n}\n.c-action-bar.has-only-left.is-align-space-around .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-around .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: space-around;\n}\n.c-action-bar.has-only-left.is-align-right .actions-group.actions-left[data-v-c7b6bc21] {\n width: 100%;\n justify-content: flex-end;\n}\n.c-action-bar.has-only-right.is-align-left .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: flex-start;\n}\n.actions-group[data-v-c7b6bc21] .n-button {\n transition: all 0.3s ease;\n font-weight: 500;\n}\n.actions-group[data-v-c7b6bc21] .n-button .n-icon {\n transition: transform 0.3s ease;\n}\n.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) .n-icon {\n transform: scale(1.1);\n}\n.actions-group[data-v-c7b6bc21] .n-button:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-group[data-v-c7b6bc21] .n-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.actions-group[data-v-c7b6bc21] .n-button.n-button--loading {\n pointer-events: none;\n}\n.actions-group[data-v-c7b6bc21] .n-button--primary-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--info-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(42, 148, 125, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--success-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(99, 226, 183, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--warning-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(240, 138, 0, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--error-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(208, 48, 80, 0.3);\n}\n\n/* ================= 中间插槽区域 ================= */\n.actions-center[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 0 24px;\n min-width: 0;\n}\n\n/* ================= 分隔线 ================= */\n.action-divider[data-v-c7b6bc21] {\n margin: 0 8px !important;\n height: 20px;\n opacity: 0.3;\n transition: opacity 0.3s ease;\n}\n.action-divider[data-v-c7b6bc21]:hover {\n opacity: 0.6;\n}\n\n/* ================= 下拉菜单优化 ================= */\n[data-v-c7b6bc21] .n-dropdown-option {\n transition: all 0.2s ease;\n}\n[data-v-c7b6bc21] .n-dropdown-option:hover {\n transform: translateX(4px);\n}\n[data-v-c7b6bc21] .n-dropdown-option .n-icon {\n transition: transform 0.2s ease;\n}\n[data-v-c7b6bc21] .n-dropdown-option:hover .n-icon {\n transform: scale(1.15);\n}\n\n/* ================= 加载动画 ================= */\n@keyframes button-loading-c7b6bc21 {\n0% {\n opacity: 0.6;\n}\n50% {\n opacity: 1;\n}\n100% {\n opacity: 0.6;\n}\n}\n[data-v-c7b6bc21] .n-button--loading {\n animation: button-loading-c7b6bc21 1.5s ease-in-out infinite;\n}\n\n/* ================= Tooltip 样式 ================= */\n[data-v-c7b6bc21] .n-tooltip .n-tooltip__content {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 4px;\n backdrop-filter: blur(8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* ================= 暗黑模式适配 ================= */\nhtml.dark .c-action-bar[data-v-c7b6bc21] {\n border-color: rgba(255, 255, 255, 0.09);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\nhtml.dark .actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);\n}\nhtml.dark .action-divider[data-v-c7b6bc21] {\n opacity: 0.15;\n}\nhtml.dark .action-divider[data-v-c7b6bc21]:hover {\n opacity: 0.4;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_ActionBar-nnfbZCea.css","names":[],"sources":["../src/components/C_ActionBar/index.vue?vue&type=style&index=0&scoped=c7b6bc21&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 通用操作按钮组件样式 */\n/* ================= 主容器 ================= */\n.c-action-bar[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n margin-bottom: 16px;\n background: var(--c-bg-card);\n border-radius: var(--c-radius);\n border: 1px solid var(--c-border);\n transition: all 0.3s ease;\n}\n.c-action-bar.is-align-left[data-v-c7b6bc21] {\n justify-content: flex-start;\n}\n.c-action-bar.is-align-center[data-v-c7b6bc21] {\n justify-content: center;\n}\n.c-action-bar.is-align-right[data-v-c7b6bc21] {\n justify-content: flex-end;\n}\n.c-action-bar.is-align-space-between[data-v-c7b6bc21] {\n justify-content: space-between;\n}\n.c-action-bar.is-align-space-around[data-v-c7b6bc21] {\n justify-content: space-around;\n}\n.c-action-bar.is-compact[data-v-c7b6bc21] {\n padding: 12px;\n margin-bottom: 12px;\n}\n.c-action-bar.is-inline[data-v-c7b6bc21] {\n padding: 0;\n margin-bottom: 0;\n background: transparent;\n border: none;\n border-radius: 0;\n box-shadow: none;\n}\n.c-action-bar.is-wrap[data-v-c7b6bc21] {\n flex-wrap: wrap;\n gap: 12px;\n}\n@media (max-width: 768px) {\n.c-action-bar[data-v-c7b6bc21] {\n flex-direction: column;\n gap: 12px;\n}\n.c-action-bar .actions-group[data-v-c7b6bc21] {\n width: 100%;\n justify-content: center;\n}\n}\n\n/* ================= 按钮组 ================= */\n.actions-group[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n gap: 12px;\n flex-wrap: nowrap;\n}\n.actions-group.actions-left[data-v-c7b6bc21] {\n justify-content: flex-start;\n}\n.actions-group.actions-right[data-v-c7b6bc21] {\n justify-content: flex-end;\n}\n.c-action-bar.has-only-left.is-align-center .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-center .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: center;\n}\n.c-action-bar.has-only-left.is-align-space-between .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-between .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: space-between;\n}\n.c-action-bar.has-only-left.is-align-space-around .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-around .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: space-around;\n}\n.c-action-bar.has-only-left.is-align-right .actions-group.actions-left[data-v-c7b6bc21] {\n width: 100%;\n justify-content: flex-end;\n}\n.c-action-bar.has-only-right.is-align-left .actions-group.actions-right[data-v-c7b6bc21] {\n width: 100%;\n justify-content: flex-start;\n}\n.actions-group[data-v-c7b6bc21] .n-button {\n transition: all 0.3s ease;\n font-weight: 500;\n}\n.actions-group[data-v-c7b6bc21] .n-button .n-icon {\n transition: transform 0.3s ease;\n}\n.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) .n-icon {\n transform: scale(1.1);\n}\n.actions-group[data-v-c7b6bc21] .n-button:active:not(:disabled) {\n transform: translateY(0);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.actions-group[data-v-c7b6bc21] .n-button:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.actions-group[data-v-c7b6bc21] .n-button.n-button--loading {\n pointer-events: none;\n}\n.actions-group[data-v-c7b6bc21] .n-button--primary-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--info-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(42, 148, 125, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--success-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(99, 226, 183, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--warning-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(240, 138, 0, 0.3);\n}\n.actions-group[data-v-c7b6bc21] .n-button--error-type:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(208, 48, 80, 0.3);\n}\n\n/* ================= 中间插槽区域 ================= */\n.actions-center[data-v-c7b6bc21] {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 0 24px;\n min-width: 0;\n}\n\n/* ================= 分隔线 ================= */\n.action-divider[data-v-c7b6bc21] {\n margin: 0 8px !important;\n height: 20px;\n opacity: 0.3;\n transition: opacity 0.3s ease;\n}\n.action-divider[data-v-c7b6bc21]:hover {\n opacity: 0.6;\n}\n\n/* ================= 下拉菜单优化 ================= */\n[data-v-c7b6bc21] .n-dropdown-option {\n transition: all 0.2s ease;\n}\n[data-v-c7b6bc21] .n-dropdown-option:hover {\n transform: translateX(4px);\n}\n[data-v-c7b6bc21] .n-dropdown-option .n-icon {\n transition: transform 0.2s ease;\n}\n[data-v-c7b6bc21] .n-dropdown-option:hover .n-icon {\n transform: scale(1.15);\n}\n\n/* ================= 加载动画 ================= */\n@keyframes button-loading-c7b6bc21 {\n0% {\n opacity: 0.6;\n}\n50% {\n opacity: 1;\n}\n100% {\n opacity: 0.6;\n}\n}\n[data-v-c7b6bc21] .n-button--loading {\n animation: button-loading-c7b6bc21 1.5s ease-in-out infinite;\n}\n\n/* ================= Tooltip 样式 ================= */\n[data-v-c7b6bc21] .n-tooltip .n-tooltip__content {\n font-size: 12px;\n padding: 6px 10px;\n border-radius: 4px;\n backdrop-filter: blur(8px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n}\n\n/* ================= 暗黑模式适配 ================= */\nhtml.dark .c-action-bar[data-v-c7b6bc21] {\n border-color: rgba(255, 255, 255, 0.09);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n}\nhtml.dark .actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {\n box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);\n}\nhtml.dark .action-divider[data-v-c7b6bc21] {\n opacity: 0.15;\n}\nhtml.dark .action-divider[data-v-c7b6bc21]:hover {\n opacity: 0.4;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_ActionBar.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* unplugin-vue-components disabled *//* 通用操作按钮组件样式 */
|
|
2
2
|
/* ================= 主容器 ================= */
|
|
3
|
-
.c-action-bar[data-v-
|
|
3
|
+
.c-action-bar[data-v-c7b6bc21] {
|
|
4
4
|
display: flex;
|
|
5
5
|
align-items: center;
|
|
6
6
|
justify-content: space-between;
|
|
@@ -11,26 +11,26 @@
|
|
|
11
11
|
border: 1px solid var(--c-border);
|
|
12
12
|
transition: all 0.3s ease;
|
|
13
13
|
}
|
|
14
|
-
.c-action-bar.is-align-left[data-v-
|
|
14
|
+
.c-action-bar.is-align-left[data-v-c7b6bc21] {
|
|
15
15
|
justify-content: flex-start;
|
|
16
16
|
}
|
|
17
|
-
.c-action-bar.is-align-center[data-v-
|
|
17
|
+
.c-action-bar.is-align-center[data-v-c7b6bc21] {
|
|
18
18
|
justify-content: center;
|
|
19
19
|
}
|
|
20
|
-
.c-action-bar.is-align-right[data-v-
|
|
20
|
+
.c-action-bar.is-align-right[data-v-c7b6bc21] {
|
|
21
21
|
justify-content: flex-end;
|
|
22
22
|
}
|
|
23
|
-
.c-action-bar.is-align-space-between[data-v-
|
|
23
|
+
.c-action-bar.is-align-space-between[data-v-c7b6bc21] {
|
|
24
24
|
justify-content: space-between;
|
|
25
25
|
}
|
|
26
|
-
.c-action-bar.is-align-space-around[data-v-
|
|
26
|
+
.c-action-bar.is-align-space-around[data-v-c7b6bc21] {
|
|
27
27
|
justify-content: space-around;
|
|
28
28
|
}
|
|
29
|
-
.c-action-bar.is-compact[data-v-
|
|
29
|
+
.c-action-bar.is-compact[data-v-c7b6bc21] {
|
|
30
30
|
padding: 12px;
|
|
31
31
|
margin-bottom: 12px;
|
|
32
32
|
}
|
|
33
|
-
.c-action-bar.is-inline[data-v-
|
|
33
|
+
.c-action-bar.is-inline[data-v-c7b6bc21] {
|
|
34
34
|
padding: 0;
|
|
35
35
|
margin-bottom: 0;
|
|
36
36
|
background: transparent;
|
|
@@ -38,97 +38,97 @@
|
|
|
38
38
|
border-radius: 0;
|
|
39
39
|
box-shadow: none;
|
|
40
40
|
}
|
|
41
|
-
.c-action-bar.is-wrap[data-v-
|
|
41
|
+
.c-action-bar.is-wrap[data-v-c7b6bc21] {
|
|
42
42
|
flex-wrap: wrap;
|
|
43
43
|
gap: 12px;
|
|
44
44
|
}
|
|
45
45
|
@media (max-width: 768px) {
|
|
46
|
-
.c-action-bar[data-v-
|
|
46
|
+
.c-action-bar[data-v-c7b6bc21] {
|
|
47
47
|
flex-direction: column;
|
|
48
48
|
gap: 12px;
|
|
49
49
|
}
|
|
50
|
-
.c-action-bar .actions-group[data-v-
|
|
50
|
+
.c-action-bar .actions-group[data-v-c7b6bc21] {
|
|
51
51
|
width: 100%;
|
|
52
52
|
justify-content: center;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
/* ================= 按钮组 ================= */
|
|
57
|
-
.actions-group[data-v-
|
|
57
|
+
.actions-group[data-v-c7b6bc21] {
|
|
58
58
|
display: flex;
|
|
59
59
|
align-items: center;
|
|
60
60
|
gap: 12px;
|
|
61
61
|
flex-wrap: nowrap;
|
|
62
62
|
}
|
|
63
|
-
.actions-group.actions-left[data-v-
|
|
63
|
+
.actions-group.actions-left[data-v-c7b6bc21] {
|
|
64
64
|
justify-content: flex-start;
|
|
65
65
|
}
|
|
66
|
-
.actions-group.actions-right[data-v-
|
|
66
|
+
.actions-group.actions-right[data-v-c7b6bc21] {
|
|
67
67
|
justify-content: flex-end;
|
|
68
68
|
}
|
|
69
|
-
.c-action-bar.has-only-left.is-align-center .actions-group.actions-left[data-v-
|
|
69
|
+
.c-action-bar.has-only-left.is-align-center .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-center .actions-group.actions-right[data-v-c7b6bc21] {
|
|
70
70
|
width: 100%;
|
|
71
71
|
justify-content: center;
|
|
72
72
|
}
|
|
73
|
-
.c-action-bar.has-only-left.is-align-space-between .actions-group.actions-left[data-v-
|
|
73
|
+
.c-action-bar.has-only-left.is-align-space-between .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-between .actions-group.actions-right[data-v-c7b6bc21] {
|
|
74
74
|
width: 100%;
|
|
75
75
|
justify-content: space-between;
|
|
76
76
|
}
|
|
77
|
-
.c-action-bar.has-only-left.is-align-space-around .actions-group.actions-left[data-v-
|
|
77
|
+
.c-action-bar.has-only-left.is-align-space-around .actions-group.actions-left[data-v-c7b6bc21], .c-action-bar.has-only-right.is-align-space-around .actions-group.actions-right[data-v-c7b6bc21] {
|
|
78
78
|
width: 100%;
|
|
79
79
|
justify-content: space-around;
|
|
80
80
|
}
|
|
81
|
-
.c-action-bar.has-only-left.is-align-right .actions-group.actions-left[data-v-
|
|
81
|
+
.c-action-bar.has-only-left.is-align-right .actions-group.actions-left[data-v-c7b6bc21] {
|
|
82
82
|
width: 100%;
|
|
83
83
|
justify-content: flex-end;
|
|
84
84
|
}
|
|
85
|
-
.c-action-bar.has-only-right.is-align-left .actions-group.actions-right[data-v-
|
|
85
|
+
.c-action-bar.has-only-right.is-align-left .actions-group.actions-right[data-v-c7b6bc21] {
|
|
86
86
|
width: 100%;
|
|
87
87
|
justify-content: flex-start;
|
|
88
88
|
}
|
|
89
|
-
.actions-group[data-v-
|
|
89
|
+
.actions-group[data-v-c7b6bc21] .n-button {
|
|
90
90
|
transition: all 0.3s ease;
|
|
91
91
|
font-weight: 500;
|
|
92
92
|
}
|
|
93
|
-
.actions-group[data-v-
|
|
93
|
+
.actions-group[data-v-c7b6bc21] .n-button .n-icon {
|
|
94
94
|
transition: transform 0.3s ease;
|
|
95
95
|
}
|
|
96
|
-
.actions-group[data-v-
|
|
96
|
+
.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {
|
|
97
97
|
transform: translateY(-2px);
|
|
98
98
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
99
99
|
}
|
|
100
|
-
.actions-group[data-v-
|
|
100
|
+
.actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) .n-icon {
|
|
101
101
|
transform: scale(1.1);
|
|
102
102
|
}
|
|
103
|
-
.actions-group[data-v-
|
|
103
|
+
.actions-group[data-v-c7b6bc21] .n-button:active:not(:disabled) {
|
|
104
104
|
transform: translateY(0);
|
|
105
105
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
106
106
|
}
|
|
107
|
-
.actions-group[data-v-
|
|
107
|
+
.actions-group[data-v-c7b6bc21] .n-button:disabled {
|
|
108
108
|
cursor: not-allowed;
|
|
109
109
|
opacity: 0.5;
|
|
110
110
|
}
|
|
111
|
-
.actions-group[data-v-
|
|
111
|
+
.actions-group[data-v-c7b6bc21] .n-button.n-button--loading {
|
|
112
112
|
pointer-events: none;
|
|
113
113
|
}
|
|
114
|
-
.actions-group[data-v-
|
|
114
|
+
.actions-group[data-v-c7b6bc21] .n-button--primary-type:hover:not(:disabled) {
|
|
115
115
|
box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
|
|
116
116
|
}
|
|
117
|
-
.actions-group[data-v-
|
|
117
|
+
.actions-group[data-v-c7b6bc21] .n-button--info-type:hover:not(:disabled) {
|
|
118
118
|
box-shadow: 0 4px 12px rgba(42, 148, 125, 0.3);
|
|
119
119
|
}
|
|
120
|
-
.actions-group[data-v-
|
|
120
|
+
.actions-group[data-v-c7b6bc21] .n-button--success-type:hover:not(:disabled) {
|
|
121
121
|
box-shadow: 0 4px 12px rgba(99, 226, 183, 0.3);
|
|
122
122
|
}
|
|
123
|
-
.actions-group[data-v-
|
|
123
|
+
.actions-group[data-v-c7b6bc21] .n-button--warning-type:hover:not(:disabled) {
|
|
124
124
|
box-shadow: 0 4px 12px rgba(240, 138, 0, 0.3);
|
|
125
125
|
}
|
|
126
|
-
.actions-group[data-v-
|
|
126
|
+
.actions-group[data-v-c7b6bc21] .n-button--error-type:hover:not(:disabled) {
|
|
127
127
|
box-shadow: 0 4px 12px rgba(208, 48, 80, 0.3);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
130
|
/* ================= 中间插槽区域 ================= */
|
|
131
|
-
.actions-center[data-v-
|
|
131
|
+
.actions-center[data-v-c7b6bc21] {
|
|
132
132
|
display: flex;
|
|
133
133
|
align-items: center;
|
|
134
134
|
justify-content: center;
|
|
@@ -138,32 +138,32 @@
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
/* ================= 分隔线 ================= */
|
|
141
|
-
.action-divider[data-v-
|
|
141
|
+
.action-divider[data-v-c7b6bc21] {
|
|
142
142
|
margin: 0 8px !important;
|
|
143
143
|
height: 20px;
|
|
144
144
|
opacity: 0.3;
|
|
145
145
|
transition: opacity 0.3s ease;
|
|
146
146
|
}
|
|
147
|
-
.action-divider[data-v-
|
|
147
|
+
.action-divider[data-v-c7b6bc21]:hover {
|
|
148
148
|
opacity: 0.6;
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
/* ================= 下拉菜单优化 ================= */
|
|
152
|
-
[data-v-
|
|
152
|
+
[data-v-c7b6bc21] .n-dropdown-option {
|
|
153
153
|
transition: all 0.2s ease;
|
|
154
154
|
}
|
|
155
|
-
[data-v-
|
|
155
|
+
[data-v-c7b6bc21] .n-dropdown-option:hover {
|
|
156
156
|
transform: translateX(4px);
|
|
157
157
|
}
|
|
158
|
-
[data-v-
|
|
158
|
+
[data-v-c7b6bc21] .n-dropdown-option .n-icon {
|
|
159
159
|
transition: transform 0.2s ease;
|
|
160
160
|
}
|
|
161
|
-
[data-v-
|
|
161
|
+
[data-v-c7b6bc21] .n-dropdown-option:hover .n-icon {
|
|
162
162
|
transform: scale(1.15);
|
|
163
163
|
}
|
|
164
164
|
|
|
165
165
|
/* ================= 加载动画 ================= */
|
|
166
|
-
@keyframes button-loading-
|
|
166
|
+
@keyframes button-loading-c7b6bc21 {
|
|
167
167
|
0% {
|
|
168
168
|
opacity: 0.6;
|
|
169
169
|
}
|
|
@@ -174,12 +174,12 @@
|
|
|
174
174
|
opacity: 0.6;
|
|
175
175
|
}
|
|
176
176
|
}
|
|
177
|
-
[data-v-
|
|
178
|
-
animation: button-loading-
|
|
177
|
+
[data-v-c7b6bc21] .n-button--loading {
|
|
178
|
+
animation: button-loading-c7b6bc21 1.5s ease-in-out infinite;
|
|
179
179
|
}
|
|
180
180
|
|
|
181
181
|
/* ================= Tooltip 样式 ================= */
|
|
182
|
-
[data-v-
|
|
182
|
+
[data-v-c7b6bc21] .n-tooltip .n-tooltip__content {
|
|
183
183
|
font-size: 12px;
|
|
184
184
|
padding: 6px 10px;
|
|
185
185
|
border-radius: 4px;
|
|
@@ -188,18 +188,18 @@
|
|
|
188
188
|
}
|
|
189
189
|
|
|
190
190
|
/* ================= 暗黑模式适配 ================= */
|
|
191
|
-
html.dark .c-action-bar[data-v-
|
|
191
|
+
html.dark .c-action-bar[data-v-c7b6bc21] {
|
|
192
192
|
border-color: rgba(255, 255, 255, 0.09);
|
|
193
193
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
|
194
194
|
}
|
|
195
|
-
html.dark .actions-group[data-v-
|
|
195
|
+
html.dark .actions-group[data-v-c7b6bc21] .n-button:hover:not(:disabled) {
|
|
196
196
|
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
|
|
197
197
|
}
|
|
198
|
-
html.dark .action-divider[data-v-
|
|
198
|
+
html.dark .action-divider[data-v-c7b6bc21] {
|
|
199
199
|
opacity: 0.15;
|
|
200
200
|
}
|
|
201
|
-
html.dark .action-divider[data-v-
|
|
201
|
+
html.dark .action-divider[data-v-c7b6bc21]:hover {
|
|
202
202
|
opacity: 0.4;
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
/*# sourceMappingURL=C_ActionBar-
|
|
205
|
+
/*# sourceMappingURL=C_ActionBar-jZPsiXtT.css.map*/
|
package/dist/C_ActionBar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_ActionBar.js","names":["$slots"],"sources":["../src/components/C_ActionBar/index.vue","../src/components/C_ActionBar/index.vue","../src/components/C_ActionBar/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-14\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-action-bar\"\n :class=\"{\n 'is-compact': finalConfig.compact,\n 'is-inline': finalConfig.inline,\n 'is-wrap': finalConfig.wrap,\n [`is-align-${finalConfig.align}`]: true,\n 'has-only-left':\n leftButtonList.length > 0 &&\n rightButtonList.length === 0 &&\n !$slots.center,\n 'has-only-right':\n rightButtonList.length > 0 &&\n leftButtonList.length === 0 &&\n !$slots.center,\n }\"\n >\n <div\n v-if=\"leftButtonList.length > 0\"\n class=\"actions-group actions-left\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in leftButtonList\"\n :key=\"action.key || `left-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < leftButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n\n <div v-if=\"$slots.center\" class=\"actions-center\">\n <slot name=\"center\" />\n </div>\n\n <div\n v-if=\"rightButtonList.length > 0\"\n class=\"actions-group actions-right\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in rightButtonList\"\n :key=\"action.key || `right-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < rightButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n ActionItem,\n ActionDropdownItem,\n ActionBarConfig,\n TableActionsProps,\n TableActionsEmits,\n} from \"./types\";\n\ndefineOptions({ name: \"C_ActionBar\" });\n\nconst props = withDefaults(defineProps<TableActionsProps>(), {\n actions: () => [],\n leftActions: () => [],\n rightActions: () => [],\n config: () => ({}),\n});\n\nconst emit = defineEmits<TableActionsEmits>();\n\nconst defaultConfig: Required<ActionBarConfig> = {\n align: \"left\",\n size: \"medium\",\n gap: 8,\n wrap: false,\n showDivider: false,\n dividerType: \"vertical\",\n compact: false,\n inline: true,\n};\n\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\n ...defaultConfig,\n ...props.config,\n}));\n\nconst leftButtonList = computed<ActionItem[]>(() => {\n if (props.leftActions && props.leftActions.length > 0) {\n return props.leftActions.filter((action) => shouldShowAction(action));\n }\n if (props.actions.length > 0) {\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\n const hasRightGroup = props.actions.some(\n (action) => action.group === \"right\",\n );\n if (!hasRightActions && !hasRightGroup) {\n return props.actions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"left\" && shouldShowAction(action),\n );\n }\n return [];\n});\n\nconst rightButtonList = computed<ActionItem[]>(() => {\n if (props.rightActions && props.rightActions.length > 0) {\n return props.rightActions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"right\" && shouldShowAction(action),\n );\n});\n\nconst shouldShowAction = (action: ActionItem): boolean => {\n if (action.show === undefined) return true;\n return unref(action.show);\n};\n\nconst isActionDisabled = (action: ActionItem): boolean => {\n return unref(action.disabled) || false;\n};\n\nconst isActionLoading = (action: ActionItem): boolean => {\n return unref(action.loading) || false;\n};\n\nconst handleActionClick = async (action: ActionItem) => {\n if (action.dropdown && action.dropdown.length > 0) return;\n emit(\"action-click\", action);\n if (action.onClick) {\n await action.onClick();\n }\n};\n\nconst handleDropdownClick = async (\n item: ActionDropdownItem,\n action: ActionItem,\n) => {\n emit(\"dropdown-click\", item, action);\n if (item.onClick) {\n await item.onClick();\n }\n};\n\nconst ActionButton = defineComponent({\n name: \"ActionButton\",\n props: {\n action: {\n type: Object as PropType<ActionItem>,\n required: true,\n },\n },\n emits: [\"click\", \"dropdown-select\"],\n setup(props, { emit }) {\n const action = computed(() => props.action);\n\n const dropdownOptions = computed(() => {\n if (!action.value.dropdown) return [];\n return action.value.dropdown\n .filter((item) => {\n if (item.show === undefined) return true;\n return unref(item.show);\n })\n .map((item) => ({\n key: item.key,\n label: item.label,\n icon: item.icon\n ? () => h(C_Icon, { name: item.icon, size: 14 })\n : undefined,\n disabled: unref(item.disabled),\n }));\n });\n\n const handleDropdownSelect = (key: string) => {\n const item = action.value.dropdown?.find((d) => d.key === key);\n if (item) {\n emit(\"dropdown-select\", item);\n }\n };\n\n const createButtonVNode = (extraProps?: Record<string, any>) => {\n const button = h(\n NButton,\n {\n type: action.value.type || \"default\",\n size: action.value.size || finalConfig.value.size,\n loading: isActionLoading(action.value),\n disabled: isActionDisabled(action.value),\n ...extraProps,\n ...action.value.buttonProps,\n },\n {\n default: () => action.value.label,\n icon: action.value.icon\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\n : undefined,\n },\n );\n\n return action.value.directives && action.value.directives.length > 0\n ? withDirectives(button, action.value.directives as any)\n : button;\n };\n\n const renderButton = () => {\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\n if (action.value.tooltip) {\n return h(\n NTooltip,\n { placement: \"top\" },\n {\n trigger: () => vnode,\n default: () => action.value.tooltip,\n },\n );\n }\n return vnode;\n };\n\n const renderDropdownButton = () => {\n const vnode = createButtonVNode();\n return h(\n NDropdown,\n {\n options: dropdownOptions.value,\n onSelect: handleDropdownSelect,\n },\n {\n default: () => vnode,\n },\n );\n };\n\n return () => {\n if (action.value.dropdown && action.value.dropdown.length > 0) {\n return renderDropdownButton();\n }\n return renderButton();\n };\n },\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-14\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-action-bar\"\n :class=\"{\n 'is-compact': finalConfig.compact,\n 'is-inline': finalConfig.inline,\n 'is-wrap': finalConfig.wrap,\n [`is-align-${finalConfig.align}`]: true,\n 'has-only-left':\n leftButtonList.length > 0 &&\n rightButtonList.length === 0 &&\n !$slots.center,\n 'has-only-right':\n rightButtonList.length > 0 &&\n leftButtonList.length === 0 &&\n !$slots.center,\n }\"\n >\n <div\n v-if=\"leftButtonList.length > 0\"\n class=\"actions-group actions-left\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in leftButtonList\"\n :key=\"action.key || `left-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < leftButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n\n <div v-if=\"$slots.center\" class=\"actions-center\">\n <slot name=\"center\" />\n </div>\n\n <div\n v-if=\"rightButtonList.length > 0\"\n class=\"actions-group actions-right\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in rightButtonList\"\n :key=\"action.key || `right-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < rightButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n ActionItem,\n ActionDropdownItem,\n ActionBarConfig,\n TableActionsProps,\n TableActionsEmits,\n} from \"./types\";\n\ndefineOptions({ name: \"C_ActionBar\" });\n\nconst props = withDefaults(defineProps<TableActionsProps>(), {\n actions: () => [],\n leftActions: () => [],\n rightActions: () => [],\n config: () => ({}),\n});\n\nconst emit = defineEmits<TableActionsEmits>();\n\nconst defaultConfig: Required<ActionBarConfig> = {\n align: \"left\",\n size: \"medium\",\n gap: 8,\n wrap: false,\n showDivider: false,\n dividerType: \"vertical\",\n compact: false,\n inline: true,\n};\n\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\n ...defaultConfig,\n ...props.config,\n}));\n\nconst leftButtonList = computed<ActionItem[]>(() => {\n if (props.leftActions && props.leftActions.length > 0) {\n return props.leftActions.filter((action) => shouldShowAction(action));\n }\n if (props.actions.length > 0) {\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\n const hasRightGroup = props.actions.some(\n (action) => action.group === \"right\",\n );\n if (!hasRightActions && !hasRightGroup) {\n return props.actions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"left\" && shouldShowAction(action),\n );\n }\n return [];\n});\n\nconst rightButtonList = computed<ActionItem[]>(() => {\n if (props.rightActions && props.rightActions.length > 0) {\n return props.rightActions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"right\" && shouldShowAction(action),\n );\n});\n\nconst shouldShowAction = (action: ActionItem): boolean => {\n if (action.show === undefined) return true;\n return unref(action.show);\n};\n\nconst isActionDisabled = (action: ActionItem): boolean => {\n return unref(action.disabled) || false;\n};\n\nconst isActionLoading = (action: ActionItem): boolean => {\n return unref(action.loading) || false;\n};\n\nconst handleActionClick = async (action: ActionItem) => {\n if (action.dropdown && action.dropdown.length > 0) return;\n emit(\"action-click\", action);\n if (action.onClick) {\n await action.onClick();\n }\n};\n\nconst handleDropdownClick = async (\n item: ActionDropdownItem,\n action: ActionItem,\n) => {\n emit(\"dropdown-click\", item, action);\n if (item.onClick) {\n await item.onClick();\n }\n};\n\nconst ActionButton = defineComponent({\n name: \"ActionButton\",\n props: {\n action: {\n type: Object as PropType<ActionItem>,\n required: true,\n },\n },\n emits: [\"click\", \"dropdown-select\"],\n setup(props, { emit }) {\n const action = computed(() => props.action);\n\n const dropdownOptions = computed(() => {\n if (!action.value.dropdown) return [];\n return action.value.dropdown\n .filter((item) => {\n if (item.show === undefined) return true;\n return unref(item.show);\n })\n .map((item) => ({\n key: item.key,\n label: item.label,\n icon: item.icon\n ? () => h(C_Icon, { name: item.icon, size: 14 })\n : undefined,\n disabled: unref(item.disabled),\n }));\n });\n\n const handleDropdownSelect = (key: string) => {\n const item = action.value.dropdown?.find((d) => d.key === key);\n if (item) {\n emit(\"dropdown-select\", item);\n }\n };\n\n const createButtonVNode = (extraProps?: Record<string, any>) => {\n const button = h(\n NButton,\n {\n type: action.value.type || \"default\",\n size: action.value.size || finalConfig.value.size,\n loading: isActionLoading(action.value),\n disabled: isActionDisabled(action.value),\n ...extraProps,\n ...action.value.buttonProps,\n },\n {\n default: () => action.value.label,\n icon: action.value.icon\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\n : undefined,\n },\n );\n\n return action.value.directives && action.value.directives.length > 0\n ? withDirectives(button, action.value.directives as any)\n : button;\n };\n\n const renderButton = () => {\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\n if (action.value.tooltip) {\n return h(\n NTooltip,\n { placement: \"top\" },\n {\n trigger: () => vnode,\n default: () => action.value.tooltip,\n },\n );\n }\n return vnode;\n };\n\n const renderDropdownButton = () => {\n const vnode = createButtonVNode();\n return h(\n NDropdown,\n {\n options: dropdownOptions.value,\n onSelect: handleDropdownSelect,\n },\n {\n default: () => vnode,\n },\n );\n };\n\n return () => {\n if (action.value.dropdown && action.value.dropdown.length > 0) {\n return renderDropdownButton();\n }\n return renderButton();\n };\n },\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-02-14\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\n-->\n<template>\n <div\n class=\"c-action-bar\"\n :class=\"{\n 'is-compact': finalConfig.compact,\n 'is-inline': finalConfig.inline,\n 'is-wrap': finalConfig.wrap,\n [`is-align-${finalConfig.align}`]: true,\n 'has-only-left':\n leftButtonList.length > 0 &&\n rightButtonList.length === 0 &&\n !$slots.center,\n 'has-only-right':\n rightButtonList.length > 0 &&\n leftButtonList.length === 0 &&\n !$slots.center,\n }\"\n >\n <div\n v-if=\"leftButtonList.length > 0\"\n class=\"actions-group actions-left\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in leftButtonList\"\n :key=\"action.key || `left-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < leftButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n\n <div v-if=\"$slots.center\" class=\"actions-center\">\n <slot name=\"center\" />\n </div>\n\n <div\n v-if=\"rightButtonList.length > 0\"\n class=\"actions-group actions-right\"\n :style=\"{ gap: `${finalConfig.gap}px` }\"\n >\n <template\n v-for=\"(action, index) in rightButtonList\"\n :key=\"action.key || `right-${index}`\"\n >\n <ActionButton\n :action=\"action\"\n @click=\"handleActionClick(action)\"\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\n />\n <NDivider\n v-if=\"\n finalConfig.showDivider &&\n index < rightButtonList.length - 1 &&\n finalConfig.dividerType === 'vertical'\n \"\n vertical\n class=\"action-divider\"\n />\n </template>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport type {\n ActionItem,\n ActionDropdownItem,\n ActionBarConfig,\n TableActionsProps,\n TableActionsEmits,\n} from \"./types\";\n\ndefineOptions({ name: \"C_ActionBar\" });\n\nconst props = withDefaults(defineProps<TableActionsProps>(), {\n actions: () => [],\n leftActions: () => [],\n rightActions: () => [],\n config: () => ({}),\n});\n\nconst emit = defineEmits<TableActionsEmits>();\n\nconst defaultConfig: Required<ActionBarConfig> = {\n align: \"left\",\n size: \"medium\",\n gap: 8,\n wrap: false,\n showDivider: false,\n dividerType: \"vertical\",\n compact: false,\n inline: true,\n};\n\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\n ...defaultConfig,\n ...props.config,\n}));\n\nconst leftButtonList = computed<ActionItem[]>(() => {\n if (props.leftActions && props.leftActions.length > 0) {\n return props.leftActions.filter((action) => shouldShowAction(action));\n }\n if (props.actions.length > 0) {\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\n const hasRightGroup = props.actions.some(\n (action) => action.group === \"right\",\n );\n if (!hasRightActions && !hasRightGroup) {\n return props.actions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"left\" && shouldShowAction(action),\n );\n }\n return [];\n});\n\nconst rightButtonList = computed<ActionItem[]>(() => {\n if (props.rightActions && props.rightActions.length > 0) {\n return props.rightActions.filter((action) => shouldShowAction(action));\n }\n return props.actions.filter(\n (action) => action.group === \"right\" && shouldShowAction(action),\n );\n});\n\nconst shouldShowAction = (action: ActionItem): boolean => {\n if (action.show === undefined) return true;\n return unref(action.show);\n};\n\nconst isActionDisabled = (action: ActionItem): boolean => {\n return unref(action.disabled) || false;\n};\n\nconst isActionLoading = (action: ActionItem): boolean => {\n return unref(action.loading) || false;\n};\n\nconst handleActionClick = async (action: ActionItem) => {\n if (action.dropdown && action.dropdown.length > 0) return;\n emit(\"action-click\", action);\n if (action.onClick) {\n await action.onClick();\n }\n};\n\nconst handleDropdownClick = async (\n item: ActionDropdownItem,\n action: ActionItem,\n) => {\n emit(\"dropdown-click\", item, action);\n if (item.onClick) {\n await item.onClick();\n }\n};\n\nconst ActionButton = defineComponent({\n name: \"ActionButton\",\n props: {\n action: {\n type: Object as PropType<ActionItem>,\n required: true,\n },\n },\n emits: [\"click\", \"dropdown-select\"],\n setup(props, { emit }) {\n const action = computed(() => props.action);\n\n const dropdownOptions = computed(() => {\n if (!action.value.dropdown) return [];\n return action.value.dropdown\n .filter((item) => {\n if (item.show === undefined) return true;\n return unref(item.show);\n })\n .map((item) => ({\n key: item.key,\n label: item.label,\n icon: item.icon\n ? () => h(C_Icon, { name: item.icon, size: 14 })\n : undefined,\n disabled: unref(item.disabled),\n }));\n });\n\n const handleDropdownSelect = (key: string) => {\n const item = action.value.dropdown?.find((d) => d.key === key);\n if (item) {\n emit(\"dropdown-select\", item);\n }\n };\n\n const createButtonVNode = (extraProps?: Record<string, any>) => {\n const button = h(\n NButton,\n {\n type: action.value.type || \"default\",\n size: action.value.size || finalConfig.value.size,\n loading: isActionLoading(action.value),\n disabled: isActionDisabled(action.value),\n ...extraProps,\n ...action.value.buttonProps,\n },\n {\n default: () => action.value.label,\n icon: action.value.icon\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\n : undefined,\n },\n );\n\n return action.value.directives && action.value.directives.length > 0\n ? withDirectives(button, action.value.directives as any)\n : button;\n };\n\n const renderButton = () => {\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\n if (action.value.tooltip) {\n return h(\n NTooltip,\n { placement: \"top\" },\n {\n trigger: () => vnode,\n default: () => action.value.tooltip,\n },\n );\n }\n return vnode;\n };\n\n const renderDropdownButton = () => {\n const vnode = createButtonVNode();\n return h(\n NDropdown,\n {\n options: dropdownOptions.value,\n onSelect: handleDropdownSelect,\n },\n {\n default: () => vnode,\n },\n );\n };\n\n return () => {\n if (action.value.dropdown && action.value.dropdown.length > 0) {\n return renderDropdownButton();\n }\n return renderButton();\n };\n },\n});\n</script>\n\n<style scoped lang=\"scss\">\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_ActionBar.js","names":["$slots"],"sources":["../src/components/C_ActionBar/index.vue","../src/components/C_ActionBar/index.vue","../src/components/C_ActionBar/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-14\r\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-action-bar\"\r\n :class=\"{\r\n 'is-compact': finalConfig.compact,\r\n 'is-inline': finalConfig.inline,\r\n 'is-wrap': finalConfig.wrap,\r\n [`is-align-${finalConfig.align}`]: true,\r\n 'has-only-left':\r\n leftButtonList.length > 0 &&\r\n rightButtonList.length === 0 &&\r\n !$slots.center,\r\n 'has-only-right':\r\n rightButtonList.length > 0 &&\r\n leftButtonList.length === 0 &&\r\n !$slots.center,\r\n }\"\r\n >\r\n <div\r\n v-if=\"leftButtonList.length > 0\"\r\n class=\"actions-group actions-left\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in leftButtonList\"\r\n :key=\"action.key || `left-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < leftButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n\r\n <div v-if=\"$slots.center\" class=\"actions-center\">\r\n <slot name=\"center\" />\r\n </div>\r\n\r\n <div\r\n v-if=\"rightButtonList.length > 0\"\r\n class=\"actions-group actions-right\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in rightButtonList\"\r\n :key=\"action.key || `right-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < rightButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\r\nimport type { PropType } from \"vue\";\r\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n ActionItem,\r\n ActionDropdownItem,\r\n ActionBarConfig,\r\n TableActionsProps,\r\n TableActionsEmits,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_ActionBar\" });\r\n\r\nconst props = withDefaults(defineProps<TableActionsProps>(), {\r\n actions: () => [],\r\n leftActions: () => [],\r\n rightActions: () => [],\r\n config: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<TableActionsEmits>();\r\n\r\nconst defaultConfig: Required<ActionBarConfig> = {\r\n align: \"left\",\r\n size: \"medium\",\r\n gap: 8,\r\n wrap: false,\r\n showDivider: false,\r\n dividerType: \"vertical\",\r\n compact: false,\r\n inline: true,\r\n};\r\n\r\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\r\n ...defaultConfig,\r\n ...props.config,\r\n}));\r\n\r\nconst leftButtonList = computed<ActionItem[]>(() => {\r\n if (props.leftActions && props.leftActions.length > 0) {\r\n return props.leftActions.filter((action) => shouldShowAction(action));\r\n }\r\n if (props.actions.length > 0) {\r\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\r\n const hasRightGroup = props.actions.some(\r\n (action) => action.group === \"right\",\r\n );\r\n if (!hasRightActions && !hasRightGroup) {\r\n return props.actions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"left\" && shouldShowAction(action),\r\n );\r\n }\r\n return [];\r\n});\r\n\r\nconst rightButtonList = computed<ActionItem[]>(() => {\r\n if (props.rightActions && props.rightActions.length > 0) {\r\n return props.rightActions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"right\" && shouldShowAction(action),\r\n );\r\n});\r\n\r\nconst shouldShowAction = (action: ActionItem): boolean => {\r\n if (action.show === undefined) return true;\r\n return unref(action.show);\r\n};\r\n\r\nconst isActionDisabled = (action: ActionItem): boolean => {\r\n return unref(action.disabled) || false;\r\n};\r\n\r\nconst isActionLoading = (action: ActionItem): boolean => {\r\n return unref(action.loading) || false;\r\n};\r\n\r\nconst handleActionClick = async (action: ActionItem) => {\r\n if (action.dropdown && action.dropdown.length > 0) return;\r\n emit(\"action-click\", action);\r\n if (action.onClick) {\r\n await action.onClick();\r\n }\r\n};\r\n\r\nconst handleDropdownClick = async (\r\n item: ActionDropdownItem,\r\n action: ActionItem,\r\n) => {\r\n emit(\"dropdown-click\", item, action);\r\n if (item.onClick) {\r\n await item.onClick();\r\n }\r\n};\r\n\r\nconst ActionButton = defineComponent({\r\n name: \"ActionButton\",\r\n props: {\r\n action: {\r\n type: Object as PropType<ActionItem>,\r\n required: true,\r\n },\r\n },\r\n emits: [\"click\", \"dropdown-select\"],\r\n setup(props, { emit }) {\r\n const action = computed(() => props.action);\r\n\r\n const dropdownOptions = computed(() => {\r\n if (!action.value.dropdown) return [];\r\n return action.value.dropdown\r\n .filter((item) => {\r\n if (item.show === undefined) return true;\r\n return unref(item.show);\r\n })\r\n .map((item) => ({\r\n key: item.key,\r\n label: item.label,\r\n icon: item.icon\r\n ? () => h(C_Icon, { name: item.icon, size: 14 })\r\n : undefined,\r\n disabled: unref(item.disabled),\r\n }));\r\n });\r\n\r\n const handleDropdownSelect = (key: string) => {\r\n const item = action.value.dropdown?.find((d) => d.key === key);\r\n if (item) {\r\n emit(\"dropdown-select\", item);\r\n }\r\n };\r\n\r\n const createButtonVNode = (extraProps?: Record<string, any>) => {\r\n const button = h(\r\n NButton,\r\n {\r\n type: action.value.type || \"default\",\r\n size: action.value.size || finalConfig.value.size,\r\n loading: isActionLoading(action.value),\r\n disabled: isActionDisabled(action.value),\r\n ...extraProps,\r\n ...action.value.buttonProps,\r\n },\r\n {\r\n default: () => action.value.label,\r\n icon: action.value.icon\r\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\r\n : undefined,\r\n },\r\n );\r\n\r\n return action.value.directives && action.value.directives.length > 0\r\n ? withDirectives(button, action.value.directives as any)\r\n : button;\r\n };\r\n\r\n const renderButton = () => {\r\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\r\n if (action.value.tooltip) {\r\n return h(\r\n NTooltip,\r\n { placement: \"top\" },\r\n {\r\n trigger: () => vnode,\r\n default: () => action.value.tooltip,\r\n },\r\n );\r\n }\r\n return vnode;\r\n };\r\n\r\n const renderDropdownButton = () => {\r\n const vnode = createButtonVNode();\r\n return h(\r\n NDropdown,\r\n {\r\n options: dropdownOptions.value,\r\n onSelect: handleDropdownSelect,\r\n },\r\n {\r\n default: () => vnode,\r\n },\r\n );\r\n };\r\n\r\n return () => {\r\n if (action.value.dropdown && action.value.dropdown.length > 0) {\r\n return renderDropdownButton();\r\n }\r\n return renderButton();\r\n };\r\n },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-14\r\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-action-bar\"\r\n :class=\"{\r\n 'is-compact': finalConfig.compact,\r\n 'is-inline': finalConfig.inline,\r\n 'is-wrap': finalConfig.wrap,\r\n [`is-align-${finalConfig.align}`]: true,\r\n 'has-only-left':\r\n leftButtonList.length > 0 &&\r\n rightButtonList.length === 0 &&\r\n !$slots.center,\r\n 'has-only-right':\r\n rightButtonList.length > 0 &&\r\n leftButtonList.length === 0 &&\r\n !$slots.center,\r\n }\"\r\n >\r\n <div\r\n v-if=\"leftButtonList.length > 0\"\r\n class=\"actions-group actions-left\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in leftButtonList\"\r\n :key=\"action.key || `left-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < leftButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n\r\n <div v-if=\"$slots.center\" class=\"actions-center\">\r\n <slot name=\"center\" />\r\n </div>\r\n\r\n <div\r\n v-if=\"rightButtonList.length > 0\"\r\n class=\"actions-group actions-right\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in rightButtonList\"\r\n :key=\"action.key || `right-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < rightButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\r\nimport type { PropType } from \"vue\";\r\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n ActionItem,\r\n ActionDropdownItem,\r\n ActionBarConfig,\r\n TableActionsProps,\r\n TableActionsEmits,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_ActionBar\" });\r\n\r\nconst props = withDefaults(defineProps<TableActionsProps>(), {\r\n actions: () => [],\r\n leftActions: () => [],\r\n rightActions: () => [],\r\n config: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<TableActionsEmits>();\r\n\r\nconst defaultConfig: Required<ActionBarConfig> = {\r\n align: \"left\",\r\n size: \"medium\",\r\n gap: 8,\r\n wrap: false,\r\n showDivider: false,\r\n dividerType: \"vertical\",\r\n compact: false,\r\n inline: true,\r\n};\r\n\r\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\r\n ...defaultConfig,\r\n ...props.config,\r\n}));\r\n\r\nconst leftButtonList = computed<ActionItem[]>(() => {\r\n if (props.leftActions && props.leftActions.length > 0) {\r\n return props.leftActions.filter((action) => shouldShowAction(action));\r\n }\r\n if (props.actions.length > 0) {\r\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\r\n const hasRightGroup = props.actions.some(\r\n (action) => action.group === \"right\",\r\n );\r\n if (!hasRightActions && !hasRightGroup) {\r\n return props.actions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"left\" && shouldShowAction(action),\r\n );\r\n }\r\n return [];\r\n});\r\n\r\nconst rightButtonList = computed<ActionItem[]>(() => {\r\n if (props.rightActions && props.rightActions.length > 0) {\r\n return props.rightActions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"right\" && shouldShowAction(action),\r\n );\r\n});\r\n\r\nconst shouldShowAction = (action: ActionItem): boolean => {\r\n if (action.show === undefined) return true;\r\n return unref(action.show);\r\n};\r\n\r\nconst isActionDisabled = (action: ActionItem): boolean => {\r\n return unref(action.disabled) || false;\r\n};\r\n\r\nconst isActionLoading = (action: ActionItem): boolean => {\r\n return unref(action.loading) || false;\r\n};\r\n\r\nconst handleActionClick = async (action: ActionItem) => {\r\n if (action.dropdown && action.dropdown.length > 0) return;\r\n emit(\"action-click\", action);\r\n if (action.onClick) {\r\n await action.onClick();\r\n }\r\n};\r\n\r\nconst handleDropdownClick = async (\r\n item: ActionDropdownItem,\r\n action: ActionItem,\r\n) => {\r\n emit(\"dropdown-click\", item, action);\r\n if (item.onClick) {\r\n await item.onClick();\r\n }\r\n};\r\n\r\nconst ActionButton = defineComponent({\r\n name: \"ActionButton\",\r\n props: {\r\n action: {\r\n type: Object as PropType<ActionItem>,\r\n required: true,\r\n },\r\n },\r\n emits: [\"click\", \"dropdown-select\"],\r\n setup(props, { emit }) {\r\n const action = computed(() => props.action);\r\n\r\n const dropdownOptions = computed(() => {\r\n if (!action.value.dropdown) return [];\r\n return action.value.dropdown\r\n .filter((item) => {\r\n if (item.show === undefined) return true;\r\n return unref(item.show);\r\n })\r\n .map((item) => ({\r\n key: item.key,\r\n label: item.label,\r\n icon: item.icon\r\n ? () => h(C_Icon, { name: item.icon, size: 14 })\r\n : undefined,\r\n disabled: unref(item.disabled),\r\n }));\r\n });\r\n\r\n const handleDropdownSelect = (key: string) => {\r\n const item = action.value.dropdown?.find((d) => d.key === key);\r\n if (item) {\r\n emit(\"dropdown-select\", item);\r\n }\r\n };\r\n\r\n const createButtonVNode = (extraProps?: Record<string, any>) => {\r\n const button = h(\r\n NButton,\r\n {\r\n type: action.value.type || \"default\",\r\n size: action.value.size || finalConfig.value.size,\r\n loading: isActionLoading(action.value),\r\n disabled: isActionDisabled(action.value),\r\n ...extraProps,\r\n ...action.value.buttonProps,\r\n },\r\n {\r\n default: () => action.value.label,\r\n icon: action.value.icon\r\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\r\n : undefined,\r\n },\r\n );\r\n\r\n return action.value.directives && action.value.directives.length > 0\r\n ? withDirectives(button, action.value.directives as any)\r\n : button;\r\n };\r\n\r\n const renderButton = () => {\r\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\r\n if (action.value.tooltip) {\r\n return h(\r\n NTooltip,\r\n { placement: \"top\" },\r\n {\r\n trigger: () => vnode,\r\n default: () => action.value.tooltip,\r\n },\r\n );\r\n }\r\n return vnode;\r\n };\r\n\r\n const renderDropdownButton = () => {\r\n const vnode = createButtonVNode();\r\n return h(\r\n NDropdown,\r\n {\r\n options: dropdownOptions.value,\r\n onSelect: handleDropdownSelect,\r\n },\r\n {\r\n default: () => vnode,\r\n },\r\n );\r\n };\r\n\r\n return () => {\r\n if (action.value.dropdown && action.value.dropdown.length > 0) {\r\n return renderDropdownButton();\r\n }\r\n return renderButton();\r\n };\r\n },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2026-02-14\r\n * @Description: 通用操作按钮组件 - 配置化管理任何场景的按钮组\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2026 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div\r\n class=\"c-action-bar\"\r\n :class=\"{\r\n 'is-compact': finalConfig.compact,\r\n 'is-inline': finalConfig.inline,\r\n 'is-wrap': finalConfig.wrap,\r\n [`is-align-${finalConfig.align}`]: true,\r\n 'has-only-left':\r\n leftButtonList.length > 0 &&\r\n rightButtonList.length === 0 &&\r\n !$slots.center,\r\n 'has-only-right':\r\n rightButtonList.length > 0 &&\r\n leftButtonList.length === 0 &&\r\n !$slots.center,\r\n }\"\r\n >\r\n <div\r\n v-if=\"leftButtonList.length > 0\"\r\n class=\"actions-group actions-left\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in leftButtonList\"\r\n :key=\"action.key || `left-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < leftButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n\r\n <div v-if=\"$slots.center\" class=\"actions-center\">\r\n <slot name=\"center\" />\r\n </div>\r\n\r\n <div\r\n v-if=\"rightButtonList.length > 0\"\r\n class=\"actions-group actions-right\"\r\n :style=\"{ gap: `${finalConfig.gap}px` }\"\r\n >\r\n <template\r\n v-for=\"(action, index) in rightButtonList\"\r\n :key=\"action.key || `right-${index}`\"\r\n >\r\n <ActionButton\r\n :action=\"action\"\r\n @click=\"handleActionClick(action)\"\r\n @dropdown-select=\"(item) => handleDropdownClick(item, action)\"\r\n />\r\n <NDivider\r\n v-if=\"\r\n finalConfig.showDivider &&\r\n index < rightButtonList.length - 1 &&\r\n finalConfig.dividerType === 'vertical'\r\n \"\r\n vertical\r\n class=\"action-divider\"\r\n />\r\n </template>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed, unref, h, withDirectives, defineComponent } from \"vue\";\r\nimport type { PropType } from \"vue\";\r\nimport { NButton, NTooltip, NDropdown, NDivider } from \"naive-ui\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport type {\r\n ActionItem,\r\n ActionDropdownItem,\r\n ActionBarConfig,\r\n TableActionsProps,\r\n TableActionsEmits,\r\n} from \"./types\";\r\n\r\ndefineOptions({ name: \"C_ActionBar\" });\r\n\r\nconst props = withDefaults(defineProps<TableActionsProps>(), {\r\n actions: () => [],\r\n leftActions: () => [],\r\n rightActions: () => [],\r\n config: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<TableActionsEmits>();\r\n\r\nconst defaultConfig: Required<ActionBarConfig> = {\r\n align: \"left\",\r\n size: \"medium\",\r\n gap: 8,\r\n wrap: false,\r\n showDivider: false,\r\n dividerType: \"vertical\",\r\n compact: false,\r\n inline: true,\r\n};\r\n\r\nconst finalConfig = computed<Required<ActionBarConfig>>(() => ({\r\n ...defaultConfig,\r\n ...props.config,\r\n}));\r\n\r\nconst leftButtonList = computed<ActionItem[]>(() => {\r\n if (props.leftActions && props.leftActions.length > 0) {\r\n return props.leftActions.filter((action) => shouldShowAction(action));\r\n }\r\n if (props.actions.length > 0) {\r\n const hasRightActions = props.rightActions && props.rightActions.length > 0;\r\n const hasRightGroup = props.actions.some(\r\n (action) => action.group === \"right\",\r\n );\r\n if (!hasRightActions && !hasRightGroup) {\r\n return props.actions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"left\" && shouldShowAction(action),\r\n );\r\n }\r\n return [];\r\n});\r\n\r\nconst rightButtonList = computed<ActionItem[]>(() => {\r\n if (props.rightActions && props.rightActions.length > 0) {\r\n return props.rightActions.filter((action) => shouldShowAction(action));\r\n }\r\n return props.actions.filter(\r\n (action) => action.group === \"right\" && shouldShowAction(action),\r\n );\r\n});\r\n\r\nconst shouldShowAction = (action: ActionItem): boolean => {\r\n if (action.show === undefined) return true;\r\n return unref(action.show);\r\n};\r\n\r\nconst isActionDisabled = (action: ActionItem): boolean => {\r\n return unref(action.disabled) || false;\r\n};\r\n\r\nconst isActionLoading = (action: ActionItem): boolean => {\r\n return unref(action.loading) || false;\r\n};\r\n\r\nconst handleActionClick = async (action: ActionItem) => {\r\n if (action.dropdown && action.dropdown.length > 0) return;\r\n emit(\"action-click\", action);\r\n if (action.onClick) {\r\n await action.onClick();\r\n }\r\n};\r\n\r\nconst handleDropdownClick = async (\r\n item: ActionDropdownItem,\r\n action: ActionItem,\r\n) => {\r\n emit(\"dropdown-click\", item, action);\r\n if (item.onClick) {\r\n await item.onClick();\r\n }\r\n};\r\n\r\nconst ActionButton = defineComponent({\r\n name: \"ActionButton\",\r\n props: {\r\n action: {\r\n type: Object as PropType<ActionItem>,\r\n required: true,\r\n },\r\n },\r\n emits: [\"click\", \"dropdown-select\"],\r\n setup(props, { emit }) {\r\n const action = computed(() => props.action);\r\n\r\n const dropdownOptions = computed(() => {\r\n if (!action.value.dropdown) return [];\r\n return action.value.dropdown\r\n .filter((item) => {\r\n if (item.show === undefined) return true;\r\n return unref(item.show);\r\n })\r\n .map((item) => ({\r\n key: item.key,\r\n label: item.label,\r\n icon: item.icon\r\n ? () => h(C_Icon, { name: item.icon, size: 14 })\r\n : undefined,\r\n disabled: unref(item.disabled),\r\n }));\r\n });\r\n\r\n const handleDropdownSelect = (key: string) => {\r\n const item = action.value.dropdown?.find((d) => d.key === key);\r\n if (item) {\r\n emit(\"dropdown-select\", item);\r\n }\r\n };\r\n\r\n const createButtonVNode = (extraProps?: Record<string, any>) => {\r\n const button = h(\r\n NButton,\r\n {\r\n type: action.value.type || \"default\",\r\n size: action.value.size || finalConfig.value.size,\r\n loading: isActionLoading(action.value),\r\n disabled: isActionDisabled(action.value),\r\n ...extraProps,\r\n ...action.value.buttonProps,\r\n },\r\n {\r\n default: () => action.value.label,\r\n icon: action.value.icon\r\n ? () => h(C_Icon, { name: action.value.icon, size: 16 })\r\n : undefined,\r\n },\r\n );\r\n\r\n return action.value.directives && action.value.directives.length > 0\r\n ? withDirectives(button, action.value.directives as any)\r\n : button;\r\n };\r\n\r\n const renderButton = () => {\r\n const vnode = createButtonVNode({ onClick: () => emit(\"click\") });\r\n if (action.value.tooltip) {\r\n return h(\r\n NTooltip,\r\n { placement: \"top\" },\r\n {\r\n trigger: () => vnode,\r\n default: () => action.value.tooltip,\r\n },\r\n );\r\n }\r\n return vnode;\r\n };\r\n\r\n const renderDropdownButton = () => {\r\n const vnode = createButtonVNode();\r\n return h(\r\n NDropdown,\r\n {\r\n options: dropdownOptions.value,\r\n onSelect: handleDropdownSelect,\r\n },\r\n {\r\n default: () => vnode,\r\n },\r\n );\r\n };\r\n\r\n return () => {\r\n if (action.value.dropdown && action.value.dropdown.length > 0) {\r\n return renderDropdownButton();\r\n }\r\n return renderButton();\r\n };\r\n },\r\n});\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|