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