amotify 0.2.266 → 0.2.267
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as l,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as s,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import p,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as W,Row as K}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as Q}from".";function pe(t){let{value:e,states:i}=t,{required:r,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],c=e.filter(h=>h!==null).length;return r&&(c||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),c<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),c>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const C={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:r,label:d,value:m,searchValue:o}=i,n=o||p.is.string(d)&&d||""||p.is.string(m)&&m||p.Stringify(m||"")||"";p.is.nullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:r||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let r=t;return i||(r=t.filter(d=>(d==null?void 0:d.type)!="label")),p.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");r=r.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),r},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:r,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:c,required:h,form:k,className:a,multiSelect:u,enableFormSubmit:y,checkValidationAtFirst:S,onValidate:g,onValidateDelay:I,onUpdateValue:R,onUpdateValidValue:x,onUserAction:P,value:E="",options:w,leftIndicator:O,rightIndicator:_,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:ke,onDynamicSearchOptions:_e,onDynamicSearchOptionsDelay:we}=J,T=G(J,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),M="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||p.is.exist(d))return;let D=C.FilterSelectableOptions(t.val_options,i,!1);m(((b=D[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){r(""),n(D=>f(l({},D),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let D="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){p(document).removeEvent([D]);return}p('[data-input-origin="'+e.componentId+'"]')&&p(document).addEvent({eventID:D,eventType:"mousedown",callback:U=>{let j=p(U.target),Z=!!p(j).parent("."+L("Core")).length,ee=!!p(j).parent("."+L("Selector")).length;Z||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},options:{passive:!1}})},[o.isPickerOpen]),V(N,{children:[s(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[a,L("Core")].join(" "),onClick:D=>{if(T!=null&&T.onClick&&(T==null||T.onClick(D)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=M&&(oe.get().isTouchDevice||p("#"+M).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:D=>{let b=document.activeElement;(b==null?void 0:b.id)!=M&&(D.preventDefault(),p("#"+M).focus())},children:V(K.Left,{gap:0,children:[s(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(K.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",freeCSS:{letterSpacing:".5px"},children:[s(C.Selected,l({},t)),s(C.SearchInput,l({},t))]}),o.rawValue.length>1&&s($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:D=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:s(B.X,{})})]})})),s(C.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:r}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return s(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),freeCSS:{outline:"none",minWidth:12*6},onFocus:o=>{r(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){r(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{r(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{r(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:c,ctrlKey:h}=o,k=c||h;n=="Escape"?r(a=>f(l({},a),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?r(a=>f(l({},a),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?p.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),r(a=>f(l({},a),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?p.scope(()=>{if(t.val_keyword)return;let a=[...t.val_status.rawValue];a.pop(),k&&(a=[]),r(u=>f(l({},u),{rawValue:a,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&p.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){r(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let a=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!a)return;let{value:u}=a;r(y=>{let S=[...y.rawValue];return p.scope(()=>{if(u===null)return S=[];y.rawValue.includes(u)?S=S.filter(I=>I!==u):e.multiSelect?S.push(u):S=[u]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),p.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(n))return;if(o.preventDefault(),!i.isPickerOpen){r(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let a=n=="ArrowDown"?1:-1,u=C.FilterSelectableOptions(t.val_options,t.val_keyword),y=u.length-1,S=null;p.scope(()=>{var I,R,x,P,E,w,O;let g=u.findIndex(_=>(_==null?void 0:_.id)==t.val_optionFocused);if(g==-1){S=(I=u[0])==null?void 0:I.id;return}if(a==1){if(S=(R=u[0])==null?void 0:R.id,k){S=(x=u[y])==null?void 0:x.id;return}if(g==-1||g==y)return;S=(P=u[g+1])==null?void 0:P.id}else{if(S=(E=u[y])==null?void 0:E.id,k){S=(w=u[0])==null?void 0:w.id;return}if(g==-1||g==0)return;S=(O=u[g-1])==null?void 0:O.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let c=o.target.value;t.set_keyword(c),t.set_optionFocused(""),c&&r(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[r,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let c="autocomplete-search-"+e.componentId;t.set_optionFocused(""),p.interval.once(()=>H(void 0,null,function*(){var a;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let k=C.InitOptions(h||[]);t.set_options(k),t.set_optionFocused(((a=k[0])==null?void 0:a.id)||"")}),e.onDynamicSearchOptionsDelay||500,c)},[t.val_keyword,i.isComposing]),F(()=>{let c=p(`[data-selector-id="${i.componentId}"]`)[0];if(!c)return;let h=p(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(c.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=C.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let c=e.pickerPosition||0;[1,2].includes(c)?o.bottom="100%":[3,4].includes(c)&&(o.top="100%"),[1,3].includes(c)?o.left=0:[2,4].includes(c)&&(o.right=0)}return i.isPickerOpen?s(X,f(l({position:"absolute",padding:"2/3"},o),{freeCSS:l({minWidth:"75%",zIndex:1e3},o.freeCSS),children:s(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{freeCSS:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.freeCSS),children:V(q,{gap:"1/12",padding:[1,0],children:[r=="fetch"&&s(K.Center,{padding:"1/2",children:s(le.Theme.R,{showInitial:!0})}),r!="fetch"&&V(N,{children:[!m.length&&s(W.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((c,h)=>{if(!c)return null;let{type:k,value:a}=c,u=t.val_optionFocused==c.id,y=i.rawValue.includes(a),S=e.onSelectorRender;return s(q,{"data-autocomplete-input-value":c.id,children:s(S,{option:c,isFocused:u,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return p.scope(()=>{if(a===null)return I=[];if(g.rawValue.includes(a)){I=I.filter(x=>x!==a);return}e.multiSelect?I.push(a):I=[a]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(R=>f(l({},R),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},c.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:r,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[p.Stringify(o)];if(!n)return;let c=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(s(q,{position:"relative",flexCenter:!0,freeCSS:{userSelect:"none"},children:s(c,{value:n==null?void 0:n.value,label:h,onRemove:k=>{if(e.disabled)return;let a=[...i.rawValue];a=a.filter(u=>u!==o),r(u=>f(l({},u),{rawValue:a,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=a.length,isPickerOpen:!0}))}})},p.Stringify(n==null?void 0:n.value)||v(8)))}),s(N,{children:m})},Core:t=>{var x,P,E;let{value:e}=t,[i,r]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[c,h]=A(((x=t.options.find(w=>{var O;return(w==null?void 0:w.value)===((O=t.value)==null?void 0:O[0])}))==null?void 0:x.id)||((P=t.options[0])==null?void 0:P.id)||""),[k,a]=A({}),[u,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[p.Stringify((E=t.options)==null?void 0:E.map(w=>w.value))]),F(()=>{if(!o.length)return;let w=[...o],O=l({},k);w.forEach(_=>{(_==null?void 0:_.type)!="label"&&(O[p.Stringify(_==null?void 0:_.value)]=_)}),a(O)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:c,set_optionFocused:h,val_optionsDict:k,set_optionsDict:a,val_optionsModified:i,set_optionsModified:r,val_keyword:d,set_keyword:m,val_status:u,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:u,set_status:y,SystemValidation:pe});let R=u.rawValue.length&&u.rawValue[0]!==null||u.isPickerOpen||u.isFocusing;return V(se,{val_status:u,set_status:y,states:t,children:[s(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:R}),s(C.Button,l({},g))]})}},Y=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var r;return i.option?((r=i.option)==null?void 0:r.type)=="label"?s(N,{children:i.option.label}):s($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:[1,1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(K.Left,{gap:"1/2",children:[i.isSelected&&s(B.Check,{fontColor:"theme"}),s(W.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(K.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[s(W,{padding:[0,"1/2"],children:i.label}),s($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:s(B.X,{})})]}),pickerPosition:3},e),{freeCSS:l({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:s(W.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=p.flatArray(e.value),e.options=C.InitOptions(e.options),p.is.nullish(e.rightIcon)&&(e.rightIcon=s(Q,{children:s(B.Search,{})}),e.disabled&&(e.rightIcon=s(Q,{fontColor:"5.translucent",children:s(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),s(re,{componentId:e.componentId,children:C.Core,states:ue(e)})};export{Y as Autocomplete,Y as default};
|
|
1
|
+
import{b as l,c as f,d as G,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as s,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import p,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as W,Row as K}from"../../mols";import{Button as $}from"../Button";import{Loader as le}from"../Loader";import{Sheet as ae}from"../Sheet";import{OptionalInputWrapper as re,BoxWrapper as se,CoreEffects as z,DefaultBoxishStyles as ue}from"./core";import{InputAutocompleteClasses as L}from"../../@styles/componentClasses";import{InputLabel as ce}from"./Label";import{RightIcon as Q}from".";function pe(t){let{value:e,states:i}=t,{required:r,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],c=e.filter(h=>h!==null).length;return r&&(c||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),c<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),c>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const C={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:r,label:d,value:m,searchValue:o}=i,n=o||p.is.string(d)&&d||""||p.is.string(m)&&m||p.Stringify(m||"")||"";p.is.nullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:r||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let r=t;return i||(r=t.filter(d=>(d==null?void 0:d.type)!="label")),p.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");r=r.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),r},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:r,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:c,required:h,form:k,className:a,multiSelect:u,enableFormSubmit:y,checkValidationAtFirst:S,onValidate:g,onValidateDelay:I,onUpdateValue:R,onUpdateValidValue:x,onUserAction:P,value:E="",options:w,leftIndicator:O,rightIndicator:_,leftIcon:de,rightIcon:fe,componentId:me,status_id:Se,wrapStyles:ve,emptySelect:ye,searchInputPlaceholder:he,onSelectedRender:ge,onSelectorRender:Ie,pickerStyles:be,pickerPosition:ke,onDynamicSearchOptions:_e,onDynamicSearchOptionsDelay:we}=J,T=G(J,["tone","required","form","className","multiSelect","enableFormSubmit","checkValidationAtFirst","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","leftIndicator","rightIndicator","leftIcon","rightIcon","componentId","status_id","wrapStyles","emptySelect","searchInputPlaceholder","onSelectedRender","onSelectorRender","pickerStyles","pickerPosition","onDynamicSearchOptions","onDynamicSearchOptionsDelay"]),M="SearchInput_"+e.componentId;return F(()=>{var b;if(e.disabled||!o.isPickerOpen||p.is.exist(d))return;let D=C.FilterSelectableOptions(t.val_options,i,!1);m(((b=D[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){r(""),n(D=>f(l({},D),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let D="autocomplete-click-"+e.componentId;if(!o.isPickerOpen){p(document).removeEvent([D]);return}p('[data-input-origin="'+e.componentId+'"]')&&p(document).addEvent({eventID:D,eventType:"mousedown",callback:U=>{let j=p(U.target),Z=!!p(j).parent("."+L("Core")).length,ee=!!p(j).parent("."+L("Selector")).length;Z||ee||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},options:{passive:!1}})},[o.isPickerOpen]),V(N,{children:[s(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[a,L("Core")].join(" "),onClick:D=>{if(T!=null&&T.onClick&&(T==null||T.onClick(D)),e.disabled)return;let b=document.activeElement;(b==null?void 0:b.id)!=M&&(oe.get().isTouchDevice||p("#"+M).focus()),n(U=>f(l({},U),{eventID:v(8),isPickerOpen:!0,isFocusing:!0}))},onKeyDown:D=>{let b=document.activeElement;(b==null?void 0:b.id)!=M&&(D.preventDefault(),p("#"+M).focus())},children:V(K.Left,{gap:0,children:[s(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(K.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",freeCSS:{letterSpacing:".5px"},children:[s(C.Selected,l({},t)),s(C.SearchInput,l({},t))]}),o.rawValue.length>1&&s($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:D=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:s(B.X,{})})]})})),s(C.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:r}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return s(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),freeCSS:{outline:"none",minWidth:12*4},onFocus:o=>{r(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){r(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{r(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{r(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:c,ctrlKey:h}=o,k=c||h;n=="Escape"?r(a=>f(l({},a),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?r(a=>f(l({},a),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?p.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),r(a=>f(l({},a),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?p.scope(()=>{if(t.val_keyword)return;let a=[...t.val_status.rawValue];a.pop(),k&&(a=[]),r(u=>f(l({},u),{rawValue:a,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&p.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){r(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let a=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!a)return;let{value:u}=a;r(y=>{let S=[...y.rawValue];return p.scope(()=>{if(u===null)return S=[];y.rawValue.includes(u)?S=S.filter(I=>I!==u):e.multiSelect?S.push(u):S=[u]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),p.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(n))return;if(o.preventDefault(),!i.isPickerOpen){r(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let a=n=="ArrowDown"?1:-1,u=C.FilterSelectableOptions(t.val_options,t.val_keyword),y=u.length-1,S=null;p.scope(()=>{var I,R,x,P,E,w,O;let g=u.findIndex(_=>(_==null?void 0:_.id)==t.val_optionFocused);if(g==-1){S=(I=u[0])==null?void 0:I.id;return}if(a==1){if(S=(R=u[0])==null?void 0:R.id,k){S=(x=u[y])==null?void 0:x.id;return}if(g==-1||g==y)return;S=(P=u[g+1])==null?void 0:P.id}else{if(S=(E=u[y])==null?void 0:E.id,k){S=(w=u[0])==null?void 0:w.id;return}if(g==-1||g==0)return;S=(O=u[g-1])==null?void 0:O.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let c=o.target.value;t.set_keyword(c),t.set_optionFocused(""),c&&r(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[r,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let c="autocomplete-search-"+e.componentId;t.set_optionFocused(""),p.interval.once(()=>H(void 0,null,function*(){var a;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let k=C.InitOptions(h||[]);t.set_options(k),t.set_optionFocused(((a=k[0])==null?void 0:a.id)||"")}),e.onDynamicSearchOptionsDelay||500,c)},[t.val_keyword,i.isComposing]),F(()=>{let c=p(`[data-selector-id="${i.componentId}"]`)[0];if(!c)return;let h=p(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(c.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=C.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let c=e.pickerPosition||0;[1,2].includes(c)?o.bottom="100%":[3,4].includes(c)&&(o.top="100%"),[1,3].includes(c)?o.left=0:[2,4].includes(c)&&(o.right=0)}return i.isPickerOpen?s(X,f(l({position:"absolute",padding:"2/3"},o),{freeCSS:l({minWidth:"75%",zIndex:1e3},o.freeCSS),children:s(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{freeCSS:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.freeCSS),children:V(q,{gap:"1/12",padding:[1,0],children:[r=="fetch"&&s(K.Center,{padding:"1/2",children:s(le.Theme.R,{showInitial:!0})}),r!="fetch"&&V(N,{children:[!m.length&&s(W.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((c,h)=>{if(!c)return null;let{type:k,value:a}=c,u=t.val_optionFocused==c.id,y=i.rawValue.includes(a),S=e.onSelectorRender;return s(q,{"data-autocomplete-input-value":c.id,children:s(S,{option:c,isFocused:u,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return p.scope(()=>{if(a===null)return I=[];if(g.rawValue.includes(a)){I=I.filter(x=>x!==a);return}e.multiSelect?I.push(a):I=[a]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(R=>f(l({},R),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},c.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:r,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[p.Stringify(o)];if(!n)return;let c=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(s(q,{position:"relative",flexCenter:!0,freeCSS:{userSelect:"none"},children:s(c,{value:n==null?void 0:n.value,label:h,onRemove:k=>{if(e.disabled)return;let a=[...i.rawValue];a=a.filter(u=>u!==o),r(u=>f(l({},u),{rawValue:a,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=a.length,isPickerOpen:!0}))}})},p.Stringify(n==null?void 0:n.value)||v(8)))}),s(N,{children:m})},Core:t=>{var x,P,E;let{value:e}=t,[i,r]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[c,h]=A(((x=t.options.find(w=>{var O;return(w==null?void 0:w.value)===((O=t.value)==null?void 0:O[0])}))==null?void 0:x.id)||((P=t.options[0])==null?void 0:P.id)||""),[k,a]=A({}),[u,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[p.Stringify((E=t.options)==null?void 0:E.map(w=>w.value))]),F(()=>{if(!o.length)return;let w=[...o],O=l({},k);w.forEach(_=>{(_==null?void 0:_.type)!="label"&&(O[p.Stringify(_==null?void 0:_.value)]=_)}),a(O)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:c,set_optionFocused:h,val_optionsDict:k,set_optionsDict:a,val_optionsModified:i,set_optionsModified:r,val_keyword:d,set_keyword:m,val_status:u,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:u,set_status:y,SystemValidation:pe});let R=u.rawValue.length&&u.rawValue[0]!==null||u.isPickerOpen||u.isFocusing;return V(se,{val_status:u,set_status:y,states:t,children:[s(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:R}),s(C.Button,l({},g))]})}},Y=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var r;return i.option?((r=i.option)==null?void 0:r.type)=="label"?s(N,{children:i.option.label}):s($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:[1,1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(K.Left,{gap:"1/2",children:[i.isSelected&&s(B.Check,{fontColor:"theme"}),s(W.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(K.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[s(W,{padding:[0,"1/2"],children:i.label}),s($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:s(B.X,{})})]}),pickerPosition:3},e),{freeCSS:l({cursor:"pointer"},e.freeCSS)}),e.multiSelect||(e.min=0,e.max=1),e.options=e.options||[],e.emptySelect&&(e.options=[{value:null,label:s(W.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...e.options]),e.value=p.flatArray(e.value),e.options=C.InitOptions(e.options),p.is.nullish(e.rightIcon)&&(e.rightIcon=s(Q,{children:s(B.Search,{})}),e.disabled&&(e.rightIcon=s(Q,{fontColor:"5.translucent",children:s(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),s(re,{componentId:e.componentId,children:C.Core,states:ue(e)})};export{Y as Autocomplete,Y as default};
|