@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_Timeline2.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Timeline2.js","names":[],"sources":["../src/components/C_Timeline/types.ts","../src/components/C_Timeline/index.vue","../src/components/C_Timeline/index.vue","../src/components/C_Timeline/index.vue"],"sourcesContent":["/**\r\n * @Description: 时间线组件类型定义\r\n */\r\n\r\n/** 单条时间线节点 */\r\nexport interface TimelineItem {\r\n /** 唯一标识 */\r\n id: string | number\r\n /** 标题 */\r\n title: string\r\n /** 描述内容(支持 HTML 字符串) */\r\n content?: string\r\n /** 时间标签 */\r\n time?: string\r\n /** 节点颜色(CSS 颜色值) */\r\n color?: string\r\n /** 节点图标(Iconify 图标名) */\r\n icon?: string\r\n /** 节点状态 */\r\n status?: 'default' | 'success' | 'warning' | 'error' | 'info'\r\n /** 是否可展开/折叠详情 */\r\n collapsible?: boolean\r\n /** 初始是否展开 */\r\n defaultExpanded?: boolean\r\n /** 附加标签组 */\r\n tags?: Array<{ text: string; type?: string }>\r\n /** 自定义额外数据 */\r\n extra?: Record<string, unknown>\r\n}\r\n\r\n/** 组件 Props */\r\nexport interface TimelineProps {\r\n /** 时间线数据 */\r\n items: TimelineItem[]\r\n /** 布局方向 */\r\n mode?: 'vertical' | 'horizontal'\r\n /** 垂直模式下时间标签位置 */\r\n labelPlacement?: 'left' | 'right' | 'alternate'\r\n /** 是否显示尾部加载更多指示 */\r\n pending?: boolean\r\n /** 加载更多文案 */\r\n pendingText?: string\r\n /** 是否反转排列(最新在前) */\r\n reverse?: boolean\r\n /** 节点大小 */\r\n size?: 'small' | 'medium' | 'large'\r\n /** 连接线样式 */\r\n lineType?: 'solid' | 'dashed' | 'dotted'\r\n /** 是否显示时间标签 */\r\n showTime?: boolean\r\n}\r\n\r\n/** 默认 Props */\r\nexport const DEFAULT_TIMELINE_PROPS = {\r\n mode: 'vertical' as const,\r\n labelPlacement: 'right' as const,\r\n pending: false,\r\n pendingText: '加载中...',\r\n reverse: false,\r\n size: 'medium' as const,\r\n lineType: 'solid' as const,\r\n showTime: true,\r\n}\r\n\r\n/** 状态 → 颜色映射 */\r\nexport const STATUS_COLOR_MAP: Record<string, string> = {\r\n default: '',\r\n success: '#18a058',\r\n warning: '#f0a020',\r\n error: '#d03050',\r\n info: '#2080f0',\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Timeline2.js","names":[],"sources":["../src/components/C_Timeline/types.ts","../src/components/C_Timeline/index.vue","../src/components/C_Timeline/index.vue","../src/components/C_Timeline/index.vue"],"sourcesContent":["/**\n * @Description: 时间线组件类型定义\n */\n\n/** 单条时间线节点 */\nexport interface TimelineItem {\n /** 唯一标识 */\n id: string | number\n /** 标题 */\n title: string\n /** 描述内容(支持 HTML 字符串) */\n content?: string\n /** 时间标签 */\n time?: string\n /** 节点颜色(CSS 颜色值) */\n color?: string\n /** 节点图标(Iconify 图标名) */\n icon?: string\n /** 节点状态 */\n status?: 'default' | 'success' | 'warning' | 'error' | 'info'\n /** 是否可展开/折叠详情 */\n collapsible?: boolean\n /** 初始是否展开 */\n defaultExpanded?: boolean\n /** 附加标签组 */\n tags?: Array<{ text: string; type?: string }>\n /** 自定义额外数据 */\n extra?: Record<string, unknown>\n}\n\n/** 组件 Props */\nexport interface TimelineProps {\n /** 时间线数据 */\n items: TimelineItem[]\n /** 布局方向 */\n mode?: 'vertical' | 'horizontal'\n /** 垂直模式下时间标签位置 */\n labelPlacement?: 'left' | 'right' | 'alternate'\n /** 是否显示尾部加载更多指示 */\n pending?: boolean\n /** 加载更多文案 */\n pendingText?: string\n /** 是否反转排列(最新在前) */\n reverse?: boolean\n /** 节点大小 */\n size?: 'small' | 'medium' | 'large'\n /** 连接线样式 */\n lineType?: 'solid' | 'dashed' | 'dotted'\n /** 是否显示时间标签 */\n showTime?: boolean\n}\n\n/** 默认 Props */\nexport const DEFAULT_TIMELINE_PROPS = {\n mode: 'vertical' as const,\n labelPlacement: 'right' as const,\n pending: false,\n pendingText: '加载中...',\n reverse: false,\n size: 'medium' as const,\n lineType: 'solid' as const,\n showTime: true,\n}\n\n/** 状态 → 颜色映射 */\nexport const STATUS_COLOR_MAP: Record<string, string> = {\n default: '',\n success: '#18a058',\n warning: '#f0a020',\n error: '#d03050',\n info: '#2080f0',\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: 时间线组件 — 支持垂直/水平布局、自定义节点、可折叠详情\n-->\n<template>\n <div\n :class=\"rootClasses\"\n role=\"list\"\n >\n <div\n v-for=\"(item, idx) in displayItems\"\n :key=\"item.id\"\n class=\"c-timeline__item\"\n role=\"listitem\"\n >\n <!-- 轨道区:圆点 + 连接线 -->\n <div class=\"c-timeline__track\">\n <span\n :class=\"['c-timeline__dot', item.icon ? 'is-icon' : 'is-dot']\"\n :style=\"dotStyle(item)\"\n >\n <slot\n name=\"dot\"\n :item=\"item\"\n :index=\"idx\"\n >\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n />\n </slot>\n </span>\n <!-- 连接线:最后一项不渲染 -->\n <span\n v-if=\"idx < displayItems.length - 1\"\n class=\"c-timeline__line\"\n />\n </div>\n\n <!-- 内容区 -->\n <div class=\"c-timeline__body\">\n <div\n class=\"c-timeline__header\"\n @click=\"emit('item-click', item, idx)\"\n >\n <slot\n name=\"title\"\n :item=\"item\"\n :index=\"idx\"\n >\n <span class=\"c-timeline__title\">{{ item.title }}</span>\n </slot>\n <span\n v-if=\"props.showTime && item.time\"\n class=\"c-timeline__time\"\n >{{ item.time }}</span\n >\n </div>\n\n <div\n v-if=\"item.tags?.length\"\n class=\"c-timeline__tags\"\n >\n <span\n v-for=\"tag in item.tags\"\n :key=\"tag.text\"\n class=\"c-timeline__tag\"\n >{{ tag.text }}</span\n >\n </div>\n\n <div\n v-if=\"item.content && (!item.collapsible || expandedMap[item.id])\"\n :class=\"[\n 'c-timeline__detail',\n item.collapsible\n ? expandedMap[item.id]\n ? 'is-expanded'\n : 'is-collapsed'\n : 'is-expanded',\n ]\"\n >\n <div\n class=\"c-timeline__content\"\n v-html=\"item.content\"\n />\n </div>\n\n <span\n v-if=\"item.collapsible\"\n :class=\"[\n 'c-timeline__collapse-trigger',\n { 'is-expanded': expandedMap[item.id] },\n ]\"\n @click=\"toggleExpand(item)\"\n >\n {{ expandedMap[item.id] ? '收起' : '展开详情' }}\n <C_Icon\n name=\"mdi:chevron-down\"\n class=\"collapse-arrow\"\n />\n </span>\n </div>\n </div>\n\n <!-- Pending 加载指示 -->\n <div\n v-if=\"props.pending\"\n class=\"c-timeline__pending\"\n >\n <span class=\"pending-dot\" />\n <span>{{ props.pendingText }}</span>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, watch } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TIMELINE_PROPS,\n STATUS_COLOR_MAP,\n type TimelineProps,\n type TimelineItem,\n } from './types'\n\n defineOptions({ name: 'C_Timeline' })\n\n const props = withDefaults(defineProps<TimelineProps>(), {\n items: () => [],\n mode: DEFAULT_TIMELINE_PROPS.mode,\n labelPlacement: DEFAULT_TIMELINE_PROPS.labelPlacement,\n pending: DEFAULT_TIMELINE_PROPS.pending,\n pendingText: DEFAULT_TIMELINE_PROPS.pendingText,\n reverse: DEFAULT_TIMELINE_PROPS.reverse,\n size: DEFAULT_TIMELINE_PROPS.size,\n lineType: DEFAULT_TIMELINE_PROPS.lineType,\n showTime: DEFAULT_TIMELINE_PROPS.showTime,\n })\n\n const emit = defineEmits<{\n (e: 'item-click', item: TimelineItem, index: number): void\n (e: 'expand', item: TimelineItem, expanded: boolean): void\n }>()\n\n // ===== 展开状态 =====\n const expandedMap = ref<Record<string | number, boolean>>({})\n\n // 初始化展开状态\n watch(\n () => props.items,\n items => {\n items.forEach(item => {\n if (item.collapsible && !(item.id in expandedMap.value)) {\n expandedMap.value[item.id] = item.defaultExpanded ?? false\n }\n })\n },\n { immediate: true }\n )\n\n const toggleExpand = (item: TimelineItem) => {\n const next = !expandedMap.value[item.id]\n expandedMap.value[item.id] = next\n emit('expand', item, next)\n }\n\n // ===== 排列顺序 =====\n const displayItems = computed(() =>\n props.reverse ? [...props.items].reverse() : props.items\n )\n\n // ===== 根类 =====\n const rootClasses = computed(() => [\n 'c-timeline',\n `is-${props.mode}`,\n `is-${props.size}`,\n `is-line-${props.lineType}`,\n `is-label-${props.labelPlacement}`,\n ])\n\n // ===== 节点颜色 =====\n const dotStyle = (item: TimelineItem) => {\n const color =\n item.color || STATUS_COLOR_MAP[item.status || 'default'] || undefined\n if (item.icon) {\n return { color, borderColor: color || undefined }\n }\n return {\n background: color || undefined,\n boxShadow: color ? `0 0 0 2px ${color}` : undefined,\n }\n }\n\n // ===== 暴露 =====\n defineExpose({\n /** 展开全部 */\n expandAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = true\n })\n },\n /** 折叠全部 */\n collapseAll: () => {\n props.items.forEach(item => {\n if (item.collapsible) expandedMap.value[item.id] = false\n })\n },\n })\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Transfer-
|
|
1
|
+
{"version":3,"file":"C_Transfer-BOB6OBqS.css","names":[],"sources":["../src/components/C_Transfer/index.vue?vue&type=style&index=0&scoped=6de1c97f&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_Transfer — 穿梭框组件样式\n * 变量说明:\n * --tf-border : 面板边框色\n * --tf-header-bg : 标题栏背景\n * --tf-item-hover : 列表行悬停色\n * --tf-accent : 操作按钮主色\n * --tf-height : 面板高度\n */\n.c-transfer[data-v-6de1c97f] {\n --tf-border: var(--border-color);\n --tf-header-bg: color-mix(in srgb, var(--primary-color) 6%, var(--card-color));\n --tf-item-hover: color-mix(in srgb, var(--primary-color) 8%, var(--card-color));\n --tf-accent: var(--primary-color);\n --tf-height: 380px;\n display: flex;\n align-items: stretch;\n gap: 16px;\n user-select: none;\n /* ======================== Panel ======================== */\n /* ---- Header ---- */\n /* ---- Filter ---- */\n /* ---- List ---- */\n /* ---- Empty ---- */\n /* ======================== Actions ======================== */\n /* ======================== Sizes ======================== */\n /* ======================== Group divider ======================== */\n}\n.c-transfer__panel[data-v-6de1c97f] {\n flex: 1;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--tf-border);\n border-radius: 8px;\n overflow: hidden;\n background: var(--card-color);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n transition: box-shadow 0.2s;\n}\n.c-transfer__panel[data-v-6de1c97f]:hover {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);\n}\n.c-transfer__header[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--tf-header-bg);\n border-bottom: 1px solid var(--tf-border);\n font-weight: 600;\n font-size: 13px;\n color: var(--text-color-1);\n}\n.c-transfer__count[data-v-6de1c97f] {\n font-weight: 400;\n font-size: 12px;\n color: var(--text-color-3);\n}\n.c-transfer__filter[data-v-6de1c97f] {\n padding: 8px 10px;\n border-bottom: 1px solid var(--tf-border);\n}\n.c-transfer__filter .n-input[data-v-6de1c97f] {\n --n-border: 1px solid var(--tf-border);\n --n-border-focus: 1px solid var(--tf-accent);\n}\n.c-transfer__list[data-v-6de1c97f] {\n flex: 1;\n overflow-y: auto;\n padding: 4px 0;\n min-height: 0;\n max-height: var(--tf-height);\n}\n.c-transfer__item[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 14px;\n cursor: pointer;\n transition: background 0.15s;\n font-size: 13px;\n color: var(--text-color-1);\n}\n.c-transfer__item[data-v-6de1c97f]:hover {\n background: var(--tf-item-hover);\n}\n.c-transfer__item.is-disabled[data-v-6de1c97f] {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.c-transfer__item.is-disabled[data-v-6de1c97f]:hover {\n background: transparent;\n}\n.c-transfer__item.is-checked[data-v-6de1c97f] {\n color: var(--tf-accent);\n font-weight: 500;\n}\n.c-transfer__item-icon[data-v-6de1c97f] {\n font-size: 16px;\n flex-shrink: 0;\n color: var(--text-color-3);\n}\n.c-transfer__item-label[data-v-6de1c97f] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.c-transfer__item-desc[data-v-6de1c97f] {\n font-size: 11px;\n color: var(--text-color-3);\n margin-top: 2px;\n}\n.c-transfer__empty[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n color: var(--text-color-3);\n font-size: 13px;\n padding: 32px 0;\n}\n.c-transfer__actions[data-v-6de1c97f] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n}\n.c-transfer__btn[data-v-6de1c97f] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n border: 1px solid var(--tf-border);\n background: var(--card-color);\n color: var(--tf-accent);\n font-size: 18px;\n cursor: pointer;\n transition: background 0.2s, color 0.2s, box-shadow 0.2s;\n}\n.c-transfer__btn[data-v-6de1c97f]:hover:not(.is-disabled) {\n background: var(--tf-accent);\n color: #fff;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--tf-accent) 30%, transparent);\n}\n.c-transfer__btn.is-disabled[data-v-6de1c97f] {\n opacity: 0.35;\n cursor: not-allowed;\n}\n.c-transfer.is-small[data-v-6de1c97f] {\n --tf-height: 280px;\n}\n.c-transfer.is-small .c-transfer__header[data-v-6de1c97f] {\n padding: 8px 12px;\n font-size: 12px;\n}\n.c-transfer.is-small .c-transfer__item[data-v-6de1c97f] {\n padding: 5px 12px;\n font-size: 12px;\n}\n.c-transfer.is-small .c-transfer__btn[data-v-6de1c97f] {\n width: 30px;\n height: 30px;\n font-size: 15px;\n}\n.c-transfer.is-large[data-v-6de1c97f] {\n --tf-height: 480px;\n}\n.c-transfer.is-large .c-transfer__header[data-v-6de1c97f] {\n padding: 12px 16px;\n font-size: 14px;\n}\n.c-transfer.is-large .c-transfer__item[data-v-6de1c97f] {\n padding: 9px 16px;\n font-size: 14px;\n}\n.c-transfer.is-large .c-transfer__btn[data-v-6de1c97f] {\n width: 42px;\n height: 42px;\n font-size: 20px;\n}\n.c-transfer__group[data-v-6de1c97f] {\n padding: 6px 14px 4px;\n font-size: 11px;\n font-weight: 600;\n color: var(--text-color-3);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Transfer-
|
|
1
|
+
{"version":3,"file":"C_Transfer-Dpq7ezWC.css","names":[],"sources":["../src/components/C_Transfer/index.vue?vue&type=style&index=0&scoped=6de1c97f&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled *//**\n * C_Transfer — 穿梭框组件样式\n * 变量说明:\n * --tf-border : 面板边框色\n * --tf-header-bg : 标题栏背景\n * --tf-item-hover : 列表行悬停色\n * --tf-accent : 操作按钮主色\n * --tf-height : 面板高度\n */\n.c-transfer[data-v-6de1c97f] {\n --tf-border: var(--border-color);\n --tf-header-bg: color-mix(in srgb, var(--primary-color) 6%, var(--card-color));\n --tf-item-hover: color-mix(in srgb, var(--primary-color) 8%, var(--card-color));\n --tf-accent: var(--primary-color);\n --tf-height: 380px;\n display: flex;\n align-items: stretch;\n gap: 16px;\n user-select: none;\n /* ======================== Panel ======================== */\n /* ---- Header ---- */\n /* ---- Filter ---- */\n /* ---- List ---- */\n /* ---- Empty ---- */\n /* ======================== Actions ======================== */\n /* ======================== Sizes ======================== */\n /* ======================== Group divider ======================== */\n}\n.c-transfer__panel[data-v-6de1c97f] {\n flex: 1;\n display: flex;\n flex-direction: column;\n border: 1px solid var(--tf-border);\n border-radius: 8px;\n overflow: hidden;\n background: var(--card-color);\n box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);\n transition: box-shadow 0.2s;\n}\n.c-transfer__panel[data-v-6de1c97f]:hover {\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);\n}\n.c-transfer__header[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px 14px;\n background: var(--tf-header-bg);\n border-bottom: 1px solid var(--tf-border);\n font-weight: 600;\n font-size: 13px;\n color: var(--text-color-1);\n}\n.c-transfer__count[data-v-6de1c97f] {\n font-weight: 400;\n font-size: 12px;\n color: var(--text-color-3);\n}\n.c-transfer__filter[data-v-6de1c97f] {\n padding: 8px 10px;\n border-bottom: 1px solid var(--tf-border);\n}\n.c-transfer__filter .n-input[data-v-6de1c97f] {\n --n-border: 1px solid var(--tf-border);\n --n-border-focus: 1px solid var(--tf-accent);\n}\n.c-transfer__list[data-v-6de1c97f] {\n flex: 1;\n overflow-y: auto;\n padding: 4px 0;\n min-height: 0;\n max-height: var(--tf-height);\n}\n.c-transfer__item[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 14px;\n cursor: pointer;\n transition: background 0.15s;\n font-size: 13px;\n color: var(--text-color-1);\n}\n.c-transfer__item[data-v-6de1c97f]:hover {\n background: var(--tf-item-hover);\n}\n.c-transfer__item.is-disabled[data-v-6de1c97f] {\n opacity: 0.45;\n cursor: not-allowed;\n}\n.c-transfer__item.is-disabled[data-v-6de1c97f]:hover {\n background: transparent;\n}\n.c-transfer__item.is-checked[data-v-6de1c97f] {\n color: var(--tf-accent);\n font-weight: 500;\n}\n.c-transfer__item-icon[data-v-6de1c97f] {\n font-size: 16px;\n flex-shrink: 0;\n color: var(--text-color-3);\n}\n.c-transfer__item-label[data-v-6de1c97f] {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.c-transfer__item-desc[data-v-6de1c97f] {\n font-size: 11px;\n color: var(--text-color-3);\n margin-top: 2px;\n}\n.c-transfer__empty[data-v-6de1c97f] {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n color: var(--text-color-3);\n font-size: 13px;\n padding: 32px 0;\n}\n.c-transfer__actions[data-v-6de1c97f] {\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 10px;\n}\n.c-transfer__btn[data-v-6de1c97f] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 8px;\n border: 1px solid var(--tf-border);\n background: var(--card-color);\n color: var(--tf-accent);\n font-size: 18px;\n cursor: pointer;\n transition: background 0.2s, color 0.2s, box-shadow 0.2s;\n}\n.c-transfer__btn[data-v-6de1c97f]:hover:not(.is-disabled) {\n background: var(--tf-accent);\n color: #fff;\n box-shadow: 0 2px 8px color-mix(in srgb, var(--tf-accent) 30%, transparent);\n}\n.c-transfer__btn.is-disabled[data-v-6de1c97f] {\n opacity: 0.35;\n cursor: not-allowed;\n}\n.c-transfer.is-small[data-v-6de1c97f] {\n --tf-height: 280px;\n}\n.c-transfer.is-small .c-transfer__header[data-v-6de1c97f] {\n padding: 8px 12px;\n font-size: 12px;\n}\n.c-transfer.is-small .c-transfer__item[data-v-6de1c97f] {\n padding: 5px 12px;\n font-size: 12px;\n}\n.c-transfer.is-small .c-transfer__btn[data-v-6de1c97f] {\n width: 30px;\n height: 30px;\n font-size: 15px;\n}\n.c-transfer.is-large[data-v-6de1c97f] {\n --tf-height: 480px;\n}\n.c-transfer.is-large .c-transfer__header[data-v-6de1c97f] {\n padding: 12px 16px;\n font-size: 14px;\n}\n.c-transfer.is-large .c-transfer__item[data-v-6de1c97f] {\n padding: 9px 16px;\n font-size: 14px;\n}\n.c-transfer.is-large .c-transfer__btn[data-v-6de1c97f] {\n width: 42px;\n height: 42px;\n font-size: 20px;\n}\n.c-transfer__group[data-v-6de1c97f] {\n padding: 6px 14px 4px;\n font-size: 11px;\n font-weight: 600;\n color: var(--text-color-3);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}
|
package/dist/C_Transfer.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
* --tf-accent : 操作按钮主色
|
|
8
8
|
* --tf-height : 面板高度
|
|
9
9
|
*/
|
|
10
|
-
.c-transfer[data-v-
|
|
10
|
+
.c-transfer[data-v-6de1c97f] {
|
|
11
11
|
--tf-border: var(--border-color);
|
|
12
12
|
--tf-header-bg: color-mix(in srgb, var(--primary-color) 6%, var(--card-color));
|
|
13
13
|
--tf-item-hover: color-mix(in srgb, var(--primary-color) 8%, var(--card-color));
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
/* ======================== Sizes ======================== */
|
|
27
27
|
/* ======================== Group divider ======================== */
|
|
28
28
|
}
|
|
29
|
-
.c-transfer__panel[data-v-
|
|
29
|
+
.c-transfer__panel[data-v-6de1c97f] {
|
|
30
30
|
flex: 1;
|
|
31
31
|
display: flex;
|
|
32
32
|
flex-direction: column;
|
|
@@ -37,10 +37,10 @@
|
|
|
37
37
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
38
38
|
transition: box-shadow 0.2s;
|
|
39
39
|
}
|
|
40
|
-
.c-transfer__panel[data-v-
|
|
40
|
+
.c-transfer__panel[data-v-6de1c97f]:hover {
|
|
41
41
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
|
|
42
42
|
}
|
|
43
|
-
.c-transfer__header[data-v-
|
|
43
|
+
.c-transfer__header[data-v-6de1c97f] {
|
|
44
44
|
display: flex;
|
|
45
45
|
align-items: center;
|
|
46
46
|
justify-content: space-between;
|
|
@@ -51,27 +51,27 @@
|
|
|
51
51
|
font-size: 13px;
|
|
52
52
|
color: var(--text-color-1);
|
|
53
53
|
}
|
|
54
|
-
.c-transfer__count[data-v-
|
|
54
|
+
.c-transfer__count[data-v-6de1c97f] {
|
|
55
55
|
font-weight: 400;
|
|
56
56
|
font-size: 12px;
|
|
57
57
|
color: var(--text-color-3);
|
|
58
58
|
}
|
|
59
|
-
.c-transfer__filter[data-v-
|
|
59
|
+
.c-transfer__filter[data-v-6de1c97f] {
|
|
60
60
|
padding: 8px 10px;
|
|
61
61
|
border-bottom: 1px solid var(--tf-border);
|
|
62
62
|
}
|
|
63
|
-
.c-transfer__filter .n-input[data-v-
|
|
63
|
+
.c-transfer__filter .n-input[data-v-6de1c97f] {
|
|
64
64
|
--n-border: 1px solid var(--tf-border);
|
|
65
65
|
--n-border-focus: 1px solid var(--tf-accent);
|
|
66
66
|
}
|
|
67
|
-
.c-transfer__list[data-v-
|
|
67
|
+
.c-transfer__list[data-v-6de1c97f] {
|
|
68
68
|
flex: 1;
|
|
69
69
|
overflow-y: auto;
|
|
70
70
|
padding: 4px 0;
|
|
71
71
|
min-height: 0;
|
|
72
72
|
max-height: var(--tf-height);
|
|
73
73
|
}
|
|
74
|
-
.c-transfer__item[data-v-
|
|
74
|
+
.c-transfer__item[data-v-6de1c97f] {
|
|
75
75
|
display: flex;
|
|
76
76
|
align-items: center;
|
|
77
77
|
gap: 8px;
|
|
@@ -81,37 +81,37 @@
|
|
|
81
81
|
font-size: 13px;
|
|
82
82
|
color: var(--text-color-1);
|
|
83
83
|
}
|
|
84
|
-
.c-transfer__item[data-v-
|
|
84
|
+
.c-transfer__item[data-v-6de1c97f]:hover {
|
|
85
85
|
background: var(--tf-item-hover);
|
|
86
86
|
}
|
|
87
|
-
.c-transfer__item.is-disabled[data-v-
|
|
87
|
+
.c-transfer__item.is-disabled[data-v-6de1c97f] {
|
|
88
88
|
opacity: 0.45;
|
|
89
89
|
cursor: not-allowed;
|
|
90
90
|
}
|
|
91
|
-
.c-transfer__item.is-disabled[data-v-
|
|
91
|
+
.c-transfer__item.is-disabled[data-v-6de1c97f]:hover {
|
|
92
92
|
background: transparent;
|
|
93
93
|
}
|
|
94
|
-
.c-transfer__item.is-checked[data-v-
|
|
94
|
+
.c-transfer__item.is-checked[data-v-6de1c97f] {
|
|
95
95
|
color: var(--tf-accent);
|
|
96
96
|
font-weight: 500;
|
|
97
97
|
}
|
|
98
|
-
.c-transfer__item-icon[data-v-
|
|
98
|
+
.c-transfer__item-icon[data-v-6de1c97f] {
|
|
99
99
|
font-size: 16px;
|
|
100
100
|
flex-shrink: 0;
|
|
101
101
|
color: var(--text-color-3);
|
|
102
102
|
}
|
|
103
|
-
.c-transfer__item-label[data-v-
|
|
103
|
+
.c-transfer__item-label[data-v-6de1c97f] {
|
|
104
104
|
flex: 1;
|
|
105
105
|
overflow: hidden;
|
|
106
106
|
text-overflow: ellipsis;
|
|
107
107
|
white-space: nowrap;
|
|
108
108
|
}
|
|
109
|
-
.c-transfer__item-desc[data-v-
|
|
109
|
+
.c-transfer__item-desc[data-v-6de1c97f] {
|
|
110
110
|
font-size: 11px;
|
|
111
111
|
color: var(--text-color-3);
|
|
112
112
|
margin-top: 2px;
|
|
113
113
|
}
|
|
114
|
-
.c-transfer__empty[data-v-
|
|
114
|
+
.c-transfer__empty[data-v-6de1c97f] {
|
|
115
115
|
display: flex;
|
|
116
116
|
align-items: center;
|
|
117
117
|
justify-content: center;
|
|
@@ -120,13 +120,13 @@
|
|
|
120
120
|
font-size: 13px;
|
|
121
121
|
padding: 32px 0;
|
|
122
122
|
}
|
|
123
|
-
.c-transfer__actions[data-v-
|
|
123
|
+
.c-transfer__actions[data-v-6de1c97f] {
|
|
124
124
|
display: flex;
|
|
125
125
|
flex-direction: column;
|
|
126
126
|
justify-content: center;
|
|
127
127
|
gap: 10px;
|
|
128
128
|
}
|
|
129
|
-
.c-transfer__btn[data-v-
|
|
129
|
+
.c-transfer__btn[data-v-6de1c97f] {
|
|
130
130
|
display: inline-flex;
|
|
131
131
|
align-items: center;
|
|
132
132
|
justify-content: center;
|
|
@@ -140,48 +140,48 @@
|
|
|
140
140
|
cursor: pointer;
|
|
141
141
|
transition: background 0.2s, color 0.2s, box-shadow 0.2s;
|
|
142
142
|
}
|
|
143
|
-
.c-transfer__btn[data-v-
|
|
143
|
+
.c-transfer__btn[data-v-6de1c97f]:hover:not(.is-disabled) {
|
|
144
144
|
background: var(--tf-accent);
|
|
145
145
|
color: #fff;
|
|
146
146
|
box-shadow: 0 2px 8px color-mix(in srgb, var(--tf-accent) 30%, transparent);
|
|
147
147
|
}
|
|
148
|
-
.c-transfer__btn.is-disabled[data-v-
|
|
148
|
+
.c-transfer__btn.is-disabled[data-v-6de1c97f] {
|
|
149
149
|
opacity: 0.35;
|
|
150
150
|
cursor: not-allowed;
|
|
151
151
|
}
|
|
152
|
-
.c-transfer.is-small[data-v-
|
|
152
|
+
.c-transfer.is-small[data-v-6de1c97f] {
|
|
153
153
|
--tf-height: 280px;
|
|
154
154
|
}
|
|
155
|
-
.c-transfer.is-small .c-transfer__header[data-v-
|
|
155
|
+
.c-transfer.is-small .c-transfer__header[data-v-6de1c97f] {
|
|
156
156
|
padding: 8px 12px;
|
|
157
157
|
font-size: 12px;
|
|
158
158
|
}
|
|
159
|
-
.c-transfer.is-small .c-transfer__item[data-v-
|
|
159
|
+
.c-transfer.is-small .c-transfer__item[data-v-6de1c97f] {
|
|
160
160
|
padding: 5px 12px;
|
|
161
161
|
font-size: 12px;
|
|
162
162
|
}
|
|
163
|
-
.c-transfer.is-small .c-transfer__btn[data-v-
|
|
163
|
+
.c-transfer.is-small .c-transfer__btn[data-v-6de1c97f] {
|
|
164
164
|
width: 30px;
|
|
165
165
|
height: 30px;
|
|
166
166
|
font-size: 15px;
|
|
167
167
|
}
|
|
168
|
-
.c-transfer.is-large[data-v-
|
|
168
|
+
.c-transfer.is-large[data-v-6de1c97f] {
|
|
169
169
|
--tf-height: 480px;
|
|
170
170
|
}
|
|
171
|
-
.c-transfer.is-large .c-transfer__header[data-v-
|
|
171
|
+
.c-transfer.is-large .c-transfer__header[data-v-6de1c97f] {
|
|
172
172
|
padding: 12px 16px;
|
|
173
173
|
font-size: 14px;
|
|
174
174
|
}
|
|
175
|
-
.c-transfer.is-large .c-transfer__item[data-v-
|
|
175
|
+
.c-transfer.is-large .c-transfer__item[data-v-6de1c97f] {
|
|
176
176
|
padding: 9px 16px;
|
|
177
177
|
font-size: 14px;
|
|
178
178
|
}
|
|
179
|
-
.c-transfer.is-large .c-transfer__btn[data-v-
|
|
179
|
+
.c-transfer.is-large .c-transfer__btn[data-v-6de1c97f] {
|
|
180
180
|
width: 42px;
|
|
181
181
|
height: 42px;
|
|
182
182
|
font-size: 20px;
|
|
183
183
|
}
|
|
184
|
-
.c-transfer__group[data-v-
|
|
184
|
+
.c-transfer__group[data-v-6de1c97f] {
|
|
185
185
|
padding: 6px 14px 4px;
|
|
186
186
|
font-size: 11px;
|
|
187
187
|
font-weight: 600;
|
|
@@ -190,4 +190,4 @@
|
|
|
190
190
|
letter-spacing: 0.04em;
|
|
191
191
|
}
|
|
192
192
|
|
|
193
|
-
/*# sourceMappingURL=C_Transfer-
|
|
193
|
+
/*# sourceMappingURL=C_Transfer-BOB6OBqS.css.map*/
|
package/dist/C_Transfer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"C_Transfer.js","names":[],"sources":["../src/components/C_Transfer/types.ts","../src/components/C_Transfer/index.vue","../src/components/C_Transfer/index.vue","../src/components/C_Transfer/index.vue"],"sourcesContent":["/**\r\n * @Description: 穿梭框组件类型定义\r\n */\r\n\r\n/** 穿梭框数据项 */\r\nexport interface TransferItem {\r\n /** 唯一标识 */\r\n key: string | number\r\n /** 显示标签 */\r\n label: string\r\n /** 是否禁用 */\r\n disabled?: boolean\r\n /** 分组名称 */\r\n group?: string\r\n /** 描述信息(用于详细模式) */\r\n description?: string\r\n /** 图标(Iconify) */\r\n icon?: string\r\n /** 额外数据 */\r\n extra?: Record<string, unknown>\r\n}\r\n\r\n/** 组件 Props */\r\nexport interface TransferProps {\r\n /** 数据源 */\r\n data: TransferItem[]\r\n /** 右侧已选 key 列表 (v-model) */\r\n modelValue: Array<string | number>\r\n /** 左右栏标题 */\r\n titles?: [string, string]\r\n /** 是否可搜索 */\r\n filterable?: boolean\r\n /** 搜索占位符 */\r\n filterPlaceholder?: string\r\n /** 自定义筛选函数 */\r\n filterMethod?: (query: string, item: TransferItem) => boolean\r\n /** 是否显示全选复选框 */\r\n showSelectAll?: boolean\r\n /** 左侧空状态描述 */\r\n sourceEmptyText?: string\r\n /** 右侧空状态描述 */\r\n targetEmptyText?: string\r\n /** 尺寸 */\r\n size?: 'small' | 'medium' | 'large'\r\n}\r\n\r\n/** 默认 Props */\r\nexport const DEFAULT_TRANSFER_PROPS: Partial<TransferProps> = {\r\n titles: ['可选列表', '已选列表'],\r\n filterable: false,\r\n filterPlaceholder: '搜索...',\r\n showSelectAll: true,\r\n sourceEmptyText: '暂无数据',\r\n targetEmptyText: '未选择任何项',\r\n size: 'medium',\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 穿梭框组件\r\n-->\r\n<template>\r\n <div\r\n class=\"c-transfer\"\r\n :class=\"[`is-${mergedProps.size}`]\"\r\n >\r\n <!-- ================ Source Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isSourceAllChecked\"\r\n :indeterminate=\"isSourceIndeterminate\"\r\n @update:checked=\"toggleSourceAll\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"sourceQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredSourceList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredSourceList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': sourceChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"sourceChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleSourceCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.sourceEmptyText }}\r\n </div>\r\n </div>\r\n\r\n <!-- ================ Actions ================ -->\r\n <div class=\"c-transfer__actions\">\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\r\n :disabled=\"sourceChecked.size === 0\"\r\n @click=\"moveToTarget\"\r\n >\r\n <C_Icon name=\"mdi:chevron-right\" />\r\n </button>\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\r\n :disabled=\"targetChecked.size === 0\"\r\n @click=\"moveToSource\"\r\n >\r\n <C_Icon name=\"mdi:chevron-left\" />\r\n </button>\r\n </div>\r\n\r\n <!-- ================ Target Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isTargetAllChecked\"\r\n :indeterminate=\"isTargetIndeterminate\"\r\n @update:checked=\"toggleTargetAll\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ targetChecked.size }} / {{ targetList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"targetQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredTargetList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredTargetList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': targetChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"targetChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleTargetCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.targetEmptyText }}\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, reactive, ref } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import {\r\n DEFAULT_TRANSFER_PROPS,\r\n type TransferItem,\r\n type TransferProps,\r\n } from './types'\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n data: TransferProps['data']\r\n modelValue: TransferProps['modelValue']\r\n titles?: TransferProps['titles']\r\n filterable?: boolean\r\n filterPlaceholder?: string\r\n filterMethod?: TransferProps['filterMethod']\r\n showSelectAll?: boolean\r\n sourceEmptyText?: string\r\n targetEmptyText?: string\r\n size?: TransferProps['size']\r\n }>(),\r\n {\r\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\r\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\r\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\r\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\r\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\r\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\r\n size: DEFAULT_TRANSFER_PROPS.size,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [value: Array<string | number>]\r\n change: [\r\n targetKeys: Array<string | number>,\r\n direction: 'left' | 'right',\r\n moveKeys: Array<string | number>,\r\n ]\r\n }>()\r\n\r\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\r\n\r\n // ==================== 数据列表 ====================\r\n\r\n const dataMap = computed(() => {\r\n const m = new Map<string | number, TransferItem>()\r\n for (const item of props.data) m.set(item.key, item)\r\n return m\r\n })\r\n\r\n const targetKeySet = computed(() => new Set(props.modelValue))\r\n\r\n const sourceList = computed(() =>\r\n props.data.filter(d => !targetKeySet.value.has(d.key))\r\n )\r\n\r\n const targetList = computed(() => {\r\n const result: TransferItem[] = []\r\n for (const key of props.modelValue) {\r\n const item = dataMap.value.get(key)\r\n if (item) result.push(item)\r\n }\r\n return result\r\n })\r\n\r\n // ==================== 搜索 ====================\r\n\r\n const sourceQuery = ref('')\r\n const targetQuery = ref('')\r\n\r\n /** 默认过滤方法 */\r\n function defaultFilter(query: string, item: TransferItem): boolean {\r\n return item.label.toLowerCase().includes(query.toLowerCase())\r\n }\r\n\r\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\r\n\r\n const filteredSourceList = computed(() => {\r\n const q = sourceQuery.value.trim()\r\n return q\r\n ? sourceList.value.filter(item => filterFn.value(q, item))\r\n : sourceList.value\r\n })\r\n\r\n const filteredTargetList = computed(() => {\r\n const q = targetQuery.value.trim()\r\n return q\r\n ? targetList.value.filter(item => filterFn.value(q, item))\r\n : targetList.value\r\n })\r\n\r\n // ==================== 选中态 ====================\r\n\r\n const sourceChecked = reactive(new Set<string | number>())\r\n const targetChecked = reactive(new Set<string | number>())\r\n\r\n /** 切换源列表项选中状态 */\r\n function toggleSourceCheck(key: string | number) {\r\n if (sourceChecked.has(key)) sourceChecked.delete(key)\r\n else sourceChecked.add(key)\r\n }\r\n\r\n /** 切换目标列表项选中状态 */\r\n function toggleTargetCheck(key: string | number) {\r\n if (targetChecked.has(key)) targetChecked.delete(key)\r\n else targetChecked.add(key)\r\n }\r\n\r\n const isSourceAllChecked = computed(\r\n () =>\r\n filteredSourceList.value.length > 0 &&\r\n filteredSourceList.value.every(\r\n i => i.disabled || sourceChecked.has(i.key)\r\n )\r\n )\r\n const isSourceIndeterminate = computed(\r\n () =>\r\n !isSourceAllChecked.value &&\r\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\r\n )\r\n const isTargetAllChecked = computed(\r\n () =>\r\n filteredTargetList.value.length > 0 &&\r\n filteredTargetList.value.every(\r\n i => i.disabled || targetChecked.has(i.key)\r\n )\r\n )\r\n const isTargetIndeterminate = computed(\r\n () =>\r\n !isTargetAllChecked.value &&\r\n filteredTargetList.value.some(i => targetChecked.has(i.key))\r\n )\r\n\r\n /** 切换源列表全选状态 */\r\n function toggleSourceAll(checked: boolean) {\r\n for (const item of filteredSourceList.value) {\r\n if (item.disabled) continue\r\n if (checked) sourceChecked.add(item.key)\r\n else sourceChecked.delete(item.key)\r\n }\r\n }\r\n\r\n /** 切换目标列表全选状态 */\r\n function toggleTargetAll(checked: boolean) {\r\n for (const item of filteredTargetList.value) {\r\n if (item.disabled) continue\r\n if (checked) targetChecked.add(item.key)\r\n else targetChecked.delete(item.key)\r\n }\r\n }\r\n\r\n // ==================== 穿梭操作 ====================\r\n\r\n /** 将选中项移至目标列表 */\r\n function moveToTarget() {\r\n const keys = [...sourceChecked]\r\n const newVal = [...props.modelValue, ...keys]\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'right', keys)\r\n sourceChecked.clear()\r\n }\r\n\r\n /** 将选中项移回源列表 */\r\n function moveToSource() {\r\n const keys = [...targetChecked]\r\n const removeSet = new Set(keys)\r\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'left', keys)\r\n targetChecked.clear()\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Description: 穿梭框组件\r\n-->\r\n<template>\r\n <div\r\n class=\"c-transfer\"\r\n :class=\"[`is-${mergedProps.size}`]\"\r\n >\r\n <!-- ================ Source Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isSourceAllChecked\"\r\n :indeterminate=\"isSourceIndeterminate\"\r\n @update:checked=\"toggleSourceAll\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"sourceQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredSourceList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredSourceList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': sourceChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"sourceChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleSourceCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.sourceEmptyText }}\r\n </div>\r\n </div>\r\n\r\n <!-- ================ Actions ================ -->\r\n <div class=\"c-transfer__actions\">\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\r\n :disabled=\"sourceChecked.size === 0\"\r\n @click=\"moveToTarget\"\r\n >\r\n <C_Icon name=\"mdi:chevron-right\" />\r\n </button>\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\r\n :disabled=\"targetChecked.size === 0\"\r\n @click=\"moveToSource\"\r\n >\r\n <C_Icon name=\"mdi:chevron-left\" />\r\n </button>\r\n </div>\r\n\r\n <!-- ================ Target Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isTargetAllChecked\"\r\n :indeterminate=\"isTargetIndeterminate\"\r\n @update:checked=\"toggleTargetAll\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ targetChecked.size }} / {{ targetList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"targetQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredTargetList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredTargetList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': targetChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"targetChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleTargetCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.targetEmptyText }}\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, reactive, ref } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import {\r\n DEFAULT_TRANSFER_PROPS,\r\n type TransferItem,\r\n type TransferProps,\r\n } from './types'\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n data: TransferProps['data']\r\n modelValue: TransferProps['modelValue']\r\n titles?: TransferProps['titles']\r\n filterable?: boolean\r\n filterPlaceholder?: string\r\n filterMethod?: TransferProps['filterMethod']\r\n showSelectAll?: boolean\r\n sourceEmptyText?: string\r\n targetEmptyText?: string\r\n size?: TransferProps['size']\r\n }>(),\r\n {\r\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\r\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\r\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\r\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\r\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\r\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\r\n size: DEFAULT_TRANSFER_PROPS.size,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [value: Array<string | number>]\r\n change: [\r\n targetKeys: Array<string | number>,\r\n direction: 'left' | 'right',\r\n moveKeys: Array<string | number>,\r\n ]\r\n }>()\r\n\r\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\r\n\r\n // ==================== 数据列表 ====================\r\n\r\n const dataMap = computed(() => {\r\n const m = new Map<string | number, TransferItem>()\r\n for (const item of props.data) m.set(item.key, item)\r\n return m\r\n })\r\n\r\n const targetKeySet = computed(() => new Set(props.modelValue))\r\n\r\n const sourceList = computed(() =>\r\n props.data.filter(d => !targetKeySet.value.has(d.key))\r\n )\r\n\r\n const targetList = computed(() => {\r\n const result: TransferItem[] = []\r\n for (const key of props.modelValue) {\r\n const item = dataMap.value.get(key)\r\n if (item) result.push(item)\r\n }\r\n return result\r\n })\r\n\r\n // ==================== 搜索 ====================\r\n\r\n const sourceQuery = ref('')\r\n const targetQuery = ref('')\r\n\r\n /** 默认过滤方法 */\r\n function defaultFilter(query: string, item: TransferItem): boolean {\r\n return item.label.toLowerCase().includes(query.toLowerCase())\r\n }\r\n\r\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\r\n\r\n const filteredSourceList = computed(() => {\r\n const q = sourceQuery.value.trim()\r\n return q\r\n ? sourceList.value.filter(item => filterFn.value(q, item))\r\n : sourceList.value\r\n })\r\n\r\n const filteredTargetList = computed(() => {\r\n const q = targetQuery.value.trim()\r\n return q\r\n ? targetList.value.filter(item => filterFn.value(q, item))\r\n : targetList.value\r\n })\r\n\r\n // ==================== 选中态 ====================\r\n\r\n const sourceChecked = reactive(new Set<string | number>())\r\n const targetChecked = reactive(new Set<string | number>())\r\n\r\n /** 切换源列表项选中状态 */\r\n function toggleSourceCheck(key: string | number) {\r\n if (sourceChecked.has(key)) sourceChecked.delete(key)\r\n else sourceChecked.add(key)\r\n }\r\n\r\n /** 切换目标列表项选中状态 */\r\n function toggleTargetCheck(key: string | number) {\r\n if (targetChecked.has(key)) targetChecked.delete(key)\r\n else targetChecked.add(key)\r\n }\r\n\r\n const isSourceAllChecked = computed(\r\n () =>\r\n filteredSourceList.value.length > 0 &&\r\n filteredSourceList.value.every(\r\n i => i.disabled || sourceChecked.has(i.key)\r\n )\r\n )\r\n const isSourceIndeterminate = computed(\r\n () =>\r\n !isSourceAllChecked.value &&\r\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\r\n )\r\n const isTargetAllChecked = computed(\r\n () =>\r\n filteredTargetList.value.length > 0 &&\r\n filteredTargetList.value.every(\r\n i => i.disabled || targetChecked.has(i.key)\r\n )\r\n )\r\n const isTargetIndeterminate = computed(\r\n () =>\r\n !isTargetAllChecked.value &&\r\n filteredTargetList.value.some(i => targetChecked.has(i.key))\r\n )\r\n\r\n /** 切换源列表全选状态 */\r\n function toggleSourceAll(checked: boolean) {\r\n for (const item of filteredSourceList.value) {\r\n if (item.disabled) continue\r\n if (checked) sourceChecked.add(item.key)\r\n else sourceChecked.delete(item.key)\r\n }\r\n }\r\n\r\n /** 切换目标列表全选状态 */\r\n function toggleTargetAll(checked: boolean) {\r\n for (const item of filteredTargetList.value) {\r\n if (item.disabled) continue\r\n if (checked) targetChecked.add(item.key)\r\n else targetChecked.delete(item.key)\r\n }\r\n }\r\n\r\n // ==================== 穿梭操作 ====================\r\n\r\n /** 将选中项移至目标列表 */\r\n function moveToTarget() {\r\n const keys = [...sourceChecked]\r\n const newVal = [...props.modelValue, ...keys]\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'right', keys)\r\n sourceChecked.clear()\r\n }\r\n\r\n /** 将选中项移回源列表 */\r\n function moveToSource() {\r\n const keys = [...targetChecked]\r\n const removeSet = new Set(keys)\r\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'left', keys)\r\n targetChecked.clear()\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Description: 穿梭框组件\r\n-->\r\n<template>\r\n <div\r\n class=\"c-transfer\"\r\n :class=\"[`is-${mergedProps.size}`]\"\r\n >\r\n <!-- ================ Source Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isSourceAllChecked\"\r\n :indeterminate=\"isSourceIndeterminate\"\r\n @update:checked=\"toggleSourceAll\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[0] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"sourceQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredSourceList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredSourceList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': sourceChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"sourceChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleSourceCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.sourceEmptyText }}\r\n </div>\r\n </div>\r\n\r\n <!-- ================ Actions ================ -->\r\n <div class=\"c-transfer__actions\">\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\r\n :disabled=\"sourceChecked.size === 0\"\r\n @click=\"moveToTarget\"\r\n >\r\n <C_Icon name=\"mdi:chevron-right\" />\r\n </button>\r\n <button\r\n class=\"c-transfer__btn\"\r\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\r\n :disabled=\"targetChecked.size === 0\"\r\n @click=\"moveToSource\"\r\n >\r\n <C_Icon name=\"mdi:chevron-left\" />\r\n </button>\r\n </div>\r\n\r\n <!-- ================ Target Panel ================ -->\r\n <div class=\"c-transfer__panel\">\r\n <div class=\"c-transfer__header\">\r\n <NCheckbox\r\n v-if=\"mergedProps.showSelectAll\"\r\n :checked=\"isTargetAllChecked\"\r\n :indeterminate=\"isTargetIndeterminate\"\r\n @update:checked=\"toggleTargetAll\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </NCheckbox>\r\n <span\r\n v-else\r\n class=\"c-transfer__title\"\r\n >\r\n {{ mergedProps.titles?.[1] }}\r\n </span>\r\n <span class=\"c-transfer__count\"\r\n >{{ targetChecked.size }} / {{ targetList.length }}</span\r\n >\r\n </div>\r\n\r\n <div\r\n v-if=\"mergedProps.filterable\"\r\n class=\"c-transfer__filter\"\r\n >\r\n <NInput\r\n v-model:value=\"targetQuery\"\r\n clearable\r\n size=\"small\"\r\n :placeholder=\"mergedProps.filterPlaceholder\"\r\n >\r\n <template #prefix>\r\n <C_Icon name=\"mdi:magnify\" />\r\n </template>\r\n </NInput>\r\n </div>\r\n\r\n <div\r\n v-if=\"filteredTargetList.length\"\r\n class=\"c-transfer__list\"\r\n >\r\n <template\r\n v-for=\"item in filteredTargetList\"\r\n :key=\"item.key\"\r\n >\r\n <div\r\n class=\"c-transfer__item\"\r\n :class=\"{\r\n 'is-disabled': item.disabled,\r\n 'is-checked': targetChecked.has(item.key),\r\n }\"\r\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\r\n >\r\n <NCheckbox\r\n :checked=\"targetChecked.has(item.key)\"\r\n :disabled=\"item.disabled\"\r\n size=\"small\"\r\n @update:checked=\"toggleTargetCheck(item.key)\"\r\n @click.stop\r\n />\r\n <C_Icon\r\n v-if=\"item.icon\"\r\n :name=\"item.icon\"\r\n class=\"c-transfer__item-icon\"\r\n />\r\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\r\n </div>\r\n </template>\r\n </div>\r\n <div\r\n v-else\r\n class=\"c-transfer__empty\"\r\n >\r\n {{ mergedProps.targetEmptyText }}\r\n </div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { computed, reactive, ref } from 'vue'\r\n import C_Icon from '../C_Icon/index.vue'\r\n import {\r\n DEFAULT_TRANSFER_PROPS,\r\n type TransferItem,\r\n type TransferProps,\r\n } from './types'\r\n\r\n const props = withDefaults(\r\n defineProps<{\r\n data: TransferProps['data']\r\n modelValue: TransferProps['modelValue']\r\n titles?: TransferProps['titles']\r\n filterable?: boolean\r\n filterPlaceholder?: string\r\n filterMethod?: TransferProps['filterMethod']\r\n showSelectAll?: boolean\r\n sourceEmptyText?: string\r\n targetEmptyText?: string\r\n size?: TransferProps['size']\r\n }>(),\r\n {\r\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\r\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\r\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\r\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\r\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\r\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\r\n size: DEFAULT_TRANSFER_PROPS.size,\r\n }\r\n )\r\n\r\n const emit = defineEmits<{\r\n 'update:modelValue': [value: Array<string | number>]\r\n change: [\r\n targetKeys: Array<string | number>,\r\n direction: 'left' | 'right',\r\n moveKeys: Array<string | number>,\r\n ]\r\n }>()\r\n\r\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\r\n\r\n // ==================== 数据列表 ====================\r\n\r\n const dataMap = computed(() => {\r\n const m = new Map<string | number, TransferItem>()\r\n for (const item of props.data) m.set(item.key, item)\r\n return m\r\n })\r\n\r\n const targetKeySet = computed(() => new Set(props.modelValue))\r\n\r\n const sourceList = computed(() =>\r\n props.data.filter(d => !targetKeySet.value.has(d.key))\r\n )\r\n\r\n const targetList = computed(() => {\r\n const result: TransferItem[] = []\r\n for (const key of props.modelValue) {\r\n const item = dataMap.value.get(key)\r\n if (item) result.push(item)\r\n }\r\n return result\r\n })\r\n\r\n // ==================== 搜索 ====================\r\n\r\n const sourceQuery = ref('')\r\n const targetQuery = ref('')\r\n\r\n /** 默认过滤方法 */\r\n function defaultFilter(query: string, item: TransferItem): boolean {\r\n return item.label.toLowerCase().includes(query.toLowerCase())\r\n }\r\n\r\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\r\n\r\n const filteredSourceList = computed(() => {\r\n const q = sourceQuery.value.trim()\r\n return q\r\n ? sourceList.value.filter(item => filterFn.value(q, item))\r\n : sourceList.value\r\n })\r\n\r\n const filteredTargetList = computed(() => {\r\n const q = targetQuery.value.trim()\r\n return q\r\n ? targetList.value.filter(item => filterFn.value(q, item))\r\n : targetList.value\r\n })\r\n\r\n // ==================== 选中态 ====================\r\n\r\n const sourceChecked = reactive(new Set<string | number>())\r\n const targetChecked = reactive(new Set<string | number>())\r\n\r\n /** 切换源列表项选中状态 */\r\n function toggleSourceCheck(key: string | number) {\r\n if (sourceChecked.has(key)) sourceChecked.delete(key)\r\n else sourceChecked.add(key)\r\n }\r\n\r\n /** 切换目标列表项选中状态 */\r\n function toggleTargetCheck(key: string | number) {\r\n if (targetChecked.has(key)) targetChecked.delete(key)\r\n else targetChecked.add(key)\r\n }\r\n\r\n const isSourceAllChecked = computed(\r\n () =>\r\n filteredSourceList.value.length > 0 &&\r\n filteredSourceList.value.every(\r\n i => i.disabled || sourceChecked.has(i.key)\r\n )\r\n )\r\n const isSourceIndeterminate = computed(\r\n () =>\r\n !isSourceAllChecked.value &&\r\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\r\n )\r\n const isTargetAllChecked = computed(\r\n () =>\r\n filteredTargetList.value.length > 0 &&\r\n filteredTargetList.value.every(\r\n i => i.disabled || targetChecked.has(i.key)\r\n )\r\n )\r\n const isTargetIndeterminate = computed(\r\n () =>\r\n !isTargetAllChecked.value &&\r\n filteredTargetList.value.some(i => targetChecked.has(i.key))\r\n )\r\n\r\n /** 切换源列表全选状态 */\r\n function toggleSourceAll(checked: boolean) {\r\n for (const item of filteredSourceList.value) {\r\n if (item.disabled) continue\r\n if (checked) sourceChecked.add(item.key)\r\n else sourceChecked.delete(item.key)\r\n }\r\n }\r\n\r\n /** 切换目标列表全选状态 */\r\n function toggleTargetAll(checked: boolean) {\r\n for (const item of filteredTargetList.value) {\r\n if (item.disabled) continue\r\n if (checked) targetChecked.add(item.key)\r\n else targetChecked.delete(item.key)\r\n }\r\n }\r\n\r\n // ==================== 穿梭操作 ====================\r\n\r\n /** 将选中项移至目标列表 */\r\n function moveToTarget() {\r\n const keys = [...sourceChecked]\r\n const newVal = [...props.modelValue, ...keys]\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'right', keys)\r\n sourceChecked.clear()\r\n }\r\n\r\n /** 将选中项移回源列表 */\r\n function moveToSource() {\r\n const keys = [...targetChecked]\r\n const removeSet = new Set(keys)\r\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\r\n emit('update:modelValue', newVal)\r\n emit('change', newVal, 'left', keys)\r\n targetChecked.clear()\r\n }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n @use './index.scss';\r\n</style>\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"C_Transfer.js","names":[],"sources":["../src/components/C_Transfer/types.ts","../src/components/C_Transfer/index.vue","../src/components/C_Transfer/index.vue","../src/components/C_Transfer/index.vue"],"sourcesContent":["/**\n * @Description: 穿梭框组件类型定义\n */\n\n/** 穿梭框数据项 */\nexport interface TransferItem {\n /** 唯一标识 */\n key: string | number\n /** 显示标签 */\n label: string\n /** 是否禁用 */\n disabled?: boolean\n /** 分组名称 */\n group?: string\n /** 描述信息(用于详细模式) */\n description?: string\n /** 图标(Iconify) */\n icon?: string\n /** 额外数据 */\n extra?: Record<string, unknown>\n}\n\n/** 组件 Props */\nexport interface TransferProps {\n /** 数据源 */\n data: TransferItem[]\n /** 右侧已选 key 列表 (v-model) */\n modelValue: Array<string | number>\n /** 左右栏标题 */\n titles?: [string, string]\n /** 是否可搜索 */\n filterable?: boolean\n /** 搜索占位符 */\n filterPlaceholder?: string\n /** 自定义筛选函数 */\n filterMethod?: (query: string, item: TransferItem) => boolean\n /** 是否显示全选复选框 */\n showSelectAll?: boolean\n /** 左侧空状态描述 */\n sourceEmptyText?: string\n /** 右侧空状态描述 */\n targetEmptyText?: string\n /** 尺寸 */\n size?: 'small' | 'medium' | 'large'\n}\n\n/** 默认 Props */\nexport const DEFAULT_TRANSFER_PROPS: Partial<TransferProps> = {\n titles: ['可选列表', '已选列表'],\n filterable: false,\n filterPlaceholder: '搜索...',\n showSelectAll: true,\n sourceEmptyText: '暂无数据',\n targetEmptyText: '未选择任何项',\n size: 'medium',\n}\n","/* unplugin-vue-components disabled */<!--\n * @Description: 穿梭框组件\n-->\n<template>\n <div\n class=\"c-transfer\"\n :class=\"[`is-${mergedProps.size}`]\"\n >\n <!-- ================ Source Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isSourceAllChecked\"\n :indeterminate=\"isSourceIndeterminate\"\n @update:checked=\"toggleSourceAll\"\n >\n {{ mergedProps.titles?.[0] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[0] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"sourceQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredSourceList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredSourceList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': sourceChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"sourceChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleSourceCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.sourceEmptyText }}\n </div>\n </div>\n\n <!-- ================ Actions ================ -->\n <div class=\"c-transfer__actions\">\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\n :disabled=\"sourceChecked.size === 0\"\n @click=\"moveToTarget\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </button>\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\n :disabled=\"targetChecked.size === 0\"\n @click=\"moveToSource\"\n >\n <C_Icon name=\"mdi:chevron-left\" />\n </button>\n </div>\n\n <!-- ================ Target Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isTargetAllChecked\"\n :indeterminate=\"isTargetIndeterminate\"\n @update:checked=\"toggleTargetAll\"\n >\n {{ mergedProps.titles?.[1] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[1] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ targetChecked.size }} / {{ targetList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"targetQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredTargetList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredTargetList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': targetChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"targetChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleTargetCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.targetEmptyText }}\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, reactive, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TRANSFER_PROPS,\n type TransferItem,\n type TransferProps,\n } from './types'\n\n const props = withDefaults(\n defineProps<{\n data: TransferProps['data']\n modelValue: TransferProps['modelValue']\n titles?: TransferProps['titles']\n filterable?: boolean\n filterPlaceholder?: string\n filterMethod?: TransferProps['filterMethod']\n showSelectAll?: boolean\n sourceEmptyText?: string\n targetEmptyText?: string\n size?: TransferProps['size']\n }>(),\n {\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\n size: DEFAULT_TRANSFER_PROPS.size,\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [value: Array<string | number>]\n change: [\n targetKeys: Array<string | number>,\n direction: 'left' | 'right',\n moveKeys: Array<string | number>,\n ]\n }>()\n\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\n\n // ==================== 数据列表 ====================\n\n const dataMap = computed(() => {\n const m = new Map<string | number, TransferItem>()\n for (const item of props.data) m.set(item.key, item)\n return m\n })\n\n const targetKeySet = computed(() => new Set(props.modelValue))\n\n const sourceList = computed(() =>\n props.data.filter(d => !targetKeySet.value.has(d.key))\n )\n\n const targetList = computed(() => {\n const result: TransferItem[] = []\n for (const key of props.modelValue) {\n const item = dataMap.value.get(key)\n if (item) result.push(item)\n }\n return result\n })\n\n // ==================== 搜索 ====================\n\n const sourceQuery = ref('')\n const targetQuery = ref('')\n\n /** 默认过滤方法 */\n function defaultFilter(query: string, item: TransferItem): boolean {\n return item.label.toLowerCase().includes(query.toLowerCase())\n }\n\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\n\n const filteredSourceList = computed(() => {\n const q = sourceQuery.value.trim()\n return q\n ? sourceList.value.filter(item => filterFn.value(q, item))\n : sourceList.value\n })\n\n const filteredTargetList = computed(() => {\n const q = targetQuery.value.trim()\n return q\n ? targetList.value.filter(item => filterFn.value(q, item))\n : targetList.value\n })\n\n // ==================== 选中态 ====================\n\n const sourceChecked = reactive(new Set<string | number>())\n const targetChecked = reactive(new Set<string | number>())\n\n /** 切换源列表项选中状态 */\n function toggleSourceCheck(key: string | number) {\n if (sourceChecked.has(key)) sourceChecked.delete(key)\n else sourceChecked.add(key)\n }\n\n /** 切换目标列表项选中状态 */\n function toggleTargetCheck(key: string | number) {\n if (targetChecked.has(key)) targetChecked.delete(key)\n else targetChecked.add(key)\n }\n\n const isSourceAllChecked = computed(\n () =>\n filteredSourceList.value.length > 0 &&\n filteredSourceList.value.every(\n i => i.disabled || sourceChecked.has(i.key)\n )\n )\n const isSourceIndeterminate = computed(\n () =>\n !isSourceAllChecked.value &&\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\n )\n const isTargetAllChecked = computed(\n () =>\n filteredTargetList.value.length > 0 &&\n filteredTargetList.value.every(\n i => i.disabled || targetChecked.has(i.key)\n )\n )\n const isTargetIndeterminate = computed(\n () =>\n !isTargetAllChecked.value &&\n filteredTargetList.value.some(i => targetChecked.has(i.key))\n )\n\n /** 切换源列表全选状态 */\n function toggleSourceAll(checked: boolean) {\n for (const item of filteredSourceList.value) {\n if (item.disabled) continue\n if (checked) sourceChecked.add(item.key)\n else sourceChecked.delete(item.key)\n }\n }\n\n /** 切换目标列表全选状态 */\n function toggleTargetAll(checked: boolean) {\n for (const item of filteredTargetList.value) {\n if (item.disabled) continue\n if (checked) targetChecked.add(item.key)\n else targetChecked.delete(item.key)\n }\n }\n\n // ==================== 穿梭操作 ====================\n\n /** 将选中项移至目标列表 */\n function moveToTarget() {\n const keys = [...sourceChecked]\n const newVal = [...props.modelValue, ...keys]\n emit('update:modelValue', newVal)\n emit('change', newVal, 'right', keys)\n sourceChecked.clear()\n }\n\n /** 将选中项移回源列表 */\n function moveToSource() {\n const keys = [...targetChecked]\n const removeSet = new Set(keys)\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\n emit('update:modelValue', newVal)\n emit('change', newVal, 'left', keys)\n targetChecked.clear()\n }\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Description: 穿梭框组件\n-->\n<template>\n <div\n class=\"c-transfer\"\n :class=\"[`is-${mergedProps.size}`]\"\n >\n <!-- ================ Source Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isSourceAllChecked\"\n :indeterminate=\"isSourceIndeterminate\"\n @update:checked=\"toggleSourceAll\"\n >\n {{ mergedProps.titles?.[0] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[0] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"sourceQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredSourceList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredSourceList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': sourceChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"sourceChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleSourceCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.sourceEmptyText }}\n </div>\n </div>\n\n <!-- ================ Actions ================ -->\n <div class=\"c-transfer__actions\">\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\n :disabled=\"sourceChecked.size === 0\"\n @click=\"moveToTarget\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </button>\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\n :disabled=\"targetChecked.size === 0\"\n @click=\"moveToSource\"\n >\n <C_Icon name=\"mdi:chevron-left\" />\n </button>\n </div>\n\n <!-- ================ Target Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isTargetAllChecked\"\n :indeterminate=\"isTargetIndeterminate\"\n @update:checked=\"toggleTargetAll\"\n >\n {{ mergedProps.titles?.[1] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[1] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ targetChecked.size }} / {{ targetList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"targetQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredTargetList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredTargetList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': targetChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"targetChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleTargetCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.targetEmptyText }}\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, reactive, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TRANSFER_PROPS,\n type TransferItem,\n type TransferProps,\n } from './types'\n\n const props = withDefaults(\n defineProps<{\n data: TransferProps['data']\n modelValue: TransferProps['modelValue']\n titles?: TransferProps['titles']\n filterable?: boolean\n filterPlaceholder?: string\n filterMethod?: TransferProps['filterMethod']\n showSelectAll?: boolean\n sourceEmptyText?: string\n targetEmptyText?: string\n size?: TransferProps['size']\n }>(),\n {\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\n size: DEFAULT_TRANSFER_PROPS.size,\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [value: Array<string | number>]\n change: [\n targetKeys: Array<string | number>,\n direction: 'left' | 'right',\n moveKeys: Array<string | number>,\n ]\n }>()\n\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\n\n // ==================== 数据列表 ====================\n\n const dataMap = computed(() => {\n const m = new Map<string | number, TransferItem>()\n for (const item of props.data) m.set(item.key, item)\n return m\n })\n\n const targetKeySet = computed(() => new Set(props.modelValue))\n\n const sourceList = computed(() =>\n props.data.filter(d => !targetKeySet.value.has(d.key))\n )\n\n const targetList = computed(() => {\n const result: TransferItem[] = []\n for (const key of props.modelValue) {\n const item = dataMap.value.get(key)\n if (item) result.push(item)\n }\n return result\n })\n\n // ==================== 搜索 ====================\n\n const sourceQuery = ref('')\n const targetQuery = ref('')\n\n /** 默认过滤方法 */\n function defaultFilter(query: string, item: TransferItem): boolean {\n return item.label.toLowerCase().includes(query.toLowerCase())\n }\n\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\n\n const filteredSourceList = computed(() => {\n const q = sourceQuery.value.trim()\n return q\n ? sourceList.value.filter(item => filterFn.value(q, item))\n : sourceList.value\n })\n\n const filteredTargetList = computed(() => {\n const q = targetQuery.value.trim()\n return q\n ? targetList.value.filter(item => filterFn.value(q, item))\n : targetList.value\n })\n\n // ==================== 选中态 ====================\n\n const sourceChecked = reactive(new Set<string | number>())\n const targetChecked = reactive(new Set<string | number>())\n\n /** 切换源列表项选中状态 */\n function toggleSourceCheck(key: string | number) {\n if (sourceChecked.has(key)) sourceChecked.delete(key)\n else sourceChecked.add(key)\n }\n\n /** 切换目标列表项选中状态 */\n function toggleTargetCheck(key: string | number) {\n if (targetChecked.has(key)) targetChecked.delete(key)\n else targetChecked.add(key)\n }\n\n const isSourceAllChecked = computed(\n () =>\n filteredSourceList.value.length > 0 &&\n filteredSourceList.value.every(\n i => i.disabled || sourceChecked.has(i.key)\n )\n )\n const isSourceIndeterminate = computed(\n () =>\n !isSourceAllChecked.value &&\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\n )\n const isTargetAllChecked = computed(\n () =>\n filteredTargetList.value.length > 0 &&\n filteredTargetList.value.every(\n i => i.disabled || targetChecked.has(i.key)\n )\n )\n const isTargetIndeterminate = computed(\n () =>\n !isTargetAllChecked.value &&\n filteredTargetList.value.some(i => targetChecked.has(i.key))\n )\n\n /** 切换源列表全选状态 */\n function toggleSourceAll(checked: boolean) {\n for (const item of filteredSourceList.value) {\n if (item.disabled) continue\n if (checked) sourceChecked.add(item.key)\n else sourceChecked.delete(item.key)\n }\n }\n\n /** 切换目标列表全选状态 */\n function toggleTargetAll(checked: boolean) {\n for (const item of filteredTargetList.value) {\n if (item.disabled) continue\n if (checked) targetChecked.add(item.key)\n else targetChecked.delete(item.key)\n }\n }\n\n // ==================== 穿梭操作 ====================\n\n /** 将选中项移至目标列表 */\n function moveToTarget() {\n const keys = [...sourceChecked]\n const newVal = [...props.modelValue, ...keys]\n emit('update:modelValue', newVal)\n emit('change', newVal, 'right', keys)\n sourceChecked.clear()\n }\n\n /** 将选中项移回源列表 */\n function moveToSource() {\n const keys = [...targetChecked]\n const removeSet = new Set(keys)\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\n emit('update:modelValue', newVal)\n emit('change', newVal, 'left', keys)\n targetChecked.clear()\n }\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n","<!--\n * @Description: 穿梭框组件\n-->\n<template>\n <div\n class=\"c-transfer\"\n :class=\"[`is-${mergedProps.size}`]\"\n >\n <!-- ================ Source Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isSourceAllChecked\"\n :indeterminate=\"isSourceIndeterminate\"\n @update:checked=\"toggleSourceAll\"\n >\n {{ mergedProps.titles?.[0] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[0] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ sourceChecked.size }} / {{ sourceList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"sourceQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredSourceList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredSourceList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': sourceChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleSourceCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"sourceChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleSourceCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.sourceEmptyText }}\n </div>\n </div>\n\n <!-- ================ Actions ================ -->\n <div class=\"c-transfer__actions\">\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': sourceChecked.size === 0 }\"\n :disabled=\"sourceChecked.size === 0\"\n @click=\"moveToTarget\"\n >\n <C_Icon name=\"mdi:chevron-right\" />\n </button>\n <button\n class=\"c-transfer__btn\"\n :class=\"{ 'is-disabled': targetChecked.size === 0 }\"\n :disabled=\"targetChecked.size === 0\"\n @click=\"moveToSource\"\n >\n <C_Icon name=\"mdi:chevron-left\" />\n </button>\n </div>\n\n <!-- ================ Target Panel ================ -->\n <div class=\"c-transfer__panel\">\n <div class=\"c-transfer__header\">\n <NCheckbox\n v-if=\"mergedProps.showSelectAll\"\n :checked=\"isTargetAllChecked\"\n :indeterminate=\"isTargetIndeterminate\"\n @update:checked=\"toggleTargetAll\"\n >\n {{ mergedProps.titles?.[1] }}\n </NCheckbox>\n <span\n v-else\n class=\"c-transfer__title\"\n >\n {{ mergedProps.titles?.[1] }}\n </span>\n <span class=\"c-transfer__count\"\n >{{ targetChecked.size }} / {{ targetList.length }}</span\n >\n </div>\n\n <div\n v-if=\"mergedProps.filterable\"\n class=\"c-transfer__filter\"\n >\n <NInput\n v-model:value=\"targetQuery\"\n clearable\n size=\"small\"\n :placeholder=\"mergedProps.filterPlaceholder\"\n >\n <template #prefix>\n <C_Icon name=\"mdi:magnify\" />\n </template>\n </NInput>\n </div>\n\n <div\n v-if=\"filteredTargetList.length\"\n class=\"c-transfer__list\"\n >\n <template\n v-for=\"item in filteredTargetList\"\n :key=\"item.key\"\n >\n <div\n class=\"c-transfer__item\"\n :class=\"{\n 'is-disabled': item.disabled,\n 'is-checked': targetChecked.has(item.key),\n }\"\n @click=\"!item.disabled && toggleTargetCheck(item.key)\"\n >\n <NCheckbox\n :checked=\"targetChecked.has(item.key)\"\n :disabled=\"item.disabled\"\n size=\"small\"\n @update:checked=\"toggleTargetCheck(item.key)\"\n @click.stop\n />\n <C_Icon\n v-if=\"item.icon\"\n :name=\"item.icon\"\n class=\"c-transfer__item-icon\"\n />\n <span class=\"c-transfer__item-label\">{{ item.label }}</span>\n </div>\n </template>\n </div>\n <div\n v-else\n class=\"c-transfer__empty\"\n >\n {{ mergedProps.targetEmptyText }}\n </div>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, reactive, ref } from 'vue'\n import C_Icon from '../C_Icon/index.vue'\n import {\n DEFAULT_TRANSFER_PROPS,\n type TransferItem,\n type TransferProps,\n } from './types'\n\n const props = withDefaults(\n defineProps<{\n data: TransferProps['data']\n modelValue: TransferProps['modelValue']\n titles?: TransferProps['titles']\n filterable?: boolean\n filterPlaceholder?: string\n filterMethod?: TransferProps['filterMethod']\n showSelectAll?: boolean\n sourceEmptyText?: string\n targetEmptyText?: string\n size?: TransferProps['size']\n }>(),\n {\n titles: () => DEFAULT_TRANSFER_PROPS.titles as [string, string],\n filterable: DEFAULT_TRANSFER_PROPS.filterable,\n filterPlaceholder: DEFAULT_TRANSFER_PROPS.filterPlaceholder,\n showSelectAll: DEFAULT_TRANSFER_PROPS.showSelectAll,\n sourceEmptyText: DEFAULT_TRANSFER_PROPS.sourceEmptyText,\n targetEmptyText: DEFAULT_TRANSFER_PROPS.targetEmptyText,\n size: DEFAULT_TRANSFER_PROPS.size,\n }\n )\n\n const emit = defineEmits<{\n 'update:modelValue': [value: Array<string | number>]\n change: [\n targetKeys: Array<string | number>,\n direction: 'left' | 'right',\n moveKeys: Array<string | number>,\n ]\n }>()\n\n const mergedProps = computed(() => ({ ...DEFAULT_TRANSFER_PROPS, ...props }))\n\n // ==================== 数据列表 ====================\n\n const dataMap = computed(() => {\n const m = new Map<string | number, TransferItem>()\n for (const item of props.data) m.set(item.key, item)\n return m\n })\n\n const targetKeySet = computed(() => new Set(props.modelValue))\n\n const sourceList = computed(() =>\n props.data.filter(d => !targetKeySet.value.has(d.key))\n )\n\n const targetList = computed(() => {\n const result: TransferItem[] = []\n for (const key of props.modelValue) {\n const item = dataMap.value.get(key)\n if (item) result.push(item)\n }\n return result\n })\n\n // ==================== 搜索 ====================\n\n const sourceQuery = ref('')\n const targetQuery = ref('')\n\n /** 默认过滤方法 */\n function defaultFilter(query: string, item: TransferItem): boolean {\n return item.label.toLowerCase().includes(query.toLowerCase())\n }\n\n const filterFn = computed(() => props.filterMethod ?? defaultFilter)\n\n const filteredSourceList = computed(() => {\n const q = sourceQuery.value.trim()\n return q\n ? sourceList.value.filter(item => filterFn.value(q, item))\n : sourceList.value\n })\n\n const filteredTargetList = computed(() => {\n const q = targetQuery.value.trim()\n return q\n ? targetList.value.filter(item => filterFn.value(q, item))\n : targetList.value\n })\n\n // ==================== 选中态 ====================\n\n const sourceChecked = reactive(new Set<string | number>())\n const targetChecked = reactive(new Set<string | number>())\n\n /** 切换源列表项选中状态 */\n function toggleSourceCheck(key: string | number) {\n if (sourceChecked.has(key)) sourceChecked.delete(key)\n else sourceChecked.add(key)\n }\n\n /** 切换目标列表项选中状态 */\n function toggleTargetCheck(key: string | number) {\n if (targetChecked.has(key)) targetChecked.delete(key)\n else targetChecked.add(key)\n }\n\n const isSourceAllChecked = computed(\n () =>\n filteredSourceList.value.length > 0 &&\n filteredSourceList.value.every(\n i => i.disabled || sourceChecked.has(i.key)\n )\n )\n const isSourceIndeterminate = computed(\n () =>\n !isSourceAllChecked.value &&\n filteredSourceList.value.some(i => sourceChecked.has(i.key))\n )\n const isTargetAllChecked = computed(\n () =>\n filteredTargetList.value.length > 0 &&\n filteredTargetList.value.every(\n i => i.disabled || targetChecked.has(i.key)\n )\n )\n const isTargetIndeterminate = computed(\n () =>\n !isTargetAllChecked.value &&\n filteredTargetList.value.some(i => targetChecked.has(i.key))\n )\n\n /** 切换源列表全选状态 */\n function toggleSourceAll(checked: boolean) {\n for (const item of filteredSourceList.value) {\n if (item.disabled) continue\n if (checked) sourceChecked.add(item.key)\n else sourceChecked.delete(item.key)\n }\n }\n\n /** 切换目标列表全选状态 */\n function toggleTargetAll(checked: boolean) {\n for (const item of filteredTargetList.value) {\n if (item.disabled) continue\n if (checked) targetChecked.add(item.key)\n else targetChecked.delete(item.key)\n }\n }\n\n // ==================== 穿梭操作 ====================\n\n /** 将选中项移至目标列表 */\n function moveToTarget() {\n const keys = [...sourceChecked]\n const newVal = [...props.modelValue, ...keys]\n emit('update:modelValue', newVal)\n emit('change', newVal, 'right', keys)\n sourceChecked.clear()\n }\n\n /** 将选中项移回源列表 */\n function moveToSource() {\n const keys = [...targetChecked]\n const removeSet = new Set(keys)\n const newVal = props.modelValue.filter(k => !removeSet.has(k))\n emit('update:modelValue', newVal)\n emit('change', newVal, 'left', keys)\n targetChecked.clear()\n }\n</script>\n\n<style scoped lang=\"scss\">\n @use './index.scss';\n</style>\n"],"mappings":"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"}
|