@robot-admin/naive-ui-components 0.6.28 → 0.6.29
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-DYG0Yf3A.css.map +1 -0
- package/dist/C_ActionBar-MAjRhqcI.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-A3NXx_sF.css.map → C_AntV-BY8jqqmi.css.map} +1 -1
- package/dist/{C_AntV-D2Zp2qQF.css.map → C_AntV-BbkHc-_a.css.map} +1 -1
- package/dist/C_AntV.css +78 -78
- package/dist/C_AntV.js.map +1 -1
- package/dist/C_AntV2.js +2 -2
- package/dist/C_AntV2.js.map +1 -1
- package/dist/{C_AudioPlayer-CXl4yP_m.css.map → C_AudioPlayer-DKRIGhi7.css.map} +1 -1
- package/dist/{C_AudioPlayer-CcBtt71m.css.map → C_AudioPlayer-DlB6eNsa.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-CtPhfH9h.css.map → C_AvatarGroup-D02zci-i.css.map} +1 -1
- package/dist/{C_AvatarGroup-M1dNPH3E.css.map → C_AvatarGroup-DatHaUlY.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-DjTmDkbQ.css.map → C_Barcode-DYDRDe2O.css.map} +1 -1
- package/dist/{C_Barcode-Do1Ozsmh.css.map → C_Barcode-muJdc_O4.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-CZmAETly.css.map → C_Captcha-9_hk6VmY.css.map} +1 -1
- package/dist/{C_Captcha-Ccq3DMrR.css.map → C_Captcha-MtASlJ0f.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-CcdWgVE8.css.map → C_Chat-CcjZdAwu.css.map} +1 -1
- package/dist/{C_Chat-Cx0woEEe.css.map → C_Chat-Diq7tyWU.css.map} +1 -1
- package/dist/C_Chat.css +65 -65
- 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-Cv5BESaN.css.map → C_City-Bam08Qv3.css.map} +1 -1
- package/dist/{C_City-DNKv4MpH.css.map → C_City-Bb3W-KaN.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-BFi5xxnM.css.map +1 -0
- package/dist/C_Code-CZ7yfnri.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_ContextMenu-CCsCeI39.css.map → C_ContextMenu-B3Cgz_wJ.css.map} +1 -1
- package/dist/{C_ContextMenu-DOTBeltf.css.map → C_ContextMenu-u1LixF3_.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-C0-8b5af.css.map → C_Cron-Civir5-I.css.map} +1 -1
- package/dist/{C_Cron-DqHQ92LN.css.map → C_Cron-iw3qpMsy.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-Bq6o0qXn.css.map → C_Draggable-BCjIvIwT.css.map} +1 -1
- package/dist/{C_Draggable-r6nhx3yM.css.map → C_Draggable-DwkSlCOS.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_FilePreview-BVarVvnD.css.map → C_FilePreview-BhcbiXsV.css.map} +1 -1
- package/dist/{C_FilePreview-DHGlV4OR.css.map → C_FilePreview-DJudcIbW.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-BciQUPpS.css.map → C_Form-BtcAPIRi.css.map} +1 -1
- package/dist/{C_Form-CKHvXL3O.css.map → C_Form-D_gwQ7hC.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-Bmd2CmG6.css.map → C_FormSearch-Bi4XYjjk.css.map} +1 -1
- package/dist/{C_FormSearch-DBNtnjaL.css.map → C_FormSearch-DUGOoX0u.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-3WG2vtQl.css.map → C_FormulaEditor-CJk3SSUJ.css.map} +1 -1
- package/dist/{C_FormulaEditor-Cm0CokN5.css.map → C_FormulaEditor-Cy7mjfVO.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-BQA0OjGB.css.map +1 -0
- package/dist/C_FullCalendar-ChJUosAi.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-B6wK3m3k.css.map → C_GlobalSearch-BNtNpLLD.css.map} +1 -1
- package/dist/{C_GlobalSearch-DoPjldFm.css.map → C_GlobalSearch-BlMeQ2D9.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_Icon.js.map +1 -1
- package/dist/C_Icon2.js.map +1 -1
- package/dist/{C_ImageCropper-D3L2-J_J.css.map → C_ImageCropper-BqZpkZfU.css.map} +1 -1
- package/dist/{C_ImageCropper-DrmUlaLi.css.map → C_ImageCropper-CylwGuzS.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-Cst_W1XC.css.map → C_Login-BkdnkBKX.css.map} +1 -1
- package/dist/{C_Login-DWZ_6K1x.css.map → C_Login-VkMM6OJ2.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-BCJmDnJT.css.map → C_Map-DNnBcY70.css.map} +1 -1
- package/dist/{C_Map-WUMXSAfy.css.map → C_Map-LEXIx6zM.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-7iBnLDtL.css.map → C_Markdown-Kujzx1qG.css.map} +1 -1
- package/dist/{C_Markdown-BbTvdFCl.css.map → C_Markdown-YCAmBbNF.css.map} +1 -1
- package/dist/C_Markdown.css +33 -33
- 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_QRCode-DMxSyogU.css.map → C_QRCode-CFNTda_1.css.map} +1 -1
- package/dist/{C_QRCode-G7fiAkm4.css.map → C_QRCode-CmWr9lK-.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-BJMvVPWT.css.map → C_Signature-BDx4ctsE.css.map} +1 -1
- package/dist/{C_Signature-BJUHx2BF.css.map → C_Signature-Bz_uNbwv.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_SplitPane-Br2eK8IG.css.map → C_SplitPane-BOwr1C7K.css.map} +1 -1
- package/dist/{C_SplitPane-DuyzUhKB.css.map → C_SplitPane-N-a_D-7F.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-Bk1krgiR.css.map +1 -0
- package/dist/C_Steps-Dn2CMpy1.css.map +1 -0
- package/dist/C_Steps.css +38 -38
- 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-vZlcgH6x.css.map → C_Table-BV1wUw6f.css.map} +1 -1
- package/dist/{C_Table-wzAO43l0.css.map → C_Table-LlJ-JEdm.css.map} +1 -1
- package/dist/C_Table.css +93 -93
- package/dist/C_Table.js.map +1 -1
- package/dist/C_Table2.js +1 -1
- package/dist/C_Table2.js.map +1 -1
- package/dist/{C_TagsView-BsutyC3U.css.map → C_TagsView-JIkRrAHT.css.map} +1 -1
- package/dist/{C_TagsView-Crm7yWg9.css.map → C_TagsView-mrh0FN4H.css.map} +1 -1
- package/dist/C_TagsView.css +36 -36
- 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_Time-BzyQVvTS.css.map +1 -0
- package/dist/C_Time-DmpKLQHc.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.js.map +1 -1
- package/dist/C_Timeline2.js.map +1 -1
- package/dist/{C_Transfer-CCEqnC-v.css.map → C_Transfer-BOB6OBqS.css.map} +1 -1
- package/dist/{C_Transfer-CStPm4NP.css.map → C_Transfer-Dpq7ezWC.css.map} +1 -1
- package/dist/C_Transfer.css +31 -31
- 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-B-Le4hjQ.css.map → C_Tree-D98nX9qT.css.map} +1 -1
- package/dist/{C_Tree-DnGc_MPb.css.map → C_Tree-ulfm7b-P.css.map} +1 -1
- package/dist/C_Tree.css +33 -33
- package/dist/C_Tree.js.map +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Tree2.js.map +1 -1
- package/dist/{C_VideoPlayer-Cdgv4Zq0.css.map → C_VideoPlayer-4J96tKfK.css.map} +1 -1
- package/dist/{C_VideoPlayer-rm0MODUv.css.map → C_VideoPlayer-D35seHkm.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-BpY-Rng3.css.map → C_VtableGantt-C2lxFmWg.css.map} +1 -1
- package/dist/{C_VtableGantt-DB87-jdS.css.map → C_VtableGantt-Dwnkw_WL.css.map} +1 -1
- package/dist/C_VtableGantt.css +15 -15
- 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-7F6op6qN.css.map → C_WorkFlow-2hJfvvTK.css.map} +1 -1
- package/dist/{C_WorkFlow-Cy3HWA6A.css.map → C_WorkFlow-DHoNjl8-.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 +2 -2
- package/dist/constants3.d.ts +2 -2
- package/dist/constants4.d.ts +3 -3
- package/dist/constants5.d.ts +2 -2
- package/dist/data.d.ts +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.vue.d.ts +1 -1
- package/dist/index10.vue.d.ts +3 -3
- package/dist/index11.vue.d.ts +4 -4
- package/dist/index13.vue.d.ts +2 -2
- package/dist/index15.vue.d.ts +3 -3
- package/dist/index17.vue.d.ts +1 -1
- package/dist/index18.vue.d.ts +4 -4
- package/dist/index2.vue.d.ts +2 -2
- package/dist/index20.vue.d.ts +1 -1
- package/dist/index21.vue.d.ts +1 -1
- package/dist/index22.vue.d.ts +1 -1
- package/dist/index24.vue.d.ts +2 -2
- package/dist/index26.vue.d.ts +3 -3
- 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.map +1 -1
- package/dist/resolver.js.map +1 -1
- package/dist/style.css +1547 -1547
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.ts +3 -3
- package/dist/useCropperCore.d.ts +5 -5
- package/dist/useDraggableLayout.d.ts +9 -9
- package/dist/useDynamicFormState.d.ts +2 -2
- package/dist/useEdgeInteraction.d.ts +1 -1
- package/dist/useFullscreen.d.ts +2 -2
- package/dist/useInfiniteScroll.d.ts +1 -1
- package/dist/useQRCode.d.ts +3 -3
- package/dist/useSignatureHistory.d.ts +1 -1
- package/dist/useSplitResize.d.ts +5 -5
- package/dist/useTimeSelection.d.ts +2 -2
- package/dist/useTreeOperations.d.ts +1 -1
- package/package.json +1 -1
- package/dist/C_ActionBar-jZPsiXtT.css.map +0 -1
- package/dist/C_ActionBar-nnfbZCea.css.map +0 -1
- package/dist/C_Code-DPZlNSxL.css.map +0 -1
- package/dist/C_Code-avZjAnHD.css.map +0 -1
- package/dist/C_FullCalendar-1U4VlG7X.css.map +0 -1
- package/dist/C_FullCalendar-DLUdCtqf.css.map +0 -1
- package/dist/C_Steps-BHYNJI1l.css.map +0 -1
- package/dist/C_Steps-DY7vl-4I.css.map +0 -1
- package/dist/C_Time-Bd_e1YDN.css.map +0 -1
- package/dist/C_Time-CKb_fwdm.css.map +0 -1
package/dist/C_Draggable.css
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/* unplugin-vue-components disabled *//* ===== 容器布局样式 ===== */
|
|
2
|
-
.c-draggable-wrapper[data-v-
|
|
2
|
+
.c-draggable-wrapper[data-v-0d667b68] {
|
|
3
3
|
position: relative;
|
|
4
4
|
width: 100%;
|
|
5
5
|
}
|
|
6
|
-
.c-draggable-list[data-v-
|
|
6
|
+
.c-draggable-list[data-v-0d667b68] {
|
|
7
7
|
min-height: 50px;
|
|
8
8
|
width: 100%;
|
|
9
9
|
display: flex;
|
|
@@ -13,49 +13,49 @@
|
|
|
13
13
|
/* 弹性换行布局 */
|
|
14
14
|
/* 网格布局 */
|
|
15
15
|
}
|
|
16
|
-
.c-draggable-list.layout-vertical[data-v-
|
|
16
|
+
.c-draggable-list.layout-vertical[data-v-0d667b68] {
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
}
|
|
19
|
-
.c-draggable-list.layout-horizontal[data-v-
|
|
19
|
+
.c-draggable-list.layout-horizontal[data-v-0d667b68] {
|
|
20
20
|
flex-direction: row;
|
|
21
21
|
align-items: var(--align-items, stretch);
|
|
22
22
|
justify-content: var(--justify-content, flex-start);
|
|
23
23
|
}
|
|
24
|
-
.c-draggable-list.layout-horizontal.flex-wrap[data-v-
|
|
24
|
+
.c-draggable-list.layout-horizontal.flex-wrap[data-v-0d667b68] {
|
|
25
25
|
flex-wrap: wrap;
|
|
26
26
|
}
|
|
27
|
-
.c-draggable-list.layout-flex-wrap[data-v-
|
|
27
|
+
.c-draggable-list.layout-flex-wrap[data-v-0d667b68] {
|
|
28
28
|
flex-direction: row;
|
|
29
29
|
flex-wrap: wrap;
|
|
30
30
|
align-items: var(--align-items, stretch);
|
|
31
31
|
justify-content: var(--justify-content, flex-start);
|
|
32
32
|
}
|
|
33
|
-
.c-draggable-list.layout-grid[data-v-
|
|
33
|
+
.c-draggable-list.layout-grid[data-v-0d667b68] {
|
|
34
34
|
display: grid;
|
|
35
35
|
grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
|
|
36
36
|
grid-template-rows: var(--grid-rows, auto);
|
|
37
37
|
align-items: var(--align-items, stretch);
|
|
38
38
|
justify-content: var(--justify-content, stretch);
|
|
39
39
|
}
|
|
40
|
-
.c-draggable-list.layout-grid > .c-draggable-item[data-v-
|
|
40
|
+
.c-draggable-list.layout-grid > .c-draggable-item[data-v-0d667b68] {
|
|
41
41
|
width: 100%;
|
|
42
42
|
box-sizing: border-box;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
/* ===== 拖拽项目基础样式 ===== */
|
|
46
|
-
.c-draggable-item[data-v-
|
|
46
|
+
.c-draggable-item[data-v-0d667b68] {
|
|
47
47
|
position: relative;
|
|
48
48
|
}
|
|
49
|
-
.c-draggable-item.is-disabled[data-v-
|
|
49
|
+
.c-draggable-item.is-disabled[data-v-0d667b68] {
|
|
50
50
|
opacity: 0.6;
|
|
51
51
|
cursor: not-allowed;
|
|
52
52
|
}
|
|
53
|
-
.c-draggable-item.is-disabled[data-v-
|
|
53
|
+
.c-draggable-item.is-disabled[data-v-0d667b68] * {
|
|
54
54
|
cursor: not-allowed !important;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
/* ===== 默认项目样式 ===== */
|
|
58
|
-
.default-item[data-v-
|
|
58
|
+
.default-item[data-v-0d667b68] {
|
|
59
59
|
display: flex;
|
|
60
60
|
align-items: center;
|
|
61
61
|
padding: 16px;
|
|
@@ -66,15 +66,15 @@
|
|
|
66
66
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
67
67
|
position: relative;
|
|
68
68
|
}
|
|
69
|
-
.default-item[data-v-
|
|
69
|
+
.default-item[data-v-0d667b68]:hover {
|
|
70
70
|
border-color: var(--n-primary-color);
|
|
71
71
|
box-shadow: 0 2px 8px var(--n-box-shadow-color);
|
|
72
72
|
transform: translateY(-1px);
|
|
73
73
|
}
|
|
74
|
-
.default-item[data-v-
|
|
74
|
+
.default-item[data-v-0d667b68]:active {
|
|
75
75
|
cursor: grabbing;
|
|
76
76
|
}
|
|
77
|
-
.default-item .drag-handle[data-v-
|
|
77
|
+
.default-item .drag-handle[data-v-0d667b68] {
|
|
78
78
|
display: flex;
|
|
79
79
|
align-items: center;
|
|
80
80
|
justify-content: center;
|
|
@@ -87,21 +87,21 @@
|
|
|
87
87
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
88
88
|
flex-shrink: 0;
|
|
89
89
|
}
|
|
90
|
-
.default-item .drag-handle[data-v-
|
|
90
|
+
.default-item .drag-handle[data-v-0d667b68]:hover {
|
|
91
91
|
background: var(--n-action-color);
|
|
92
92
|
color: var(--n-primary-color);
|
|
93
93
|
}
|
|
94
|
-
.default-item .drag-handle[data-v-
|
|
94
|
+
.default-item .drag-handle[data-v-0d667b68]:active {
|
|
95
95
|
cursor: grabbing;
|
|
96
96
|
}
|
|
97
|
-
.default-item .drag-handle div[data-v-
|
|
97
|
+
.default-item .drag-handle div[data-v-0d667b68] {
|
|
98
98
|
font-size: 18px;
|
|
99
99
|
}
|
|
100
|
-
.default-item .item-content[data-v-
|
|
100
|
+
.default-item .item-content[data-v-0d667b68] {
|
|
101
101
|
flex: 1;
|
|
102
102
|
min-width: 0;
|
|
103
103
|
}
|
|
104
|
-
.default-item .item-content .item-title[data-v-
|
|
104
|
+
.default-item .item-content .item-title[data-v-0d667b68] {
|
|
105
105
|
font-size: 16px;
|
|
106
106
|
font-weight: 600;
|
|
107
107
|
color: var(--n-text-color);
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
margin-bottom: 4px;
|
|
110
110
|
word-break: break-word;
|
|
111
111
|
}
|
|
112
|
-
.default-item .item-content .item-description[data-v-
|
|
112
|
+
.default-item .item-content .item-description[data-v-0d667b68] {
|
|
113
113
|
font-size: 14px;
|
|
114
114
|
color: var(--n-text-color-disabled);
|
|
115
115
|
line-height: 1.4;
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
/* ===== 空状态样式 ===== */
|
|
120
|
-
.empty-state[data-v-
|
|
120
|
+
.empty-state[data-v-0d667b68] {
|
|
121
121
|
display: flex;
|
|
122
122
|
flex-direction: column;
|
|
123
123
|
align-items: center;
|
|
@@ -127,12 +127,12 @@
|
|
|
127
127
|
border: 2px dashed var(--n-border-color);
|
|
128
128
|
border-radius: 8px;
|
|
129
129
|
}
|
|
130
|
-
.empty-state .default-empty .empty-icon[data-v-
|
|
130
|
+
.empty-state .default-empty .empty-icon[data-v-0d667b68] {
|
|
131
131
|
font-size: 48px;
|
|
132
132
|
color: var(--n-text-color-disabled);
|
|
133
133
|
margin-bottom: 16px;
|
|
134
134
|
}
|
|
135
|
-
.empty-state .default-empty .empty-text[data-v-
|
|
135
|
+
.empty-state .default-empty .empty-text[data-v-0d667b68] {
|
|
136
136
|
color: var(--n-text-color-disabled);
|
|
137
137
|
font-size: 16px;
|
|
138
138
|
margin: 0;
|
|
@@ -159,80 +159,80 @@
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
/* ===== 网格布局特殊优化 ===== */
|
|
162
|
-
.c-draggable-list.layout-grid .c-draggable-item[data-v-
|
|
162
|
+
.c-draggable-list.layout-grid .c-draggable-item[data-v-0d667b68] {
|
|
163
163
|
display: flex;
|
|
164
164
|
flex-direction: column;
|
|
165
165
|
height: 100%;
|
|
166
166
|
}
|
|
167
|
-
.c-draggable-list.layout-grid .c-draggable-item .default-item[data-v-
|
|
167
|
+
.c-draggable-list.layout-grid .c-draggable-item .default-item[data-v-0d667b68] {
|
|
168
168
|
flex: 1;
|
|
169
169
|
height: 100%;
|
|
170
170
|
min-height: 80px;
|
|
171
171
|
}
|
|
172
|
-
.c-draggable-list.layout-grid + .empty-state[data-v-
|
|
172
|
+
.c-draggable-list.layout-grid + .empty-state[data-v-0d667b68] {
|
|
173
173
|
grid-column: 1/-1;
|
|
174
174
|
padding: 40px 20px;
|
|
175
175
|
}
|
|
176
|
-
.c-draggable-list.layout-grid + .empty-state .default-empty .empty-icon[data-v-
|
|
176
|
+
.c-draggable-list.layout-grid + .empty-state .default-empty .empty-icon[data-v-0d667b68] {
|
|
177
177
|
font-size: 36px;
|
|
178
178
|
}
|
|
179
179
|
|
|
180
180
|
/* ===== 弹性布局特殊优化 ===== */
|
|
181
|
-
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-
|
|
182
|
-
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-
|
|
181
|
+
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-0d667b68],
|
|
182
|
+
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-0d667b68] {
|
|
183
183
|
flex-shrink: 0;
|
|
184
184
|
}
|
|
185
|
-
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-
|
|
186
|
-
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-
|
|
185
|
+
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-0d667b68]:not(:last-child),
|
|
186
|
+
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-0d667b68]:not(:last-child) {
|
|
187
187
|
margin-right: 0;
|
|
188
188
|
}
|
|
189
|
-
.c-draggable-list.layout-horizontal .default-item[data-v-
|
|
190
|
-
.c-draggable-list.layout-flex-wrap .default-item[data-v-
|
|
189
|
+
.c-draggable-list.layout-horizontal .default-item[data-v-0d667b68],
|
|
190
|
+
.c-draggable-list.layout-flex-wrap .default-item[data-v-0d667b68] {
|
|
191
191
|
min-width: 200px;
|
|
192
192
|
width: 100%;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
195
|
/* ===== 响应式设计 ===== */
|
|
196
196
|
@media (max-width: 768px) {
|
|
197
|
-
.c-draggable-list.layout-grid[data-v-
|
|
197
|
+
.c-draggable-list.layout-grid[data-v-0d667b68] {
|
|
198
198
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
199
199
|
}
|
|
200
|
-
.c-draggable-list.layout-horizontal[data-v-
|
|
200
|
+
.c-draggable-list.layout-horizontal[data-v-0d667b68] {
|
|
201
201
|
flex-wrap: wrap;
|
|
202
202
|
}
|
|
203
|
-
.default-item[data-v-
|
|
203
|
+
.default-item[data-v-0d667b68] {
|
|
204
204
|
padding: 12px;
|
|
205
205
|
min-width: 150px !important;
|
|
206
206
|
}
|
|
207
|
-
.default-item .drag-handle[data-v-
|
|
207
|
+
.default-item .drag-handle[data-v-0d667b68] {
|
|
208
208
|
width: 20px;
|
|
209
209
|
height: 20px;
|
|
210
210
|
margin-right: 8px;
|
|
211
211
|
}
|
|
212
|
-
.default-item .drag-handle div[data-v-
|
|
212
|
+
.default-item .drag-handle div[data-v-0d667b68] {
|
|
213
213
|
font-size: 16px;
|
|
214
214
|
}
|
|
215
|
-
.default-item .item-content .item-title[data-v-
|
|
215
|
+
.default-item .item-content .item-title[data-v-0d667b68] {
|
|
216
216
|
font-size: 15px;
|
|
217
217
|
}
|
|
218
|
-
.default-item .item-content .item-description[data-v-
|
|
218
|
+
.default-item .item-content .item-description[data-v-0d667b68] {
|
|
219
219
|
font-size: 13px;
|
|
220
220
|
}
|
|
221
|
-
.empty-state[data-v-
|
|
221
|
+
.empty-state[data-v-0d667b68] {
|
|
222
222
|
padding: 40px 16px;
|
|
223
223
|
}
|
|
224
|
-
.empty-state .default-empty .empty-icon[data-v-
|
|
224
|
+
.empty-state .default-empty .empty-icon[data-v-0d667b68] {
|
|
225
225
|
font-size: 36px;
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
228
|
@media (max-width: 480px) {
|
|
229
|
-
.c-draggable-list.layout-grid[data-v-
|
|
229
|
+
.c-draggable-list.layout-grid[data-v-0d667b68] {
|
|
230
230
|
grid-template-columns: 1fr !important;
|
|
231
231
|
}
|
|
232
|
-
.default-item[data-v-
|
|
232
|
+
.default-item[data-v-0d667b68] {
|
|
233
233
|
min-width: 100% !important;
|
|
234
234
|
padding: 10px;
|
|
235
235
|
}
|
|
236
236
|
}
|
|
237
237
|
|
|
238
|
-
/*# sourceMappingURL=C_Draggable-
|
|
238
|
+
/*# sourceMappingURL=C_Draggable-BCjIvIwT.css.map*/
|
package/dist/C_Draggable.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Draggable.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Draggable.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
|
package/dist/C_Draggable2.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,isRef as c,mergeProps as l,nextTick as u,normalizeClass as d,openBlock as f,readonly as p,ref as m,renderList as h,renderSlot as g,toDisplayString as _,unref as v,withCtx as y}from"vue";import{VueDraggable as b}from"vue-draggable-plus";function x(e,t){let r=m(!1),i=n({get:()=>e.modelValue??[],set:e=>{t(`update:modelValue`,e),t(`list-change`,e)}});return{isDragging:r,internalList:i,isEmpty:n(()=>(e.modelValue??[]).length===0),listClasses:n(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),listStyles:n(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),draggableOptions:n(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),getItemKey:(t,n)=>e.itemKey?e.itemKey(t,n):t.id??n,getItemTitle:t=>e.itemTitle?e.itemTitle(t):t.title||t.name||t.label||String(t.id)||`未命名项目`,getItemDescription:t=>e.itemDescription?e.itemDescription(t):t.description||``,getItemClass:t=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],handleStart:e=>{r.value=!0;let n=i.value[e.oldIndex];n&&t(`drag-start`,{oldIndex:e.oldIndex,newIndex:e.oldIndex,item:n})},handleEnd:e=>{let n=i.value[e.newIndex];n&&t(`drag-end`,{oldIndex:e.oldIndex,newIndex:e.newIndex,item:n}),u(()=>{r.value=!1})},handleAdd:e=>{let n=i.value[e.newIndex];n&&t(`item-add`,n,e.newIndex)},handleRemove:e=>{e.item&&t(`item-remove`,e.item,e.oldIndex)},handleUpdate:e=>{},addItem:(e,t)=>{let n=[...i.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),i.value=n},removeItem:e=>{if(e>=0&&e<i.value.length){let t=[...i.value],[n]=t.splice(e,1);return i.value=t,n}return null},moveItem:(e,t)=>{let n=i.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[a]=r.splice(e,1);return r.splice(t,0,a),i.value=r,!0}return!1},updateList:e=>{i.value=[...e]},clear:()=>{i.value=[]},getItem:e=>i.value[e],findIndex:e=>i.value.findIndex(e)}}const S=[`data-index`],C={class:`default-item`},w={key:0,class:`drag-handle`},T={class:`item-content`},E={class:`item-title`},D={key:0,class:`item-description`},O={key:0,class:`empty-state`},k={class:`default-empty`},A={class:`empty-text`};var j=e(s({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{default:`default`},sort:{type:Boolean,default:!0},animation:{default:200},delay:{default:0},handle:{default:``},showHandle:{type:Boolean,default:!1},ghostClass:{default:`sortable-ghost`},chosenClass:{default:`sortable-chosen`},dragClass:{default:`sortable-drag`},wrapperClass:{default:``},listClass:{default:``},itemClass:{default:``},showEmptyState:{type:Boolean,default:!0},emptyText:{default:`暂无数据`},itemKey:{},itemTitle:{},itemDescription:{},swapThreshold:{default:1},invertSwap:{type:Boolean,default:!1},direction:{default:`vertical`},layout:{default:`vertical`},gridColumns:{default:4},gridRows:{default:void 0},gap:{default:`8px`},flexWrap:{type:Boolean,default:!1},justifyContent:{default:`flex-start`},alignItems:{default:`stretch`},customStyles:{default:()=>({})}},emits:[`update:modelValue`,`drag-start`,`drag-end`,`item-add`,`item-remove`,`list-change`],setup(e,{expose:n,emit:s}){let{isDragging:u,internalList:m,isEmpty:j,listClasses:M,listStyles:N,draggableOptions:P,getItemKey:F,getItemTitle:I,getItemDescription:L,getItemClass:R,handleStart:z,handleEnd:B,handleAdd:V,handleRemove:H,handleUpdate:U,addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}=x(e,s);return n({isDragging:p(u),list:p(m),isEmpty:p(j),addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}),(e,n)=>(f(),i(`div`,{class:d([`c-draggable-wrapper`,e.wrapperClass])},[o(v(b),l({modelValue:v(m),"onUpdate:modelValue":n[0]||=e=>c(m)?m.value=e:null},v(P),{class:v(M),style:v(N),onStart:v(z),onEnd:v(B),onAdd:v(V),onRemove:v(H),onUpdate:v(U)}),{default:y(()=>[(f(!0),i(t,null,h(v(m),(t,o)=>(f(),i(`div`,{key:v(F)(t,o),class:d(v(R)(o)),"data-index":o},[g(e.$slots,`default`,{item:t,index:o,isDragging:v(u),isDisabled:e.disabled},()=>[a(`div`,C,[e.showHandle?(f(),i(`div`,w,n[1]||=[a(`div`,{class:`i-mdi:drag-vertical`},null,-1)])):r(`v-if`,!0),a(`div`,T,[a(`div`,E,_(v(I)(t)),1),v(L)(t)?(f(),i(`div`,D,_(v(L)(t)),1)):r(`v-if`,!0)])])],!0)],10,S))),128))]),_:3},16,[`modelValue`,`class`,`style`,`onStart`,`onEnd`,`onAdd`,`onRemove`,`onUpdate`]),v(j)&&e.showEmptyState?(f(),i(`div`,O,[g(e.$slots,`empty`,{},()=>[a(`div`,k,[n[2]||=a(`div`,{class:`empty-icon i-mdi:inbox-outline`},null,-1),a(`p`,A,_(e.emptyText),1)])],!0)])):r(`v-if`,!0)],2))}}),[[`__scopeId`,`data-v-
|
|
1
|
+
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,isRef as c,mergeProps as l,nextTick as u,normalizeClass as d,openBlock as f,readonly as p,ref as m,renderList as h,renderSlot as g,toDisplayString as _,unref as v,withCtx as y}from"vue";import{VueDraggable as b}from"vue-draggable-plus";function x(e,t){let r=m(!1),i=n({get:()=>e.modelValue??[],set:e=>{t(`update:modelValue`,e),t(`list-change`,e)}});return{isDragging:r,internalList:i,isEmpty:n(()=>(e.modelValue??[]).length===0),listClasses:n(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),listStyles:n(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),draggableOptions:n(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),getItemKey:(t,n)=>e.itemKey?e.itemKey(t,n):t.id??n,getItemTitle:t=>e.itemTitle?e.itemTitle(t):t.title||t.name||t.label||String(t.id)||`未命名项目`,getItemDescription:t=>e.itemDescription?e.itemDescription(t):t.description||``,getItemClass:t=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],handleStart:e=>{r.value=!0;let n=i.value[e.oldIndex];n&&t(`drag-start`,{oldIndex:e.oldIndex,newIndex:e.oldIndex,item:n})},handleEnd:e=>{let n=i.value[e.newIndex];n&&t(`drag-end`,{oldIndex:e.oldIndex,newIndex:e.newIndex,item:n}),u(()=>{r.value=!1})},handleAdd:e=>{let n=i.value[e.newIndex];n&&t(`item-add`,n,e.newIndex)},handleRemove:e=>{e.item&&t(`item-remove`,e.item,e.oldIndex)},handleUpdate:e=>{},addItem:(e,t)=>{let n=[...i.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),i.value=n},removeItem:e=>{if(e>=0&&e<i.value.length){let t=[...i.value],[n]=t.splice(e,1);return i.value=t,n}return null},moveItem:(e,t)=>{let n=i.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[a]=r.splice(e,1);return r.splice(t,0,a),i.value=r,!0}return!1},updateList:e=>{i.value=[...e]},clear:()=>{i.value=[]},getItem:e=>i.value[e],findIndex:e=>i.value.findIndex(e)}}const S=[`data-index`],C={class:`default-item`},w={key:0,class:`drag-handle`},T={class:`item-content`},E={class:`item-title`},D={key:0,class:`item-description`},O={key:0,class:`empty-state`},k={class:`default-empty`},A={class:`empty-text`};var j=e(s({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{default:`default`},sort:{type:Boolean,default:!0},animation:{default:200},delay:{default:0},handle:{default:``},showHandle:{type:Boolean,default:!1},ghostClass:{default:`sortable-ghost`},chosenClass:{default:`sortable-chosen`},dragClass:{default:`sortable-drag`},wrapperClass:{default:``},listClass:{default:``},itemClass:{default:``},showEmptyState:{type:Boolean,default:!0},emptyText:{default:`暂无数据`},itemKey:{},itemTitle:{},itemDescription:{},swapThreshold:{default:1},invertSwap:{type:Boolean,default:!1},direction:{default:`vertical`},layout:{default:`vertical`},gridColumns:{default:4},gridRows:{default:void 0},gap:{default:`8px`},flexWrap:{type:Boolean,default:!1},justifyContent:{default:`flex-start`},alignItems:{default:`stretch`},customStyles:{default:()=>({})}},emits:[`update:modelValue`,`drag-start`,`drag-end`,`item-add`,`item-remove`,`list-change`],setup(e,{expose:n,emit:s}){let{isDragging:u,internalList:m,isEmpty:j,listClasses:M,listStyles:N,draggableOptions:P,getItemKey:F,getItemTitle:I,getItemDescription:L,getItemClass:R,handleStart:z,handleEnd:B,handleAdd:V,handleRemove:H,handleUpdate:U,addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}=x(e,s);return n({isDragging:p(u),list:p(m),isEmpty:p(j),addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}),(e,n)=>(f(),i(`div`,{class:d([`c-draggable-wrapper`,e.wrapperClass])},[o(v(b),l({modelValue:v(m),"onUpdate:modelValue":n[0]||=e=>c(m)?m.value=e:null},v(P),{class:v(M),style:v(N),onStart:v(z),onEnd:v(B),onAdd:v(V),onRemove:v(H),onUpdate:v(U)}),{default:y(()=>[(f(!0),i(t,null,h(v(m),(t,o)=>(f(),i(`div`,{key:v(F)(t,o),class:d(v(R)(o)),"data-index":o},[g(e.$slots,`default`,{item:t,index:o,isDragging:v(u),isDisabled:e.disabled},()=>[a(`div`,C,[e.showHandle?(f(),i(`div`,w,n[1]||=[a(`div`,{class:`i-mdi:drag-vertical`},null,-1)])):r(`v-if`,!0),a(`div`,T,[a(`div`,E,_(v(I)(t)),1),v(L)(t)?(f(),i(`div`,D,_(v(L)(t)),1)):r(`v-if`,!0)])])],!0)],10,S))),128))]),_:3},16,[`modelValue`,`class`,`style`,`onStart`,`onEnd`,`onAdd`,`onRemove`,`onUpdate`]),v(j)&&e.showEmptyState?(f(),i(`div`,O,[g(e.$slots,`empty`,{},()=>[a(`div`,k,[n[2]||=a(`div`,{class:`empty-icon i-mdi:inbox-outline`},null,-1),a(`p`,A,_(e.emptyText),1)])],!0)])):r(`v-if`,!0)],2))}}),[[`__scopeId`,`data-v-0d667b68`]]);export{x as n,j as t};
|
|
2
2
|
//# sourceMappingURL=C_Draggable2.js.map
|
package/dist/C_Draggable2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Draggable2.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-25\r\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\r\n <VueDraggable\r\n v-model=\"internalList\"\r\n v-bind=\"draggableOptions\"\r\n :class=\"listClasses\"\r\n :style=\"listStyles\"\r\n @start=\"handleStart\"\r\n @end=\"handleEnd\"\r\n @add=\"handleAdd\"\r\n @remove=\"handleRemove\"\r\n @update=\"handleUpdate\"\r\n >\r\n <div\r\n v-for=\"(item, index) in internalList\"\r\n :key=\"getItemKey(item, index)\"\r\n :class=\"getItemClass(index)\"\r\n :data-index=\"index\"\r\n >\r\n <slot\r\n :item=\"item\"\r\n :index=\"index\"\r\n :is-dragging=\"isDragging\"\r\n :is-disabled=\"disabled\"\r\n >\r\n <div class=\"default-item\">\r\n <div v-if=\"showHandle\" class=\"drag-handle\">\r\n <div class=\"i-mdi:drag-vertical\"></div>\r\n </div>\r\n <div class=\"item-content\">\r\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\r\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\r\n {{ getItemDescription(item) }}\r\n </div>\r\n </div>\r\n </div>\r\n </slot>\r\n </div>\r\n </VueDraggable>\r\n\r\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\r\n <slot name=\"empty\">\r\n <div class=\"default-empty\">\r\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\r\n <p class=\"empty-text\">{{ emptyText }}</p>\r\n </div>\r\n </slot>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { readonly } from \"vue\";\r\nimport { VueDraggable } from \"vue-draggable-plus\";\r\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\r\nimport type { DraggableProps, DraggableEmits } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_Draggable\" });\r\n\r\nconst props = withDefaults(defineProps<DraggableProps>(), {\r\n modelValue: () => [],\r\n disabled: false,\r\n group: \"default\",\r\n sort: true,\r\n animation: 200,\r\n delay: 0,\r\n handle: \"\",\r\n showHandle: false,\r\n ghostClass: \"sortable-ghost\",\r\n chosenClass: \"sortable-chosen\",\r\n dragClass: \"sortable-drag\",\r\n wrapperClass: \"\",\r\n listClass: \"\",\r\n itemClass: \"\",\r\n showEmptyState: true,\r\n emptyText: \"暂无数据\",\r\n swapThreshold: 1,\r\n invertSwap: false,\r\n direction: \"vertical\",\r\n layout: \"vertical\",\r\n gridColumns: 4,\r\n gridRows: undefined,\r\n gap: \"8px\",\r\n flexWrap: false,\r\n justifyContent: \"flex-start\",\r\n alignItems: \"stretch\",\r\n customStyles: () => ({}),\r\n});\r\n\r\nconst emit = defineEmits<DraggableEmits>();\r\n\r\nconst {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n} = useDraggableLayout(props, emit);\r\n\r\ndefineExpose({\r\n isDragging: readonly(isDragging),\r\n list: readonly(internalList),\r\n isEmpty: readonly(isEmpty),\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Draggable2.js","names":["wrapperClass","disabled","showHandle","showEmptyState","emptyText"],"sources":["../src/components/C_Draggable/composables/useDraggableLayout.ts","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue","../src/components/C_Draggable/index.vue"],"sourcesContent":["import { ref, computed, nextTick } from \"vue\";\r\nimport type { DraggableItem, DragEvent, DraggableProps } from \"../types\";\r\n\r\ntype EmitFn = {\r\n (event: \"update:modelValue\", value: DraggableItem[]): void;\r\n (event: \"drag-start\", dragEvent: DragEvent): void;\r\n (event: \"drag-end\", dragEvent: DragEvent): void;\r\n (event: \"item-add\", item: DraggableItem, index: number): void;\r\n (event: \"item-remove\", item: DraggableItem, index: number): void;\r\n (event: \"list-change\", list: DraggableItem[]): void;\r\n};\r\n\r\nexport function useDraggableLayout(props: DraggableProps, emit: EmitFn) {\r\n const isDragging = ref(false);\r\n\r\n const internalList = computed({\r\n get: () => props.modelValue ?? [],\r\n set: (value: DraggableItem[]) => {\r\n emit(\"update:modelValue\", value);\r\n emit(\"list-change\", value);\r\n },\r\n });\r\n\r\n const isEmpty = computed(() => (props.modelValue ?? []).length === 0);\r\n\r\n const listClasses = computed(() => [\r\n \"c-draggable-list\",\r\n props.listClass,\r\n `layout-${props.layout}`,\r\n {\r\n \"flex-wrap\":\r\n props.flexWrap &&\r\n (props.layout === \"horizontal\" || props.layout === \"flex-wrap\"),\r\n },\r\n ]);\r\n\r\n const listStyles = computed(() => {\r\n const styles: Record<string, string | number> = {\r\n \"--gap\":\r\n typeof props.gap === \"number\" ? `${props.gap}px` : (props.gap ?? \"8px\"),\r\n \"--grid-columns\": props.gridColumns ?? 4,\r\n \"--justify-content\": props.justifyContent ?? \"flex-start\",\r\n \"--align-items\": props.alignItems ?? \"stretch\",\r\n ...props.customStyles,\r\n };\r\n if (props.gridRows) {\r\n styles[\"--grid-rows\"] = props.gridRows;\r\n }\r\n return styles;\r\n });\r\n\r\n const draggableOptions = computed(() => {\r\n const options: Record<string, any> = {\r\n disabled: props.disabled,\r\n group: props.group,\r\n sort: props.sort,\r\n animation: props.animation,\r\n delay: props.delay,\r\n ghostClass: props.ghostClass,\r\n chosenClass: props.chosenClass,\r\n dragClass: props.dragClass,\r\n swapThreshold: props.swapThreshold,\r\n invertSwap: props.invertSwap,\r\n direction: props.direction,\r\n forceFallback: false,\r\n };\r\n if (props.handle) {\r\n options.handle = props.handle;\r\n } else if (props.showHandle) {\r\n options.handle = \".drag-handle\";\r\n }\r\n return options;\r\n });\r\n\r\n const getItemKey = (item: DraggableItem, index: number): string | number =>\r\n props.itemKey ? props.itemKey(item, index) : (item.id ?? index);\r\n\r\n const getItemTitle = (item: DraggableItem): string => {\r\n if (props.itemTitle) return props.itemTitle(item);\r\n return (\r\n item.title || item.name || item.label || String(item.id) || \"未命名项目\"\r\n );\r\n };\r\n\r\n const getItemDescription = (item: DraggableItem): string => {\r\n if (props.itemDescription) return props.itemDescription(item);\r\n return item.description || \"\";\r\n };\r\n\r\n const getItemClass = (_index: number) => [\r\n \"c-draggable-item\",\r\n props.itemClass,\r\n { \"is-disabled\": props.disabled },\r\n ];\r\n\r\n const handleStart = (event: any) => {\r\n isDragging.value = true;\r\n const item = internalList.value[event.oldIndex];\r\n if (item) {\r\n emit(\"drag-start\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.oldIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n };\r\n\r\n const handleEnd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) {\r\n emit(\"drag-end\", {\r\n oldIndex: event.oldIndex,\r\n newIndex: event.newIndex,\r\n item,\r\n } as DragEvent);\r\n }\r\n nextTick(() => {\r\n isDragging.value = false;\r\n });\r\n };\r\n\r\n const handleAdd = (event: any) => {\r\n const item = internalList.value[event.newIndex];\r\n if (item) emit(\"item-add\", item, event.newIndex);\r\n };\r\n\r\n const handleRemove = (event: any) => {\r\n if (event.item) emit(\"item-remove\", event.item, event.oldIndex);\r\n };\r\n\r\n const handleUpdate = (_event: any) => {};\r\n\r\n const addItem = (item: DraggableItem, index?: number): void => {\r\n const list = [...internalList.value];\r\n if (typeof index === \"number\" && index >= 0 && index <= list.length) {\r\n list.splice(index, 0, item);\r\n } else {\r\n list.push(item);\r\n }\r\n internalList.value = list;\r\n };\r\n\r\n const removeItem = (index: number): DraggableItem | null => {\r\n if (index >= 0 && index < internalList.value.length) {\r\n const list = [...internalList.value];\r\n const [removed] = list.splice(index, 1);\r\n internalList.value = list;\r\n return removed;\r\n }\r\n return null;\r\n };\r\n\r\n const moveItem = (fromIndex: number, toIndex: number): boolean => {\r\n const list = internalList.value;\r\n if (\r\n fromIndex >= 0 &&\r\n fromIndex < list.length &&\r\n toIndex >= 0 &&\r\n toIndex < list.length &&\r\n fromIndex !== toIndex\r\n ) {\r\n const newList = [...list];\r\n const [item] = newList.splice(fromIndex, 1);\r\n newList.splice(toIndex, 0, item);\r\n internalList.value = newList;\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const updateList = (newList: DraggableItem[]): void => {\r\n internalList.value = [...newList];\r\n };\r\n\r\n const clear = (): void => {\r\n internalList.value = [];\r\n };\r\n\r\n const getItem = (index: number): DraggableItem | undefined =>\r\n internalList.value[index];\r\n\r\n const findIndex = (predicate: (item: DraggableItem) => boolean): number =>\r\n internalList.value.findIndex(predicate);\r\n\r\n return {\r\n isDragging,\r\n internalList,\r\n isEmpty,\r\n listClasses,\r\n listStyles,\r\n draggableOptions,\r\n getItemKey,\r\n getItemTitle,\r\n getItemDescription,\r\n getItemClass,\r\n handleStart,\r\n handleEnd,\r\n handleAdd,\r\n handleRemove,\r\n handleUpdate,\r\n addItem,\r\n removeItem,\r\n moveItem,\r\n updateList,\r\n clear,\r\n getItem,\r\n findIndex,\r\n };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-25\n * @Description: 拖拽组件 - 基于 vue-draggable-plus 封装(薄 UI 壳 + useDraggableLayout 引擎)\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n <div class=\"c-draggable-wrapper\" :class=\"wrapperClass\">\n <VueDraggable\n v-model=\"internalList\"\n v-bind=\"draggableOptions\"\n :class=\"listClasses\"\n :style=\"listStyles\"\n @start=\"handleStart\"\n @end=\"handleEnd\"\n @add=\"handleAdd\"\n @remove=\"handleRemove\"\n @update=\"handleUpdate\"\n >\n <div\n v-for=\"(item, index) in internalList\"\n :key=\"getItemKey(item, index)\"\n :class=\"getItemClass(index)\"\n :data-index=\"index\"\n >\n <slot\n :item=\"item\"\n :index=\"index\"\n :is-dragging=\"isDragging\"\n :is-disabled=\"disabled\"\n >\n <div class=\"default-item\">\n <div v-if=\"showHandle\" class=\"drag-handle\">\n <div class=\"i-mdi:drag-vertical\"></div>\n </div>\n <div class=\"item-content\">\n <div class=\"item-title\">{{ getItemTitle(item) }}</div>\n <div v-if=\"getItemDescription(item)\" class=\"item-description\">\n {{ getItemDescription(item) }}\n </div>\n </div>\n </div>\n </slot>\n </div>\n </VueDraggable>\n\n <div v-if=\"isEmpty && showEmptyState\" class=\"empty-state\">\n <slot name=\"empty\">\n <div class=\"default-empty\">\n <div class=\"empty-icon i-mdi:inbox-outline\"></div>\n <p class=\"empty-text\">{{ emptyText }}</p>\n </div>\n </slot>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { readonly } from \"vue\";\nimport { VueDraggable } from \"vue-draggable-plus\";\nimport { useDraggableLayout } from \"./composables/useDraggableLayout\";\nimport type { DraggableProps, DraggableEmits } from \"./types\";\n\ndefineOptions({ name: \"C_Draggable\" });\n\nconst props = withDefaults(defineProps<DraggableProps>(), {\n modelValue: () => [],\n disabled: false,\n group: \"default\",\n sort: true,\n animation: 200,\n delay: 0,\n handle: \"\",\n showHandle: false,\n ghostClass: \"sortable-ghost\",\n chosenClass: \"sortable-chosen\",\n dragClass: \"sortable-drag\",\n wrapperClass: \"\",\n listClass: \"\",\n itemClass: \"\",\n showEmptyState: true,\n emptyText: \"暂无数据\",\n swapThreshold: 1,\n invertSwap: false,\n direction: \"vertical\",\n layout: \"vertical\",\n gridColumns: 4,\n gridRows: undefined,\n gap: \"8px\",\n flexWrap: false,\n justifyContent: \"flex-start\",\n alignItems: \"stretch\",\n customStyles: () => ({}),\n});\n\nconst emit = defineEmits<DraggableEmits>();\n\nconst {\n isDragging,\n internalList,\n isEmpty,\n listClasses,\n listStyles,\n draggableOptions,\n getItemKey,\n getItemTitle,\n getItemDescription,\n getItemClass,\n handleStart,\n handleEnd,\n handleAdd,\n handleRemove,\n handleUpdate,\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n} = useDraggableLayout(props, emit);\n\ndefineExpose({\n isDragging: readonly(isDragging),\n list: readonly(internalList),\n isEmpty: readonly(isEmpty),\n addItem,\n removeItem,\n moveItem,\n updateList,\n clear,\n getItem,\n findIndex,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_FilePreview-BVarVvnD.css","names":[],"sources":["../src/components/C_FilePreview/components/PdfViewer/index.vue?vue&type=style&index=0&scoped=e96499e0&lang.scss","../src/components/C_FilePreview/components/WordViewer/index.vue?vue&type=style&index=0&scoped=42ca58ad&lang.scss","../src/components/C_FilePreview/components/ExcelViewer/index.vue?vue&type=style&index=0&scoped=b6c3e1b9&lang.scss","../src/components/C_FilePreview/index.vue?vue&type=style&index=0&scoped=1037e17e&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.file-container[data-v-e96499e0] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-e96499e0] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.file-container .file-viewer[data-v-e96499e0] {\n flex: 1;\n min-height: 300px;\n}","/* unplugin-vue-components disabled */.file-container[data-v-42ca58ad] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-42ca58ad] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.word-layout[data-v-42ca58ad] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.word-layout .word-main[data-v-42ca58ad] {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n.word-layout .word-main .word-outline[data-v-42ca58ad] {\n width: 280px;\n border-right: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n}\n.word-layout .word-main .word-outline .outline-header[data-v-42ca58ad] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n}\n.word-layout .word-main .word-outline .outline-content[data-v-42ca58ad] {\n padding: 8px;\n overflow-y: auto;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-42ca58ad] {\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 14px;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-42ca58ad]:hover {\n background-color: #e6f3ff;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-1[data-v-42ca58ad] {\n padding-left: 12px;\n font-weight: 600;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-2[data-v-42ca58ad] {\n padding-left: 24px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-3[data-v-42ca58ad], .word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-42ca58ad] {\n padding-left: 36px;\n font-size: 13px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-42ca58ad] {\n padding-left: 48px;\n}\n.word-layout .word-main .word-content[data-v-42ca58ad] {\n flex: 1;\n padding: 24px;\n overflow: auto;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] {\n max-width: 800px;\n margin: 0 auto;\n background: var(--c-bg-card, white);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n padding: 40px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h1 {\n margin: 24px 0 16px 0;\n font-weight: bold;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h1 {\n font-size: 1.8rem;\n color: var(--c-text-1, #333);\n border-bottom: 2px solid var(--c-border, #e0e0e0);\n padding-bottom: 8px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h2 {\n font-size: 1.5rem;\n color: var(--c-text-1, #444);\n margin: 20px 0 12px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] h3 {\n font-size: 1.25rem;\n color: var(--c-text-2, #555);\n margin: 16px 0 8px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] p {\n margin-bottom: 12px;\n line-height: 1.8;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] ul {\n margin: 12px 0;\n padding-left: 24px;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] li {\n margin-bottom: 6px;\n line-height: 1.6;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] table {\n width: 100%;\n border-collapse: collapse;\n margin: 16px 0;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] th {\n border: 1px solid #d0d0d0;\n padding: 12px;\n text-align: left;\n}\n.word-layout .word-main .word-content .word-document[data-v-42ca58ad] th {\n background-color: var(--c-bg-card, #f5f5f5);\n font-weight: bold;\n}","/* unplugin-vue-components disabled */.file-container[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-b6c3e1b9] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.excel-container[data-v-b6c3e1b9] {\n overflow: visible;\n}\n.excel-container .excel-viewer[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-info[data-v-b6c3e1b9] {\n padding: 8px 16px;\n background-color: var(--c-bg-card, #f9f9f9);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 7;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container[data-v-b6c3e1b9] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper[data-v-b6c3e1b9] {\n flex: 1;\n overflow: auto;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table[data-v-b6c3e1b9] {\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header[data-v-b6c3e1b9] {\n padding: 6px 8px;\n background: #f8f9fa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-letter[data-v-b6c3e1b9] {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-title[data-v-b6c3e1b9] {\n font-size: 11px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-row[data-v-b6c3e1b9]:nth-child(even) {\n background-color: #fefefe;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell[data-v-b6c3e1b9] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9] {\n border: 1px solid #1976d2 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table[data-v-b6c3e1b9] {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: 13px;\n min-width: 100%;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .row-number[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);\n text-align: center;\n min-width: 30px;\n width: 30px;\n padding: 2px 4px;\n font-size: 11px;\n font-weight: bold;\n border: 1px solid #d0d0d0;\n color: #666;\n position: sticky;\n left: 0;\n z-index: 10;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);\n padding: 8px 12px;\n border: 1px solid #c0c0c0;\n font-weight: bold;\n position: sticky;\n top: 0;\n z-index: 5;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content[data-v-b6c3e1b9] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-letter[data-v-b6c3e1b9] {\n background-color: var(--c-primary, #1976d2);\n color: white;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 10px;\n font-weight: normal;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-title[data-v-b6c3e1b9] {\n font-size: 12px;\n font-weight: bold;\n text-align: center;\n word-break: break-all;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-b6c3e1b9]:nth-child(even) {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-b6c3e1b9]:hover {\n background-color: #e6f3ff;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell[data-v-b6c3e1b9] {\n padding: 8px 12px;\n border: 1px solid #d0d0d0;\n vertical-align: middle;\n word-wrap: break-word;\n word-break: break-all;\n min-height: 24px;\n line-height: 1.4;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-number[data-v-b6c3e1b9] {\n text-align: right;\n font-family: \"Courier New\", monospace;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-gantt[data-v-b6c3e1b9] {\n text-align: center;\n font-family: monospace;\n font-size: 14px;\n font-weight: bold;\n background-color: #f0f0f0;\n color: var(--c-text-1, #333);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-date[data-v-b6c3e1b9] {\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-boolean[data-v-b6c3e1b9] {\n text-align: center;\n font-weight: bold;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-long[data-v-b6c3e1b9] {\n max-width: 200px;\n white-space: pre-wrap;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-empty[data-v-b6c3e1b9] {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 2px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n background: rgba(25, 118, 210, 0.08);\n border-radius: 2px;\n pointer-events: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-b6c3e1b9]::after {\n content: \"📎\";\n position: absolute;\n top: 2px;\n right: 4px;\n font-size: 10px;\n opacity: 0.6;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell[data-v-b6c3e1b9] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 1px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9]::before {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: rgba(25, 118, 210, 0.05);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-b6c3e1b9]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-empty[data-v-b6c3e1b9] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] {\n padding: 20px 16px;\n border-top: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1000;\n position: relative;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination {\n z-index: 1001;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker {\n z-index: 1002;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker .n-base-selection {\n z-index: 1003;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-pagination-size-picker .n-base-selection-popover {\n z-index: 1004 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-b6c3e1b9] .n-popover {\n z-index: 1005 !important;\n}","/* unplugin-vue-components disabled */.c-file-preview-wrapper[data-v-1037e17e] {\n width: 100%;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-1037e17e] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n border: 1px solid var(--c-border, #e0e0e0);\n border-radius: 12px;\n background: var(--c-bg-card, white);\n transition: var(--c-transition, 0.2s ease);\n cursor: pointer;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-1037e17e]:hover {\n border-color: var(--c-primary, #40a9ff);\n box-shadow: 0 4px 12px rgba(64, 169, 255, 0.15);\n transform: translateY(-1px);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-icon[data-v-1037e17e] {\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 12px;\n border: 1px solid #dee2e6;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details[data-v-1037e17e] {\n flex: 1;\n min-width: 0;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-name[data-v-1037e17e] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 6px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #1f2937);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta[data-v-1037e17e] {\n display: flex;\n gap: 16px;\n font-size: 13px;\n color: var(--c-text-2, #6b7280);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta .file-size[data-v-1037e17e] {\n font-weight: 500;\n color: var(--c-text-1, #374151);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-actions[data-v-1037e17e] {\n flex-shrink: 0;\n display: flex;\n gap: 8px;\n}\n.modal-container[data-v-1037e17e] {\n background: var(--c-bg-card, white);\n border-radius: 8px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.modal-container .modal-header[data-v-1037e17e] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: var(--c-bg, #fafafa);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 10;\n position: relative;\n}\n.modal-container .modal-header .modal-title[data-v-1037e17e] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #333);\n}\n.modal-container .modal-header .modal-title span[data-v-1037e17e] {\n max-width: 400px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.modal-container .modal-header .modal-actions[data-v-1037e17e] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.modal-container .modal-content[data-v-1037e17e] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.modal-container .preview-header[data-v-1037e17e] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 9;\n position: relative;\n}\n.modal-container .preview-content[data-v-1037e17e] {\n flex: 1;\n overflow: auto;\n min-height: 0;\n position: relative;\n}\n.modal-container .preview-content .status-container[data-v-1037e17e] {\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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
|
+
{"version":3,"file":"C_FilePreview-BhcbiXsV.css","names":[],"sources":["../src/components/C_FilePreview/components/PdfViewer/index.vue?vue&type=style&index=0&scoped=b3a276cb&lang.scss","../src/components/C_FilePreview/components/WordViewer/index.vue?vue&type=style&index=0&scoped=e79a98a6&lang.scss","../src/components/C_FilePreview/components/ExcelViewer/index.vue?vue&type=style&index=0&scoped=d1c1c8fe&lang.scss","../src/components/C_FilePreview/index.vue?vue&type=style&index=0&scoped=30d50866&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.file-container[data-v-b3a276cb] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-b3a276cb] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.file-container .file-viewer[data-v-b3a276cb] {\n flex: 1;\n min-height: 300px;\n}","/* unplugin-vue-components disabled */.file-container[data-v-e79a98a6] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-e79a98a6] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.word-layout[data-v-e79a98a6] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.word-layout .word-main[data-v-e79a98a6] {\n flex: 1;\n display: flex;\n overflow: hidden;\n}\n.word-layout .word-main .word-outline[data-v-e79a98a6] {\n width: 280px;\n border-right: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n}\n.word-layout .word-main .word-outline .outline-header[data-v-e79a98a6] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n}\n.word-layout .word-main .word-outline .outline-content[data-v-e79a98a6] {\n padding: 8px;\n overflow-y: auto;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-e79a98a6] {\n padding: 8px 12px;\n cursor: pointer;\n border-radius: 4px;\n font-size: 14px;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-outline .outline-content .outline-item[data-v-e79a98a6]:hover {\n background-color: #e6f3ff;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-1[data-v-e79a98a6] {\n padding-left: 12px;\n font-weight: 600;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-2[data-v-e79a98a6] {\n padding-left: 24px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-3[data-v-e79a98a6], .word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-e79a98a6] {\n padding-left: 36px;\n font-size: 13px;\n}\n.word-layout .word-main .word-outline .outline-content .outline-item.level-4[data-v-e79a98a6] {\n padding-left: 48px;\n}\n.word-layout .word-main .word-content[data-v-e79a98a6] {\n flex: 1;\n padding: 24px;\n overflow: auto;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] {\n max-width: 800px;\n margin: 0 auto;\n background: var(--c-bg-card, white);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n padding: 40px;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] h1 {\n margin: 24px 0 16px 0;\n font-weight: bold;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] h1 {\n font-size: 1.8rem;\n color: var(--c-text-1, #333);\n border-bottom: 2px solid var(--c-border, #e0e0e0);\n padding-bottom: 8px;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] h2 {\n font-size: 1.5rem;\n color: var(--c-text-1, #444);\n margin: 20px 0 12px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] h3 {\n font-size: 1.25rem;\n color: var(--c-text-2, #555);\n margin: 16px 0 8px 0;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] p {\n margin-bottom: 12px;\n line-height: 1.8;\n color: var(--c-text-1, #333);\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] ul {\n margin: 12px 0;\n padding-left: 24px;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] li {\n margin-bottom: 6px;\n line-height: 1.6;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] table {\n width: 100%;\n border-collapse: collapse;\n margin: 16px 0;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] th {\n border: 1px solid #d0d0d0;\n padding: 12px;\n text-align: left;\n}\n.word-layout .word-main .word-content .word-document[data-v-e79a98a6] th {\n background-color: var(--c-bg-card, #f5f5f5);\n font-weight: bold;\n}","/* unplugin-vue-components disabled */.file-container[data-v-d1c1c8fe] {\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n.file-container .file-toolbar[data-v-d1c1c8fe] {\n padding: 12px 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 8;\n position: relative;\n}\n.excel-container[data-v-d1c1c8fe] {\n overflow: visible;\n}\n.excel-container .excel-viewer[data-v-d1c1c8fe] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-info[data-v-d1c1c8fe] {\n padding: 8px 16px;\n background-color: var(--c-bg-card, #f9f9f9);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 7;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container[data-v-d1c1c8fe] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper[data-v-d1c1c8fe] {\n flex: 1;\n overflow: auto;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table[data-v-d1c1c8fe] {\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header[data-v-d1c1c8fe] {\n padding: 6px 8px;\n background: #f8f9fa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-letter[data-v-d1c1c8fe] {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-header .header-content .column-title[data-v-d1c1c8fe] {\n font-size: 11px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-row[data-v-d1c1c8fe]:nth-child(even) {\n background-color: #fefefe;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell[data-v-d1c1c8fe] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-d1c1c8fe] {\n border: 1px solid #1976d2 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table-wrapper.simple-mode .excel-table .excel-cell.merged-cell[data-v-d1c1c8fe]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table[data-v-d1c1c8fe] {\n width: 100%;\n border-collapse: separate;\n border-spacing: 0;\n font-size: 13px;\n min-width: 100%;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .row-number[data-v-d1c1c8fe] {\n background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);\n text-align: center;\n min-width: 30px;\n width: 30px;\n padding: 2px 4px;\n font-size: 11px;\n font-weight: bold;\n border: 1px solid #d0d0d0;\n color: #666;\n position: sticky;\n left: 0;\n z-index: 10;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header[data-v-d1c1c8fe] {\n background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);\n padding: 8px 12px;\n border: 1px solid #c0c0c0;\n font-weight: bold;\n position: sticky;\n top: 0;\n z-index: 5;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content[data-v-d1c1c8fe] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-letter[data-v-d1c1c8fe] {\n background-color: var(--c-primary, #1976d2);\n color: white;\n padding: 2px 6px;\n border-radius: 3px;\n font-size: 10px;\n font-weight: normal;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-header .header-content .column-title[data-v-d1c1c8fe] {\n font-size: 12px;\n font-weight: bold;\n text-align: center;\n word-break: break-all;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-d1c1c8fe]:nth-child(even) {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-row[data-v-d1c1c8fe]:hover {\n background-color: #e6f3ff;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell[data-v-d1c1c8fe] {\n padding: 8px 12px;\n border: 1px solid #d0d0d0;\n vertical-align: middle;\n word-wrap: break-word;\n word-break: break-all;\n min-height: 24px;\n line-height: 1.4;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-number[data-v-d1c1c8fe] {\n text-align: right;\n font-family: \"Courier New\", monospace;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-gantt[data-v-d1c1c8fe] {\n text-align: center;\n font-family: monospace;\n font-size: 14px;\n font-weight: bold;\n background-color: #f0f0f0;\n color: var(--c-text-1, #333);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-date[data-v-d1c1c8fe] {\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-boolean[data-v-d1c1c8fe] {\n text-align: center;\n font-weight: bold;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-long[data-v-d1c1c8fe] {\n max-width: 200px;\n white-space: pre-wrap;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.cell-empty[data-v-d1c1c8fe] {\n background-color: #fafafa;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-d1c1c8fe] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 2px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-d1c1c8fe]::before {\n content: \"\";\n position: absolute;\n top: 3px;\n left: 3px;\n right: 3px;\n bottom: 3px;\n background: rgba(25, 118, 210, 0.08);\n border-radius: 2px;\n pointer-events: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.merged-cell[data-v-d1c1c8fe]::after {\n content: \"📎\";\n position: absolute;\n top: 2px;\n right: 4px;\n font-size: 10px;\n opacity: 0.6;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell[data-v-d1c1c8fe] {\n padding: 4px 8px;\n font-size: 12px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-d1c1c8fe] {\n background: linear-gradient(135deg, #f0f8ff 0%, #e3f2fd 100%) !important;\n border: 1px solid var(--c-primary, #1976d2) !important;\n font-weight: bold;\n text-align: center;\n color: var(--c-primary, #1976d2);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-d1c1c8fe]::before {\n top: 2px;\n left: 2px;\n right: 2px;\n bottom: 2px;\n background: rgba(25, 118, 210, 0.05);\n}\n.excel-container .excel-viewer .excel-table-container .excel-table .excel-cell.compact-cell.merged-cell[data-v-d1c1c8fe]::after {\n display: none;\n}\n.excel-container .excel-viewer .excel-table-container .excel-empty[data-v-d1c1c8fe] {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 200px;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] {\n padding: 20px 16px;\n border-top: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n display: flex;\n justify-content: center;\n flex-shrink: 0;\n z-index: 1000;\n position: relative;\n overflow: visible;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] .n-pagination {\n z-index: 1001;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] .n-pagination-size-picker {\n z-index: 1002;\n position: relative;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] .n-pagination-size-picker .n-base-selection {\n z-index: 1003;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] .n-pagination-size-picker .n-base-selection-popover {\n z-index: 1004 !important;\n}\n.excel-container .excel-viewer .excel-table-container .excel-pagination[data-v-d1c1c8fe] .n-popover {\n z-index: 1005 !important;\n}","/* unplugin-vue-components disabled */.c-file-preview-wrapper[data-v-30d50866] {\n width: 100%;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-30d50866] {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n border: 1px solid var(--c-border, #e0e0e0);\n border-radius: 12px;\n background: var(--c-bg-card, white);\n transition: var(--c-transition, 0.2s ease);\n cursor: pointer;\n}\n.c-file-preview-wrapper .file-info-card .file-info[data-v-30d50866]:hover {\n border-color: var(--c-primary, #40a9ff);\n box-shadow: 0 4px 12px rgba(64, 169, 255, 0.15);\n transform: translateY(-1px);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-icon[data-v-30d50866] {\n flex-shrink: 0;\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n border-radius: 12px;\n border: 1px solid #dee2e6;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details[data-v-30d50866] {\n flex: 1;\n min-width: 0;\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-name[data-v-30d50866] {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 6px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #1f2937);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta[data-v-30d50866] {\n display: flex;\n gap: 16px;\n font-size: 13px;\n color: var(--c-text-2, #6b7280);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-details .file-meta .file-size[data-v-30d50866] {\n font-weight: 500;\n color: var(--c-text-1, #374151);\n}\n.c-file-preview-wrapper .file-info-card .file-info .file-actions[data-v-30d50866] {\n flex-shrink: 0;\n display: flex;\n gap: 8px;\n}\n.modal-container[data-v-30d50866] {\n background: var(--c-bg-card, white);\n border-radius: 8px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n overflow: visible;\n}\n.modal-container .modal-header[data-v-30d50866] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px 20px;\n background: var(--c-bg, #fafafa);\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n flex-shrink: 0;\n z-index: 10;\n position: relative;\n}\n.modal-container .modal-header .modal-title[data-v-30d50866] {\n display: flex;\n align-items: center;\n gap: 8px;\n font-weight: 600;\n font-size: 16px;\n color: var(--c-text-1, #333);\n}\n.modal-container .modal-header .modal-title span[data-v-30d50866] {\n max-width: 400px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.modal-container .modal-header .modal-actions[data-v-30d50866] {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.modal-container .modal-content[data-v-30d50866] {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: visible;\n min-height: 0;\n}\n.modal-container .preview-header[data-v-30d50866] {\n padding: 16px;\n border-bottom: 1px solid var(--c-border, #e0e0e0);\n background-color: var(--c-bg-card, #f9f9f9);\n flex-shrink: 0;\n z-index: 9;\n position: relative;\n}\n.modal-container .preview-content[data-v-30d50866] {\n flex: 1;\n overflow: auto;\n min-height: 0;\n position: relative;\n}\n.modal-container .preview-content .status-container[data-v-30d50866] {\n height: 300px;\n display: flex;\n align-items: center;\n justify-content: center;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AChBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;ACvHA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AClPA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|