@farris/ui-vue 1.0.0-beta.5 → 1.0.0

package/image-cropper/index.umd.js

@@ -0,0 +1 @@
+(function(E,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(E=typeof globalThis<"u"?globalThis:E||self,i(E["image-cropper"]={},E.Vue))})(this,function(E,i){"use strict";const me={format:{type:String,default:"png"},maintainAspectRatio:{type:Boolean,default:!0},transform:{type:Object,default:{scale:0,rotate:0,flipH:!1,flipV:!1}},aspectRatio:{type:Number,default:1},resizeToWidth:{type:Number,default:0},resizeToHeight:{type:Number,default:0},cropperMinWidth:{type:Number,default:0},cropperMinHeight:{type:Number,default:0},canvasRotation:{type:Number,default:0},roundCropper:{type:Boolean,default:!0},onlyScaleDown:{type:Boolean,default:!1},imageQuality:{type:Number,default:92},autoCrop:{type:Boolean,default:!0},backgroundColor:{type:String,default:""},containWithinAspectRatio:{type:Boolean,default:!1},hideResizeSquares:{type:Boolean,default:!1},loadImageErrorText:{type:String,default:"图片加载错误"},alignImage:{type:String,default:"center"},disabled:{type:Boolean,default:!1},imageURL:{type:String,default:""},imageChangedEvent:{type:Object,default:null},imageBase64:{type:String,default:""},imageFile:{type:Object,default:null},cropper:{type:Object,default:{x1:-100,y1:-100,x2:1e4,y2:1e4}}};var ae=(a=>(a.Move="move",a.Resize="resize",a))(ae||{});function Ve(){function a(v){switch(typeof v=="string"&&(v=M(v)),v){case 2:return{rotate:0,flip:!0};case 3:return{rotate:2,flip:!1};case 4:return{rotate:2,flip:!0};case 5:return{rotate:1,flip:!0};case 6:return{rotate:1,flip:!1};case 7:return{rotate:3,flip:!0};case 8:return{rotate:3,flip:!1};default:return{rotate:0,flip:!1}}}function M(v){const t=new DataView(o(v));if(t.getUint16(0,!1)!==65496)return-2;const g=t.byteLength;let c=2;for(;c<g;){if(t.getUint16(c+2,!1)<=8)return-1;const p=t.getUint16(c,!1);if(c+=2,p===65505){if(t.getUint32(c+=2,!1)!==1165519206)return-1;const y=t.getUint16(c+=6,!1)===18761;c+=t.getUint32(c+4,y);const _=t.getUint16(c,y);c+=2;for(let V=0;V<_;V++)if(t.getUint16(c+V*12,y)===274)return t.getUint16(c+V*12+8,y)}else{if((p&65280)!==65280)break;c+=t.getUint16(c,!1)}}return-1}function o(v){v=v.replace(/^data:([^;]+);base64,/gmi,"");const t=atob(v),g=t.length,c=new Uint8Array(g);for(let p=0;p<g;p++)c[p]=t.charCodeAt(p);return c.buffer}function Y(v,t,g){const c=v.width,p=v.height;t=Math.round(t),g=Math.round(g);const y=c/t,_=p/g,V=Math.ceil(y/2),u=Math.ceil(_/2),n=v.getContext("2d");if(n){const T=n.getImageData(0,0,c,p),C=n.createImageData(t,g),{data:P}=T,Q=C.data;for(let S=0;S<g;S++)for(let B=0;B<t;B++){const F=(B+S*t)*4,oe=S*_;let W=0,$=0,R=0,A=0,U=0,ie=0,h=0;const d=Math.floor(B*y),X=Math.floor(S*_);let K=Math.ceil((B+1)*y),G=Math.ceil((S+1)*_);K=Math.min(K,c),G=Math.min(G,p);for(let x=X;x<G;x++){const le=Math.abs(oe-x)/u,I=B*y,ne=le*le;for(let j=d;j<K;j++){const J=Math.abs(I-j)/V,w=Math.sqrt(ne+J*J);if(w>=1)continue;W=2*w*w*w-3*w*w+1;const f=4*(j+x*c);h+=W*P[f+3],R+=W,P[f+3]<255&&(W=W*P[f+3]/250),A+=W*P[f],U+=W*P[f+1],ie+=W*P[f+2],$+=W}}Q[F]=A/$,Q[F+1]=U/$,Q[F+2]=ie/$,Q[F+3]=h/R}v.width=t,v.height=g,n.putImageData(C,0,0)}}return{resizeCanvas:Y,getTransformationsFromExifData:a}}function Te(a,M,o,Y){function v(u,n){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function t(u,n){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function g(u,n){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,u=Math.max(0-a.value.x1,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x1+=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function c(u,n){a.value.y1=a.value.y2-(a.value.x2-a.value.x1)/o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(0-a.value.y1,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y1+=n*o.value>u?n:u/o.value)}function p(u,n){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,u=Math.max(a.value.x2-M.value.width,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x2-=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function y(u,n){a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value,u=Math.max(0-a.value.x1,0),n=Math.max(a.value.y2-M.value.height,0),(u>0||n>0)&&(a.value.x1+=n*o.value>u?n*o.value:u,a.value.y2-=n*o.value>u?n:u/o.value)}function _(){a.value.x2=a.value.x1+(a.value.y2-a.value.y1)*o.value,a.value.y2=a.value.y1+(a.value.x2-a.value.x1)/o.value;const u=Math.max(0-a.value.x1,0),n=Math.max(a.value.x2-M.value.width,0),T=Math.max(a.value.y2-M.value.height,0),C=Math.max(0-a.value.y1,0);(u>0||n>0||T>0||C>0)&&(a.value.x1+=T*o.value>u?T*o.value:u,a.value.x2-=C*o.value>n?C*o.value:n,a.value.y1+=C*o.value>n?C:n/o.value,a.value.y2-=T*o.value>u?T:u/o.value)}function V(){if(M.value.width&&M.value.height)switch(Y.position){case"top":v(0,0);break;case"bottom":t(0,0);break;case"topleft":g(0,0);break;case"topright":c(0,0);break;case"right":case"bottomright":p(0,0);break;case"left":case"bottomleft":y(0,0);break;case"center":_();break}}return{checkAspectRatio:V}}const at="",se=i.defineComponent({name:"FImageCropper",props:me,emits:["imageCropped","imageLoaded","cropperReady","loadImageFailed"],setup(a,M){const{resizeCanvas:o,getTransformationsFromExifData:Y}=Ve(),v=i.inject("NotifyService"),t=i.ref(a.cropper),g=i.ref(a.transform),c=i.ref(a.cropperMinWidth),p=i.ref(a.maintainAspectRatio),y=i.ref(a.aspectRatio),_=i.ref(a.autoCrop),V=i.ref(a.backgroundColor),u=i.ref(a.resizeToWidth),n=i.ref(a.onlyScaleDown),T=i.ref(a.containWithinAspectRatio),C=i.ref(a.canvasRotation),P=i.ref(a.format),Q=i.ref(a.imageQuality),S=i.ref(a.resizeToHeight),B=i.ref(a.cropperMinHeight),F=i.ref(a.alignImage),oe=i.ref(a.roundCropper),W=i.ref(a.hideResizeSquares),$=i.ref(a.loadImageErrorText),R=i.ref(""),A=i.ref(!0),U=i.ref(!0),ie=i.ref(a.disabled);let h,d,X=0,K,G,x;const le=i.ref(null),I=i.ref(null),ne=i.ref(""),j=i.ref(""),J=i.ref("0px"),w=i.ref(),f=i.ref({width:100,height:100}),L=ae;let ye,k=20,z=20,H=!1,O={rotate:0,flip:!1},r={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0};const xe=i.ref(a.imageChangedEvent),re=i.ref(a.imageURL),We=i.ref(a.imageBase64),ke=i.ref(a.imageFile);function He(){j.value="scaleX("+(g.value.scale||1)*(g.value.flipH?-1:1)+")scaleY("+(g.value.scale||1)*(g.value.flipV?-1:1)+")rotate("+(g.value.rotate||0)+"deg)"}function ee(){U.value=!1,w.value=null,R.value="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=",r={active:!1,type:null,position:null,x1:0,y1:0,x2:0,y2:0,clientX:0,clientY:0},f.value={width:0,height:0},h={width:0,height:0},d={width:0,height:0},t.value.x1=-100,t.value.y1=-100,t.value.x2=1e4,t.value.y2=1e4}function _e(e){return/image\/(png|jpg|jpeg|bmp|gif|tiff|webp)/.test(e)}function Se(){if(C.value+=O.rotate,T.value&&h.width&&h.height){if(C.value%2){const s=h.width*y.value,m=h.height/y.value;return{width:Math.max(h.height,s),height:Math.max(h.width,m)}}const e=h.height*y.value,l=h.width/y.value;return{width:Math.max(h.width,e),height:Math.max(h.height,l)}}return C.value%2?{height:h.width,width:h.height}:{width:h.width,height:h.height}}function Ue(){C.value+=O.rotate;const e=Se(),l=document.createElement("canvas");e.width&&e.height&&(l.width=e.width,l.height=e.height);const s=l.getContext("2d");return h.width&&h.height&&x&&(s==null||s.setTransform(O.flip?-1:1,0,0,1,l.width/2,l.height/2),s==null||s.rotate(Math.PI*(C.value/2)),s==null||s.drawImage(x,-h.width/2,-h.height/2)),l.toDataURL()}function Ee(e){return new Promise(l=>{ye=e,R.value=e,w.value=new Image,w.value.onload=()=>{var s,m;d.width=(s=w.value)==null?void 0:s.naturalWidth,d.height=(m=w.value)==null?void 0:m.naturalHeight,l()},w.value.src=ye})}function Me(){if(!x||!x.complete||!O)return Promise.reject(new Error("No image loaded"));const e=Ue();return Ee(e)}function fe(e){const l=s=>{v.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片上传错误，请重试"}]}),A.value=!1,H=!0,M.emit("loadImageFailed"),x=null,ne.value=""};x=new Image,x.onload=()=>{ne.value=e,O=Y(e),h.width=x==null?void 0:x.naturalWidth,h.height=x==null?void 0:x.naturalHeight,Me().then(()=>{H=!1}).catch(l)},x.onerror=l,x.src=e}function Be(e,l){_e(l)?(H=!1,fe(e)):(v.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片类型不正确,请重试"}]}),A.value=!1,H=!0,M.emit("loadImageFailed"))}function we(e){const l=new FileReader;l.onload=s=>Be(s.target.result,e.type),l.readAsDataURL(e)}function pe(e){const l=new Image;l.onerror=()=>{v.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载错误，请重试"}]}),A.value=!1,H=!0,M.emit("loadImageFailed")},l.onload=()=>{H=!1;const s=document.createElement("canvas"),m=s.getContext("2d");s.width=l.width,s.height=l.height,m==null||m.drawImage(l,0,0),fe(s.toDataURL())},l.crossOrigin="anonymous",l.src=e}function Le(){return I.value&&I.value&&I.value.offsetWidth>0}function he(){if(I.value){const e=I.value;f.value.width=e.offsetWidth,f.value.height=e.offsetHeight,J.value="calc(50% - "+f.value.width/2+"px)"}}function De(){w.value&&f.value.width&&(k=c.value>0?Math.max(20,c.value/w.value.width*f.value.width):20)}function Pe(){p.value?z=Math.max(20,k/y.value):B.value>0&&w.value&&f.value.height?z=Math.max(20,B.value/w.value.height*f.value.height):z=20}function ce(){w.value?(De(),Pe()):(k=20,z=20)}function Fe(){const e=I.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(e&&d.width&&d.height){const s=d.width/e.offsetWidth;l.value={x1:Math.round(t.value.x1*s),y1:Math.round(t.value.y1*s),x2:Math.round(t.value.x2*s),y2:Math.round(t.value.y2*s)},T.value||(l.value.x1=Math.max(l.value.x1,0),l.value.y1=Math.max(l.value.y1,0),l.value.x2=Math.min(l.value.x2,d.width),l.value.y2=Math.min(l.value.y2,d.height))}return l.value}function qe(){C.value+=O.rotate;const e=I.value,l=i.ref({x1:0,x2:0,y1:0,y2:0});if(e&&d.height&&d.width&&h.height&&h.width){const s=d.width/e.offsetWidth;let m,b;C.value%2?(m=(d.width-h.height)/2,b=(d.height-h.width)/2):(m=(d.width-h.width)/2,b=(d.height-h.height)/2),l.value={x1:Math.round(t.value.x1*s)-m,y1:Math.round(t.value.y1*s)-b,x2:Math.round(t.value.x2*s)-m,y2:Math.round(t.value.y2*s)-b},T.value||(l.value.x1=Math.max(l.value.x1,0),l.value.y1=Math.max(l.value.y1,0),l.value.x2=Math.min(l.value.x2,d.width),l.value.y2=Math.min(l.value.y2,d.height))}return l.value}function Re(e,l){if(u.value>0){if(!n.value||e>u.value)return u.value/e}else if(S.value>0&&(!n.value||l>S.value))return S.value/l;return 1}function je(){return Math.min(1,Math.max(0,Q.value/100))}function Oe(e){return e.toDataURL("image/"+P.value,je())}function Qe(){if(I.value&&I.value&&w.value!=null){const e=Fe(),l=e.x2-e.x1,s=e.y2-e.y1,m=document.createElement("canvas");m.width=l,m.height=s;const b=m.getContext("2d");if(b){V.value!=null&&(b.fillStyle=V.value,b.fillRect(0,0,l,s));const q=(g.value.scale||1)*(g.value.flipH?-1:1),Z=(g.value.scale||1)*(g.value.flipV?-1:1);d.width&&d.height&&(b.setTransform(q,0,0,Z,d.width/2,d.height/2),b.translate(-e.x1/q,-e.y1/Z),b.rotate((g.value.rotate||0)*Math.PI/180),b.drawImage(w.value,-d.width/2,-d.height/2));const N={width:l,height:s,imagePosition:e,cropperPosition:{...t.value}};T.value&&(N.offsetImagePosition=qe());const te=Re(l,s);return te!==1&&(N.width=Math.round(l*te),N.height=p.value?Math.round(N.width/y.value):Math.round(s*te),o(m,N.width,N.height)),N.base64=Oe(m),M.emit("imageCropped",N),N}}return null}function ue(){_.value&&Qe()}function be(){const e=I.value;if(e){if(!p.value)t.value.x1=0,t.value.x2=e.offsetWidth,t.value.y1=0,t.value.y2=e.offsetHeight;else if(e.offsetWidth/y.value<e.offsetHeight){t.value.x1=0,t.value.x2=e.offsetWidth;const l=e.offsetWidth/y.value;t.value.y1=(e.offsetHeight-l)/2,t.value.y2=t.value.y1+l}else{t.value.y1=0,t.value.y2=e.offsetHeight;const l=e.offsetHeight*y.value;t.value.x1=(e.offsetWidth-l)/2,t.value.x2=t.value.x1+l}ue(),U.value=!0}}function Ce(){X>40?(v.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片加载超时，请重试"}]}),H=!0,A.value=!1,M.emit("loadImageFailed")):Le()?(H=!1,he(),ce(),be(),M.emit("cropperReady",{...f.value})):(X++,setTimeout(()=>Ce(),50))}function $e(){w.value!=null&&(A.value=!1,M.emit("imageLoaded"),X=0,setTimeout(()=>Ce()))}function Ke(){const e=I.value;(f.value.width!==(e==null?void 0:e.offsetWidth)||f.value.height!==(e==null?void 0:e.offsetHeight))&&f.value.width&&f.value.height&&e&&(t.value.x1=t.value.x1*e.offsetWidth/f.value.width,t.value.x2=t.value.x2*e.offsetWidth/f.value.width,t.value.y1=t.value.y1*e.offsetHeight/f.value.height,t.value.y2=t.value.y2*e.offsetHeight/f.value.height)}const Ge=()=>{Ke(),he(),ce()},Ae=()=>{clearTimeout(G),G=setTimeout(Ge,300)};i.onMounted(()=>{window.addEventListener("resize",Ae),re.value&&(ee(),A.value=!0,pe(re.value))}),i.onUnmounted(()=>{window.removeEventListener("resize",Ae)});function Ie(){r.active&&(r.active=!1,ue())}function de(e){return(e.touches&&e.touches[0]?e.touches[0].clientX:e.clientX)||0}function ve(e){return(e.touches&&e.touches[0]?e.touches[0].clientY:e.clientY)||0}function D(e,l,s=null){r&&r.active||(e.preventDefault&&e.preventDefault(),r={active:!0,type:l,position:s,clientX:de(e),clientY:ve(e),...t.value})}function ge(e=!1){t.value.x1<0&&(t.value.x2-=e?t.value.x1:0,t.value.x1=0),t.value.y1<0&&(t.value.y2-=e?t.value.y1:0,t.value.y1=0),t.value.x2>f.value.width&&(t.value.x1-=e?t.value.x2-f.value.width:0,t.value.x2=f.value.width),t.value.y2>f.value.height&&(t.value.y1-=e?t.value.y2-f.value.height:0,t.value.y2=f.value.height)}function Je(e){const l=de(e)-r.clientX,s=ve(e)-r.clientY;t.value.x1=r.x1+l,t.value.y1=r.y1+s,t.value.x2=r.x2+l,t.value.y2=r.y2+s}const{checkAspectRatio:Ze}=Te(t,f,y,r);function Ye(e){const l=de(e)-r.clientX,s=ve(e)-r.clientY;switch(r.position){case"left":t.value.x1=Math.min(r.x1+l,t.value.x2-k);break;case"topleft":t.value.x1=Math.min(r.x1+l,t.value.x2-k),t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"top":t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"topright":t.value.x2=Math.max(r.x2+l,t.value.x1+k),t.value.y1=Math.min(r.y1+s,t.value.y2-z);break;case"right":t.value.x2=Math.max(r.x2+l,t.value.x1+k);break;case"bottomright":t.value.x2=Math.max(r.x2+l,t.value.x1+k),t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"bottom":t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"bottomleft":t.value.x1=Math.min(r.x1+l,t.value.x2-k),t.value.y2=Math.max(r.y2+s,t.value.y1+z);break;case"center":const{scale:m}=e,b=Math.abs(r.x2-r.x1)*m,q=Math.abs(r.y2-r.y1)*m,{x1:Z}=t.value,{y1:N}=t.value;t.value.x1=Math.min(r.clientX-b/2,t.value.x2-k),t.value.y1=Math.min(r.clientY-q/2,t.value.y2-z),t.value.x2=Math.max(r.clientX+b/2,Z+k),t.value.y2=Math.max(r.clientY+q/2,N+z);break}p.value&&Ze()}function Ne(e){r&&r.active&&(e.stopPropagation&&e.stopPropagation(),e.preventDefault&&e.preventDefault(),clearTimeout(K),K=setTimeout(()=>{r.type===ae.Move?(Je(e),ge(!0)):r.type===ae.Resize&&(Ye(e),ge(!1))},300))}return i.watch(xe,e=>{ee(),e&&e.target&&e.target.files&&e.target.files.length>0&&(A.value=!0,we(e.target.files[0]))}),i.watch(re,e=>{e?(ee(),A.value=!0,pe(e)):(v.show({showCloseButton:!1,timeout:3e3,animate:"fadeIn",toasts:[{type:"string",title:"提示",msg:"图片路径为空"}]}),A.value=!1,H=!0)}),i.watch(We,e=>{ee(),A.value=!0,fe(e)}),i.watch(ke,e=>{ee(),e&&(A.value=!0,we(e))}),i.watch(()=>[a.containWithinAspectRatio,a.canvasRotation,a.cropper,a.aspectRatio,a.transform,a.imageChangedEvent],([e,l,s,m,b,q],[Z,N,te,Xe,et,tt])=>{x&&x.complete&&O&&(e!==Z||l!==N)&&Me(),s!==te&&(he(),ce(),ge(!1),ue()),m!==Xe&&U.value&&be(),b!==et&&(He(),ue()),q!==tt&&(xe.value=q)}),()=>i.createVNode("div",{class:["farris-image-cropper-frame",{"farris-image-cropper-disabled":ie.value}],style:{"text-align":F.value},onMousemove:i.withModifiers(e=>Ne(e),["prevent"]),onTouchmove:i.withModifiers(e=>Ne(e),["prevent"]),onMouseup:i.withModifiers(()=>Ie(),["prevent"]),onTouchend:i.withModifiers(()=>Ie(),["prevent"])},[!H&&i.createVNode("div",{ref:le,class:"farris-image-cropper",style:[{background:U.value?V.value:""}]},[R.value&&i.createVNode("img",{ref:I,class:"farris-source-image",style:[{visibility:U.value?"visible":"hidden"},{transform:j.value}],src:R.value,onLoad:()=>$e()},null),f.value&&i.createVNode("div",{class:"farris-image-overlay",style:[{width:`${f.value.width||0}px`},{height:`${f.value.height||0}px`},{"margin-left":F.value==="center"?J.value:""}]},null),U.value&&i.createVNode("div",{class:["farris-image-cropper-wrapper",{"farris-image-cropper-rounded":oe.value}],style:[{top:`${t.value.y1}px`},{left:`${t.value.x1}px`},{width:`${t.value.x2-t.value.x1}px`},{height:`${t.value.y2-t.value.y1}px`},{visibility:U.value?"visible":"hidden"},{"margin-left":F.value==="center"?J.value:""}],tabindex:"0"},[i.createVNode("div",{class:"farris-image-cropper-move",onMousedown:i.withModifiers(e=>D(e,L.Move,"topleft"),["prevent"])},null),!W.value&&i.createVNode("div",null,[i.createVNode("span",{class:"farris-image-cropper-resize topleft",onMousedown:i.withModifiers(e=>D(e,L.Resize,"topleft"),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize top"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize topright",onMousedown:i.withModifiers(e=>D(e,L.Resize,"topright"),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize right"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize bottomright",onMousedown:i.withModifiers(e=>D(e,L.Resize,"bottomright"),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize bottom"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize bottomleft",onMousedown:i.withModifiers(e=>D(e,L.Resize,"bottomleft"),["prevent"])},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize left"},[i.createVNode("span",{class:"farris-image-cropper-square"},null)]),i.createVNode("span",{class:"farris-image-cropper-resize-bar top",onMousedown:i.withModifiers(e=>D(e,L.Resize,"top"),["prevent"])},null),i.createVNode("span",{class:"farris-image-cropper-resize-bar right",onMousedown:i.withModifiers(e=>D(e,L.Resize,"right"),["prevent"])},null),i.createVNode("span",{class:"farris-image-cropper-resize-bar bottom",onMousedown:i.withModifiers(e=>D(e,L.Resize,"bottom"),["prevent"])},null),i.createVNode("span",{class:"farris-image-cropper-resize-bar left",onMousedown:i.withModifiers(e=>D(e,L.Resize,"left"),["prevent"])},null)])])]),A.value&&i.createVNode("div",{class:"farris-image-cropper-loading"},[i.createVNode("div",{class:"farris-image-cropper-loading-spinner"},null)]),H&&i.createVNode("div",{class:"farris-image-cropper-error"},[$.value])])}}),ze={install(a){a.component(se.name,se)}};E.ImageCropper=se,E.default=ze,E.imageCropperProps=me,Object.defineProperties(E,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/image-cropper/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "image-cropper",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/image-cropper/index.d.ts"
+}

package/image-cropper/style.css

@@ -0,0 +1 @@
+.farris-image-cropper-frame{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;text-align:center}.farris-image-cropper-frame .farris-image-cropper{width:100%;position:relative}.farris-image-cropper-frame .farris-image-cropper .farris-source-image{max-width:100%;max-height:100%;transform-origin:center}.farris-image-cropper-frame .farris-image-overlay{position:absolute;pointer-events:none;touch-action:none;outline:white solid 100vw;top:0;left:0}.farris-image-cropper-frame .farris-image-cropper-wrapper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(0,0,0,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(0, 0, 0, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){.farris-image-cropper-frame .farris-image-cropper-wrapper{outline-width:100vh}}.farris-image-cropper-frame .farris-image-cropper-wrapper:after{position:absolute;content:"";top:0;bottom:0;left:0;right:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-move{width:100%;cursor:move;border-radius:100%;border:1px solid #388fff}.farris-image-cropper-frame .farris-image-cropper-wrapper:focus .farris-image-cropper-move{border-color:#1e90ff;border-width:2px}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize .farris-image-cropper-square{display:inline-block;background:#388fff;width:6px;height:6px;border:1px solid #59a1ff;box-sizing:content-box}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.topleft{top:-12px;left:-12px;cursor:nwse-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.topright{top:-12px;right:-12px;cursor:nesw-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize.left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize-bar{position:absolute;z-index:1}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize-bar.top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize-bar.right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize-bar.bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper .farris-image-cropper-resize-bar.left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}.farris-image-cropper-frame .farris-image-cropper-wrapper.farris-image-cropper-rounded{outline-color:transparent;width:161px;height:161px}.farris-image-cropper-frame .farris-image-cropper-wrapper.farris-image-cropper-rounded:after{border-radius:100%;box-shadow:0 0 0 100vw #0000004d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(0, 0, 0, .3))}@media (orientation: portrait){.farris-image-cropper-frame .farris-image-cropper-wrapper.farris-image-cropper-rounded:after{box-shadow:0 0 0 100vh #0000004d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(0, 0, 0, .3))}}.farris-image-cropper-frame .farris-image-cropper-wrapper.farris-image-cropper-rounded .farris-image-cropper-move{border-radius:100%}.farris-image-cropper-frame.farris-image-cropper-disabled .farris-image-cropper-wrapper .farris-image-cropper-resize,.farris-image-cropper-frame.farris-image-cropper-disabled .farris-image-cropper-wrapper .farris-image-cropper-resize-bar,.farris-image-cropper-frame.farris-image-cropper-disabled .farris-image-cropper-wrapper .farris-image-cropper-move{display:none}.farris-image-cropper-frame .farris-image-cropper-error{width:100%;text-align:center;font-size:14px}.farris-image-cropper-frame .farris-image-cropper-loading{position:absolute;top:0;left:0;width:100%;height:100%}.farris-image-cropper-frame .farris-image-cropper-loading .farris-image-cropper-loading-spinner{width:31px;height:31px;margin:0 auto;border:2px solid #388fff;border-radius:50%;border-left-color:transparent;border-right-color:transparent;-webkit-animation:cssload-spin 425ms infinite linear;position:absolute;top:calc(50% - 15px);left:calc(50% - 15px);animation:cssload-spin 425ms infinite linear}@-webkit-keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes cssload-spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.dialog-user-avatar{padding:24px 32px 0 24px;display:flex;flex-direction:row}.dialog-user-avatar-change{padding-right:36px;border-right:1px solid #EFEFEF}.dialog-user-avatar-change .avatar-cropper{width:290px;height:290px}.dialog-user-avatar-change .avatar-cropper .avatar-cropper-wrapper{display:flex;align-items:center;width:100%;height:100%}.avatar-cropper-btns{display:flex;flex-direction:row;align-items:center;margin-top:10px;font-size:14px;color:#000000bf}.avatar-cropper-btns .avatar-cropper-btns-item{display:flex;flex-direction:row;align-items:center;position:relative;padding:0 14px;cursor:pointer}.avatar-cropper-btns .avatar-cropper-btns-item:after{position:absolute;right:0;top:50%;margin-top:-8px;width:1px;height:16px;background:rgba(0,0,0,.1);content:""}.avatar-cropper-btns .avatar-cropper-btns-item:last-child:after{display:none}.avatar-cropper-btns .avatar-cropper-btns-item .f-icon{color:#00000040}.avatar-cropper-btns .avatar-cropper-btns-item .avatar-cropper-btns-item-scale{padding:0 10px}.avatar-cropper-btns .avatar-cropper-btns-item .avatar-cropper-scale{display:block;width:20px;height:20px;text-align:center;line-height:20px}.dialog-user-avatar-tips{display:flex;flex-direction:row;align-items:center;padding:0 24px 24px;margin-top:10px}.dialog-user-avatar-tips .dialog-user-avatar-upload{margin-right:14px}.dialog-user-avatar-tips .dialog-user-avatar-tip-content{font-size:12px;color:#00000073}.dialog-user-avatar-view{padding-left:36px}.dialog-user-avatar-view .avatar-view-title{font-size:14px;color:#000000bf;text-align:center;margin-bottom:15px}.dialog-user-avatar-view .avatar-view-size{margin-bottom:32px}.dialog-user-avatar-view .avatar-view-size:last-child{margin-bottom:0}.dialog-user-avatar-view .avatar-view-size .img{display:block;width:100px;height:100px;border-radius:100%;overflow:hidden;margin:0 auto;border:1px solid #EFEFEF}.dialog-user-avatar-view .avatar-view-size .avatar-view-size-text{font-size:12px;color:#00000073;display:block;text-align:center;margin-top:10px}.dialog-user-avatar-view .avatar-view-size.avatar-view-size-small .img{width:50px;height:50px}

package/input-group/index.esm.js

@@ -0,0 +1,549 @@
+import { ref as p, createVNode as k, computed as f, withDirectives as F, resolveDirective as R, watch as N, defineComponent as S } from "vue";
+import { templateRef as W } from "@vueuse/core";
+const q = {};
+function H(e) {
+  const { properties: t } = e;
+  return Object.keys(t).reduce((n, o) => (n[o] = t[o].type === "object" && t[o].properties ? H(t[o]) : t[o].default, n), {});
+}
+function U(e, t) {
+  const a = H(t);
+  return Object.keys(e).reduce((n, o) => (n[o] = e[o], n), a), a;
+}
+function _(e, t) {
+  return Object.keys(e).filter((n) => e[n] != null).reduce((n, o) => {
+    if (t.has(o)) {
+      const d = t.get(o);
+      if (typeof d == "string")
+        n[d] = e[o];
+      else {
+        const l = d(o, e[o]);
+        Object.assign(n, l);
+      }
+    } else
+      n[o] = e[o];
+    return n;
+  }, {});
+}
+function $(e, t, a = /* @__PURE__ */ new Map()) {
+  const n = U(e, t);
+  return _(n, a);
+}
+function z(e, t, a = /* @__PURE__ */ new Map()) {
+  return q[t.title] = t, (n) => {
+    const o = $(n, t, a), d = Object.keys(e).reduce((l, s) => (l[s] = e[s].default, l), {});
+    return Object.assign(d, o);
+  };
+}
+function J(e, t) {
+  return { customClass: t.class };
+}
+const Q = "https://json-schema.org/draft/2020-12/schema", X = "https://farris-design.gitee.io/input-group.schema.json", Y = "input-group", Z = "A Farris Input Component", K = "object", ee = {
+  id: {
+    description: "The unique identifier for a Input Group",
+    type: "string"
+  },
+  type: {
+    description: "The type string of Input Group component",
+    type: "string",
+    default: "input-group"
+  },
+  appearance: {
+    description: "",
+    type: "object",
+    properties: {
+      class: {
+        type: "string"
+      },
+      style: {
+        type: "string"
+      }
+    },
+    default: {}
+  },
+  binding: {
+    description: "",
+    type: "object",
+    default: {}
+  },
+  editable: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  enableLinkLabel: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  label: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  lableWidth: {
+    description: "",
+    type: "number"
+  },
+  placeHolder: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  readonly: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  required: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  tabindex: {
+    description: "",
+    type: "number",
+    default: -1
+  },
+  textAlign: {
+    description: "",
+    type: "string",
+    enum: [
+      "left",
+      "middle",
+      "right"
+    ],
+    default: "left"
+  },
+  visible: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  onBlur: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  onClickLinkLabel: {
+    description: "",
+    type: "sting",
+    default: ""
+  },
+  addonDisabled: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  addonContent: {
+    description: "",
+    type: "string",
+    default: ""
+  },
+  autoHeight: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  enableAddon: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  addonType: {
+    description: "",
+    type: "string",
+    enum: [
+      "button",
+      "static"
+    ],
+    default: "button"
+  },
+  enableClear: {
+    description: "",
+    type: "boolean",
+    default: !0
+  },
+  enableViewPassword: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  inputType: {
+    description: "",
+    type: "string",
+    enum: [
+      "input",
+      "password",
+      "text"
+    ],
+    default: "input"
+  },
+  maxHeight: {
+    description: "",
+    type: "number",
+    default: 500
+  },
+  popup: {
+    description: "",
+    type: "object",
+    properties: {
+      footerButtons: {
+        type: "array",
+        default: []
+      },
+      height: {
+        type: "number",
+        default: 600
+      },
+      dataMapping: {
+        type: "object"
+      },
+      contents: {
+        type: "array",
+        default: []
+      },
+      showMaxButton: {
+        type: "boolean",
+        default: !0
+      },
+      showCloseButton: {
+        type: "boolean",
+        default: !0
+      },
+      showFooter: {
+        type: "boolean",
+        default: !0
+      },
+      title: {
+        type: "string",
+        default: ""
+      },
+      width: {
+        type: "number",
+        default: 800
+      }
+    }
+  },
+  showButtonWhenDisabled: {
+    description: "",
+    type: "boolean",
+    default: !1
+  },
+  onClear: {
+    description: "",
+    type: "string",
+    default: ""
+  }
+}, te = [
+  "id",
+  "type"
+], ne = {
+  $schema: Q,
+  $id: X,
+  title: Y,
+  description: Z,
+  type: K,
+  properties: ee,
+  required: te
+}, oe = /* @__PURE__ */ new Map([
+  ["appearance", J]
+]), P = {
+  /** 是否自动完成 */
+  autocomplete: { Type: String, default: "off" },
+  /** 自定义CLASS */
+  customClass: { Type: String, default: "" },
+  /** 禁用 */
+  disabled: { Type: Boolean, default: !1 },
+  /** 允许编辑 */
+  editable: { Type: Boolean, default: !0 },
+  /** 启用清除按钮 */
+  enableClear: { Type: Boolean, default: !0 },
+  enableTitle: { Type: Boolean, default: !0 },
+  enableViewPassword: { Type: Boolean, default: !0 },
+  extendInfo: { Type: String, default: "" },
+  forcePlaceholder: { Type: Boolean, default: !1 },
+  /** 扩展按钮 */
+  groupText: { Type: String, default: "" },
+  groupTextTemplate: { Type: W, default: p(null) },
+  isPassword: { Type: Boolean, default: !1 },
+  maxLength: { Type: Number || void 0, default: void 0 },
+  minLength: { Type: Number || void 0, default: void 0 },
+  /** 组件值 */
+  modelValue: { type: String, default: "" },
+  noborder: { Type: Boolean, default: !1 },
+  /** 启用提示信息 */
+  placeholder: { Type: String, default: "" },
+  /** 只读 */
+  readonly: { Type: Boolean, default: !1 },
+  /** 当组件禁用或只读时显示后边的按钮 */
+  showButtonWhenDisabled: { Type: Boolean, default: !1 },
+  tabIndex: { Type: Number || void 0, default: void 0 },
+  /** 文本在输入框中的对齐方式 */
+  textAlign: { Type: String, default: "left" },
+  /** 扩展信息；在输入框前面 显示 ① 图标鼠标滑过后显示 */
+  useExtendInfo: { Type: Boolean, default: !1 },
+  /** 输入值 */
+  value: { Type: String, default: "" }
+}, E = z(P, ne, oe);
+function I(e, t, a, n) {
+  const o = p(e.autocomplete), d = p(e.enableTitle), {
+    disabled: l,
+    modelValue: s
+  } = n, {
+    isPassword: v
+  } = a, c = p(e.minLength), m = p(e.maxLength), g = p(e.tabIndex), {
+    inputGroupEditorClass: r,
+    inputType: b,
+    onBlur: B,
+    onEnter: w,
+    onInputClick: h,
+    onInputFocus: x,
+    onMousedown: C,
+    onTextBoxValueChange: T,
+    readonly: A,
+    textBoxPlaceholder: u
+  } = n;
+  return () => k("input", {
+    name: "input-group-value",
+    class: r.value,
+    title: d.value && !v.value ? s.value : "",
+    type: b.value,
+    placeholder: u.value,
+    autocomplete: o.value,
+    readonly: A.value,
+    value: s.value,
+    disabled: l.value,
+    onBlur: (i) => B(i),
+    onMousedown: (i) => C(i),
+    onChange: (i) => T(i),
+    onKeypress: (i) => w(i),
+    onFocus: (i) => x(i),
+    onClick: (i) => h(i),
+    minlength: c.value,
+    maxlength: m.value,
+    onKeyup: (i) => t.emit("keyupHandle", i),
+    onKeydown: (i) => t.emit("keydownHandle", i),
+    tabindex: g.value
+  }, null);
+}
+function L(e, t, a, n, o) {
+  const {
+    appendedButtonClass: d,
+    appendedContent: l,
+    appendedContentTemplate: s
+  } = a, v = f(() => e.showButtonWhenDisabled && (!e.editable || !e.readonly) && !e.disabled), c = f(() => l.value && !s.value), m = f(() => s.value), {
+    clearButtonClass: g,
+    clearButtonStyle: r,
+    onClearValue: b,
+    shouldShowClearButton: B
+  } = n;
+  function w() {
+    return k("span", {
+      id: "clearIcon",
+      class: g.value,
+      style: r.value,
+      onClick: (y) => b(y)
+    }, [k("i", {
+      class: "f-icon modal_close"
+    }, null)]);
+  }
+  function h(y) {
+    t.emit("iconMouseEnter", y);
+  }
+  function x(y) {
+    t.emit("iconMouseLeave", y);
+  }
+  function C(y) {
+    v.value && t.emit("clickHandle", {
+      originalEvent: y
+    }), y.stopPropagation();
+  }
+  const T = e.isPassword ? o.onClickAppendedButton : C;
+  function A() {
+    return k("span", {
+      class: "input-group-text",
+      onMouseenter: (y) => h(y),
+      onMouseleave: (y) => x(y),
+      innerHTML: l.value,
+      onClick: (y) => T(y)
+    }, null);
+  }
+  function u() {
+    return F(k("template", null, null), [[R("slot"), "appendedContentTemplate"]]);
+  }
+  function i() {
+    return c.value ? A : m.value ? u : w;
+  }
+  const O = i();
+  return () => k("div", {
+    class: d.value
+  }, [B.value && O()]);
+}
+function j(e, t) {
+  const a = p("text"), n = p(e.modelValue), o = p(e.textAlign), d = p(e.noborder), l = f(() => (e.disabled || e.readonly) && !e.forcePlaceholder ? "" : e.placeholder), s = f(() => e.editable || !e.readonly), v = f(() => e.readonly || !e.editable), c = f(() => n.value === "" || n.value === null || n.value === void 0), m = p(e.disabled), g = p(e.editable), r = "f-state-focus", b = f(() => ({
+    "form-control": !0,
+    "f-utils-fill": !0,
+    "text-left": o.value === "left",
+    "text-center": o.value === "center",
+    "text-right": o.value === "right"
+  }));
+  function B(u) {
+    return document.documentElement.classList.remove(r), t.emit("blurHandle", u), u.stopPropagation(), !1;
+  }
+  function w(u) {
+    t.emit("enterHandle", { originalEvent: u });
+  }
+  function h(u) {
+    u.target.tagName !== "INPUT" && u.preventDefault(), u.stopPropagation();
+  }
+  function x(u, i = !0) {
+    n.value !== u && (n.value = u, i && t.emit("change", u), t.emit("update:modelValue", u));
+  }
+  function C(u) {
+    e.disabled || (d.value || document.documentElement.classList.add(r), s.value && t.emit("focusHandle", u));
+  }
+  function T(u) {
+    t.emit("inputClick", u);
+  }
+  function A(u) {
+    const i = u.target.value;
+    u.stopPropagation(), x(i);
+  }
+  return {
+    changeTextBoxValue: x,
+    disabled: m,
+    editable: g,
+    inputGroupEditorClass: b,
+    inputType: a,
+    isEmpty: c,
+    readonly: v,
+    modelValue: n,
+    onBlur: B,
+    onEnter: w,
+    onInputClick: T,
+    onInputFocus: C,
+    onMousedown: h,
+    onTextBoxValueChange: A,
+    textBoxPlaceholder: l
+  };
+}
+function G(e, t) {
+  const a = p(e.groupText), n = p(e.groupTextTemplate), o = f(() => e.showButtonWhenDisabled && (e.readonly || e.disabled)), d = f(() => e.enableClear || !!e.groupText || !!e.groupTextTemplate);
+  return { appendedButtonClass: f(() => ({
+    "input-group-append": !0,
+    "append-force-show": o.value
+  })), appendedContent: a, appendedContentTemplate: n, shouldShowAppendedButton: d };
+}
+function V(e, t, a) {
+  const n = p(!1), o = f(() => e.enableClear && !e.readonly && !e.disabled), { changeTextBoxValue: d, isEmpty: l } = a, s = f(() => ({
+    "input-group-text": !0,
+    "input-group-clear": !0
+  })), v = f(() => ({
+    width: "24px",
+    display: n.value ? "flex" : "none"
+  }));
+  function c(r) {
+    r.stopPropagation(), o.value && (d(""), n.value = !1, t.emit("clear"));
+  }
+  function m(r) {
+    o.value && !l.value && (n.value = !0);
+  }
+  function g(r) {
+    o.value && (n.value = !1);
+  }
+  return { clearButtonClass: s, clearButtonStyle: v, hasShownClearButton: n, onClearValue: c, onMouseEnter: m, onMouseLeave: g, shouldShowClearButton: o };
+}
+function D(e, t, a, n) {
+  const { appendedContent: o } = n, d = p(e.enableViewPassword), l = p(e.isPassword), s = '<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>', v = '<span class="f-icon f-icon-eye"></span>', c = p(!1);
+  N(() => [e.readonly, e.disabled], ([r, b]) => {
+    l.value && (a.value = r || b ? "password" : a.value, o.value = r || b ? v : o.value);
+  });
+  function m() {
+    return c.value = !c.value, a.value = c.value ? "text" : "password", o.value = c.value ? s : v, !1;
+  }
+  function g() {
+    a.value = l.value ? "password" : "text", o.value = l.value ? d.value ? v : "" : o.value;
+  }
+  return g(), { isPassword: l, onClickAppendedButton: m };
+}
+const M = /* @__PURE__ */ S({
+  name: "FInputGroup",
+  props: P,
+  emits: ["updateExtendInfo", "clear", "valueChange", "clickHandle", "blurHandle", "focusHandle", "enterHandle", "iconMouseEnter", "iconMouseLeave", "keyupHandle", "keydownHandle", "inputClick"],
+  setup(e, t) {
+    const a = j(e, t), {
+      disabled: n,
+      editable: o,
+      inputType: d,
+      readonly: l
+    } = a, s = G(e), {
+      shouldShowAppendedButton: v
+    } = s, c = V(e, t, a), {
+      onMouseEnter: m,
+      onMouseLeave: g
+    } = c, r = D(e, t, d, s), b = I(e, t, r, a), B = L(e, t, s, c, r), w = f(() => {
+      const h = {
+        "f-cmp-inputgroup": !0,
+        "input-group": !0,
+        "f-state-disabled": n.value,
+        "f-state-editable": o.value && !n.value && !l.value,
+        "f-state-readonly": l.value && !n.value
+      };
+      return (e.customClass || "").split(" ").reduce((C, T) => (C[T] = !0, C), h), h;
+    });
+    return () => k("div", {
+      id: "inputGroup",
+      class: w.value,
+      onMouseenter: m,
+      onMouseleave: g
+    }, [b(), v.value && B()]);
+  }
+}), ae = /* @__PURE__ */ S({
+  name: "FInputGroupDesign",
+  props: P,
+  emits: ["updateExtendInfo", "clear", "valueChange", "clickHandle", "blurHandle", "focusHandle", "enterHandle", "iconMouseEnter", "iconMouseLeave", "keyupHandle", "keydownHandle", "inputClick"],
+  setup(e, t) {
+    const a = j(e, t), {
+      disabled: n,
+      editable: o,
+      inputType: d,
+      readonly: l
+    } = a, s = G(e), {
+      shouldShowAppendedButton: v
+    } = s, c = V(e, t, a), {
+      onMouseEnter: m,
+      onMouseLeave: g
+    } = c, r = D(e, t, d, s), b = I(e, t, r, a), B = L(e, t, s, c, r), w = f(() => {
+      const h = {
+        "f-cmp-inputgroup": !0,
+        "input-group": !0,
+        "f-state-disabled": n.value,
+        "f-state-editable": o.value && !n.value && !l.value,
+        "f-state-readonly": l.value && !n.value
+      };
+      return (e.customClass || "").split(" ").reduce((C, T) => (C[T] = !0, C), h), h;
+    });
+    return () => k("div", {
+      id: "inputGroup",
+      class: w.value,
+      onMouseenter: m,
+      onMouseleave: g
+    }, [b(), v.value && B()]);
+  }
+}), se = {
+  install(e) {
+    e.component(M.name, M);
+  },
+  register(e, t) {
+    e["input-group"] = M, t["input-group"] = E;
+  },
+  registerDesigner(e, t) {
+    e["input-group"] = ae, t["input-group"] = E;
+  }
+};
+export {
+  M as InputGroup,
+  se as default,
+  P as inputGroupProps,
+  E as propsResolver
+};

package/input-group/index.umd.js

@@ -0,0 +1 @@
+(function(h,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue"),require("@vueuse/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vueuse/core"],n):(h=typeof globalThis<"u"?globalThis:h||self,n(h["input-group"]={},h.Vue,h.core))})(this,function(h,n,G){"use strict";const N={};function S(e){const{properties:t}=e;return Object.keys(t).reduce((o,a)=>(o[a]=t[a].type==="object"&&t[a].properties?S(t[a]):t[a].default,o),{})}function D(e,t){const l=S(t);return Object.keys(e).reduce((o,a)=>(o[a]=e[a],o),l),l}function O(e,t){return Object.keys(e).filter(o=>e[o]!=null).reduce((o,a)=>{if(t.has(a)){const r=t.get(a);if(typeof r=="string")o[r]=e[a];else{const u=r(a,e[a]);Object.assign(o,u)}}else o[a]=e[a];return o},{})}function F(e,t,l=new Map){const o=D(e,t);return O(o,l)}function R(e,t,l=new Map){return N[t.title]=t,o=>{const a=F(o,t,l),r=Object.keys(e).reduce((u,i)=>(u[i]=e[i].default,u),{});return Object.assign(r,a)}}function q(e,t){return{customClass:t.class}}const W={$schema:"https://json-schema.org/draft/2020-12/schema",$id:"https://farris-design.gitee.io/input-group.schema.json",title:"input-group",description:"A Farris Input Component",type:"object",properties:{id:{description:"The unique identifier for a Input Group",type:"string"},type:{description:"The type string of Input Group component",type:"string",default:"input-group"},appearance:{description:"",type:"object",properties:{class:{type:"string"},style:{type:"string"}},default:{}},binding:{description:"",type:"object",default:{}},editable:{description:"",type:"boolean",default:!0},enableLinkLabel:{description:"",type:"boolean",default:!1},label:{description:"",type:"string",default:""},lableWidth:{description:"",type:"number"},placeHolder:{description:"",type:"string",default:""},readonly:{description:"",type:"boolean",default:!1},required:{description:"",type:"boolean",default:!1},tabindex:{description:"",type:"number",default:-1},textAlign:{description:"",type:"string",enum:["left","middle","right"],default:"left"},visible:{description:"",type:"boolean",default:!0},onBlur:{description:"",type:"string",default:""},onClickLinkLabel:{description:"",type:"sting",default:""},addonDisabled:{description:"",type:"boolean",default:!1},addonContent:{description:"",type:"string",default:""},autoHeight:{description:"",type:"boolean",default:!1},enableAddon:{description:"",type:"boolean",default:!1},addonType:{description:"",type:"string",enum:["button","static"],default:"button"},enableClear:{description:"",type:"boolean",default:!0},enableViewPassword:{description:"",type:"boolean",default:!1},inputType:{description:"",type:"string",enum:["input","password","text"],default:"input"},maxHeight:{description:"",type:"number",default:500},popup:{description:"",type:"object",properties:{footerButtons:{type:"array",default:[]},height:{type:"number",default:600},dataMapping:{type:"object"},contents:{type:"array",default:[]},showMaxButton:{type:"boolean",default:!0},showCloseButton:{type:"boolean",default:!0},showFooter:{type:"boolean",default:!0},title:{type:"string",default:""},width:{type:"number",default:800}}},showButtonWhenDisabled:{description:"",type:"boolean",default:!1},onClear:{description:"",type:"string",default:""}},required:["id","type"]},_=new Map([["appearance",q]]),k={autocomplete:{Type:String,default:"off"},customClass:{Type:String,default:""},disabled:{Type:Boolean,default:!1},editable:{Type:Boolean,default:!0},enableClear:{Type:Boolean,default:!0},enableTitle:{Type:Boolean,default:!0},enableViewPassword:{Type:Boolean,default:!0},extendInfo:{Type:String,default:""},forcePlaceholder:{Type:Boolean,default:!1},groupText:{Type:String,default:""},groupTextTemplate:{Type:G.templateRef,default:n.ref(null)},isPassword:{Type:Boolean,default:!1},maxLength:{Type:Number||void 0,default:void 0},minLength:{Type:Number||void 0,default:void 0},modelValue:{type:String,default:""},noborder:{Type:Boolean,default:!1},placeholder:{Type:String,default:""},readonly:{Type:Boolean,default:!1},showButtonWhenDisabled:{Type:Boolean,default:!1},tabIndex:{Type:Number||void 0,default:void 0},textAlign:{Type:String,default:"left"},useExtendInfo:{Type:Boolean,default:!1},value:{Type:String,default:""}},P=R(k,W,_);function E(e,t,l,o){const a=n.ref(e.autocomplete),r=n.ref(e.enableTitle),{disabled:u,modelValue:i}=o,{isPassword:f}=l,p=n.ref(e.minLength),y=n.ref(e.maxLength),g=n.ref(e.tabIndex),{inputGroupEditorClass:c,inputType:b,onBlur:B,onEnter:T,onInputClick:v,onInputFocus:x,onMousedown:C,onTextBoxValueChange:w,readonly:M,textBoxPlaceholder:s}=o;return()=>n.createVNode("input",{name:"input-group-value",class:c.value,title:r.value&&!f.value?i.value:"",type:b.value,placeholder:s.value,autocomplete:a.value,readonly:M.value,value:i.value,disabled:u.value,onBlur:d=>B(d),onMousedown:d=>C(d),onChange:d=>w(d),onKeypress:d=>T(d),onFocus:d=>x(d),onClick:d=>v(d),minlength:p.value,maxlength:y.value,onKeyup:d=>t.emit("keyupHandle",d),onKeydown:d=>t.emit("keydownHandle",d),tabindex:g.value},null)}function H(e,t,l,o,a){const{appendedButtonClass:r,appendedContent:u,appendedContentTemplate:i}=l,f=n.computed(()=>e.showButtonWhenDisabled&&(!e.editable||!e.readonly)&&!e.disabled),p=n.computed(()=>u.value&&!i.value),y=n.computed(()=>i.value),{clearButtonClass:g,clearButtonStyle:c,onClearValue:b,shouldShowClearButton:B}=o;function T(){return n.createVNode("span",{id:"clearIcon",class:g.value,style:c.value,onClick:m=>b(m)},[n.createVNode("i",{class:"f-icon modal_close"},null)])}function v(m){t.emit("iconMouseEnter",m)}function x(m){t.emit("iconMouseLeave",m)}function C(m){f.value&&t.emit("clickHandle",{originalEvent:m}),m.stopPropagation()}const w=e.isPassword?a.onClickAppendedButton:C;function M(){return n.createVNode("span",{class:"input-group-text",onMouseenter:m=>v(m),onMouseleave:m=>x(m),innerHTML:u.value,onClick:m=>w(m)},null)}function s(){return n.withDirectives(n.createVNode("template",null,null),[[n.resolveDirective("slot"),"appendedContentTemplate"]])}function d(){return p.value?M:y.value?s:T}const z=d();return()=>n.createVNode("div",{class:r.value},[B.value&&z()])}const te="";function I(e,t){const l=n.ref("text"),o=n.ref(e.modelValue),a=n.ref(e.textAlign),r=n.ref(e.noborder),u=n.computed(()=>(e.disabled||e.readonly)&&!e.forcePlaceholder?"":e.placeholder),i=n.computed(()=>e.editable||!e.readonly),f=n.computed(()=>e.readonly||!e.editable),p=n.computed(()=>o.value===""||o.value===null||o.value===void 0),y=n.ref(e.disabled),g=n.ref(e.editable),c="f-state-focus",b=n.computed(()=>({"form-control":!0,"f-utils-fill":!0,"text-left":a.value==="left","text-center":a.value==="center","text-right":a.value==="right"}));function B(s){return document.documentElement.classList.remove(c),t.emit("blurHandle",s),s.stopPropagation(),!1}function T(s){t.emit("enterHandle",{originalEvent:s})}function v(s){s.target.tagName!=="INPUT"&&s.preventDefault(),s.stopPropagation()}function x(s,d=!0){o.value!==s&&(o.value=s,d&&t.emit("change",s),t.emit("update:modelValue",s))}function C(s){e.disabled||(r.value||document.documentElement.classList.add(c),i.value&&t.emit("focusHandle",s))}function w(s){t.emit("inputClick",s)}function M(s){const d=s.target.value;s.stopPropagation(),x(d)}return{changeTextBoxValue:x,disabled:y,editable:g,inputGroupEditorClass:b,inputType:l,isEmpty:p,readonly:f,modelValue:o,onBlur:B,onEnter:T,onInputClick:w,onInputFocus:C,onMousedown:v,onTextBoxValueChange:M,textBoxPlaceholder:u}}function V(e,t){const l=n.ref(e.groupText),o=n.ref(e.groupTextTemplate),a=n.computed(()=>e.showButtonWhenDisabled&&(e.readonly||e.disabled)),r=n.computed(()=>e.enableClear||!!e.groupText||!!e.groupTextTemplate);return{appendedButtonClass:n.computed(()=>({"input-group-append":!0,"append-force-show":a.value})),appendedContent:l,appendedContentTemplate:o,shouldShowAppendedButton:r}}function j(e,t,l){const o=n.ref(!1),a=n.computed(()=>e.enableClear&&!e.readonly&&!e.disabled),{changeTextBoxValue:r,isEmpty:u}=l,i=n.computed(()=>({"input-group-text":!0,"input-group-clear":!0})),f=n.computed(()=>({width:"24px",display:o.value?"flex":"none"}));function p(c){c.stopPropagation(),a.value&&(r(""),o.value=!1,t.emit("clear"))}function y(c){a.value&&!u.value&&(o.value=!0)}function g(c){a.value&&(o.value=!1)}return{clearButtonClass:i,clearButtonStyle:f,hasShownClearButton:o,onClearValue:p,onMouseEnter:y,onMouseLeave:g,shouldShowClearButton:a}}function L(e,t,l,o){const{appendedContent:a}=o,r=n.ref(e.enableViewPassword),u=n.ref(e.isPassword),i='<span class="f-icon f-icon-eye" style="color: rgb(56, 143, 255);"></span>',f='<span class="f-icon f-icon-eye"></span>',p=n.ref(!1);n.watch(()=>[e.readonly,e.disabled],([c,b])=>{u.value&&(l.value=c||b?"password":l.value,a.value=c||b?f:a.value)});function y(){return p.value=!p.value,l.value=p.value?"text":"password",a.value=p.value?i:f,!1}function g(){l.value=u.value?"password":"text",a.value=u.value?r.value?f:"":a.value}return g(),{isPassword:u,onClickAppendedButton:y}}const A=n.defineComponent({name:"FInputGroup",props:k,emits:["updateExtendInfo","clear","valueChange","clickHandle","blurHandle","focusHandle","enterHandle","iconMouseEnter","iconMouseLeave","keyupHandle","keydownHandle","inputClick"],setup(e,t){const l=I(e,t),{disabled:o,editable:a,inputType:r,readonly:u}=l,i=V(e),{shouldShowAppendedButton:f}=i,p=j(e,t,l),{onMouseEnter:y,onMouseLeave:g}=p,c=L(e,t,r,i),b=E(e,t,c,l),B=H(e,t,i,p,c),T=n.computed(()=>{const v={"f-cmp-inputgroup":!0,"input-group":!0,"f-state-disabled":o.value,"f-state-editable":a.value&&!o.value&&!u.value,"f-state-readonly":u.value&&!o.value};return(e.customClass||"").split(" ").reduce((C,w)=>(C[w]=!0,C),v),v});return()=>n.createVNode("div",{id:"inputGroup",class:T.value,onMouseenter:y,onMouseleave:g},[b(),f.value&&B()])}}),$=n.defineComponent({name:"FInputGroupDesign",props:k,emits:["updateExtendInfo","clear","valueChange","clickHandle","blurHandle","focusHandle","enterHandle","iconMouseEnter","iconMouseLeave","keyupHandle","keydownHandle","inputClick"],setup(e,t){const l=I(e,t),{disabled:o,editable:a,inputType:r,readonly:u}=l,i=V(e),{shouldShowAppendedButton:f}=i,p=j(e,t,l),{onMouseEnter:y,onMouseLeave:g}=p,c=L(e,t,r,i),b=E(e,t,c,l),B=H(e,t,i,p,c),T=n.computed(()=>{const v={"f-cmp-inputgroup":!0,"input-group":!0,"f-state-disabled":o.value,"f-state-editable":a.value&&!o.value&&!u.value,"f-state-readonly":u.value&&!o.value};return(e.customClass||"").split(" ").reduce((C,w)=>(C[w]=!0,C),v),v});return()=>n.createVNode("div",{id:"inputGroup",class:T.value,onMouseenter:y,onMouseleave:g},[b(),f.value&&B()])}}),U={install(e){e.component(A.name,A)},register(e,t){e["input-group"]=A,t["input-group"]=P},registerDesigner(e,t){e["input-group"]=$,t["input-group"]=P}};h.InputGroup=A,h.default=U,h.inputGroupProps=k,h.propsResolver=P,Object.defineProperties(h,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/input-group/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "input-group",
+    "version": "1.0.2",
+    "main": "index.umd.js",
+    "module": "index.esm.js",
+    "style": "style.css",
+    "types": "../types/input-group/index.d.ts"
+}

package/input-group/style.css

@@ -0,0 +1 @@
+.input-group{flex-wrap:nowrap}.input-group-text,.input-group-clear{cursor:pointer}.input-group-text:hover{background:#ccc}.input-group-clear-right{position:absolute;height:100%;right:0;top:0;z-index:100}.f-cmp-inputgroup .input-group-append{margin-left:1px}