@robot-admin/naive-ui-components 0.20.0 → 0.21.1
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 +22 -0
- package/README.md +5 -5
- package/README_EN.md +5 -5
- package/SECURITY.md +39 -0
- package/dist/C_AntV.css +31 -31
- package/dist/C_AntV2.cjs +1 -1
- package/dist/C_AntV2.js +1 -1
- package/dist/C_Chat.css +90 -90
- package/dist/C_Chat2.cjs +1 -1
- package/dist/C_Chat2.js +1 -1
- package/dist/C_CollapsePanel2.cjs +1 -1
- package/dist/C_CollapsePanel2.js +1 -1
- package/dist/C_Draggable.css +53 -53
- package/dist/C_Draggable2.cjs +1 -1
- package/dist/C_Draggable2.js +1 -1
- package/dist/C_FilePreview.css +98 -98
- package/dist/C_FilePreview.d.cts +2 -2
- package/dist/C_FilePreview.d.ts +2 -2
- package/dist/C_FilePreview2.cjs +1 -1
- package/dist/C_FilePreview2.js +1 -1
- package/dist/C_Form.base.css +9 -9
- package/dist/C_Form.css +9 -9
- package/dist/C_FormSearch.css +52 -52
- package/dist/C_FormSearch2.cjs +1 -1
- package/dist/C_FormSearch2.js +1 -1
- package/dist/C_Language.css +2 -2
- package/dist/C_Language2.cjs +1 -1
- package/dist/C_Language2.js +1 -1
- package/dist/C_Login.css +79 -79
- package/dist/C_Login2.cjs +1 -1
- package/dist/C_Login2.js +1 -1
- package/dist/C_Markdown.css +1 -2
- package/dist/C_Menu.css +1 -1
- package/dist/C_Menu.d.cts +2 -2
- package/dist/C_Menu.d.ts +2 -2
- package/dist/C_Menu2.cjs +1 -1
- package/dist/C_Menu2.js +1 -1
- package/dist/C_NotificationCenter.css +124 -124
- package/dist/C_NotificationCenter.d.cts +2 -2
- package/dist/C_NotificationCenter.d.ts +2 -2
- package/dist/C_NotificationCenter2.cjs +1 -1
- package/dist/C_NotificationCenter2.js +1 -1
- package/dist/C_Skeleton.css +2 -2
- package/dist/C_Skeleton2.cjs +1 -1
- package/dist/C_Skeleton2.js +1 -1
- package/dist/C_SplitPane.css +66 -66
- package/dist/C_SplitPane2.cjs +1 -1
- package/dist/C_SplitPane2.js +1 -1
- package/dist/C_Table.base.css +9 -9
- package/dist/C_Table.css +9 -9
- package/dist/C_Table.d.ts +1 -0
- package/dist/C_Theme2.cjs +1 -1
- package/dist/C_Theme2.js +1 -1
- package/dist/C_Timeline.css +46 -46
- package/dist/C_Timeline2.cjs +1 -1
- package/dist/C_Timeline2.js +1 -1
- package/dist/C_Transfer.css +26 -26
- package/dist/C_Transfer2.cjs +1 -1
- package/dist/C_Transfer2.js +1 -1
- package/dist/C_Tree.css +23 -23
- package/dist/C_Tree.d.ts +1 -0
- package/dist/C_Tree2.cjs +1 -1
- package/dist/C_Tree2.js +1 -1
- package/dist/C_Upload2.cjs +1 -1
- package/dist/C_Upload2.js +1 -1
- package/dist/C_VideoPlayer.d.cts +2 -2
- package/dist/C_VideoPlayer.d.ts +2 -2
- package/dist/C_VideoPlayer2.cjs +2 -2
- package/dist/C_VideoPlayer2.js +2 -2
- package/dist/C_WaterFall.css +31 -29
- package/dist/C_WaterFall2.cjs +1 -1
- package/dist/C_WaterFall2.js +1 -1
- package/dist/C_WorkFlow.css +112 -111
- package/dist/C_WorkFlow2.cjs +1 -1
- package/dist/C_WorkFlow2.js +1 -1
- package/dist/config.cjs +1 -0
- package/dist/config.d.cts +8 -0
- package/dist/config.d.ts +8 -0
- package/dist/config.js +1 -0
- package/dist/constants.d.cts +1 -1
- package/dist/constants.d.ts +1 -1
- package/dist/constants2.d.cts +1 -1
- package/dist/constants2.d.ts +1 -1
- package/dist/constants3.d.cts +32 -9
- package/dist/constants3.d.ts +32 -9
- package/dist/constants4.d.cts +16 -5
- package/dist/constants4.d.ts +16 -5
- package/dist/constants5.d.cts +22 -18
- package/dist/constants5.d.ts +22 -18
- package/dist/data.d.cts +6 -6
- package/dist/data.d.ts +6 -6
- package/dist/dateRange.d.cts +2 -0
- package/dist/dateRange.d.ts +2 -0
- package/dist/feedback.cjs +1 -1
- package/dist/feedback.js +1 -1
- package/dist/helpers.cjs +1 -1
- package/dist/helpers.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +7 -6
- package/dist/index.d.ts +8 -6
- package/dist/index.js +1 -1
- package/dist/index.vue.d.cts +5 -5
- package/dist/index.vue.d.ts +5 -5
- package/dist/index10.vue.d.cts +3 -3
- package/dist/index10.vue.d.ts +2 -2
- package/dist/index11.vue.d.cts +2 -2
- package/dist/index11.vue.d.ts +2 -2
- package/dist/index12.vue.d.cts +2 -2
- package/dist/index12.vue.d.ts +3 -3
- package/dist/index13.vue.d.cts +3 -3
- package/dist/index13.vue.d.ts +8 -8
- package/dist/index14.vue.d.cts +8 -8
- package/dist/index14.vue.d.ts +0 -1
- package/dist/index15.vue.d.cts +0 -1
- package/dist/index15.vue.d.ts +1 -1
- package/dist/index16.vue.d.cts +1 -1
- package/dist/index16.vue.d.ts +1 -1
- package/dist/index17.vue.d.cts +1 -1
- package/dist/index17.vue.d.ts +2 -2
- package/dist/index18.vue.d.cts +2 -2
- package/dist/index18.vue.d.ts +44 -40
- package/dist/index19.vue.d.cts +3 -3
- package/dist/index19.vue.d.ts +3 -3
- package/dist/index20.vue.d.cts +3 -3
- package/dist/index20.vue.d.ts +3 -3
- package/dist/index21.vue.d.cts +2 -2
- package/dist/index21.vue.d.ts +2 -2
- package/dist/index25.vue.d.cts +0 -1
- package/dist/index25.vue.d.ts +0 -1
- package/dist/index26.vue.d.cts +3 -3
- package/dist/index26.vue.d.ts +3 -3
- package/dist/index3.vue.d.cts +3 -3
- package/dist/index3.vue.d.ts +3 -3
- package/dist/index4.vue.d.cts +44 -40
- package/dist/index6.vue.d.ts +0 -2
- package/dist/index7.vue.d.cts +0 -2
- package/dist/index8.vue.d.ts +3 -3
- package/dist/index9.vue.d.cts +3 -3
- package/dist/index9.vue.d.ts +3 -3
- package/dist/mapUtils.d.cts +2 -2
- package/dist/mapUtils.d.ts +2 -2
- package/dist/style.css +848 -846
- package/dist/useCalendarEvents.d.cts +1 -1
- package/dist/useCalendarEvents.d.ts +1 -1
- package/dist/useCollapsePanel.d.cts +3 -3
- package/dist/useCollapsePanel.d.ts +3 -3
- package/dist/useComponentLocale.cjs +1 -1
- package/dist/useComponentLocale.js +1 -1
- package/dist/useCropperCore.d.cts +8 -8
- package/dist/useCropperCore.d.ts +8 -8
- package/dist/useDraggableLayout.d.cts +1 -0
- package/dist/useDraggableLayout.d.ts +1 -0
- package/dist/useEdgeInteraction.d.cts +3 -3
- package/dist/useEdgeInteraction.d.ts +3 -3
- package/dist/useFullscreen.d.cts +41 -23
- package/dist/useFullscreen.d.ts +41 -23
- package/dist/useInfiniteScroll.d.cts +7 -5
- package/dist/useInfiniteScroll.d.ts +7 -5
- package/dist/useQRCode.d.cts +4 -4
- package/dist/useQRCode.d.ts +4 -4
- package/dist/useSignatureHistory.d.cts +4 -4
- package/dist/useSignatureHistory.d.ts +4 -4
- package/dist/useSplitResize.d.cts +3 -4
- package/dist/useSplitResize.d.ts +3 -4
- package/dist/useTableQuery.cjs +1 -1
- package/dist/useTableQuery.d.cts +8 -12
- package/dist/useTableQuery.d.ts +8 -12
- package/dist/useTableQuery.js +1 -1
- package/dist/useWorkflowValidation.d.cts +105 -97
- package/dist/useWorkflowValidation.d.ts +105 -97
- package/dist/verification.d.cts +6 -6
- package/dist/verification.d.ts +6 -6
- package/docs/architecture.en.md +3 -1
- package/docs/architecture.md +3 -1
- package/docs/guides/usage.en.md +16 -0
- package/docs/guides/usage.md +56 -0
- package/package.json +27 -10
- package/dist/context.cjs +0 -1
- package/dist/context.js +0 -1
package/dist/C_Chat2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,computed as r,createBlock as i,createCommentVNode as a,createElementBlock as o,createElementVNode as s,createTextVNode as c,createVNode as l,defineComponent as u,nextTick as d,normalizeClass as f,onBeforeUnmount as p,openBlock as m,ref as h,renderList as g,renderSlot as _,resolveComponent as v,toDisplayString as y,unref as b,watch as x,withCtx as S,withKeys as C,withModifiers as w}from"vue";import{NButton as T,NInput as E,NSpin as D}from"naive-ui";import{VVirtualList as O}from"vueuc";const k=[`data-message-id`],A={key:0,class:`c-chat__time-divider`},j={key:0,class:`c-chat__msg-avatar`},M=[`src`],N={key:1,class:`c-chat__avatar-fallback`},P={class:`c-chat__msg-body`},F={key:0,class:`c-chat__msg-username`},I={key:1,class:`c-chat__bubble`},L=[`aria-label`],R=[`src`,`alt`],z={class:`c-chat__file-info`},B={class:`c-chat__file-name`},V={key:0,class:`c-chat__file-size`},H={key:4,class:`c-chat__msg-time`},U={key:6,class:`c-chat__msg-status is-sending`};var W=t(u({__name:`ChatMessageItem`,props:{msg:{},previous:{},selfAvatar:{},selfName:{},showTimestamp:{type:Boolean}},emits:[`image-preview`,`file-click`,`resend`],setup(t,{emit:i}){let c=t,u=i,d=r(()=>!c.previous||new Date(c.msg.timestamp).getTime()-new Date(c.previous.timestamp).getTime()>3e5),p=e=>e.sender===`self`&&c.selfAvatar||e.avatar,h=e=>e.sender===`self`?c.selfName||e.username||`Me`:e.username||`未知`;function g(e){let t=new Date(e);return`${String(t.getHours()).padStart(2,`0`)}:${String(t.getMinutes()).padStart(2,`0`)}`}function _(e){let t=new Date(e),n=new Date;return t.toDateString()===n.toDateString()?g(e):`${t.getMonth()+1}/${t.getDate()} ${g(e)}`}function v(e){return e<1024?`${e}B`:e<1048576?`${(e/1024).toFixed(1)}KB`:`${(e/1048576).toFixed(1)}MB`}return(r,i)=>(m(),o(`div`,{class:`c-chat__message-row`,"data-message-id":t.msg.id},[a(` 时间分割 `),d.value?(m(),o(`div`,A,y(_(t.msg.timestamp)),1)):a(`v-if`,!0),a(` 消息条目 `),s(`div`,{class:f([`c-chat__msg`,`is-${t.msg.sender}`])},[a(` 头像 `),t.msg.sender===`system`?a(`v-if`,!0):(m(),o(`div`,j,[p(t.msg)?(m(),o(`img`,{key:0,src:p(t.msg),class:`c-chat__avatar`},null,8,M)):(m(),o(`div`,N,y(h(t.msg).charAt(0)),1))])),a(` 消息体 `),s(`div`,P,[t.msg.sender===`other`&&t.msg.username?(m(),o(`span`,F,y(t.msg.username),1)):a(`v-if`,!0),a(` 文本消息 `),t.msg.type===`text`||t.msg.type===`system`?(m(),o(`div`,I,y(t.msg.content),1)):t.msg.type===`image`?(m(),o(n,{key:2},[a(` 图片消息 `),s(`button`,{type:`button`,class:`c-chat__msg-image-button`,"aria-label":`预览${t.msg.username||`聊天`}的图片`,onClick:i[0]||=e=>u(`image-preview`,t.msg.content)},[s(`img`,{src:t.msg.content,alt:t.msg.fileName||`聊天图片`,class:`c-chat__msg-image`},null,8,R)],8,L)],2112)):t.msg.type===`file`?(m(),o(n,{key:3},[a(` 文件消息 `),s(`button`,{type:`button`,class:`c-chat__msg-file`,onClick:i[1]||=e=>u(`file-click`,t.msg)},[l(e,{name:`mdi:file-document-outline`,size:28}),s(`div`,z,[s(`span`,B,y(t.msg.fileName||`文件`),1),t.msg.fileSize?(m(),o(`span`,V,y(v(t.msg.fileSize)),1)):a(`v-if`,!0)])])],2112)):a(`v-if`,!0),a(` 时间戳 `),t.showTimestamp&&t.msg.sender!==`system`?(m(),o(`span`,H,y(g(t.msg.timestamp)),1)):a(`v-if`,!0),a(` 发送状态 `),t.msg.sender===`self`&&t.msg.status===`failed`?(m(),o(`button`,{key:5,type:`button`,class:`c-chat__msg-status is-failed`,onClick:i[2]||=e=>u(`resend`,t.msg)},` 发送失败,点击重试 `)):t.msg.sender===`self`&&t.msg.status===`sending`?(m(),o(`span`,U,`发送中...`)):a(`v-if`,!0)])],2)],8,k))}}),[[`__scopeId`,`data-v-f86c73f0`]]);const ee=[`data-contact-id`],te={class:`c-chat__contact-avatar`},ne=[`src`,`alt`],G={key:1,class:`c-chat__avatar-fallback`},K={key:2,class:`c-chat__online-dot`},q={class:`c-chat__contact-info`},J={class:`c-chat__contact-name`},Y={key:0,class:`c-chat__contact-time`},X={key:0,class:`c-chat__contact-last`},re={key:0,class:`c-chat__unread`};var Z=t(u({__name:`ChatContactItem`,props:{contact:{},active:{type:Boolean}},emits:[`select`],setup(e,{emit:t}){let n=t;function r(e){let t=new Date(e),n=Date.now()-t.getTime();if(n<6e4)return`刚刚`;if(n<36e5)return`${Math.floor(n/6e4)}分钟前`;let r=`${String(t.getHours()).padStart(2,`0`)}:${String(t.getMinutes()).padStart(2,`0`)}`;return n<864e5?r:`${t.getMonth()+1}/${t.getDate()} ${r}`}return(t,i)=>(m(),o(`button`,{type:`button`,class:f([`c-chat__contact`,{"is-active":e.active}]),"data-contact-id":e.contact.id,onClick:i[0]||=t=>n(`select`,e.contact.id)},[s(`div`,te,[e.contact.avatar?(m(),o(`img`,{key:0,src:e.contact.avatar,alt:e.contact.name,class:`c-chat__avatar`},null,8,ne)):(m(),o(`div`,G,y(e.contact.name.charAt(0)),1)),e.contact.online?(m(),o(`span`,K)):a(`v-if`,!0)]),s(`div`,q,[s(`div`,J,[s(`span`,null,y(e.contact.name),1),e.contact.lastTime?(m(),o(`span`,Y,y(r(e.contact.lastTime)),1)):a(`v-if`,!0)]),e.contact.lastMessage?(m(),o(`div`,X,y(e.contact.lastMessage),1)):a(`v-if`,!0)]),e.contact.unread?(m(),o(`span`,re,y(e.contact.unread>99?`99+`:e.contact.unread),1)):a(`v-if`,!0)],10,ee))}}),[[`__scopeId`,`data-v-de62a9e6`]]);function ie(e){let t=!1,n=0,r,i,a,o=!0,s=!1,c=!1,l=0,u=0,f,m=()=>e.virtualRef.value?.listElRef??e.normalRef.value,h=e=>e.scrollHeight-e.scrollTop-e.clientHeight<=64,g=e=>Array.from(e.querySelectorAll(`[data-message-id]`));function _(){r!==void 0&&cancelAnimationFrame(r),r=void 0}function v(e,i){if(_(),typeof requestAnimationFrame>`u`){i();return}r=requestAnimationFrame(()=>{r=void 0,!t&&e===n&&i()})}function y(e){let r=++n;_(),d(()=>{!t&&r===n&&e(r)})}function b(t){let n=e.virtualRef.value;n?n.scrollTo({top:t,debounce:!1}):e.normalRef.value&&(e.normalRef.value.scrollTop=t)}function S(){let t=e.virtualRef.value;t?t.scrollTo({position:`bottom`}):e.normalRef.value&&(e.normalRef.value.scrollTop=e.normalRef.value.scrollHeight)}function C(){o=!0,c=!1,s=!0,f=void 0,y(e=>{S(),v(e,()=>{S(),s=!1})})}function w(e){let{top:t}=e.getBoundingClientRect(),n=g(e).find(e=>e.getBoundingClientRect().bottom>t);return n?.dataset.messageId?{id:n.dataset.messageId,offset:n.getBoundingClientRect().top-t}:void 0}function T(e,t){let n=m();if(!n||!f)return;let r=g(n).find(e=>e.dataset.messageId===f?.id);if(r){let e=r.getBoundingClientRect().top-n.getBoundingClientRect().top;b(Math.max(0,n.scrollTop+e-f.offset))}t>0?v(e,()=>T(e,t-1)):f=void 0}function E(t){f=t,o=!1,s=!1,y(n=>{e.virtualRef.value?.scrollTo({key:t.id,debounce:!1}),T(n,3)})}function D(e,t){o=!1,s=!1,f=void 0,y(()=>{let n=m();n&&b(Math.max(0,e+n.scrollHeight-t))})}function O(){o=!1,s=!1,n++,_()}function k(){c=!0,f=void 0,O(),i!==void 0&&cancelAnimationFrame(i),i=requestAnimationFrame(()=>{if(i=void 0,t||!c)return;c=!1;let e=m();e&&!f&&(o=h(e))})}function A(e){return l>0&&(l!==e.scrollHeight||u!==e.clientHeight)}function j(e){let t=A(e);if(l=e.scrollHeight,u=e.clientHeight,!(s||f)){if(o&&t&&!c){C();return}c=!1,o=h(e)}}function M(){let t=m();t&&(j(t),t.scrollTop===0&&!e.loadingHistory.value&&e.onLoadMore())}function N(){if(!t)if(f){let e=n;v(e,()=>T(e,1))}else o&&C()}x(()=>e.virtualRef.value?.itemsElRef??e.normalRef.value?.firstElementChild,e=>{if(a?.disconnect(),a=void 0,e&&typeof ResizeObserver<`u`){a=new ResizeObserver(N),a.observe(e);let t=m();t&&t!==e&&a.observe(t)}},{flush:`post`});let P=()=>{let t=e.messages.value;return[e.contactId.value,t.length,t[0]?.id,t[t.length-1]?.id,t[t.length-1]?.content,e.loadingHistory.value,e.virtual.value]},F=(t,n)=>t[1]>n[1]&&n[1]>0&&t[2]!==n[2]&&(t[3]===n[3]||e.messages.value.some(e=>e.id===n[2])),I=(e,t)=>e[1]>0&&t[1]>0&&e[2]!==t[2]&&e[3]!==t[3];function L(e,t,n){let r=e[6]||t[6]?w(n):void 0;r?E(r):D(n.scrollTop,n.scrollHeight)}let R=(e,t,n)=>I(e,t)||t[1]===0||!c&&(h(n)||o&&A(n));function z(e,t,n){R(e,t,n)?C():L(e,t,n)}return x(P,(e,t)=>{let n=m();if(!t||e[0]!==t[0]||!n){C();return}F(e,t)||e[5]!==t[5]?L(e,t,n):e[6]===t[6]?R(e,t,n)?C():f||O():z(e,t,n)},{immediate:!0,flush:`pre`}),p(()=>{t=!0,n++,_(),i!==void 0&&cancelAnimationFrame(i),a?.disconnect()}),{scrollToBottom:C,handleMessagesScroll:M,handleScrollIntent:k}}const Q={placeholder:`输入消息...`,showContacts:!0,showTimestamp:!0,showSendBtn:!0,loadingHistory:!1,title:`聊天`},ae={class:`c-chat`},oe={key:0,class:`c-chat__sidebar`},se={class:`c-chat__sidebar-header`},ce={class:`c-chat__search`},le={key:1,class:`c-chat__contact-list`},ue={key:1,class:`c-chat__main`},de={class:`c-chat__header`},$={key:0,class:`c-chat__header-status`},fe={key:0,class:`c-chat__load-more`},pe={class:`c-chat__message-items`},me={key:0,class:`c-chat__load-more`},he={key:1,class:`c-chat__empty`},ge={class:`c-chat__input-area`},_e={class:`c-chat__input-actions`},ve={class:`c-chat__input-wrap`},ye={class:`c-chat__main c-chat__no-chat`};var be=t(u({__name:`index`,props:{contacts:{default:()=>[]},messages:{default:()=>[]},currentContactId:{default:``},placeholder:{default:Q.placeholder},showContacts:{type:Boolean,default:Q.showContacts},showTimestamp:{type:Boolean,default:Q.showTimestamp},selfAvatar:{default:``},selfName:{default:``},showSendBtn:{type:Boolean,default:Q.showSendBtn},loadingHistory:{type:Boolean,default:Q.loadingHistory},virtualScroll:{type:Boolean,default:!0},title:{default:Q.title}},emits:[`send`,`select-contact`,`load-more`,`image-preview`,`file-click`,`file-upload`,`emoji-click`,`resend`],setup(t,{expose:u,emit:d}){let f=t,p=d,v=r(()=>({...Q,...f})),x=h(``),k=h(``),A=h(null),j=h(null),M=r(()=>f.contacts??[]),N=r(()=>f.messages??[]),P=r(()=>f.currentContactId||M.value[0]?.id||``),F=r(()=>M.value.find(e=>e.id===P.value)),I=r(()=>{if(!k.value)return M.value;let e=k.value.toLowerCase();return M.value.filter(t=>t.name.toLowerCase().includes(e))}),L=r(()=>f.virtualScroll&&N.value.length>=200),R=r(()=>f.virtualScroll&&I.value.length>=100),z=e=>{p(`select-contact`,e)},B=e=>{if(e instanceof KeyboardEvent&&(e.isComposing||e.keyCode===229))return;e?.preventDefault();let t=x.value.trim();t&&(p(`send`,t),x.value=``)},{scrollToBottom:V,handleMessagesScroll:H,handleScrollIntent:U}=ie({messages:N,contactId:P,virtual:L,loadingHistory:r(()=>v.value.loadingHistory),normalRef:A,virtualRef:j,onLoadMore:()=>p(`load-more`)});return u({scrollToBottom:V}),(r,u)=>{let d=E,f=D,h=T;return m(),o(`div`,ae,[a(` ===== 联系人侧栏 ===== `),v.value.showContacts&&M.value.length?(m(),o(`aside`,oe,[s(`div`,se,[l(e,{name:`mdi:chat-outline`,size:20}),u[14]||=c(` 会话 `,-1)]),a(` 搜索框 `),s(`div`,ce,[l(d,{value:k.value,"onUpdate:value":u[0]||=e=>k.value=e,placeholder:`搜索联系人`,clearable:``,size:`small`},{prefix:S(()=>[l(e,{name:`mdi:magnify`,size:16})]),_:1},8,[`value`])]),R.value?(m(),i(b(O),{key:0,class:`c-chat__contact-list`,items:I.value,"key-field":`id`,"item-size":56,"item-resizable":``},{default:S(({index:e})=>[l(Z,{contact:I.value[e],active:I.value[e].id===P.value,onSelect:z},null,8,[`contact`,`active`])]),_:1},8,[`items`])):(m(),o(`div`,le,[(m(!0),o(n,null,g(I.value,e=>(m(),i(Z,{key:e.id,contact:e,active:e.id===P.value,onSelect:z},null,8,[`contact`,`active`]))),128))]))])):a(`v-if`,!0),a(` ===== 主聊天区域 ===== `),F.value||!v.value.showContacts?(m(),o(`div`,ue,[a(` 顶栏 `),s(`div`,de,[_(r.$slots,`header`,{},()=>[s(`span`,null,y(F.value?.name||v.value.title),1),F.value?.online?(m(),o(`span`,$,` 在线 `)):a(`v-if`,!0)],!0)]),L.value?(m(),i(b(O),{key:P.value,ref_key:`virtualMessagesRef`,ref:j,class:`c-chat__messages c-chat__messages--virtual`,items:N.value,"key-field":`id`,"item-size":32,"item-resizable":``,"padding-top":16,"padding-bottom":16,"items-style":{paddingLeft:`20px`,paddingRight:`20px`},onScroll:b(H),onWheel:b(U),onPointerdown:b(U),onKeydown:b(U)},{default:S(({index:e})=>[s(`div`,null,[e===0&&v.value.loadingHistory?(m(),o(`div`,fe,[l(f,{size:`small`})])):a(`v-if`,!0),l(W,{msg:N.value[e],previous:N.value[e-1],"self-avatar":t.selfAvatar,"self-name":t.selfName,"show-timestamp":v.value.showTimestamp,onImagePreview:u[1]||=e=>p(`image-preview`,e),onFileClick:u[2]||=e=>p(`file-click`,e),onResend:u[3]||=e=>p(`resend`,e)},null,8,[`msg`,`previous`,`self-avatar`,`self-name`,`show-timestamp`])])]),_:1},8,[`items`,`onScroll`,`onWheel`,`onPointerdown`,`onKeydown`])):(m(),o(`div`,{key:1,ref_key:`messagesRef`,ref:A,class:`c-chat__messages`,onScroll:u[7]||=(...e)=>b(H)&&b(H)(...e),onWheel:u[8]||=(...e)=>b(U)&&b(U)(...e),onPointerdown:u[9]||=(...e)=>b(U)&&b(U)(...e),onKeydown:u[10]||=(...e)=>b(U)&&b(U)(...e)},[s(`div`,pe,[v.value.loadingHistory?(m(),o(`div`,me,[l(f,{size:`small`})])):a(`v-if`,!0),!N.value.length&&!v.value.loadingHistory?(m(),o(`div`,he,`暂无消息,发送第一条吧`)):a(`v-if`,!0),(m(!0),o(n,null,g(N.value,(e,n)=>(m(),i(W,{key:e.id,msg:e,previous:N.value[n-1],"self-avatar":t.selfAvatar,"self-name":t.selfName,"show-timestamp":v.value.showTimestamp,onImagePreview:u[4]||=e=>p(`image-preview`,e),onFileClick:u[5]||=e=>p(`file-click`,e),onResend:u[6]||=e=>p(`resend`,e)},null,8,[`msg`,`previous`,`self-avatar`,`self-name`,`show-timestamp`]))),128))])],544)),a(` 输入区域 `),s(`div`,ge,[s(`div`,_e,[_(r.$slots,`input-actions`,{},()=>[l(h,{quaternary:``,circle:``,size:`small`,onClick:u[11]||=e=>p(`emoji-click`)},{icon:S(()=>[l(e,{name:`mdi:emoticon-happy-outline`,size:18})]),_:1}),l(h,{quaternary:``,circle:``,size:`small`,onClick:u[12]||=e=>p(`file-upload`)},{icon:S(()=>[l(e,{name:`mdi:paperclip`,size:18})]),_:1})],!0)]),s(`div`,ve,[l(d,{value:x.value,"onUpdate:value":u[13]||=e=>x.value=e,placeholder:v.value.placeholder,type:`textarea`,autosize:{minRows:1,maxRows:4},onKeydown:C(w(B,[`exact`]),[`enter`])},null,8,[`value`,`placeholder`,`onKeydown`])]),v.value.showSendBtn?(m(),i(h,{key:0,type:`primary`,disabled:!x.value.trim(),class:`c-chat__send-btn`,onClick:B},{icon:S(()=>[l(e,{name:`mdi:send`,size:16})]),_:1},8,[`disabled`])):a(`v-if`,!0)])])):(m(),o(n,{key:2},[a(` ===== 未选中联系人空态 ===== `),s(`div`,ye,[l(e,{name:`mdi:chat-processing-outline`,size:48,class:`c-chat__no-chat-icon`}),u[15]||=s(`span`,null,`选择一个会话开始聊天`,-1)])],2112))])}}}),[[`__scopeId`,`data-v-4e22902a`]]);export{Q as n,be as t};
|
|
1
|
+
import{t as e}from"./useComponentLocale.js";import{t}from"./C_Icon2.js";import{t as n}from"./export-helper.js";import{Fragment as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,nextTick as f,normalizeClass as p,onBeforeUnmount as m,openBlock as h,ref as g,renderList as _,renderSlot as v,resolveComponent as y,toDisplayString as b,unref as x,watch as S,withCtx as C,withKeys as w,withModifiers as T}from"vue";import{NButton as E,NInput as D,NSpin as O}from"naive-ui";import{VVirtualList as k}from"vueuc";const A=[`data-message-id`],j={key:0,class:`c-chat__time-divider`},M={key:0,class:`c-chat__msg-avatar`},N=[`src`],P={key:1,class:`c-chat__avatar-fallback`},F={class:`c-chat__msg-body`},I={key:0,class:`c-chat__msg-username`},L={key:1,class:`c-chat__bubble`},R=[`aria-label`],z=[`src`,`alt`],B={class:`c-chat__file-info`},V={class:`c-chat__file-name`},H={key:0,class:`c-chat__file-size`},U={key:4,class:`c-chat__msg-time`},W={key:6,class:`c-chat__msg-status is-sending`};var G=n(d({__name:`ChatMessageItem`,props:{msg:{},previous:{},selfAvatar:{},selfName:{},showTimestamp:{type:Boolean}},emits:[`image-preview`,`file-click`,`resend`],setup(n,{emit:a}){let{t:l}=e(),d=n,f=a,m=i(()=>!d.previous||new Date(d.msg.timestamp).getTime()-new Date(d.previous.timestamp).getTime()>3e5),g=e=>e.sender===`self`&&d.selfAvatar||e.avatar,_=e=>e.sender===`self`?d.selfName||e.username||l(`chat.self`):e.username||l(`common.unknown`);function v(e){let t=new Date(e);return`${String(t.getHours()).padStart(2,`0`)}:${String(t.getMinutes()).padStart(2,`0`)}`}function y(e){let t=new Date(e),n=new Date;return t.toDateString()===n.toDateString()?v(e):`${t.getMonth()+1}/${t.getDate()} ${v(e)}`}function S(e){return e<1024?`${e}B`:e<1048576?`${(e/1024).toFixed(1)}KB`:`${(e/1048576).toFixed(1)}MB`}return(e,i)=>(h(),s(`div`,{class:`c-chat__message-row`,"data-message-id":n.msg.id},[o(` 时间分割 `),m.value?(h(),s(`div`,j,b(y(n.msg.timestamp)),1)):o(`v-if`,!0),o(` 消息条目 `),c(`div`,{class:p([`c-chat__msg`,`is-${n.msg.sender}`])},[o(` 头像 `),n.msg.sender===`system`?o(`v-if`,!0):(h(),s(`div`,M,[g(n.msg)?(h(),s(`img`,{key:0,src:g(n.msg),class:`c-chat__avatar`},null,8,N)):(h(),s(`div`,P,b(_(n.msg).charAt(0)),1))])),o(` 消息体 `),c(`div`,F,[n.msg.sender===`other`&&n.msg.username?(h(),s(`span`,I,b(n.msg.username),1)):o(`v-if`,!0),o(` 文本消息 `),n.msg.type===`text`||n.msg.type===`system`?(h(),s(`div`,L,b(n.msg.content),1)):n.msg.type===`image`?(h(),s(r,{key:2},[o(` 图片消息 `),c(`button`,{type:`button`,class:`c-chat__msg-image-button`,"aria-label":x(l)(`chat.imagePreview`,{name:n.msg.username||x(l)(`chat.title`)}),onClick:i[0]||=e=>f(`image-preview`,n.msg.content)},[c(`img`,{src:n.msg.content,alt:n.msg.fileName||x(l)(`chat.image`),class:`c-chat__msg-image`},null,8,z)],8,R)],2112)):n.msg.type===`file`?(h(),s(r,{key:3},[o(` 文件消息 `),c(`button`,{type:`button`,class:`c-chat__msg-file`,onClick:i[1]||=e=>f(`file-click`,n.msg)},[u(t,{name:`mdi:file-document-outline`,size:28}),c(`div`,B,[c(`span`,V,b(n.msg.fileName||x(l)(`chat.file`)),1),n.msg.fileSize?(h(),s(`span`,H,b(S(n.msg.fileSize)),1)):o(`v-if`,!0)])])],2112)):o(`v-if`,!0),o(` 时间戳 `),n.showTimestamp&&n.msg.sender!==`system`?(h(),s(`span`,U,b(v(n.msg.timestamp)),1)):o(`v-if`,!0),o(` 发送状态 `),n.msg.sender===`self`&&n.msg.status===`failed`?(h(),s(`button`,{key:5,type:`button`,class:`c-chat__msg-status is-failed`,onClick:i[2]||=e=>f(`resend`,n.msg)},b(x(l)(`chat.failed`)),1)):n.msg.sender===`self`&&n.msg.status===`sending`?(h(),s(`span`,W,b(x(l)(`chat.sending`)),1)):o(`v-if`,!0)])],2)],8,A))}}),[[`__scopeId`,`data-v-47cd7e6f`]]);const K=[`data-contact-id`],q={class:`c-chat__contact-avatar`},J=[`src`,`alt`],ee={key:1,class:`c-chat__avatar-fallback`},te={key:2,class:`c-chat__online-dot`},ne={class:`c-chat__contact-info`},Y={class:`c-chat__contact-name`},X={key:0,class:`c-chat__contact-time`},re={key:0,class:`c-chat__contact-last`},ie={key:0,class:`c-chat__unread`};var Z=n(d({__name:`ChatContactItem`,props:{contact:{},active:{type:Boolean}},emits:[`select`],setup(t,{emit:n}){let{t:r}=e(),i=n;function a(e){let t=new Date(e),n=Date.now()-t.getTime();if(n<6e4)return r(`time.now`);if(n<36e5)return r(`time.minutes`,{count:Math.floor(n/6e4)});let i=`${String(t.getHours()).padStart(2,`0`)}:${String(t.getMinutes()).padStart(2,`0`)}`;return n<864e5?i:`${t.getMonth()+1}/${t.getDate()} ${i}`}return(e,n)=>(h(),s(`button`,{type:`button`,class:p([`c-chat__contact`,{"is-active":t.active}]),"data-contact-id":t.contact.id,onClick:n[0]||=e=>i(`select`,t.contact.id)},[c(`div`,q,[t.contact.avatar?(h(),s(`img`,{key:0,src:t.contact.avatar,alt:t.contact.name,class:`c-chat__avatar`},null,8,J)):(h(),s(`div`,ee,b(t.contact.name.charAt(0)),1)),t.contact.online?(h(),s(`span`,te)):o(`v-if`,!0)]),c(`div`,ne,[c(`div`,Y,[c(`span`,null,b(t.contact.name),1),t.contact.lastTime?(h(),s(`span`,X,b(a(t.contact.lastTime)),1)):o(`v-if`,!0)]),t.contact.lastMessage?(h(),s(`div`,re,b(t.contact.lastMessage),1)):o(`v-if`,!0)]),t.contact.unread?(h(),s(`span`,ie,b(t.contact.unread>99?`99+`:t.contact.unread),1)):o(`v-if`,!0)],10,K))}}),[[`__scopeId`,`data-v-66c19394`]]);function ae(e){let t=!1,n=0,r,i,a,o=!0,s=!1,c=!1,l=0,u=0,d,p=()=>e.virtualRef.value?.listElRef??e.normalRef.value,h=e=>e.scrollHeight-e.scrollTop-e.clientHeight<=64,g=e=>Array.from(e.querySelectorAll(`[data-message-id]`));function _(){r!==void 0&&cancelAnimationFrame(r),r=void 0}function v(e,i){if(_(),typeof requestAnimationFrame>`u`){i();return}r=requestAnimationFrame(()=>{r=void 0,!t&&e===n&&i()})}function y(e){let r=++n;_(),f(()=>{!t&&r===n&&e(r)})}function b(t){let n=e.virtualRef.value;n?n.scrollTo({top:t,debounce:!1}):e.normalRef.value&&(e.normalRef.value.scrollTop=t)}function x(){let t=e.virtualRef.value;t?t.scrollTo({position:`bottom`}):e.normalRef.value&&(e.normalRef.value.scrollTop=e.normalRef.value.scrollHeight)}function C(){o=!0,c=!1,s=!0,d=void 0,y(e=>{x(),v(e,()=>{x(),s=!1})})}function w(e){let{top:t}=e.getBoundingClientRect(),n=g(e).find(e=>e.getBoundingClientRect().bottom>t);return n?.dataset.messageId?{id:n.dataset.messageId,offset:n.getBoundingClientRect().top-t}:void 0}function T(e,t){let n=p();if(!n||!d)return;let r=g(n).find(e=>e.dataset.messageId===d?.id);if(r){let e=r.getBoundingClientRect().top-n.getBoundingClientRect().top;b(Math.max(0,n.scrollTop+e-d.offset))}t>0?v(e,()=>T(e,t-1)):d=void 0}function E(t){d=t,o=!1,s=!1,y(n=>{e.virtualRef.value?.scrollTo({key:t.id,debounce:!1}),T(n,3)})}function D(e,t){o=!1,s=!1,d=void 0,y(()=>{let n=p();n&&b(Math.max(0,e+n.scrollHeight-t))})}function O(){o=!1,s=!1,n++,_()}function k(){c=!0,d=void 0,O(),i!==void 0&&cancelAnimationFrame(i),i=requestAnimationFrame(()=>{if(i=void 0,t||!c)return;c=!1;let e=p();e&&!d&&(o=h(e))})}function A(e){return l>0&&(l!==e.scrollHeight||u!==e.clientHeight)}function j(e){let t=A(e);if(l=e.scrollHeight,u=e.clientHeight,!(s||d)){if(o&&t&&!c){C();return}c=!1,o=h(e)}}function M(){let t=p();t&&(j(t),t.scrollTop===0&&!e.loadingHistory.value&&e.onLoadMore())}function N(){if(!t)if(d){let e=n;v(e,()=>T(e,1))}else o&&C()}S(()=>e.virtualRef.value?.itemsElRef??e.normalRef.value?.firstElementChild,e=>{if(a?.disconnect(),a=void 0,e&&typeof ResizeObserver<`u`){a=new ResizeObserver(N),a.observe(e);let t=p();t&&t!==e&&a.observe(t)}},{flush:`post`});let P=()=>{let t=e.messages.value;return[e.contactId.value,t.length,t[0]?.id,t[t.length-1]?.id,t[t.length-1]?.content,e.loadingHistory.value,e.virtual.value]},F=(t,n)=>t[1]>n[1]&&n[1]>0&&t[2]!==n[2]&&(t[3]===n[3]||e.messages.value.some(e=>e.id===n[2])),I=(e,t)=>e[1]>0&&t[1]>0&&e[2]!==t[2]&&e[3]!==t[3];function L(e,t,n){let r=e[6]||t[6]?w(n):void 0;r?E(r):D(n.scrollTop,n.scrollHeight)}let R=(e,t,n)=>I(e,t)||t[1]===0||!c&&(h(n)||o&&A(n));function z(e,t,n){R(e,t,n)?C():L(e,t,n)}return S(P,(e,t)=>{let n=p();if(!t||e[0]!==t[0]||!n){C();return}F(e,t)||e[5]!==t[5]?L(e,t,n):e[6]===t[6]?R(e,t,n)?C():d||O():z(e,t,n)},{immediate:!0,flush:`pre`}),m(()=>{t=!0,n++,_(),i!==void 0&&cancelAnimationFrame(i),a?.disconnect()}),{scrollToBottom:C,handleMessagesScroll:M,handleScrollIntent:k}}const Q={placeholder:`输入消息...`,showContacts:!0,showTimestamp:!0,showSendBtn:!0,loadingHistory:!1,title:`聊天`},oe={class:`c-chat`},se={key:0,class:`c-chat__sidebar`},ce={class:`c-chat__sidebar-header`},le={class:`c-chat__search`},ue={key:1,class:`c-chat__contact-list`},de={key:1,class:`c-chat__main`},fe={class:`c-chat__header`},$={key:0,class:`c-chat__header-status`},pe={key:0,class:`c-chat__load-more`},me={class:`c-chat__message-items`},he={key:0,class:`c-chat__load-more`},ge={key:1,class:`c-chat__empty`},_e={class:`c-chat__input-area`},ve={class:`c-chat__input-actions`},ye={class:`c-chat__input-wrap`},be={class:`c-chat__main c-chat__no-chat`};var xe=n(d({__name:`index`,props:{contacts:{default:()=>[]},messages:{default:()=>[]},currentContactId:{default:``},placeholder:{},showContacts:{type:Boolean,default:Q.showContacts},showTimestamp:{type:Boolean,default:Q.showTimestamp},selfAvatar:{default:``},selfName:{default:``},showSendBtn:{type:Boolean,default:Q.showSendBtn},loadingHistory:{type:Boolean,default:Q.loadingHistory},virtualScroll:{type:Boolean,default:!0},title:{}},emits:[`send`,`select-contact`,`load-more`,`image-preview`,`file-click`,`file-upload`,`emoji-click`,`resend`],setup(n,{expose:d,emit:f}){let{t:p}=e(),m=n,y=f,A=i(()=>({...Q,...m,placeholder:m.placeholder??p(`chat.placeholder`),title:m.title??p(`chat.title`)})),j=g(``),M=g(``),N=g(null),P=g(null),F=i(()=>m.contacts??[]),I=i(()=>m.messages??[]),L=i(()=>m.currentContactId||F.value[0]?.id||``),R=new Map;S(L,(e,t)=>{let n=j.value,r=R.get(e)??``;for(R.delete(e),R.delete(t),n&&(m.contacts?.some(e=>e.id===t)||!m.showContacts)&&R.set(t,n);R.size>50;)R.delete(R.keys().next().value);j.value=r},{flush:`sync`}),S(()=>m.contacts?.map(e=>e.id),e=>{if(!m.showContacts)return;let t=new Set(e);t.has(L.value)||(j.value=``);for(let e of R.keys())t.has(e)||R.delete(e)});let z=i(()=>F.value.find(e=>e.id===L.value)),B=i(()=>{if(!M.value)return F.value;let e=M.value.toLowerCase();return F.value.filter(t=>t.name.toLowerCase().includes(e))}),V=i(()=>m.virtualScroll&&I.value.length>=200),H=i(()=>m.virtualScroll&&B.value.length>=100),U=e=>{y(`select-contact`,e)},W=e=>{if(e instanceof KeyboardEvent&&(e.isComposing||e.keyCode===229))return;e?.preventDefault();let t=j.value.trim();t&&(y(`send`,t),j.value=``)},{scrollToBottom:K,handleMessagesScroll:q,handleScrollIntent:J}=ae({messages:I,contactId:L,virtual:V,loadingHistory:i(()=>A.value.loadingHistory),normalRef:N,virtualRef:P,onLoadMore:()=>y(`load-more`)});return d({scrollToBottom:K}),(e,i)=>{let d=D,f=O,m=E;return h(),s(`div`,oe,[o(` ===== 联系人侧栏 ===== `),A.value.showContacts&&F.value.length?(h(),s(`aside`,se,[c(`div`,ce,[u(t,{name:`mdi:chat-outline`,size:20}),l(` `+b(x(p)(`chat.sessions`)),1)]),o(` 搜索框 `),c(`div`,le,[u(d,{value:M.value,"onUpdate:value":i[0]||=e=>M.value=e,placeholder:x(p)(`chat.search`),clearable:``,size:`small`},{prefix:C(()=>[u(t,{name:`mdi:magnify`,size:16})]),_:1},8,[`value`,`placeholder`])]),H.value?(h(),a(x(k),{key:0,class:`c-chat__contact-list`,items:B.value,"key-field":`id`,"item-size":56,"item-resizable":``},{default:C(({index:e})=>[u(Z,{contact:B.value[e],active:B.value[e].id===L.value,onSelect:U},null,8,[`contact`,`active`])]),_:1},8,[`items`])):(h(),s(`div`,ue,[(h(!0),s(r,null,_(B.value,e=>(h(),a(Z,{key:e.id,contact:e,active:e.id===L.value,onSelect:U},null,8,[`contact`,`active`]))),128))]))])):o(`v-if`,!0),o(` ===== 主聊天区域 ===== `),z.value||!A.value.showContacts?(h(),s(`div`,de,[o(` 顶栏 `),c(`div`,fe,[v(e.$slots,`header`,{},()=>[c(`span`,null,b(z.value?.name||A.value.title),1),z.value?.online?(h(),s(`span`,$,b(x(p)(`chat.online`)),1)):o(`v-if`,!0)],!0)]),V.value?(h(),a(x(k),{key:L.value,ref_key:`virtualMessagesRef`,ref:P,class:`c-chat__messages c-chat__messages--virtual`,items:I.value,"key-field":`id`,"item-size":32,"item-resizable":``,"padding-top":16,"padding-bottom":16,"items-style":{paddingLeft:`20px`,paddingRight:`20px`},onScroll:x(q),onWheel:x(J),onPointerdown:x(J),onKeydown:x(J)},{default:C(({index:e})=>[c(`div`,null,[e===0&&A.value.loadingHistory?(h(),s(`div`,pe,[u(f,{size:`small`})])):o(`v-if`,!0),u(G,{msg:I.value[e],previous:I.value[e-1],"self-avatar":n.selfAvatar,"self-name":n.selfName,"show-timestamp":A.value.showTimestamp,onImagePreview:i[1]||=e=>y(`image-preview`,e),onFileClick:i[2]||=e=>y(`file-click`,e),onResend:i[3]||=e=>y(`resend`,e)},null,8,[`msg`,`previous`,`self-avatar`,`self-name`,`show-timestamp`])])]),_:1},8,[`items`,`onScroll`,`onWheel`,`onPointerdown`,`onKeydown`])):(h(),s(`div`,{key:1,ref_key:`messagesRef`,ref:N,class:`c-chat__messages`,onScroll:i[7]||=(...e)=>x(q)&&x(q)(...e),onWheel:i[8]||=(...e)=>x(J)&&x(J)(...e),onPointerdown:i[9]||=(...e)=>x(J)&&x(J)(...e),onKeydown:i[10]||=(...e)=>x(J)&&x(J)(...e)},[c(`div`,me,[A.value.loadingHistory?(h(),s(`div`,he,[u(f,{size:`small`})])):o(`v-if`,!0),!I.value.length&&!A.value.loadingHistory?(h(),s(`div`,ge,b(x(p)(`chat.empty`)),1)):o(`v-if`,!0),(h(!0),s(r,null,_(I.value,(e,t)=>(h(),a(G,{key:e.id,msg:e,previous:I.value[t-1],"self-avatar":n.selfAvatar,"self-name":n.selfName,"show-timestamp":A.value.showTimestamp,onImagePreview:i[4]||=e=>y(`image-preview`,e),onFileClick:i[5]||=e=>y(`file-click`,e),onResend:i[6]||=e=>y(`resend`,e)},null,8,[`msg`,`previous`,`self-avatar`,`self-name`,`show-timestamp`]))),128))])],544)),o(` 输入区域 `),c(`div`,_e,[c(`div`,ve,[v(e.$slots,`input-actions`,{},()=>[u(m,{quaternary:``,circle:``,size:`small`,"aria-label":x(p)(`chat.emoji`),onClick:i[11]||=e=>y(`emoji-click`)},{icon:C(()=>[u(t,{name:`mdi:emoticon-happy-outline`,size:18})]),_:1},8,[`aria-label`]),u(m,{quaternary:``,circle:``,size:`small`,"aria-label":x(p)(`chat.attach`),onClick:i[12]||=e=>y(`file-upload`)},{icon:C(()=>[u(t,{name:`mdi:paperclip`,size:18})]),_:1},8,[`aria-label`])],!0)]),c(`div`,ye,[u(d,{value:j.value,"onUpdate:value":i[13]||=e=>j.value=e,placeholder:A.value.placeholder,type:`textarea`,autosize:{minRows:1,maxRows:4},onKeydown:w(T(W,[`exact`]),[`enter`])},null,8,[`value`,`placeholder`,`onKeydown`])]),A.value.showSendBtn?(h(),a(m,{key:0,type:`primary`,disabled:!j.value.trim(),class:`c-chat__send-btn`,"aria-label":x(p)(`chat.send`),onClick:W},{icon:C(()=>[u(t,{name:`mdi:send`,size:16})]),_:1},8,[`disabled`,`aria-label`])):o(`v-if`,!0)])])):(h(),s(r,{key:2},[o(` ===== 未选中联系人空态 ===== `),c(`div`,be,[u(t,{name:`mdi:chat-processing-outline`,size:48,class:`c-chat__no-chat-icon`}),c(`span`,null,b(x(p)(`chat.choose`)),1)])],2112))])}}}),[[`__scopeId`,`data-v-96dfa0d2`]]);export{Q as n,xe as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`);function r(e){if(!e)return null;try{let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>typeof e==`string`):null}catch{return null}}function i(e){let{items:t,activeKeys:i,defaultActiveKeys:a,accordion:o,persistKey:s,onChange:c,onExpand:l,onCollapse:u}=e,d=()=>{if(!s.value)return null;try{return r(localStorage.getItem(`collapse-panel:${s.value}`))}catch{return null}},f=e=>{if(s.value)try{localStorage.setItem(`collapse-panel:${s.value}`,JSON.stringify(e))}catch{}},p=(0,n.ref)(i.value===void 0?d()||[...a]:[...i.value]),m=(0,n.ref)(new Set(p.value)),h=(0,n.computed)({get:()=>i.value===void 0?p.value:i.value,set:e=>{p.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?m.value.has(e.key):!0},v=e=>{h.value=e,c?.(e),f(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),u?.(e);else{if(m.value.add(e),o.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&u?.(t)})}else v([...h.value,e]);l?.(e)}};return(0,n.watch)(()=>i.value,e=>{e!==void 0&&(p.value=[...e],e.forEach(e=>m.value.add(e)),f(e))}),{currentKeys:h,renderedOnce:m,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(o.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>m.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const a=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],o={class:`collapse-item__title-area`},s={class:`collapse-item__title-group`},c={class:`collapse-item__title`},l={key:1,class:`collapse-item__subtitle`},u=[`id`,`aria-labelledby`],d={key:0,class:`collapse-item__content`},f=(0,n.defineComponent)({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:r,emit:f}){let p=t,m=f,h=(0,n.ref)(null),g=(0,n.ref)(new Map),_=(e,t)=>{t?g.value.set(e,t):g.value.delete(e)},{isExpanded:v,shouldRender:y,toggle:b,expandAll:x,collapseAll:S,getActiveKeys:C,handleKeyDown:w}=i({items:(0,n.toRef)(p,`items`),activeKeys:(0,n.toRef)(p,`activeKeys`),defaultActiveKeys:p.defaultActiveKeys,accordion:(0,n.toRef)(p,`accordion`),persistKey:(0,n.toRef)(p,`persistKey`),onChange:e=>{m(`update:activeKeys`,e),m(`change`,e)},onExpand:e=>m(`expand`,e),onCollapse:e=>m(`collapse`,e)}),T=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},E=e=>{let t=e;t.style.height=``,t.style.overflow=``},D=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},O=e=>{let t=e;t.style.height=``,t.style.overflow=``};return r({expandAll:x,collapseAll:S,toggle:b,getActiveKeys:C,scrollToPanel:e=>{let t=g.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(r,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`containerRef`,ref:h,class:(0,n.normalizeClass)([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.items,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:t.key,ref_for:!0,ref:e=>_(t.key,e),class:(0,n.normalizeClass)([`collapse-item`,{"collapse-item--active":(0,n.unref)(v)(t.key),"collapse-item--disabled":t.disabled}])},[(0,n.createCommentVNode)(` 面板头部 `),(0,n.createElementVNode)(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":(0,n.unref)(v)(t.key),"aria-controls":`collapse-content-${t.key}`,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0,onClick:e=>!t.disabled&&(0,n.unref)(b)(t.key),onKeydown:e=>(0,n.unref)(w)(e,t.key)},[(0,n.createCommentVNode)(` 展开图标 `),(0,n.createElementVNode)(`span`,{class:(0,n.normalizeClass)([`collapse-item__arrow`,{"collapse-item__arrow--expanded":(0,n.unref)(v)(t.key)}])},[(0,n.createVNode)(e.t,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),(0,n.createCommentVNode)(` 标题区域 `),(0,n.createElementVNode)(`div`,o,[(0,n.renderSlot)(r.$slots,`header-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},()=>[(0,n.createElementVNode)(`div`,s,[t.icon?((0,n.openBlock)(),(0,n.createBlock)(e.t,{key:0,name:t.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`span`,c,(0,n.toDisplayString)(t.title),1),t.subtitle?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,l,(0,n.toDisplayString)(t.subtitle),1)):(0,n.createCommentVNode)(`v-if`,!0)])],!0)]),(0,n.createCommentVNode)(` 头部右侧操作区 `),r.$slots[`extra-${t.key}`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:0,class:`collapse-item__extra`,onClick:i[0]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.renderSlot)(r.$slots,`extra-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},void 0,!0)])):(0,n.createCommentVNode)(`v-if`,!0)],40,a),(0,n.createCommentVNode)(` 面板内容 `),(0,n.createVNode)(n.Transition,{name:`collapse-slide`,onEnter:T,onAfterEnter:E,onLeave:D,onAfterLeave:O,persisted:``},{default:(0,n.withCtx)(()=>[(0,n.withDirectives)((0,n.createElementVNode)(`div`,{id:`collapse-content-${t.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${t.key}`},[(0,n.unref)(y)(t)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[(0,n.renderSlot)(r.$slots,`panel-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},()=>[t.content&&typeof t.content!=`string`?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(t.content),{key:0})):t.content?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createTextVNode)((0,n.toDisplayString)(t.content),1)],64)):(0,n.createCommentVNode)(`v-if`,!0)],!0)])):(0,n.createCommentVNode)(`v-if`,!0)],8,u),[[n.vShow,(0,n.unref)(v)(t.key)]])]),_:2},1024)],2))),128))],2))}});var p=t.t(f,[[`__scopeId`,`data-v-d8f0f7a0`]]);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./C_Icon2.cjs`),t=require(`./export-helper.cjs`);let n=require(`vue`);function r(e){if(!e)return null;try{let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>typeof e==`string`):null}catch{return null}}function i(e){let{items:t,activeKeys:i,defaultActiveKeys:a,accordion:o,persistKey:s,onChange:c,onExpand:l,onCollapse:u}=e,d=()=>{if(!s.value)return null;try{return r(localStorage.getItem(`collapse-panel:${s.value}`))}catch{return null}},f=e=>{if(s.value)try{localStorage.setItem(`collapse-panel:${s.value}`,JSON.stringify(e))}catch{}},p=(0,n.ref)(i.value===void 0?d()||[...a]:[...i.value]),m=(0,n.ref)(new Set(p.value)),h=(0,n.computed)({get:()=>i.value===void 0?p.value:i.value,set:e=>{p.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?m.value.has(e.key):!0},v=e=>{h.value=e,c?.(e),f(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),u?.(e);else{if(m.value.add(e),o.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&u?.(t)})}else v([...h.value,e]);l?.(e)}};return(0,n.watch)(()=>i.value?.slice(),e=>{e!==void 0&&(p.value=[...e],e.forEach(e=>m.value.add(e)),f(e))}),{currentKeys:h,renderedOnce:m,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(o.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>m.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const a=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],o={class:`collapse-item__title-area`},s={class:`collapse-item__title-group`},c={class:`collapse-item__title`},l={key:1,class:`collapse-item__subtitle`},u=[`id`,`aria-labelledby`],d={key:0,class:`collapse-item__content`},f=(0,n.defineComponent)({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:r,emit:f}){let p=t,m=f,h=(0,n.ref)(null),g=(0,n.ref)(new Map),_=(e,t)=>{t?g.value.set(e,t):g.value.delete(e)},{isExpanded:v,shouldRender:y,toggle:b,expandAll:x,collapseAll:S,getActiveKeys:C,handleKeyDown:w}=i({items:(0,n.toRef)(p,`items`),activeKeys:(0,n.toRef)(p,`activeKeys`),defaultActiveKeys:p.defaultActiveKeys,accordion:(0,n.toRef)(p,`accordion`),persistKey:(0,n.toRef)(p,`persistKey`),onChange:e=>{m(`update:activeKeys`,e),m(`change`,e)},onExpand:e=>m(`expand`,e),onCollapse:e=>m(`collapse`,e)}),T=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},E=e=>{let t=e;t.style.height=``,t.style.overflow=``},D=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},O=e=>{let t=e;t.style.height=``,t.style.overflow=``};return r({expandAll:x,collapseAll:S,toggle:b,getActiveKeys:C,scrollToPanel:e=>{let t=g.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(r,i)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`containerRef`,ref:h,class:(0,n.normalizeClass)([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(t.items,t=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:t.key,ref_for:!0,ref:e=>_(t.key,e),class:(0,n.normalizeClass)([`collapse-item`,{"collapse-item--active":(0,n.unref)(v)(t.key),"collapse-item--disabled":t.disabled}])},[(0,n.createCommentVNode)(` 面板头部 `),(0,n.createElementVNode)(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":(0,n.unref)(v)(t.key),"aria-controls":`collapse-content-${t.key}`,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0,onClick:e=>!t.disabled&&(0,n.unref)(b)(t.key),onKeydown:e=>(0,n.unref)(w)(e,t.key)},[(0,n.createCommentVNode)(` 展开图标 `),(0,n.createElementVNode)(`span`,{class:(0,n.normalizeClass)([`collapse-item__arrow`,{"collapse-item__arrow--expanded":(0,n.unref)(v)(t.key)}])},[(0,n.createVNode)(e.t,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),(0,n.createCommentVNode)(` 标题区域 `),(0,n.createElementVNode)(`div`,o,[(0,n.renderSlot)(r.$slots,`header-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},()=>[(0,n.createElementVNode)(`div`,s,[t.icon?((0,n.openBlock)(),(0,n.createBlock)(e.t,{key:0,name:t.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):(0,n.createCommentVNode)(`v-if`,!0),(0,n.createElementVNode)(`span`,c,(0,n.toDisplayString)(t.title),1),t.subtitle?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,l,(0,n.toDisplayString)(t.subtitle),1)):(0,n.createCommentVNode)(`v-if`,!0)])],!0)]),(0,n.createCommentVNode)(` 头部右侧操作区 `),r.$slots[`extra-${t.key}`]?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:0,class:`collapse-item__extra`,onClick:i[0]||=(0,n.withModifiers)(()=>{},[`stop`])},[(0,n.renderSlot)(r.$slots,`extra-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},void 0,!0)])):(0,n.createCommentVNode)(`v-if`,!0)],40,a),(0,n.createCommentVNode)(` 面板内容 `),(0,n.createVNode)(n.Transition,{name:`collapse-slide`,onEnter:T,onAfterEnter:E,onLeave:D,onAfterLeave:O,persisted:``},{default:(0,n.withCtx)(()=>[(0,n.withDirectives)((0,n.createElementVNode)(`div`,{id:`collapse-content-${t.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${t.key}`},[(0,n.unref)(y)(t)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,d,[(0,n.renderSlot)(r.$slots,`panel-${t.key}`,{item:t,expanded:(0,n.unref)(v)(t.key)},()=>[t.content&&typeof t.content!=`string`?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(t.content),{key:0})):t.content?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createTextVNode)((0,n.toDisplayString)(t.content),1)],64)):(0,n.createCommentVNode)(`v-if`,!0)],!0)])):(0,n.createCommentVNode)(`v-if`,!0)],8,u),[[n.vShow,(0,n.unref)(v)(t.key)]])]),_:2},1024)],2))),128))],2))}});var p=t.t(f,[[`__scopeId`,`data-v-d8f0f7a0`]]);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return p}});
|
package/dist/C_CollapsePanel2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,Transition as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveDynamicComponent as _,toDisplayString as v,toRef as y,unref as b,vShow as x,watch as S,withCtx as C,withDirectives as w,withModifiers as T}from"vue";function E(e){if(!e)return null;try{let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>typeof e==`string`):null}catch{return null}}function D(e){let{items:t,activeKeys:n,defaultActiveKeys:r,accordion:a,persistKey:o,onChange:s,onExpand:c,onCollapse:l}=e,u=()=>{if(!o.value)return null;try{return E(localStorage.getItem(`collapse-panel:${o.value}`))}catch{return null}},d=e=>{if(o.value)try{localStorage.setItem(`collapse-panel:${o.value}`,JSON.stringify(e))}catch{}},f=m(n.value===void 0?u()||[...r]:[...n.value]),p=m(new Set(f.value)),h=i({get:()=>n.value===void 0?f.value:n.value,set:e=>{f.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?p.value.has(e.key):!0},v=e=>{h.value=e,s?.(e),d(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),l?.(e);else{if(p.value.add(e),a.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&l?.(t)})}else v([...h.value,e]);c?.(e)}};return S(()=>n.value,e=>{e!==void 0&&(f.value=[...e],e.forEach(e=>p.value.add(e)),d(e))}),{currentKeys:h,renderedOnce:p,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(a.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>p.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const O=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],k={class:`collapse-item__title-area`},A={class:`collapse-item__title-group`},j={class:`collapse-item__title`},M={key:1,class:`collapse-item__subtitle`},N=[`id`,`aria-labelledby`],P={key:0,class:`collapse-item__content`};var F=t(d({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:i,emit:d}){let S=t,E=d,F=m(null),I=m(new Map),L=(e,t)=>{t?I.value.set(e,t):I.value.delete(e)},{isExpanded:R,shouldRender:z,toggle:B,expandAll:V,collapseAll:H,getActiveKeys:U,handleKeyDown:W}=D({items:y(S,`items`),activeKeys:y(S,`activeKeys`),defaultActiveKeys:S.defaultActiveKeys,accordion:y(S,`accordion`),persistKey:y(S,`persistKey`),onChange:e=>{E(`update:activeKeys`,e),E(`change`,e)},onExpand:e=>E(`expand`,e),onCollapse:e=>E(`collapse`,e)}),G=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},K=e=>{let t=e;t.style.height=``,t.style.overflow=``},q=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},J=e=>{let t=e;t.style.height=``,t.style.overflow=``};return i({expandAll:V,collapseAll:H,toggle:B,getActiveKeys:U,scrollToPanel:e=>{let t=I.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(i,d)=>(p(),s(`div`,{ref_key:`containerRef`,ref:F,class:f([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[(p(!0),s(n,null,h(t.items,t=>(p(),s(`div`,{key:t.key,ref_for:!0,ref:e=>L(t.key,e),class:f([`collapse-item`,{"collapse-item--active":b(R)(t.key),"collapse-item--disabled":t.disabled}])},[o(` 面板头部 `),c(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":b(R)(t.key),"aria-controls":`collapse-content-${t.key}`,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0,onClick:e=>!t.disabled&&b(B)(t.key),onKeydown:e=>b(W)(e,t.key)},[o(` 展开图标 `),c(`span`,{class:f([`collapse-item__arrow`,{"collapse-item__arrow--expanded":b(R)(t.key)}])},[u(e,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),o(` 标题区域 `),c(`div`,k,[g(i.$slots,`header-${t.key}`,{item:t,expanded:b(R)(t.key)},()=>[c(`div`,A,[t.icon?(p(),a(e,{key:0,name:t.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):o(`v-if`,!0),c(`span`,j,v(t.title),1),t.subtitle?(p(),s(`span`,M,v(t.subtitle),1)):o(`v-if`,!0)])],!0)]),o(` 头部右侧操作区 `),i.$slots[`extra-${t.key}`]?(p(),s(`div`,{key:0,class:`collapse-item__extra`,onClick:d[0]||=T(()=>{},[`stop`])},[g(i.$slots,`extra-${t.key}`,{item:t,expanded:b(R)(t.key)},void 0,!0)])):o(`v-if`,!0)],40,O),o(` 面板内容 `),u(r,{name:`collapse-slide`,onEnter:G,onAfterEnter:K,onLeave:q,onAfterLeave:J,persisted:``},{default:C(()=>[w(c(`div`,{id:`collapse-content-${t.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${t.key}`},[b(z)(t)?(p(),s(`div`,P,[g(i.$slots,`panel-${t.key}`,{item:t,expanded:b(R)(t.key)},()=>[t.content&&typeof t.content!=`string`?(p(),a(_(t.content),{key:0})):t.content?(p(),s(n,{key:1},[l(v(t.content),1)],64)):o(`v-if`,!0)],!0)])):o(`v-if`,!0)],8,N),[[x,b(R)(t.key)]])]),_:2},1024)],2))),128))],2))}}),[[`__scopeId`,`data-v-d8f0f7a0`]]);export{D as n,F as t};
|
|
1
|
+
import{t as e}from"./C_Icon2.js";import{t}from"./export-helper.js";import{Fragment as n,Transition as r,computed as i,createBlock as a,createCommentVNode as o,createElementBlock as s,createElementVNode as c,createTextVNode as l,createVNode as u,defineComponent as d,normalizeClass as f,openBlock as p,ref as m,renderList as h,renderSlot as g,resolveDynamicComponent as _,toDisplayString as v,toRef as y,unref as b,vShow as x,watch as S,withCtx as C,withDirectives as w,withModifiers as T}from"vue";function E(e){if(!e)return null;try{let t=JSON.parse(e);return Array.isArray(t)?t.filter(e=>typeof e==`string`):null}catch{return null}}function D(e){let{items:t,activeKeys:n,defaultActiveKeys:r,accordion:a,persistKey:o,onChange:s,onExpand:c,onCollapse:l}=e,u=()=>{if(!o.value)return null;try{return E(localStorage.getItem(`collapse-panel:${o.value}`))}catch{return null}},d=e=>{if(o.value)try{localStorage.setItem(`collapse-panel:${o.value}`,JSON.stringify(e))}catch{}},f=m(n.value===void 0?u()||[...r]:[...n.value]),p=m(new Set(f.value)),h=i({get:()=>n.value===void 0?f.value:n.value,set:e=>{f.value=e}}),g=e=>h.value.includes(e),_=e=>{let t=g(e.key);return e.destroyOnCollapse?t:e.lazy?p.value.has(e.key):!0},v=e=>{h.value=e,s?.(e),d(e)},y=e=>{let n=t.value.find(t=>t.key===e);if(!(!n||n.disabled))if(g(e))v(h.value.filter(t=>t!==e)),l?.(e);else{if(p.value.add(e),a.value){let t=h.value;v([e]),t.forEach(t=>{t!==e&&l?.(t)})}else v([...h.value,e]);c?.(e)}};return S(()=>n.value?.slice(),e=>{e!==void 0&&(f.value=[...e],e.forEach(e=>p.value.add(e)),d(e))}),{currentKeys:h,renderedOnce:p,isExpanded:g,shouldRender:_,toggle:y,expandAll:()=>{if(a.value)return;let e=t.value.filter(e=>!e.disabled).map(e=>e.key);e.forEach(e=>p.value.add(e)),v(e)},collapseAll:()=>{v([])},getActiveKeys:()=>[...h.value],handleKeyDown:(e,t)=>{[`Enter`,` `].includes(e.key)&&(e.preventDefault(),y(t))}}}const O=[`aria-expanded`,`aria-controls`,`aria-disabled`,`tabindex`,`onClick`,`onKeydown`],k={class:`collapse-item__title-area`},A={class:`collapse-item__title-group`},j={class:`collapse-item__title`},M={key:1,class:`collapse-item__subtitle`},N=[`id`,`aria-labelledby`],P={key:0,class:`collapse-item__content`};var F=t(d({name:`C_CollapsePanel`,__name:`index`,props:{items:{},activeKeys:{default:void 0},defaultActiveKeys:{default:()=>[]},accordion:{type:Boolean,default:!1},variant:{default:`default`},expandIconPosition:{default:`left`},bordered:{type:Boolean,default:!0},persistKey:{default:void 0}},emits:[`update:activeKeys`,`expand`,`collapse`,`change`],setup(t,{expose:i,emit:d}){let S=t,E=d,F=m(null),I=m(new Map),L=(e,t)=>{t?I.value.set(e,t):I.value.delete(e)},{isExpanded:R,shouldRender:z,toggle:B,expandAll:V,collapseAll:H,getActiveKeys:U,handleKeyDown:W}=D({items:y(S,`items`),activeKeys:y(S,`activeKeys`),defaultActiveKeys:S.defaultActiveKeys,accordion:y(S,`accordion`),persistKey:y(S,`persistKey`),onChange:e=>{E(`update:activeKeys`,e),E(`change`,e)},onExpand:e=>E(`expand`,e),onCollapse:e=>E(`collapse`,e)}),G=e=>{let t=e;t.style.height=`0`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`${t.scrollHeight}px`},K=e=>{let t=e;t.style.height=``,t.style.overflow=``},q=e=>{let t=e;t.style.height=`${t.scrollHeight}px`,t.style.overflow=`hidden`,t.offsetHeight,t.style.height=`0`},J=e=>{let t=e;t.style.height=``,t.style.overflow=``};return i({expandAll:V,collapseAll:H,toggle:B,getActiveKeys:U,scrollToPanel:e=>{let t=I.value.get(e);t&&t.scrollIntoView({behavior:`smooth`,block:`start`})}}),(i,d)=>(p(),s(`div`,{ref_key:`containerRef`,ref:F,class:f([`c-collapse-panel`,[`c-collapse-panel--${t.variant}`,{"c-collapse-panel--bordered":t.bordered,"c-collapse-panel--icon-right":t.expandIconPosition===`right`}]])},[(p(!0),s(n,null,h(t.items,t=>(p(),s(`div`,{key:t.key,ref_for:!0,ref:e=>L(t.key,e),class:f([`collapse-item`,{"collapse-item--active":b(R)(t.key),"collapse-item--disabled":t.disabled}])},[o(` 面板头部 `),c(`div`,{class:`collapse-item__header`,role:`button`,"aria-expanded":b(R)(t.key),"aria-controls":`collapse-content-${t.key}`,"aria-disabled":t.disabled,tabindex:t.disabled?-1:0,onClick:e=>!t.disabled&&b(B)(t.key),onKeydown:e=>b(W)(e,t.key)},[o(` 展开图标 `),c(`span`,{class:f([`collapse-item__arrow`,{"collapse-item__arrow--expanded":b(R)(t.key)}])},[u(e,{name:`mdi:chevron-right`,size:16,color:`currentColor`})],2),o(` 标题区域 `),c(`div`,k,[g(i.$slots,`header-${t.key}`,{item:t,expanded:b(R)(t.key)},()=>[c(`div`,A,[t.icon?(p(),a(e,{key:0,name:t.icon,size:18,color:`currentColor`,class:`collapse-item__icon`},null,8,[`name`])):o(`v-if`,!0),c(`span`,j,v(t.title),1),t.subtitle?(p(),s(`span`,M,v(t.subtitle),1)):o(`v-if`,!0)])],!0)]),o(` 头部右侧操作区 `),i.$slots[`extra-${t.key}`]?(p(),s(`div`,{key:0,class:`collapse-item__extra`,onClick:d[0]||=T(()=>{},[`stop`])},[g(i.$slots,`extra-${t.key}`,{item:t,expanded:b(R)(t.key)},void 0,!0)])):o(`v-if`,!0)],40,O),o(` 面板内容 `),u(r,{name:`collapse-slide`,onEnter:G,onAfterEnter:K,onLeave:q,onAfterLeave:J,persisted:``},{default:C(()=>[w(c(`div`,{id:`collapse-content-${t.key}`,class:`collapse-item__content-wrapper`,role:`region`,"aria-labelledby":`collapse-header-${t.key}`},[b(z)(t)?(p(),s(`div`,P,[g(i.$slots,`panel-${t.key}`,{item:t,expanded:b(R)(t.key)},()=>[t.content&&typeof t.content!=`string`?(p(),a(_(t.content),{key:0})):t.content?(p(),s(n,{key:1},[l(v(t.content),1)],64)):o(`v-if`,!0)],!0)])):o(`v-if`,!0)],8,N),[[x,b(R)(t.key)]])]),_:2},1024)],2))),128))],2))}}),[[`__scopeId`,`data-v-d8f0f7a0`]]);export{D as n,F as t};
|
package/dist/C_Draggable.css
CHANGED
|
@@ -1,69 +1,69 @@
|
|
|
1
1
|
:root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
|
|
2
2
|
|
|
3
3
|
/* ===== 容器布局样式 ===== */
|
|
4
|
-
.c-draggable-wrapper[data-v-
|
|
4
|
+
.c-draggable-wrapper[data-v-81117ea8] {
|
|
5
5
|
position: relative;
|
|
6
6
|
width: 100%;
|
|
7
7
|
}
|
|
8
|
-
.c-draggable-list[data-v-
|
|
8
|
+
.c-draggable-list[data-v-81117ea8] {
|
|
9
9
|
min-height: 50px;
|
|
10
10
|
width: 100%;
|
|
11
11
|
display: flex;
|
|
12
12
|
gap: var(--gap, 8px);
|
|
13
13
|
/* 默认垂直布局 */
|
|
14
14
|
}
|
|
15
|
-
.c-draggable-list.layout-vertical[data-v-
|
|
15
|
+
.c-draggable-list.layout-vertical[data-v-81117ea8] {
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
}
|
|
18
|
-
.c-draggable-list[data-v-
|
|
18
|
+
.c-draggable-list[data-v-81117ea8] {
|
|
19
19
|
/* 水平布局 */
|
|
20
20
|
}
|
|
21
|
-
.c-draggable-list.layout-horizontal[data-v-
|
|
21
|
+
.c-draggable-list.layout-horizontal[data-v-81117ea8] {
|
|
22
22
|
flex-direction: row;
|
|
23
23
|
align-items: var(--align-items, stretch);
|
|
24
24
|
justify-content: var(--justify-content, flex-start);
|
|
25
25
|
}
|
|
26
|
-
.c-draggable-list.layout-horizontal.flex-wrap[data-v-
|
|
26
|
+
.c-draggable-list.layout-horizontal.flex-wrap[data-v-81117ea8] {
|
|
27
27
|
flex-wrap: wrap;
|
|
28
28
|
}
|
|
29
|
-
.c-draggable-list[data-v-
|
|
29
|
+
.c-draggable-list[data-v-81117ea8] {
|
|
30
30
|
/* 弹性换行布局 */
|
|
31
31
|
}
|
|
32
|
-
.c-draggable-list.layout-flex-wrap[data-v-
|
|
32
|
+
.c-draggable-list.layout-flex-wrap[data-v-81117ea8] {
|
|
33
33
|
flex-direction: row;
|
|
34
34
|
flex-wrap: wrap;
|
|
35
35
|
align-items: var(--align-items, stretch);
|
|
36
36
|
justify-content: var(--justify-content, flex-start);
|
|
37
37
|
}
|
|
38
|
-
.c-draggable-list[data-v-
|
|
38
|
+
.c-draggable-list[data-v-81117ea8] {
|
|
39
39
|
/* 网格布局 */
|
|
40
40
|
}
|
|
41
|
-
.c-draggable-list.layout-grid[data-v-
|
|
41
|
+
.c-draggable-list.layout-grid[data-v-81117ea8] {
|
|
42
42
|
display: grid;
|
|
43
43
|
grid-template-columns: repeat(var(--grid-columns, 4), 1fr);
|
|
44
44
|
grid-template-rows: var(--grid-rows, auto);
|
|
45
45
|
align-items: var(--align-items, stretch);
|
|
46
46
|
justify-content: var(--justify-content, stretch);
|
|
47
47
|
}
|
|
48
|
-
.c-draggable-list.layout-grid > .c-draggable-item[data-v-
|
|
48
|
+
.c-draggable-list.layout-grid > .c-draggable-item[data-v-81117ea8] {
|
|
49
49
|
width: 100%;
|
|
50
50
|
box-sizing: border-box;
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
/* ===== 拖拽项目基础样式 ===== */
|
|
54
|
-
.c-draggable-item[data-v-
|
|
54
|
+
.c-draggable-item[data-v-81117ea8] {
|
|
55
55
|
position: relative;
|
|
56
56
|
}
|
|
57
|
-
.c-draggable-item.is-disabled[data-v-
|
|
57
|
+
.c-draggable-item.is-disabled[data-v-81117ea8] {
|
|
58
58
|
opacity: 0.6;
|
|
59
59
|
cursor: not-allowed;
|
|
60
60
|
}
|
|
61
|
-
.c-draggable-item.is-disabled[data-v-
|
|
61
|
+
.c-draggable-item.is-disabled[data-v-81117ea8] * {
|
|
62
62
|
cursor: not-allowed !important;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
/* ===== 默认项目样式 ===== */
|
|
66
|
-
.default-item[data-v-
|
|
66
|
+
.default-item[data-v-81117ea8] {
|
|
67
67
|
display: flex;
|
|
68
68
|
align-items: center;
|
|
69
69
|
padding: 16px;
|
|
@@ -74,15 +74,15 @@
|
|
|
74
74
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
75
75
|
position: relative;
|
|
76
76
|
}
|
|
77
|
-
.default-item[data-v-
|
|
77
|
+
.default-item[data-v-81117ea8]:hover {
|
|
78
78
|
border-color: var(--n-primary-color);
|
|
79
79
|
box-shadow: 0 2px 8px var(--n-box-shadow-color);
|
|
80
80
|
transform: translateY(-1px);
|
|
81
81
|
}
|
|
82
|
-
.default-item[data-v-
|
|
82
|
+
.default-item[data-v-81117ea8]:active {
|
|
83
83
|
cursor: grabbing;
|
|
84
84
|
}
|
|
85
|
-
.default-item .drag-handle[data-v-
|
|
85
|
+
.default-item .drag-handle[data-v-81117ea8] {
|
|
86
86
|
display: flex;
|
|
87
87
|
align-items: center;
|
|
88
88
|
justify-content: center;
|
|
@@ -95,21 +95,21 @@
|
|
|
95
95
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
96
96
|
flex-shrink: 0;
|
|
97
97
|
}
|
|
98
|
-
.default-item .drag-handle[data-v-
|
|
98
|
+
.default-item .drag-handle[data-v-81117ea8]:hover {
|
|
99
99
|
background: var(--n-action-color);
|
|
100
100
|
color: var(--n-primary-color);
|
|
101
101
|
}
|
|
102
|
-
.default-item .drag-handle[data-v-
|
|
102
|
+
.default-item .drag-handle[data-v-81117ea8]:active {
|
|
103
103
|
cursor: grabbing;
|
|
104
104
|
}
|
|
105
|
-
.default-item .drag-handle div[data-v-
|
|
105
|
+
.default-item .drag-handle div[data-v-81117ea8] {
|
|
106
106
|
font-size: 18px;
|
|
107
107
|
}
|
|
108
|
-
.default-item .item-content[data-v-
|
|
108
|
+
.default-item .item-content[data-v-81117ea8] {
|
|
109
109
|
flex: 1;
|
|
110
110
|
min-width: 0;
|
|
111
111
|
}
|
|
112
|
-
.default-item .item-content .item-title[data-v-
|
|
112
|
+
.default-item .item-content .item-title[data-v-81117ea8] {
|
|
113
113
|
font-size: 16px;
|
|
114
114
|
font-weight: 600;
|
|
115
115
|
color: var(--n-text-color);
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
margin-bottom: 4px;
|
|
118
118
|
word-break: break-word;
|
|
119
119
|
}
|
|
120
|
-
.default-item .item-content .item-description[data-v-
|
|
120
|
+
.default-item .item-content .item-description[data-v-81117ea8] {
|
|
121
121
|
font-size: 14px;
|
|
122
122
|
color: var(--n-text-color-disabled);
|
|
123
123
|
line-height: 1.4;
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
/* ===== 空状态样式 ===== */
|
|
128
|
-
.empty-state[data-v-
|
|
128
|
+
.empty-state[data-v-81117ea8] {
|
|
129
129
|
display: flex;
|
|
130
130
|
flex-direction: column;
|
|
131
131
|
align-items: center;
|
|
@@ -135,12 +135,12 @@
|
|
|
135
135
|
border: 2px dashed var(--n-border-color);
|
|
136
136
|
border-radius: 8px;
|
|
137
137
|
}
|
|
138
|
-
.empty-state .default-empty .empty-icon[data-v-
|
|
138
|
+
.empty-state .default-empty .empty-icon[data-v-81117ea8] {
|
|
139
139
|
font-size: 48px;
|
|
140
140
|
color: var(--n-text-color-disabled);
|
|
141
141
|
margin-bottom: 16px;
|
|
142
142
|
}
|
|
143
|
-
.empty-state .default-empty .empty-text[data-v-
|
|
143
|
+
.empty-state .default-empty .empty-text[data-v-81117ea8] {
|
|
144
144
|
color: var(--n-text-color-disabled);
|
|
145
145
|
font-size: 16px;
|
|
146
146
|
margin: 0;
|
|
@@ -167,86 +167,86 @@
|
|
|
167
167
|
}
|
|
168
168
|
|
|
169
169
|
/* ===== 网格布局特殊优化 ===== */
|
|
170
|
-
.c-draggable-list.layout-grid .c-draggable-item[data-v-
|
|
170
|
+
.c-draggable-list.layout-grid .c-draggable-item[data-v-81117ea8] {
|
|
171
171
|
display: flex;
|
|
172
172
|
flex-direction: column;
|
|
173
173
|
height: 100%;
|
|
174
174
|
}
|
|
175
|
-
.c-draggable-list.layout-grid .c-draggable-item .default-item[data-v-
|
|
175
|
+
.c-draggable-list.layout-grid .c-draggable-item .default-item[data-v-81117ea8] {
|
|
176
176
|
flex: 1;
|
|
177
177
|
height: 100%;
|
|
178
178
|
min-height: 80px;
|
|
179
179
|
}
|
|
180
|
-
.c-draggable-list.layout-grid + .empty-state[data-v-
|
|
180
|
+
.c-draggable-list.layout-grid + .empty-state[data-v-81117ea8] {
|
|
181
181
|
grid-column: 1/-1;
|
|
182
182
|
padding: 40px 20px;
|
|
183
183
|
}
|
|
184
|
-
.c-draggable-list.layout-grid + .empty-state .default-empty .empty-icon[data-v-
|
|
184
|
+
.c-draggable-list.layout-grid + .empty-state .default-empty .empty-icon[data-v-81117ea8] {
|
|
185
185
|
font-size: 36px;
|
|
186
186
|
}
|
|
187
187
|
|
|
188
188
|
/* ===== 弹性布局特殊优化 ===== */
|
|
189
|
-
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-
|
|
190
|
-
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-
|
|
189
|
+
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-81117ea8],
|
|
190
|
+
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-81117ea8] {
|
|
191
191
|
flex-shrink: 0;
|
|
192
192
|
}
|
|
193
|
-
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-
|
|
194
|
-
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-
|
|
193
|
+
.c-draggable-list.layout-horizontal .c-draggable-item[data-v-81117ea8]:not(:last-child),
|
|
194
|
+
.c-draggable-list.layout-flex-wrap .c-draggable-item[data-v-81117ea8]:not(:last-child) {
|
|
195
195
|
margin-right: 0;
|
|
196
196
|
}
|
|
197
|
-
.c-draggable-list.layout-horizontal .default-item[data-v-
|
|
198
|
-
.c-draggable-list.layout-flex-wrap .default-item[data-v-
|
|
197
|
+
.c-draggable-list.layout-horizontal .default-item[data-v-81117ea8],
|
|
198
|
+
.c-draggable-list.layout-flex-wrap .default-item[data-v-81117ea8] {
|
|
199
199
|
min-width: 200px;
|
|
200
200
|
width: 100%;
|
|
201
201
|
}
|
|
202
202
|
|
|
203
203
|
/* ===== 响应式设计 ===== */
|
|
204
204
|
@media (max-width: 768px) {
|
|
205
|
-
.c-draggable-list.layout-grid[data-v-
|
|
205
|
+
.c-draggable-list.layout-grid[data-v-81117ea8] {
|
|
206
206
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
207
207
|
}
|
|
208
|
-
.c-draggable-list.layout-horizontal[data-v-
|
|
208
|
+
.c-draggable-list.layout-horizontal[data-v-81117ea8] {
|
|
209
209
|
flex-wrap: wrap;
|
|
210
210
|
}
|
|
211
|
-
.default-item[data-v-
|
|
211
|
+
.default-item[data-v-81117ea8] {
|
|
212
212
|
padding: 12px;
|
|
213
213
|
min-width: 150px !important;
|
|
214
214
|
}
|
|
215
|
-
.default-item .drag-handle[data-v-
|
|
215
|
+
.default-item .drag-handle[data-v-81117ea8] {
|
|
216
216
|
width: 20px;
|
|
217
217
|
height: 20px;
|
|
218
218
|
margin-right: 8px;
|
|
219
219
|
}
|
|
220
|
-
.default-item .drag-handle div[data-v-
|
|
220
|
+
.default-item .drag-handle div[data-v-81117ea8] {
|
|
221
221
|
font-size: 16px;
|
|
222
222
|
}
|
|
223
|
-
.default-item .item-content .item-title[data-v-
|
|
223
|
+
.default-item .item-content .item-title[data-v-81117ea8] {
|
|
224
224
|
font-size: 15px;
|
|
225
225
|
}
|
|
226
|
-
.default-item .item-content .item-description[data-v-
|
|
226
|
+
.default-item .item-content .item-description[data-v-81117ea8] {
|
|
227
227
|
font-size: 13px;
|
|
228
228
|
}
|
|
229
|
-
.empty-state[data-v-
|
|
229
|
+
.empty-state[data-v-81117ea8] {
|
|
230
230
|
padding: 40px 16px;
|
|
231
231
|
}
|
|
232
|
-
.empty-state .default-empty .empty-icon[data-v-
|
|
232
|
+
.empty-state .default-empty .empty-icon[data-v-81117ea8] {
|
|
233
233
|
font-size: 36px;
|
|
234
234
|
}
|
|
235
235
|
}
|
|
236
236
|
@media (max-width: 480px) {
|
|
237
|
-
.c-draggable-list.layout-grid[data-v-
|
|
237
|
+
.c-draggable-list.layout-grid[data-v-81117ea8] {
|
|
238
238
|
grid-template-columns: 1fr !important;
|
|
239
239
|
}
|
|
240
|
-
.default-item[data-v-
|
|
240
|
+
.default-item[data-v-81117ea8] {
|
|
241
241
|
min-width: 100% !important;
|
|
242
242
|
padding: 10px;
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
245
|
|
|
246
246
|
/* layer: icons */
|
|
247
|
-
.i-mdi\:drag-vertical[data-v-
|
|
248
|
-
.i-mdi\:inbox-outline[data-v-
|
|
247
|
+
.i-mdi\:drag-vertical[data-v-81117ea8]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M9 3h2v2H9zm4 0h2v2h-2zM9 7h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2zm-4 4h2v2H9zm4 0h2v2h-2z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1em;height:1em;}
|
|
248
|
+
.i-mdi\:inbox-outline[data-v-81117ea8]{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' vertical-align='middle' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M5 19v-2h3.13a4.13 4.13 0 0 0 1.27 2m9.6 0h-4.4a4.13 4.13 0 0 0 1.27-2H19m0-2h-5v1a2 2 0 0 1-4 0v-1H5V5h14Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;vertical-align:middle;width:1em;height:1em;}
|
|
249
249
|
/* layer: default */
|
|
250
|
-
.grid[data-v-
|
|
251
|
-
.flex-wrap[data-v-
|
|
252
|
-
.px[data-v-
|
|
250
|
+
.grid[data-v-81117ea8]{display:grid;}
|
|
251
|
+
.flex-wrap[data-v-81117ea8]{flex-wrap:wrap;}
|
|
252
|
+
.px[data-v-81117ea8]{padding-left:1rem;padding-right:1rem;}
|
package/dist/C_Draggable2.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`vue-draggable-plus`);function r(e,n){let r=(0,t.ref)(!1),i,a=!1;(0,t.onBeforeUnmount)(()=>{a=!0,r.value=!1,i=void 0});let o=(0,t.computed)({get:()=>e.modelValue??[],set:e=>{n(`update:modelValue`,e),n(`list-change`,e)}}),s=(0,t.computed)(()=>(e.modelValue??[]).length===0),c=(0,t.computed)(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),l=(0,t.computed)(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),u=(0,t.computed)(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),d=(e,t)=>Reflect.get(e,t),f=(t,n)=>{if(e.itemKey)return e.itemKey(t,n);let r=d(t,`id`);return typeof r==`string`||typeof r==`number`?r:n},p=t=>e.itemTitle?e.itemTitle(t):String(d(t,`title`)||d(t,`name`)||d(t,`label`)||String(d(t,`id`))||`未命名项目`),m=t=>e.itemDescription?e.itemDescription(t):String(d(t,`description`)||``),h=()=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],g=e=>e!==void 0&&Number.isInteger(e)&&e>=0;return{isDragging:r,internalList:o,isEmpty:s,listClasses:c,listStyles:l,draggableOptions:u,getItemKey:f,getItemTitle:p,getItemDescription:m,getItemClass:h,handleStart:e=>{r.value=!0;let t=e.oldDraggableIndex??e.oldIndex;i=e.data??(g(t)?o.value[t]:void 0),i&&g(t)&&n(`drag-start`,{oldIndex:t,newIndex:t,item:i})},handleEnd:e=>{let o=e.oldDraggableIndex??e.oldIndex,s=e.newDraggableIndex??e.newIndex,c=e.data??i;i=void 0,c&&g(o)&&g(s)&&n(`drag-end`,{oldIndex:o,newIndex:s,item:c}),(0,t.nextTick)(()=>{a||(r.value=!1)})},handleAdd:e=>{let t=e.newDraggableIndex??e.newIndex,r=e.clonedData??e.data;r&&g(t)&&n(`item-add`,r,t)},handleRemove:e=>{if(e.pullMode===`clone`)return;let t=e.oldDraggableIndex??e.oldIndex,r=e.data??i;r&&g(t)&&n(`item-remove`,r,t)},handleUpdate:()=>{},addItem:(e,t)=>{let n=[...o.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),o.value=n},removeItem:e=>{if(e>=0&&e<o.value.length){let t=[...o.value],[n]=t.splice(e,1);return o.value=t,n}return null},moveItem:(e,t)=>{let n=o.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),o.value=r,!0}return!1},updateList:e=>{o.value=[...e]},clear:()=>{o.value=[]},getItem:e=>o.value[e],findIndex:e=>o.value.findIndex(e)}}const i=[`data-index`],a={class:`default-item`},o={key:0,class:`drag-handle`},s={class:`item-content`},c={class:`item-title`},l={key:0,class:`item-description`},u={key:0,class:`empty-state`},d={class:`default-empty`},f={class:`empty-text`},p=(0,t.defineComponent)({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{
|
|
1
|
+
require(`./chunk.cjs`);const e=require(`./export-helper.cjs`);let t=require(`vue`),n=require(`vue-draggable-plus`);function r(e,n){let r=(0,t.ref)(!1),i,a=!1;(0,t.onBeforeUnmount)(()=>{a=!0,r.value=!1,i=void 0});let o=(0,t.computed)({get:()=>e.modelValue??[],set:e=>{n(`update:modelValue`,e),n(`list-change`,e)}}),s=(0,t.computed)(()=>(e.modelValue??[]).length===0),c=(0,t.computed)(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),l=(0,t.computed)(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),u=(0,t.computed)(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),d=(e,t)=>Reflect.get(e,t),f=(t,n)=>{if(e.itemKey)return e.itemKey(t,n);let r=d(t,`id`);return typeof r==`string`||typeof r==`number`?r:n},p=t=>e.itemTitle?e.itemTitle(t):String(d(t,`title`)||d(t,`name`)||d(t,`label`)||String(d(t,`id`))||`未命名项目`),m=t=>e.itemDescription?e.itemDescription(t):String(d(t,`description`)||``),h=()=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],g=e=>e!==void 0&&Number.isInteger(e)&&e>=0;return{isDragging:r,internalList:o,isEmpty:s,listClasses:c,listStyles:l,draggableOptions:u,getItemKey:f,getItemTitle:p,getItemDescription:m,getItemClass:h,handleStart:e=>{r.value=!0;let t=e.oldDraggableIndex??e.oldIndex;i=e.data??(g(t)?o.value[t]:void 0),i&&g(t)&&n(`drag-start`,{oldIndex:t,newIndex:t,item:i})},handleEnd:e=>{let o=e.oldDraggableIndex??e.oldIndex,s=e.newDraggableIndex??e.newIndex,c=e.data??i;i=void 0,c&&g(o)&&g(s)&&n(`drag-end`,{oldIndex:o,newIndex:s,item:c}),(0,t.nextTick)(()=>{a||(r.value=!1)})},handleAdd:e=>{let t=e.newDraggableIndex??e.newIndex,r=e.clonedData??e.data;r&&g(t)&&n(`item-add`,r,t)},handleRemove:e=>{if(e.pullMode===`clone`)return;let t=e.oldDraggableIndex??e.oldIndex,r=e.data??i;r&&g(t)&&n(`item-remove`,r,t)},handleUpdate:()=>{},addItem:(e,t)=>{let n=[...o.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),o.value=n},removeItem:e=>{if(e>=0&&e<o.value.length){let t=[...o.value],[n]=t.splice(e,1);return o.value=t,n}return null},moveItem:(e,t)=>{let n=o.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),o.value=r,!0}return!1},updateList:e=>{o.value=[...e]},clear:()=>{o.value=[]},getItem:e=>o.value[e],findIndex:e=>o.value.findIndex(e)}}const i=[`data-index`],a={class:`default-item`},o={key:0,class:`drag-handle`},s={class:`item-content`},c={class:`item-title`},l={key:0,class:`item-description`},u={key:0,class:`empty-state`},d={class:`default-empty`},f={class:`empty-text`},p=(0,t.defineComponent)({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{},sort:{type:Boolean,default:!0},animation:{default:200},delay:{default:0},handle:{default:``},showHandle:{type:Boolean,default:!1},ghostClass:{default:`c-draggable-ghost`},chosenClass:{default:`c-draggable-chosen`},dragClass:{default:`c-draggable-drag`},wrapperClass:{default:``},listClass:{default:``},itemClass:{default:``},showEmptyState:{type:Boolean,default:!0},emptyText:{default:`暂无数据`},itemKey:{},itemTitle:{},itemDescription:{},swapThreshold:{default:1},invertSwap:{type:Boolean,default:!1},direction:{default:`vertical`},layout:{default:`vertical`},gridColumns:{default:4},gridRows:{default:void 0},gap:{default:`8px`},flexWrap:{type:Boolean,default:!1},justifyContent:{default:`flex-start`},alignItems:{default:`stretch`},customStyles:{default:()=>({})}},emits:[`update:modelValue`,`drag-start`,`drag-end`,`item-add`,`item-remove`,`list-change`],setup(e,{expose:p,emit:m}){let{isDragging:h,internalList:g,isEmpty:_,listClasses:v,listStyles:y,draggableOptions:b,getItemKey:x,getItemTitle:S,getItemDescription:C,getItemClass:w,handleStart:T,handleEnd:E,handleAdd:D,handleRemove:O,handleUpdate:k,addItem:A,removeItem:j,moveItem:M,updateList:N,clear:P,getItem:F,findIndex:I}=r(e,m);return p({isDragging:(0,t.readonly)(h),list:(0,t.readonly)(g),isEmpty:(0,t.readonly)(_),addItem:A,removeItem:j,moveItem:M,updateList:N,clear:P,getItem:F,findIndex:I}),(r,p)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`c-draggable-wrapper`,e.wrapperClass])},[(0,t.createVNode)((0,t.unref)(n.VueDraggable),(0,t.mergeProps)({modelValue:(0,t.unref)(g),"onUpdate:modelValue":p[0]||=e=>(0,t.isRef)(g)?g.value=e:null},(0,t.unref)(b),{class:(0,t.unref)(v),style:(0,t.unref)(y),onStart:(0,t.unref)(T),onEnd:(0,t.unref)(E),onAdd:(0,t.unref)(D),onRemove:(0,t.unref)(O),onUpdate:(0,t.unref)(k)}),{default:(0,t.withCtx)(()=>[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)((0,t.unref)(g),(n,u)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:(0,t.unref)(x)(n,u),class:(0,t.normalizeClass)((0,t.unref)(w)()),"data-index":u},[(0,t.renderSlot)(r.$slots,`default`,{item:n,index:u,isDragging:(0,t.unref)(h),isDisabled:e.disabled},()=>[(0,t.createElementVNode)(`div`,a,[e.showHandle?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,o,[...p[1]||=[(0,t.createElementVNode)(`div`,{class:`i-mdi:drag-vertical`},null,-1)]])):(0,t.createCommentVNode)(`v-if`,!0),(0,t.createElementVNode)(`div`,s,[(0,t.createElementVNode)(`div`,c,(0,t.toDisplayString)((0,t.unref)(S)(n)),1),(0,t.unref)(C)(n)?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,l,(0,t.toDisplayString)((0,t.unref)(C)(n)),1)):(0,t.createCommentVNode)(`v-if`,!0)])])],!0)],10,i))),128))]),_:3},16,[`modelValue`,`class`,`style`,`onStart`,`onEnd`,`onAdd`,`onRemove`,`onUpdate`]),(0,t.unref)(_)&&e.showEmptyState?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,u,[(0,t.renderSlot)(r.$slots,`empty`,{},()=>[(0,t.createElementVNode)(`div`,d,[p[2]||=(0,t.createElementVNode)(`div`,{class:`empty-icon i-mdi:inbox-outline`},null,-1),(0,t.createElementVNode)(`p`,f,(0,t.toDisplayString)(e.emptyText),1)])],!0)])):(0,t.createCommentVNode)(`v-if`,!0)],2))}});var m=e.t(p,[[`__scopeId`,`data-v-81117ea8`]]);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return m}});
|
package/dist/C_Draggable2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,isRef as c,mergeProps as l,nextTick as u,normalizeClass as d,onBeforeUnmount as f,openBlock as p,readonly as m,ref as h,renderList as g,renderSlot as _,toDisplayString as v,unref as y,withCtx as b}from"vue";import{VueDraggable as x}from"vue-draggable-plus";function S(e,t){let r=h(!1),i,a=!1;f(()=>{a=!0,r.value=!1,i=void 0});let o=n({get:()=>e.modelValue??[],set:e=>{t(`update:modelValue`,e),t(`list-change`,e)}}),s=n(()=>(e.modelValue??[]).length===0),c=n(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),l=n(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),d=n(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),p=(e,t)=>Reflect.get(e,t),m=(t,n)=>{if(e.itemKey)return e.itemKey(t,n);let r=p(t,`id`);return typeof r==`string`||typeof r==`number`?r:n},g=t=>e.itemTitle?e.itemTitle(t):String(p(t,`title`)||p(t,`name`)||p(t,`label`)||String(p(t,`id`))||`未命名项目`),_=t=>e.itemDescription?e.itemDescription(t):String(p(t,`description`)||``),v=()=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],y=e=>e!==void 0&&Number.isInteger(e)&&e>=0;return{isDragging:r,internalList:o,isEmpty:s,listClasses:c,listStyles:l,draggableOptions:d,getItemKey:m,getItemTitle:g,getItemDescription:_,getItemClass:v,handleStart:e=>{r.value=!0;let n=e.oldDraggableIndex??e.oldIndex;i=e.data??(y(n)?o.value[n]:void 0),i&&y(n)&&t(`drag-start`,{oldIndex:n,newIndex:n,item:i})},handleEnd:e=>{let n=e.oldDraggableIndex??e.oldIndex,o=e.newDraggableIndex??e.newIndex,s=e.data??i;i=void 0,s&&y(n)&&y(o)&&t(`drag-end`,{oldIndex:n,newIndex:o,item:s}),u(()=>{a||(r.value=!1)})},handleAdd:e=>{let n=e.newDraggableIndex??e.newIndex,r=e.clonedData??e.data;r&&y(n)&&t(`item-add`,r,n)},handleRemove:e=>{if(e.pullMode===`clone`)return;let n=e.oldDraggableIndex??e.oldIndex,r=e.data??i;r&&y(n)&&t(`item-remove`,r,n)},handleUpdate:()=>{},addItem:(e,t)=>{let n=[...o.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),o.value=n},removeItem:e=>{if(e>=0&&e<o.value.length){let t=[...o.value],[n]=t.splice(e,1);return o.value=t,n}return null},moveItem:(e,t)=>{let n=o.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),o.value=r,!0}return!1},updateList:e=>{o.value=[...e]},clear:()=>{o.value=[]},getItem:e=>o.value[e],findIndex:e=>o.value.findIndex(e)}}const C=[`data-index`],w={class:`default-item`},T={key:0,class:`drag-handle`},E={class:`item-content`},D={class:`item-title`},O={key:0,class:`item-description`},k={key:0,class:`empty-state`},A={class:`default-empty`},j={class:`empty-text`};var M=e(s({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{
|
|
1
|
+
import{t as e}from"./export-helper.js";import{Fragment as t,computed as n,createCommentVNode as r,createElementBlock as i,createElementVNode as a,createVNode as o,defineComponent as s,isRef as c,mergeProps as l,nextTick as u,normalizeClass as d,onBeforeUnmount as f,openBlock as p,readonly as m,ref as h,renderList as g,renderSlot as _,toDisplayString as v,unref as y,withCtx as b}from"vue";import{VueDraggable as x}from"vue-draggable-plus";function S(e,t){let r=h(!1),i,a=!1;f(()=>{a=!0,r.value=!1,i=void 0});let o=n({get:()=>e.modelValue??[],set:e=>{t(`update:modelValue`,e),t(`list-change`,e)}}),s=n(()=>(e.modelValue??[]).length===0),c=n(()=>[`c-draggable-list`,e.listClass,`layout-${e.layout}`,{"flex-wrap":e.flexWrap&&(e.layout===`horizontal`||e.layout===`flex-wrap`)}]),l=n(()=>{let t={"--gap":typeof e.gap==`number`?`${e.gap}px`:e.gap??`8px`,"--grid-columns":e.gridColumns??4,"--justify-content":e.justifyContent??`flex-start`,"--align-items":e.alignItems??`stretch`,...e.customStyles};return e.gridRows&&(t[`--grid-rows`]=e.gridRows),t}),d=n(()=>{let t={disabled:e.disabled,group:e.group,sort:e.sort,animation:e.animation,delay:e.delay,ghostClass:e.ghostClass,chosenClass:e.chosenClass,dragClass:e.dragClass,swapThreshold:e.swapThreshold,invertSwap:e.invertSwap,direction:e.direction,forceFallback:!1};return e.handle?t.handle=e.handle:e.showHandle&&(t.handle=`.drag-handle`),t}),p=(e,t)=>Reflect.get(e,t),m=(t,n)=>{if(e.itemKey)return e.itemKey(t,n);let r=p(t,`id`);return typeof r==`string`||typeof r==`number`?r:n},g=t=>e.itemTitle?e.itemTitle(t):String(p(t,`title`)||p(t,`name`)||p(t,`label`)||String(p(t,`id`))||`未命名项目`),_=t=>e.itemDescription?e.itemDescription(t):String(p(t,`description`)||``),v=()=>[`c-draggable-item`,e.itemClass,{"is-disabled":e.disabled}],y=e=>e!==void 0&&Number.isInteger(e)&&e>=0;return{isDragging:r,internalList:o,isEmpty:s,listClasses:c,listStyles:l,draggableOptions:d,getItemKey:m,getItemTitle:g,getItemDescription:_,getItemClass:v,handleStart:e=>{r.value=!0;let n=e.oldDraggableIndex??e.oldIndex;i=e.data??(y(n)?o.value[n]:void 0),i&&y(n)&&t(`drag-start`,{oldIndex:n,newIndex:n,item:i})},handleEnd:e=>{let n=e.oldDraggableIndex??e.oldIndex,o=e.newDraggableIndex??e.newIndex,s=e.data??i;i=void 0,s&&y(n)&&y(o)&&t(`drag-end`,{oldIndex:n,newIndex:o,item:s}),u(()=>{a||(r.value=!1)})},handleAdd:e=>{let n=e.newDraggableIndex??e.newIndex,r=e.clonedData??e.data;r&&y(n)&&t(`item-add`,r,n)},handleRemove:e=>{if(e.pullMode===`clone`)return;let n=e.oldDraggableIndex??e.oldIndex,r=e.data??i;r&&y(n)&&t(`item-remove`,r,n)},handleUpdate:()=>{},addItem:(e,t)=>{let n=[...o.value];typeof t==`number`&&t>=0&&t<=n.length?n.splice(t,0,e):n.push(e),o.value=n},removeItem:e=>{if(e>=0&&e<o.value.length){let t=[...o.value],[n]=t.splice(e,1);return o.value=t,n}return null},moveItem:(e,t)=>{let n=o.value;if(e>=0&&e<n.length&&t>=0&&t<n.length&&e!==t){let r=[...n],[i]=r.splice(e,1);return r.splice(t,0,i),o.value=r,!0}return!1},updateList:e=>{o.value=[...e]},clear:()=>{o.value=[]},getItem:e=>o.value[e],findIndex:e=>o.value.findIndex(e)}}const C=[`data-index`],w={class:`default-item`},T={key:0,class:`drag-handle`},E={class:`item-content`},D={class:`item-title`},O={key:0,class:`item-description`},k={key:0,class:`empty-state`},A={class:`default-empty`},j={class:`empty-text`};var M=e(s({name:`C_Draggable`,__name:`index`,props:{modelValue:{default:()=>[]},disabled:{type:Boolean,default:!1},group:{},sort:{type:Boolean,default:!0},animation:{default:200},delay:{default:0},handle:{default:``},showHandle:{type:Boolean,default:!1},ghostClass:{default:`c-draggable-ghost`},chosenClass:{default:`c-draggable-chosen`},dragClass:{default:`c-draggable-drag`},wrapperClass:{default:``},listClass:{default:``},itemClass:{default:``},showEmptyState:{type:Boolean,default:!0},emptyText:{default:`暂无数据`},itemKey:{},itemTitle:{},itemDescription:{},swapThreshold:{default:1},invertSwap:{type:Boolean,default:!1},direction:{default:`vertical`},layout:{default:`vertical`},gridColumns:{default:4},gridRows:{default:void 0},gap:{default:`8px`},flexWrap:{type:Boolean,default:!1},justifyContent:{default:`flex-start`},alignItems:{default:`stretch`},customStyles:{default:()=>({})}},emits:[`update:modelValue`,`drag-start`,`drag-end`,`item-add`,`item-remove`,`list-change`],setup(e,{expose:n,emit:s}){let{isDragging:u,internalList:f,isEmpty:h,listClasses:M,listStyles:N,draggableOptions:P,getItemKey:F,getItemTitle:I,getItemDescription:L,getItemClass:R,handleStart:z,handleEnd:B,handleAdd:V,handleRemove:H,handleUpdate:U,addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}=S(e,s);return n({isDragging:m(u),list:m(f),isEmpty:m(h),addItem:W,removeItem:G,moveItem:K,updateList:q,clear:J,getItem:Y,findIndex:X}),(n,s)=>(p(),i(`div`,{class:d([`c-draggable-wrapper`,e.wrapperClass])},[o(y(x),l({modelValue:y(f),"onUpdate:modelValue":s[0]||=e=>c(f)?f.value=e:null},y(P),{class:y(M),style:y(N),onStart:y(z),onEnd:y(B),onAdd:y(V),onRemove:y(H),onUpdate:y(U)}),{default:b(()=>[(p(!0),i(t,null,g(y(f),(t,o)=>(p(),i(`div`,{key:y(F)(t,o),class:d(y(R)()),"data-index":o},[_(n.$slots,`default`,{item:t,index:o,isDragging:y(u),isDisabled:e.disabled},()=>[a(`div`,w,[e.showHandle?(p(),i(`div`,T,[...s[1]||=[a(`div`,{class:`i-mdi:drag-vertical`},null,-1)]])):r(`v-if`,!0),a(`div`,E,[a(`div`,D,v(y(I)(t)),1),y(L)(t)?(p(),i(`div`,O,v(y(L)(t)),1)):r(`v-if`,!0)])])],!0)],10,C))),128))]),_:3},16,[`modelValue`,`class`,`style`,`onStart`,`onEnd`,`onAdd`,`onRemove`,`onUpdate`]),y(h)&&e.showEmptyState?(p(),i(`div`,k,[_(n.$slots,`empty`,{},()=>[a(`div`,A,[s[2]||=a(`div`,{class:`empty-icon i-mdi:inbox-outline`},null,-1),a(`p`,j,v(e.emptyText),1)])],!0)])):r(`v-if`,!0)],2))}}),[[`__scopeId`,`data-v-81117ea8`]]);export{S as n,M as t};
|