1 line
12 KiB
JavaScript
1 line
12 KiB
JavaScript
import{N as W,aC as ve,aD as Z,bW as oe,b9 as fe,Q as ue,ba as pe,c as i,U as n,bn as me,O as _e,R as ge,a as F,bS as be,bI as he,w as Fe,a1 as ye,q as qe,bf as Se,be as ke,V as ee,b0 as we,a4 as xe,ac as ae,bd as Ue}from"./index-3a2b6cd5.js";import{b as ze,h as te}from"./format-312d1398.js";import{u as Ce,a as Be,b as Re}from"./use-file-a69aa9db.js";import{g as Le}from"./mixin-183f301b.js";const Ke=W({name:"QUploaderAddTrigger",setup(){const t=ve(oe,Z);return t===Z&&console.error("QUploaderAddTrigger needs to be child of QUploader"),t}}),Pe={...fe,min:{type:Number,default:0},max:{type:Number,default:100},color:String,centerColor:String,trackColor:String,fontSize:String,rounded:Boolean,thickness:{type:Number,default:.2,validator:t=>t>=0&&t<=1},angle:{type:Number,default:0},showValue:Boolean,reverse:Boolean,instantFeedback:Boolean},H=50,re=2*H,ne=re*Math.PI,Ee=Math.round(ne*1e3)/1e3,$e=W({name:"QCircularProgress",props:{...Pe,value:{type:Number,default:0},animationSpeed:{type:[String,Number],default:600},indeterminate:Boolean},setup(t,{slots:_}){const{proxy:{$q:l}}=ue(),g=pe(t),d=i(()=>{const f=(l.lang.rtl===!0?-1:1)*t.angle;return{transform:t.reverse!==(l.lang.rtl===!0)?`scale3d(-1, 1, 1) rotate3d(0, 0, 1, ${-90-f}deg)`:`rotate3d(0, 0, 1, ${f-90}deg)`}}),h=i(()=>t.instantFeedback!==!0&&t.indeterminate!==!0?{transition:`stroke-dashoffset ${t.animationSpeed}ms ease 0s, stroke ${t.animationSpeed}ms ease`}:""),c=i(()=>re/(1-t.thickness/2)),j=i(()=>`${c.value/2} ${c.value/2} ${c.value} ${c.value}`),z=i(()=>ze(t.value,t.min,t.max)),S=i(()=>ne*(1-(z.value-t.min)/(t.max-t.min))),U=i(()=>t.thickness/2*c.value);function C({thickness:f,offset:a,color:o,cls:v,rounded:q}){return n("circle",{class:"q-circular-progress__"+v+(o!==void 0?` text-${o}`:""),style:h.value,fill:"transparent",stroke:"currentColor","stroke-width":f,"stroke-dasharray":Ee,"stroke-dashoffset":a,"stroke-linecap":q,cx:c.value,cy:c.value,r:H})}return()=>{const f=[];t.centerColor!==void 0&&t.centerColor!=="transparent"&&f.push(n("circle",{class:`q-circular-progress__center text-${t.centerColor}`,fill:"currentColor",r:H-U.value/2,cx:c.value,cy:c.value})),t.trackColor!==void 0&&t.trackColor!=="transparent"&&f.push(C({cls:"track",thickness:U.value,offset:0,color:t.trackColor})),f.push(C({cls:"circle",thickness:U.value,offset:S.value,color:t.color,rounded:t.rounded===!0?"round":void 0}));const a=[n("svg",{class:"q-circular-progress__svg",style:d.value,viewBox:j.value,"aria-hidden":"true"},f)];return t.showValue===!0&&a.push(n("div",{class:"q-circular-progress__text absolute-full row flex-center content-center",style:{fontSize:t.fontSize}},_.default!==void 0?_.default():[n("div",z.value)])),n("div",{class:`q-circular-progress q-circular-progress--${t.indeterminate===!0?"in":""}determinate`,style:g.value,role:"progressbar","aria-valuemin":t.min,"aria-valuemax":t.max,"aria-valuenow":t.indeterminate===!0?void 0:z.value},me(_.internal,a))}}});function le(t){return(t*100).toFixed(2)+"%"}const Qe={..._e,...Ce,label:String,color:String,textColor:String,square:Boolean,flat:Boolean,bordered:Boolean,noThumbnails:Boolean,autoUpload:Boolean,hideUploadBtn:Boolean,disable:Boolean,readonly:Boolean},se=[...Be,"start","finish","added","removed"];function je(t){const _=ue(),{props:l,slots:g,emit:d,proxy:h}=_,{$q:c}=h,j=ge(l,c);function z(e,r,m){if(e.__status=r,r==="idle"){e.__uploaded=0,e.__progress=0,e.__sizeLabel=te(e.size),e.__progressLabel="0.00%";return}if(r==="failed"){h.$forceUpdate();return}e.__uploaded=r==="uploaded"?e.size:m,e.__progress=r==="uploaded"?1:Math.min(.9999,e.__uploaded/e.size),e.__progressLabel=le(e.__progress),h.$forceUpdate()}const S=i(()=>l.disable!==!0&&l.readonly!==!0),U=F(!1),C=F(null),f=F(null),a={files:F([]),queuedFiles:F([]),uploadedFiles:F([]),uploadedSize:F(0),updateFileStatus:z,isAlive:()=>be(_)===!1},{pickFiles:o,addFiles:v,onDragover:q,onDragleave:s,processFiles:p,getDndNode:I,maxFilesNumber:T,maxTotalSizeNumber:D}=Re({editable:S,dnd:U,getFileInput:V,addFilesToQueue:X});Object.assign(a,t({props:l,slots:g,emit:d,helpers:a})),a.isBusy===void 0&&(a.isBusy=F(!1));const y=F(0),L=i(()=>y.value===0?0:a.uploadedSize.value/y.value),A=i(()=>le(L.value)),N=i(()=>te(y.value)),P=i(()=>S.value===!0&&a.isUploading.value!==!0&&(l.multiple===!0||a.queuedFiles.value.length===0)&&(l.maxFiles===void 0||a.files.value.length<T.value)&&(l.maxTotalSize===void 0||y.value<D.value)),E=i(()=>S.value===!0&&a.isBusy.value!==!0&&a.isUploading.value!==!0&&a.queuedFiles.value.length>0);he(oe,J);const u=i(()=>"q-uploader column no-wrap"+(j.value===!0?" q-uploader--dark q-dark":"")+(l.bordered===!0?" q-uploader--bordered":"")+(l.square===!0?" q-uploader--square no-border-radius":"")+(l.flat===!0?" q-uploader--flat no-shadow":"")+(l.disable===!0?" disabled q-uploader--disable":"")+(U.value===!0?" q-uploader--dnd":"")),B=i(()=>"q-uploader__header"+(l.color!==void 0?` bg-${l.color}`:"")+(l.textColor!==void 0?` text-${l.textColor}`:""));Fe(a.isUploading,(e,r)=>{r===!1&&e===!0?d("start"):r===!0&&e===!1&&d("finish")});function $(){l.disable===!1&&(a.abort(),a.uploadedSize.value=0,y.value=0,K(),a.files.value=[],a.queuedFiles.value=[],a.uploadedFiles.value=[])}function Q(){l.disable===!1&&M(["uploaded"],()=>{a.uploadedFiles.value=[]})}function k(){M(["idle","failed"],({size:e})=>{y.value-=e,a.queuedFiles.value=[]})}function M(e,r){if(l.disable===!0)return;const m={files:[],size:0},w=a.files.value.filter(b=>e.indexOf(b.__status)===-1?!0:(m.size+=b.size,m.files.push(b),b.__img!==void 0&&window.URL.revokeObjectURL(b.__img.src),!1));m.files.length>0&&(a.files.value=w,r(m),d("removed",m.files))}function G(e){l.disable||(e.__status==="uploaded"?a.uploadedFiles.value=a.uploadedFiles.value.filter(r=>r.__key!==e.__key):e.__status==="uploading"?e.__abort():y.value-=e.size,a.files.value=a.files.value.filter(r=>r.__key!==e.__key?!0:(r.__img!==void 0&&window.URL.revokeObjectURL(r.__img.src),!1)),a.queuedFiles.value=a.queuedFiles.value.filter(r=>r.__key!==e.__key),d("removed",[e]))}function K(){a.files.value.forEach(e=>{e.__img!==void 0&&window.URL.revokeObjectURL(e.__img.src)})}function V(){return f.value||C.value.getElementsByClassName("q-uploader__input")[0]}function X(e,r){const m=p(e,r,a.files.value,!0),w=V();w!=null&&(w.value=""),m!==void 0&&(m.forEach(b=>{if(a.updateFileStatus(b,"idle"),y.value+=b.size,l.noThumbnails!==!0&&b.type.toUpperCase().startsWith("IMAGE")){const Y=new Image;Y.src=window.URL.createObjectURL(b),b.__img=Y}}),a.files.value=a.files.value.concat(m),a.queuedFiles.value=a.queuedFiles.value.concat(m),d("added",m),l.autoUpload===!0&&a.upload())}function ie(){E.value===!0&&a.upload()}function O(e,r,m){if(e===!0){const w={type:"a",key:r,icon:c.iconSet.uploader[r],flat:!0,dense:!0};let b;return r==="add"?(w.onClick=o,b=J):w.onClick=m,n(ae,w,b)}}function J(){return n("input",{ref:f,class:"q-uploader__input overflow-hidden absolute-full",tabindex:-1,type:"file",title:"",accept:l.accept,multiple:l.multiple===!0?"multiple":void 0,capture:l.capture,onMousedown:we,onClick:o,onChange:X})}function de(){return g.header!==void 0?g.header(R):[n("div",{class:"q-uploader__header-content column"},[n("div",{class:"flex flex-center no-wrap q-gutter-xs"},[O(a.queuedFiles.value.length>0,"removeQueue",k),O(a.uploadedFiles.value.length>0,"removeUploaded",Q),a.isUploading.value===!0?n(ee,{class:"q-uploader__spinner"}):null,n("div",{class:"col column justify-center"},[l.label!==void 0?n("div",{class:"q-uploader__title"},[l.label]):null,n("div",{class:"q-uploader__subtitle"},[N.value+" / "+A.value])]),O(P.value,"add"),O(l.hideUploadBtn===!1&&E.value===!0,"upload",a.upload),O(a.isUploading.value,"clear",a.abort)])])]}function ce(){return g.list!==void 0?g.list(R):a.files.value.map(e=>n("div",{key:e.__key,class:"q-uploader__file relative-position"+(l.noThumbnails!==!0&&e.__img!==void 0?" q-uploader__file--img":"")+(e.__status==="failed"?" q-uploader__file--failed":e.__status==="uploaded"?" q-uploader__file--uploaded":""),style:l.noThumbnails!==!0&&e.__img!==void 0?{backgroundImage:'url("'+e.__img.src+'")'}:null},[n("div",{class:"q-uploader__file-header row flex-center no-wrap"},[e.__status==="failed"?n(xe,{class:"q-uploader__file-status",name:c.iconSet.type.negative,color:"negative"}):null,n("div",{class:"q-uploader__file-header-content col"},[n("div",{class:"q-uploader__title"},[e.name]),n("div",{class:"q-uploader__subtitle row items-center no-wrap"},[e.__sizeLabel+" / "+e.__progressLabel])]),e.__status==="uploading"?n($e,{value:e.__progress,min:0,max:1,indeterminate:e.__progress===0}):n(ae,{round:!0,dense:!0,flat:!0,icon:c.iconSet.uploader[e.__status==="uploaded"?"done":"clear"],onClick:()=>{G(e)}})])]))}ye(()=>{a.isUploading.value===!0&&a.abort(),a.files.value.length>0&&K()});const R={};for(const e in a)qe(a[e])===!0?Se(R,e,()=>a[e].value):R[e]=a[e];return Object.assign(R,{upload:ie,reset:$,removeUploadedFiles:Q,removeQueuedFiles:k,removeFile:G,pickFiles:o,addFiles:v}),ke(R,{canAddFiles:()=>P.value,canUpload:()=>E.value,uploadSizeLabel:()=>N.value,uploadProgressLabel:()=>A.value}),Object.assign(h,R),()=>{const e=[n("div",{class:B.value},de()),n("div",{class:"q-uploader__list scroll"},ce()),I("uploader")];a.isBusy.value===!0&&e.push(n("div",{class:"q-uploader__overlay absolute-full flex flex-center"},[n(ee)]));const r={ref:C,class:u.value};return P.value===!0&&Object.assign(r,{onDragover:q,onDragleave:s}),n("div",r,e)}}const Ae=Le(se),Ne=({name:t,props:_,emits:l,injectPlugin:g})=>W({name:t,props:{...Qe,..._},emits:Ue(l)===!0?{...Ae,...l}:[...se,...l],setup(){return je(g)}});function x(t){return typeof t=="function"?t:()=>t}const Oe={url:[Function,String],method:{type:[Function,String],default:"POST"},fieldName:{type:[Function,String],default:()=>t=>t.name},headers:[Function,Array],formFields:[Function,Array],withCredentials:[Function,Boolean],sendRaw:[Function,Boolean],batch:[Function,Boolean],factory:Function},Ie=["factory-failed","uploaded","failed","uploading"];function Te({props:t,emit:_,helpers:l}){const g=F([]),d=F([]),h=F(0),c=i(()=>({url:x(t.url),method:x(t.method),headers:x(t.headers),formFields:x(t.formFields),fieldName:x(t.fieldName),withCredentials:x(t.withCredentials),sendRaw:x(t.sendRaw),batch:x(t.batch)})),j=i(()=>h.value>0),z=i(()=>d.value.length>0);let S;function U(){g.value.forEach(o=>{o.abort()}),d.value.length>0&&(S=!0)}function C(){const o=l.queuedFiles.value.slice(0);l.queuedFiles.value=[],c.value.batch(o)?f(o):o.forEach(v=>{f([v])})}function f(o){if(h.value++,typeof t.factory!="function"){a(o,{});return}const v=t.factory(o);if(!v)_("factory-failed",new Error("QUploader: factory() does not return properly"),o),h.value--;else if(typeof v.catch=="function"&&typeof v.then=="function"){d.value.push(v);const q=s=>{l.isAlive()===!0&&(d.value=d.value.filter(p=>p!==v),d.value.length===0&&(S=!1),l.queuedFiles.value=l.queuedFiles.value.concat(o),o.forEach(p=>{l.updateFileStatus(p,"failed")}),_("factoryFailed",s,o),h.value--)};v.then(s=>{S===!0?q(new Error("Aborted")):l.isAlive()===!0&&(d.value=d.value.filter(p=>p!==v),a(o,s))}).catch(q)}else a(o,v||{})}function a(o,v){const q=new FormData,s=new XMLHttpRequest,p=(u,B)=>v[u]!==void 0?x(v[u])(B):c.value[u](B),I=p("url",o);if(!I){console.error("q-uploader: invalid or no URL specified"),h.value--;return}const T=p("formFields",o);T!==void 0&&T.forEach(u=>{q.append(u.name,u.value)});let D=0,y=0,L=0,A=0,N;s.upload.addEventListener("progress",u=>{if(N===!0)return;const B=Math.min(A,u.loaded);l.uploadedSize.value+=B-L,L=B;let $=L-y;for(let Q=D;$>0&&Q<o.length;Q++){const k=o[Q];if($>k.size)$-=k.size,D++,y+=k.size,l.updateFileStatus(k,"uploading",k.size);else{l.updateFileStatus(k,"uploading",$);return}}},!1),s.onreadystatechange=()=>{s.readyState<4||(s.status&&s.status<400?(l.uploadedFiles.value=l.uploadedFiles.value.concat(o),o.forEach(u=>{l.updateFileStatus(u,"uploaded")}),_("uploaded",{files:o,xhr:s})):(N=!0,l.uploadedSize.value-=L,l.queuedFiles.value=l.queuedFiles.value.concat(o),o.forEach(u=>{l.updateFileStatus(u,"failed")}),_("failed",{files:o,xhr:s})),h.value--,g.value=g.value.filter(u=>u!==s))},s.open(p("method",o),I),p("withCredentials",o)===!0&&(s.withCredentials=!0);const P=p("headers",o);P!==void 0&&P.forEach(u=>{s.setRequestHeader(u.name,u.value)});const E=p("sendRaw",o);o.forEach(u=>{l.updateFileStatus(u,"uploading",0),E!==!0&&q.append(p("fieldName",u),u,u.name),u.xhr=s,u.__abort=()=>{s.abort()},A+=u.size}),_("uploading",{files:o,xhr:s}),g.value.push(s),E===!0?s.send(new Blob(o)):s.send(q)}return{isUploading:j,isBusy:z,abort:U,upload:C}}const De={name:"QUploader",props:Oe,emits:Ie,injectPlugin:Te},Ve=Ne(De);export{Ve as Q,Ke as a};
|