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