vxe-pc-ui/lib/upload/src/upload.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_log=require("../../ui/src/log"),_dom=require("../../ui/src/dom"),_util=require("./util"),_button=_interopRequireDefault(require("../../button/src/button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function createReactData(){return{isDragUploadStatus:!1,showMorePopup:!1,isActivated:!1,fileList:[],fileCacheMaps:{},isDragMove:!1,dragIndex:-1,dragTipText:""}}function createInternalData(){return{moreId:_xeUtils.default.uniqueId("upload"),imagePreviewTypes:["jpg","jpeg","png","gif"],prevDragIndex:-1}}var _default=exports.default=(0,_comp.defineVxeComponent)({name:"VxeUpload",props:{modelValue:[Array,String,Object],showList:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showList},moreConfig:Object,readonly:{type:Boolean,default:null},disabled:{type:Boolean,default:null},autoSubmit:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.autoSubmit},mode:{type:String,default:()=>(0,_ui.getConfig)().upload.mode},imageTypes:{type:Array,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.imageTypes,!0)},imageConfig:{type:Object,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.imageConfig,!0)},imageStyle:{type:Object,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.imageStyle,!0)},fileTypes:{type:Array,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.fileTypes,!0)},dragSort:Boolean,dragToUpload:{type:Boolean,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.dragToUpload,!0)},dragPlaceholder:{type:String,default:()=>(0,_ui.getConfig)().upload.dragPlaceholder},pasteToUpload:{type:Boolean,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().upload.pasteToUpload,!0)},keyField:String,singleMode:Boolean,urlMode:Boolean,urlArgs:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.urlArgs},multiple:Boolean,limitSize:{type:[String,Number],default:()=>(0,_ui.getConfig)().upload.limitSize},showLimitSize:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showLimitSize},limitSizeText:{type:[String,Number,Function],default:()=>(0,_ui.getConfig)().upload.limitSizeText},limitCount:{type:[String,Number],default:()=>(0,_ui.getConfig)().upload.limitCount},showLimitCount:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showLimitCount},limitCountText:{type:[String,Number,Function],default:()=>(0,_ui.getConfig)().upload.limitCountText},nameField:{type:String,default:()=>(0,_ui.getConfig)().upload.nameField},typeField:{type:String,default:()=>(0,_ui.getConfig)().upload.typeField},urlField:{type:String,default:()=>(0,_ui.getConfig)().upload.urlField},sizeField:{type:String,default:()=>(0,_ui.getConfig)().upload.sizeField},showErrorStatus:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showErrorStatus},showProgress:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showProgress},progressText:{type:[String,Number,Function],default:()=>(0,_ui.getConfig)().upload.progressText},showSubmitButton:Boolean,autoHiddenButton:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.autoHiddenButton},showUploadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showUploadButton},buttonText:{type:[String,Number,Function],default:()=>(0,_ui.getConfig)().upload.buttonText},buttonIcon:{type:String,default:()=>(0,_ui.getConfig)().upload.buttonIcon},showButtonText:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showButtonText},showButtonIcon:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showButtonIcon},showRemoveButton:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showRemoveButton},showDownloadButton:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showDownloadButton},showPreview:{type:Boolean,default:()=>(0,_ui.getConfig)().upload.showPreview},showTip:{type:Boolean,default:()=>null},maxSimultaneousUploads:{type:Number,default:()=>(0,_ui.getConfig)().upload.maxSimultaneousUploads},tipText:[String,Number,Function],hintText:String,previewMethod:Function,beforeSelectMethod:Function,uploadMethod:Function,beforeRemoveMethod:Function,removeMethod:Function,beforeDownloadMethod:Function,downloadMethod:Function,getUrlMethod:Function,getThumbnailUrlMethod:Function,size:{type:String,default:()=>(0,_ui.getConfig)().upload.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","add","remove","remove-fail","download","download-fail","upload-success","upload-error","sort-dragend","more-visible"],setup(S,e){const{emit:n,slots:D}=e,E=(0,_vue.inject)("$xeForm",null),M=(0,_vue.inject)("xeFormItemInfo",null),i=(0,_vue.inject)("$xeTable",null);var t=_xeUtils.default.uniqueId();const U=(0,_ui.useSize)(S)["computeSize"],m=(0,_vue.ref)(),c=(0,_vue.ref)(),_=(0,_vue.ref)(),f=(0,_vue.ref)(),B=(0,_vue.reactive)(createReactData()),r=createInternalData(),a={refElem:m},L=(0,_vue.computed)(()=>{var e=S["readonly"];return null===e?!!E&&E.props.readonly:e}),P=(0,_vue.computed)(()=>{var e=S["disabled"];return null===e?!!E&&E.props.disabled:e}),T=(0,_vue.computed)(()=>S.keyField||"_X_KEY"),h=(0,_vue.computed)(()=>"image"===S.mode),V=(0,_vue.computed)(()=>S.nameField||"name"),F=(0,_vue.computed)(()=>S.typeField||"type"),A=(0,_vue.computed)(()=>S.urlField||"url"),O=(0,_vue.computed)(()=>S.sizeField||"size"),Y=(0,_vue.computed)(()=>1024*_xeUtils.default.toNumber(S.limitSize)*1024),N=(0,_vue.computed)(()=>S.multiple?_xeUtils.default.toNumber(S.limitCount):1),C=(0,_vue.computed)(()=>{var e=S["multiple"],t=B["fileList"],o=N.value;return e?!o||t.length>=o:1<=t.length}),Q=(0,_vue.computed)(()=>{var e=_xeUtils.default.toNumber(S.limitSize);return e?1048576<e?e/1048576+"T":1024<e?e/1024+"G":e+"M":""}),X=(0,_vue.computed)(()=>{var{showTip:e,tipText:t}=S;return _xeUtils.default.isBoolean(e)||(e=(0,_ui.getConfig)().upload.showTip,_xeUtils.default.isBoolean(e))?e:!!t}),W=(0,_vue.computed)(()=>{var{limitSize:e,fileTypes:t,multiple:o,limitCount:i}=S,a=S.tipText||S.hintText,l=h.value,u=Q.value;return _xeUtils.default.isString(a)?a:_xeUtils.default.isFunction(a)?""+a({}):(a=[],l?(o&&i&&a.push((0,_ui.getI18n)("vxe.upload.imgCountHint",[i])),e&&u&&a.push((0,_ui.getI18n)("vxe.upload.imgSizeHint",[u]))):(t&&t.length&&a.push((0,_ui.getI18n)("vxe.upload.fileTypeHint",[t.join("/")])),e&&u&&a.push((0,_ui.getI18n)("vxe.upload.fileSizeHint",[u])),o&&i&&a.push((0,_ui.getI18n)("vxe.upload.fileCountHint",[i]))),a.join((0,_ui.getI18n)("vxe.base.comma")))}),s=(0,_vue.computed)(()=>Object.assign({},S.imageConfig||S.imageStyle)),K=(0,_vue.computed)(()=>{var{width:e,height:t}=s.value,o={};return e&&(o.width=(0,_dom.toCssUnit)(e)),t&&(o.height=(0,_dom.toCssUnit)(t)),o}),J=(0,_vue.computed)(()=>Object.assign({showMoreButton:!0},S.moreConfig)),l={},z={xID:t,props:S,context:e,reactData:B,internalData:r,getRefMaps:()=>a,getComputeMaps:()=>l},k=()=>_xeUtils.default.uniqueId(),R=e=>{return e[T.value]},u=()=>{var{modelValue:e,multiple:t}=S,o=L.value;const a=T.value,l=V.value,u=F.value,n=A.value,r=O.value;e=e?(e?_xeUtils.default.isArray(e)?e:[e]:[]).map(e=>{if(!e||_xeUtils.default.isString(e)){var t=""+(e||""),o=_xeUtils.default.parseUrl(e);const i=(o?o.searchQuery[l]:"")||decodeURIComponent(""+(t||"")).split("/").pop()||"";return{[l]:i,[u]:(o?o.searchQuery[u]:"")||$(i),[n]:t,[r]:_xeUtils.default.toNumber(o?o.searchQuery[r]:0)||0,[a]:k()}}const i=e[l]||"";return e[l]=i,e[u]=e[u]||$(i),e[n]=e[n]||"",e[r]=e[r]||0,e[a]=e[a]||k(),e}):[];B.fileList=o||t?e:e.slice(0,1)},$=e=>{var t=e.lastIndexOf(".");return 0<t?e.substring(t+1).toLowerCase():""},j=(e,t,o)=>{n(e,(0,_ui.createEvent)(o,{$upload:z},t))},q=e=>{const{singleMode:t,urlMode:o,urlArgs:i}=S,a=A.value,l=V.value;let u=e?e.slice(0):[];o&&(u=u.map(e=>{var t=e[a];if(t&&i){var o=_xeUtils.default.parseUrl(t);if(!o.searchQuery[l]&&-1===t.indexOf("blob:"))return""+t+(-1===t.indexOf("?")?"?":"&")+l+"="+encodeURIComponent(e[l]||"")}return t})),e=t?u[0]||null:u,n("update:modelValue",e)},G=e=>{var t=S.getUrlMethod||(0,_ui.getConfig)().upload.getUrlMethod,o=A.value;return t?t({$upload:z,option:e}):e[o]},Z=t=>{var{imageTypes:e,showDownloadButton:o}=S;const i=F.value,a=S.beforeDownloadMethod||(0,_ui.getConfig)().upload.beforeDownloadMethod;var l=r["imagePreviewTypes"];l.concat(e||[]).some(e=>(""+e).toLowerCase()===(""+t[i]).toLowerCase())&&_ui.VxeUI.previewImage&&_ui.VxeUI.previewImage({urlList:[G(t)],showDownloadButton:o,beforeDownloadMethod:a?()=>a({$upload:z,option:t}):void 0})},H=(o,e)=>{const i=S["showErrorStatus"],a=R(o);var t=S.uploadMethod||(0,_ui.getConfig)().upload.uploadMethod;return t?Promise.resolve(t({$upload:z,file:e,option:o,updateProgress(e){var t=B["fileCacheMaps"],t=t[R(o)];t&&(t.percent=Math.max(0,Math.min(99,_xeUtils.default.toNumber(e))))}})).then(e=>{var t=B["fileCacheMaps"],t=t[a];t&&(t.percent=100,t.status="success"),Object.assign(o,e),j("upload-success",{option:o,data:e},null)}).catch(e=>{var t=B["fileCacheMaps"],t=t[a];t&&(t.status="error"),i?Object.assign(o,e):B.fileList=B.fileList.filter(e=>R(e)!==a),j("upload-error",{option:o,data:e},null)}).finally(()=>{var e=B["fileCacheMaps"],e=e[a];e&&(e.loading=!1)}):(t=B["fileCacheMaps"],(e=t[a])&&(e.loading=!1),Promise.resolve())},ee=e=>{const{uploadMethod:t,urlMode:o}=S;var i,a=B["fileCacheMaps"],a=a[R(e)];(t||(0,_ui.getConfig)().upload.uploadMethod)&&a&&(i=a.file,a.loading=!0,a.status="pending",a.percent=0,H(e,i).then(()=>{o&&q(B.fileList)}))},d=(t,o)=>{const{multiple:e,urlMode:i,showLimitSize:a,limitSizeText:l,showLimitCount:u,limitCountText:n,autoSubmit:r}=S;var s=B["fileList"];const d=S.beforeSelectMethod||(0,_ui.getConfig)().upload.beforeSelectMethod,p=S.uploadMethod||(0,_ui.getConfig)().upload.uploadMethod,v=T.value,g=V.value,m=F.value,c=A.value,_=O.value;var f=Y.value;const h=N.value;var x=Q.value;let w=t;if(e&&h){if(u&&s.length>=h)return void(_ui.VxeUI.modal&&_ui.VxeUI.modal.notification({title:(0,_ui.getI18n)("vxe.modal.errTitle"),status:"error",content:n?""+(_xeUtils.default.isFunction(n)?n({maxCount:h}):n):(0,_ui.getI18n)("vxe.upload.overCountErr",[h])}));const U=w.length-(h-s.length);if(u&&0<U){const C=w.slice(h-s.length);n?_ui.VxeUI.modal.notification({title:(0,_ui.getI18n)("vxe.modal.errTitle"),status:"error",content:""+(_xeUtils.default.isFunction(n)?n({maxCount:h}):n)}):_ui.VxeUI.modal&&_ui.VxeUI.modal.notification({title:(0,_ui.getI18n)("vxe.modal.errTitle"),status:"error",width:null,slots:{default(){return(0,_vue.h)("div",{class:"vxe-upload--file-message-over-error"},[(0,_vue.h)("div",{},(0,_ui.getI18n)("vxe.upload.overCountExtraErr",[h,U])),(0,_vue.h)("div",{class:"vxe-upload--file-message-over-extra"},C.map((e,t)=>(0,_vue.h)("div",{key:t,class:"vxe-upload--file-message-over-extra-item"},e.name)))])}}})}w=w.slice(0,h-s.length)}if(a&&f)for(let e=0;e<t.length;e++)if(t[0].size>f)return void(_ui.VxeUI.modal&&_ui.VxeUI.modal.notification({title:(0,_ui.getI18n)("vxe.modal.errTitle"),status:"error",content:l?""+(_xeUtils.default.isFunction(l)?l({maxSize:f}):l):(0,_ui.getI18n)("vxe.upload.overSizeErr",[x])}));const y=Object.assign({},B.fileCacheMaps),I=e?s:[],b=[];w.forEach(e=>{var t=e["name"],o=k(),t={[g]:t,[m]:$(t),[_]:e.size,[c]:URL.createObjectURL(e),[v]:o},o=(p&&(y[o]={file:e,loading:!!r,status:"pending",percent:0}),(0,_vue.reactive)(t));d&&!d({$upload:z,file:e})||(p&&r&&b.push(H(o,e)),I.push(o))}),B.fileList=I,B.fileCacheMaps=y,I.forEach(e=>{j("add",{option:e},o)}),Promise.all(i?b:[]).then(()=>{q(I),E&&M&&E.triggerItemEvent(o,M.itemConfig.field,I)})},p=t=>{var{multiple:e,imageTypes:o,fileTypes:i}=S,a=P.value,l=h.value;return a?Promise.resolve({status:!1,files:[],file:null}):(0,_util.readLocalFile)({multiple:e,types:l?o:i}).then(e=>(d(e.files,t),e))},te=e=>{p(e).catch(()=>{})},v=(e,t,o)=>{var i=B["fileList"];i.splice(o,1),q(i),E&&M&&E.triggerItemEvent(e,M.itemConfig.field,i),j("remove",{option:t},e)},oe=(t,o,i)=>{var e=S.beforeRemoveMethod||(0,_ui.getConfig)().upload.beforeRemoveMethod;const a=S.removeMethod||(0,_ui.getConfig)().upload.removeMethod;Promise.resolve(!e||e({$upload:z,option:o})).then(e=>{e?a?Promise.resolve(a({$upload:z,option:o})).then(()=>{v(t,o,i)}).catch(e=>e):v(t,o,i):j("remove-fail",{option:o},t)})},ie=(e,t)=>{j("download",{option:t},e)},ae=e=>{var t,o,i,a=e.currentTarget,{clientX:e,clientY:l}=e;a&&({x:a,y:t,height:o,width:i}=a.getBoundingClientRect(),e<a||a+i<e||l<t||t+o<l)&&(B.isDragUploadStatus=!1)},le=e=>{var t=e.dataTransfer;t&&(t=t["items"],t)&&t.length&&(e.preventDefault(),B.isDragUploadStatus=!0)},g=(e,t)=>{const{imageTypes:o,fileTypes:i}=S;var a=r["imagePreviewTypes"];if(h.value){const l=a.concat(o&&o.length?o:[]);t=t.filter(e=>{const t=(""+(e.type.split("/")[1]||"")).toLowerCase();return!!l.some(e=>(""+e).toLowerCase()===t)})}else if(i&&i.length){const u=[];if(t.forEach(e=>{const t=$(e.name);i.some(e=>(""+e).toLowerCase()===t)||u.push(t)}),u.length)return void(_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.error.notType",[u.join(", ")]),status:"error"}))}t.length?d(t,e):_ui.VxeUI.modal&&_ui.VxeUI.modal.notification({title:(0,_ui.getI18n)("vxe.modal.errTitle"),status:"error",content:(0,_ui.getI18n)("vxe.upload.uploadTypeErr")})},ue=e=>{var t=e.dataTransfer;t&&(t=t["items"],t)&&t.length&&(e.preventDefault(),(t=ne(t)).length)&&g(e,t),B.isDragUploadStatus=!1},ne=e=>{const t=[];return _xeUtils.default.arrayEach(e,e=>{e=e.getAsFile();e&&t.push(e)}),t},x=e=>{const v=L.value,g=h.value;e=e.$event;_ui.VxeUI.modal&&(_ui.VxeUI.modal.open({id:r.moreId,title:v?(0,_ui.getI18n)("vxe.upload.morePopup.readTitle"):(0,_ui.getI18n)("vxe.upload.morePopup."+(g?"imageTitle":"fileTitle")),width:660,height:500,escClosable:!0,showMaximize:!0,resize:!0,maskClosable:!0,slots:{default(){var{showErrorStatus:e,dragToUpload:t,dragSort:o,dragPlaceholder:i}=S,{isActivated:a,isDragMove:l,isDragUploadStatus:u,dragIndex:n}=B;const r=B["fileList"];var s=P.value,d=D.moreContent||D["more-content"],p={};return t&&-1===n&&(p.onDragover=le,p.onDragleave=ae,p.onDrop=ue),(0,_vue.h)("div",Object.assign({ref:c,class:["vxe-upload--more-popup",{"is--readonly":v,"is--disabled":s,"is--active":a,"show--error":e,"is--drag":u}]},p),d?(0,_vn.getSlotVNs)(d({options:r})):[g?o?(0,_vue.h)(_vue.TransitionGroup,{name:"vxe-upload--drag-list"+(l?"":"-disabled"),tag:"div",class:"vxe-upload--image-more-list"},{default:()=>I(r,!0).concat(b(!0))}):(0,_vue.h)("div",{class:"vxe-upload--image-more-list"},I(r,!0).concat(b(!0))):(0,_vue.h)("div",{class:"vxe-upload--file-more-list"},[y(!0),o?(0,_vue.h)(_vue.TransitionGroup,{name:"vxe-upload--drag-list"+(l?"":"-disabled"),tag:"div",class:"vxe-upload--file-list"},{default:()=>w(r,!1)}):(0,_vue.h)("div",{class:"vxe-upload--file-list"},w(r,!0))]),o?(0,_vue.h)("div",{ref:f,class:"vxe-upload--drag-line"}):(0,_ui.renderEmptyElement)(z),u?(0,_vue.h)("div",{class:"vxe-upload--drag-placeholder"},i||(0,_ui.getI18n)("vxe.upload.dragPlaceholder")):(0,_ui.renderEmptyElement)(z)])}},onShow(){B.showMorePopup=!0},onHide({$event:e}){B.showMorePopup=!1,e&&j("more-visible",{visible:!1},e)}}),e)&&j("more-visible",{visible:!0},e)},re=(e,t,o)=>{var i,a=B["showMorePopup"],l=m.value,u=c.value,u=a?u:l;u&&(l=u.getBoundingClientRect(),u=_.value,i=f.value,a=a?i:u)&&(i=t.getBoundingClientRect(),a.style.display="block",a.style.top=Math.max(1,i.y-l.y)+"px",a.style.left=Math.max(1,i.x-l.x)+"px",a.style.height=i.height+"px",a.style.width=i.width-1+"px",a.setAttribute("drag-pos",o))},se=()=>{var e=_.value,t=f.value;e&&(e.style.display=""),t&&(t.style.display="")},de=e=>{e.stopPropagation(),e.dataTransfer&&e.dataTransfer.setDragImage((0,_dom.getTpImg)(),0,0);const t=e.currentTarget;e=t.parentElement,e=_xeUtils.default.findIndexOf(Array.from(e.children),e=>t===e);B.isDragMove=!0,B.dragIndex=e,setTimeout(()=>{B.isDragMove=!1},500)},pe=t=>{t.stopPropagation(),t.preventDefault();var o=B["dragIndex"];if(-1!==o){var i=h.value;const l=t.currentTarget;var a=l.parentElement,a=_xeUtils.default.findIndexOf(Array.from(a.children),e=>l===e);let e="";e=i?t.clientX-l.getBoundingClientRect().x<l.clientWidth/2?"left":"right":t.clientY-l.getBoundingClientRect().y<l.clientHeight/2?"top":"bottom",o===a?re(t,l,e):(re(t,l,e),r.prevDragIndex=a,r.prevDragPos=e)}},ve=e=>{var{fileList:t,dragIndex:o}=B,{prevDragIndex:i,prevDragPos:a}=r,l="bottom"===a||"right"===a?1:0,u=t[o];const n=t[i];u&&n&&(t.splice(o,1),i=_xeUtils.default.findIndexOf(t,e=>n===e)+l,t.splice(i,0,u),j("sort-dragend",{oldItem:u,newItem:n,dragPos:a,offsetIndex:l,_index:{newIndex:i,oldIndex:o}},e)),se(),B.dragIndex=-1},ge=e=>{i&&e.stopPropagation(),B.isActivated=!0},me=e=>{var t=S["pasteToUpload"],o=B["isActivated"];o&&t&&(o=e.clipboardData||e.originalEvent.clipboardData)&&(t=o["items"],t)&&(o=ne(t)).length&&(e.preventDefault(),g(e,o))},ce=e=>{var t=m.value,o=c.value;let i=(0,_dom.getEventTargetNode)(e,t).flag;!i&&o&&(o=(t=o.parentElement||o)&&t.parentElement,i=(0,_dom.getEventTargetNode)(e,o).flag),B.isActivated=i},_e=()=>{B.isActivated=!1};t={dispatchEvent:j,choose(){return p(null)},submit(i){var e=S["maxSimultaneousUploads"],e=_xeUtils.default.toNumber(e||1)||1;const{fileList:t,fileCacheMaps:a}=B,o=t.filter(e=>{e=R(e),e=a[e];return e&&("pending"===e.status||i&&"error"===e.status)}),l=e=>{var t=R(e),t=a[t];if(t){var o=t.file;if(o&&("pending"===t.status||i&&"error"===t.status))return t.loading=!0,t.percent=0,H(e,o).then(u)}return u()},u=()=>{var e;return o.length?(e=o[0],o.splice(0,1),l(e).then(u)):Promise.resolve()};return Promise.all(o.splice(0,e).map(l)).then(()=>{})},getMoreVisible(){return B.showMorePopup},openMore(){return x({$event:new Event("click")}),(0,_vue.nextTick)()},openMoreByEvent(e){return x({$event:e}),(0,_vue.nextTick)()},closeMore(){return _ui.VxeUI.modal&&_ui.VxeUI.modal.close(r.moreId),(0,_vue.nextTick)()}};Object.assign(z,t,{});const w=(e,r)=>{const{showRemoveButton:s,showDownloadButton:d,showProgress:p,progressText:v,showPreview:g,showErrorStatus:m,dragSort:c,autoSubmit:_,showSubmitButton:f}=S,{fileList:h,fileCacheMaps:x}=B,w=P.value,y=L.value,I=V.value,b=F.value,U=D.option,C=D.action,E=D.corner,M=D.name,T={};return c&&1<e.length&&(T.onDragstart=de,T.onDragover=pe,T.onDragend=ve),e.map((a,t)=>{var e=R(a),o=x[e];let i=!1,l=!1,u=!1;var n=""+(a[I]||"");return o&&(i=o.loading,l="error"===o.status,u="pending"===o.status),(0,_vue.h)("div",Object.assign({key:c?e:t,class:["vxe-upload--file-item",{"is--preview":g,"is--loading":i,"is--pending":u,"is--error":l}],fileid:e,draggable:!!c||null},T),U?(0,_vn.getSlotVNs)(U({option:a,isMoreView:r,options:h})):[(0,_vue.h)("div",{class:"vxe-upload--file-item-icon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)()["UPLOAD_FILE_TYPE_"+(""+a[b]).toLocaleUpperCase()]||(0,_ui.getIcon)().UPLOAD_FILE_TYPE_DEFAULT})]),(0,_vue.h)("div",{class:"vxe-upload--file-item-name",title:n,onClick(e){var t,o;i||l||(t=a,o=S.previewMethod||(0,_ui.getConfig)().upload.previewMethod,S.showPreview&&(o?o({$upload:z,option:t}):Z(t)))}},M?(0,_vn.getSlotVNs)(M({option:a,isMoreView:r,options:h})):n),i?(0,_vue.h)("div",{class:"vxe-upload--file-item-loading-icon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().UPLOAD_LOADING})]):(0,_ui.renderEmptyElement)(z),p&&i&&o?(0,_vue.h)("div",{class:"vxe-upload--file-item-loading-text"},v?_xeUtils.default.toFormatString(""+(_xeUtils.default.isFunction(v)?v({}):v),{percent:o.percent}):(0,_ui.getI18n)("vxe.upload.uploadProgress",[o.percent])):(0,_ui.renderEmptyElement)(z),!i&&(l&&m||u&&f&&!_)?(0,_vue.h)("div",{class:"vxe-upload--file-item-rebtn"},[(0,_vue.h)(_button.default,{icon:l?(0,_ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD:(0,_ui.getIcon)().UPLOAD_IMAGE_UPLOAD,mode:"text",status:"primary",content:l?(0,_ui.getI18n)("vxe.upload.reUpload"):(0,_ui.getI18n)("vxe.upload.manualUpload"),onClick(){ee(a)}})]):(0,_ui.renderEmptyElement)(z),(0,_vue.h)("div",{class:"vxe-upload--file-item-btn-wrapper"},C?(0,_vn.getSlotVNs)(C({option:a,isMoreView:r,options:h,readonly:y})):[E?(0,_vue.h)("div",{class:"vxe-upload--file-item-action"},(0,_vn.getSlotVNs)(E({option:a,isMoreView:r,options:h,readonly:y}))):(0,_ui.renderEmptyElement)(z),!d||i||u?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{class:"vxe-upload--file-item-download-btn",onClick(e){{var t=e,o=a;e=S.beforeDownloadMethod||(0,_ui.getConfig)().upload.beforeDownloadMethod;const i=S.downloadMethod||(0,_ui.getConfig)().upload.downloadMethod;Promise.resolve(!e||e({$upload:z,option:o})).then(e=>{e?i?Promise.resolve(i({$upload:z,option:o})).then(()=>{ie(t,o)}).catch(e=>e):ie(t,o):j("download-fail",{option:o},t)})}}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().UPLOAD_FILE_DOWNLOAD})]),!s||y||w||i?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{class:"vxe-upload--file-item-remove-btn",onClick(e){oe(e,a,t)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().UPLOAD_FILE_REMOVE})])])])})},y=e=>{var{showUploadButton:t,buttonText:o,buttonIcon:i,showButtonText:a,showButtonIcon:l,autoHiddenButton:u}=S,n=B["fileList"],r=P.value,s=L.value,d=X.value,p=W.value,v=C.value,g=D.default,m=D.tip||D.hint;return s||!t?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{class:"vxe-upload--file-action"},[u&&v?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{class:"vxe-upload--file-action-btn",onClick:te},g?(0,_vn.getSlotVNs)(g({isMoreView:e,options:n,$upload:z})):[(0,_vue.h)(_button.default,{class:"vxe-upload--file-action-button",content:e||a?o?""+(_xeUtils.default.isFunction(o)?o({}):o):(0,_ui.getI18n)("vxe.upload.fileBtnText"):"",icon:l?i||(0,_ui.getIcon)().UPLOAD_FILE_ADD:"",disabled:r})]),d&&(p||m)?(0,_vue.h)("div",{class:"vxe-upload--file-action-tip"},m?(0,_vn.getSlotVNs)(m({isMoreView:e,options:n,$upload:z})):""+p):(0,_ui.renderEmptyElement)(z)])},I=(e,i)=>{const{showRemoveButton:a,showProgress:l,progressText:u,showPreview:p,showErrorStatus:v,dragSort:g,autoSubmit:m,showSubmitButton:c}=S,{fileList:_,fileCacheMaps:f}=B,h=P.value,x=L.value,w=s.value,y=K.value,I=D.option,b=D.action,U=D.corner,C={onMousedown:ge};return g&&1<e.length&&(C.onDragstart=de,C.onDragover=pe,C.onDragend=ve),e.map((n,r)=>{var e=R(n),t=f[e];let s=!1,d=!1,o=!1;return t&&(s=t.loading,d="error"===t.status,o="pending"===t.status),(0,_vue.h)("div",Object.assign({key:g?e:r,class:["vxe-upload--image-item",{"is--preview":p,"is--circle":w.circle,"is--loading":s,"is--pending":o,"is--error":d}],fileid:e,draggable:!!g||null},C),I?(0,_vn.getSlotVNs)(I({option:n,isMoreView:i,options:_})):[(0,_vue.h)("div",{class:"vxe-upload--image-item-box",style:i?null:y,onClick(e){if(!s&&!d){var t=n;var o=r;var i=S["showDownloadButton"];const l=B["fileList"];var a=S.previewMethod||(0,_ui.getConfig)().upload.previewMethod;const u=S.beforeDownloadMethod||(0,_ui.getConfig)().upload.beforeDownloadMethod;S.showPreview&&(a?a({$upload:z,option:t}):_ui.VxeUI.previewImage&&_ui.VxeUI.previewImage({urlList:l.map(e=>G(e)),activeIndex:o,showDownloadButton:i,beforeDownloadMethod:u?({index:e})=>u({$upload:z,option:l[e]}):void 0}))}}},[s&&t?(0,_vue.h)("div",{class:"vxe-upload--image-item-loading"},[(0,_vue.h)("div",{class:"vxe-upload--image-item-loading-icon"},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().UPLOAD_LOADING})]),l?(0,_vue.h)("div",{class:"vxe-upload--image-item-loading-text"},u?_xeUtils.default.toFormatString(""+(_xeUtils.default.isFunction(u)?u({}):u),{percent:t.percent}):(0,_ui.getI18n)("vxe.upload.uploadProgress",[t.percent])):(0,_ui.renderEmptyElement)(z)]):(0,_ui.renderEmptyElement)(z),(0,_vue.h)("div",{class:"vxe-upload--image-item-img-wrapper",title:(0,_ui.getI18n)("vxe.upload.viewItemTitle")},[(0,_vue.h)("img",{class:"vxe-upload--image-item-img",src:(e=n,(t=S.getThumbnailUrlMethod||(0,_ui.getConfig)().upload.getThumbnailUrlMethod)?t({$upload:z,option:e}):G(e))})]),!s&&(d&&v||o&&c&&!m)?(0,_vue.h)("div",{class:"vxe-upload--image-item-rebtn"},[(0,_vue.h)(_button.default,{icon:d?(0,_ui.getIcon)().UPLOAD_IMAGE_RE_UPLOAD:(0,_ui.getIcon)().UPLOAD_IMAGE_UPLOAD,mode:"text",status:"primary",content:d?(0,_ui.getI18n)("vxe.upload.reUpload"):(0,_ui.getI18n)("vxe.upload.manualUpload"),onClick(){ee(n)}})]):(0,_ui.renderEmptyElement)(z),(0,_vue.h)("div",{class:"vxe-upload--image-item-btn-wrapper",onClick(e){e.stopPropagation()}},b?(0,_vn.getSlotVNs)(b({option:n,isMoreView:i,options:_,readonly:x})):[U?(0,_vue.h)("div",{class:"vxe-upload--file-item-action"},(0,_vn.getSlotVNs)(U({option:n,isMoreView:i,options:_,readonly:x}))):(0,_ui.renderEmptyElement)(z),!a||x||h||s?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{class:"vxe-upload--image-item-remove-btn",onClick(e){e.stopPropagation(),oe(e,n,r)}},[(0,_vue.h)("i",{class:(0,_ui.getIcon)().UPLOAD_IMAGE_REMOVE})])])])])})},b=e=>{var{showUploadButton:t,buttonText:o,buttonIcon:i,showButtonText:a,showButtonIcon:l,autoHiddenButton:u}=S,n=B["fileList"],r=L.value,s=X.value,d=W.value,p=C.value,v=K.value,g=D.default,m=D.tip||D.hint;return r||!t||u&&p?(0,_ui.renderEmptyElement)(z):(0,_vue.h)("div",{key:"action",class:"vxe-upload--image-action"},[(0,_vue.h)("div",{class:"vxe-upload--image-action-btn",onClick:te},g?g({isMoreView:e,options:n,$upload:z}):[(0,_vue.h)("div",{class:"vxe-upload--image-action-box",style:e?null:v},[l?(0,_vue.h)("div",{class:"vxe-upload--image-action-icon"},[(0,_vue.h)("i",{class:i||(0,_ui.getIcon)().UPLOAD_IMAGE_ADD})]):(0,_ui.renderEmptyElement)(z),e||a?(0,_vue.h)("div",{class:"vxe-upload--image-action-content"},o?""+(_xeUtils.default.isFunction(o)?o({}):o):(0,_ui.getI18n)("vxe.upload.imgBtnText")):(0,_ui.renderEmptyElement)(z),s&&(d||m)?(0,_vue.h)("div",{class:"vxe-upload--image-action-hint"},m?(0,_vn.getSlotVNs)(m({isMoreView:e,options:n,$upload:z})):""+d):(0,_ui.renderEmptyElement)(z)])])])};const o=(0,_vue.ref)(0);return(0,_vue.watch)(()=>S.modelValue?S.modelValue.length:0,()=>{o.value++}),(0,_vue.watch)(()=>S.modelValue,()=>{o.value++}),(0,_vue.watch)(o,()=>{u()}),(0,_vue.onMounted)(()=>{S.multiple&&S.singleMode&&(0,_log.errLog)("vxe.error.errConflicts",["[upload] multiple","single-mode"]),S.imageStyle&&(0,_log.warnLog)("vxe.error.delProp",["[upload] image-style","image-config"]),S.dragSort&&(0,_dom.initTpImg)(),_ui.globalEvents.on(z,"paste",me),_ui.globalEvents.on(z,"mousedown",ce),_ui.globalEvents.on(z,"blur",_e)}),(0,_vue.onBeforeUnmount)(()=>{B.isDragUploadStatus=!1,_ui.globalEvents.off(z,"paste"),_ui.globalEvents.off(z,"mousedown"),_ui.globalEvents.off(z,"blur"),_xeUtils.default.assign(B,createReactData()),_xeUtils.default.assign(r,createInternalData())}),u(),z.renderVN=()=>{var{showErrorStatus:e,dragToUpload:t,pasteToUpload:o,dragSort:i,dragPlaceholder:a}=S,{isDragUploadStatus:l,showMorePopup:u,isActivated:n,dragIndex:r}=B,s=U.value,d=P.value,p=L.value,v=h.value,g={onMousedown:ge};return t&&-1===r&&(g.onDragover=le,g.onDragleave=ae,g.onDrop=ue),(0,_vue.h)("div",Object.assign({ref:m,class:["vxe-upload",{["size--"+s]:s,"is--active":n,"is--readonly":p,"is--disabled":d,"is--paste":o,"show--error":e,"is--drag":l}]},g),[(v?()=>{var{showList:e,dragSort:t}=S;const{fileList:o,isDragMove:i}=B;var a=J.value;const l=D.moreButton||D["more-button"],{maxCount:u,showMoreButton:n,moreButtonText:r}=a;let s=o,d=0,p=!1,v=!1;return _xeUtils.default.isNumber(u)&&o.length>u&&(p=!0,v=0===u,d=o.length-u,s=o.slice(0,u)),(0,_vue.h)("div",{key:"image",class:"vxe-upload--image-wrapper"},e?[t?(0,_vue.h)(_vue.TransitionGroup,{name:"vxe-upload--drag-list"+(i?"":"-disabled"),tag:"div",class:"vxe-upload--image-list"},{default:()=>I(s,!1).concat([n&&d?(0,_vue.h)("div",{key:"om",class:"vxe-upload--image-over-more"},l?(0,_vn.getSlotVNs)(l({options:o})):[(0,_vue.h)(_button.default,{mode:"text",content:r?_xeUtils.default.isFunction(r)?r({$upload:z,options:o}):_xeUtils.default.toFormatString(r,[o.length]):(0,_ui.getI18n)(p&&v?"vxe.upload.moreImgBtnText":"vxe.upload.moreBtnText",[o.length]),status:"primary",onClick:x})]):(0,_ui.renderEmptyElement)(z),b(!1)])}):(0,_vue.h)("div",{class:"vxe-upload--image-list"},I(s,!1).concat([n&&d?(0,_vue.h)("div",{class:"vxe-upload--image-over-more"},l?(0,_vn.getSlotVNs)(l({options:o})):[(0,_vue.h)(_button.default,{mode:"text",content:r?_xeUtils.default.isFunction(r)?r({$upload:z,options:o}):_xeUtils.default.toFormatString(r,[o.length]):(0,_ui.getI18n)(p&&v?"vxe.upload.moreImgBtnText":"vxe.upload.moreBtnText",[o.length]),status:"primary",onClick:x})]):(0,_ui.renderEmptyElement)(z),b(!1)]))]:[(0,_vue.h)("div",{class:"vxe-upload--image-list"},[b(!1)])])}:()=>{var{showList:e,moreConfig:t,dragSort:o}=S,{fileList:i,isDragMove:a}=B,{maxCount:l,showMoreButton:u,layout:n,moreButtonText:r}=J.value,n="horizontal"===n,s=D.moreButton||D["more-button"];let d=i,p=0,v=!1,g=!1;return _xeUtils.default.isNumber(l)&&i.length>l&&(v=!0,g=0===l,p=i.length-l,d=i.slice(0,l)),(0,_vue.h)("div",{key:"all",class:"vxe-upload--file-wrapper"},e?[u&&t&&n?(0,_ui.renderEmptyElement)(z):y(!0),(0,_vue.h)("div",{class:["vxe-upload--file-list-wrapper",{"is--horizontal":n}]},[d.length?o?(0,_vue.h)(_vue.TransitionGroup,{name:"vxe-upload--drag-list"+(a?"":"-disabled"),tag:"div",class:"vxe-upload--file-list"},{default:()=>w(d,!1)}):(0,_vue.h)("div",{class:"vxe-upload--file-list"},w(d,!1)):(0,_ui.renderEmptyElement)(z),u&&p?(0,_vue.h)("div",{class:"vxe-upload--file-over-more"},s?(0,_vn.getSlotVNs)(s({options:i})):[(0,_vue.h)(_button.default,{mode:"text",content:r?_xeUtils.default.isFunction(r)?r({$upload:z,options:i}):_xeUtils.default.toFormatString(r,[i.length]):(0,_ui.getI18n)(v&&g?"vxe.upload.moreFileBtnText":"vxe.upload.moreBtnText",[i.length]),status:"primary",onClick:x})]):(0,_ui.renderEmptyElement)(z),u&&t&&n?y(!1):(0,_ui.renderEmptyElement)(z)])]:[y(!1)])})(),i?(0,_vue.h)("div",{ref:_,class:"vxe-upload--drag-line"}):(0,_ui.renderEmptyElement)(z),l&&!u?(0,_vue.h)("div",{class:"vxe-upload--drag-placeholder"},a||(0,_ui.getI18n)("vxe.upload.dragPlaceholder")):(0,_ui.renderEmptyElement)(z)])},z},render(){return this.renderVN()}});