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

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

"use strict";const a=require("vue");require("../button/index.cjs");require("../icon/index.cjs");require("../renderer/index.cjs");require("../upload-list/index.cjs");require("../form/index.cjs");const p=require("@vexip-ui/config"),m=require("@vexip-ui/utils"),Ne=require("./props.cjs"),Ce=require("./request.cjs"),c=require("./symbol.cjs"),Le=require("../form/helper.cjs"),Pe=require("../button/button.cjs"),w=require("../icon/icon.cjs"),T=require("../renderer/renderer.cjs"),Ve=require("./upload-list.vue2.cjs");function ke(F){return typeof F=="function"||Object.prototype.toString.call(F)==="[object Object]"&&!a.isVNode(F)}function xe(){return{id:m.randomString(),name:"",size:0,type:"",base64:null,status:c.StatusType.PENDING,percentage:0,source:null,url:null,path:"",xhr:null,response:null,error:null,abort:m.noop}}const qe=a.defineComponent({name:"Upload",props:Ne.uploadProps,emits:["update:file-list"],setup(F,{slots:y,emit:M,expose:H}){const{idFor:K,labelId:J,state:Q,disabled:W,loading:X,size:Y,validateField:Z,getFieldValue:ee,setFieldValue:te}=Le.useFieldStore(O),e=p.useProps("upload",F,{state:p.createStateProp(Q),locale:null,url:{default:"",static:!0},fileList:{default:()=>ee(),static:!0},multiple:!1,tip:"",accept:null,filter:"",maxSize:{default:null,validator:t=>t>=0},field:"file",data:()=>({}),headers:()=>({}),withCredentials:!1,manual:!1,hiddenFiles:!1,countLimit:{default:0,validator:t=>t>=0},allowDrag:!1,onBeforeUpload:{default:null,isFunc:!0},onBeforeSelect:{default:null,isFunc:!0},iconRenderer:{default:null,isFunc:!0},selectToAdd:!1,listType:{default:"name",validator:t=>c.uploadListTypes.includes(t)},block:!1,loadingText:null,directory:!1,pathField:"path",disabledClick:!1,buttonLabel:null,disabled:()=>W.value,loading:()=>X.value,loadingIcon:p.createIconProp(),loadingLock:!1,loadingEffect:null,image:!1,defaultFiles:()=>[],listStyle:null,name:{default:"",static:!0},customFetch:{default:null,isFunc:!0},slots:()=>({})}),i=p.useNameHelper("upload"),q=p.useLocale("upload",a.toRef(e,"locale")),g=p.useIcons(),d=a.ref([]),h=a.ref(!1),P=a.ref(),V=a.ref(),I=a.ref(),N=a.computed(()=>e.loading&&e.loadingLock),le=a.computed(()=>[i.b(),i.bs("vars"),i.bm(`type-${e.listType}`),{[i.bm("inherit")]:e.inherit,[i.bm(e.state)]:e.state!=="default",[i.bm("multiple")]:e.multiple,[i.bm("drag")]:e.allowDrag,[i.bm("to-add")]:e.selectToAdd,[i.bm("block")]:e.block,[i.bm("drag-only")]:e.disabledClick,[i.bm("image")]:e.image,[i.bm("has-file")]:!e.hiddenFiles&&A.value.length,[i.bm("readonly")]:N.value,[i.bm("loading")]:e.loading}]),ae=a.computed(()=>e.image?{[i.be("image-control")]:!0,[i.bem("image-control","drag-over")]:h.value,[i.bem("image-control","disabled")]:e.disabled}:{[i.be("control")]:!0,[i.bem("control","drag-over")]:h.value}),ne=a.computed(()=>{var l;const t=e.image?(l=e.accept)!=null&&l.length?e.accept:"image/*":e.accept;return t&&(typeof t=="string"?t:t.join())}),ie=a.computed(()=>e.defaultFiles.map(t=>z(t))),A=a.computed(()=>ie.value.concat(d.value).filter(t=>t.status!==c.StatusType.DELETE));a.watch(()=>e.fileList,t=>{const l=new Map,o=new Map;for(const n of d.value)m.isDefined(n.id)&&l.set(n.id,n),n.source&&o.set(n.source,n);d.value=(t||[]).map(n=>z(n,n.id?l.get(n.id):n.source?o.get(n.source):void 0)),U()},{immediate:!0,deep:!0}),H({isDragOver:h,execute:R,handleDelete:G,focus:O,blur:()=>{var t,l;(t=V.value)==null||t.$el.blur(),(l=I.value)==null||l.blur()}});function O(t){var l,o;(l=V.value)!=null&&l.$el?V.value.$el.focus(t):(o=I.value)==null||o.focus(t)}function _(){var t;e.disabled||N.value||!e.disabledClick&&((t=P.value)==null||t.click())}function oe(t){const l=t.code||t.key;(l==="Enter"||l==="Space")&&_()}function re(t){const l=t.target;l!=null&&l.files&&$(l.files)}async function $(t){const l=Array.from(t||[]),n=e.selectToAdd?Array.from(d.value):[];for(const r of l){r.path||(r.path=r.webkitRelativePath);let f=se(r);if(f?f.status!==c.StatusType.SUCCESS&&f.status!==c.StatusType.UPLOADING&&(f.status=c.StatusType.PENDING):f=z({name:r.name,size:r.size,type:r.type,source:r}),typeof e.onBeforeSelect=="function"){let s=e.onBeforeSelect(f,n);if(m.isPromise(s)&&(s=await s),m.isFalse(s))continue}n.includes(f)||n.push(f)}const u=e.countLimit;if(u>0&&n.length>u){const r=n.slice(u);p.emitEvent(e.onExceed,r),d.value=n.slice(0,u)}else d.value=n;U(),C(),e.manual||R()}function C(){M("update:file-list",d.value),te(d.value),p.emitEvent(e.onChange,d.value),Z()}function se(t){const{name:l,size:o,type:n}=t,u=t.path||t.webkitRelativePath;return d.value.find(({source:r})=>r&&(r.path||r.webkitRelativePath)===u&&r.name===l&&r.size===o&&r.type===n)}function z(t,l=xe()){const{id:o,name:n,size:u,type:r,base64:f,status:s,percentage:S,source:v,url:x,path:b}=t;return Object.assign(l,{id:o??l.id??m.randomString(),name:n||"",size:u||0,type:r||"",base64:f||null,status:s??c.StatusType.PENDING,percentage:S||0,source:v||null,url:x||null,path:b||"",xhr:null,response:null,error:null}),l}function ue(t){return t.name.split(".").pop().toLocaleLowerCase()}async function R(){if(!e.url||!de())return!1;const t=d.value.filter(o=>o.status!==c.StatusType.SUCCESS&&o.status!==c.StatusType.DELETE),l=[];for(const o of t)l.push(ce(o).catch(m.noop));return await Promise.all(l).then(o=>o.filter(n=>n))}async function ce(t){if(typeof e.onBeforeUpload=="function"){let s=e.onBeforeUpload(t,d.value.filter(S=>S.status!==c.StatusType.SUCCESS&&S.status!==c.StatusType.DELETE));if(m.isPromise(s))try{s=await s}catch{return}if(m.isFalse(s))return;s instanceof Blob&&(s instanceof File?t.source=s:t.source=new File([s],t.name,{type:t.type}))}if(!t.source)return;t.status=c.StatusType.UPLOADING;const{url:l,headers:o,withCredentials:n,data:u,field:r,pathField:f}=e;return await new Promise((s,S)=>{t.abort=(e.customFetch||Ce.upload)({url:l,headers:o,withCredentials:n,data:u,field:r,pathField:f,file:t.source,onProgress:v=>{pe(v,t)},onSuccess:v=>{ge(v,t),s(v)},onError:v=>{me(v,t),S(v)},onAbort:()=>{s(null)}})})}function de(){const t=e.maxSize?e.maxSize*1024:1/0,l=typeof e.filter=="string"?e.filter?[e.filter]:[]:e.filter.filter(o=>o);for(let o=0,n=d.value.length;o<n;++o){const u=d.value[o],r=ue(u);if(l.length&&!l.includes(r))return p.emitEvent(e.onFilterError,u),!1;if(u.size>t)return p.emitEvent(e.onSizeError,u),!1}return!0}function G(t){var l;t.status=c.StatusType.DELETE,(l=t.abort)==null||l.call(t),U(),p.emitEvent(e.onDelete,t),C()}function fe(t){p.emitEvent(e.onPreview,t)}function U(){if(!m.isClient)return;const t=new DataTransfer;d.value=d.value.filter(l=>l.status!==c.StatusType.DELETE),d.value.forEach(l=>{l.source&&t.items.add(l.source)}),P.value&&(P.value.files=t.files)}function pe(t,l){l.status!==c.StatusType.DELETE&&(l.percentage=t,p.emitEvent(e.onProgress,l,t),C())}function ge(t,l){l.status!==c.StatusType.DELETE&&(l.status=c.StatusType.SUCCESS,l.response=t,l.error=null,p.emitEvent(e.onSuccess,l,t),C())}function me(t,l){l.status!==c.StatusType.DELETE&&(l.status=c.StatusType.FAIL,l.error=t,p.emitEvent(e.onError,l,t),C())}let k;a.onBeforeUnmount(()=>{clearTimeout(k)});async function ve(t){if(!(!e.allowDrag||e.disabled||N.value)&&(clearTimeout(k),t.preventDefault(),h.value=!1,t.dataTransfer)){const l=await ye(t.dataTransfer);l.length&&$(l)}}function be(t){!e.allowDrag||e.disabled||N.value||(clearTimeout(k),t.preventDefault(),h.value=!0)}function he(t){!e.allowDrag||e.disabled||N.value||(t.preventDefault(),k=setTimeout(()=>{h.value=!1},100))}async function ye(t){var v,x;const{items:l,files:o}=t;if(!l.length)return[];const n=[],u=[],r=[];for(let b=0,D=l.length;b<D;++b){const E=(x=(v=l[b]).webkitGetAsEntry)==null?void 0:x.call(v);if(!E)return o;E.isFile?n.push(o[b]):u.push({dir:E,prefix:""})}if(!e.directory||!u.length)return n;const f=[];let s=e.countLimit-(e.selectToAdd?d.value.length:0);s=Math.round(s)>0?s:100;const S=()=>{for(;u.length;){const b=u.shift(),D=b.dir,E=b.prefix?`${b.prefix}/${D.name}`:D.name,L=D.createReader();r.push(new Promise(we=>{L.readEntries(Fe=>{Fe.forEach(B=>{B.isFile?f.push({entry:B,prefix:E}):u.push({dir:B,prefix:E})}),we()})}))}};for(;S(),await Promise.all(r),!(!u.length||f.length>=s););return f.length>0?n.concat(await Promise.all(f.map(({entry:b,prefix:D})=>new Promise(E=>b.file(L=>{L.path=`${D}/${L.name}`,E(L)}))))):n}function Se(t){t.preventDefault()}function Ee(){return!e.allowDrag&&!e.disabledClick?a.createVNode(a.Fragment,null,[a.createVNode(Pe,{ref:V,inherit:!0,size:Y.value,type:e.state,disabled:e.disabled,loading:e.loading},{default:()=>e.buttonLabel??q.value.upload,icon:()=>a.createVNode(w,g.value.upload,null),loading:()=>a.createVNode(w,a.mergeProps(g.value.loading,{class:i.be("loading-icon"),effect:e.loadingEffect||g.value.loading.effect,icon:e.loadingIcon||g.value.loading.icon,label:"loading"}),null)}),a.renderSlot(y,"tip",void 0,()=>[a.createVNode(T,{renderer:e.slots.tip},{default:()=>[e.tip&&a.createVNode("p",{class:i.be("tip")},[e.tip])]})])]):a.createVNode("div",{ref:I,class:[i.be("drag-panel"),e.disabled&&i.bem("drag-panel","disabled")],tabindex:0},[a.renderSlot(y,"cloud",void 0,()=>[a.createVNode(T,{renderer:e.slots.cloud},{default:()=>[a.createVNode(w,a.mergeProps(g.value.uploadCloud,{class:[i.be("cloud"),e.disabled&&i.bem("cloud","disabled")],scale:+(g.value.uploadCloud.scale||1)*4}),null)]})]),a.renderSlot(y,"tip",void 0,()=>[a.createVNode(T,{renderer:e.slots.tip},{default:()=>[a.createVNode("p",{class:i.be("tip")},[e.tip||q.value.dragOrClick])]})]),a.createVNode(w,a.mergeProps(g.value.loading,{class:i.be("loading-icon"),effect:e.loadingEffect||g.value.loading.effect,icon:e.loadingIcon||g.value.loading.icon,label:"loading",style:{opacity:e.loading?"100%":"0%"}}),null)])}function De(){return a.createVNode("button",{class:[i.be("image-action"),e.disabled&&i.bem("image-action","disabled")],type:"button"},[a.renderSlot(y,"default",{isDragOver:(e.allowDrag||e.disabledClick)&&h.value},()=>[a.createVNode(T,{renderer:e.slots.default,data:{isDragOver:(e.allowDrag||e.disabledClick)&&h.value}},{default:()=>[e.loading?a.createVNode(w,a.mergeProps(g.value.loading,{class:i.be("loading-icon"),effect:e.loadingEffect||g.value.loading.effect,icon:e.loadingIcon||g.value.loading.icon,label:"loading",style:{marginBottom:"6px"}}),null):a.createVNode(w,a.mergeProps(g.value.plus,{class:[i.be("cloud"),e.disabled&&i.bem("cloud","disabled")],scale:+(g.value.plus.scale||1)*1.2,style:{marginBottom:"6px"}}),null),a.createVNode("span",null,[e.buttonLabel??q.value.upload])]})])])}function j(){const t=e.image?"li":"div";return a.createVNode(t,{class:ae.value,tabindex:-1,onClick:_,onDrop:ve,onDragover:be,onDragleave:he,onKeydown:oe},{default:()=>[!e.disabledClick&&a.createVNode("input",{ref:P,type:"file",class:i.be("input"),disabled:e.disabled,multiple:e.multiple,name:e.name,accept:ne.value,webkitdirectory:e.directory||void 0,onChange:re,onSubmit:Se},null),e.image?De():a.renderSlot(y,"default",{isDragOver:(e.allowDrag||e.disabledClick)&&h.value},()=>{let l;return[a.createVNode(T,{renderer:e.slots.default,data:{isDragOver:(e.allowDrag||e.disabledClick)&&h.value}},ke(l=Ee())?l:{default:()=>[l]})]})]})}function Te(){return a.createVNode(Ve,{inherit:!0,files:A.value,"select-to-add":e.selectToAdd,type:e.image?"thumbnail":e.listType,"icon-renderer":e.iconRenderer,"loading-text":e.loadingText,"can-preview":e.canPreview,style:e.listStyle,onDelete:G,onPreview:fe},{item:y.item||e.slots.item?t=>a.renderSlot(y,"item",t,()=>[a.createVNode(T,{renderer:e.slots.item,data:t},null)]):null,icon:y.icon||e.slots.icon?t=>a.renderSlot(y,"icon",t,()=>[a.createVNode(T,{renderer:e.slots.icon,data:t},null)]):null,suffix:()=>e.image&&(!e.countLimit||A.value.length<e.countLimit)?j():null})}return()=>a.createVNode("div",{id:K.value,class:le.value,role:"group","aria-labelledby":J.value},[!e.image&&j(),!e.hiddenFiles&&Te()])},methods:{execute:m.noop,handleDelete:m.noop,focus:m.noop,blur:m.noop}});module.exports=qe;
//# sourceMappingURL=upload.cjs.map