amotify 0.2.156 → 0.2.158

package/dist/fn/Cropper.d.ts

@@ -1,6 +1,14 @@
 import Input from './Input';
 declare namespace Cropper {
-    type Use = 'square' | 'wallpaper.horizontal' | 'wallpaper.vertical';
+    type Use = '1:1' | '16:9' | '9:16' | '4:3' | '3:4' | '3:1' | '1:2' | [
+        number,
+        number
+    ];
+    type Usage = {
+        w: number;
+        h: number;
+        aspect: number;
+    };
     type Input = {
         use: Use;
         develops: Develop[];

package/dist/fn/Cropper.js

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

package/dist/fn/Input/Autocomplete.js

@@ -1 +1 @@
-import{b as S,c as O,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as n,jsxs as B}from"react/jsx-runtime";import{useState as I,useEffect as F,useRef as ne}from"react";import s,{UUID as K}from"jmini";import{ExtractStyles as ae}from"../../@utils";import{Box as x,Span as ie,FAI as M,Column as re}from"../../atoms";import{Literal as W,Row as q}from"../../mols";import{Button as Z}from"../Button";import{Loader as se}from"../Loader";import{Sheet as ue}from"../Sheet";import{OptionalInputWrapper as ce,BoxWrapper as pe,CoreEffects as N,DefaultBoxishStyles as de}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as Se}from"./Label";import{RightIcon as ee}from".";function me(e){let{value:t,states:p}=e,{required:u,options:a,min:o,max:d}=p;o=o||0,d=d||65535;let i=[],h=t.filter(c=>c!==null).length;return u&&(h||i.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),h<o&&i.push({type:"invalid",label:o+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),h>d&&i.push({type:"invalid",label:d+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!i.filter(({type:c})=>c=="invalid").length,notice:i}}const U={InitOptions:e=>{let t=[];return e.forEach(p=>{let{type:u,label:a,value:o,searchValue:d}=p,i=d||(s.is.string(a)?a:"")||(s.is.string(o)?o:"");s.is.nullish(a)&&(a=String(o)),t.push(O(S({},p),{searchValue:i,type:u||"selector",label:a,value:o}))}),t},FilterSelectableOptions:(e,t,p)=>{let u=e;return p||(u=e.filter(a=>a.type!="label")),s.scope(()=>{if(!t)return;let a=t.toLower().replace(/ /g,"");u=u.filter(o=>(o.searchValue||"").toLower().replace(/ /g,"").includes(a))}),u}},L={Shallow:e=>{let{rootStates:t,val_status:p}=e,u=ae(t);return n(x,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:n(W.Description,O(S({className:t.className},u),{position:"absolute",width:1,freeCSS:O(S({},u.freeCSS),{color:"orange"}),"data-id":"shallow_"+p.componentID,children:n(x,{"data-input-value-shallow":p.componentID,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:p,set_keyword:u,val_optionFocused:a,set_optionFocused:o,val_options:d,set_options:i,val_optionsDict:h,set_optionsDict:c,val_preventOpenSelectorOnFocus:r,set_preventOpenSelectorOnFocus:m,val_selectorOpen:l,set_selectorOpen:f,val_status:v,set_status:C,val_validate:_,set_validate:g}=e,j=t,{tone:D,required:w,form:T,className:R,multiSelect:P,enableFormSubmit:V,checkValidationAtFirst:A,onValidate:$,onUpdateValue:J,onUpdateValidValue:H,value:fe="",options:ve,leftIndicator:ye,rightIndicator:he,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Oe,wrapStyles:Ie,emptySelect:Ce,SearchInput:De,SearchInputPlaceholder:we,SelectedComponent:Ve,SelectorComponent:ke,SelectorStyles:Te,SelectorPosition:Re,DynamicOptionsOnSearch:xe}=j,b=Q(j,["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","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch"]);return F(()=>{var k,E;if(t.disabled||!l)return;let y=U.FilterSelectableOptions(e.val_options,p,!1);o((E=(k=y[0])==null?void 0:k.value)!=null?E:null)},[p]),F(()=>{v.eventType!="init"&&(t.max==v.dataValue.length?(f(!1),m(!0),setTimeout(()=>{let y=s('[data-input-origin="'+t.componentID+'"]');y&&y.focus()},10)):s("#SearchInput_"+t.componentID).focus())},[v.dataValue]),F(()=>{let y="autocomplete-click-"+t.componentID;if(l){if(!s('[data-input-origin="'+t.componentID+'"]'))return;s("#SearchInput_"+t.componentID).focus(),s(document).addEvent({eventID:y,eventType:"mousedown",callback:E=>{let G=s(E.target),oe=!!s(G).parent("."+z("Core")).length,le=!!s(G).parent("."+z("Selector")).length;oe||le||(f(!1),E.preventDefault(),E.stopPropagation())},options:{passive:!1}})}else s(document).removeEvent([y]),u("")},[l]),B(X,{children:[n(x,O(S({tabIndex:0},b),{"data-disabled":t.disabled,"data-show-validation":N.isShowValidation(_,v,!!A),"data-component-id":v.componentID,"data-input-origin":v.componentID,"data-focus":!!l,className:[R,z("Core")].join(" "),onFocus:y=>{if(b!=null&&b.onFocus&&(b==null||b.onFocus(y)),!t.disabled){if(r)return m(!1);f(!0),y.preventDefault()}},onClick:y=>{b!=null&&b.onClick&&(b==null||b.onClick(y)),!t.disabled&&f(!0)},onKeyDown:y=>{let{key:k}=y;V&&N.SubmitForm(y,T),!l&&(k==" "||k=="ArrowDown"||k=="ArrowUp"||k=="Enter")&&f(!0)},children:B(q.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[n(L.Selected,S({},e)),n(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),n(L.SearchInput,S({},e))]})})),l&&n(L.Selector,S({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[p,u]=I(!1);return t.disabled||!e.val_selectorOpen?null:n(x,{id:"SearchInput_"+t.componentID,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onCompositionStart:a=>{t.onCompositionStart&&t.onCompositionStart(a),u(!0)},onCompositionEnd:a=>{t.onCompositionEnd&&t.onCompositionEnd(a),u(!1)},onKeyDown:a=>{let{key:o,metaKey:d,ctrlKey:i}=a,h=d||i;o=="Escape"?(e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let c=s('[data-input-origin="'+t.componentID+'"]');c&&c.focus()},10)):o=="Tab"?e.set_selectorOpen(!1):o==" "?s.scope(()=>{e.val_selectorOpen||e.val_keyword||(a.preventDefault(),e.set_selectorOpen(!0))}):o=="Backspace"?s.scope(()=>{if(e.val_keyword)return;let c=[...e.val_status.dataValue];c.pop(),e.set_status(r=>O(S({},r),{dataValue:c,eventType:"update",eventID:K()}))}):o=="Enter"&&s.scope(()=>{if(p)return;if(!e.val_selectorOpen)return e.set_selectorOpen(!0);let c=e.val_options.find(m=>m.value==e.val_optionFocused);if(!c)return;let{value:r}=c;e.set_status(m=>{let l=[...m.dataValue];return s.scope(()=>{if(r===null)return l=[];m.dataValue.includes(r)?l=l.filter(v=>v!==r):t.multiSelect?l.push(r):l=[r]}),O(S({},m),{dataValue:l,eventType:"update",eventID:K()})}),e.set_keyword(""),e.set_preventDynamicSearchOnKeywordChange(!0)}),s.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(a.preventDefault(),!e.val_selectorOpen)return e.set_selectorOpen(!0);let c=o=="ArrowDown"?1:-1,r=U.FilterSelectableOptions(e.val_options,e.val_keyword,!1),m=r.length-1,l=null;s.scope(()=>{var v,C,_,g,D,w,T,R,P,V;let f=r.findIndex(A=>A.value==e.val_optionFocused);if(f==-1&&(f=0),c==1){if(l=(C=(v=r[0])==null?void 0:v.value)!=null?C:null,h){l=(_=r[m].value)!=null?_:null;return}if(f==-1||f==m)return;l=(D=(g=r[f+1])==null?void 0:g.value)!=null?D:null}else{if(l=(w=r[m].value)!=null?w:null,h){l=(R=(T=r[0])==null?void 0:T.value)!=null?R:null;return}if(f==-1||f==0)return;l=(V=(P=r[f-1])==null?void 0:P.value)!=null?V:null}}),e.set_optionFocused(l)}),t.enableFormSubmit&&N.SubmitForm(a,e.rootStates.form)},onChange:a=>{let d=a.target.value;e.set_keyword(d)}},"searchInput")},Selector:e=>{var h;let[t,p]=I("idle"),[u,a]=I("idle");F(()=>{if(!e.val_selectorOpen||!e.rootStates.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(t=="idle")return p("ok");a("fetch");let c="autocomplete-search-"+e.rootStates.componentID;s.interval.once(()=>Y(void 0,null,function*(){let r=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);a("idle");let m=U.InitOptions(r||[]);e.set_options(m)}),300,c)},[e.val_keyword]);let o=[],d=U.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0);d.forEach((c,r)=>{let{type:m,value:l}=c,f=e.val_optionFocused==l,v=e.val_status.dataValue.includes(l),C=e.rootStates.SelectorComponent;o.push(n(C,{option:c,isFocused:f,isSelected:v,addCallback:()=>{e.set_status(_=>{let g=[..._.dataValue];return s.scope(()=>{if(l===null)return g=[];_.dataValue.includes(l)?g=g.filter(w=>w!==l):e.rootStates.multiSelect?g.push(l):g=[l]}),O(S({},_),{dataValue:g,eventType:"update",eventID:K()})})}},s.Stringify(l)||K()))}),d.length||(o=[n(W.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),u=="fetch"&&(o=[B(q.Left,{padding:1,fontColor:"3.blur",children:[n(se.Theme.R,{showInitial:!0}),n(W.Supplement,{children:"Loading..."})]},"loader")]);let i={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:i.bottom="100%",i.left=0,i.paddingBottom="1/3";break;case 2:i.bottom="100%",i.right=0,i.paddingBottom="1/3";break;case 3:i.top="100%",i.left=0,i.paddingTop="1/3";break;case 4:i.top="100%",i.right=0,i.paddingTop="1/3";break;default:break}return n(x,O(S({},i),{children:n(ue.Body,O(S({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:S({maxHeight:12*24},(h=e.rootStates.SelectorStyles)==null?void 0:h.freeCSS),children:n(re,{gap:"1/12",padding:[1,0],children:o})}))}))},Selected:e=>{let{rootStates:t,val_status:p,set_status:u,val_optionsDict:a}=e,o=[];return p.dataValue.forEach(d=>{let i=a[s.Stringify(d)];if(!i)return;let h=t.SelectedComponent,c=i.label;i.value===null&&(c=""),o.push(n(x,{className:z("SelectedCell"),children:n(h,{value:i.value,label:c,removeCallback:r=>{if(r.stopPropagation(),r.preventDefault(),t.disabled)return;let m=[...p.dataValue];m=m.filter(l=>l!==d),u(l=>O(S({},l),{dataValue:m,eventType:"update",eventID:K()}))}})},s.Stringify(i.value)))}),n(X,{children:o})},Core:e=>{var A;let{value:t}=e,[p,u]=I(!1),[a,o]=I(!1),[d,i]=I(!1),[h,c]=I(""),[r,m]=I(e.options),[l,f]=I((A=e.value[0])!=null?A:null),[v,C]=I({}),[_,g]=I(N.DefaultStatus(e.componentID,t)),[D,w]=I({ok:!1,notice:[]}),T=ne(!1);F(()=>{T.current?m(e.options):T.current=!0},[e.options]),F(()=>{if(!r.length)return;let $=[...r],J=S({},v);$.forEach(H=>{H.type!="label"&&(J[s.Stringify(H.value)]=H)}),C(J)},[r]);let R={rootStates:e,val_options:r,set_options:m,val_optionFocused:l,set_optionFocused:f,val_optionsDict:v,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:a,set_preventDynamicSearchOnKeywordChange:o,val_preventOpenSelectorOnFocus:p,set_preventOpenSelectorOnFocus:u,val_selectorOpen:d,set_selectorOpen:i,val_keyword:h,set_keyword:c,val_status:_,set_status:g,val_validate:D,set_validate:w},P=!!e.multiSelect;N.CommonEffects({type:P?"autocomplete.multi":"autocomplete.single",states:e,val_status:_,set_status:g,val_validate:D,set_validate:w,SystemValidation:me});let V=_.dataValue.length&&_.dataValue[0]!==null;return V=V||d,B(pe,{val_status:_,set_status:g,val_validate:D,states:e,children:[n(Se,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:V}),n(L.Shallow,S({},R)),n(L.Button,S({},R))]})}},te=e=>{var p;let t=S({},e);return t=O(S({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:u,isSelected:a,isFocused:o,addCallback:d})=>u.type=="selector"?n(Z.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:i=>{d()},children:B(q.Left,{gap:"1/2",children:[a&&n(M.Check,{fontColor:"theme"}),n(W.Supplement,{transition:"short",children:u.label})]})}):n(X,{children:u.label}),SelectedComponent:({value:u,label:a,removeCallback:o})=>B(q.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(x,{padding:[0,"1/4"],children:a}),n(Z.Sub,{flexSizing:"none",color:"cloud",fontColor:"white",backgroundColor:"layer.5",isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(M.Times,{ssSphere:1})})]}),SelectorPosition:3},t),{freeCSS:S({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:n(W.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=s.flatArray((p=t.value)!=null?p:null),t.options=U.InitOptions(t.options),s.is.nullish(t.rightIcon)&&(t.rightIcon=n(ee,{ssSphere:2,children:n(M.Search,{})}),t.disabled&&(t.rightIcon=n(ee,{ssSphere:2,fontColor:"5.translucent",children:n(M.Ban,{})}))),t.rightIcon&&(t=S({paddingRight:3},t)),t.leftIcon&&(t=S({paddingLeft:3},t)),n(ce,{componentID:t.componentID,children:L.Core,states:de(t)})};export{te as Autocomplete,te as default};
+import{b as S,c as O,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as X,jsx as n,jsxs as B}from"react/jsx-runtime";import{useState as I,useEffect as F,useRef as ne}from"react";import s,{UUID as K}from"jmini";import{ExtractStyles as ae}from"../../@utils";import{Box as x,Span as ie,FAI as M,Column as re}from"../../atoms";import{Literal as W,Row as q}from"../../mols";import{Button as Z}from"../Button";import{Loader as se}from"../Loader";import{Sheet as ue}from"../Sheet";import{OptionalInputWrapper as ce,BoxWrapper as pe,CoreEffects as N,DefaultBoxishStyles as de}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as Se}from"./Label";import{RightIcon as ee}from".";function me(e){let{value:t,states:p}=e,{required:u,options:a,min:o,max:d}=p;o=o||0,d=d||65535;let i=[],h=t.filter(c=>c!==null).length;return u&&(h||i.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),h<o&&i.push({type:"invalid",label:o+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),h>d&&i.push({type:"invalid",label:d+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!i.filter(({type:c})=>c=="invalid").length,notice:i}}const U={InitOptions:e=>{let t=[];return e.forEach(p=>{let{type:u,label:a,value:o,searchValue:d}=p,i=d||s.is.string(a)&&a||""||s.is.string(o)&&o||s.Stringify(o||"");s.is.nullish(a)&&(a=String(o)),t.push(O(S({},p),{searchValue:i,type:u||"selector",label:a,value:o}))}),t},FilterSelectableOptions:(e,t,p)=>{let u=e;return p||(u=e.filter(a=>a.type!="label")),s.scope(()=>{if(!t)return;let a=t.toLower().replace(/ /g,"");u=u.filter(o=>(o.searchValue||"").toLower().replace(/ /g,"").includes(a))}),u}},L={Shallow:e=>{let{rootStates:t,val_status:p}=e,u=ae(t);return n(x,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:n(W.Description,O(S({className:t.className},u),{position:"absolute",width:1,freeCSS:O(S({},u.freeCSS),{color:"orange"}),"data-id":"shallow_"+p.componentID,children:n(x,{"data-input-value-shallow":p.componentID,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:p,set_keyword:u,val_optionFocused:a,set_optionFocused:o,val_options:d,set_options:i,val_optionsDict:h,set_optionsDict:c,val_preventOpenSelectorOnFocus:r,set_preventOpenSelectorOnFocus:m,val_selectorOpen:l,set_selectorOpen:f,val_status:v,set_status:C,val_validate:_,set_validate:g}=e,j=t,{tone:D,required:w,form:T,className:R,multiSelect:P,enableFormSubmit:V,checkValidationAtFirst:A,onValidate:$,onUpdateValue:J,onUpdateValidValue:H,value:fe="",options:ve,leftIndicator:ye,rightIndicator:he,leftIcon:_e,rightIcon:ge,componentID:be,status_id:Oe,wrapStyles:Ie,emptySelect:Ce,SearchInput:De,SearchInputPlaceholder:we,SelectedComponent:Ve,SelectorComponent:ke,SelectorStyles:Te,SelectorPosition:Re,DynamicOptionsOnSearch:xe}=j,b=Q(j,["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","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch"]);return F(()=>{var k,E;if(t.disabled||!l)return;let y=U.FilterSelectableOptions(e.val_options,p,!1);o((E=(k=y[0])==null?void 0:k.value)!=null?E:null)},[p]),F(()=>{v.eventType!="init"&&(t.max==v.dataValue.length?(f(!1),m(!0),setTimeout(()=>{let y=s('[data-input-origin="'+t.componentID+'"]');y&&y.focus()},10)):s("#SearchInput_"+t.componentID).focus())},[v.dataValue]),F(()=>{let y="autocomplete-click-"+t.componentID;if(l){if(!s('[data-input-origin="'+t.componentID+'"]'))return;s("#SearchInput_"+t.componentID).focus(),s(document).addEvent({eventID:y,eventType:"mousedown",callback:E=>{let G=s(E.target),oe=!!s(G).parent("."+z("Core")).length,le=!!s(G).parent("."+z("Selector")).length;oe||le||(f(!1),E.preventDefault(),E.stopPropagation())},options:{passive:!1}})}else s(document).removeEvent([y]),u("")},[l]),B(X,{children:[n(x,O(S({tabIndex:0},b),{"data-disabled":t.disabled,"data-show-validation":N.isShowValidation(_,v,!!A),"data-component-id":v.componentID,"data-input-origin":v.componentID,"data-focus":!!l,className:[R,z("Core")].join(" "),onFocus:y=>{if(b!=null&&b.onFocus&&(b==null||b.onFocus(y)),!t.disabled){if(r)return m(!1);f(!0),y.preventDefault()}},onClick:y=>{b!=null&&b.onClick&&(b==null||b.onClick(y)),!t.disabled&&f(!0)},onKeyDown:y=>{let{key:k}=y;V&&N.SubmitForm(y,T),!l&&(k==" "||k=="ArrowDown"||k=="ArrowUp"||k=="Enter")&&f(!0)},children:B(q.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[n(L.Selected,S({},e)),n(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),n(L.SearchInput,S({},e))]})})),l&&n(L.Selector,S({},e))]})},SearchInput:e=>{let{rootStates:t}=e,[p,u]=I(!1);return t.disabled||!e.val_selectorOpen?null:n(x,{id:"SearchInput_"+t.componentID,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_selectorOpen?"max":"trans",transition:"middle",flexSizing:0,htmlTag:"input",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onCompositionStart:a=>{t.onCompositionStart&&t.onCompositionStart(a),u(!0)},onCompositionEnd:a=>{t.onCompositionEnd&&t.onCompositionEnd(a),u(!1)},onKeyDown:a=>{let{key:o,metaKey:d,ctrlKey:i}=a,h=d||i;o=="Escape"?(e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0),setTimeout(()=>{let c=s('[data-input-origin="'+t.componentID+'"]');c&&c.focus()},10)):o=="Tab"?e.set_selectorOpen(!1):o==" "?s.scope(()=>{e.val_selectorOpen||e.val_keyword||(a.preventDefault(),e.set_selectorOpen(!0))}):o=="Backspace"?s.scope(()=>{if(e.val_keyword)return;let c=[...e.val_status.dataValue];c.pop(),e.set_status(r=>O(S({},r),{dataValue:c,eventType:"update",eventID:K()}))}):o=="Enter"&&s.scope(()=>{if(p)return;if(!e.val_selectorOpen)return e.set_selectorOpen(!0);let c=e.val_options.find(m=>m.value==e.val_optionFocused);if(!c)return;let{value:r}=c;e.set_status(m=>{let l=[...m.dataValue];return s.scope(()=>{if(r===null)return l=[];m.dataValue.includes(r)?l=l.filter(v=>v!==r):t.multiSelect?l.push(r):l=[r]}),O(S({},m),{dataValue:l,eventType:"update",eventID:K()})}),e.set_keyword(""),e.set_preventDynamicSearchOnKeywordChange(!0)}),s.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(o))return;if(a.preventDefault(),!e.val_selectorOpen)return e.set_selectorOpen(!0);let c=o=="ArrowDown"?1:-1,r=U.FilterSelectableOptions(e.val_options,e.val_keyword,!1),m=r.length-1,l=null;s.scope(()=>{var v,C,_,g,D,w,T,R,P,V;let f=r.findIndex(A=>A.value==e.val_optionFocused);if(f==-1&&(f=0),c==1){if(l=(C=(v=r[0])==null?void 0:v.value)!=null?C:null,h){l=(_=r[m].value)!=null?_:null;return}if(f==-1||f==m)return;l=(D=(g=r[f+1])==null?void 0:g.value)!=null?D:null}else{if(l=(w=r[m].value)!=null?w:null,h){l=(R=(T=r[0])==null?void 0:T.value)!=null?R:null;return}if(f==-1||f==0)return;l=(V=(P=r[f-1])==null?void 0:P.value)!=null?V:null}}),e.set_optionFocused(l)}),t.enableFormSubmit&&N.SubmitForm(a,e.rootStates.form)},onChange:a=>{let d=a.target.value;e.set_keyword(d)}},"searchInput")},Selector:e=>{var h;let[t,p]=I("idle"),[u,a]=I("idle");F(()=>{if(!e.val_selectorOpen||!e.rootStates.DynamicOptionsOnSearch)return;if(e.val_preventDynamicSearchOnKeywordChange)return e.set_preventDynamicSearchOnKeywordChange(!1);if(t=="idle")return p("ok");a("fetch");let c="autocomplete-search-"+e.rootStates.componentID;s.interval.once(()=>Y(void 0,null,function*(){let r=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);a("idle");let m=U.InitOptions(r||[]);e.set_options(m)}),300,c)},[e.val_keyword]);let o=[],d=U.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0);d.forEach((c,r)=>{let{type:m,value:l}=c,f=e.val_optionFocused==l,v=e.val_status.dataValue.includes(l),C=e.rootStates.SelectorComponent;o.push(n(C,{option:c,isFocused:f,isSelected:v,addCallback:()=>{e.set_status(_=>{let g=[..._.dataValue];return s.scope(()=>{if(l===null)return g=[];_.dataValue.includes(l)?g=g.filter(w=>w!==l):e.rootStates.multiSelect?g.push(l):g=[l]}),O(S({},_),{dataValue:g,eventType:"update",eventID:K()})})}},s.Stringify(l)||K()))}),d.length||(o=[n(W.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]),u=="fetch"&&(o=[B(q.Left,{padding:1,fontColor:"3.blur",children:[n(se.Theme.R,{showInitial:!0}),n(W.Supplement,{children:"Loading..."})]},"loader")]);let i={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:i.bottom="100%",i.left=0,i.paddingBottom="1/3";break;case 2:i.bottom="100%",i.right=0,i.paddingBottom="1/3";break;case 3:i.top="100%",i.left=0,i.paddingTop="1/3";break;case 4:i.top="100%",i.right=0,i.paddingTop="1/3";break;default:break}return n(x,O(S({},i),{children:n(ue.Body,O(S({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:S({maxHeight:12*24},(h=e.rootStates.SelectorStyles)==null?void 0:h.freeCSS),children:n(re,{gap:"1/12",padding:[1,0],children:o})}))}))},Selected:e=>{let{rootStates:t,val_status:p,set_status:u,val_optionsDict:a}=e,o=[];return p.dataValue.forEach(d=>{let i=a[s.Stringify(d)];if(!i)return;let h=t.SelectedComponent,c=i.label;i.value===null&&(c=""),o.push(n(x,{className:z("SelectedCell"),children:n(h,{value:i.value,label:c,removeCallback:r=>{if(r.stopPropagation(),r.preventDefault(),t.disabled)return;let m=[...p.dataValue];m=m.filter(l=>l!==d),u(l=>O(S({},l),{dataValue:m,eventType:"update",eventID:K()}))}})},s.Stringify(i.value)))}),n(X,{children:o})},Core:e=>{var A;let{value:t}=e,[p,u]=I(!1),[a,o]=I(!1),[d,i]=I(!1),[h,c]=I(""),[r,m]=I(e.options),[l,f]=I((A=e.value[0])!=null?A:null),[v,C]=I({}),[_,g]=I(N.DefaultStatus(e.componentID,t)),[D,w]=I({ok:!1,notice:[]}),T=ne(!1);F(()=>{T.current?m(e.options):T.current=!0},[e.options]),F(()=>{if(!r.length)return;let $=[...r],J=S({},v);$.forEach(H=>{H.type!="label"&&(J[s.Stringify(H.value)]=H)}),C(J)},[r]);let R={rootStates:e,val_options:r,set_options:m,val_optionFocused:l,set_optionFocused:f,val_optionsDict:v,set_optionsDict:C,val_preventDynamicSearchOnKeywordChange:a,set_preventDynamicSearchOnKeywordChange:o,val_preventOpenSelectorOnFocus:p,set_preventOpenSelectorOnFocus:u,val_selectorOpen:d,set_selectorOpen:i,val_keyword:h,set_keyword:c,val_status:_,set_status:g,val_validate:D,set_validate:w},P=!!e.multiSelect;N.CommonEffects({type:P?"autocomplete.multi":"autocomplete.single",states:e,val_status:_,set_status:g,val_validate:D,set_validate:w,SystemValidation:me});let V=_.dataValue.length&&_.dataValue[0]!==null;return V=V||d,B(pe,{val_status:_,set_status:g,val_validate:D,states:e,children:[n(Se,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:V}),n(L.Shallow,S({},R)),n(L.Button,S({},R))]})}},te=e=>{var p;let t=S({},e);return t=O(S({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:u,isSelected:a,isFocused:o,addCallback:d})=>u.type=="selector"?n(Z.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:i=>{d()},children:B(q.Left,{gap:"1/2",children:[a&&n(M.Check,{fontColor:"theme"}),n(W.Supplement,{transition:"short",children:u.label})]})}):n(X,{children:u.label}),SelectedComponent:({value:u,label:a,removeCallback:o})=>B(q.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(x,{padding:[0,"1/4"],children:a}),n(Z.Sub,{flexSizing:"none",color:"cloud",fontColor:"white",backgroundColor:"layer.5",isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(M.Times,{ssSphere:1})})]}),SelectorPosition:3},t),{freeCSS:S({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:n(W.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=s.flatArray((p=t.value)!=null?p:null),t.options=U.InitOptions(t.options),s.is.nullish(t.rightIcon)&&(t.rightIcon=n(ee,{ssSphere:2,children:n(M.Search,{})}),t.disabled&&(t.rightIcon=n(ee,{ssSphere:2,fontColor:"5.translucent",children:n(M.Ban,{})}))),t.rightIcon&&(t=S({paddingRight:3},t)),t.leftIcon&&(t=S({paddingLeft:3},t)),n(ce,{componentID:t.componentID,children:L.Core,states:de(t)})};export{te as Autocomplete,te as default};

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

@@ -29,10 +29,12 @@ declare namespace Select {
         type?: 'selector';
         value: T;
         label: ReactElement;
+        searchValue?: string;
     } | {
         type: 'label';
         value?: T;
         label: ReactElement;
+        searchValue?: string;
     };
     type WrapperStates = {
         rootStates: Input & {

package/dist/fn/Input/Select.js

@@ -1 +1 @@
-import{b as a,c,d as z}from"../../chunk-C5N2D3ZX.js";import{Fragment as $,jsx as l,jsxs as F}from"react/jsx-runtime";import v,{UUID as k}from"jmini";import{useState as A,useEffect as ne}from"react";import{ExtractStyles as Te}from"../../@utils";import{Box as I,Span as xe,FAI as re,Column as Fe}from"../../atoms";import{Literal as B,Row as ie}from"../../mols";import{Button as we}from"../Button";import{Sheet as Re}from"../Sheet";import{OptionalInputWrapper as ke,BoxWrapper as Ae,CoreEffects as x,DefaultBoxishStyles as Ee}from"./core";import{InputAutocompleteClasses as E}from"../../@styles/componentClasses";import{InputLabel as Be}from"./Label";import{RightIcon as Le}from".";function We(e){let{value:t,states:o}=e,{required:r,options:n}=o,f=[];return r&&t===null&&f.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!f.filter(({type:p})=>p=="invalid").length,notice:f}}const H={FilterSelectableOptions:(e,t)=>{let o=e.rootStates.options;return t||(o=o.filter(r=>r.type!="label")),o}},h={Shallow:e=>{let{rootStates:t,val_status:o}=e,r=Te(t);return l(I,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(B.Description,c(a({className:t.className},r),{position:"absolute",width:1,freeCSS:c(a({},r.freeCSS),{color:"orange"}),children:l(I,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>F($,{children:[l(h.LegacySelector,a({},e)),l(h.Original,a({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:l(I,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:r,val_optionFocused:n,set_optionFocused:f,val_validate:p,set_validate:w,val_status:m,set_status:b,val_selectorOpen:S,set_selectorOpen:u}=e,U=t,{tone:R,required:D,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:j,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,value:N="",options:K,leftIndicator:me,rightIndicator:J,leftIcon:ve,rightIcon:ye,componentID:be,status_id:ge,wrapStyles:Ie,SelectedCellStyles:he,SelectorCellStyles:Ce,SelectorMode:_e,SelectorStyles:De,SelectorPosition:Oe}=U,i=z(U,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return ne(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let s="select-click-"+t.componentID;if(S){if(!v('[data-input-origin="'+t.componentID+'"]'))return;v(document).addEvent({eventID:s,eventType:"click",callback:d=>{let O=v(d.target),V=!!v(O).parent("."+E("Core")).length;v(O).parent("."+E("Selector")).length||V||u(!1)}})}else v(document).removeEvent([s])},[S]),ne(()=>{if(e.rootStates.SelectorMode!="original"||m.eventType=="init"||!S)return;let s=v('[data-input-origin="'+t.componentID+'"]');s&&s.focus()},[m.dataValue]),e.rootStates.SelectorMode!="original"?null:F($,{children:[l(I,c(a({tabIndex:0},i),{"data-disabled":t.disabled,"data-show-validation":x.isShowValidation(p,m,!!M),"data-component-id":m.componentID,"data-input-origin":m.componentID,className:[W,E("Core")].join(" "),onFocus:s=>{if(i!=null&&i.onFocus&&(i==null||i.onFocus(s)),!t.disabled){if(o)return r(!1);u(!0)}},onClick:s=>{i!=null&&i.onClick&&(i==null||i.onClick(s)),!t.disabled&&u(!0)},onKeyDown:s=>{let{key:g,metaKey:d,ctrlKey:O}=s,V=d||O;if(i!=null&&i.onKeyDown&&(i==null||i.onKeyDown(s)),P&&x.SubmitForm(s,L),!t.disabled){if(v.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(g))return;if(s.preventDefault(),!S)return u(!0);let C=g=="ArrowDown"?1:-1,y=H.FilterSelectableOptions(e),q=y.length-1,_=null;v.scope(()=>{var X,G,Q,Y,Z,ee,te,le,ae,oe;let T=y.findIndex(Ve=>Ve.value==n);if(C==1){if(_=(G=(X=y[0])==null?void 0:X.value)!=null?G:null,V){_=(Q=y[q].value)!=null?Q:null;return}if(T==-1||T==q)return;_=(Z=(Y=y[T+1])==null?void 0:Y.value)!=null?Z:null}else{if(_=(ee=y[q].value)!=null?ee:null,V){_=(le=(te=y[0])==null?void 0:te.value)!=null?le:null;return}if(T==-1||T==0)return;_=(oe=(ae=y[T-1])==null?void 0:ae.value)!=null?oe:null}}),f(_)}),g=="Escape")u(!1);else if(g=="Tab")u(!1);else if(g=="Backspace")b(C=>c(a({},C),{dataValue:null,eventType:"update",eventID:k()}));else if(g==" ")s.preventDefault(),u(!0);else if(g=="Enter"){if(!S)return u(!0);s.preventDefault();let C=t.options.find(y=>y.value==n);if(!C)return;b(y=>c(a({},y),{dataValue:C.value,eventType:"update",eventID:k()})),u(!1)}}},children:F(ie.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(h.Placeholder,a({},e)),l(h.Selected,a({},e)),l(xe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})})),S&&l(h.Selector,a({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:r,val_optionFocused:n,set_optionFocused:f,val_validate:p,set_validate:w,val_status:m,set_status:b,val_selectorOpen:S,set_selectorOpen:u}=e,g=t,{tone:R,required:D,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:j,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,onKeyDown:N,onChange:K,value:me="",options:J,leftIndicator:ve,rightIndicator:ye,leftIcon:be,rightIcon:ge,componentID:Ie,status_id:he,wrapStyles:Ce,SelectedCellStyles:_e,SelectorCellStyles:De,SelectorMode:Oe,SelectorStyles:i,SelectorPosition:U}=g,s=z(g,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:F(I,c(a({htmlTag:"select",tabIndex:0},s),{"data-disabled":t.disabled,"data-show-validation":x.isShowValidation(p,m,!!M),"data-component-id":m.componentID,"data-input-origin":m.componentID,className:[W,E("Core")].join(" "),onKeyDown:d=>{N&&N(d),P&&x.SubmitForm(d,L)},onChange:d=>{let{value:O}=d.target;p.ok&&w({ok:!1,notice:[]}),b(V=>c(a({},V),{dataValue:O,eventType:"update",eventID:k()})),K&&K(d)},children:[!!j&&l("option",{value:"null",children:"\u9078\u629E"}),J.map(d=>v.is.nullish(d.value)?null:l("option",{value:d.value,children:d.label},String(d.value)))]}))},Selector:e=>{var f;let t=[],o=H.FilterSelectableOptions(e,!0),r=H.FilterSelectableOptions(e);o.forEach((p,w)=>{let{type:m,value:b}=p,S=e.val_optionFocused==b,u=e.val_status.dataValue===b;if(m=="selector"){t.push(l(we.Sub.S,c(a({color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:u||S,isActiveStyles:S?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:R=>{e.set_status(D=>c(a({},D),{dataValue:b,eventType:"update",eventID:k()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:F(ie.Left,{gap:"1/2",children:[u&&l(re.Check,{fontColor:"theme"}),l(B.Supplement,{transition:"short",flexSizing:0,children:p.label})]})}),String(b)));return}t.push(l(I,{children:p.label},k()))}),r.length||(t=[l(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]);let n={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:n.bottom="100%",n.left=0,n.paddingBottom="1/3";break;case 2:n.bottom="100%",n.right=0,n.paddingBottom="1/3";break;case 3:n.top="100%",n.left=0,n.paddingTop="1/3";break;case 4:n.top="100%",n.right=0,n.paddingTop="1/3";break;default:break}return l(I,c(a({},n),{children:l(Re.Body,c(a({className:E("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:a({minWidth:12*6,maxHeight:12*24},(f=e.rootStates.SelectorStyles)==null?void 0:f.freeCSS),children:l(Fe,{gap:"1/12",padding:[1,0],children:t})}))}))},Selected:e=>{let t=[];return e.val_status.dataValue!==null&&v.scope(()=>{let o=e.rootStates.options.find(r=>v.is.equal(r.value,e.val_status.dataValue));o&&t.push(l(I,c(a({},e.rootStates.SelectedCellStyles),{children:o.label}),String(o.value)))}),l($,{children:t})},Core:e=>{var D;let{value:t}=e,[o,r]=A(x.DefaultStatus(e.componentID,t)),[n,f]=A(!1),[p,w]=A(!1),[m,b]=A((D=e.value)!=null?D:null),[S,u]=A({ok:!1,notice:[]}),R={rootStates:e,val_preventOpenSelectorOnFocus:n,set_preventOpenSelectorOnFocus:f,val_optionFocused:m,set_optionFocused:b,val_selectorOpen:p,set_selectorOpen:w,val_status:o,set_status:r,val_validate:S,set_validate:u};return x.CommonEffects({type:"select",states:e,val_status:o,set_status:r,val_validate:S,set_validate:u,SystemValidation:We}),F(Ae,{val_status:o,set_status:r,val_validate:S,states:e,children:[l(Be,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||o.dataValue!==null}),l(h.Shallow,a({},R)),l(h.Button,a({},R))]})}},se=e=>{var o;let t=a({},e);return t=c(a({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:a({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:l(B.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(o=t.value)!=null?o:null,t.options.forEach((r,n)=>{let{type:f,value:p}=r;t.options[n]=c(a({},r),{value:p,type:f||"selector"})}),v.is.nullish(t.rightIcon)&&(t.rightIcon=l(Le,{ssSphere:2,children:l(re.AngleDown,{})})),l(ke,{componentID:t.componentID,children:h.Core,states:Ee(t)})};export{se as Select,se as default};
+import{b as n,c as u,d as z}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as a,jsxs as w}from"react/jsx-runtime";import c,{UUID as R}from"jmini";import{useState as k,useEffect as oe}from"react";import{ExtractStyles as Te}from"../../@utils";import{Box as I,Span as xe,FAI as ne,Column as Fe}from"../../atoms";import{Literal as B,Row as re}from"../../mols";import{Button as we}from"../Button";import{Sheet as Re}from"../Sheet";import{OptionalInputWrapper as ke,BoxWrapper as Ae,CoreEffects as F,DefaultBoxishStyles as Ee}from"./core";import{InputAutocompleteClasses as A}from"../../@styles/componentClasses";import{InputLabel as Be}from"./Label";import{RightIcon as Le}from".";function We(e){let{value:t,states:o}=e,{required:l,options:y}=o,p=[];return l&&t===null&&p.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!p.filter(({type:S})=>S=="invalid").length,notice:p}}const se={FilterSelectableOptions:(e,t)=>{let o=e.rootStates.options;return t||(o=o.filter(l=>l.type!="label")),o}},C={Shallow:e=>{let{rootStates:t,val_status:o}=e,l=Te(t);return a(I,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:a(B.Description,u(n({className:t.className},l),{position:"absolute",width:1,freeCSS:u(n({},l.freeCSS),{color:"orange"}),children:a(I,{"data-input-value-shallow":o.componentID,children:"A"})}))})},Button:e=>w(H,{children:[a(C.LegacySelector,n({},e)),a(C.Original,n({},e))]}),Placeholder:e=>!e.rootStates.placeholder||e.val_status.dataValue!==null?null:a(I,{position:"absolute",opacity:"middle",fontColor:"3.blur",children:e.rootStates.placeholder||""}),Original:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,U=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,value:N="",options:K,leftIndicator:me,rightIndicator:j,leftIcon:ve,rightIcon:ye,componentID:be,status_id:ge,wrapStyles:he,SelectedCellStyles:Ie,SelectorCellStyles:Ce,SelectorMode:_e,SelectorStyles:Ve,SelectorPosition:De}=U,r=z(U,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return oe(()=>{if(e.rootStates.SelectorMode!="original"||t.disabled)return;let i="select-click-"+t.componentID;if(d){if(!c('[data-input-origin="'+t.componentID+'"]'))return;c(document).addEvent({eventID:i,eventType:"click",callback:m=>{let O=c(m.target),T=!!c(O).parent("."+A("Core")).length;c(O).parent("."+A("Selector")).length||T||f(!1)}})}else c(document).removeEvent([i])},[d]),oe(()=>{if(e.rootStates.SelectorMode!="original"||s.eventType=="init"||!d)return;let i=c('[data-input-origin="'+t.componentID+'"]');i&&i.focus()},[s.dataValue]),e.rootStates.SelectorMode!="original"?null:w(H,{children:[a(I,u(n({tabIndex:0},r),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onFocus:i=>{if(r!=null&&r.onFocus&&(r==null||r.onFocus(i)),!t.disabled){if(o)return l(!1);f(!0)}},onClick:i=>{r!=null&&r.onClick&&(r==null||r.onClick(i)),!t.disabled&&f(!0)},onKeyDown:i=>{let{key:b,metaKey:m,ctrlKey:O}=i,T=m||O;if(r!=null&&r.onKeyDown&&(r==null||r.onKeyDown(i)),P&&F.SubmitForm(i,L),!t.disabled){if(c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(b))return;if(i.preventDefault(),!d)return f(!0);let _=b=="ArrowDown"?1:-1,v=se.FilterSelectableOptions(e),q=v.length-1,V=null;c.scope(()=>{var J,X,G,Q,Y,Z,ee,te,le,ae;let x=v.findIndex(Oe=>Oe.value==y);if(_==1){if(V=(X=(J=v[0])==null?void 0:J.value)!=null?X:null,T){V=(G=v[q].value)!=null?G:null;return}if(x==-1||x==q)return;V=(Y=(Q=v[x+1])==null?void 0:Q.value)!=null?Y:null}else{if(V=(Z=v[q].value)!=null?Z:null,T){V=(te=(ee=v[0])==null?void 0:ee.value)!=null?te:null;return}if(x==-1||x==0)return;V=(ae=(le=v[x-1])==null?void 0:le.value)!=null?ae:null}}),p(V)}),b=="Escape")f(!1);else if(b=="Tab")f(!1);else if(b=="Backspace")g(_=>u(n({},_),{dataValue:null,eventType:"update",eventID:R()}));else if(b==" ")i.preventDefault(),f(!0);else if(b=="Enter"){if(!d)return f(!0);i.preventDefault();let _=t.options.find(v=>v.value==y);if(!_)return;g(v=>u(n({},v),{dataValue:_.value,eventType:"update",eventID:R()})),f(!1)}}},children:w(re.Left,{flexWrap:!0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[a(C.Placeholder,n({},e)),a(C.Selected,n({},e)),a(xe,{width:0,overflow:"hidden",opacity:"trans",children:"A"})]})})),d&&a(C.Selector,n({},e))]})},LegacySelector:e=>{let{rootStates:t,val_preventOpenSelectorOnFocus:o,set_preventOpenSelectorOnFocus:l,val_optionFocused:y,set_optionFocused:p,val_validate:S,set_validate:h,val_status:s,set_status:g,val_selectorOpen:d,set_selectorOpen:f}=e,b=t,{tone:D,required:E,form:L,className:W,label:ue,isLabelActive:ce,placeholder:pe,enableFormSubmit:P,emptySelect:$,checkValidationAtFirst:M,onValidate:Se,onUpdateValue:de,onUpdateValidValue:fe,onKeyDown:N,onChange:K,value:me="",options:j,leftIndicator:ve,rightIndicator:ye,leftIcon:be,rightIcon:ge,componentID:he,status_id:Ie,wrapStyles:Ce,SelectedCellStyles:_e,SelectorCellStyles:Ve,SelectorMode:De,SelectorStyles:r,SelectorPosition:U}=b,i=z(b,["tone","required","form","className","label","isLabelActive","placeholder","enableFormSubmit","emptySelect","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","onKeyDown","onChange","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentID","status_id","wrapStyles","SelectedCellStyles","SelectorCellStyles","SelectorMode","SelectorStyles","SelectorPosition"]);return e.rootStates.SelectorMode!="legacy"?null:w(I,u(n({htmlTag:"select",tabIndex:0},i),{"data-disabled":t.disabled,"data-show-validation":F.isShowValidation(S,s,!!M),"data-component-id":s.componentID,"data-input-origin":s.componentID,className:[W,A("Core")].join(" "),onKeyDown:m=>{N&&N(m),P&&F.SubmitForm(m,L)},onChange:m=>{let{value:O}=m.target;S.ok&&h({ok:!1,notice:[]}),g(T=>u(n({},T),{dataValue:O,eventType:"update",eventID:R()})),K&&K(m)},children:[!!$&&a("option",{value:"null",children:"\u9078\u629E"}),j.map(m=>c.is.nullish(m.value)?null:a("option",{value:m.value,children:m.label},String(m.value)))]}))},Selector:e=>{var y;let t=[],o=se.FilterSelectableOptions(e,!0);o.forEach((p,S)=>{let{type:h,value:s}=p,g=e.val_optionFocused==s,d=e.val_status.dataValue===s;if(h=="selector"){t.push(a(we.Sub.S,u(n({color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1],isActive:d||g,isActiveStyles:g?{backgroundColor:"cloud"}:{backgroundColor:"theme.opa.few",fontColor:"theme"}},e.rootStates.SelectorCellStyles),{onClick:f=>{e.set_status(D=>u(n({},D),{dataValue:s,eventType:"update",eventID:R()})),e.set_selectorOpen(!1),e.set_preventOpenSelectorOnFocus(!0)},children:w(re.Left,{gap:"1/2",children:[d&&a(ne.Check,{fontColor:"theme"}),a(B.Supplement,{transition:"short",flexSizing:0,children:p.label})]})}),String(s)));return}t.push(a(I,{children:p.label},R()))}),o.length||(t=[a(B.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"},"no-selector-notice")]);let l={position:"absolute",minWidth:1,freeCSS:{zIndex:1e3}};switch(e.rootStates.SelectorPosition){case 1:l.bottom="100%",l.left=0,l.paddingBottom="1/3";break;case 2:l.bottom="100%",l.right=0,l.paddingBottom="1/3";break;case 3:l.top="100%",l.left=0,l.paddingTop="1/3";break;case 4:l.top="100%",l.right=0,l.paddingTop="1/3";break;default:break}return a(I,u(n({},l),{children:a(Re.Body,u(n({className:A("Selector"),ssCardBox:!0,borderRadius:"2.tone.secondary",boxShadow:"1.normal",overflow:"auto"},e.rootStates.SelectorStyles),{freeCSS:n({minWidth:12*6,maxHeight:12*24},(y=e.rootStates.SelectorStyles)==null?void 0:y.freeCSS),children:a(Fe,{gap:"1/12",padding:[1,0],children:t})}))}))},Selected:e=>{let t=[];return e.val_status.dataValue!==null&&c.scope(()=>{let o=e.rootStates.options.find(l=>c.is.equal(l.value,e.val_status.dataValue));o&&t.push(a(I,u(n({},e.rootStates.SelectedCellStyles),{children:o.label}),String(o.value)))}),a(H,{children:t})},Core:e=>{var E;let{value:t}=e,[o,l]=k(F.DefaultStatus(e.componentID,t)),[y,p]=k(!1),[S,h]=k(!1),[s,g]=k((E=e.value)!=null?E:null),[d,f]=k({ok:!1,notice:[]}),D={rootStates:e,val_preventOpenSelectorOnFocus:y,set_preventOpenSelectorOnFocus:p,val_optionFocused:s,set_optionFocused:g,val_selectorOpen:S,set_selectorOpen:h,val_status:o,set_status:l,val_validate:d,set_validate:f};return F.CommonEffects({type:"select",states:e,val_status:o,set_status:l,val_validate:d,set_validate:f,SystemValidation:We}),w(Ae,{val_status:o,set_status:l,val_validate:d,states:e,children:[a(Be,{componentID:e.componentID,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||o.dataValue!==null}),a(C.Shallow,n({},D)),a(C.Button,n({},D))]})}},ie=e=>{var o;let t=n({},e);return t=u(n({emptySelect:!0,SelectorMode:"original",SelectorPosition:3},t),{freeCSS:n({cursor:"pointer"},t.freeCSS)}),t.emptySelect&&(t.options=[{value:null,label:a(B.Supplement,{fontColor:"4.thin",children:"\u672A\u9078\u629E"})},...t.options]),t.value=(o=t.value)!=null?o:null,t.options.forEach((l,y)=>{let{type:p,value:S,searchValue:h}=l,s=h||c.is.string(S)&&S||c.Stringify(S||"");t.options[y]=u(n({},l),{value:S,searchValue:s,type:p||"selector"})}),c.is.nullish(t.rightIcon)&&(t.rightIcon=a(Le,{ssSphere:2,children:a(ne.AngleDown,{})})),a(ke,{componentID:t.componentID,children:C.Core,states:Ee(t)})};export{ie as Select,ie as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.2.156",
+  "version": "0.2.158",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",
@@ -90,7 +90,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "dotenv": "^16.4.6",
-    "jmini": "^0.0.45",
+    "jmini": "^0.0.46",
     "react": "^18.3.1"
   },
   "devDependencies": {