amotify 0.2.262 → 0.2.264
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1774,7 +1774,7 @@ text5`}
|
|
|
1774
1774
|
] }
|
|
1775
1775
|
DynamicOptionsOnSearch={ async ( keyword ) => {
|
|
1776
1776
|
console.log( 'keyword',keyword )
|
|
1777
|
-
await $$.pending(
|
|
1777
|
+
await $$.pending( 1000 )
|
|
1778
1778
|
let options: Input.Autocomplete.Option[] = []
|
|
1779
1779
|
for ( let i = 0; i < 100; i++ ) {
|
|
1780
1780
|
let index = i + 1
|
package/demo/next/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as f,c as _,d as Y,e as Z}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as n,jsxs as A}from"react/jsx-runtime";import{useState as b,useEffect as B,useRef as se}from"react";import c,{UUID as C}from"jmini";import{ExtractStyles as ue}from"../../@utils";import{Box as L,Span as ce,FAI as N,Column as ee}from"../../atoms";import{Literal as U,Row as M}from"../../mols";import{Button as te}from"../Button";import{Loader as pe}from"../Loader";import{Sheet as de}from"../Sheet";import{OptionalInputWrapper as Se,BoxWrapper as fe,CoreEffects as W,DefaultBoxishStyles as me}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as ve}from"./Label";import{RightIcon as oe}from".";function ye(e){let{value:t,states:r}=e,{required:p,options:o,min:l,max:a}=r;l=l||0,a=a||65535;let d=[],s=t.filter(u=>u!==null).length;return p&&(s||d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),s<l&&d.push({type:"invalid",label:l+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),s>a&&d.push({type:"invalid",label:a+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!d.filter(({type:u})=>u=="invalid").length,notice:d}}const w={InitOptions:e=>{let t=[];return e.forEach(r=>{if(!r)return;let{type:p,label:o,value:l,searchValue:a}=r,d=a||c.is.string(o)&&o||""||c.is.string(l)&&l||c.Stringify(l||"")||"";c.is.nullish(o)&&(o=String(l)),t.push(_(f({id:C(8)},r),{searchValue:d,type:p||"selector",label:o,value:l}))}),t},FilterSelectableOptions:(e,t,r)=>{let p=e;return r||(p=e.filter(o=>(o==null?void 0:o.type)!="label")),c.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");p=p.filter(l=>(l.searchValue||"").toLower().replace(/ /g,"").includes(o))}),p},Shallow:e=>{let{rootStates:t,val_status:r}=e,p=ue(t);return n(L,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:n(U.Description,_(f({className:t.className},p),{position:"absolute",width:1,freeCSS:_(f({},p.freeCSS),{color:"orange"}),"data-id":"shallow_"+r.componentId,children:n(L,{"data-input-value-shallow":r.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:r,set_keyword:p,val_optionFocused:o,set_optionFocused:l,val_preventOpenSelector:a,set_preventOpenSelector:d,val_openSelector:s,set_openSelector:u,val_status:i,set_status:S,val_activeInput:m,set_activeInput:y}=e,G=t,{tone:D,required:O,form:g,className:x,multiSelect:I,enableFormSubmit:k,checkValidationAtFirst:F,onValidate:E,onValidateDelay:J,onUpdateValue:K,onUpdateValidValue:q,onUserAction:X,value:$="",options:R,leftIndicator:P,rightIndicator:T,leftIcon:_e,rightIcon:he,componentId:ge,status_id:Ie,wrapStyles:be,emptySelect:Ce,SearchInput:we,SearchInputPlaceholder:De,SelectedComponent:Oe,SelectorComponent:xe,SelectorStyles:ke,SelectorPosition:Re,DynamicOptionsOnSearch:Te,DynamicOptionsOnSearchDelay:Ve}=G,v=Y(G,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]),j="#SearchInput_"+t.componentId;return B(()=>{var V;if(t.disabled||!s||c.is.exist(o))return;let h=w.FilterSelectableOptions(e.val_options,r,!1);l(((V=h[0])==null?void 0:V.id)||"")},[r]),B(()=>{if(i.eventType!="init"&&i.eventType!="override"){if(t.max==i.rawValue.length){u(!1),d(!0),p("");return}c(j).focus()}},[i.rawValue]),B(()=>{let h="autocomplete-click-"+t.componentId;if(!s){c(document).removeEvent([h]);return}c('[data-input-origin="'+t.componentId+'"]')&&(c(j).focus(),c(document).addEvent({eventID:h,eventType:"mousedown",callback:ne=>{let Q=c(ne.target),ae=!!c(Q).parent("."+z("Core")).length,ie=!!c(Q).parent("."+z("Selector")).length;ae||ie||(S(re=>_(f({},re),{eventID:C(8),isFocusing:!1})),u(!1),y(!1))},options:{passive:!1}}))},[s]),A(H,{children:[n(L,_(f({tabIndex:0},v),{"data-disabled":t.disabled,"data-show-validation":W.isShowValidation(i,!!F),"data-component-id":i.componentId,"data-input-origin":i.componentId,"data-focus":!!s||!!m,className:[x,z("Core")].join(" "),onFocus:h=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(h)),!t.disabled){if(a)return d(!1);u(!0),y(!0),h.preventDefault()}},onCompositionStart:h=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(h))},onCompositionEnd:h=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(h))},onClick:h=>{v!=null&&v.onClick&&(v==null||v.onClick(h)),!t.disabled&&(u(!0),y(!0))},onKeyDown:h=>{let{key:V}=h;k&&W.SubmitForm(h,g),!s&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(u(!0),y(!0))},children:A(M.Left,{gap:0,children:[n(ce,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),A(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[n(w.Selected,f({},e)),n(w.SearchInput,f({},e))]})]})})),s&&n(w.Selector,f({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:r,set_status:p}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:n(L,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onFocus:o=>{p(l=>_(f({},l),{eventID:C(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(l=>_(f({},l),{eventID:C(8),isFocusing:!1}))},onCompositionStart:o=>{p(l=>_(f({},l),{eventID:C(8),isComposing:!0}))},onCompositionEnd:o=>{p(l=>_(f({},l),{eventID:C(8),isComposing:!1}))},onKeyDown:o=>{let{key:l,metaKey:a,ctrlKey:d}=o,s=a||d;l=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):l==" "?c.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):l=="Backspace"?c.scope(()=>{if(e.val_keyword)return;let u=[...e.val_status.rawValue];u.pop(),e.set_status(i=>_(f({},i),{rawValue:u,eventType:"update",eventID:C(8),isInspected:!1}))}):l=="Enter"&&c.scope(()=>{if(r.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!e.val_openSelector)return e.set_openSelector(!0);if(!e.val_optionFocused)return;let u=e.val_options.find(S=>(S==null?void 0:S.id)==e.val_optionFocused);if(!u)return;let{value:i}=u;e.set_status(S=>{let m=[...S.rawValue];return c.scope(()=>{if(i===null)return m=[];S.rawValue.includes(i)?m=m.filter(D=>D!==i):t.multiSelect?m.push(i):m=[i]}),_(f({},S),{rawValue:m,eventType:"update",eventID:C(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(l))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let u=l=="ArrowDown"?1:-1,i=w.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,m=null;c.scope(()=>{var D,O,g,x,I,k,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){m=(D=i[0])==null?void 0:D.id;return}if(u==1){if(m=(O=i[0])==null?void 0:O.id,s){m=(g=i[S])==null?void 0:g.id;return}if(y==-1||y==S)return;m=(x=i[y+1])==null?void 0:x.id}else{if(m=(I=i[S])==null?void 0:I.id,s){m=(k=i[0])==null?void 0:k.id;return}if(y==-1||y==0)return;m=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(m)}),t.enableFormSubmit&&W.SubmitForm(o,e.rootStates.form)},onChange:o=>{let a=o.target.value;e.set_openSelector(!0),e.set_optionFocused(""),e.set_keyword(a)}},"searchInput")},Selector:e=>{var d;let[t,r]=b("idle"),[p,o]=b("idle");B(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(e.val_status.isComposing)return;if(t=="idle")return r("ok");o("fetch");let s="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),c.interval.once(()=>Z(void 0,null,function*(){var S;let u=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=w.InitOptions(u||[]);e.set_options(i),e.set_optionFocused(((S=i[0])==null?void 0:S.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,s)},[e.val_keyword,e.val_status.isComposing]),B(()=>{let s=c(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!s)return;let u=c(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];u&&(s.scrollTop=u.offsetTop-24)},[e.val_optionFocused]);let l=w.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),a={};switch(e.rootStates.SelectorPosition){case 1:a.bottom="100%",a.left=0,a.paddingBottom="1/3";break;case 2:a.bottom="100%",a.right=0,a.paddingBottom="1/3";break;case 3:a.top="100%",a.left=0,a.paddingTop="1/3";break;case 4:a.top="100%",a.right=0,a.paddingTop="1/3";break;default:break}return n(L,_(f({position:"absolute"},a),{freeCSS:f({minWidth:"75%",zIndex:1e3},a.freeCSS),children:n(de.Body,_(f({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:f({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(ee,{gap:"1/12",padding:[1,0],children:[p=="fetch"&&n(M.Center,{padding:"1/2",children:n(pe.Theme.R,{showInitial:!0})}),p!="fetch"&&A(H,{children:[!l.length&&n(U.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),l.map((s,u)=>{if(!s)return null;let{type:i,value:S}=s,m=e.val_optionFocused==s.id,y=e.val_status.rawValue.includes(S),D=e.rootStates.SelectorComponent;return n(ee,{"data-autocomplete-input-value":s.id,children:n(D,{option:s,isFocused:m,isSelected:y,addCallback:()=>{e.set_status(O=>{let g=[...O.rawValue];return c.scope(()=>{if(S===null)return g=[];O.rawValue.includes(S)?g=g.filter(I=>I!==S):e.rootStates.multiSelect?g.push(S):g=[S]}),_(f({},O),{rawValue:g,eventType:"update",eventID:C(8),isInspected:!1})})}})},s.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:r,set_status:p,val_optionsDict:o}=e,l=[];return r.rawValue.forEach(a=>{let d=o[c.Stringify(a)];if(!d)return;let s=t.SelectedComponent,u=d.label;(d==null?void 0:d.value)===null&&(u=""),l.push(n(L,{className:z("SelectedCell"),children:n(s,{value:d==null?void 0:d.value,label:u,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let S=[...r.rawValue];S=S.filter(m=>m!==a),p(m=>_(f({},m),{rawValue:S,eventType:"update",eventID:C(8),isInspected:!1}))}})},c.Stringify(d==null?void 0:d.value)||C(8)))}),n(H,{children:l})},Core:e=>{var q,X,$;let{value:t}=e,[r,p]=b(!1),[o,l]=b(!1),[a,d]=b(!1),[s,u]=b(!1),[i,S]=b(""),[m,y]=b(e.options),[D,O]=b(((q=e.options.find(R=>{var P;return(R==null?void 0:R.value)===((P=e.value)==null?void 0:P[0])}))==null?void 0:q.id)||((X=e.options[0])==null?void 0:X.id)||""),[g,x]=b({}),[I,k]=b(W.DefaultStatus(e.componentId,t)),F=se(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[c.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!m.length)return;let R=[...m],P=f({},g);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[c.Stringify(T==null?void 0:T.value)]=T)}),x(P)},[m]);let E={rootStates:e,val_options:m,set_options:y,val_optionFocused:D,set_optionFocused:O,val_optionsDict:g,set_optionsDict:x,val_optionsModified:o,set_optionsModified:l,val_preventOpenSelector:r,set_preventOpenSelector:p,val_openSelector:a,set_openSelector:d,val_activeInput:s,set_activeInput:u,val_keyword:i,set_keyword:S,val_status:I,set_status:k},J=!!e.multiSelect;W.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:k,SystemValidation:ye});let K=I.rawValue.length&&I.rawValue[0]!==null;return K=K||a||s,A(fe,{val_status:I,set_status:k,states:e,children:[n(ve,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),n(w.Shallow,f({},E)),n(w.Button,f({},E))]})}},le=e=>{let t=f({},e);return t=_(f({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:r,isSelected:p,isFocused:o,addCallback:l})=>r?(r==null?void 0:r.type)=="label"?n(H,{children:r.label}):n(te.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:l,children:A(M.Left,{gap:"1/2",children:[p&&n(N.Check,{fontColor:"theme"}),n(U.Supplement,{transition:"short",children:r.label})]})}):null,SelectedComponent:({value:r,label:p,removeCallback:o})=>A(M.Left,{ssCardBox:!0,borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(L,{padding:[0,"1/4"],children:p}),n(te.Sub,{flexSizing:"none",color:"cloud",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:f({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:n(U.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=c.flatArray(t.value),t.options=w.InitOptions(t.options),c.is.nullish(t.rightIcon)&&(t.rightIcon=n(oe,{children:n(N.Search,{})}),t.disabled&&(t.rightIcon=n(oe,{fontColor:"5.translucent",children:n(N.Ban,{})}))),t.rightIcon&&(t=f({paddingRight:3},t)),t.leftIcon&&(t=f({paddingLeft:3},t)),n(Se,{componentId:t.componentId,children:w.Core,states:me(t)})};export{le as Autocomplete,le as default};
|
|
1
|
+
import{b as c,c as _,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as n,jsxs as A}from"react/jsx-runtime";import{useState as C,useEffect as B,useRef as se}from"react";import f,{UUID as I}from"jmini";import{ExtractStyles as ue}from"../../@utils";import{Box as L,Span as ce,FAI as N,Column as Z}from"../../atoms";import{Literal as U,Row as M}from"../../mols";import{Button as ee}from"../Button";import{Loader as pe}from"../Loader";import{Sheet as de}from"../Sheet";import{OptionalInputWrapper as Se,BoxWrapper as fe,CoreEffects as W,DefaultBoxishStyles as me}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as ve}from"./Label";import{RightIcon as te}from".";function ye(e){let{value:t,states:s}=e,{required:p,options:o,min:l,max:a}=s;l=l||0,a=a||65535;let d=[],u=t.filter(r=>r!==null).length;return p&&(u||d.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),u<l&&d.push({type:"invalid",label:l+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),u>a&&d.push({type:"invalid",label:a+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!d.filter(({type:r})=>r=="invalid").length,notice:d}}const w={InitOptions:e=>{let t=[];return e.forEach(s=>{if(!s)return;let{type:p,label:o,value:l,searchValue:a}=s,d=a||f.is.string(o)&&o||""||f.is.string(l)&&l||f.Stringify(l||"")||"";f.is.nullish(o)&&(o=String(l)),t.push(_(c({id:I(8)},s),{searchValue:d,type:p||"selector",label:o,value:l}))}),t},FilterSelectableOptions:(e,t,s)=>{let p=e;return s||(p=e.filter(o=>(o==null?void 0:o.type)!="label")),f.scope(()=>{if(!t)return;let o=t.toLower().replace(/ /g,"");p=p.filter(l=>(l.searchValue||"").toLower().replace(/ /g,"").includes(o))}),p},Shallow:e=>{let{rootStates:t,val_status:s}=e,p=ue(t);return n(L,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:n(U.Description,_(c({className:t.className},p),{position:"absolute",width:1,freeCSS:_(c({},p.freeCSS),{color:"orange"}),"data-id":"shallow_"+s.componentId,children:n(L,{"data-input-value-shallow":s.componentId,children:"A"})}))})},Button:e=>{let{rootStates:t,val_keyword:s,set_keyword:p,val_optionFocused:o,set_optionFocused:l,val_preventOpenSelector:a,set_preventOpenSelector:d,val_openSelector:u,set_openSelector:r,val_status:i,set_status:S,val_activeInput:m,set_activeInput:y}=e,j=t,{tone:D,required:O,form:h,className:x,multiSelect:b,enableFormSubmit:k,checkValidationAtFirst:F,onValidate:E,onValidateDelay:J,onUpdateValue:K,onUpdateValidValue:q,onUserAction:X,value:$="",options:R,leftIndicator:P,rightIndicator:T,leftIcon:_e,rightIcon:ge,componentId:he,status_id:Ie,wrapStyles:be,emptySelect:Ce,SearchInput:we,SearchInputPlaceholder:De,SelectedComponent:Oe,SelectorComponent:xe,SelectorStyles:ke,SelectorPosition:Re,DynamicOptionsOnSearch:Te,DynamicOptionsOnSearchDelay:Ve}=j,v=Q(j,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","SearchInput","SearchInputPlaceholder","SelectedComponent","SelectorComponent","SelectorStyles","SelectorPosition","DynamicOptionsOnSearch","DynamicOptionsOnSearchDelay"]),le="#SearchInput_"+t.componentId;return B(()=>{var V;if(t.disabled||!u||f.is.exist(o))return;let g=w.FilterSelectableOptions(e.val_options,s,!1);l(((V=g[0])==null?void 0:V.id)||"")},[s]),B(()=>{if(i.eventType!="init"&&i.eventType!="override"&&t.max==i.rawValue.length){r(!1),d(!0),p("");return}},[i.rawValue]),B(()=>{let g="autocomplete-click-"+t.componentId;if(!u){f(document).removeEvent([g]);return}f('[data-input-origin="'+t.componentId+'"]')&&(f(le).focus(),f(document).addEvent({eventID:g,eventType:"mousedown",callback:ne=>{let G=f(ne.target),ae=!!f(G).parent("."+z("Core")).length,ie=!!f(G).parent("."+z("Selector")).length;ae||ie||(S(re=>_(c({},re),{eventID:I(8),isFocusing:!1})),r(!1),y(!1))},options:{passive:!1}}))},[u]),A(H,{children:[n(L,_(c({tabIndex:0},v),{"data-disabled":t.disabled,"data-show-validation":W.isShowValidation(i,!!F),"data-component-id":i.componentId,"data-input-origin":i.componentId,"data-focus":!!u||!!m,className:[x,z("Core")].join(" "),onFocus:g=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(g)),!t.disabled){if(a)return d(!1);r(!0),y(!0),g.preventDefault()}},onCompositionStart:g=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(g))},onCompositionEnd:g=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(g))},onClick:g=>{v!=null&&v.onClick&&(v==null||v.onClick(g)),!t.disabled&&(r(!0),y(!0))},onKeyDown:g=>{let{key:V}=g;k&&W.SubmitForm(g,h),!u&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(r(!0),y(!0))},children:A(M.Left,{gap:0,children:[n(ce,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),A(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[n(w.Selected,c({},e)),n(w.SearchInput,c({},e))]})]})})),u&&n(w.Selector,c({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:s,set_status:p}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:n(L,{htmlTag:"input",id:"SearchInput_"+t.componentId,placeholder:t.SearchInputPlaceholder||"\u691C\u7D22...",opacity:e.val_openSelector?"max":"middle",transition:"middle",flexSizing:0,fontSize:"inherit",border:"unset",backgroundColor:"trans",value:e.val_keyword,freeCSS:{outline:"none"},onFocus:o=>{p(l=>_(c({},l),{eventID:I(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(l=>_(c({},l),{eventID:I(8),isFocusing:!1}))},onCompositionStart:o=>{p(l=>_(c({},l),{eventID:I(8),isComposing:!0}))},onCompositionEnd:o=>{p(l=>_(c({},l),{eventID:I(8),isComposing:!1}))},onKeyDown:o=>{let{key:l,metaKey:a,ctrlKey:d}=o,u=a||d;l=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1),e.set_status(r=>_(c({},r),{eventID:I(8),isFocusing:!1}))):l==" "?f.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):l=="Backspace"?f.scope(()=>{if(e.val_keyword)return;let r=[...e.val_status.rawValue];r.pop(),e.set_status(i=>_(c({},i),{rawValue:r,eventType:"update",eventID:I(8),isInspected:!1}))}):l=="Enter"&&f.scope(()=>{if(s.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!e.val_openSelector)return e.set_openSelector(!0);if(!e.val_optionFocused)return;let r=e.val_options.find(S=>(S==null?void 0:S.id)==e.val_optionFocused);if(!r)return;let{value:i}=r;e.set_status(S=>{let m=[...S.rawValue];return f.scope(()=>{if(i===null)return m=[];S.rawValue.includes(i)?m=m.filter(D=>D!==i):t.multiSelect?m.push(i):m=[i]}),_(c({},S),{rawValue:m,eventType:"update",eventID:I(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),f.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(l))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let r=l=="ArrowDown"?1:-1,i=w.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,m=null;f.scope(()=>{var D,O,h,x,b,k,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){m=(D=i[0])==null?void 0:D.id;return}if(r==1){if(m=(O=i[0])==null?void 0:O.id,u){m=(h=i[S])==null?void 0:h.id;return}if(y==-1||y==S)return;m=(x=i[y+1])==null?void 0:x.id}else{if(m=(b=i[S])==null?void 0:b.id,u){m=(k=i[0])==null?void 0:k.id;return}if(y==-1||y==0)return;m=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(m)}),t.enableFormSubmit&&W.SubmitForm(o,e.rootStates.form)},onChange:o=>{let a=o.target.value;e.set_openSelector(!0),e.set_optionFocused(""),e.set_keyword(a)}},"searchInput")},Selector:e=>{var d;let[t,s]=C("idle"),[p,o]=C("idle");B(()=>{if(!e.rootStates.DynamicOptionsOnSearch||!e.val_openSelector)return;if(e.val_optionsModified)return e.set_optionsModified(!1);if(e.val_status.isComposing)return;if(t=="idle")return s("ok");o("fetch");let u="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),f.interval.once(()=>Y(void 0,null,function*(){var S;let r=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=w.InitOptions(r||[]);e.set_options(i),e.set_optionFocused(((S=i[0])==null?void 0:S.id)||"")}),e.rootStates.DynamicOptionsOnSearchDelay||500,u)},[e.val_keyword,e.val_status.isComposing]),B(()=>{let u=f(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!u)return;let r=f(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];r&&(u.scrollTop=r.offsetTop-24)},[e.val_optionFocused]);let l=w.FilterSelectableOptions(e.val_options,e.rootStates.DynamicOptionsOnSearch?"":e.val_keyword,!0),a={};switch(e.rootStates.SelectorPosition){case 1:a.bottom="100%",a.left=0,a.paddingBottom="1/3";break;case 2:a.bottom="100%",a.right=0,a.paddingBottom="1/3";break;case 3:a.top="100%",a.left=0,a.paddingTop="1/3";break;case 4:a.top="100%",a.right=0,a.paddingTop="1/3";break;default:break}return n(L,_(c({position:"absolute"},a),{freeCSS:c({minWidth:"75%",zIndex:1e3},a.freeCSS),children:n(de.Body,_(c({className:z("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,boxShadow:"1.normal",overflow:"auto","data-selector-id":e.val_status.componentId},e.rootStates.SelectorStyles),{freeCSS:c({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(Z,{gap:"1/12",padding:[1,0],children:[p=="fetch"&&n(M.Center,{padding:"1/2",children:n(pe.Theme.R,{showInitial:!0})}),p!="fetch"&&A(H,{children:[!l.length&&n(U.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),l.map((u,r)=>{if(!u)return null;let{type:i,value:S}=u,m=e.val_optionFocused==u.id,y=e.val_status.rawValue.includes(S),D=e.rootStates.SelectorComponent;return n(Z,{"data-autocomplete-input-value":u.id,children:n(D,{option:u,isFocused:m,isSelected:y,addCallback:()=>{e.set_status(O=>{let h=[...O.rawValue];return f.scope(()=>{if(S===null)return h=[];O.rawValue.includes(S)?h=h.filter(b=>b!==S):e.rootStates.multiSelect?h.push(S):h=[S]}),_(c({},O),{rawValue:h,eventType:"update",eventID:I(8),isFocusing:!0,isInspected:!1})})}})},u.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:s,set_status:p,val_optionsDict:o}=e,l=[];return s.rawValue.forEach(a=>{let d=o[f.Stringify(a)];if(!d)return;let u=t.SelectedComponent,r=d.label;(d==null?void 0:d.value)===null&&(r=""),l.push(n(L,{className:z("SelectedCell"),children:n(u,{value:d==null?void 0:d.value,label:r,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let S=[...s.rawValue];S=S.filter(m=>m!==a),p(m=>_(c({},m),{rawValue:S,eventType:"update",eventID:I(8),isInspected:!1}))}})},f.Stringify(d==null?void 0:d.value)||I(8)))}),n(H,{children:l})},Core:e=>{var q,X,$;let{value:t}=e,[s,p]=C(!1),[o,l]=C(!1),[a,d]=C(!1),[u,r]=C(!1),[i,S]=C(""),[m,y]=C(e.options),[D,O]=C(((q=e.options.find(R=>{var P;return(R==null?void 0:R.value)===((P=e.value)==null?void 0:P[0])}))==null?void 0:q.id)||((X=e.options[0])==null?void 0:X.id)||""),[h,x]=C({}),[b,k]=C(W.DefaultStatus(e.componentId,t)),F=se(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[f.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!m.length)return;let R=[...m],P=c({},h);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[f.Stringify(T==null?void 0:T.value)]=T)}),x(P)},[m]);let E={rootStates:e,val_options:m,set_options:y,val_optionFocused:D,set_optionFocused:O,val_optionsDict:h,set_optionsDict:x,val_optionsModified:o,set_optionsModified:l,val_preventOpenSelector:s,set_preventOpenSelector:p,val_openSelector:a,set_openSelector:d,val_activeInput:u,set_activeInput:r,val_keyword:i,set_keyword:S,val_status:b,set_status:k},J=!!e.multiSelect;W.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:e,val_status:b,set_status:k,SystemValidation:ye});let K=b.rawValue.length&&b.rawValue[0]!==null;return K=K||a||u,A(fe,{val_status:b,set_status:k,states:e,children:[n(ve,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),n(w.Shallow,c({},E)),n(w.Button,c({},E))]})}},oe=e=>{let t=c({},e);return t=_(c({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:s,isSelected:p,isFocused:o,addCallback:l})=>s?(s==null?void 0:s.type)=="label"?n(H,{children:s.label}):n(ee.Sub.S,{color:"cloud",backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["1/2",1.5],isActive:o,isActiveStyles:{backgroundColor:"cloud"},onClick:l,children:A(M.Left,{gap:"1/2",children:[p&&n(N.Check,{fontColor:"theme"}),n(U.Supplement,{transition:"short",children:s.label})]})}):null,SelectedComponent:({value:s,label:p,removeCallback:o})=>A(M.Left,{ssCardBox:!0,borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(L,{padding:[0,"1/4"],children:p}),n(ee.Sub,{flexSizing:"none",color:"cloud",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:c({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:n(U.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=f.flatArray(t.value),t.options=w.InitOptions(t.options),f.is.nullish(t.rightIcon)&&(t.rightIcon=n(te,{children:n(N.Search,{})}),t.disabled&&(t.rightIcon=n(te,{fontColor:"5.translucent",children:n(N.Ban,{})}))),t.rightIcon&&(t=c({paddingRight:3},t)),t.leftIcon&&(t=c({paddingLeft:3},t)),n(Se,{componentId:t.componentId,children:w.Core,states:me(t)})};export{oe as Autocomplete,oe as default};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "amotify",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.264",
|
|
4
4
|
"description": "UI Component for React,NextJS,esbuild",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"start": "run-p clean build:*",
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
|
91
91
|
"@fortawesome/react-fontawesome": "^3.1.1",
|
|
92
92
|
"dotenv": "^17.0.1",
|
|
93
|
-
"jmini": "^0.0.
|
|
93
|
+
"jmini": "^0.0.105",
|
|
94
94
|
"react": "^19.2.3"
|
|
95
95
|
},
|
|
96
96
|
"devDependencies": {
|