quarkd
Version:
Mobile UI Components built on Web Components.
2 lines (1 loc) • 6.48 kB
JavaScript
import{_ as e,a as r}from"../typeof.js";import{_ as o,a as n,b as t,c as a,P as i,H as l,A as d,d as s,N as u,O as p,B as c}from"../index2.js";import{_ as v}from"../defineProperty.js";import"../index8.js";import"../index4.js";import f from"../imagepreview/index.js";import"../loading/index.js";import"../grid/index.js";import"../index22.js";import"../index7.js";import"../core.esm.js";import"../popup/index.js";import"../bodyScrollLock.esm.js";import"../public.js";function h(e){var r=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 t,a=o(e);if(r){var i=o(this).constructor;t=Reflect.construct(a,arguments,i)}else t=a.apply(this,arguments);return n(this,t)}}var m=function(o){t(s,l);var n=h(s);function s(){var r;e(this,s);for(var o=arguments.length,t=new Array(o),l=0;l<o;l++)t[l]=arguments[l];return r=n.call.apply(n,[this].concat(t)),v(a(r),"id",""),v(a(r),"name",""),v(a(r),"iconcolor","#ccc"),v(a(r),"hidedelete",!1),v(a(r),"disabled",!1),v(a(r),"readonly",!1),v(a(r),"maxcount",999),v(a(r),"maxsize","26214400"),v(a(r),"tasks",[]),v(a(r),"fId",0),v(a(r),"hiddenUpload",!1),v(a(r),"inputRef",i()),v(a(r),"beforeUpload",null),v(a(r),"beforeDelete",null),v(a(r),"values",[]),v(a(r),"previewStatus",!1),v(a(r),"previewInstance",null),v(a(r),"onAfterRead",(function(){var e=r.tasks.map((function(e){return e.url}));r.$emit("onread",{detail:e})})),v(a(r),"setPreview",(function(e){var o=e.map((function(e,r){return{status:"done",message:"",id:r,url:e}})).slice(0,r.maxcount);r.tasks=o,r.values=o,r.fId=e.length})),v(a(r),"onRemove",(function(e,o,n){if(!r.beforeDelete||"function"==typeof r.beforeDelete&&r.beforeDelete(o,{index:n})){e.stopPropagation();var t=r.tasks.filter((function(e){return e.id!==o.id}));r.tasks=t,r.values=t,r.$emit("onremove",{detail:o})}})),v(a(r),"myImagePreview",(function(e,o){if(!r.previewStatus){r.previewStatus=!0;var n=e.map((function(e){return e.url||e.content||""}));r.previewInstance=f({images:n,startPosition:o}),r.previewStatus=!1}})),r}return r(s,[{key:"closePreview",value:function(){this.previewInstance&&this.previewInstance.close()}},{key:"render",value:function(){var e=this,r=this.tasks.length>=Number(this.maxcount),o=this.tasks.slice(0,this.maxcount);return l.h(d,null,!(this.readonly||r)&&l.h("div",{class:"quark-uploader",part:"uploader"},l.h("slot",{name:"uploader"},l.h("div",{class:"quark-uploader-icon",part:"uploader-icon",onClick:this.onAfterRead},l.h("quark-icon-camera-fill",{part:"uploader-icon-camera",size:"32",color:this.iconcolor})))),o.map((function(r,o,n){return l.h("div",{class:"quark-uploader-preview-item",part:"item",key:r.id,onClick:function(){return e.myImagePreview(n,o)}},"uploading"===r.status&&l.h("div",{class:"uploading",slot:"uploading",part:"uploading"},l.h("quark-loading",{part:"uploading-icon",type:"circular",color:"#fff"}),l.h("span",{class:"uploading-text",part:"uploading-text"},r.message)),l.h("img",{src:r.url||r.content,part:"img"}),!e.hidedelete&&!e.readonly&&l.h("span",{class:"quark-uploader-remove",part:"remove",onClick:function(n){return e.onRemove(n,r,o)}},l.h("quark-icon-close",{part:"remove-close-icon"})))})))}}]),s}();s([u()],m.prototype,"id",void 0),s([u()],m.prototype,"name",void 0),s([u()],m.prototype,"iconcolor",void 0),s([u({type:Boolean})],m.prototype,"hidedelete",void 0),s([u({type:Boolean})],m.prototype,"disabled",void 0),s([u({type:Boolean})],m.prototype,"readonly",void 0),s([u()],m.prototype,"maxcount",void 0),s([u()],m.prototype,"maxsize",void 0),s([p()],m.prototype,"tasks",void 0),s([p()],m.prototype,"fId",void 0),s([p()],m.prototype,"hiddenUpload",void 0);var g=m=s([c({tag:"quark-native-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 margin: 0 var(--uploader-margin, 1.6vw) var(--uploader-margin, 1.6vw) 0;\n}\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);\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-remove {\n display: inline-block;\n position: absolute;\n top: 1px;\n 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: 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(--van-uploader-mask-font-size, 2.66667vw);\n color: var(--van-uploader-mask-color, #fff);\n}\n"})],m);export{g as default};