vexip-ui/lib/components/transfer/transfer-panel.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const t=require("vue");require("../checkbox/index.cjs");require("../collapse-transition/index.cjs");require("../icon/index.cjs");require("../input/index.cjs");require("../number-input/index.cjs");require("../resize-observer/index.cjs");require("../virtual-list/index.cjs");const M=require("@vexip-ui/config"),W=require("@vexip-ui/hooks"),E=require("@vexip-ui/utils"),X=require("../checkbox/checkbox.vue2.cjs"),w=require("../icon/icon.cjs"),de=require("../collapse/collapse-transition.cjs"),fe=require("../input/input.cjs"),ve=require("../resize-observer/resize-observer.cjs"),be=require("../virtual-list/virtual-list.cjs"),ge=require("../number-input/number-input.vue2.cjs"),he=t.defineComponent({name:"TransferPanel",props:{type:{type:String,default:null},state:{type:M.stateProp,default:"default"},selected:{type:Set,default:()=>new Set},paged:{type:Boolean,default:!1},filter:{type:Function,default:null},disabled:{type:Boolean,default:!1},title:{type:String,default:""},options:{type:Array,default:()=>[]},emptyText:{type:String,default:"暂无数据"},optionHeight:{type:Number,default:32},deepState:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingIcon:{type:[Object,Function],default:null},loadingLock:{type:Boolean,default:!1},loadingEffect:{type:String,default:null},locale:{type:Object,default:()=>({})}},emits:["update:selected","select","enter","switch"],setup(a,{slots:v,emit:P}){const n=M.useNameHelper("transfer"),d=M.useIcons(),{isRtl:L}=W.useRtl(),o=t.ref(new Set(a.selected)),h=t.ref(10),f=t.ref(1),y=t.ref(null),c=t.ref(-1),z=t.ref(""),B=t.ref(!1),Y=t.ref(),D=t.ref(),Z=t.ref(),ee=t.ref(),O=t.ref(),b=t.ref();let K=0,m=null,N=!1;const{target:te,modifier:U}=W.useModifier({passive:!1,onKeyDown:(e,l)=>{E.decide([[()=>l.up||l.down,()=>{!N&&c.value<0?(N=!0,m?c.value=a.options.findIndex(u=>u.value===m):b.value&&(c.value=Math.round(b.value.scrollOffset/a.optionHeight)),c.value=c.value===-1?0:c.value):c.value=E.boundRange(ne(c.value+(l.up?-1:1),l.up?-1:1),0,_.value.length-1),a.paged||re(c.value,l.up?"top":"bottom")}],[()=>a.paged&&(l.left||l.right)&&e.ctrlKey,()=>{C(f.value+(l.left?-1:1)),c.value=0}],[()=>a.type==="source"&&l.right||a.type==="target"&&l.left,()=>{N=!1,c.value=-1,m=null,P("switch")}],[()=>l.space,()=>{const u=_.value[c.value];u&&(o.value[o.value.has(u.value)?"delete":"add"](u.value),k())}],[()=>l.enter,()=>P("enter")],[()=>typeof a.filter=="function"&&!!O.value&&l["ctrl+f"],()=>{e.stopPropagation(),O.value.focus()}]],{beforeMatchAny:()=>e.preventDefault(),afterMatchAny:l.resetAll})}}),le=t.computed(()=>({[n.be("panel")]:!0,[n.bem("panel",a.state)]:a.state!=="default",[n.bem("panel","disabled")]:a.disabled})),s=t.computed(()=>{const e=a.filter,l=z.value;return e&&l?a.options.filter(u=>e(l,u)):a.options}),T=t.computed(()=>s.value.length),A=t.computed(()=>s.value.slice((f.value-1)*h.value,f.value*h.value)),_=t.computed(()=>a.paged?A.value:s.value),V=t.computed(()=>Math.ceil(T.value/(h.value||1)));t.watch(()=>a.selected,e=>{o.value=e}),t.watch(T,()=>{N=!1,c.value=-1,m=null});const H=t.ref(!1),S=t.ref(!1);t.watchEffect(()=>{const e=s.value,l=o.value;let u=!1,r=!1;for(let i=0,p=T.value;i<p;++i){const q=e[i];if(q.disabled||(l.has(q.value)?u=!0:r=!0),u&&r)break}S.value=u&&!r,H.value=!S.value&&l.size>0});function $(){requestAnimationFrame(()=>{var l;const e=D.value||((l=b.value)==null?void 0:l.wrapper);if(e){const u=getComputedStyle(e),r=parseInt(u.paddingTop),i=parseInt(u.paddingBottom),p=e.offsetHeight-r-i;K=p,h.value=Math.floor(p/(a.optionHeight||1))}})}function j(e){if(!(a.disabled||e.disabled)){if(y.value&&U.shift){ae(y.value,e.value);return}o.value.has(e.value)?o.value.delete(e.value):o.value.add(e.value),N=!1,c.value=-1,m=e.value,y.value=e.value,k()}}function ae(e,l){var q;const u=s.value;let r=-1,i=-1;for(let g=0,R=u.length;g<R;++g){const Q=u[g];if(Q.value===e?r=g:Q.value===l&&(i=g),r>0&&i>0)break}const p=o.value.has((q=u[r])==null?void 0:q.value)?"add":"delete";r>i&&([r,i]=[i,r]);for(let g=r;g<=i;++g){const R=u[g];R.disabled||o.value[p](R.value)}k()}function F(e){if(e==null||e.preventDefault(),!a.disabled){if(S.value)for(const l of s.value)!l.disabled&&o.value.delete(l.value);else for(const l of s.value)!l.disabled&&o.value.add(l.value);y.value=null,k()}}function x(){if(!a.disabled)if(H.value){const e=new Set(o.value);for(const l of s.value)l.disabled||(e.has(l.value)?o.value.delete(l.value):o.value.add(l.value));y.value=null,k()}else F()}function ue(){y.value=null,U.resetAll()}function k(){P("update:selected",o.value),P("select")}function C(e){f.value=E.boundRange(e,1,V.value)}function G(e,l){var r;const u=_.value;for(l=l/Math.abs(l);(r=u[e])!=null&&r.disabled&&(e+=l,!(e<0||e>=u.length)););return e}function ne(e,l=1){var r;const u=_.value;return(r=u[e])!=null&&r.disabled&&(e=G(e,l),(l>0?e>=u.length:e<0)&&(e=G(e,-l),(l>0?e<0:e>=u.length)&&(e=-1))),e}function re(e,l){const u=a.options[e];if(!(a.paged||!u||!b.value))if(l==="bottom"){const r=(e+1)*a.optionHeight;b.value.scrollOffset+K<r&&b.value.scrollTo((e-h.value+1)*a.optionHeight)}else{const r=e*a.optionHeight;b.value.scrollOffset>r&&b.value.scrollTo(r)}}const I=t.reactive({type:t.toRef(a,"type"),currentPage:f,pageSize:h,totalPages:V,allSelected:S,partial:H,selected:t.computed(()=>Array.from(o.value)),options:t.computed(()=>s.value),toggleSelectAll:F,handleReverse:x});function J({option:e,index:l}){const u=a.disabled||e.disabled,r=i=>{i.preventDefault(),i.stopPropagation(),j(e)};return t.createVNode("li",{class:{[n.be("option")]:!0,[n.bem("option","disabled")]:u,[n.bem("option","hitting")]:c.value===l},role:"option","aria-disabled":u?"true":void 0,onClick:()=>j(e)},[t.renderSlot(v,"option",{type:a.type,option:e,index:l},()=>[t.createVNode(X,{key:1,class:n.be("checkbox"),state:a.deepState?a.state:void 0,checked:o.value.has(e.value),disabled:u,"tab-index":-1,onClick:r},null),t.createVNode("span",{key:2,class:n.be("label")},[t.renderSlot(v,"label",{type:a.type,option:e,index:l},()=>[e.label])])])])}function oe(){return t.createVNode("div",{ref:Y,class:n.be("header")},[t.renderSlot(v,"header",I,()=>[t.createVNode(t.Fragment,null,[t.createVNode(X,{inherit:!0,control:!0,class:n.be("checkbox"),state:a.deepState?a.state:void 0,checked:S.value,partial:H.value,disabled:a.disabled,"tab-index":-1,onClick:F},null),t.createVNode("div",{class:[n.be("reverse"),a.disabled&&n.bem("reverse","disabled")],title:a.locale.reverse,onClick:x},[t.createVNode(w,t.mergeProps(d.value.retweet,{scale:+(d.value.retweet.scale||1)*1.2}),null)]),t.createVNode("div",{class:n.be("counter")},[`${o.value.size}/${s.value.length}`]),(a.title||v.title)&&t.createVNode("span",{class:n.be("title")},[t.renderSlot(v,"title",I,()=>[a.title])]),t.createVNode(de,{appear:!0,horizontal:!0,"fade-effect":!0},{default:()=>[a.loading&&t.createVNode("div",{class:n.be("loading")},[t.createVNode(w,t.mergeProps(d.value.loading,{effect:a.loadingEffect||d.value.loading.effect,icon:a.loadingIcon||d.value.loading.icon,label:"loading"}),null)])]})])])])}function ce(){if(typeof a.filter!="function")return null;const e=l=>l.stopPropagation();return t.createVNode("div",{ref:ee,class:n.be("filter")},[t.createVNode(fe,{ref:O,value:z.value,"onUpdate:value":l=>z.value=l,inherit:!0,clearable:!0,sync:!0,disabled:a.disabled,placeholder:B.value?void 0:a.locale.search,onKeydown:e,onFocus:()=>B.value=!0,onBlur:()=>B.value=!1},{suffix:()=>t.createVNode(w,d.value.search,null)})])}function ie(){return a.paged||v.body?t.createVNode(ve,{throttle:!0,onResize:$},{default:()=>[t.createVNode("ul",{ref:D,class:n.be("body"),role:"listbox"},[t.renderSlot(v,"body",I,()=>[A.value.length?A.value.map((e,l)=>J({option:e,index:l})):t.createVNode("div",{class:n.be("empty")},[a.emptyText||a.locale.empty])])])]}):t.createVNode(be,{ref:b,inherit:!0,class:n.be("body"),items:s.value,"item-size":a.optionHeight,"item-fixed":!0,"use-y-bar":!0,"id-key":"value","items-attrs":{role:"listbox",ariaLabel:a.type},onResize:$},{default:({item:e,index:l})=>J({option:e,index:l}),empty:()=>t.createVNode("div",{class:n.be("empty")},[a.emptyText||a.locale.empty])})}function se(){return!a.paged&&!v.footer?null:t.createVNode("div",{ref:Z,class:n.be("footer")},[t.renderSlot(v,"footer",I,()=>[t.createVNode("div",{class:n.be("pagination")},[t.createVNode(w,t.mergeProps(L.value?d.value.angleRight:d.value.angleLeft,{class:[n.be("page-plus"),f.value<=1&&n.bem("page-plus","disabled")],onClick:()=>C(f.value-1)}),null),t.createVNode(ge,{inherit:!0,value:f.value,class:n.be("page-input"),size:"small",min:1,max:V.value,onChange:C},null),t.createVNode("span",{style:"margin: 0 4px"},["/"]),t.createVNode("span",null,[V.value]),t.createVNode(w,t.mergeProps(L.value?d.value.angleLeft:d.value.angleRight,{class:[n.be("page-minus"),f.value>=V.value&&n.bem("page-minus","disabled")],onClick:()=>C(f.value+1)}),null)])])])}return()=>t.createVNode("div",{ref:te,class:le.value,tabindex:0,onBlur:ue},[oe(),ce(),ie(),se()])}});module.exports=he;
//# sourceMappingURL=transfer-panel.cjs.map