@robot-admin/naive-ui-components 0.6.29 → 0.6.31
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 +277 -277
- 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-DKRIGhi7.css.map → C_AudioPlayer-CXl4yP_m.css.map} +1 -1
- package/dist/{C_AudioPlayer-DlB6eNsa.css.map → C_AudioPlayer-CcBtt71m.css.map} +1 -1
- package/dist/C_AudioPlayer.css +47 -47
- package/dist/C_AudioPlayer.js.map +1 -1
- package/dist/C_AudioPlayer2.js +1 -1
- package/dist/C_AudioPlayer2.js.map +1 -1
- package/dist/{C_AvatarGroup-D02zci-i.css.map → C_AvatarGroup-CtPhfH9h.css.map} +1 -1
- package/dist/{C_AvatarGroup-DatHaUlY.css.map → C_AvatarGroup-M1dNPH3E.css.map} +1 -1
- package/dist/C_AvatarGroup.css +21 -21
- package/dist/C_AvatarGroup.js.map +1 -1
- package/dist/C_AvatarGroup2.js +1 -1
- package/dist/C_AvatarGroup2.js.map +1 -1
- 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.js.map +1 -1
- package/dist/C_Barcode2.js +1 -1
- package/dist/C_Barcode2.js.map +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.js.map +1 -1
- package/dist/C_Captcha2.js +1 -1
- package/dist/C_Captcha2.js.map +1 -1
- package/dist/C_Chat-CJ8KESTM.css.map +1 -0
- package/dist/C_Chat-DzV4AFLd.css.map +1 -0
- package/dist/C_Chat.css +78 -72
- package/dist/C_Chat.js.map +1 -1
- package/dist/C_Chat2.js +1 -1
- package/dist/C_Chat2.js.map +1 -1
- 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.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.js.map +1 -1
- package/dist/C_Code2.js +1 -1
- package/dist/C_Code2.js.map +1 -1
- package/dist/{C_CollapsePanel-CWkFCqNQ.css.map → C_CollapsePanel-BkOivqn3.css.map} +1 -1
- package/dist/{C_CollapsePanel-pcVJA_4z.css.map → C_CollapsePanel-CedsEM0N.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-B3Cgz_wJ.css.map → C_ContextMenu-CCsCeI39.css.map} +1 -1
- package/dist/{C_ContextMenu-u1LixF3_.css.map → C_ContextMenu-DOTBeltf.css.map} +1 -1
- package/dist/C_ContextMenu.css +17 -17
- package/dist/C_ContextMenu.js.map +1 -1
- package/dist/C_ContextMenu2.js +1 -1
- package/dist/C_ContextMenu2.js.map +1 -1
- 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.js.map +1 -1
- package/dist/C_Date2.js.map +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-C49qURgb.css.map +1 -0
- package/dist/C_Editor-DuxBD9Qg.css.map +1 -0
- package/dist/C_Editor.css +60 -29
- package/dist/C_Editor.js.map +1 -1
- package/dist/C_Editor2.js +1 -1
- package/dist/C_Editor2.js.map +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_GlobalSearch-BNtNpLLD.css.map → C_GlobalSearch-B6wK3m3k.css.map} +1 -1
- package/dist/{C_GlobalSearch-BlMeQ2D9.css.map → C_GlobalSearch-DoPjldFm.css.map} +1 -1
- package/dist/C_GlobalSearch.css +112 -112
- package/dist/C_GlobalSearch.js.map +1 -1
- package/dist/C_GlobalSearch2.js +1 -1
- package/dist/C_GlobalSearch2.js.map +1 -1
- package/dist/C_Guide.d.cts +2 -2
- package/dist/C_Guide.d.ts +2 -2
- package/dist/C_Guide.js.map +1 -1
- package/dist/C_Guide2.js +1 -1
- package/dist/C_Guide2.js.map +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.js.map +1 -1
- package/dist/C_Language2.js.map +1 -1
- package/dist/{C_Login-BkdnkBKX.css.map → C_Login-Cst_W1XC.css.map} +1 -1
- package/dist/{C_Login-VkMM6OJ2.css.map → C_Login-DWZ_6K1x.css.map} +1 -1
- package/dist/C_Login.css +72 -72
- package/dist/C_Login.js.map +1 -1
- package/dist/C_Login2.js +1 -1
- package/dist/C_Login2.js.map +1 -1
- 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-7J0uPEuk.css.map +1 -0
- package/dist/C_Markdown-C7Lg0_9z.css.map +1 -0
- package/dist/C_Markdown.css +48 -42
- 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_OrgChart-ChZu346B.css.map +1 -0
- package/dist/C_OrgChart-DqBufOv5.css.map +1 -0
- package/dist/C_OrgChart.cjs +1 -0
- package/dist/C_OrgChart.css +282 -0
- package/dist/C_OrgChart.d.cts +2 -0
- package/dist/C_OrgChart.d.ts +2 -0
- package/dist/C_OrgChart.js +1 -0
- package/dist/C_OrgChart.js.map +1 -0
- package/dist/C_OrgChart2.js +2 -0
- package/dist/C_OrgChart2.js.map +1 -0
- 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-BDx4ctsE.css.map → C_Signature-BJMvVPWT.css.map} +1 -1
- package/dist/{C_Signature-Bz_uNbwv.css.map → C_Signature-BJUHx2BF.css.map} +1 -1
- package/dist/C_Signature.css +15 -15
- 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_Skeleton-BNPbaut7.css.map +1 -0
- package/dist/C_Skeleton-Djsjw8XY.css.map +1 -0
- package/dist/C_Skeleton.cjs +1 -0
- package/dist/C_Skeleton.css +253 -0
- package/dist/C_Skeleton.d.cts +2 -0
- package/dist/C_Skeleton.d.ts +2 -0
- package/dist/C_Skeleton.js +1 -0
- package/dist/C_Skeleton.js.map +1 -0
- package/dist/C_Skeleton2.js +2 -0
- package/dist/C_Skeleton2.js.map +1 -0
- 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-BHYNJI1l.css.map +1 -0
- package/dist/C_Steps-DY7vl-4I.css.map +1 -0
- package/dist/C_Steps.css +38 -38
- 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-B8hpzOcR.css.map +1 -0
- package/dist/C_Table-CGP3n_u0.css.map +1 -0
- package/dist/C_Table.css +118 -93
- package/dist/C_Table.d.cts +2 -2
- package/dist/C_Table.d.ts +2 -2
- 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-JIkRrAHT.css.map → C_TagsView-BsutyC3U.css.map} +1 -1
- package/dist/{C_TagsView-mrh0FN4H.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-BKkimrZx.css.map → C_Timeline-DG70WtJP.css.map} +1 -1
- package/dist/{C_Timeline-DTuSCX6p.css.map → C_Timeline-Dzxmmdjg.css.map} +1 -1
- package/dist/C_Timeline.css +45 -45
- package/dist/C_Timeline.d.cts +1 -1
- package/dist/C_Timeline.d.ts +1 -1
- package/dist/C_Timeline.js.map +1 -1
- package/dist/C_Timeline2.js +1 -1
- package/dist/C_Timeline2.js.map +1 -1
- package/dist/{C_Transfer-BOB6OBqS.css.map → C_Transfer-CCEqnC-v.css.map} +1 -1
- package/dist/{C_Transfer-Dpq7ezWC.css.map → C_Transfer-CStPm4NP.css.map} +1 -1
- package/dist/C_Transfer.css +31 -31
- package/dist/C_Transfer.d.cts +1 -1
- package/dist/C_Transfer.d.ts +1 -1
- package/dist/C_Transfer.js.map +1 -1
- package/dist/C_Transfer2.js +1 -1
- package/dist/C_Transfer2.js.map +1 -1
- 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_Upload-S30RmC9t.css.map → C_Upload-CFAxVGVz.css.map} +1 -1
- package/dist/{C_Upload-i8LB_29U.css.map → C_Upload-D8_QeSV0.css.map} +1 -1
- package/dist/C_Upload.css +14 -9
- package/dist/C_Upload.js.map +1 -1
- package/dist/C_Upload2.js +1 -1
- package/dist/C_Upload2.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 +1 -1
- package/dist/constants2.d.ts +1 -1
- package/dist/constants3.d.ts +3 -3
- 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 +22 -20
- package/dist/index.d.ts +22 -20
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.vue.d.ts +1 -1
- package/dist/index10.vue.d.ts +4 -4
- package/dist/index11.vue.d.ts +3 -3
- package/dist/index13.vue.d.ts +1 -1
- package/dist/index14.vue.d.ts +85 -7
- package/dist/index15.vue.d.ts +5 -5
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.ts +2 -2
- package/dist/index2.vue.d.ts +5 -5
- package/dist/index20.vue.d.ts +87 -40
- package/dist/index21.vue.d.ts +47 -27
- package/dist/index22.vue.d.ts +95 -79
- package/dist/index23.vue.d.ts +24 -7
- package/dist/index24.vue.d.ts +76 -100
- package/dist/index25.vue.d.ts +7 -70
- package/dist/index26.vue.d.ts +99 -649
- package/dist/index27.vue.d.ts +81 -0
- package/dist/index28.vue.d.ts +662 -0
- package/dist/index3.vue.d.ts +3 -3
- package/dist/index4.vue.d.ts +6 -6
- package/dist/index8.vue.d.ts +2 -2
- 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 +2305 -1693
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.ts +2 -2
- package/dist/useCropperCore.d.ts +4 -4
- package/dist/useDraggableLayout.d.ts +10 -10
- package/dist/useDynamicFormState.d.ts +10 -10
- package/dist/useInfiniteScroll.d.ts +2 -2
- package/dist/useModalEdit.d.ts +47 -1
- package/dist/useQRCode.d.ts +3 -3
- package/dist/useSplitResize.d.ts +7 -7
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +4 -4
- package/dist/useWorkflowValidation.d.ts +2 -2
- package/package.json +5 -1
- package/dist/C_ActionBar-DYG0Yf3A.css.map +0 -1
- package/dist/C_ActionBar-MAjRhqcI.css.map +0 -1
- package/dist/C_Chat-CcjZdAwu.css.map +0 -1
- package/dist/C_Chat-Diq7tyWU.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_Editor-D0_6UhIa.css.map +0 -1
- package/dist/C_Editor-OlxIF9-5.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_Markdown-Kujzx1qG.css.map +0 -1
- package/dist/C_Markdown-YCAmBbNF.css.map +0 -1
- package/dist/C_Steps-Bk1krgiR.css.map +0 -1
- package/dist/C_Steps-Dn2CMpy1.css.map +0 -1
- package/dist/C_Table-BV1wUw6f.css.map +0 -1
- package/dist/C_Table-LlJ-JEdm.css.map +0 -1
- package/dist/C_Time-BzyQVvTS.css.map +0 -1
- package/dist/C_Time-DmpKLQHc.css.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Skeleton-BNPbaut7.css","names":[],"sources":["../src/components/C_Skeleton/index.vue?vue&type=style&index=0&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_Skeleton 骨架屏组件样式 */\n.c-skeleton {\n --c-skeleton-bg: #e5e7eb;\n --c-skeleton-wave-bg: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.4),\n transparent\n );\n --c-skeleton-radius: 4px;\n --c-skeleton-circle-size: 40px;\n --c-skeleton-circle-sm: 32px;\n --c-skeleton-circle-lg: 56px;\n --c-skeleton-line-height: 16px;\n --c-skeleton-line-sm-height: 12px;\n --c-skeleton-line-mini-height: 8px;\n --c-skeleton-gap: 12px;\n --c-skeleton-card-cover-height: 160px;\n --c-skeleton-image-height: 200px;\n width: 100%;\n}\n\n/* ─── 基础骨架块 ─── */\n.c-skeleton__item {\n background-color: var(--c-skeleton-bg);\n border-radius: var(--c-skeleton-radius);\n position: relative;\n overflow: hidden;\n}\n\n/* ─── 动画:脉冲 ─── */\n.c-skeleton--pulse .c-skeleton__item {\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n}\n@keyframes skeleton-pulse {\n0%, 100% {\n opacity: 1;\n}\n50% {\n opacity: 0.4;\n}\n}\n/* ─── 动画:波浪 ─── */\n.c-skeleton--wave .c-skeleton__item::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--c-skeleton-wave-bg);\n animation: skeleton-wave 1.6s linear infinite;\n}\n@keyframes skeleton-wave {\n0% {\n transform: translateX(-100%);\n}\n100% {\n transform: translateX(100%);\n}\n}\n/* ─── 无动画 ─── */\n.c-skeleton--none .c-skeleton__item {\n animation: none;\n}\n.c-skeleton--none .c-skeleton__item::after {\n display: none;\n}\n\n/* ─── 文本行 ─── */\n.c-skeleton__text {\n margin-bottom: 8px;\n}\n.c-skeleton__line {\n height: var(--c-skeleton-line-height);\n width: 100%;\n}\n.c-skeleton__line--sm {\n height: var(--c-skeleton-line-sm-height);\n margin-top: 6px;\n}\n.c-skeleton__line--mini {\n height: var(--c-skeleton-line-mini-height);\n}\n.c-skeleton__line--label {\n height: var(--c-skeleton-line-sm-height);\n margin-bottom: 8px;\n}\n.c-skeleton__line--input {\n height: 34px;\n border-radius: 6px;\n}\n.c-skeleton__line--btn {\n height: 32px;\n border-radius: 6px;\n}\n\n/* ─── 圆形(头像) ─── */\n.c-skeleton__circle {\n width: var(--c-skeleton-circle-size);\n height: var(--c-skeleton-circle-size);\n border-radius: 50%;\n flex-shrink: 0;\n}\n.c-skeleton__circle--sm {\n width: var(--c-skeleton-circle-sm);\n height: var(--c-skeleton-circle-sm);\n}\n.c-skeleton__circle--lg {\n width: var(--c-skeleton-circle-lg);\n height: var(--c-skeleton-circle-lg);\n}\n\n/* ─── Avatar 预设 ─── */\n.c-skeleton__avatar-group {\n display: flex;\n align-items: center;\n gap: var(--c-skeleton-gap);\n}\n.c-skeleton__avatar-text {\n flex: 1;\n}\n\n/* ─── Image 预设 ─── */\n.c-skeleton__image {\n width: 100%;\n height: var(--c-skeleton-image-height);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n margin-bottom: var(--c-skeleton-gap);\n}\n.c-skeleton__image-icon {\n color: var(--c-skeleton-bg);\n opacity: 0.6;\n filter: brightness(0.8);\n}\n\n/* ─── Card 预设 ─── */\n.c-skeleton__card {\n border: 1px solid var(--c-skeleton-bg);\n border-radius: 8px;\n overflow: hidden;\n margin-bottom: var(--c-skeleton-gap);\n}\n.c-skeleton__card-cover {\n width: 100%;\n height: var(--c-skeleton-card-cover-height);\n border-radius: 0;\n}\n.c-skeleton__card-body {\n padding: 16px;\n}\n.c-skeleton__card-desc {\n margin-top: 8px;\n}\n.c-skeleton__card-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--c-skeleton-bg);\n}\n\n/* ─── Table 预设 ─── */\n.c-skeleton__table {\n width: 100%;\n border: 1px solid var(--c-skeleton-bg);\n border-radius: 8px;\n overflow: hidden;\n}\n.c-skeleton__table-header {\n display: flex;\n padding: 12px 16px;\n background-color: color-mix(in srgb, var(--c-skeleton-bg) 30%, transparent);\n border-bottom: 1px solid var(--c-skeleton-bg);\n}\n.c-skeleton__table-row {\n display: flex;\n padding: 12px 16px;\n border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);\n}\n.c-skeleton__table-row:last-child {\n border-bottom: none;\n}\n.c-skeleton__table-cell {\n flex: 1;\n padding: 0 8px;\n}\n.c-skeleton__table-cell--action {\n flex: 0 0 120px;\n}\n.c-skeleton__action-btns {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* ─── Form 预设 ─── */\n.c-skeleton__form {\n display: grid;\n grid-template-columns: repeat(var(--form-cols, 2), 1fr);\n gap: 16px 24px;\n}\n.c-skeleton__form-field {\n display: flex;\n flex-direction: column;\n}\n.c-skeleton__form-actions {\n grid-column: 1/-1;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding-top: 16px;\n}\n\n/* ─── List 预设 ─── */\n.c-skeleton__list-item {\n display: flex;\n align-items: flex-start;\n gap: var(--c-skeleton-gap);\n padding: 12px 0;\n border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);\n}\n.c-skeleton__list-item:last-child {\n border-bottom: none;\n}\n.c-skeleton__list-content {\n flex: 1;\n}\n\n/* ─── Detail 预设 ─── */\n.c-skeleton__detail-header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 24px;\n}\n.c-skeleton__detail-title {\n flex: 1;\n}\n.c-skeleton__detail-body {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px 24px;\n}\n.c-skeleton__detail-field {\n display: flex;\n flex-direction: column;\n}\n.c-skeleton__detail-value {\n margin-top: 4px;\n}"],"mappings":"AAAA;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;;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;;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;;AAEA;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;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;;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;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Skeleton-Djsjw8XY.css","names":[],"sources":["../src/components/C_Skeleton/index.vue?vue&type=style&index=0&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* C_Skeleton 骨架屏组件样式 */\n.c-skeleton {\n --c-skeleton-bg: #e5e7eb;\n --c-skeleton-wave-bg: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.4),\n transparent\n );\n --c-skeleton-radius: 4px;\n --c-skeleton-circle-size: 40px;\n --c-skeleton-circle-sm: 32px;\n --c-skeleton-circle-lg: 56px;\n --c-skeleton-line-height: 16px;\n --c-skeleton-line-sm-height: 12px;\n --c-skeleton-line-mini-height: 8px;\n --c-skeleton-gap: 12px;\n --c-skeleton-card-cover-height: 160px;\n --c-skeleton-image-height: 200px;\n width: 100%;\n}\n\n/* ─── 基础骨架块 ─── */\n.c-skeleton__item {\n background-color: var(--c-skeleton-bg);\n border-radius: var(--c-skeleton-radius);\n position: relative;\n overflow: hidden;\n}\n\n/* ─── 动画:脉冲 ─── */\n.c-skeleton--pulse .c-skeleton__item {\n animation: skeleton-pulse 1.5s ease-in-out infinite;\n}\n@keyframes skeleton-pulse {\n0%, 100% {\n opacity: 1;\n}\n50% {\n opacity: 0.4;\n}\n}\n/* ─── 动画:波浪 ─── */\n.c-skeleton--wave .c-skeleton__item::after {\n content: \"\";\n position: absolute;\n inset: 0;\n background: var(--c-skeleton-wave-bg);\n animation: skeleton-wave 1.6s linear infinite;\n}\n@keyframes skeleton-wave {\n0% {\n transform: translateX(-100%);\n}\n100% {\n transform: translateX(100%);\n}\n}\n/* ─── 无动画 ─── */\n.c-skeleton--none .c-skeleton__item {\n animation: none;\n}\n.c-skeleton--none .c-skeleton__item::after {\n display: none;\n}\n\n/* ─── 文本行 ─── */\n.c-skeleton__text {\n margin-bottom: 8px;\n}\n.c-skeleton__line {\n height: var(--c-skeleton-line-height);\n width: 100%;\n}\n.c-skeleton__line--sm {\n height: var(--c-skeleton-line-sm-height);\n margin-top: 6px;\n}\n.c-skeleton__line--mini {\n height: var(--c-skeleton-line-mini-height);\n}\n.c-skeleton__line--label {\n height: var(--c-skeleton-line-sm-height);\n margin-bottom: 8px;\n}\n.c-skeleton__line--input {\n height: 34px;\n border-radius: 6px;\n}\n.c-skeleton__line--btn {\n height: 32px;\n border-radius: 6px;\n}\n\n/* ─── 圆形(头像) ─── */\n.c-skeleton__circle {\n width: var(--c-skeleton-circle-size);\n height: var(--c-skeleton-circle-size);\n border-radius: 50%;\n flex-shrink: 0;\n}\n.c-skeleton__circle--sm {\n width: var(--c-skeleton-circle-sm);\n height: var(--c-skeleton-circle-sm);\n}\n.c-skeleton__circle--lg {\n width: var(--c-skeleton-circle-lg);\n height: var(--c-skeleton-circle-lg);\n}\n\n/* ─── Avatar 预设 ─── */\n.c-skeleton__avatar-group {\n display: flex;\n align-items: center;\n gap: var(--c-skeleton-gap);\n}\n.c-skeleton__avatar-text {\n flex: 1;\n}\n\n/* ─── Image 预设 ─── */\n.c-skeleton__image {\n width: 100%;\n height: var(--c-skeleton-image-height);\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n margin-bottom: var(--c-skeleton-gap);\n}\n.c-skeleton__image-icon {\n color: var(--c-skeleton-bg);\n opacity: 0.6;\n filter: brightness(0.8);\n}\n\n/* ─── Card 预设 ─── */\n.c-skeleton__card {\n border: 1px solid var(--c-skeleton-bg);\n border-radius: 8px;\n overflow: hidden;\n margin-bottom: var(--c-skeleton-gap);\n}\n.c-skeleton__card-cover {\n width: 100%;\n height: var(--c-skeleton-card-cover-height);\n border-radius: 0;\n}\n.c-skeleton__card-body {\n padding: 16px;\n}\n.c-skeleton__card-desc {\n margin-top: 8px;\n}\n.c-skeleton__card-footer {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 12px 16px;\n border-top: 1px solid var(--c-skeleton-bg);\n}\n\n/* ─── Table 预设 ─── */\n.c-skeleton__table {\n width: 100%;\n border: 1px solid var(--c-skeleton-bg);\n border-radius: 8px;\n overflow: hidden;\n}\n.c-skeleton__table-header {\n display: flex;\n padding: 12px 16px;\n background-color: color-mix(in srgb, var(--c-skeleton-bg) 30%, transparent);\n border-bottom: 1px solid var(--c-skeleton-bg);\n}\n.c-skeleton__table-row {\n display: flex;\n padding: 12px 16px;\n border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);\n}\n.c-skeleton__table-row:last-child {\n border-bottom: none;\n}\n.c-skeleton__table-cell {\n flex: 1;\n padding: 0 8px;\n}\n.c-skeleton__table-cell--action {\n flex: 0 0 120px;\n}\n.c-skeleton__action-btns {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n/* ─── Form 预设 ─── */\n.c-skeleton__form {\n display: grid;\n grid-template-columns: repeat(var(--form-cols, 2), 1fr);\n gap: 16px 24px;\n}\n.c-skeleton__form-field {\n display: flex;\n flex-direction: column;\n}\n.c-skeleton__form-actions {\n grid-column: 1/-1;\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n padding-top: 16px;\n}\n\n/* ─── List 预设 ─── */\n.c-skeleton__list-item {\n display: flex;\n align-items: flex-start;\n gap: var(--c-skeleton-gap);\n padding: 12px 0;\n border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);\n}\n.c-skeleton__list-item:last-child {\n border-bottom: none;\n}\n.c-skeleton__list-content {\n flex: 1;\n}\n\n/* ─── Detail 预设 ─── */\n.c-skeleton__detail-header {\n display: flex;\n align-items: center;\n gap: 16px;\n margin-bottom: 24px;\n}\n.c-skeleton__detail-title {\n flex: 1;\n}\n.c-skeleton__detail-body {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px 24px;\n}\n.c-skeleton__detail-field {\n display: flex;\n flex-direction: column;\n}\n.c-skeleton__detail-value {\n margin-top: 4px;\n}"],"mappings":"AAAA;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;;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;;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;;AAEA;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;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;;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;;AAEA;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;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./C_Skeleton.js`);exports.C_Skeleton=e.t;
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
/* unplugin-vue-components disabled *//* C_Skeleton 骨架屏组件样式 */
|
|
2
|
+
.c-skeleton {
|
|
3
|
+
--c-skeleton-bg: #e5e7eb;
|
|
4
|
+
--c-skeleton-wave-bg: linear-gradient(
|
|
5
|
+
90deg,
|
|
6
|
+
transparent,
|
|
7
|
+
rgba(255, 255, 255, 0.4),
|
|
8
|
+
transparent
|
|
9
|
+
);
|
|
10
|
+
--c-skeleton-radius: 4px;
|
|
11
|
+
--c-skeleton-circle-size: 40px;
|
|
12
|
+
--c-skeleton-circle-sm: 32px;
|
|
13
|
+
--c-skeleton-circle-lg: 56px;
|
|
14
|
+
--c-skeleton-line-height: 16px;
|
|
15
|
+
--c-skeleton-line-sm-height: 12px;
|
|
16
|
+
--c-skeleton-line-mini-height: 8px;
|
|
17
|
+
--c-skeleton-gap: 12px;
|
|
18
|
+
--c-skeleton-card-cover-height: 160px;
|
|
19
|
+
--c-skeleton-image-height: 200px;
|
|
20
|
+
width: 100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* ─── 基础骨架块 ─── */
|
|
24
|
+
.c-skeleton__item {
|
|
25
|
+
background-color: var(--c-skeleton-bg);
|
|
26
|
+
border-radius: var(--c-skeleton-radius);
|
|
27
|
+
position: relative;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
/* ─── 动画:脉冲 ─── */
|
|
32
|
+
.c-skeleton--pulse .c-skeleton__item {
|
|
33
|
+
animation: skeleton-pulse 1.5s ease-in-out infinite;
|
|
34
|
+
}
|
|
35
|
+
@keyframes skeleton-pulse {
|
|
36
|
+
0%, 100% {
|
|
37
|
+
opacity: 1;
|
|
38
|
+
}
|
|
39
|
+
50% {
|
|
40
|
+
opacity: 0.4;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/* ─── 动画:波浪 ─── */
|
|
44
|
+
.c-skeleton--wave .c-skeleton__item::after {
|
|
45
|
+
content: "";
|
|
46
|
+
position: absolute;
|
|
47
|
+
inset: 0;
|
|
48
|
+
background: var(--c-skeleton-wave-bg);
|
|
49
|
+
animation: skeleton-wave 1.6s linear infinite;
|
|
50
|
+
}
|
|
51
|
+
@keyframes skeleton-wave {
|
|
52
|
+
0% {
|
|
53
|
+
transform: translateX(-100%);
|
|
54
|
+
}
|
|
55
|
+
100% {
|
|
56
|
+
transform: translateX(100%);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
/* ─── 无动画 ─── */
|
|
60
|
+
.c-skeleton--none .c-skeleton__item {
|
|
61
|
+
animation: none;
|
|
62
|
+
}
|
|
63
|
+
.c-skeleton--none .c-skeleton__item::after {
|
|
64
|
+
display: none;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* ─── 文本行 ─── */
|
|
68
|
+
.c-skeleton__text {
|
|
69
|
+
margin-bottom: 8px;
|
|
70
|
+
}
|
|
71
|
+
.c-skeleton__line {
|
|
72
|
+
height: var(--c-skeleton-line-height);
|
|
73
|
+
width: 100%;
|
|
74
|
+
}
|
|
75
|
+
.c-skeleton__line--sm {
|
|
76
|
+
height: var(--c-skeleton-line-sm-height);
|
|
77
|
+
margin-top: 6px;
|
|
78
|
+
}
|
|
79
|
+
.c-skeleton__line--mini {
|
|
80
|
+
height: var(--c-skeleton-line-mini-height);
|
|
81
|
+
}
|
|
82
|
+
.c-skeleton__line--label {
|
|
83
|
+
height: var(--c-skeleton-line-sm-height);
|
|
84
|
+
margin-bottom: 8px;
|
|
85
|
+
}
|
|
86
|
+
.c-skeleton__line--input {
|
|
87
|
+
height: 34px;
|
|
88
|
+
border-radius: 6px;
|
|
89
|
+
}
|
|
90
|
+
.c-skeleton__line--btn {
|
|
91
|
+
height: 32px;
|
|
92
|
+
border-radius: 6px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* ─── 圆形(头像) ─── */
|
|
96
|
+
.c-skeleton__circle {
|
|
97
|
+
width: var(--c-skeleton-circle-size);
|
|
98
|
+
height: var(--c-skeleton-circle-size);
|
|
99
|
+
border-radius: 50%;
|
|
100
|
+
flex-shrink: 0;
|
|
101
|
+
}
|
|
102
|
+
.c-skeleton__circle--sm {
|
|
103
|
+
width: var(--c-skeleton-circle-sm);
|
|
104
|
+
height: var(--c-skeleton-circle-sm);
|
|
105
|
+
}
|
|
106
|
+
.c-skeleton__circle--lg {
|
|
107
|
+
width: var(--c-skeleton-circle-lg);
|
|
108
|
+
height: var(--c-skeleton-circle-lg);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/* ─── Avatar 预设 ─── */
|
|
112
|
+
.c-skeleton__avatar-group {
|
|
113
|
+
display: flex;
|
|
114
|
+
align-items: center;
|
|
115
|
+
gap: var(--c-skeleton-gap);
|
|
116
|
+
}
|
|
117
|
+
.c-skeleton__avatar-text {
|
|
118
|
+
flex: 1;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ─── Image 预设 ─── */
|
|
122
|
+
.c-skeleton__image {
|
|
123
|
+
width: 100%;
|
|
124
|
+
height: var(--c-skeleton-image-height);
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
border-radius: 8px;
|
|
129
|
+
margin-bottom: var(--c-skeleton-gap);
|
|
130
|
+
}
|
|
131
|
+
.c-skeleton__image-icon {
|
|
132
|
+
color: var(--c-skeleton-bg);
|
|
133
|
+
opacity: 0.6;
|
|
134
|
+
filter: brightness(0.8);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* ─── Card 预设 ─── */
|
|
138
|
+
.c-skeleton__card {
|
|
139
|
+
border: 1px solid var(--c-skeleton-bg);
|
|
140
|
+
border-radius: 8px;
|
|
141
|
+
overflow: hidden;
|
|
142
|
+
margin-bottom: var(--c-skeleton-gap);
|
|
143
|
+
}
|
|
144
|
+
.c-skeleton__card-cover {
|
|
145
|
+
width: 100%;
|
|
146
|
+
height: var(--c-skeleton-card-cover-height);
|
|
147
|
+
border-radius: 0;
|
|
148
|
+
}
|
|
149
|
+
.c-skeleton__card-body {
|
|
150
|
+
padding: 16px;
|
|
151
|
+
}
|
|
152
|
+
.c-skeleton__card-desc {
|
|
153
|
+
margin-top: 8px;
|
|
154
|
+
}
|
|
155
|
+
.c-skeleton__card-footer {
|
|
156
|
+
display: flex;
|
|
157
|
+
justify-content: flex-end;
|
|
158
|
+
gap: 8px;
|
|
159
|
+
padding: 12px 16px;
|
|
160
|
+
border-top: 1px solid var(--c-skeleton-bg);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* ─── Table 预设 ─── */
|
|
164
|
+
.c-skeleton__table {
|
|
165
|
+
width: 100%;
|
|
166
|
+
border: 1px solid var(--c-skeleton-bg);
|
|
167
|
+
border-radius: 8px;
|
|
168
|
+
overflow: hidden;
|
|
169
|
+
}
|
|
170
|
+
.c-skeleton__table-header {
|
|
171
|
+
display: flex;
|
|
172
|
+
padding: 12px 16px;
|
|
173
|
+
background-color: color-mix(in srgb, var(--c-skeleton-bg) 30%, transparent);
|
|
174
|
+
border-bottom: 1px solid var(--c-skeleton-bg);
|
|
175
|
+
}
|
|
176
|
+
.c-skeleton__table-row {
|
|
177
|
+
display: flex;
|
|
178
|
+
padding: 12px 16px;
|
|
179
|
+
border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);
|
|
180
|
+
}
|
|
181
|
+
.c-skeleton__table-row:last-child {
|
|
182
|
+
border-bottom: none;
|
|
183
|
+
}
|
|
184
|
+
.c-skeleton__table-cell {
|
|
185
|
+
flex: 1;
|
|
186
|
+
padding: 0 8px;
|
|
187
|
+
}
|
|
188
|
+
.c-skeleton__table-cell--action {
|
|
189
|
+
flex: 0 0 120px;
|
|
190
|
+
}
|
|
191
|
+
.c-skeleton__action-btns {
|
|
192
|
+
display: flex;
|
|
193
|
+
gap: 8px;
|
|
194
|
+
align-items: center;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
/* ─── Form 预设 ─── */
|
|
198
|
+
.c-skeleton__form {
|
|
199
|
+
display: grid;
|
|
200
|
+
grid-template-columns: repeat(var(--form-cols, 2), 1fr);
|
|
201
|
+
gap: 16px 24px;
|
|
202
|
+
}
|
|
203
|
+
.c-skeleton__form-field {
|
|
204
|
+
display: flex;
|
|
205
|
+
flex-direction: column;
|
|
206
|
+
}
|
|
207
|
+
.c-skeleton__form-actions {
|
|
208
|
+
grid-column: 1/-1;
|
|
209
|
+
display: flex;
|
|
210
|
+
justify-content: flex-end;
|
|
211
|
+
gap: 12px;
|
|
212
|
+
padding-top: 16px;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* ─── List 预设 ─── */
|
|
216
|
+
.c-skeleton__list-item {
|
|
217
|
+
display: flex;
|
|
218
|
+
align-items: flex-start;
|
|
219
|
+
gap: var(--c-skeleton-gap);
|
|
220
|
+
padding: 12px 0;
|
|
221
|
+
border-bottom: 1px solid color-mix(in srgb, var(--c-skeleton-bg) 50%, transparent);
|
|
222
|
+
}
|
|
223
|
+
.c-skeleton__list-item:last-child {
|
|
224
|
+
border-bottom: none;
|
|
225
|
+
}
|
|
226
|
+
.c-skeleton__list-content {
|
|
227
|
+
flex: 1;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* ─── Detail 预设 ─── */
|
|
231
|
+
.c-skeleton__detail-header {
|
|
232
|
+
display: flex;
|
|
233
|
+
align-items: center;
|
|
234
|
+
gap: 16px;
|
|
235
|
+
margin-bottom: 24px;
|
|
236
|
+
}
|
|
237
|
+
.c-skeleton__detail-title {
|
|
238
|
+
flex: 1;
|
|
239
|
+
}
|
|
240
|
+
.c-skeleton__detail-body {
|
|
241
|
+
display: grid;
|
|
242
|
+
grid-template-columns: repeat(2, 1fr);
|
|
243
|
+
gap: 16px 24px;
|
|
244
|
+
}
|
|
245
|
+
.c-skeleton__detail-field {
|
|
246
|
+
display: flex;
|
|
247
|
+
flex-direction: column;
|
|
248
|
+
}
|
|
249
|
+
.c-skeleton__detail-value {
|
|
250
|
+
margin-top: 4px;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/*# sourceMappingURL=C_Skeleton-BNPbaut7.css.map*/
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as SkeletonFormConfig, c as SkeletonProps, i as SkeletonDetailConfig, l as SkeletonTableConfig, n as SkeletonAnimation, o as SkeletonListConfig, r as SkeletonCardConfig, s as SkeletonPreset, t as _default } from "./index22.vue.js";
|
|
2
|
+
export { _default as C_Skeleton, type SkeletonAnimation, type SkeletonCardConfig, type SkeletonDetailConfig, type SkeletonFormConfig, type SkeletonListConfig, type SkeletonPreset, type SkeletonProps, type SkeletonTableConfig };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { a as SkeletonFormConfig, c as SkeletonProps, i as SkeletonDetailConfig, l as SkeletonTableConfig, n as SkeletonAnimation, o as SkeletonListConfig, r as SkeletonCardConfig, s as SkeletonPreset, t as _default } from "./index22.vue.js";
|
|
2
|
+
export { _default as C_Skeleton, type SkeletonAnimation, type SkeletonCardConfig, type SkeletonDetailConfig, type SkeletonFormConfig, type SkeletonListConfig, type SkeletonPreset, type SkeletonProps, type SkeletonTableConfig };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e}from"./C_Skeleton2.js";export{e as C_Skeleton};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Skeleton.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Fragment as e,computed as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,createStaticVNode as a,defineComponent as o,normalizeClass as s,normalizeStyle as c,openBlock as l,renderList as u,renderSlot as d}from"vue";const f={key:0,class:`c-skeleton__card-cover c-skeleton__item`},p={class:`c-skeleton__card-body`},m={class:`c-skeleton__card-desc`},h={key:1,class:`c-skeleton__card-footer`},g={class:`c-skeleton__table`},_={key:0,class:`c-skeleton__table-header`},v={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},y={key:0,class:`c-skeleton__table-cell c-skeleton__table-cell--action`},b={key:0,class:`c-skeleton__form-actions`},x={key:0,class:`c-skeleton__circle c-skeleton__circle--sm c-skeleton__item`},S={class:`c-skeleton__list-content`},C={class:`c-skeleton__detail`},w={key:0,class:`c-skeleton__detail-header`},T={class:`c-skeleton__detail-body`},E={class:`c-skeleton__detail-value`};var D=o({name:`C_Skeleton`,__name:`index`,props:{preset:{default:`text`},loading:{type:Boolean,default:!0},animation:{type:[String,Boolean],default:`wave`},repeat:{default:3},borderRadius:{default:`4px`},table:{},form:{},list:{},card:{},detail:{}},setup(o){let D=o,O=t(()=>D.animation===!1?`none`:D.animation),k=t(()=>({rows:D.table?.rows??5,cols:D.table?.cols??4,showHeader:D.table?.showHeader??!0,showActions:D.table?.showActions??!0})),A=t(()=>({fields:D.form?.fields??6,cols:D.form?.cols??2,showLabel:D.form?.showLabel??!0,showActions:D.form?.showActions??!0})),j=t(()=>({items:D.list?.items??5,showAvatar:D.list?.showAvatar??!0,descLines:D.list?.descLines??2})),M=t(()=>({showCover:D.card?.showCover??!0,titleLines:D.card?.titleLines??1,descLines:D.card?.descLines??2,showFooter:D.card?.showFooter??!0})),N=t(()=>({fields:D.detail?.fields??6,valueLines:D.detail?.valueLines??1,showAvatar:D.detail?.showAvatar??!0}));return(t,o)=>D.loading?(l(),r(`div`,{key:0,class:s([`c-skeleton`,[`c-skeleton--${O.value}`]])},[n(` text 预设 `),t.preset===`text`?(l(!0),r(e,{key:0},u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__text`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:c({width:e===t.repeat?`60%`:`100%`})},null,4)]))),128)):t.preset===`avatar`?(l(),r(e,{key:1},[n(` avatar 预设 `),o[0]||=a(`<div class="c-skeleton__avatar-group"><div class="c-skeleton__circle c-skeleton__item"></div><div class="c-skeleton__avatar-text"><div class="c-skeleton__line c-skeleton__item" style="width:40%;"></div><div class="c-skeleton__line c-skeleton__item c-skeleton__line--sm" style="width:60%;"></div></div></div>`,1)],64)):t.preset===`image`?(l(),r(e,{key:2},[n(` image 预设 `),(l(!0),r(e,null,u(t.repeat,e=>(l(),r(`div`,{key:e,class:`c-skeleton__image c-skeleton__item`},o[1]||=[i(`div`,{class:`c-skeleton__image-icon`},[i(`svg`,{viewBox:`0 0 24 24`,fill:`currentColor`,width:`32`,height:`32`},[i(`path`,{d:`M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z`})])],-1)]))),128))],64)):t.preset===`card`?(l(),r(e,{key:3},[n(` card 预设 `),(l(!0),r(e,null,u(t.repeat,t=>(l(),r(`div`,{key:t,class:`c-skeleton__card`},[M.value.showCover?(l(),r(`div`,f)):n(`v-if`,!0),i(`div`,p,[(l(!0),r(e,null,u(M.value.titleLines,e=>(l(),r(`div`,{key:`t-${e}`,class:`c-skeleton__line c-skeleton__item`,style:c({width:e===M.value.titleLines?`50%`:`80%`})},null,4))),128)),i(`div`,m,[(l(!0),r(e,null,u(M.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===M.value.descLines?`70%`:`100%`})},null,4))),128))])]),M.value.showFooter?(l(),r(`div`,h,o[2]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)]))),128))],64)):t.preset===`table`?(l(),r(e,{key:4},[n(` table 预设 `),i(`div`,g,[k.value.showHeader?(l(),r(`div`,_,[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`h-${e}`,class:`c-skeleton__table-cell`},o[3]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`},null,-1)]))),128)),k.value.showActions?(l(),r(`div`,v,o[4]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`60%`}},null,-1)])):n(`v-if`,!0)])):n(`v-if`,!0),(l(!0),r(e,null,u(k.value.rows,t=>(l(),r(`div`,{key:`r-${t}`,class:`c-skeleton__table-row`},[(l(!0),r(e,null,u(k.value.cols,e=>(l(),r(`div`,{key:`c-${e}`,class:`c-skeleton__table-cell`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:`${Math.floor(50+t*e*17%50)}%`})},null,4)]))),128)),k.value.showActions?(l(),r(`div`,y,o[5]||=[i(`div`,{class:`c-skeleton__action-btns`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--mini`,style:{width:`40px`}})],-1)])):n(`v-if`,!0)]))),128))])],64)):t.preset===`form`?(l(),r(e,{key:5},[n(` form 预设 `),i(`div`,{class:`c-skeleton__form`,style:c({"--form-cols":A.value.cols})},[(l(!0),r(e,null,u(A.value.fields,e=>(l(),r(`div`,{key:e,class:`c-skeleton__form-field`},[A.value.showLabel?(l(),r(`div`,{key:0,class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${60+e*13%30}px`})},null,4)):n(`v-if`,!0),o[6]||=i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--input`},null,-1)]))),128)),A.value.showActions?(l(),r(`div`,b,o[7]||=[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`100px`}},null,-1),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--btn`,style:{width:`80px`}},null,-1)])):n(`v-if`,!0)],4)],64)):t.preset===`list`?(l(),r(e,{key:6},[n(` list 预设 `),(l(!0),r(e,null,u(j.value.items,t=>(l(),r(`div`,{key:t,class:`c-skeleton__list-item`},[j.value.showAvatar?(l(),r(`div`,x)):n(`v-if`,!0),i(`div`,S,[o[8]||=i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`30%`}},null,-1),(l(!0),r(e,null,u(j.value.descLines,e=>(l(),r(`div`,{key:`d-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===j.value.descLines?`50%`:`90%`})},null,4))),128))])]))),128))],64)):t.preset===`detail`?(l(),r(e,{key:7},[n(` detail 预设 `),i(`div`,C,[N.value.showAvatar?(l(),r(`div`,w,o[9]||=[i(`div`,{class:`c-skeleton__circle c-skeleton__circle--lg c-skeleton__item`},null,-1),i(`div`,{class:`c-skeleton__detail-title`},[i(`div`,{class:`c-skeleton__line c-skeleton__item`,style:{width:`120px`}}),i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:{width:`200px`}})],-1)])):n(`v-if`,!0),i(`div`,T,[(l(!0),r(e,null,u(N.value.fields,t=>(l(),r(`div`,{key:t,class:`c-skeleton__detail-field`},[i(`div`,{class:`c-skeleton__line c-skeleton__item c-skeleton__line--label`,style:c({width:`${50+t*17%40}px`})},null,4),i(`div`,E,[(l(!0),r(e,null,u(N.value.valueLines,e=>(l(),r(`div`,{key:`v-${e}`,class:`c-skeleton__line c-skeleton__item c-skeleton__line--sm`,style:c({width:e===N.value.valueLines?`60%`:`100%`})},null,4))),128))])]))),128))])])],64)):n(`v-if`,!0)],2)):(l(),r(e,{key:1},[n(` 加载完成后显示插槽内容 `),d(t.$slots,`default`)],2112))}});export{D as t};
|
|
2
|
+
//# sourceMappingURL=C_Skeleton2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"C_Skeleton2.js","names":["preset","repeat"],"sources":["../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue","../src/components/C_Skeleton/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2026-03-06\n * @Description: C_Skeleton 业务级骨架屏组件\n * 提供 8 种预设模式:text / avatar / card / table / form / list / detail / image\n * Copyright (c) 2026 by CHENY, All Rights Reserved 😎.\n-->\n<template>\n <div\n v-if=\"props.loading\"\n class=\"c-skeleton\"\n :class=\"[`c-skeleton--${animationType}`]\"\n >\n <!-- text 预设 -->\n <template v-if=\"preset === 'text'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__text\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: i === repeat ? '60%' : '100%' }\"\n />\n </div>\n </template>\n\n <!-- avatar 预设 -->\n <template v-else-if=\"preset === 'avatar'\">\n <div class=\"c-skeleton__avatar-group\">\n <div class=\"c-skeleton__circle c-skeleton__item\" />\n <div class=\"c-skeleton__avatar-text\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 40%\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n </template>\n\n <!-- image 预设 -->\n <template v-else-if=\"preset === 'image'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__image c-skeleton__item\"\n >\n <div class=\"c-skeleton__image-icon\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n width=\"32\"\n height=\"32\"\n >\n <path\n d=\"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z\"\n />\n </svg>\n </div>\n </div>\n </template>\n\n <!-- card 预设 -->\n <template v-else-if=\"preset === 'card'\">\n <div\n v-for=\"i in repeat\"\n :key=\"i\"\n class=\"c-skeleton__card\"\n >\n <div\n v-if=\"cardConfig.showCover\"\n class=\"c-skeleton__card-cover c-skeleton__item\"\n />\n <div class=\"c-skeleton__card-body\">\n <div\n v-for=\"t in cardConfig.titleLines\"\n :key=\"`t-${t}`\"\n class=\"c-skeleton__line c-skeleton__item\"\n :style=\"{ width: t === cardConfig.titleLines ? '50%' : '80%' }\"\n />\n <div class=\"c-skeleton__card-desc\">\n <div\n v-for=\"d in cardConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === cardConfig.descLines ? '70%' : '100%',\n }\"\n />\n </div>\n </div>\n <div\n v-if=\"cardConfig.showFooter\"\n class=\"c-skeleton__card-footer\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- table 预设 -->\n <template v-else-if=\"preset === 'table'\">\n <div class=\"c-skeleton__table\">\n <div\n v-if=\"tableConfig.showHeader\"\n class=\"c-skeleton__table-header\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`h-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 60%\"\n />\n </div>\n </div>\n <div\n v-for=\"r in tableConfig.rows\"\n :key=\"`r-${r}`\"\n class=\"c-skeleton__table-row\"\n >\n <div\n v-for=\"c in tableConfig.cols\"\n :key=\"`c-${c}`\"\n class=\"c-skeleton__table-cell\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: `${Math.floor(50 + ((r * c * 17) % 50))}%`,\n }\"\n />\n </div>\n <div\n v-if=\"tableConfig.showActions\"\n class=\"c-skeleton__table-cell c-skeleton__table-cell--action\"\n >\n <div class=\"c-skeleton__action-btns\">\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--mini\"\n style=\"width: 40px\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n\n <!-- form 预设 -->\n <template v-else-if=\"preset === 'form'\">\n <div\n class=\"c-skeleton__form\"\n :style=\"{ '--form-cols': formConfig.cols }\"\n >\n <div\n v-for=\"f in formConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__form-field\"\n >\n <div\n v-if=\"formConfig.showLabel\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${60 + ((f * 13) % 30)}px` }\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--input\"\n />\n </div>\n <div\n v-if=\"formConfig.showActions\"\n class=\"c-skeleton__form-actions\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 100px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--btn\"\n style=\"width: 80px\"\n />\n </div>\n </div>\n </template>\n\n <!-- list 预设 -->\n <template v-else-if=\"preset === 'list'\">\n <div\n v-for=\"i in listConfig.items\"\n :key=\"i\"\n class=\"c-skeleton__list-item\"\n >\n <div\n v-if=\"listConfig.showAvatar\"\n class=\"c-skeleton__circle c-skeleton__circle--sm c-skeleton__item\"\n />\n <div class=\"c-skeleton__list-content\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 30%\"\n />\n <div\n v-for=\"d in listConfig.descLines\"\n :key=\"`d-${d}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: d === listConfig.descLines ? '50%' : '90%',\n }\"\n />\n </div>\n </div>\n </template>\n\n <!-- detail 预设 -->\n <template v-else-if=\"preset === 'detail'\">\n <div class=\"c-skeleton__detail\">\n <div\n v-if=\"detailConfig.showAvatar\"\n class=\"c-skeleton__detail-header\"\n >\n <div\n class=\"c-skeleton__circle c-skeleton__circle--lg c-skeleton__item\"\n />\n <div class=\"c-skeleton__detail-title\">\n <div\n class=\"c-skeleton__line c-skeleton__item\"\n style=\"width: 120px\"\n />\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n style=\"width: 200px\"\n />\n </div>\n </div>\n <div class=\"c-skeleton__detail-body\">\n <div\n v-for=\"f in detailConfig.fields\"\n :key=\"f\"\n class=\"c-skeleton__detail-field\"\n >\n <div\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--label\"\n :style=\"{ width: `${50 + ((f * 17) % 40)}px` }\"\n />\n <div class=\"c-skeleton__detail-value\">\n <div\n v-for=\"v in detailConfig.valueLines\"\n :key=\"`v-${v}`\"\n class=\"c-skeleton__line c-skeleton__item c-skeleton__line--sm\"\n :style=\"{\n width: v === detailConfig.valueLines ? '60%' : '100%',\n }\"\n />\n </div>\n </div>\n </div>\n </div>\n </template>\n </div>\n\n <!-- 加载完成后显示插槽内容 -->\n <slot v-else />\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue'\n import type {\n SkeletonProps,\n SkeletonTableConfig,\n SkeletonFormConfig,\n SkeletonListConfig,\n SkeletonCardConfig,\n SkeletonDetailConfig,\n } from './types'\n\n defineOptions({ name: 'C_Skeleton' })\n\n const props = withDefaults(defineProps<SkeletonProps>(), {\n preset: 'text',\n loading: true,\n animation: 'wave',\n repeat: 3,\n borderRadius: '4px',\n })\n\n const animationType = computed(() =>\n props.animation === false ? 'none' : props.animation\n )\n\n const tableConfig = computed<Required<SkeletonTableConfig>>(() => ({\n rows: props.table?.rows ?? 5,\n cols: props.table?.cols ?? 4,\n showHeader: props.table?.showHeader ?? true,\n showActions: props.table?.showActions ?? true,\n }))\n\n const formConfig = computed<Required<SkeletonFormConfig>>(() => ({\n fields: props.form?.fields ?? 6,\n cols: props.form?.cols ?? 2,\n showLabel: props.form?.showLabel ?? true,\n showActions: props.form?.showActions ?? true,\n }))\n\n const listConfig = computed<Required<SkeletonListConfig>>(() => ({\n items: props.list?.items ?? 5,\n showAvatar: props.list?.showAvatar ?? true,\n descLines: props.list?.descLines ?? 2,\n }))\n\n const cardConfig = computed<Required<SkeletonCardConfig>>(() => ({\n showCover: props.card?.showCover ?? true,\n titleLines: props.card?.titleLines ?? 1,\n descLines: props.card?.descLines ?? 2,\n showFooter: props.card?.showFooter ?? true,\n }))\n\n const detailConfig = computed<Required<SkeletonDetailConfig>>(() => ({\n fields: props.detail?.fields ?? 6,\n valueLines: props.detail?.valueLines ?? 1,\n showAvatar: props.detail?.showAvatar ?? true,\n }))\n</script>\n\n<style lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_SplitPane-
|
|
1
|
+
{"version":3,"file":"C_SplitPane-Br2eK8IG.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=396d0f5b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-396d0f5b] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-396d0f5b] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-396d0f5b] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-396d0f5b], .c-split-pane--collapsed-second .split-panel[data-v-396d0f5b] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-396d0f5b] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-396d0f5b] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-396d0f5b] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-396d0f5b]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-396d0f5b] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-396d0f5b] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-396d0f5b] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-396d0f5b] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-396d0f5b] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-396d0f5b] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-396d0f5b] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n right: 8px;\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;;AAEA;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;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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_SplitPane-
|
|
1
|
+
{"version":3,"file":"C_SplitPane-DuyzUhKB.css","names":[],"sources":["../src/components/C_SplitPane/index.vue?vue&type=style&index=0&scoped=396d0f5b&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//* 分割面板组件样式 */\n.c-split-pane[data-v-396d0f5b] {\n display: flex;\n width: 100%;\n height: 100%;\n overflow: hidden;\n position: relative;\n /* ─── 方向 ────────────────────────────────── */\n /* ─── 拖拽中 ──────────────────────────────── */\n /* ─── 禁用 ────────────────────────────────── */\n /* ─── 折叠过渡 ────────────────────────────── */\n}\n.c-split-pane--horizontal[data-v-396d0f5b] {\n flex-direction: row;\n}\n.c-split-pane--vertical[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--dragging .split-panel__content[data-v-396d0f5b] {\n pointer-events: none;\n user-select: none;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b] {\n cursor: default !important;\n opacity: 0.5;\n}\n.c-split-pane--disabled .split-gutter[data-v-396d0f5b]:hover {\n background: transparent;\n}\n.c-split-pane--collapsed-first .split-panel[data-v-396d0f5b], .c-split-pane--collapsed-second .split-panel[data-v-396d0f5b] {\n transition: width 0.3s ease, height 0.3s ease;\n}\n\n/* ─── 面板 ──────────────────────────────────── */\n.split-panel[data-v-396d0f5b] {\n overflow: hidden;\n position: relative;\n}\n.split-panel__content[data-v-396d0f5b] {\n width: 100%;\n height: 100%;\n overflow: auto;\n}\n\n/* ─── 分割线手柄 ────────────────────────────── */\n.split-gutter[data-v-396d0f5b] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1;\n background: var(--c-border, #e1e4e8);\n transition: background-color 0.2s ease;\n outline: none;\n /* 水平方向 */\n /* 垂直方向 */\n /* focus 轮廓 */\n /* ─── 视觉指示条 ──────────────────────────── */\n /* ─── 折叠按钮 ────────────────────────────── */\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b] {\n cursor: col-resize;\n min-width: 4px;\n}\n.c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--horizontal .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b] {\n cursor: row-resize;\n min-height: 4px;\n}\n.c-split-pane--vertical .split-gutter[data-v-396d0f5b]:hover, .c-split-pane--vertical .split-gutter[data-v-396d0f5b]:focus-visible {\n background: var(--c-primary, #409eff);\n}\n.split-gutter[data-v-396d0f5b]:focus-visible {\n box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);\n}\n.split-gutter__visual[data-v-396d0f5b] {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.split-gutter__dots[data-v-396d0f5b] {\n display: flex;\n gap: 2px;\n}\n.c-split-pane--horizontal .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: column;\n}\n.c-split-pane--vertical .split-gutter__dots[data-v-396d0f5b] {\n flex-direction: row;\n}\n.split-gutter__dot[data-v-396d0f5b] {\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background: var(--c-text-4, #ccc);\n transition: background-color 0.2s ease;\n}\n.split-gutter:hover .split-gutter__dot[data-v-396d0f5b] {\n background: #fff;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b] {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 16px;\n padding: 0;\n border: 1px solid var(--c-border, #e1e4e8);\n border-radius: 50%;\n background: var(--c-bg-card, #fff);\n color: var(--c-text-3, #999);\n font-size: 12px;\n cursor: pointer;\n opacity: 0;\n transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;\n z-index: 2;\n /* 水平方向的定位 */\n /* 垂直方向的定位 */\n}\n.split-gutter:hover .split-gutter__collapse-btn[data-v-396d0f5b] {\n opacity: 1;\n}\n.split-gutter__collapse-btn[data-v-396d0f5b]:hover {\n color: var(--c-primary, #409eff);\n background: var(--c-bg, #fff);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn[data-v-396d0f5b] {\n left: 50%;\n transform: translateX(-50%);\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n top: 8px;\n}\n.c-split-pane--horizontal .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n bottom: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn[data-v-396d0f5b] {\n top: 50%;\n transform: translateY(-50%);\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--first[data-v-396d0f5b] {\n left: 8px;\n}\n.c-split-pane--vertical .split-gutter__collapse-btn--second[data-v-396d0f5b] {\n right: 8px;\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;;AAEA;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;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"}
|