@fewangsit/wangsvue-fats 1.0.0-alpha.42 → 1.0.0-alpha.43

package/components/imagecompressor/ImageCompressor-C_vnTwmo.system.js

@@ -0,0 +1 @@
+System.register(["../invisiblefield/InvisibleField-BHudtX2g.system.js","vue","../../vendor/vee-validate-Cc_B-qII.system.js","../../vendor/vue-advanced-cropper-NG93jHnU.system.js","../../async-components/index-DvjqHrYE.system.js","../../plugins/WangsVue-Dugc3GRS.system.js","../../utils/genPlaceholder.util-CxMG7LbT.system.js","../image/Image-Cxi0E9gK.system.js","../button/Button-D892iaxz.system.js","../dialog/Dialog-Dv7Jzg4E.system.js","../dialogconfirm/DialogConfirm-BU-LRZCo.system.js","../fieldwrapper/FieldWrapper-Dc-stQRH.system.js","../icon/Icon-D1a666FC.system.js","../validatormessage/ValidatorMessage-VVfyqlRF.system.js","./ImageInputInfo-U3hLlbwo.system.js"],function(q,De){"use strict";var J,ie,Q,ue,ce,de,me,g,P,ve,pe,X,V,h,d,x,m,I,$,U,F,C,fe,y,ge,ye,be,we,he,Ie,Ce,A,Be,ke,Pe,Y,Me,ee;return{setters:[t=>{J=t._},t=>{ie=t.defineComponent,Q=t.mergeModels,ue=t.defineAsyncComponent,ce=t.inject,de=t.onMounted,me=t.onUnmounted,g=t.ref,P=t.shallowRef,ve=t.useModel,pe=t.reactive,X=t.computed,V=t.watch,h=t.createElementBlock,d=t.openBlock,x=t.Fragment,m=t.createVNode,I=t.normalizeClass,$=t.withCtx,U=t.createElementVNode,F=t.createBlock,C=t.createCommentVNode,fe=t.renderList,y=t.unref},t=>{ge=t.u},t=>{ye=t.f},t=>{be=t.i},t=>{we=t.u},t=>{he=t.g,Ie=t.a},t=>{Ce=t.default},t=>{A=t._},t=>{Be=t.default},t=>{ke=t.default},t=>{Pe=t.default},t=>{Y=t.default},t=>{Me=t._},t=>{ee=t._}],execute:function(){q("g",je);var t=q("c",typeof globalThis<"u"?globalThis:typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{});function je(v){return v&&v.__esModule&&Object.prototype.hasOwnProperty.call(v,"default")?v.default:v}var ae={exports:{}};(function(v,K){(function(){function W(te,T){T=T||"";for(var a=1024,B=window.atob(te),M=[],u=0,le=B.length;u<le;u+=a){for(var j=B.slice(u,u+a),b=new Array(j.length),r=0;r<j.length;r++)b[r]=j.charCodeAt(r);var G=new Uint8Array(b);M.push(G)}return new Blob(M,{type:T})}v.exports&&(K=v.exports=W),K.base64ToBlob=W}).call(t)})(ae,ae.exports);var Le=ae.exports;const Ve=je(Le);q("I",Object.freeze(Object.defineProperty({__proto__:null,default:J},Symbol.toStringTag,{value:"Module"})));const $e={key:1,class:"flex gap-1 items-start"},Te=["id","multiple"];q("a",Object.freeze(Object.defineProperty({__proto__:null,default:ie({__name:"ImageCompressor",props:Q({initialName:{},multiple:{type:Boolean},defaultImage:{},disabled:{type:Boolean,default:!1},compressedBlob:{default:void 0},imagePreviewUrl:{default:void 0},imagePreviewSize:{default:"big"},rounded:{type:Boolean,default:!1},useDeleteButton:{type:Boolean,default:!0},useValidator:{type:Boolean,default:!1},mandatory:{type:Boolean,default:!1},invalid:{type:Boolean},validatorMessage:{default:"Photo must be uploaded"},label:{default:void 0},fieldName:{default:"imageInput"},fieldInfo:{default:void 0},showInfo:{type:Boolean,default:!0},customRequirements:{default:void 0},confirmOnDelete:{type:Boolean},emitDeleteFn:{type:Boolean},showValidatorMessage:{type:Boolean,default:!0},fileType:{default:"webp"}},{defaultImage:{default:0},defaultImageModifiers:{}}),emits:Q(["apply","applyProp","update:defaultImage","delete"],["update:defaultImage"]),setup(v,{expose:K,emit:W}){const te=ue(()=>De.import("./BackgroundImageCropper-DhrTpgNX.system.js")),T=ce("preset",{}).image,a=v,B=W,{locale:M}=we("ImageCompressor");de(async()=>{qe(),R()}),me(()=>{D(0),D(1)});const u=g([{src:null,type:null},{src:null,type:null}]),le=Ie(),j=g(),b=g(),r=g([]),G=g(),Ue=P(0),se=g(),_=g(),p=P(),H=ve(v,"defaultImage"),n=pe({value:a.multiple?[]:void 0}),S=P(!1),k=P(),_e=P(0),w=P(!1),oe=g([!1,!1]),z=X(()=>`image/${a.fileType}`),re=e=>typeof r.value[e]=="string"&&r.value[e].includes("data:image/png;base64"),R=async()=>{var e,l;(e=a.imagePreviewUrl)!=null&&e.length?r.value=Array.isArray(a.imagePreviewUrl)?a.imagePreviewUrl:[a.imagePreviewUrl]:Array.isArray(a.compressedBlob)?r.value=a.compressedBlob:a.compressedBlob?r.value=[a.compressedBlob]:a.initialName?(j.value=he(a.initialName,125,le),r.value=[(l=j.value)==null?void 0:l.toDataURL()]):r.value=[],a.imagePreviewUrl?n.value=a.imagePreviewUrl:a.initialName&&(n.value=await Oe()),B("applyProp")},Oe=async()=>new Promise(e=>{var l;(l=j.value)==null||l.toBlob(o=>{e(new File([o??new Blob],Date.now()+".png",{type:"image/png"}))})}),O=(e=!1)=>{var l;a.disabled||(e&&(p.value=1),(l=G.value)==null||l.click())},Ne=async e=>{const{files:l}=e.target,o=Array.from(l??[]).slice(0,r.value.length?1:2);for(const[s,c]of o.entries())try{const i=p.value??s;await Ee(c,i)}catch(i){console.error("Error loading image:",i)}finally{p.value=void 0}},Ee=async(e,l)=>{const o=c=>c.includes("image"),s=c=>c>1e6;return new Promise((c,i)=>{var N,L;if(e)if(Fe(l),!o(e.type))S.value=!0,k.value=typeof a.validatorMessage!="string"&&((N=a.validatorMessage)!=null&&N.invalidFormat)?a.validatorMessage.invalidFormat:"Tipe file harus berupa gambar!",R(),w.value=!1,D(l),i("Tipe file harus berupa gambar!");else if(s(e.size))S.value=!0,k.value=typeof a.validatorMessage!="string"&&((L=a.validatorMessage)!=null&&L.exceed)?a.validatorMessage.exceed:"Ukuran gambar terlalu besar! Maks. 1 MB",R(),w.value=!1,D(l),i("Ukuran gambar terlalu besar! Maks. 1 MB");else{D(l);const Z=URL.createObjectURL(e),f=new FileReader;f.onload=E=>{var Re;u.value[l].src=Z,u.value[l].type=xe((Re=E==null?void 0:E.target)==null?void 0:Re.result,e.type)},f.onerror=E=>{console.error("🚀 ~ returnnewPromise ~ e:",E)},f.readAsArrayBuffer(e),p.value==null&&(p.value=l),w.value||(w.value=!0),S.value=!1,k.value=void 0}_e.value+=1,_.value=c})},qe=()=>{a.useValidator&&Object.assign(n,ge(a.fieldName,e=>{var l;return!e&&a.mandatory?typeof a.validatorMessage!="string"&&((l=a.validatorMessage)!=null&&l.empty)?a.validatorMessage.empty:(a.label??"Photo")+" must be uploaded":a.invalid&&a.validatorMessage?a.validatorMessage:k.value?k.value:!0}))},Fe=e=>{u.value[e]={src:null,type:null}},xe=(e,l=null)=>{if(e){const o=new Uint8Array(e).subarray(0,4);let s="";for(const c of o)s+=c.toString(16);switch(s){case"89504e47":return"image/png";case"47494638":return"image/gif";case"ffd8ffe0":case"ffd8ffe1":case"ffd8ffe2":case"ffd8ffe3":case"ffd8ffe8":return z.value;default:return l}}return null},Ae=e=>{const l=Ve(e.split(",")[1],z.value);return window.URL.createObjectURL(l)},Ke=async(e,l)=>{const o=await fetch(e).then(s=>s.blob());return new File([o],l,{type:z.value})},We=async()=>{const e=p.value??0;try{await Ge(e)}catch(l){console.error(l)}Se()},Se=()=>{var e;w.value=!1,(e=_.value)==null||e.call(_),_.value=void 0},Ge=async e=>{if(se.value){const l=se.value.getResult();if(l.canvas){const o=l.canvas.toDataURL(z.value);await He(o,e)}}},He=async(e,l)=>{try{b.value=document.createElement("canvas");const o=b.value.getContext("2d"),s=new Image;s.src=e,await s.decode();const c=80/100,i=s.width*c,N=s.height*c;b.value.setAttribute("width",i.toString()),b.value.setAttribute("height",N.toString()),o&&o.drawImage(s,0,0,i,N);const L=b.value.toDataURL(z.value,.95),Z=Date.now()+`.${a.fileType}`,f={canvas:b.value,compressed:{blob:Ae(L),base64:L,fileName:Z,file:await Ke(Ae(L),Z),size:"",type:z.value},message:"File has been compressed."};f.compressed.size=Math.round(f.compressed.file.size/1e3)+"KB",r.value[l]=f.compressed.blob,a.multiple?n.value&&Array.isArray(n.value)?n.value[l]=f.compressed.file:n.value=[f.compressed.file]:n.value=f.compressed.file,B("apply",f)}catch(o){console.error(o)}},D=e=>{u.value[e].src&&URL.revokeObjectURL(u.value[e].src)},Ze=e=>{a.confirmOnDelete?oe.value[e]=!0:a.emitDeleteFn?B("delete",ne,e):ne(e)},ne=(e=0)=>{S.value=!1,k.value=void 0,r.value=r.value.toSpliced(e,1),D(e),u.value[e]={src:null,type:null},u.value=[u.value[+!e],u.value[e]],p.value=0,H.value=0,a.confirmOnDelete||B("delete"),a.multiple&&Array.isArray(n.value)?n.value=n.value.toSpliced(e,1):n.handleReset&&n.handleReset()},Je=e=>{var o;const l=(o=r.value[e])==null?void 0:o.toString();p.value=e,l!=null&&l.includes("blob")?(p.value=e,w.value=!0):(Fe(e),O())},Qe=()=>{O()},ze=X(()=>navigator.userAgent.includes("Firefox"));return V(k,e=>{e&&n.setErrors&&n.setErrors(e)}),V(w,e=>{e||Ue.value++}),V(()=>a.initialName,()=>{R()}),V(()=>a.imagePreviewUrl,()=>{R()},{once:!0}),K({assignPreviewImagesFromProp:R}),(e,l)=>(d(),h(x,null,[m(Pe,{class:I([{"!w-max":!a.multiple,"!w-full":a.multiple}]),info:a.fieldInfo,label:a.label,mandatory:a.mandatory,"data-wv-name":"image-compressor","data-wv-section":"root"},{default:$(()=>[U("div",{class:I(["w-full",{"grid gap-6 items-start grid-cols-2":e.multiple}]),"data-wv-section":"wrapper"},[r.value.length?(d(!0),h(x,{key:0},fe(r.value,(o,s)=>{var c;return d(),h("div",{key:s,class:"flex gap-1 items-start","data-wv-section":"preview"},[U("div",{class:I(["flex flex-col gap-1 items-center",{"max-w-[80px]":e.imagePreviewSize==="medium"},{"max-w-[125px]":e.imagePreviewSize==="big"}]),"data-wv-section":"preview-image-wrapper"},[U("div",{class:I([{"[&>span]:hover:opacity-30 [&>[data-wv-section=input-image-trigger]]:hover:opacity-100":re(s)},"relative",{"w-[125px] h-[125px]":e.imagePreviewSize==="big","w-[30px] h-[30px]":e.imagePreviewSize==="small","w-[80px] h-[80px]":e.imagePreviewSize==="medium"}]),"data-wv-section":"image-wrapper"},[m(Ce,{rounded:e.rounded,size:e.imagePreviewSize,src:o,class:"transition-opacity duration-300","data-wv-section":"preview-image"},null,8,["rounded","size","src"]),re(s)?(d(),h("button",{key:0,class:I([(c=y(T))==null?void 0:c.button.class,"hover:bg-opacity-0 rounded-lg opacity-0"]),onClick:l[0]||(l[0]=i=>O(!1)),"data-wv-section":"input-image-trigger",type:"button"},[m(Y,{class:"w-6 h-6","data-wv-section":"trigger-icon",icon:"image-add",severity:"primary"})],2)):C("",!0)],2),!a.disabled&&!re(s)?(d(),h(x,{key:0},[U("div",{class:I(["flex gap-0.5 justify-center",{"scale-75":e.imagePreviewSize==="medium"}]),"data-wv-section":"preview-buttons"},[m(A,{onClick:i=>Je(s),class:"!py-0 !px-1 !h-max",icon:"pencil",label:"Edit",text:""},null,8,["onClick"]),e.useDeleteButton?(d(),F(A,{key:0,onClick:i=>Ze(s),class:"!py-0 !px-1 !h-max",icon:"delete-bin",label:"Delete",severity:"danger",text:""},null,8,["onClick"])):C("",!0)],2),m(ke,{visible:oe.value[s],"onUpdate:visible":i=>oe.value[s]=i,closable:!1,onConfirm:i=>B("delete",ne,s),body:"Are you sure you want to delete it?","confirm-label":"Delete",header:"Delete Photo",severity:"danger"},null,8,["visible","onUpdate:visible","onConfirm"])],64)):C("",!0)],2),m(ee,{"custom-requirements":e.customRequirements,"show-add-button":r.value.length===1&&a.multiple,"show-info":e.showInfo,onAddPhoto:l[2]||(l[2]=i=>O(!0))},{default:$(()=>[r.value.length===2&&a.multiple?(d(),F(y(be),{key:0,modelValue:H.value,"onUpdate:modelValue":l[1]||(l[1]=i=>H.value=i),"label-id":"default-"+s,value:s,label:"Set as default"},null,8,["modelValue","label-id","value"])):C("",!0)]),_:2},1032,["custom-requirements","show-add-button","show-info"])])}),128)):(d(),h("div",$e,[U("button",{class:I([{"w-[125px] h-[125px]":e.imagePreviewSize==="big","w-[30px] h-[30px]":e.imagePreviewSize==="small","w-[80px] h-[80px]":e.imagePreviewSize==="medium"},"flex items-center justify-center","ring-inset","cursor-pointer",{"ring-1":ze.value,"ring-[0.5px]":!ze.value},{"rounded-full":e.rounded,"rounded-lg":!e.rounded},{"ring-general-400 focus-visible:ring-primary-500":!S.value&&!n.errorMessage,"ring-danger-500":S.value||n.errorMessage},{"bg-white":!a.disabled,"bg-general-50":a.disabled}]),onClick:l[3]||(l[3]=o=>O(!1)),"data-wv-section":"input-image-trigger",type:"button"},[m(Y,{class:"w-6 h-6","data-wv-section":"trigger-icon",icon:"image-add",severity:"primary"})],2),m(ee,{"custom-requirements":e.customRequirements,"show-info":e.showInfo},null,8,["custom-requirements","show-info"])]))],2),(d(),h("input",{id:e.fieldName,key:Ue.value,ref_key:"inputImageFile",ref:G,multiple:a.multiple&&!r.value.length,onChange:Ne,accept:"image/*",class:"hidden","data-wv-section":"hidden-image-input",type:"file"},null,40,Te)),e.showValidatorMessage?(d(),F(Me,{key:0,format:!1,message:n.errorMessage??k.value},null,8,["message"])):C("",!0),a.multiple?(d(),F(J,{key:1,value:H.value?"secondImage":"firstImage","field-name":"defaultImage"},null,8,["value"])):C("",!0)]),_:1},8,["class","info","label","mandatory"]),m(Be,{visible:w.value,"onUpdate:visible":l[4]||(l[4]=o=>w.value=o),draggable:!1,header:y(M).cropDialogHeader,class:"w-max max-w-[98vw] min-w-[min(500px,98vw)] !max-h-[94vh]","content-class":"overflow-hidden overflow-y-auto min-h-[100px]","data-wv-section":"dialog-cropper","footer-class":"!gap-1",modal:""},{footer:$(()=>[m(A,{label:y(M).cancelCropLabel,onClick:Se,"data-wv-section":"cancel-crop",severity:"secondary",text:"",type:"button"},null,8,["label"]),m(A,{label:y(M).changeImageLabel,onClick:Qe,"data-wv-section":"change-image-button",text:"",type:"button"},null,8,["label"]),m(A,{label:y(M).applyCropLabel,onClick:We,"data-wv-section":"apply-image-button",severity:"success",type:"button"},null,8,["label"])]),default:$(()=>[p.value!=null?(d(),F(y(ye),{key:0,ref_key:"vueAdvanceCropper",ref:se,"auto-zoom":!1,"background-wrapper-component":y(te),src:u.value[p.value].src,class:"upload-example-cropper h-400","foreground-class":"h-400","image-class":"h-400"},null,8,["background-wrapper-component","src"])):C("",!0)]),_:1},8,["visible","header"])],64))}})},Symbol.toStringTag,{value:"Module"})))}}});