amotify 0.2.26 → 0.2.28

package/dist/fn/Cropper.js

@@ -1 +1 @@
-import{b as H,c as j,e as L}from"../chunk-C5N2D3ZX.js";import{Fragment as re,jsx as o,jsxs as f}from"react/jsx-runtime";import v from"@mingoo/jsmin";import{$$fromRoot as K,useStore as A}from"../@utils";import{useState as V,useEffect as O}from"react";import P from"../atoms/Box";import M from"../atoms/FAI";import k from"../mols/Column";import I from"../mols/Row";import F from"../mols//Text";import D from"./Button";import W from"./Sheet";import N from"./Loader";import q from"./Input";import{faPalette as J}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Q}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ee}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as te}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as U}from"../@styles/componentClasses";import Y from"./Tooltips";class ae{constructor(t){this.set_scale=t.set_scale,this.val_file=t.val_file,this.develops=t.develops,this.use=t.use,this.componentID=t.componentID,this.scale={current:t.scale.default,default:t.scale.default,min:t.scale.min,max:t.scale.max};let l=t.canvas;this.Canvas={elm:l,ctx:l.getContext("2d")};let i=t.picture.image,{width:e,height:a}=i,r=e/a;this.Picture={elm:i,originDataUrl:i.src,aspect:r,revisedAspect:1,rotate:t.picture.rotate,grayScale:t.picture.grayScale,tone:t.picture.tone},this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:e/2,imageY:a/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let t=this.Canvas.elm,l=this.Picture.elm,i=0,e=0;if(this.use=="square"){let s=t.width/3*2,n=t.height/3*2;i=Math.min(s,n),e=i}else this.use=="wallpaper.horizontal"?(i=t.width*(7/9),e=i/3):this.use=="wallpaper.vertical"&&(e=t.height*(7/9),i=e/2);let{width:a,height:r}=l,p=(t.width-i)/2,u=(t.height-e)/2,y=i/e;this.pst={frame:{x:p,y:u,w:i,h:e,aspect:y},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:r/2,centerX:t.width/2,centerY:t.height/2}}dragEffect(t){let{eventType:l,x:i,y:e}=t;if(l=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:i,y:e},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:r}=this.dragEffectInfo,p=a.x-i,u=a.y-e,y=this.scale.current*this.Picture.revisedAspect/100,s=p/y*r.x,n=u/y*r.y;l=="move"?this.drawImage(this.pst.imageX+s,this.pst.imageY+n):l=="end"&&this.drawImage(this.pst.imageX+=s,this.pst.imageY+=n)}}pinchEffect(t){let{eventType:l,event:i}=t,{x:e,y:a}=v.getCursor(i.touches[0]),{x:r,y:p}=v.getCursor(i.touches[1]),u=r-e,y=p-a;if(l=="start")this.pinchEffectInfo.origin={x:u,y,scale:this.scale.current};else if(l=="move"){let{origin:s}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(s.x,2)+Math.pow(s.y,2)),S=Math.sqrt(Math.pow(u,2)+Math.pow(y,2))/n,C=Number(s.scale*S);this.set_scale(C)}}updateScale(t){let l=t;l=Math.max(l,this.scale.min),l=Math.min(l,this.scale.max),this.scale.current=l,this.drawImage()}updateFilter(t){this.Picture.grayScale=t.grayScale,this.Picture.tone=t.tone,this.Picture.rotate=t.rotate,this.modifyImage()}modifyImage(){return L(this,null,function*(){let{grayScale:t,tone:l,rotate:i}=this.Picture;const e=document.createElement("canvas");let a=e.getContext("2d"),r=yield v.ImageLoader(this.Picture.originDataUrl),p=r.width,u=r.height;(i==90||i==270)&&(p=r.height,u=r.width),e.width=p,e.height=u,t&&(a.filter="grayscale("+t+"%)"),i&&(a.translate(p/2,u/2),a.rotate(i*Math.PI/180),[90,270].includes(i)?a.translate(-u/2,-p/2):a.translate(-p/2,-u/2)),a.drawImage(r,0,0,r.width,r.height);let y=a.getImageData(0,0,e.width,e.height),s=y.data;{t/=100;let C=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][l],x=C[0]/255,b=C[1]/255,c=C[2]/255;for(let m=0;m<u;m++)for(let h=0;h<p;h++){var n=(m*p+h)*4;if(t){let R=.3*s[n]+.59*s[n+1]+.11*s[n+2];for(var g=0;g<3;g++){let E=s[n+g];s[n+g]=E+(R-E)*t}}s[n]*=x,s[n+1]*=b,s[n+2]*=c}}a.putImageData(y,0,0);let S=e.toDataURL("image/jpeg");{let C=yield v.ImageLoader(S),{width:x,height:b}=C,c=x/b;this.Picture=j(H({},this.Picture),{elm:C,aspect:c,revisedAspect:this.pst.frame.aspect>c?this.pst.frame.w/x:this.pst.frame.h/b})}this.drawImage()})}drawImage(t,l){let{use:i,Canvas:{ctx:e,elm:a},pst:{frame:r}}=this,p=t||this.pst.imageX,u=l||this.pst.imageY;{let y=this.scale.current/100,s=this.Picture.revisedAspect*y,n=this.pst.centerX-p*s,g=this.pst.centerY-u*s,S=this.Picture.elm.width*s,C=this.Picture.elm.height*s;{let x=this.pst.frame.x+this.pst.frame.w-S,b=this.pst.frame.x,c=this.pst.frame.y+this.pst.frame.h-C,m=this.pst.frame.y,h=0;n<x&&(h=n-x),n>b&&(h=n-b);let R=0;g<c&&(R=g-c),g>m&&(R=g-m),this.dragEffectInfo.origin.x+=h/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=R/2/this.dragEffectInfo.frameExpandRate.y,n=Math.min(Math.max(n,x),b),g=Math.min(Math.max(g,c),m)}this.pst.outImage={x:n,y:g,w:S,h:C},e.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),e.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,n,g,S,C)}{if(i=="square"){e.fillStyle="rgba( 20,24,20,.3 )",e.beginPath();let n=a.width/3*2,g=a.height/3*2,S=Math.min(n,g),C=Math.max(n,g);e.arc(a.width/2,a.height/2,C,0,Math.PI*2,!0),e.arc(a.width/2,a.height/2,S/2,0,Math.PI*2,!1),e.closePath(),e.fill()}else(i=="wallpaper.horizontal"||i=="wallpaper.vertical")&&(e.fillStyle="rgba( 20,24,20,.3 )");e.beginPath(),e.moveTo(0,0),e.lineTo(a.width,0),e.lineTo(a.width,a.height),e.lineTo(0,a.height),e.lineTo(0,0),e.closePath(),e.lineTo(r.x,r.y),e.lineTo(r.x,r.y+r.h),e.lineTo(r.x+r.w,r.y+r.h),e.lineTo(r.x+r.w,r.y),e.lineTo(r.x,r.y),e.fill();let s=v(document.body).getStyleProperty("--color-theme-hsl");e.lineWidth=4,e.strokeStyle=`hsla( ${s},1 )`,e.strokeRect(r.x,r.y,r.w,r.h)}}export(){return L(this,null,function*(){let{Canvas:t,develops:l,Picture:i,pst:{outImage:e,frame:a}}=this,r=e.w/i.elm.width,p=e.h/i.elm.height,u=(a.x-e.x)/r,y=(a.x-e.x+a.w)/r,s=(a.y-e.y)/p,n=(a.y-e.y+a.h)/p,g=Array.from({length:l.length}),S="image/jpeg";for(let C=0;C<l.length;C++){let{size:x,maxSize:b}=l[C];b=b||{S:1024*20,R:1024*100,L:1024*350}[x];let c={S:140,R:600,L:1200}[x],m=c;this.use=="wallpaper.horizontal"?m=c/3:this.use=="wallpaper.vertical"&&(m=c*2);let h=document.createElement("canvas");h.width=c,h.height=m;let R=h.getContext("2d");if(!R)return;R.clearRect(0,0,c,m),R.drawImage(this.Picture.elm,u,s,y-u,n-s,0,0,c,m);let E=h.toDataURL(S),w=yield E.toBlob(S);if(!w)return;if(w.size>=b){let z=b/w.size;if(E=h.toDataURL(S,z*.92),w=yield E.toBlob(S),!w)return}let X=new File([w],this.val_file.name,{type:S});g[C]=X}return g})}}const Z={Core:d=>{let{val_file:t,options:l,finishedCallback:i,abortCallback:e}=d,{use:a,develops:r=[]}=l,[p]=V(v.uuid.gen(32));const u={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let[y,s]=V(u.scale.default),[n,g]=V(u.rotate),[S,C]=V(u.grayScale),[x,b]=V(u.tone);return O(()=>{let c="CropperResize";return v(window).addEvent({eventType:"resize",eventID:c,callback:()=>{v.interval.clear("CropperResize"),v.interval.standBy("CropperResize",200,()=>{var z;let m=K("#Canvas-"+p)[0];if(!m)return;let h=(z=A.get(p))==null?void 0:z.Instance;if(!h)return;let R=m.position(),E=R.width/R.height;m.width=2400,m.height=2400/E;let{width:w,height:X}=m;h.pst.centerX=w/2,h.pst.centerY=X/2,h.frameSizing(),h.modifyImage()})}}),()=>{v(window).removeEvent(c)}},[]),O(()=>{A.set({[p]:{}}),L(void 0,null,function*(){N.fn.corner.active(),yield v.pending(()=>{},400);let{target:c}=yield t.convert();if(!c)return;let m=c.result,h=K("#Canvas-"+p)[0];if(!h)return;let R=h.position(),E=R.width/R.height;h.width=2400,h.height=2400/E;let w=new ae({set_scale:s,val_file:t,develops:r,use:a,scale:u.scale,componentID:p,canvas:h,picture:{image:yield v.ImageLoader(m),grayScale:u.grayScale,tone:u.tone,rotate:u.rotate}});A.set({[p]:{Instance:w}});const X=function(B){if(B.preventDefault(),B.touches&&B.touches.length>1)w.pinchEffect({eventType:"start",event:B}),v(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{T.preventDefault(),w.pinchEffect({eventType:"move",event:T})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:$});else{w.dragEffect(H({eventType:"start"},v.getCursor(B)));let{type:T}=B;v(document).addEvent({eventType:T=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{z("move",_)}}).addEvent({eventType:T=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{z("end",_),$(_)}})}},z=function(B,T){T.preventDefault(),w.dragEffect(H({eventType:B},v.getCursor(T)))},$=function(B){B.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(h).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:B=>{B.preventDefault();let T=Number(B.wheelDelta*.04),_=w.scale.current+T;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),s(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:X,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:X,options:{passive:!1}}),setTimeout(()=>{N.fn.corner.stop()},1e3)})},[t.id]),O(()=>{var m;let c=(m=A.get(p))==null?void 0:m.Instance;c&&c.updateScale(y)},[y]),O(()=>{var m;let c=(m=A.get(p))==null?void 0:m.Instance;c&&c.updateFilter({grayScale:S,tone:x,rotate:n})},[S,x,n]),o(W.Comps.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(k,{className:[U("Wrap"),U("Use_"+a)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[o(P,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:o("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:U("Canvas"),id:"Canvas-"+p})}),f(I.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(Z.SettingRegion,{DefaultOptions:u,val_scale:y,set_scale:s,val_tone:x,set_tone:b,val_grayScale:S,set_grayScale:C,val_rotate:n,set_rotate:g}),f(I.Right,{flexSizing:"none",children:[o(D.Button.Border.R,{isRounded:!0,onClick:()=>{e()},children:"\u9589\u3058\u308B"}),o(D.Button.Prime.R,{isRounded:!0,boxShadow:"3.remark",onClick:()=>L(void 0,null,function*(){var h;let c=(h=A.get(p))==null?void 0:h.Instance;if(!c)return;N.fn.mini.active("CropperExportation");let m=yield c.export();setTimeout(()=>{N.fn.mini.stop("CropperExportation"),i(m)},3e3)}),children:f(I.Center,{gap:"1/2",children:[o(N.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{let t=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],l=i=>t[i]||"\u306A\u3057";return f(I.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(k,{gap:"1/3",children:[o(F.Supplement,{children:"Rotate"}),f(I.Left,{flexChilds:"even",gap:"1/6",children:[o(D.Button.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let i=d.val_rotate-90;i<0&&(i+=360),d.set_rotate(i)},children:f(I.Center,{gap:"1/4",children:["90\xB0",o(M,{icon:ee})]})}),o(D.Button.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(I.Center,{gap:"1/4",children:[o(M,{icon:te}),"90\xB0"]})})]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Zoom"}),f(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperZoomEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26},content:o(W.Comps.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/3",children:[o(M.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:a,value:r})=>{v.interval.clear("Cropper.UpdateScale"),v.interval.standBy("Cropper.UpdateScale",250,()=>{d.set_scale(r+100)})},legends:{enable:!0,custom:a=>"x"+Math.round(100+a)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"GrayScale"}),f(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperGrayScaleEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26},content:o(W.Comps.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/3",children:[o(M,{icon:J,fontColor:"5.translucent"}),"Gray Scale"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:a})=>{v.interval.clear("Cropper.GrayScale"),v.interval.standBy("Cropper.GrayScale",250,()=>{d.set_grayScale(a)})},legends:{enable:!0,custom:a=>a+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Tone"}),o(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperToneEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let a=[];for(let r=1;r<=10;r++)a.push({value:r,label:f(re,{children:[o(P,{ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+r)].join(" ")}),o(P,{textAlign:"left",flexSizing:0,children:l(r)})]})});return o(W.Comps.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/3",children:[o(M,{icon:Q,fontColor:"5.translucent"}),"Tone"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Radio,{icon:!1,value:d.val_tone,gap:"1/2",cellStyles:{isRounded:!0,borderWidth:2,borderColor:"1.thin",padding:["1/3","2/3"],fontSize:"1.mini",gap:"1/3"},options:[{value:0,label:o(P,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...a],onUpdateValidValue:({value:r})=>{d.set_tone(r[0])}})]})})}})},children:f(I.Center,{gap:"1/2",children:[o(P,{boxShadow:"2.remark",ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+d.val_tone)].join(" ")}),l(d.val_tone)]})})]})]})}},G={openDialogNEdit:d=>L(void 0,null,function*(){let t=yield q.Filer.fn.openDialog({accept:"image",multiple:!1});G.openEditor(H({imageFile:t[0]},d))}),openEditor:d=>L(void 0,null,function*(){let t="CropperImage";W.open({sheetID:t,type:"normal.middleCenter",size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100vw"},content:o(Z.Core,{val_file:d.imageFile,options:d,finishedCallback:l=>{W.close(t),d.onProcessFinished(l)},abortCallback:()=>{W.close(t)}}),close_option:{escapeKeyDown:!1}})})};export{G as Cropper,G as default};
+import{b as H,c as j,e as z}from"../chunk-C5N2D3ZX.js";import{Fragment as re,jsx as o,jsxs as f}from"react/jsx-runtime";import v from"@mingoo/jsmin";import{$$fromRoot as K,useStore as A}from"../@utils";import{useState as N,useEffect as O}from"react";import{Box as P,FAI as M,Column as k}from"../atoms";import{Row as I,Text as F}from"../mols";import D from"./Button";import W from"./Sheet";import V from"./Loader";import q from"./Input";import{faPalette as J}from"@fortawesome/free-solid-svg-icons/faPalette";import{faBarsStaggered as Q}from"@fortawesome/free-solid-svg-icons/faBarsStaggered";import{faRotateLeft as ee}from"@fortawesome/free-solid-svg-icons/faRotateLeft";import{faRotateRight as te}from"@fortawesome/free-solid-svg-icons/faRotateRight";import{CropperClasses as U}from"../@styles/componentClasses";import Y from"./Tooltips";class ae{constructor(t){this.set_scale=t.set_scale,this.val_file=t.val_file,this.develops=t.develops,this.use=t.use,this.componentID=t.componentID,this.scale={current:t.scale.default,default:t.scale.default,min:t.scale.min,max:t.scale.max};let l=t.canvas;this.Canvas={elm:l,ctx:l.getContext("2d")};let i=t.picture.image,{width:e,height:a}=i,r=e/a;this.Picture={elm:i,originDataUrl:i.src,aspect:r,revisedAspect:1,rotate:t.picture.rotate,grayScale:t.picture.grayScale,tone:t.picture.tone},this.pst={frame:{x:0,y:0,w:0,h:0,aspect:1},outImage:{x:0,y:0,w:0,h:0},imageX:e/2,imageY:a/2,centerX:0,centerY:0},this.dragEffectInfo={origin:{x:0,y:0},frameExpandRate:{x:0,y:0}},this.pinchEffectInfo={origin:{x:0,y:0,scale:this.scale.current}},this.frameSizing(),this.modifyImage()}frameSizing(){let t=this.Canvas.elm,l=this.Picture.elm,i=0,e=0;if(this.use=="square"){let s=t.width/3*2,n=t.height/3*2;i=Math.min(s,n),e=i}else this.use=="wallpaper.horizontal"?(i=t.width*(7/9),e=i/3):this.use=="wallpaper.vertical"&&(e=t.height*(7/9),i=e/2);let{width:a,height:r}=l,p=(t.width-i)/2,u=(t.height-e)/2,y=i/e;this.pst={frame:{x:p,y:u,w:i,h:e,aspect:y},outImage:{x:0,y:0,w:0,h:0},imageX:a/2,imageY:r/2,centerX:t.width/2,centerY:t.height/2}}dragEffect(t){let{eventType:l,x:i,y:e}=t;if(l=="start"){let a=this.Canvas.elm.position();this.dragEffectInfo={origin:{x:i,y:e},frameExpandRate:{x:this.Canvas.elm.width/a.width,y:this.Canvas.elm.height/a.height}}}else{let{origin:a,frameExpandRate:r}=this.dragEffectInfo,p=a.x-i,u=a.y-e,y=this.scale.current*this.Picture.revisedAspect/100,s=p/y*r.x,n=u/y*r.y;l=="move"?this.drawImage(this.pst.imageX+s,this.pst.imageY+n):l=="end"&&this.drawImage(this.pst.imageX+=s,this.pst.imageY+=n)}}pinchEffect(t){let{eventType:l,event:i}=t,{x:e,y:a}=v.getCursor(i.touches[0]),{x:r,y:p}=v.getCursor(i.touches[1]),u=r-e,y=p-a;if(l=="start")this.pinchEffectInfo.origin={x:u,y,scale:this.scale.current};else if(l=="move"){let{origin:s}=this.pinchEffectInfo,n=Math.sqrt(Math.pow(s.x,2)+Math.pow(s.y,2)),S=Math.sqrt(Math.pow(u,2)+Math.pow(y,2))/n,C=Number(s.scale*S);this.set_scale(C)}}updateScale(t){let l=t;l=Math.max(l,this.scale.min),l=Math.min(l,this.scale.max),this.scale.current=l,this.drawImage()}updateFilter(t){this.Picture.grayScale=t.grayScale,this.Picture.tone=t.tone,this.Picture.rotate=t.rotate,this.modifyImage()}modifyImage(){return z(this,null,function*(){let{grayScale:t,tone:l,rotate:i}=this.Picture;const e=document.createElement("canvas");let a=e.getContext("2d"),r=yield v.ImageLoader(this.Picture.originDataUrl),p=r.width,u=r.height;(i==90||i==270)&&(p=r.height,u=r.width),e.width=p,e.height=u,t&&(a.filter="grayscale("+t+"%)"),i&&(a.translate(p/2,u/2),a.rotate(i*Math.PI/180),[90,270].includes(i)?a.translate(-u/2,-p/2):a.translate(-p/2,-u/2)),a.drawImage(r,0,0,r.width,r.height);let y=a.getImageData(0,0,e.width,e.height),s=y.data;{t/=100;let C=[[255,255,255],[255,200,100],[170,170,255],[240,200,145],[128,255,255],[255,128,255],[255,255,128],[128,158,169],[128,112,162],[50,192,87],[246,100,140]][l],x=C[0]/255,b=C[1]/255,c=C[2]/255;for(let m=0;m<u;m++)for(let h=0;h<p;h++){var n=(m*p+h)*4;if(t){let R=.3*s[n]+.59*s[n+1]+.11*s[n+2];for(var g=0;g<3;g++){let E=s[n+g];s[n+g]=E+(R-E)*t}}s[n]*=x,s[n+1]*=b,s[n+2]*=c}}a.putImageData(y,0,0);let S=e.toDataURL("image/jpeg");{let C=yield v.ImageLoader(S),{width:x,height:b}=C,c=x/b;this.Picture=j(H({},this.Picture),{elm:C,aspect:c,revisedAspect:this.pst.frame.aspect>c?this.pst.frame.w/x:this.pst.frame.h/b})}this.drawImage()})}drawImage(t,l){let{use:i,Canvas:{ctx:e,elm:a},pst:{frame:r}}=this,p=t||this.pst.imageX,u=l||this.pst.imageY;{let y=this.scale.current/100,s=this.Picture.revisedAspect*y,n=this.pst.centerX-p*s,g=this.pst.centerY-u*s,S=this.Picture.elm.width*s,C=this.Picture.elm.height*s;{let x=this.pst.frame.x+this.pst.frame.w-S,b=this.pst.frame.x,c=this.pst.frame.y+this.pst.frame.h-C,m=this.pst.frame.y,h=0;n<x&&(h=n-x),n>b&&(h=n-b);let R=0;g<c&&(R=g-c),g>m&&(R=g-m),this.dragEffectInfo.origin.x+=h/2/this.dragEffectInfo.frameExpandRate.x,this.dragEffectInfo.origin.y+=R/2/this.dragEffectInfo.frameExpandRate.y,n=Math.min(Math.max(n,x),b),g=Math.min(Math.max(g,c),m)}this.pst.outImage={x:n,y:g,w:S,h:C},e.clearRect(0,0,this.Canvas.elm.width,this.Canvas.elm.height),e.drawImage(this.Picture.elm,0,0,this.Picture.elm.width,this.Picture.elm.height,n,g,S,C)}{if(i=="square"){e.fillStyle="rgba( 20,24,20,.3 )",e.beginPath();let n=a.width/3*2,g=a.height/3*2,S=Math.min(n,g),C=Math.max(n,g);e.arc(a.width/2,a.height/2,C,0,Math.PI*2,!0),e.arc(a.width/2,a.height/2,S/2,0,Math.PI*2,!1),e.closePath(),e.fill()}else(i=="wallpaper.horizontal"||i=="wallpaper.vertical")&&(e.fillStyle="rgba( 20,24,20,.3 )");e.beginPath(),e.moveTo(0,0),e.lineTo(a.width,0),e.lineTo(a.width,a.height),e.lineTo(0,a.height),e.lineTo(0,0),e.closePath(),e.lineTo(r.x,r.y),e.lineTo(r.x,r.y+r.h),e.lineTo(r.x+r.w,r.y+r.h),e.lineTo(r.x+r.w,r.y),e.lineTo(r.x,r.y),e.fill();let s=v(document.body).getStyleProperty("--color-theme-hsl");e.lineWidth=4,e.strokeStyle=`hsla( ${s},1 )`,e.strokeRect(r.x,r.y,r.w,r.h)}}export(){return z(this,null,function*(){let{Canvas:t,develops:l,Picture:i,pst:{outImage:e,frame:a}}=this,r=e.w/i.elm.width,p=e.h/i.elm.height,u=(a.x-e.x)/r,y=(a.x-e.x+a.w)/r,s=(a.y-e.y)/p,n=(a.y-e.y+a.h)/p,g=Array.from({length:l.length}),S="image/jpeg";for(let C=0;C<l.length;C++){let{size:x,maxSize:b}=l[C];b=b||{S:1024*20,R:1024*100,L:1024*350}[x];let c={S:140,R:600,L:1200}[x],m=c;this.use=="wallpaper.horizontal"?m=c/3:this.use=="wallpaper.vertical"&&(m=c*2);let h=document.createElement("canvas");h.width=c,h.height=m;let R=h.getContext("2d");if(!R)return;R.clearRect(0,0,c,m),R.drawImage(this.Picture.elm,u,s,y-u,n-s,0,0,c,m);let E=h.toDataURL(S),w=yield E.toBlob(S);if(!w)return;if(w.size>=b){let L=b/w.size;if(E=h.toDataURL(S,L*.92),w=yield E.toBlob(S),!w)return}let X=new File([w],this.val_file.name,{type:S});g[C]=X}return g})}}const Z={Core:d=>{let{val_file:t,options:l,finishedCallback:i,abortCallback:e}=d,{use:a,develops:r=[]}=l,[p]=N(v.uuid.gen(32));const u={scale:{default:120,min:100,max:400},rotate:0,grayScale:0,tone:0};let[y,s]=N(u.scale.default),[n,g]=N(u.rotate),[S,C]=N(u.grayScale),[x,b]=N(u.tone);return O(()=>{let c="CropperResize";return v(window).addEvent({eventType:"resize",eventID:c,callback:()=>{v.interval.clear("CropperResize"),v.interval.standBy("CropperResize",200,()=>{var L;let m=K("#Canvas-"+p)[0];if(!m)return;let h=(L=A.get(p))==null?void 0:L.Instance;if(!h)return;let R=m.position(),E=R.width/R.height;m.width=2400,m.height=2400/E;let{width:w,height:X}=m;h.pst.centerX=w/2,h.pst.centerY=X/2,h.frameSizing(),h.modifyImage()})}}),()=>{v(window).removeEvent(c)}},[]),O(()=>{A.set({[p]:{}}),z(void 0,null,function*(){V.fn.corner.active(),yield v.pending(()=>{},400);let{target:c}=yield t.convert();if(!c)return;let m=c.result,h=K("#Canvas-"+p)[0];if(!h)return;let R=h.position(),E=R.width/R.height;h.width=2400,h.height=2400/E;let w=new ae({set_scale:s,val_file:t,develops:r,use:a,scale:u.scale,componentID:p,canvas:h,picture:{image:yield v.ImageLoader(m),grayScale:u.grayScale,tone:u.tone,rotate:u.rotate}});A.set({[p]:{Instance:w}});const X=function(B){if(B.preventDefault(),B.touches&&B.touches.length>1)w.pinchEffect({eventType:"start",event:B}),v(document).addEvent({eventType:"touchmove",eventID:"CropperEffectMove",options:{passive:!1},callback:T=>{T.preventDefault(),w.pinchEffect({eventType:"move",event:T})}}).addEvent({eventType:"touchend",eventID:"CropperEffectEnd",options:{passive:!1},callback:$});else{w.dragEffect(H({eventType:"start"},v.getCursor(B)));let{type:T}=B;v(document).addEvent({eventType:T=="touchstart"?"touchmove":"mousemove",eventID:"CropperEffectMove",options:{passive:!1},callback:_=>{L("move",_)}}).addEvent({eventType:T=="touchstart"?"touchend":"mouseup",eventID:"CropperEffectEnd",options:{passive:!1},callback:_=>{L("end",_),$(_)}})}},L=function(B,T){T.preventDefault(),w.dragEffect(H({eventType:B},v.getCursor(T)))},$=function(B){B.preventDefault(),v(document).removeEvent(["CropperEffectMove","CropperEffectEnd"])};v(h).removeEvent(["CropperMouseWheel","CropperTouchStart","CropperMouseDown"]).addEvent({eventID:"CropperMouseWheel",eventType:"wheel",callback:B=>{B.preventDefault();let T=Number(B.wheelDelta*.04),_=w.scale.current+T;_=Math.max(_,w.scale.min),_=Math.min(_,w.scale.max),s(_)},options:{passive:!1}}).addEvent({eventType:"touchstart",eventID:"CropperTouchStart",callback:X,options:{passive:!1}}).addEvent({eventType:"mousedown",eventID:"CropperMouseDown",callback:X,options:{passive:!1}}),setTimeout(()=>{V.fn.corner.stop()},1e3)})},[t.id]),O(()=>{var m;let c=(m=A.get(p))==null?void 0:m.Instance;c&&c.updateScale(y)},[y]),O(()=>{var m;let c=(m=A.get(p))==null?void 0:m.Instance;c&&c.updateFilter({grayScale:S,tone:x,rotate:n})},[S,x,n]),o(W.Body,{borderRadius:0,height:"viewHeight",width:"viewWidth",children:f(k,{className:[U("Wrap"),U("Use_"+a)].join(" "),gap:0,height:1,position:"relative",overflow:"hidden",borderRadius:"inherit",children:[o(P,{flexSizing:0,overflow:"hidden",position:"relative",backgroundColor:"black",flexCenter:!0,freeCSS:{zIndex:1},children:o("canvas",{style:{width:"100%",height:"100%"},width:2400,height:2400,className:U("Canvas"),id:"Canvas-"+p})}),f(I.Separate,{borderTop:!0,flexSizing:"none",backgroundColor:"layer.1",padding:1,verticalAlign:"unset",UnderBreakPointStyles:{flexType:"col"},children:[o(Z.SettingRegion,{DefaultOptions:u,val_scale:y,set_scale:s,val_tone:x,set_tone:b,val_grayScale:S,set_grayScale:C,val_rotate:n,set_rotate:g}),f(I.Right,{flexSizing:"none",children:[o(D.Button.Border.R,{isRounded:!0,onClick:()=>{e()},children:"\u9589\u3058\u308B"}),o(D.Button.Prime.R,{isRounded:!0,boxShadow:"3.remark",onClick:()=>z(void 0,null,function*(){var h;let c=(h=A.get(p))==null?void 0:h.Instance;if(!c)return;V.fn.mini.active("CropperExportation");let m=yield c.export();setTimeout(()=>{V.fn.mini.stop("CropperExportation"),i(m)},3e3)}),children:f(I.Center,{gap:"1/2",children:[o(V.White.R,{loaderID:"CropperExportation"}),"\u6C7A\u5B9A"]})})]})]})]})})},SettingRegion:d=>{let t=["","\u6696\u8272","\u5BD2\u8272","\u30BB\u30D4\u30A2","\u30B7\u30A2\u30F3","\u30DE\u30BC\u30F3\u30BF","\u30A4\u30A8\u30ED\u30FC","\u30AA\u30EA\u30B8\u30CA\u30EB1","\u30AA\u30EA\u30B8\u30CA\u30EB2","\u30AA\u30EA\u30B8\u30CA\u30EB3","\u30AA\u30EA\u30B8\u30CA\u30EB4"],l=i=>t[i]||"\u306A\u3057";return f(I.Left,{verticalAlign:"unset",flexWrap:!0,children:[f(k,{gap:"1/3",children:[o(F.Supplement,{children:"Rotate"}),f(I.Left,{flexChilds:"even",gap:"1/6",children:[o(D.Button.Border.S,{isRounded:!0,borderTopRightRadius:0,borderBottomRightRadius:0,onClick:()=>{let i=d.val_rotate-90;i<0&&(i+=360),d.set_rotate(i)},children:f(I.Center,{gap:"1/4",children:["90\xB0",o(M,{icon:ee})]})}),o(D.Button.Border.S,{isRounded:!0,borderTopLeftRadius:0,borderBottomLeftRadius:0,onClick:()=>{d.set_rotate((d.val_rotate+90)%360)},children:f(I.Center,{gap:"1/4",children:[o(M,{icon:te}),"90\xB0"]})})]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Zoom"}),f(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperZoomEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26},content:o(W.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M.Search,{fontColor:"5.translucent"}),"Zoom"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{override:"force",value:d.val_scale-100,min:d.DefaultOptions.scale.min-100,max:d.DefaultOptions.scale.max-100,step:25,onUpdateValidValue:({eventType:a,value:r})=>{v.interval.clear("Cropper.UpdateScale"),v.interval.standBy("Cropper.UpdateScale",250,()=>{d.set_scale(r+100)})},legends:{enable:!0,custom:a=>"x"+Math.round(100+a)/100}})]})})})},children:[d.val_scale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"GrayScale"}),f(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperGrayScaleEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26},content:o(W.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:J,fontColor:"5.translucent"}),"Gray Scale"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Slider,{value:d.val_grayScale,min:0,max:100,step:10,onUpdateValidValue:({value:a})=>{v.interval.clear("Cropper.GrayScale"),v.interval.standBy("Cropper.GrayScale",250,()=>{d.set_grayScale(a)})},legends:{enable:!0,custom:a=>a+"%"}})]})})})},children:[d.val_grayScale.rate(1,0),"%"]})]}),f(k,{gap:"1/3",freeCSS:{minWidth:12*6},children:[o(F.Supplement,{children:"Tone"}),o(D.Button.Border.S,{flexCenter:!0,isRounded:!0,flexSizing:0,onClick:i=>{let e="CropperToneEdit";Y.open({tipsID:e,gravityPoint:3,event:i,close_option:{parentBlur:!1},freeCSS:{minWidth:12*26,maxWidth:12*24},content:()=>{let a=[];for(let r=1;r<=10;r++)a.push({value:r,label:f(re,{children:[o(P,{ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+r)].join(" ")}),o(P,{textAlign:"left",flexSizing:0,children:l(r)})]})});return o(W.Body,{children:f(k,{padding:1.5,children:[f(I.Separate,{children:[o(F.Paragraph,{children:f(I.Center,{gap:"1/2",children:[o(M,{icon:Q,fontColor:"5.translucent"}),"Tone"]})}),o(D.Button.Sub.R,{color:"cloud",ssSphere:2.5,onClick:()=>{Y.close(e)},children:o(M.Times,{})})]}),o(P,{borderBottom:!0,opacity:"low"}),o(q.Radio.Normal,{value:d.val_tone,gap:"1/2",cellStyles:{fontColor:"3.blur"},options:[{value:0,label:o(P,{flexSizing:0,textAlign:"center",children:"\u306A\u3057"})},...a],onUpdateValidValue:({value:r})=>{d.set_tone(r[0])}})]})})}})},children:f(I.Center,{gap:"1/2",children:[o(P,{boxShadow:"2.remark",ssSphere:1,className:[U("ToneBall"),U("ToneBall_"+d.val_tone)].join(" ")}),l(d.val_tone)]})})]})]})}},G={openDialogNEdit:d=>z(void 0,null,function*(){let t=yield q.Filer.fn.openDialog({accept:"image",multiple:!1});G.openEditor(H({imageFile:t[0]},d))}),openEditor:d=>z(void 0,null,function*(){let t="CropperImage";W.open({sheetID:t,type:"normal.middleCenter",size:"MAX",padding:0,margin:0,freeCSS:{maxWidth:"100vw"},content:o(Z.Core,{val_file:d.imageFile,options:d,finishedCallback:l=>{W.close(t),d.onProcessFinished(l)},abortCallback:()=>{W.close(t)}}),close_option:{escapeKeyDown:!1}})})};export{G as Cropper,G as default};

package/dist/fn/Effect/Fade.d.ts

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-import Box from '../../atoms/Box';
+import { Box } from '../../atoms';
 declare namespace FadeIn {
-    type Input = Box.Input & {
+    type Input = Box.DefaultInput & {
         animationTime?: number;
         animationDelay?: number;
     };
 }
 declare const FadeIn: React.FC<FadeIn.Input>;
 declare namespace FadeUp {
-    type Input = Box.Input & {
+    type Input = Box.DefaultInput & {
         animationTime?: number;
         animationDelay?: number;
     };

package/dist/fn/Effect/Fade.js

@@ -1 +1 @@
-import{b as a,c as i,d as s}from"../../chunk-C5N2D3ZX.js";import{jsx as y}from"react/jsx-runtime";import u from"@mingoo/jsmin";import{$$fromRoot as d}from"../../@utils";import{useState as I,useEffect as l}from"react";import f from"../../atoms/Box";const D=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:c=u.uuid.gen()}=n,e=s(n,["animationDelay","animationTime","componentID"]),[t]=I(c);return l(()=>{setTimeout(()=>{let o=d('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1})},p)},[]),y(f,i(a({},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))},S=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:c=u.uuid.gen()}=n,e=s(n,["animationDelay","animationTime","componentID"]),[t]=I(c);return l(()=>{setTimeout(()=>{let o=d('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1,paddingTop:0})},p)},[]),y(f,i(a({paddingTop:2},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))};export{D as FadeIn,S as FadeUp};
+import{b as a,c as i,d as c}from"../../chunk-C5N2D3ZX.js";import{jsx as D}from"react/jsx-runtime";import s from"@mingoo/jsmin";import{$$fromRoot as d}from"../../@utils";import{useState as l,useEffect as f}from"react";import{Box as I}from"../../atoms";const y=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:u=s.uuid.gen()}=n,e=c(n,["animationDelay","animationTime","componentID"]),[t]=l(u);return f(()=>{setTimeout(()=>{let o=d('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1})},p)},[]),D(I,i(a({},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))},S=m=>{let n=m,{animationDelay:p=100,animationTime:r=300,componentID:u=s.uuid.gen()}=n,e=c(n,["animationDelay","animationTime","componentID"]),[t]=l(u);return f(()=>{setTimeout(()=>{let o=d('[data-component-id="'+t+'"]');o[0]&&o.css({transition:r+"ms"}).await(1).css({opacity:1,paddingTop:0})},p)},[]),D(I,i(a({paddingTop:2},e),{freeCSS:i(a({},e.freeCSS),{opacity:0}),componentID:t}))};export{y as FadeIn,S as FadeUp};

package/dist/fn/Effect/Pudding.js

@@ -1 +1 @@
-import"../../chunk-C5N2D3ZX.js";import t from"@mingoo/jsmin";import{Config as a}from"../../@utils";import{EffectClasses as e}from"../../@styles/componentClasses";const d={Wrapper:()=>(typeof window=="undefined"||t(a.get().appRoot).addEvent({eventType:"click",eventID:"PuddingClick",target:".eff_pudding",callback:function(n){t(n.target).removeClass(e("PuddingEffect")).await(1).addClass(e("PuddingEffect")).await(510).removeClass(e("PuddingEffect"))}}),null)};export{d as Pudding,d as default};
+import"../../chunk-C5N2D3ZX.js";import t from"@mingoo/jsmin";import{Config as n}from"../../@utils";import{EffectClasses as e}from"../../@styles/componentClasses";const d={Wrapper:()=>(typeof window=="undefined"||t(n.get().appRoot).addEvent({eventType:"click",eventID:"PuddingClick",target:'[data-effect-pudding="1"]',callback:function(a){t(a.target).removeClass(e("PuddingEffect")).await(1).addClass(e("PuddingEffect")).await(510).removeClass(e("PuddingEffect"))}}),null)};export{d as Pudding,d as default};

package/dist/fn/Effect/Ripple.js

@@ -1,3 +1,3 @@
-import"../../chunk-C5N2D3ZX.js";import e from"@mingoo/jsmin";import{Config as u}from"../../@utils";import{EffectClasses as n}from"../../@styles/componentClasses";let f="eff_ripple";const i={Start:t=>{let l=e.Time().ms,o=t.target,p=e(o);if(!p[0])return;let s=p.findClass(/^eff_ripple-/)[0];if(!s)return;let r=s.split("-")[1],a="RippleWrap-"+e.uuid.gen(),{left:d,top:E,height:I,width:R}=p.position(),{pageXOffset:h,pageYOffset:T}=e.getScreenSize(),{x:g,y}=e.getCursor(t),c=Math.min(R*1.5,300),M=Math.max(g-(d+h),0),C=Math.max(y-(E+T),0),m={RippleElement:p,startedAt:l,size:c};e(document).addEvent({eventID:"RippleMouseUp",eventType:"mouseup",callback:()=>{i.End(m)}}).addEvent({eventID:"RippleTouchEnd",eventType:"touchend",callback:()=>{setTimeout(()=>{i.End(m)},20)}}),e(p).addClass([n("RippleElement"),n("Color_"+r)]).append(`<div class="${n("RippleWrap")}" id="${a}">
+import"../../chunk-C5N2D3ZX.js";import e from"@mingoo/jsmin";import{Config as m}from"../../@utils";import{EffectClasses as n}from"../../@styles/componentClasses";const a={RippleElementTag:'[data-effect-ripple="1"]',Start:p=>{let s=e.Time().ms,d=p.target,t=e(d);if(!t[0])return;let i=t.getAttribute("data-effect-tone");if(!i){let r=t.parent('[data-effect-ripple="1"]');if(!r[0])return;t=r,i=r.getAttribute("data-effect-tone")}if(!i)return;let l="RippleWrap-"+e.uuid.gen(),{left:o,top:c,height:b,width:E}=t.position(),{pageXOffset:R,pageYOffset:h}=e.getScreenSize(),{x:g,y:T}=e.getCursor(p),u=Math.min(E*1.5,300),M=Math.max(g-(o+R),0),y=Math.max(T-(c+h),0),f={RippleElement:t,startedAt:s,size:u};e(document).addEvent({eventID:"RippleMouseUp",eventType:"mouseup",callback:()=>{a.End(f)}}).addEvent({eventID:"RippleTouchEnd",eventType:"touchend",callback:()=>{setTimeout(()=>{a.End(f)},20)}}),e(t).addClass([n("RippleElement"),n("Color_"+i)]).append(`<div class="${n("RippleWrap")}" id="${l}">
   <div class="${n("Wave")}" />
-  </div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:w=>{i.End(m)}}).find("#"+a).find("."+n("Wave")).css({left:M,top:C}).await(10).css({height:c,width:c,opacity:".3",transition:".25s"})},End:t=>{let{RippleElement:l,startedAt:o,size:p}=t,r=e.Time().ms-o<=400?".75s":".55s",a=p*2.5;e(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),l.removeEvent(["RippleMouseOut"]).find("."+n("Wave")).css({height:a,width:a,opacity:"0",transition:r}).await(750).parent().callback(d=>{d.remove()})}},v={Wrapper:()=>(typeof window=="undefined"||e(u.get().appRoot).addEvent({eventType:"touchstart",eventID:"RippleTouchStart",target:"."+f,callback:t=>{i.Start(t)}}).addEvent({eventType:"mousedown",eventID:"RippleMouseDown",target:"."+f,callback:t=>{u.get().isTouchDevice||i.Start(t)}}),null)};export{v as Ripple,v as default};
+  </div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:r=>{a.End(f)}}).find("#"+l).find("."+n("Wave")).css({left:M,top:y}).await(10).css({height:u,width:u,opacity:".3",transition:".25s"})},End:p=>{let{RippleElement:s,startedAt:d,size:t}=p,l=e.Time().ms-d<=400?".75s":".55s",o=t*2.5;e(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),s.removeEvent(["RippleMouseOut"]).find("."+n("Wave")).css({height:o,width:o,opacity:"0",transition:l}).await(750).parent().callback(c=>{c.remove()})}},v={Wrapper:()=>(typeof window=="undefined"||e(m.get().appRoot).addEvent({eventType:"touchstart",target:a.RippleElementTag,callback:p=>{a.Start(p)}}).addEvent({eventType:"mousedown",eventID:"RippleMouseDown",target:a.RippleElementTag,callback:p=>{m.get().isTouchDevice||a.Start(p)}}),null)};export{v as Ripple,v as default};

package/dist/fn/Input/Autocomplete.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="react" />
+import { ReactElement } from '../../@declares';
+import { KeyValueDict } from '@mingoo/jsmin';
+import { InputTypes } from '.';
+declare namespace Autocomplete {
+    type Input = InputTypes.CoreInput<Value | Value[]> & React.DOMAttributes<HTMLInputElement> & {
+        label?: ReactElement;
+        tone?: InputTypes.BoxTone;
+        tabIndex?: number;
+        id?: string;
+        disabled?: boolean;
+        min?: number;
+        max?: number;
+        multiSelect?: boolean;
+        value?: Value | Value[];
+        options: Option[];
+        emptySelect?: boolean;
+        leftIndicator?: ReactElement | false;
+        rightIndicator?: ReactElement | false;
+        leftIcon?: ReactElement | false;
+        rightIcon?: ReactElement | false;
+        SearchInput?: boolean;
+        SearchInputPlaceholder?: string;
+        DynamicOptionsOnSearch?: DynamicOptionsOnSearch;
+        SelectedComponent?: {
+            (p: SelectedComponentProps): JSX.Element;
+        };
+        SelectorComponent?: {
+            (p: SelectorComponentProps): JSX.Element;
+        };
+        SelectorGravityPoint?: number;
+    };
+    type Value = string | number | boolean | KeyValueDict | void | null;
+    type Option = {
+        type?: 'selector';
+        label: ReactElement;
+        value: Value;
+        searchValue?: string;
+    } | {
+        type: 'label';
+        label: ReactElement;
+        value?: Value;
+        searchValue?: string;
+    };
+    type OptionsDict = {
+        [key: string]: Option;
+    };
+    type DynamicOptionsOnSearch = {
+        (k: string): Promise<Option[]>;
+    };
+    type SelectorComponentProps = {
+        option: Option;
+        isSelected: boolean;
+        isFocused: boolean;
+        addCallback(): void;
+    };
+    type SelectedComponentProps = {
+        children: ReactElement;
+        value: Value;
+        label: ReactElement;
+        removeCallback(event: any): void;
+    };
+    type WrapperStates = {
+        rootStates: Input & {
+            value: Value[];
+        };
+        val_selectorOpen: boolean;
+        set_selectorOpen: React.Dispatch<React.SetStateAction<boolean>>;
+        val_options: Option[];
+        set_options: React.Dispatch<React.SetStateAction<Option[]>>;
+        val_optionFocused: Value;
+        set_optionFocused: React.Dispatch<React.SetStateAction<Value>>;
+        val_optionsDict: OptionsDict;
+        set_optionsDict: React.Dispatch<React.SetStateAction<OptionsDict>>;
+        val_keyword: string;
+        set_keyword: React.Dispatch<React.SetStateAction<string>>;
+        val_focus: boolean;
+        set_focus: React.Dispatch<React.SetStateAction<boolean>>;
+        val_status: InputTypes.Status.Plain<Value[]>;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
+        val_validate: InputTypes.Validation.Result;
+        set_validate: React.Dispatch<React.SetStateAction<InputTypes.Validation.Result>>;
+    };
+}
+declare const Autocomplete: React.FC<Autocomplete.Input>;
+export { Autocomplete, Autocomplete as default };

package/dist/fn/Input/Autocomplete.js

@@ -0,0 +1 @@
+import{b as f,c as g,d as H,e as X}from"../../chunk-C5N2D3ZX.js";import{Fragment as J,jsx as a,jsxs as F}from"react/jsx-runtime";import{useState as y,useEffect as b,useRef as Z}from"react";import r from"@mingoo/jsmin";import{GenerateHTMLProps as ee,ExtractStyles as te,useStore as $}from"../../@utils";import{Box as T,Span as le,FAI as M,Column as oe}from"../../atoms";import{Text as E,Row as z}from"../../mols";import j from"../Button";import{Loader as ae}from"../Loader";import{Sheet as P}from"../Sheet";import{OptionalInputWrapper as ne,BoxWrapper as re,CoreEffects as W,DefaultStyles as ie}from"./core";import{InputAutocompleteClasses as x}from"../../@styles/componentClasses";import{InputLabel as se}from"./Label";import{RightIcon as Q}from".";function ue(e){let{value:t,states:o}=e,{required:l,options:c,min:u,max:d}=o;u=u||0,d=d||65535;let i=[],n=t.filter(p=>p!=="null").length;return l&&(n||i.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),n<u&&i.push({type:"invalid",label:u+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),n>d&&i.push({type:"invalid",label:d+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!i.filter(({type:p})=>p=="invalid").length,notice:i}}const R={InitOptions:e=>{let t=[];return e.forEach(o=>{let{type:l,label:c,value:u,searchValue:d}=o;t.push(g(f({},o),{searchValue:d||(r.is.string(c)?c:""),type:l||"selector",value:r.JsonTo(u)}))}),t},FilterSelectableOptions:(e,t)=>{let o=e.val_options;if(t||(o=e.val_options.filter(l=>l.type!="label")),e.val_keyword){let l=e.val_keyword.toLower().replace(/ /g,"");o=o.filter(c=>(c.searchValue||"").toLower().replace(/ /g,"").includes(l))}return o}},w={Shallow:e=>{let{rootStates:t,val_status:o}=e,l=te(t);return a(T,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(E.Description,g(f({className:t.className},l),{position:"absolute",width:1,freeCSS:g(f({},l.freeCSS),{color:"orange"}),"data-id":"shallow_"+o.componentID,children:a(T,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>{let{rootStates:t}=e,G=t,{tone:o,required:l,form:c,className:u,multiSelect:d,enableFormSubmit:i,checkValidationAtFirst:n,onValidate:p,onUpdateValue:s,onUpdateValidValue:m,value:v="",options:I,leftIndicator:S,rightIndicator:_,leftIcon:C,rightIcon:D,componentID:O,status_id:h,wrapStyles:B,emptySelect:A,SearchInput:K,SearchInputPlaceholder:U,SelectedComponent:q,SelectorComponent:N,SelectorGravityPoint:L,DynamicOptionsOnSearch:ce}=G,k=H(G,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorGravityPoint","DynamicOptionsOnSearch"]);return a(J,{children:F("div",g(f({tabIndex:0},k),{"data-disabled":t.disabled,"data-name":t.name,"data-value":r.JsonTo(e.val_status.dataValue),"data-form":c,"data-show-validation":W.isShowValidation(e.val_validate,e.val_status,!!n),"data-validation":e.val_validate.ok,"data-component-id":e.val_status.componentID,"data-input-origin":e.val_status.componentID,"data-focus":!!e.val_focus,"data-input-type":"autocomplete-"+(d?"multi":"single"),className:[u,x("Core")].join(" "),onMouseDown:V=>{t.disabled||e.val_focus&&(V.stopPropagation(),V.preventDefault())},onFocus:V=>{t.disabled||e.set_focus(!0)},onClick:V=>{t.disabled||(k!=null&&k.onClick&&(k==null||k.onClick(V)),!!r(V.target).parent("."+x("SelectedCell")).length)||e.set_focus(!0)},onKeyDown:V=>{i&&W.SubmitForm(V)},children:[F(z.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(w.Selected,f({},e)),a(le,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),a(w.SearchInput,f({},e))]}),a(w.Selector,f({},e))]}))})},SearchInput:e=>{let{rootStates:t}=e;return b(()=>{var l;if(t.disabled||!e.val_focus)return;let o=R.FilterSelectableOptions(e);e.set_optionFocused(((l=o[0])==null?void 0:l.value)||null)},[e.val_keyword]),b(()=>{e.set_selectorOpen(e.val_focus),e.val_focus&&r("#SearchInput_"+t.componentID).focus()},[e.val_focus]),b(()=>{e.val_status.eventType!="init"&&(t.max==e.val_status.dataValue.length?(e.set_focus(!1),e.set_selectorOpen(!1)):r("#SearchInput_"+t.componentID).focus())},[e.val_status.dataValue]),t.disabled||!e.val_focus?null:a(T,{id:"SearchInput_"+t.componentID,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_focus?"max":"trans","data-form":t.form,transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onKeyDown:o=>{let{key:l,metaKey:c,ctrlKey:u}=o,d=c||u;l=="Escape"||l=="Tab"?e.set_focus(!1):l==" "?r.scope(()=>{e.val_selectorOpen||e.val_keyword||(o.preventDefault(),e.set_selectorOpen(!0))}):l=="Backspace"?r.scope(()=>{if(e.val_keyword)return;let i=[...e.val_status.dataValue];i.pop(),e.set_status(n=>g(f({},n),{dataValue:i,eventType:"update",eventID:r.uuid.gen()}))}):l=="Enter"&&r.scope(()=>{if(!e.val_selectorOpen)return e.set_selectorOpen(!0);if(!e.val_optionFocused)return;let i=e.val_options.find(p=>p.value==e.val_optionFocused);if(!i)return;let{value:n}=i;e.set_status(p=>{let s=[...p.dataValue];return r.scope(()=>{if(n==="null")return s=[];p.dataValue.includes(n)?s=s.filter(v=>v!==n):t.multiSelect?s.push(n):s=[n]}),g(f({},p),{dataValue:s,eventType:"update",eventID:r.uuid.gen()})}),e.set_keyword("")}),r.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(l))return;if(o.preventDefault(),!e.val_selectorOpen)return e.set_selectorOpen(!0);let i=l=="ArrowDown"?1:-1,n=R.FilterSelectableOptions(e),p=n.length-1,s=null;r.scope(()=>{var m,v,I,S;if(i==1){if(s=((m=n[0])==null?void 0:m.value)||null,e.val_optionFocused==null)return;if(d){s=n[p].value||s||null;return}let _=n.findIndex(C=>C.value==e.val_optionFocused);if(_==-1)return;s=((v=n[_+1])==null?void 0:v.value)||s||null}else{if(s=n[p].value||null,e.val_optionFocused==null)return;if(d){s=((I=n[0])==null?void 0:I.value)||s||null;return}let _=n.findIndex(C=>C.value==e.val_optionFocused);if(_==-1)return;s=((S=n[_-1])==null?void 0:S.value)||s||null}}),e.set_optionFocused(s)}),t.enableFormSubmit&&W.SubmitForm(o)},onChange:o=>{let c=o.target.value;e.set_keyword(c)}},"searchInput")},Selector:e=>{let{rootStates:t}=e,o="autocomplete-sheet-"+t.componentID;return b(()=>{if(t.disabled)return;let l="autocomplete-click-"+t.componentID;e.val_focus?r(document).addEvent({eventID:l,eventType:"click",callback:c=>{let u=r(c.target),d=!!r(u).parent("."+x("Core")).length;r(u).parent("."+x("Selector")).length||d||e.set_focus(!1)}}):(r(document).removeEvent([l]),e.set_keyword(""))},[e.val_focus]),b(()=>{if(e.val_selectorOpen){let l=r('[data-input-origin="'+t.componentID+'"]');if(!l)return;P.open({sheetID:o,type:"custom",parent:l[0],marginTop:"1/4",gravityPoint:t.SelectorGravityPoint||22,close_option:{aroundClick:!1},content:a(w.SelectorBody,f({},e))})}else P.close(o)},[e.val_selectorOpen]),b(()=>{if(t.disabled||!e.val_focus)return;P.customSheet.reposition(o);let l=$.get("refresh-autocomplete-selector-"+t.componentID);l&&l(e)},[e.val_focus,e.val_options,e.val_status.dataValue,e.val_keyword,e.val_optionFocused]),null},SelectorBody:e=>{let[t,o]=y(e),{rootStates:l}=t,[c,u]=y("idle"),[d,i]=y("idle");b(()=>{$.set({["refresh-autocomplete-selector-"+l.componentID]:m=>{o(m)}})},[]),b(()=>{if(!t.val_focus||!l.DynamicOptionsOnSearch)return;if(c=="idle")return u("ok");i("fetch");let m="autocomplete-search-"+l.componentID;r.interval.clear(m),r.interval.standBy(m,300,()=>X(void 0,null,function*(){let v=yield l.DynamicOptionsOnSearch(t.val_keyword);i("idle");let I=R.InitOptions(v||[]);t.set_options(I)}))},[t.val_keyword]);let n=[],p=R.FilterSelectableOptions(t,!0),s=R.FilterSelectableOptions(t);return p.forEach((m,v)=>{let{type:I,value:S}=m,_=t.val_optionFocused==S,C=t.val_status.dataValue.includes(S),D=l.SelectorComponent;n.push(a(D,{option:m,isFocused:_,isSelected:C,addCallback:()=>{t.set_status(O=>{let h=[...O.dataValue];return r.scope(()=>{if(S==="null")return h=[];O.dataValue.includes(S)?h=h.filter(A=>A!==S):l.multiSelect?h.push(S):h=[S]}),g(f({},O),{dataValue:h,eventType:"update",eventID:r.uuid.gen()})})}},String(S)||r.uuid.gen()))}),s.length||(n=[a(E.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),d=="fetch"&&(n=[F(z.Left,{padding:1,fontColor:"3.blur",children:[a(ae.Theme.R,{showInitial:!0}),a(E.Supplement,{children:"Loading..."})]},"loader")]),a(P.Body,{className:x("Selector"),ssCardBox:!0,borderRadius:"3.tone.tertiary",boxShadow:"1.normal",freeCSS:{minWidth:12*18},children:a(oe,{gap:0,padding:[1,0],children:n})})},Selected:e=>{let{rootStates:t,val_status:o,set_status:l,val_optionsDict:c}=e,u=[];return o.dataValue.forEach(d=>{let i=c[String(d)];if(!i)return;let n=t.SelectedComponent,p=i.label;i.value==="null"&&(p=""),u.push(a(T,{className:x("SelectedCell"),children:a(n,{value:i.value,label:p,children:p,removeCallback:s=>{if(s.stopPropagation(),s.preventDefault(),t.disabled)return;let m=[...o.dataValue];m=m.filter(v=>v!==d),l(v=>g(f({},v),{dataValue:m,eventType:"update",eventID:r.uuid.gen()}))}})},String(i.value)))}),a(J,{children:u})},Core:e=>{let{onUpdateValue:t,onUpdateValidValue:o,value:l}=e,c={componentID:e.componentID||"",dataValue:l,eventType:"init",eventID:r.uuid.gen()},[u,d]=y(!1),[i,n]=y(""),[p,s]=y(e.options),[m,v]=y(e.value[0]||null),[I,S]=y({}),[_,C]=y(!1),[D,O]=y(c),[h,B]=y({ok:!1,notice:[]}),A=Z(!1);b(()=>{A.current?s(e.options):A.current=!0},[e.options]),b(()=>{if(!p.length)return;let q=[...p],N=f({},I);q.forEach(L=>{L.type!="label"&&(N[String(L.value)]=L)}),S(N)},[p]);let K={rootStates:e,val_selectorOpen:u,set_selectorOpen:d,val_options:p,set_options:s,val_optionFocused:m,set_optionFocused:v,val_optionsDict:I,set_optionsDict:S,val_keyword:i,set_keyword:n,val_focus:_,set_focus:C,val_status:D,set_status:O,val_validate:h,set_validate:B};W.CommonEffects({type:"autocomplete",states:e,val_status:D,set_status:O,val_validate:h,set_validate:B,onUpdateValue:t,onUpdateValidValue:o,DefaultValidation:ue,ExtraOverrideStates:{dataValue:l,formatValue:l}});let U=_||D.dataValue.length&&D.dataValue[0]!=="null";return F(re,{val_status:D,set_status:O,val_validate:h,states:e,children:[a(se,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:U}),a(w.Shallow,f({},K)),a(w.Button,f({},K))]})}},Y=e=>{let t=f({},e);t=g(f({value:[],min:0,max:65535,multiSelect:!0,padding:1,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:l,isSelected:c,isFocused:u,addCallback:d})=>l.type=="selector"?a(j.Button.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:c||u,isActiveStyles:u?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"},onClick:i=>{d()},children:a(E.Supplement,{paddingLeft:c?"1/2":0,transition:"short",children:l.label})}):a(J,{children:l.label}),SelectedComponent:({value:l,label:c,removeCallback:u})=>F(z.Left,{ssCardBox:"cloud",backgroundColor:"layer.3",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[a(T,{padding:[0,"1/4"],children:c}),a(j.Button.Sub.R,{color:"cloud",fontColor:"white",backgroundColor:"layer.6",isRounded:!0,padding:"1/4",onClick:u,children:a(M.Times,{ssSphere:1})})]},"test")},t),{freeCSS:f({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=1,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:a(E.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]);let o=[];return t.value=r.flatArray(t.value||null),t.value.forEach((l,c)=>{o.push(r.JsonTo(l))}),t.value=o,t.options=R.InitOptions(t.options),r.is.nullish(t.rightIcon)&&(t.rightIcon=a(Q,{freeCSS:{pointerEvents:"none"},children:a(M.Search,{})}),t.disabled&&(t.rightIcon=a(Q,{fontColor:"5.translucent",freeCSS:{pointerEvents:"none"},children:a(M.Ban,{})}))),t.rightIcon&&(t=f({paddingRight:3},t)),t.leftIcon&&(t=f({paddingLeft:3},t)),a(ne,{componentID:t.componentID,children:w.Core,states:ee(ie.Boxish(t))})};export{Y as Autocomplete,Y as default};

package/dist/fn/Input/Checker.d.ts

@@ -1,4 +1,4 @@
-import { TagProperty, ReactElement } from '../../@declares';
+import { StyleTags, ReactElement } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace Checker {
     type Input = InputTypes.CoreInput & {
@@ -7,9 +7,9 @@ declare namespace Checker {
         tabIndex?: number;
         disabled?: boolean;
         value?: boolean;
-        cellStyles?: TagProperty.PropsNFreeCSS;
+        cellStyles?: StyleTags.PropsNFreeCSS;
         cellClassName?: string;
-        cellCheckedStyles?: TagProperty.PropsNFreeCSS;
+        cellCheckedStyles?: StyleTags.PropsNFreeCSS;
         cellCheckedClassName?: string;
     };
 }

package/dist/fn/Input/Checker.js

@@ -1 +1 @@
-import{b as l,c as a}from"../../chunk-C5N2D3ZX.js";import{jsx as c}from"react/jsx-runtime";import n from"./List";const o=e=>(e=l({},e),c(n.Plain,a(l({},e),{tone:"plain",icon:!0,type:"checker",iconType:"checkbox",value:e.value?!0:null,cellStyles:l({padding:0},e.cellStyles),options:[{value:!0,label:e.label}],onUpdateValidValue:t=>{let r=!!t.value[0];e.onUpdateValidValue&&e.onUpdateValidValue(a(l({},t),{value:r}))}})));export{o as Checker,o as default};
+import{b as l,c as a}from"../../chunk-C5N2D3ZX.js";import{jsx as r}from"react/jsx-runtime";import{Checkbox as s}from"./List";const n=e=>(e=l({},e),r(s,a(l({},e),{icon:!0,value:e.value?!0:null,cellStyles:l({padding:0},e.cellStyles),options:[{value:!0,label:e.label}],onUpdateValidValue:t=>{let o=!!t.value[0];e.onUpdateValidValue&&e.onUpdateValidValue(a(l({},t),{value:o}))}})));export{n as Checker,n as default};

package/dist/fn/Input/Contenteditable.js

@@ -1 +1 @@
-import{b as e,c as r,d as y}from"../../chunk-C5N2D3ZX.js";import{jsx as u}from"react/jsx-runtime";import{useState as T}from"react";import b from"@mingoo/jsmin";import{Wrapper as w,BoxWrapper as k,SubmitForm as F,CommonEffects as L,DefaultStyles as B}from"./core";function H(t){let{value:a,states:c}=t,{required:p}=c,n=[];return p&&!a&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:s})=>s=="invalid").length,notice:n}}const M=t=>{let v=t,{componentID:a,tone:c,required:p,form:n,value:s,enableFormSubmit:D,checkValidationAtFirst:W,onInput:m,onKeyDown:f,onValidate:q,onUpdateValue:S,onUpdateValidValue:g,children:C="",leftIndicator:A,rightIndicator:K,leftIcon:U,rightIcon:$,freeCSS:N,wrapStyles:P}=v,R=y(v,["componentID","tone","required","form","value","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","children","leftIndicator","rightIndicator","leftIcon","rightIcon","freeCSS","wrapStyles"]),V={componentID:a,dataValue:s,eventType:"init",eventID:b.uuid.gen()},[i,d]=T(V),[l,I]=T({ok:!1,notice:[]});return L({states:t,val_status:i,set_status:d,val_validate:l,set_validate:I,onUpdateValue:S,onUpdateValidValue:g,DefaultValidation:H}),u(k,{val_status:i,set_status:d,val_validate:l,states:t,children:u("div",r(e({contentEditable:!0,"data-form":n,"data-name":t.name,"data-input-type":"contenteditable","data-validation":l.ok,"data-value":i.dataValue,"data-component-id":i.componentID,onKeyDown:o=>{f&&f(o),D&&F(o)},onInput:o=>{let E=o.currentTarget,{innerHTML:z,innerText:x}=E;l.ok&&I({ok:!1,notice:[]}),d(_=>r(e({},_),{dataValue:x,eventType:"update",eventID:b.uuid.gen()})),m&&m(o)}},R),{children:C}))})},h=t=>{t=e({},t),t.rightIcon&&(t=e({paddingRight:3},t)),t.leftIcon&&(t=e({paddingLeft:3},t)),t=r(e({},t),{freeCSS:e({whiteSpace:"pre-wrap"},t.freeCSS)});let a=B.Boxish(t);return a.rows=a.rows||5,u(w,{componentID:t.componentID,children:M,states:a})};export{h as Contenteditable,h as default};
+import{b as e,c as r,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as p}from"react/jsx-runtime";import{useState as h}from"react";import b from"@mingoo/jsmin";import{GenerateHTMLProps as L}from"../../@utils";import{OptionalInputWrapper as F,BoxWrapper as H,CoreEffects as u,DefaultStyles as M}from"./core";function B(t){let{value:a,states:c}=t,{required:f}=c,n=[];return f&&!a&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:s})=>s=="invalid").length,notice:n}}const W=t=>{let y=t,{componentID:a,tone:c,required:f,form:n,value:s,enableFormSubmit:C,checkValidationAtFirst:D,onInput:m,onKeyDown:I,onValidate:q,onUpdateValue:g,onUpdateValidValue:V,children:E="",leftIndicator:A,rightIndicator:K,leftIcon:P,rightIcon:U,freeCSS:$,wrapStyles:G}=y,R=T(y,["componentID","tone","required","form","value","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","children","leftIndicator","rightIndicator","leftIcon","rightIcon","freeCSS","wrapStyles"]),w={componentID:a,dataValue:s,eventType:"init",eventID:b.uuid.gen()},[o,d]=h(w),[i,v]=h({ok:!1,notice:[]});return u.CommonEffects({type:"contenteditable",states:t,val_status:o,set_status:d,val_validate:i,set_validate:v,onUpdateValue:g,onUpdateValidValue:V,DefaultValidation:B}),p(H,{val_status:o,set_status:d,val_validate:i,states:t,children:p("div",r(e({contentEditable:!0,"data-form":n,"data-name":t.name,"data-input-type":"contenteditable","data-show-validation":u.isShowValidation(i,o,!!D),"data-validation":i.ok,"data-value":o.dataValue,"data-component-id":o.componentID,onKeyDown:l=>{I&&I(l),C&&u.SubmitForm(l)},onInput:l=>{let x=l.currentTarget,{innerHTML:N,innerText:_}=x;i.ok&&v({ok:!1,notice:[]}),d(k=>r(e({},k),{dataValue:_,eventType:"update",eventID:b.uuid.gen()})),m&&m(l)}},R),{children:E}))})},S=t=>{t=e({rows:5},t),t.rightIcon&&(t=e({paddingRight:3},t)),t.leftIcon&&(t=e({paddingLeft:3},t)),t=r(e({},t),{freeCSS:e({whiteSpace:"pre-wrap"},t.freeCSS)});let a=L(M.Boxish(t));return p(F,{componentID:t.componentID,children:W,states:a})};export{S as Contenteditable,S as default};

package/dist/fn/Input/DigitCharacters.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TagProperty } from '../../@declares';
+import { StyleTags } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace DigitCharacters {
     type Input = InputTypes.CoreInput & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
@@ -10,7 +10,7 @@ declare namespace DigitCharacters {
         tabIndex?: number;
         id?: string;
         value?: string | number;
-        listStyles?: TagProperty.PropsNFreeCSS;
+        listStyles?: StyleTags.PropsNFreeCSS;
     };
 }
 declare const DigitCharacters: React.FC<DigitCharacters.Input>;

package/dist/fn/Input/DigitCharacters.js

@@ -1 +1 @@
-import{b as t,c as m,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as h,jsxs as Z}from"react/jsx-runtime";import{useState as V}from"react";import I from"@mingoo/jsmin";import{$$fromRoot as K}from"../../@utils";import{Wrapper as O,BoxWrapper as q,SubmitForm as U,CommonEffects as j,DefaultStyles as z}from"./core";import G from"../../atoms/Flex";import J from"./Hidden";import{InputClasses as F}from"../../@styles/componentClasses";function Q(e){let{value:a,states:s}=e,{required:u,numericOnly:o=!1,digits:f}=s,l=[];return u&&!a&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),a&&(o&&a.match(/\D/)&&l.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),a.length!=f&&l.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!l.filter(({type:p})=>p=="invalid"||p=="warn").length,notice:l}}const X=(e,a="")=>{let s=String(a),u=[];for(let o=0;o<e;o++)u[o]=s[o]||"";return{formatValue:u,dataValue:s}},w=(e="")=>{let a=e,s=a.join("");return{formatValue:a,dataValue:s}},Y=e=>{let v=e,{tone:a,required:s,form:u,name:o,className:f="",digits:l,numericOnly:p=!1,enableFormSubmit:_,checkValidationAtFirst:ee,onChange:te,onKeyDown:ae,onValidate:ne,onUpdateValue:k,onUpdateValidValue:A,value:N="",override:ie,freeCSS:re,wrapStyles:oe,combineInput:le,componentID:se,listStyles:M}=v,B=T(v,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","override","freeCSS","wrapStyles","combineInput","componentID","listStyles"]),E=m(t({componentID:e.componentID||""},X(l,N)),{eventType:"init",eventID:I.uuid.gen()}),[i,g]=V(E),[D,H]=V({ok:!1,notice:[]});j({states:e,val_status:i,set_status:g,val_validate:D,set_validate:H,onUpdateValue:k,onUpdateValidValue:A,DefaultValidation:Q});let S=[];for(let n=0;n<l;n++){let L=i.formatValue[n],P={},b=f;e.combineInput&&(b=[f,F("DigitCharacterCell"),F("Combined")].join(" ")),S.push(h("input",{type:"text",inputMode:p?"numeric":e.inputMode||"text",value:L,"data-form-name":u,id:"Digit-"+n+"-"+i.componentID,className:b,style:t(t({},e.style),P),onKeyDown:C=>{let{key:y,code:W}=C;if(y=="Tab")return;C.preventDefault();let d=null;if(y=="Backspace"){let r=i.formatValue;r[n]="",g(c=>m(t(t({},c),w(r)),{eventType:"update",eventID:I.uuid.gen()})),d=n-1}else if(["ArrowLeft","ArrowRight"].includes(y)){let r=+(y=="ArrowRight")*2-1;d=n+r}else _&&U(C),(()=>{let r=W.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let c=r[2]||r[3]||r[4];if(p&&!c.match(/\d/)||!c)return;let x=i.formatValue;x[n]=c,g($=>m(t(t({},$),w(x)),{eventType:"update",eventID:I.uuid.gen()})),d=n+1})();I.is.exist(d)&&K("#Digit-"+d+"-"+i.componentID).focus()},onChange:()=>{}},n))}return Z(q,{val_status:i,set_status:g,val_validate:D,states:e,children:[h(J,t({name:o,"data-input-type":"digitCharacters","data-form":u,"data-validation":D.ok,componentID:i.componentID,"data-value":i.dataValue},B)),h(G,m(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},M),{children:S}))]})},R=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=m(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let a=z.Boxish(e);return h(O,{componentID:e.componentID,children:Y,states:a})};export{R as DigitCharacters,R as default};
+import{b as t,c as m,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as h,jsxs as Z}from"react/jsx-runtime";import{useState as V}from"react";import I from"@mingoo/jsmin";import{$$fromRoot as P,GenerateHTMLProps as q}from"../../@utils";import{OptionalInputWrapper as U,BoxWrapper as j,CoreEffects as F,DefaultStyles as z}from"./core";import{Flex as G}from"../../atoms";import J from"./Hidden";import{InputClasses as w}from"../../@styles/componentClasses";function Q(e){let{value:a,states:s}=e,{required:u,numericOnly:l=!1,digits:f}=s,o=[];return u&&!a&&o.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),a&&(l&&a.match(/\D/)&&o.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),a.length!=f&&o.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!o.filter(({type:p})=>p=="invalid"||p=="warn").length,notice:o}}const X=(e,a="")=>{let s=String(a),u=[];for(let l=0;l<e;l++)u[l]=s[l]||"";return{formatValue:u,dataValue:s}},R=(e="")=>{let a=e,s=a.join("");return{formatValue:a,dataValue:s}},Y=e=>{let v=e,{tone:a,required:s,form:u,name:l,className:f="",digits:o,numericOnly:p=!1,enableFormSubmit:k,checkValidationAtFirst:ee,onChange:te,onKeyDown:ae,onValidate:ne,onUpdateValue:A,onUpdateValidValue:M,value:N="",override:ie,freeCSS:re,wrapStyles:le,combineInput:oe,componentID:se,listStyles:E}=v,H=T(v,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","override","freeCSS","wrapStyles","combineInput","componentID","listStyles"]),L=m(t({componentID:e.componentID||""},X(o,N)),{eventType:"init",eventID:I.uuid.gen()}),[i,g]=V(L),[D,B]=V({ok:!1,notice:[]});F.CommonEffects({type:"textfield",states:e,val_status:i,set_status:g,val_validate:D,set_validate:B,onUpdateValue:A,onUpdateValidValue:M,DefaultValidation:Q});let S=[];for(let n=0;n<o;n++){let W=i.formatValue[n],O={},b=f;e.combineInput&&(b=[f,w("DigitCharacterCell"),w("Combined")].join(" ")),S.push(h("input",{type:"text",inputMode:p?"numeric":e.inputMode||"text",value:W,"data-form-name":u,id:"Digit-"+n+"-"+i.componentID,className:b,style:t(t({},e.style),O),onKeyDown:C=>{let{key:y,code:$}=C;if(y=="Tab")return;C.preventDefault();let d=null;if(y=="Backspace"){let r=i.formatValue;r[n]="",g(c=>m(t(t({},c),R(r)),{eventType:"update",eventID:I.uuid.gen()})),d=n-1}else if(["ArrowLeft","ArrowRight"].includes(y)){let r=+(y=="ArrowRight")*2-1;d=n+r}else k&&F.SubmitForm(C),(()=>{let r=$.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!r)return;let c=r[2]||r[3]||r[4];if(p&&!c.match(/\d/)||!c)return;let x=i.formatValue;x[n]=c,g(K=>m(t(t({},K),R(x)),{eventType:"update",eventID:I.uuid.gen()})),d=n+1})();I.is.exist(d)&&P("#Digit-"+d+"-"+i.componentID).focus()},onChange:()=>{}},n))}return Z(j,{val_status:i,set_status:g,val_validate:D,states:e,children:[h(J,t({name:l,"data-input-type":"digitCharacters","data-form":u,"data-validation":D.ok,componentID:i.componentID,"data-value":i.dataValue},H)),h(G,m(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},E),{children:S}))]})},_=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=m(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let a=q(z.Boxish(e));return h(U,{componentID:e.componentID,children:Y,states:a})};export{_ as DigitCharacters,_ as default};

package/dist/fn/Input/Filer.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { TagProperty } from '../../@declares';
+import { StyleTags } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace Filer {
     type Methods = React.FC<Input> & FNs;
@@ -13,7 +13,7 @@ declare namespace Filer {
         fileNameEdit?: boolean;
         systemOnly?: boolean;
         accept?: Accept;
-        cellStyles?: TagProperty.States;
+        cellStyles?: StyleTags.States;
         cellClassName?: string;
     };
     type CustomFile = File & {

package/dist/fn/Input/Filer.js

@@ -1 +1 @@
-import{b as v,c as b,d as Q,e as $}from"../../chunk-C5N2D3ZX.js";import{Fragment as te,jsx as n,jsxs as r}from"react/jsx-runtime";import{useState as j,useEffect as le}from"react";import S from"@mingoo/jsmin";import{$$fromRoot as P,useStore as X,GenerateHTMLProps as ne}from"../../@utils";import F from"../../atoms/Box";import L from"../../atoms/FAI";import M from"../../atoms/Flex";import Y from"../../mols/Column";import ie from"../../mols/Row";import W from"../Button";import H from"../Snackbar";import{Wrapper as oe,BoxWrapper as se,CommonEffects as re,DefaultStyles as pe}from"./core";import ue from"./Text";import{InputFilerClasses as c}from"../../@styles/componentClasses";import{faCloudArrowUp as me}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function de(e){let{value:t,states:a}=e,{required:s}=a,l=[];return s&&!t.length&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!l.filter(({type:p})=>p=="invalid").length,notice:l}}const ee={List:e=>{let{files:t,states:a,val_status:s,set_status:l}=e,p=(a.limit||1)-s.dataValue.length,m=t.map((u,B)=>n(ee.Cell,{index:B,file:u,className:a.cellClassName,val_status:s,set_status:l,fileNameEdit:a.fileNameEdit},u.name));return p>0&&m.push(n("label",{className:[a.cellClassName,c("AddButton")].join(" "),"data-component-id":s.componentID,htmlFor:a.id,tabIndex:a.tabIndex,onKeyDown:u=>{let{key:B}=u;a.tabIndex!=-1&&[" ","Enter"].includes(B)&&P("#"+a.id).click()},children:r(ie.Center,{padding:["1/3",0],children:[n(F,{isRounded:!0,className:c("AddIcon"),children:n(L,{icon:me,className:c("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),r(F,{children:[r(F,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",p,")"]}),n(F,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})},"AddButton")),n(Y,{flexSizing:"auto",className:a.className,children:m})},Cell:e=>{let{index:t,file:a,className:s,val_status:l,set_status:p,fileNameEdit:m=!0}=e,{name:u,size:B,type:i}=a,[A,N]=j(!1),T=S.uuid.gen(),V=B.rank(),[K,O]=u.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),o="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?o=i.replace(/image\//,""):i.match(/pdf/)?o="PDF":i.match(/csv/)?o="CSV":i.match(/spreadsheet/)?o="SpreadSheet":i.match(/presentation/)?o="PowerPoint":i.match(/word/)?o="Word":i.match(/zip/)?o="Zip":i.match(/powerpoint/)?o="PowerPoint":i.match(/html/)?o="HTML":i.match(/js/)?o="JavaScript":i.match(/css/)?o="CSS":i.match(/text\/plain/)&&(o="\u30C6\u30AD\u30B9\u30C8"),le(()=>{A&&setTimeout(()=>{P("#"+T).focus()},100)},[A]),r(M,{verticalAlign:"center",flexWrap:!1,gap:1,className:s,children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),r(F,{flexSizing:0,children:[n(F,{children:n(M,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:c("FileName"),children:A?n(te,{children:r(Y,{flexSizing:0,gap:"1/2",children:[r(M,{gap:"2/3",verticalAlign:"center",children:[n(ue.Normal,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:T,form:"form-"+T,enableFormSubmit:!0,value:K,onKeyDown:g=>{let{key:_}=g;_=="Escape"&&N(!1)}}),r(F,{children:[". ",O]})]}),r(M,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[n(W.Button.Sub.R,{padding:["2/3",1],onClick:()=>{N(!1)},children:"\u9589\u3058\u308B"}),n(W.Button.Prime.R,{padding:["2/3",1],submitOption:{formName:"form-"+T,callback:g=>$(void 0,null,function*(){let{name:_}=g,D=[...l.dataValue],k=D[t],G=k.id;if(!k)return;let{target:z}=yield k.convert();if(!z)return;let d=yield String(z.result).toBlob(a.type);if(!d)return;let y=new File([d],_+"."+O,{type:k.type});y.id=G,D[t]=y,p(R=>b(v({},R),{dataValue:D,eventType:"update",eventID:S.uuid.gen()})),N(!1)})},children:"\u6C7A\u5B9A"})]})]})}):r(te,{children:[u,!!m&&n(W.Button.Clear.R,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{N(!0)},children:n(L.Pen,{})})]})})}),!A&&r(F,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[o,"\u30D5\u30A1\u30A4\u30EB / ",V,"B"]})]}),n(W.Button.Sub.R,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let g=[...l.dataValue];g[t]&&(g.splice(t,1),p(D=>b(v({},D),{dataValue:g,eventType:"update",eventID:S.uuid.gen()})))},children:n(L.Times,{})})]})}},ce=e=>{let Z=e,{tone:t,required:a,form:s,fileNameEdit:l=!0,systemOnly:p=!1,accept:m="*",limit:u=1,checkValidationAtFirst:B,onChange:i,onValidate:A,onUpdateValue:N,onUpdateValidValue:T,value:V=[],className:K,cellStyles:O,cellClassName:o,componentID:g,status_id:_,enableFormSubmit:D,freeCSS:k,wrapStyles:G}=Z,z=Q(Z,["tone","required","form","fileNameEdit","systemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onUpdateValue","onUpdateValidValue","value","className","cellStyles","cellClassName","componentID","status_id","enableFormSubmit","freeCSS","wrapStyles"]),J={componentID:e.componentID||"",dataValue:V,eventType:"init",eventID:S.uuid.gen()},[d,y]=j(J),[R,ae]=j({ok:!1,notice:[]});re({type:"file",states:e,val_status:d,set_status:y,val_validate:R,set_validate:ae,DefaultValidation:de,onUpdateValue:N,onUpdateValidValue:T,ExtraOverrideStates:{dataValue:V,formatValue:V},ExtraStoreStates:{AddFiles:w=>$(void 0,null,function*(){let E=X.get(d.componentID).Files,I=[];for(var C=0;C<(w==null?void 0:w.length);C++){let f=w[C],{type:h,name:x}=f;if(C+1+E.length>u){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${x}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(m&&m=="image"&&!h.match(/image/)){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${x} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}I.push(f)}y(f=>b(v({},f),{dataValue:[...E,...I],eventType:"update",eventID:S.uuid.gen()}))})}});let U="";return m&&(m=="image"?U="image/png,image/jpeg":U=m),r(se,{val_status:d,set_status:y,val_validate:R,states:e,children:[n("input",b(v({type:"file",className:c("Input"),"data-form":s,"data-input-type":"file","data-component-id":d.componentID,"data-validation":R.ok,accept:U,multiple:u!=1,onChange:w=>$(void 0,null,function*(){let E=w.target,I=E.files,C=[];for(var f=0;f<(I==null?void 0:I.length);f++){let h=I[f],x=h.name;if(h.id=S.uuid.gen(),f+1+d.dataValue.length>u){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${x}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}C.push(h)}y(h=>b(v({},h),{dataValue:[...h.dataValue,...C],eventType:"update",eventID:S.uuid.gen()})),E.value=""})},z),{tabIndex:-1,value:""})),!p&&n(ee.List,{files:d.dataValue,states:e,val_status:d,set_status:y})]})};typeof window!="undefined"&&window.document&&S(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),P("."+c("AddButton")).addClass(c("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),P("."+c("AddButton")).removeClass(c("Draggable"));let t=e.dataTransfer.files;if(t.length){let a=e.target;if(P(a).hasClass(c("AddButton"))){let{componentId:s}=a.dataset,l=X.get(s);l&&l.AddFiles&&l.AddFiles(t)}}},options:{passive:!1}});const q=e=>{e=v({},e),e.override="force";let t=ne(e);return t.cellClassName=[t.cellClassName,pe.Boxish(b(v({},t.cellStyles),{tone:t.tone})).className].join(" "),n(oe,{componentID:e.componentID,children:ce,states:t})};q.fn={openDialog:e=>{let{multiple:t,accept:a}=e;return new Promise(s=>{const l=document.createElement("input");l.type="file",l.multiple=t!=null?t:!0,a&&(a=="image"?l.accept="image/png,image/jpeg":l.accept=a),l.onchange=p=>{s(p.target.files)},l.click()})}};export{q as Filer,q as default};
+import{b as S,c as b,d as Q,e as $}from"../../chunk-C5N2D3ZX.js";import{Fragment as ae,jsx as n,jsxs as r}from"react/jsx-runtime";import{useState as j,useEffect as ne}from"react";import v from"@mingoo/jsmin";import{$$fromRoot as P,useStore as X,GenerateHTMLProps as Y}from"../../@utils";import{Box as F,FAI as L,Flex as M,Column as ee}from"../../atoms";import{Row as ie}from"../../mols";import O from"../Button";import H from"../Snackbar";import{OptionalInputWrapper as oe,BoxWrapper as se,CoreEffects as re,DefaultStyles as ue}from"./core";import pe from"./TextField";import{InputFilerClasses as m}from"../../@styles/componentClasses";import{faCloudArrowUp as de}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function ce(e){let{value:t,states:a}=e,{required:s}=a,l=[];return s&&!t.length&&l.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!l.filter(({type:u})=>u=="invalid").length,notice:l}}const te={List:e=>{let{files:t,states:a,val_status:s,set_status:l}=e,u=(a.limit||1)-s.dataValue.length,d=t.map((p,B)=>n(te.Cell,{index:B,file:p,className:a.cellClassName,val_status:s,set_status:l,fileNameEdit:a.fileNameEdit},p.name));return u>0&&d.push(n("label",{className:[a.cellClassName,m("AddButton")].join(" "),"data-component-id":s.componentID,htmlFor:a.id,tabIndex:a.tabIndex,onKeyDown:p=>{let{key:B}=p;a.tabIndex!=-1&&[" ","Enter"].includes(B)&&P("#"+a.id).click()},children:r(ie.Center,{padding:["1/3",0],children:[n(F,{isRounded:!0,className:m("AddIcon"),children:n(L,{icon:de,className:m("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"theme.opa.low",ssSphere:3,padding:"1/2"})}),r(F,{children:[r(F,{fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0,children:["\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E(",u,")"]}),n(F,{fontColor:"4.thin",fontSize:"0.xs",isSemiBoldFont:!0,children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})},"AddButton")),n(ee,{flexSizing:"auto",className:a.className,children:d})},Cell:e=>{let{index:t,file:a,className:s,val_status:l,set_status:u,fileNameEdit:d=!0}=e,{name:p,size:B,type:i}=a,[A,T]=j(!1),N=v.uuid.gen(),V=B.rank(),[K,W]=p.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),o="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?o=i.replace(/image\//,""):i.match(/pdf/)?o="PDF":i.match(/csv/)?o="CSV":i.match(/spreadsheet/)?o="SpreadSheet":i.match(/presentation/)?o="PowerPoint":i.match(/word/)?o="Word":i.match(/zip/)?o="Zip":i.match(/powerpoint/)?o="PowerPoint":i.match(/html/)?o="HTML":i.match(/js/)?o="JavaScript":i.match(/css/)?o="CSS":i.match(/text\/plain/)&&(o="\u30C6\u30AD\u30B9\u30C8"),ne(()=>{A&&setTimeout(()=>{P("#"+N).focus()},100)},[A]),r(M,{verticalAlign:"center",flexWrap:!1,gap:1,className:s,children:[n(L.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),r(F,{flexSizing:0,children:[n(F,{children:n(M,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:m("FileName"),children:A?n(ae,{children:r(ee,{flexSizing:0,gap:"1/2",children:[r(M,{gap:"2/3",verticalAlign:"center",children:[n(pe,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:N,form:"form-"+N,enableFormSubmit:!0,value:K,onKeyDown:g=>{let{key:_}=g;_=="Escape"&&T(!1)}}),r(F,{children:[". ",W]})]}),r(M,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[n(O.Button.Sub.R,{padding:["2/3",1],onClick:()=>{T(!1)},children:"\u9589\u3058\u308B"}),n(O.Button.Prime.R,{padding:["2/3",1],submitOption:{formName:"form-"+N,callback:g=>$(void 0,null,function*(){let{name:_}=g,D=[...l.dataValue],k=D[t],G=k.id;if(!k)return;let{target:z}=yield k.convert();if(!z)return;let c=yield String(z.result).toBlob(a.type);if(!c)return;let y=new File([c],_+"."+W,{type:k.type});y.id=G,D[t]=y,u(R=>b(S({},R),{dataValue:D,eventType:"update",eventID:v.uuid.gen()})),T(!1)})},children:"\u6C7A\u5B9A"})]})]})}):r(ae,{children:[p,!!d&&n(O.Button.Clear.R,{ssSphere:2.5,flexSizing:"none",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",color:"cloud",onClick:()=>{T(!0)},children:n(L.Pen,{})})]})})}),!A&&r(F,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:[o,"\u30D5\u30A1\u30A4\u30EB / ",V,"B"]})]}),n(O.Button.Sub.R,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let g=[...l.dataValue];g[t]&&(g.splice(t,1),u(D=>b(S({},D),{dataValue:g,eventType:"update",eventID:v.uuid.gen()})))},children:n(L.Times,{})})]})}},me=e=>{let Z=e,{tone:t,required:a,form:s,fileNameEdit:l=!0,systemOnly:u=!1,accept:d="*",limit:p=1,checkValidationAtFirst:B,onChange:i,onValidate:A,onUpdateValue:T,onUpdateValidValue:N,value:V=[],className:K,cellStyles:W,cellClassName:o,componentID:g,status_id:_,enableFormSubmit:D,freeCSS:k,wrapStyles:G}=Z,z=Q(Z,["tone","required","form","fileNameEdit","systemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onUpdateValue","onUpdateValidValue","value","className","cellStyles","cellClassName","componentID","status_id","enableFormSubmit","freeCSS","wrapStyles"]),J={componentID:e.componentID||"",dataValue:V,eventType:"init",eventID:v.uuid.gen()},[c,y]=j(J),[R,le]=j({ok:!1,notice:[]});re.CommonEffects({type:"file",states:e,val_status:c,set_status:y,val_validate:R,set_validate:le,onUpdateValue:T,onUpdateValidValue:N,DefaultValidation:ce,ExtraOverrideStates:{dataValue:V,formatValue:V},ExtraStoreStates:{AddFiles:w=>$(void 0,null,function*(){let E=X.get(c.componentID).Files,I=[];for(var C=0;C<(w==null?void 0:w.length);C++){let f=w[C],{type:h,name:x}=f;if(C+1+E.length>p){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${x}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(d&&d=="image"&&!h.match(/image/)){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${x} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}I.push(f)}y(f=>b(S({},f),{dataValue:[...E,...I],eventType:"update",eventID:v.uuid.gen()}))})}});let U="";return d&&(d=="image"?U="image/png,image/jpeg":U=d),r(se,{val_status:c,set_status:y,val_validate:R,states:e,children:[n("input",b(S({type:"file",className:m("Input"),"data-form":s,"data-input-type":"file","data-component-id":c.componentID,"data-validation":R.ok,accept:U,multiple:p!=1,onChange:w=>$(void 0,null,function*(){let E=w.target,I=E.files,C=[];for(var f=0;f<(I==null?void 0:I.length);f++){let h=I[f],x=h.name;if(h.id=v.uuid.gen(),f+1+c.dataValue.length>p){H.add({componentID:x,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${x}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}C.push(h)}y(h=>b(S({},h),{dataValue:[...h.dataValue,...C],eventType:"update",eventID:v.uuid.gen()})),E.value=""})},z),{tabIndex:-1,value:""})),!u&&n(te.List,{files:c.dataValue,states:e,val_status:c,set_status:y})]})};typeof window!="undefined"&&window.document&&v(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),P("."+m("AddButton")).addClass(m("Draggable"))},options:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),P("."+m("AddButton")).removeClass(m("Draggable"));let t=e.dataTransfer.files;if(t.length){let a=e.target;if(P(a).hasClass(m("AddButton"))){let{componentId:s}=a.dataset,l=X.get(s);l&&l.AddFiles&&l.AddFiles(t)}}},options:{passive:!1}});const q=e=>{e=S({},e),e.override="force";let t=Y(e);return t.cellClassName=[t.cellClassName,Y(ue.Boxish(b(S({},t.cellStyles),{tone:t.tone}))).className].join(" "),n(oe,{componentID:e.componentID,children:me,states:t})};q.fn={openDialog:e=>{let{multiple:t,accept:a}=e;return new Promise(s=>{const l=document.createElement("input");l.type="file",l.multiple=t!=null?t:!0,a&&(a=="image"?l.accept="image/png,image/jpeg":l.accept=a),l.onchange=u=>{s(u.target.files)},l.click()})}};export{q as Filer,q as default};

package/dist/fn/Input/Hidden.js

@@ -1 +1 @@
-import{b as i,c as o,d as r}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{Wrapper as s}from"./core";const l=t=>{let n=t,{componentID:p="",enableFormSubmit:c,form:m,value:e=""}=n,u=r(n,["componentID","enableFormSubmit","form","value"]);return d("input",o(i({value:JSON.stringify(e),"data-input-type":"hidden","data-form":m,"data-component-id":p,"data-value":JSON.stringify(e)},u),{type:"hidden"}))},a=t=>d(s,{componentID:t.componentID,children:l,states:t});export{a as Hidden,a as default};
+import{b as i,c as o,d as a}from"../../chunk-C5N2D3ZX.js";import{jsx as p}from"react/jsx-runtime";import{OptionalInputWrapper as l}from"./core";const s=t=>{let n=t,{componentID:d="",enableFormSubmit:c,form:u,value:e=""}=n,m=a(n,["componentID","enableFormSubmit","form","value"]);return p("input",o(i({value:JSON.stringify(e),"data-input-type":"hidden","data-form":u,"data-component-id":d,"data-value":JSON.stringify(e)},m),{type:"hidden"}))},r=t=>p(l,{componentID:t.componentID,children:s,states:t});export{r as Hidden,r as default};

package/dist/fn/Input/Label.d.ts

@@ -0,0 +1,8 @@
+import { StyleTags, ReactElement } from '../../@declares';
+export declare const InputLabel: (p: {
+    componentID: string;
+    isActive: boolean;
+    required?: boolean;
+    fontSize?: StyleTags.Fonts.Size;
+    label: ReactElement;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/fn/Input/Label.js

@@ -0,0 +1 @@
+import{b as a,c as p}from"../../chunk-C5N2D3ZX.js";import{jsx as g,jsxs as h}from"react/jsx-runtime";import{useState as S,useEffect as b}from"react";import o from"@mingoo/jsmin";import{Box as c,Span as d}from"../../atoms";const D=t=>{if(!t.label)return null;let[r,s]=S({});return b(()=>{let f=o('[data-input-origin="'+t.componentID+'"]'),e=o('[data-input-label="'+t.componentID+'"]'),u=o('[data-input-value-shallow="'+t.componentID+'"]');if(!f[0]||!e[0]||!u[0])return;let i=f.position(),n=u.position();if(t.isActive){let l=n.left-i.left;s({backgroundColor:"layer.1",opacity:"max",freeCSS:{lineHeight:1,fontSize:"12px",transform:`translate(${l}px,-6px)`}})}else{let l=n.left-i.left,m=n.top-i.top;s({fontSize:t.fontSize||"inherit",opacity:"middle",freeCSS:{lineHeight:"inherit",transform:`translate(${l}px,${m}px)`,backgroundColor:"transparent"}})}e.getAttribute("data-label-init")=="true"&&e.setAttribute("data-label-init","false").await(10).css({transition:"var(--animation-time2)"})},[t.isActive]),h(c,p(a({htmlTag:"label","data-input-label":t.componentID,"data-label-init":"true",position:"absolute",left:0,top:0,fontColor:"3.blur",backgroundColor:"trans",borderRadius:"1/3",padding:[0,"1/4"],opacity:"min"},r),{freeCSS:a({zIndex:2,pointerEvents:"none",lineHeight:"inherit"},r.freeCSS),children:[t.label,t.required&&g(d,{fontColor:"nega",children:" * "})]}))};export{D as InputLabel};

package/dist/fn/Input/List.d.ts

@@ -1,29 +1,30 @@
 /// <reference types="react" />
-import { TagProperty, ReactElement } from '../../@declares';
+import { StyleTags, ReactElement } from '../../@declares';
 import { InputTypes } from '.';
 declare namespace List {
-    type Tone = 'border' | 'cloud' | 'vivid' | 'normal' | 'plain';
+    type Type = 'radio' | 'checkbox' | 'checker';
+    type IconType = 'radio' | 'checkbox';
+    type Tone = 'normal' | 'border' | 'cloud' | 'plain';
     type Input = InputTypes.CoreInput & {
+        type?: Type;
         tone?: Tone;
         icon?: boolean;
+        iconType?: IconType;
+        CustomIcon?: React.FC<CustomIconInput>;
         tabIndex?: number;
         id?: string;
-        iconType?: 'radio' | 'checkbox';
         minSelect?: number;
         disabled?: boolean;
         value?: any | any[];
         options: Options[];
         hideInput?: boolean;
-        leftIndicator?: ReactElement | false;
-        rightIndicator?: ReactElement | false;
-        cellStyles?: TagProperty.PropsNFreeCSS;
+        cellStyles?: StyleTags.PropsNFreeCSS;
         cellClassName?: string;
-        cellCheckedStyles?: TagProperty.PropsNFreeCSS;
+        cellCheckedStyles?: StyleTags.PropsNFreeCSS;
         cellCheckedClassName?: string;
-        defaultActiveStyling?: boolean;
     };
-    type Plain = Input & {
-        type: 'radio' | 'checkbox' | 'checker';
+    type CoreInput = Input & {
+        type: Type;
         tone: Tone;
     };
     type Options = {
@@ -31,20 +32,31 @@ declare namespace List {
         label: ReactElement;
         disabled?: boolean;
         className?: string;
-        checkedStyles?: TagProperty.PropsNFreeCSS;
+        checkedStyles?: StyleTags.PropsNFreeCSS;
         checkedClassName?: string;
-    } & TagProperty.States;
-    type ListInput = {
-        states: List.Plain;
+    } & StyleTags.States;
+    type CustomIconInput = {
+        isChecked: boolean;
+        toggle: () => void;
+    };
+    type CoreStates = {
+        rootStates: CoreInput;
         val_status: InputTypes.Status.Plain;
         set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
     };
+    namespace Methods {
+        type Component = {
+            (p: Input): JSX.Element;
+        };
+        type FNs = {
+            Normal: (p: Input) => JSX.Element;
+            Border: (p: Input) => JSX.Element;
+            Cloud: (p: Input) => JSX.Element;
+        };
+    }
+    type Methods = Methods.Component & Methods.FNs;
 }
-declare const Radio: React.FC<List.Input>;
-declare const Checkbox: React.FC<List.Input>;
-declare const List: {
-    Plain: import("react").FC<List.Plain>;
-    Radio: import("react").FC<List.Input>;
-    Checkbox: import("react").FC<List.Input>;
-};
-export { List, Radio, Checkbox, List as default };
+declare const Checkbox: List.Methods;
+declare const Radio: List.Methods;
+declare const List: List.Methods;
+export { Checkbox, Radio, List, List as default };

package/dist/fn/Input/List.js

@@ -1 +1 @@
-import{b as t,c as d,d as w}from"../../chunk-C5N2D3ZX.js";import{jsx as n,jsxs as le}from"react/jsx-runtime";import{useState as Z}from"react";import I from"@mingoo/jsmin";import{$$fromRoot as ie}from"../../@utils";import D from"../../atoms/Box";import se from"../../atoms/Flex";import oe from"../../atoms/FAI";import re from"../Button";import{BoxWrapper as ce,SubmitForm as ue,CommonEffects as de,DefaultStyles as pe,Wrapper as fe}from"./core";import me from"./Hidden";import{InputListClasses as o}from"../../@styles/componentClasses";function ye(e){let{value:l,states:r}=e,{type:S,required:p,minSelect:a=0}=r,i=[];return p&&(l.length||S=="radio"&&i.push({type:"invalid",label:"\u9078\u629E\u3055\u308C\u3066\u3044\u307E\u305B\u3093"})),a&&l.length<a&&i.push({type:"invalid",label:`${a}\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044`}),{ok:!i.filter(({type:c})=>c=="invalid").length,notice:i}}const Se=e=>{let{value:l,options:r=[]}=e,S=I.is.exist(l)?I.flatArray(l):[],p=r.map(i=>{let{value:c,label:C}=i;return d(t({},i),{value:JSON.stringify(c),label:C})}),a=[];return S.forEach(i=>{let c=JSON.stringify(i);p.findIndex(N=>N.value==c)!=-1&&a.push(c)}),n(P.Core,d(t({},e),{value:a,options:p}))},P={Core:e=>{let k=e,{type:l,tone:r,required:S,componentID:p="",form:a,override:i,icon:c,iconType:C,enableFormSubmit:N,defaultActiveStyling:W,checkValidationAtFirst:j,onValidate:z,onUpdateValue:R,onUpdateValidValue:_,value:F,options:U,leftIndicator:b,rightIndicator:q,className:H,cellStyles:A,cellClassName:K,cellCheckedStyles:G,cellCheckedClassName:M,minSelect:Q,hideInput:E,freeCSS:g,wrapStyles:T}=k,x=w(k,["type","tone","required","componentID","form","override","icon","iconType","enableFormSubmit","defaultActiveStyling","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","minSelect","hideInput","freeCSS","wrapStyles"]),O={componentID:p,dataValue:F,eventType:"init",eventID:I.uuid.gen()},[u,v]=Z(O),[L,B]=Z({ok:!1,notice:[]});return de({type:"list",states:e,val_status:u,set_status:v,val_validate:L,set_validate:B,onUpdateValue:R,onUpdateValidValue:_,DefaultValidation:ye}),le(ce,{val_status:u,set_status:v,val_validate:L,states:e,children:[n(me,d(t({"data-value":JSON.stringify(u.dataValue),form:a,"data-input-type":l,"data-validation":L.ok},x),{componentID:u.componentID})),n(P.List,{states:e,val_status:u,set_status:v})]})},List:e=>{let{states:l,val_status:r,set_status:S}=e,{componentID:p,type:a,tone:i,icon:c=!0,options:C,name:N,form:W,tabIndex:j,hideInput:z,disabled:R,className:_,cellStyles:F,cellClassName:U="",cellCheckedStyles:b,cellCheckedClassName:q="",enableFormSubmit:H,defaultActiveStyling:A=!0}=l,{dataValue:K}=r,G=c?n(D,{flexSizing:"none",children:l.iconType=="radio"?n(P.RadioIcon,{}):l.iconType=="checkbox"?n(P.CheckboxIcon,{}):null}):null,M=C.map((Q,E)=>{let Y=Q,{value:g,label:T,disabled:x=R,className:O="",checkedStyles:u,checkedClassName:v="",freeCSS:L}=Y,B=w(Y,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),k=I.uuid.gen(),X=K.findIndex(f=>f===g)!=-1,h=t(t({},F),B),$=[o("Label"),o("defaultActiveStyling_"+!!A),U,O];return X&&(h=d(t(t(t({},h),b),u),{freeCSS:t(t(t({},h==null?void 0:h.freeCSS),b==null?void 0:b.freeCSS),u==null?void 0:u.freeCSS)}),$=[...$,q,v]),[n("input",{type:a=="radio"?"radio":"checkbox",className:[o("Input"),o("defaultActiveStyling_"+!!A)].join(" "),name:"RadioCheckbox-"+N,"data-list-index":p+"-"+E,id:k,value:String(g),"data-form-name":W,disabled:x,checked:X,onFocus:f=>{if(x||a!="radio"||r.dataValue.length)return;let{value:m,checked:V}=f.target,y=[m];S(s=>d(t({},s),{dataValue:y,eventType:"update",eventID:I.uuid.gen()}))},onChange:f=>{if(x)return;let{value:m,checked:V}=f.target,y=[];if(a=="radio")y=[m];else if(a=="checkbox"||a=="checker")if(V)y=[...r.dataValue,m];else{let s=[...r.dataValue];s.splice(r.dataValue.findIndex(ne=>ne==m),1),y=s}S(s=>d(t({},s),{dataValue:y,eventType:"update",eventID:I.uuid.gen()}))},onKeyDown:f=>{let{key:m,shiftKey:V}=f;if((a=="checkbox"||a=="checker")&&m!="Tab"){if(m.match(/Arrow/)){f.preventDefault();let y=["ArrowLeft","ArrowUp"].includes(m)?-1:1,s=E+y;s<0?s=C.length-1:s>=C.length&&(s=0),ie(`input[data-list-index="${p}-${s}"]`).focus()}}H&&ue(f)},tabIndex:j},"List-"+JSON.stringify(g)),le(re.Label.Plain,d(t({htmlFor:k,className:$.join(" "),tabIndex:-1,display:"flex",ssEffectsOnActive:!1,verticalAlign:"center",gap:"1/3",flexWrap:!1},h),{children:[G,I.is.string(T)?n(D,{children:T}):T]}),"ListTrigger-"+JSON.stringify(g))]});return n(se,{flexSizing:"auto",style:l.style,freeCSS:t({},l.freeCSS),className:[_,o("CellBase"),o("HideInput_"+z),o("IconIndicator_"+!!c),o("Tone_"+i)].join(" "),children:M})},RadioIcon:()=>n(D,{className:o("Icon"),backgroundColor:"layer.1",border:!0,transition:"middle",position:"relative",borderRadius:"sphere",flexCenter:!0}),CheckboxIcon:()=>n(D,{className:[o("Icon"),o("CheckboxIcon")].join(" "),borderRadius:"3.tone.tertiary",backgroundColor:"layer.1",border:!0,transition:"middle",fontColor:"white",position:"relative",flexCenter:!0,children:n(oe.Check,{className:o("I"),transition:"middle",opacity:"trans",freeCSS:{zIndex:8}})})},J=e=>{e=t({},e);let l=pe.ListCell(e);return n(fe,{componentID:e.componentID,children:Se,states:l})},ee=e=>n(J,d(t({iconType:"radio",tone:e.tone},e),{type:"radio"})),te=e=>n(J,d(t({iconType:"checkbox",tone:e.tone},e),{type:"checkbox"})),ae={Plain:J,Radio:ee,Checkbox:te};export{te as Checkbox,ae as List,ee as Radio,ae as default};
+import{b as o,c as p,d as P}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as oe}from"react/jsx-runtime";import{useState as Y}from"react";import y from"@mingoo/jsmin";import{$$fromRoot as ae,GenerateHTMLProps as ne}from"../../@utils";import{Box as V,Flex as se,Label as ie,FAI as re}from"../../atoms";import Z from"../Button";import{OptionalInputWrapper as de,BoxWrapper as ce,CoreEffects as ee}from"./core";import ue from"./Hidden";import{InputListClasses as I}from"../../@styles/componentClasses";function me(t){let{value:l,states:s}=t,{type:e,required:u,minSelect:n=0}=s,i=[];return u&&(l.length||e=="radio"&&i.push({type:"invalid",label:"\u9078\u629E\u3055\u308C\u3066\u3044\u307E\u305B\u3093"})),n&&l.length<n&&i.push({type:"invalid",label:`${n}\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044`}),{ok:!i.filter(({type:d})=>d=="invalid").length,notice:i}}const T={OptionalListWrapper:t=>{let{value:l,options:s=[]}=t,e=y.is.exist(l)?y.flatArray(l):[],u=s.map(i=>{let{value:d,label:h}=i;return p(o({},i),{value:JSON.stringify(d),label:h})}),n=[];return e.forEach(i=>{let d=JSON.stringify(i);u.findIndex(L=>L.value==d)!=-1&&n.push(d)}),a(T.Core,p(o({},t),{value:n,options:u}))},Core:t=>{let D=t,{type:l,tone:s,required:e,componentID:u="",form:n,override:i,icon:d,iconType:h,CustomIcon:L,enableFormSubmit:M,checkValidationAtFirst:J,onValidate:w,onUpdateValue:g,onUpdateValidValue:_,value:B,options:W,className:k,cellStyles:$,cellClassName:X,cellCheckedStyles:q,cellCheckedClassName:H,minSelect:U,hideInput:z,freeCSS:F,wrapStyles:m}=D,x=P(D,["type","tone","required","componentID","form","override","icon","iconType","CustomIcon","enableFormSubmit","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","minSelect","hideInput","freeCSS","wrapStyles"]),S={componentID:u,dataValue:B,eventType:"init",eventID:y.uuid.gen()},[f,C]=Y(S),[v,K]=Y({ok:!1,notice:[]});return ee.CommonEffects({type:"list",states:t,val_status:f,set_status:C,val_validate:v,set_validate:K,onUpdateValue:g,onUpdateValidValue:_,DefaultValidation:me}),oe(ce,{val_status:f,set_status:C,val_validate:v,states:t,children:[a(ue,p(o({"data-value":JSON.stringify(f.dataValue),form:n,"data-input-type":l,"data-validation":v.ok},x),{componentID:f.componentID})),a(T.List,{rootStates:t,val_status:f,set_status:C})]})},List:t=>{let{rootStates:l,val_status:s,set_status:e}=t,{componentID:u,type:n,tone:i,icon:d=!0,options:h,name:L,form:M,tabIndex:J,hideInput:w,disabled:g,className:_,cellStyles:B,cellClassName:W="",cellCheckedStyles:k,cellCheckedClassName:$="",enableFormSubmit:X}=l,{dataValue:q}=s,H=l.CustomIcon,U=h.map((z,F)=>{let Q=z,{value:m,label:x,disabled:S,className:f="",checkedStyles:C,checkedClassName:v="",freeCSS:K}=Q,D=P(Q,["value","label","disabled","className","checkedStyles","checkedClassName","freeCSS"]),j=y.uuid.gen(),R=q.findIndex(r=>r===m)!=-1,b=o(o({},B),D),O=[I("Label"),W,f];R&&(b=p(o(o(o({},b),k),C),{freeCSS:o(o(o({},b==null?void 0:b.freeCSS),k==null?void 0:k.freeCSS),C==null?void 0:C.freeCSS)}),O=[...O,$,v]);const G=()=>{if(g||S)return;let r=[];if(n=="radio")r=[m];else if(n=="checkbox"||n=="checker")if(!R)r=[...s.dataValue,m];else{let c=[...s.dataValue];c.splice(s.dataValue.findIndex(E=>E==m),1),r=c}e(c=>p(o({},c),{dataValue:r,eventType:"update",eventID:y.uuid.gen()}))};return[a("input",{type:n=="radio"?"radio":"checkbox",className:I("Input"),name:"RadioCheckbox-"+L,"data-list-index":u+"-"+F,id:j,value:String(m),"data-form-name":M,disabled:g||S,checked:R,onFocus:r=>{S||n=="radio"&&(s.dataValue.length||e(c=>p(o({},c),{dataValue:[m],eventType:"update",eventID:y.uuid.gen()})))},onChange:()=>{G()},onKeyDown:r=>{let{key:c,shiftKey:E}=r;if((n=="checkbox"||n=="checker")&&c!="Tab"){if(c.match(/Arrow/)){r.preventDefault();let le=["ArrowLeft","ArrowUp"].includes(c)?-1:1,N=F+le;N<0?N=h.length-1:N>=h.length&&(N=0),ae(`input[data-list-index="${u}-${N}"]`).focus()}}X&&ee.SubmitForm(r)},tabIndex:J},"List-"+JSON.stringify(m)),oe(ie,p(o({"data-disabled":g||S,htmlFor:j,className:O.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",gap:"1/6",flexWrap:!1},b),{children:[d&&a(H,{isChecked:R,toggle:()=>{G()}}),y.is.string(x)?a(V,{children:x}):x]}),"ListTrigger-"+JSON.stringify(m))]});return a(se,{flexSizing:"auto",style:l.style,freeCSS:o({},l.freeCSS),className:[_,I("CellBase"),I("HideInput_"+w),I("IconIndicator_"+!!d),I("Tone_"+i)].join(" "),children:U})},RadioIcon:t=>a(Z.Button.Normal.R,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:3,onClick:l=>{l.preventDefault(),l.stopPropagation(),t.toggle()},children:a(V,{ssSphere:1.5,border:"3.thick",borderWidth:2,borderColor:t.isChecked?"theme":"3.thick",position:"relative",transition:"middle",children:a(V,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.isChecked?"theme":"trans",opacity:t.isChecked?"max":"trans",freeCSS:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.6)"}})})}),CheckboxIcon:t=>a(Z.Button.Normal.R,{ssPushable:!0,color:"cloud",tabIndex:-1,ssEffectsOnActive:"ripple.cloud",ssSphere:3,onClick:l=>{l.preventDefault(),l.stopPropagation(),t.toggle()},children:a(V,{ssSquare:1.5,flexCenter:!0,border:"3.thick",borderWidth:2,borderColor:t.isChecked?"theme":"3.thick",borderRadius:"3.tone.tertiary",position:"relative",backgroundColor:t.isChecked?"theme":"trans",transition:"middle",fontColor:"white",children:a(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",freeCSS:{zIndex:8}})})})},A=t=>{t=t||"checkbox";const l=e=>(e=p(o({gap:"1/2",iconType:t=="radio"?"radio":"checkbox"},e),{type:t,cellStyles:o({position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.CustomIcon||(e.iconType=="radio"?e.CustomIcon=T.RadioIcon:e.iconType=="checkbox"&&(e.CustomIcon=T.CheckboxIcon)),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",isRounded:!0,backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({paddingRight:1,border:"1.thin",isRounded:!0,backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({paddingRight:1,isRounded:!0,border:"1.thin",backgroundColor:"layer.2"},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=ne(e),a(de,{componentID:e.componentID,children:T.OptionalListWrapper,states:e})),s=l;return s.Normal=e=>a(l,o({type:t,tone:"normal",icon:!1},e)),s.Border=e=>a(l,o({type:t,tone:"border"},e)),s.Cloud=e=>a(l,o({type:t,tone:"cloud"},e)),s},pe=A("checkbox"),Ce=A("radio"),te=A();export{pe as Checkbox,te as List,Ce as Radio,te as default};