quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 10.1 kB
JavaScript
import{_ as e,r as t}from"../index7.js";import{_ as r}from"../toConsumableArray.js";import{_ as n,a as o}from"../typeof.js";import{_ as a,a as i,b as s,c as l,P as u,H as d,A as p,d as c,N as f,O as v,B as h}from"../index2.js";import{_ as m}from"../defineProperty.js";import"../index8.js";import"../index4.js";import g from"../imagepreview/index.js";import"../loading/index.js";import"../grid/index.js";import"../unsupportedIterableToArray.js";import"../index22.js";import"../core.esm.js";import"../popup/index.js";import"../bodyScrollLock.esm.js";import"../public.js";function y(e,t){return new Promise((function(r){if("file"!==t){var n=new FileReader;n.onload=function(e){r(e.target.result)},"dataUrl"===t?n.readAsDataURL(e):"text"===t&&n.readAsText(e)}else r()}))}function b(e,t){return(r=e,Array.isArray(r)?r:[r]).some((function(e){return!!e.file&&e.file.size>t}));var r}function w(e,t){var r=[],n=[];return e.forEach((function(e){b(e,t)?n.push(e):r.push(e)})),{valid:r,invalid:n}}function k(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var o=a(this).constructor;r=Reflect.construct(n,arguments,o)}else r=n.apply(this,arguments);return i(this,r)}}var x=function(a){s(c,d);var i=k(c);function c(){var o;n(this,c);for(var a=arguments.length,s=new Array(a),d=0;d<a;d++)s[d]=arguments[d];return o=i.call.apply(i,[this].concat(s)),m(l(o),"id",""),m(l(o),"name",""),m(l(o),"iconcolor","#ccc"),m(l(o),"capture",!1),m(l(o),"preview",!1),m(l(o),"accept","image/*"),m(l(o),"multiple",!0),m(l(o),"hidedelete",!1),m(l(o),"disabled",!1),m(l(o),"readonly",!1),m(l(o),"maxcount",999),m(l(o),"maxsize","26214400"),m(l(o),"closeimg",""),m(l(o),"tasks",[]),m(l(o),"fId",0),m(l(o),"hiddenUpload",!1),m(l(o),"inputRef",u()),m(l(o),"beforeUpload",null),m(l(o),"beforeDelete",null),m(l(o),"values",[]),m(l(o),"previewStatus",!1),m(l(o),"previewInstance",null),m(l(o),"resetInput",(function(){o.inputRef.current&&(o.inputRef.current.value="")})),m(l(o),"onAfterRead",(function(e){var t=Number(o.maxsize);if(b(e,t))o.$emit("oversize",{detail:{items:e,maxsize:t}});else{if(Array.isArray(e)){if(!(e=w(e,t).valid).length)return;o.tasks=[].concat(r(o.tasks),r(e))}else o.tasks=[].concat(r(o.tasks),[e]);o.values=o.preview?o.tasks.slice(0,o.maxcount):[],o.$emit("afterread",{detail:e}),o.$emit("change",{detail:o.values})}})),m(l(o),"readFile",(function(e){var t="dataUrl";if(Array.isArray(e)){var r=+o.maxcount-o.tasks.length;e.length>r&&(e=e.slice(0,r)),Promise.all(e.map((function(e){return y(e,t)}))).then((function(t){var r=e.map((function(e,r){var n={file:e,status:"done",message:"",id:o.fId+r};return t[r]&&(n.content=t[r]),o.fId=o.fId+r,n}));o.onAfterRead(r)})).catch((function(e){console.error(e)}))}else y(e,t).then((function(t){var r={file:e,status:"done",message:"",id:o.fId+1};t&&(r.content=t),o.fId=o.fId+1,o.onAfterRead(r)}))})),m(l(o),"onChange",function(){var r=e(t.mark((function e(r){var n,a,i,s,l;return t.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=r.target,a=n.files,!o.disabled&&a){e.next=4;break}return e.abrupt("return");case 4:if(i=[].slice.call(a)||null,!o.beforeUpload){e.next=10;break}return e.next=8,o.beforeUpload(i);case 8:s=e.sent,i=s?i:s;case 10:if(i&&0!==i.length){e.next=12;break}return e.abrupt("return");case 12:l=1===i.length?i[0]:[].slice.call(i),o.readFile(l),r.target.value="",o.$emit("change",{detail:l});case 16:case"end":return e.stop()}}),e)})));return function(e){return r.apply(this,arguments)}}()),m(l(o),"setPreview",(function(e){var t=e.map((function(e,t){return{status:"done",message:"",id:t,url:e}}));o.tasks=t,o.values=t,o.fId=e.length})),m(l(o),"onRemove",(function(e,t,r){if(!o.beforeDelete||"function"==typeof o.beforeDelete&&o.beforeDelete(t,{index:r})){e.stopPropagation();var n=o.tasks.filter((function(e){return e.id!==t.id}));o.tasks=n,o.values=n,o.$emit("onremove",{detail:t}),o.$emit("change",{detail:t})}})),m(l(o),"myImagePreview",(function(e,t){if(!o.previewStatus){o.previewStatus=!0;var r=e.map((function(e){return e.url||e.content||""}));o.previewInstance=g({images:r,startPosition:t}),o.previewStatus=!1}})),o}return o(c,[{key:"componentDidMount",value:function(){if(!this.readonly){var e=this.inputRef.current;this.capture?e.setAttribute("capture",this.capture):e.removeAttribute("capture")}}},{key:"shouldComponentUpdate",value:function(e,t,r){if(["capture","multiple","disabled","deletable"].includes(e)&&this.inputRef&&this.inputRef.current){var n=this.inputRef.current;r?n.setAttribute(e,r):n.removeAttribute(e)}return!0}},{key:"setStatus",value:function(e){"failed"===e.status?this.tasks=this.tasks.filter((function(t){return t.id!==e.id})):this.tasks=this.tasks.map((function(t){return t.id===e.id&&Object.assign(t,e),t}))}},{key:"closePreview",value:function(){this.previewInstance&&this.previewInstance.close()}},{key:"render",value:function(){var e=this,t=this.capture,r=this.accept,n=this.multiple,o=this.name,a=this.id,i=this.disabled,s=this.tasks.length>=Number(this.maxcount),l=this.preview?this.tasks.slice(0,this.maxcount):[],u=["quark-uploader",i&&"uploader-disabled",this.preview&&l.length&&"quark-uploader-mg"];return d.h(p,null,l.map((function(t,r,n){return d.h("div",{class:"quark-uploader-preview-item",key:t.id,part:"item"},"uploading"===t.status&&d.h("div",{class:"uploading",slot:"uploading",part:"uploading"},d.h("quark-loading",{type:"circular",color:"#fff",part:"uploading-icon"}),d.h("span",{class:"uploading-text",part:"uploading-text"},t.message)),d.h("img",{src:t.url||t.content,onClick:function(){return e.myImagePreview(n,r)},part:"img"}),e.hidedelete||e.readonly||!e.closeimg?d.h("span",{class:"quark-uploader-remove",part:"remove",onClick:function(n){return e.onRemove(n,t,r)}},d.h("quark-icon-close",{part:"remove-icon"})):d.h("img",{onClick:function(n){return e.onRemove(n,t,r)},src:e.closeimg,part:"close-img",class:"quark-uploader-remove"}))})),!this.readonly&&d.h("div",{class:u.join(" "),part:"uploader",style:{display:s?"none":"block"}},d.h("slot",{name:"uploader"},d.h("div",{class:"quark-uploader-icon",part:"uploader-icon-wrap"},d.h("quark-icon-camera-fill",{part:"uploader-icon",size:"32",color:this.iconcolor}))),d.h("input",{ref:this.inputRef,name:o,id:a,type:"file",accept:r,multiple:n,capture:t,onChange:this.onChange,disabled:i})))}}]),c}();c([f()],x.prototype,"id",void 0),c([f()],x.prototype,"name",void 0),c([f()],x.prototype,"iconcolor",void 0),c([f({type:Boolean})],x.prototype,"capture",void 0),c([f({type:Boolean})],x.prototype,"preview",void 0),c([f()],x.prototype,"accept",void 0),c([f({type:Boolean})],x.prototype,"multiple",void 0),c([f({type:Boolean})],x.prototype,"hidedelete",void 0),c([f({type:Boolean})],x.prototype,"disabled",void 0),c([f({type:Boolean})],x.prototype,"readonly",void 0),c([f()],x.prototype,"maxcount",void 0),c([f()],x.prototype,"maxsize",void 0),c([f()],x.prototype,"closeimg",void 0),c([v()],x.prototype,"tasks",void 0),c([v()],x.prototype,"fId",void 0),c([v()],x.prototype,"hiddenUpload",void 0);var j=x=c([h({tag:"quark-uploader",style:":host {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n}\n\n:host .quark-uploader {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n}\n:host .quark-uploader-mg {\n /* margin-right: var(--uploader-margin, 6px); */\n}\n:host .quark-uploader-icon {\n box-sizing: border-box;\n width: var(--uploader-width, 24.8vw);\n height: var(--uploader-height, 24.8vw);\n background: var(--uploader-background, #f7f8fa);\n border-width: var(--uploader-border-width, 1px);\n border-color: var(--uploader-border-color, #e1e6eb);\n border-style: var(--uploader-border-style, dashed);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n cursor: pointer;\n border-radius: var(--uploader-radius, 1.06667vw);\n}\n\n:host input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n left: 0;\n top: 0;\n width: 100%;\n height: 100%;\n border-radius: 1.06667vw;\n cursor: pointer;\n}\n\n:host .quark-uploader-uploader-text {\n font-size: 2.66667vw;\n color: #879099;\n}\n\n:host .quark-uploader-preview-item {\n position: relative;\n box-sizing: border-box;\n width: var(--uploader-width, 24.8vw);\n height: var(--uploader-height, 24.8vw);\n margin: 0 var(--uploader-margin, 1.6vw) var(--uploader-margin, 1.6vw) 0;\n border-radius: var(--uploader-radius, 1.06667vw);\n}\n\n:host .quark-uploader-preview-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n border-radius: inherit;\n}\n\n:host .quark-uploader-preview-item .quark-uploader-remove {\n display: inline-block;\n position: absolute;\n top: var(--uploader-delete-top, 1px);\n right: var(--uploader-delete-right, 1px);\n width: var(--uploader-delete-wrap-width, 3.73333vw);\n height: var(--uploader-delete-wrap-height, 3.73333vw);\n background: var(--uploader-delete-background, rgb(0 0 0));\n border-bottom-left-radius: var(--uploader-delete-left-radius, 3.2vw);\n display: flex;\n justify-content: flex-end;\n cursor: pointer;\n}\n\n:host .quark-uploader-preview-item quark-icon-close {\n color: var(--uploader-delete-color, #fff);\n font-size: var(--uploader-delete-size, 2.66667vw);\n}\n\n:host .uploading {\n position: absolute;\n width: var(--uploader-width, 24.8vw);\n height: var(--uploader-height, 24.8vw);\n border-radius: var(--uploader-radius, 1.06667vw);\n background: var(--uploader-mask-background, rgba(50, 50, 51, 0.88));\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n}\n\n:host .uploading-text {\n font-size: var(--uploader-mask-font-size, 2.66667vw);\n color: var(--uploader-mask-color, #fff);\n}\n:host .uploader-disabled {\n opacity: var(--uploader-disabled-opacity, .5);\n cursor: not-allowed;\n pointer-events: none;\n}"})],x);export{j as default};