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

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

"use strict";const l=require("vue");require("../button/index.cjs");require("../icon/index.cjs");require("../renderer/index.cjs");require("../form/index.cjs");const u=require("@vexip-ui/config"),de=require("@vexip-ui/utils"),O=require("@vexip-ui/hooks"),z=require("./transfer-panel.cjs"),fe=require("./props.cjs"),ge=require("../form/helper.cjs"),A=require("../renderer/renderer.cjs"),M=require("../button/button.cjs"),B=require("../icon/icon.cjs"),pe={value:"value",label:"label",disabled:"disabled"},ve=l.defineComponent({name:"Transfer",props:fe.transferProps,emits:["update:value"],setup(K,{slots:P,emit:U,expose:j}){const{idFor:D,labelId:G,state:J,disabled:Q,loading:W,validateField:X,getFieldValue:Y,setFieldValue:Z}=ge.useFieldStore(()=>{var t,a;return(a=(t=v.value)==null?void 0:t.$el)==null?void 0:a.focus()}),e=u.useProps("transfer",K,{state:u.createStateProp(J),locale:null,options:{default:()=>[],static:!0},value:{default:()=>Y(),static:!0},disabled:()=>Q.value,paged:!1,filter:!1,emptyText:null,keyConfig:()=>({}),optionHeight:{default:32,validator:t=>t>0},ignoreCase:!1,sourceTitle:null,targetTitle:null,deepState:!1,loading:()=>W.value,loadingIcon:u.createIconProp(),loadingLock:!1,loadingEffect:null,slots:()=>({})}),{isRtl:y}=O.useRtl(),i=u.useNameHelper("transfer"),f=u.useLocale("transfer",l.toRef(e,"locale")),S=u.useIcons(),c=l.ref(null),g=l.ref(new Set),p=l.ref(new Set),q=l.ref([]),E=l.ref([]),N=l.ref([]),v=l.ref(),k=l.ref(),_=l.computed(()=>({...pe,...e.keyConfig}));let C=new Map,d=e.value;const $=l.ref(0);l.watchEffect(()=>{e.keyConfig.value,e.keyConfig.label,e.keyConfig.disabled;for(let t=0,a=e.options.length;t<a;++t)e.options[t];$.value++}),l.watch($,ee,{immediate:!0}),l.watchEffect(()=>{if(!c.value.size){q.value=Array.from(N.value),E.value=[];return}const t=new Set(c.value),a=[],o=[];for(const n of N.value)t.has(n.value)?a.push(n):o.push(n);E.value=a,q.value=o});function ee(){const{value:t,label:a,disabled:o}=_.value,n=C,s=new Map;e.options.forEach(T=>{const V=typeof T=="string"?{[t]:T}:T,w=V[t];if(de.isNull(w))return;const se=V[a]||String(w),{[o]:ue=!1}=V,b=n.get(V.value),ce=l.reactive({disabled:ue,value:w,label:se,hidden:(b==null?void 0:b.hidden)??!1,hitting:(b==null?void 0:b.hitting)??!1,data:T});s.set(w,ce)}),C=s,N.value=Array.from(s.values()),c.value=new Set(d)}const F=l.computed(()=>e.loading&&e.loadingLock),te=l.computed(()=>[i.b(),i.bs("vars"),{[i.bm("inherit")]:e.inherit,[i.bm(e.state)]:e.state!=="default",[i.bm("readonly")]:F.value,[i.bm("loading")]:e.loading}]),I=l.computed(()=>e.deepState&&e.state!=="default"?e.state:"primary"),ae=l.computed(()=>!!g.value.size),le=l.computed(()=>!!p.value.size),oe=l.computed(()=>e.ignoreCase?(t,a)=>a.label.toLocaleLowerCase().includes(t):(t,a)=>a.label.includes(t)),ne=l.computed(()=>x("source")),re=l.computed(()=>x("target"));l.watch(()=>e.value,t=>{d=t,c.value=new Set(d)}),j({handleToTarget:h,handleToSource:m,handlePanelFocus:L,handlePanelBlur:ie,focus:t=>{var a,o;return(o=(a=v.value)==null?void 0:a.$el)==null?void 0:o.focus(t)},blur:()=>{var t,a,o,n;(a=(t=v.value)==null?void 0:t.$el)==null||a.blur(),(n=(o=k.value)==null?void 0:o.$el)==null||n.blur()}});function x(t){const a=e.filter;if(a)return typeof a=="function"?(o,n)=>a(o,n,t):oe.value}function R(){d=Array.from(c.value),U("update:value",d),Z(d),u.emitEvent(e.onChange,d),X()}function h(){for(const t of g.value)c.value.add(t);g.value.clear(),R()}function m(){for(const t of p.value)c.value.delete(t);p.value.clear(),R()}function H(t){const a={source:Array.from(g.value),target:Array.from(p.value)},o={source:a.source.map(n=>{var s;return((s=C.get(n))==null?void 0:s.data)??""}),target:a.target.map(n=>{var s;return((s=C.get(n))==null?void 0:s.data)??""})};u.emitEvent(e.onSelect,t,a,o)}function L(t){var a,o;t==="source"?(a=v.value)==null||a.$el.focus():(o=k.value)==null||o.$el.focus()}function ie(){var t,a;(t=v.value)==null||t.$el.blur(),(a=k.value)==null||a.$el.blur()}function r(t){let a=O.createSlotRender(P,t);if(!a){for(const o of t)if(a=e.slots[o],typeof a=="function")break;return typeof a=="function"?o=>l.createVNode(A,{renderer:a,data:o},null):null}return null}return()=>l.createVNode("div",{id:D.value,class:te.value,role:"application","aria-labelledby":G.value},[l.createVNode(z,{ref:v,selected:g.value,"onUpdate:selected":t=>g.value=t,type:"source",class:i.bem("panel","source"),state:e.state,paged:e.paged,filter:ne.value,disabled:e.disabled,title:e.sourceTitle||f.value.source,options:q.value,"empty-text":e.emptyText||f.value.empty,"option-height":e.optionHeight,"ignore-case":e.ignoreCase,"deep-state":e.deepState,loading:e.loading,"loading-icon":e.loadingIcon,"loading-lock":e.loadingLock,"loading-effect":e.loadingEffect,locale:f.value,onSelect:()=>H("source"),onEnter:h,onSwitch:()=>L("target")},{header:r(["source-header","sourceHeader","header"]),title:r(["source-title","sourceTitle","title"]),body:r(["source-body","sourceBody","body"]),footer:r(["source-footer","sourceFooter","footer"]),option:r(["source-option","sourceOption","option"]),label:r(["source-label","sourceLabel","label"])}),l.createVNode("div",{class:i.be("actions")},[l.renderSlot(P,"actions",{handleToTarget:h,handleToSource:m},()=>[l.createVNode(A,{renderer:e.slots.actions,data:{handleToTarget:h,handleToSource:m}},{default:()=>[l.createVNode(M,{key:1,inherit:!0,class:i.be("action"),type:I.value,size:"small",disabled:e.disabled||!ae.value,loading:F.value,"loading-icon":e.loadingIcon,"loading-effect":e.loadingEffect,style:{marginBottom:"6px"},onClick:h},{icon:()=>l.createVNode(B,l.mergeProps(y.value?S.value.angleLeft:S.value.angleRight,{label:y.value?"to left":"to right"}),null)}),l.createVNode(M,{key:2,inherit:!0,class:i.be("action"),type:I.value,size:"small",disabled:e.disabled||!le.value,loading:F.value,"loading-icon":e.loadingIcon,"loading-effect":e.loadingEffect,style:{margin:"0"},onClick:m},{icon:()=>l.createVNode(B,l.mergeProps(y.value?S.value.angleRight:S.value.angleLeft,{label:y.value?"to right":"to left"}),null)})]})])]),l.createVNode(z,{ref:k,selected:p.value,"onUpdate:selected":t=>p.value=t,type:"target",class:i.bem("panel","target"),state:e.state,paged:e.paged,filter:re.value,disabled:e.disabled,title:e.targetTitle||f.value.target,options:E.value,"empty-text":e.emptyText||f.value.empty,"option-height":e.optionHeight,"ignore-case":e.ignoreCase,"deep-state":e.deepState,loading:e.loading,"loading-icon":e.loadingIcon,"loading-lock":e.loadingLock,"loading-effect":e.loadingEffect,locale:f.value,onSelect:()=>H("target"),onEnter:m,onSwitch:()=>L("source")},{header:r(["target-header","targetHeader","header"]),title:r(["target-title","targetTitle","title"]),body:r(["target-body","targetBody","body"]),footer:r(["target-footer","targetFooter","footer"]),option:r(["target-option","targetOption","option"]),label:r(["target-label","targetLabel","label"])})])}});module.exports=ve;
//# sourceMappingURL=transfer.cjs.map