amotify 0.2.260 → 0.2.261
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 m,c as g,d as Q,e as Y}from"../../chunk-C5N2D3ZX.js";import{Fragment as H,jsx as l,jsxs as A}from"react/jsx-runtime";import{useState as b,useEffect as B,useRef as ie}from"react";import c,{UUID as w}from"jmini";import{ExtractStyles as re}from"../../@utils";import{Box as L,Span as se,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 ue}from"../Loader";import{Sheet as ce}from"../Sheet";import{OptionalInputWrapper as pe,BoxWrapper as de,CoreEffects as W,DefaultBoxishStyles as Se}from"./core";import{InputAutocompleteClasses as z}from"../../@styles/componentClasses";import{InputLabel as fe}from"./Label";import{RightIcon as te}from".";function me(e){let{value:t,states:r}=e,{required:p,options:o,min:n,max:a}=r;n=n||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<n&&d.push({type:"invalid",label:n+"\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 C={InitOptions:e=>{let t=[];return e.forEach(r=>{if(!r)return;let{type:p,label:o,value:n,searchValue:a}=r,d=a||c.is.string(o)&&o||""||c.is.string(n)&&n||c.Stringify(n||"")||"";c.is.nullish(o)&&(o=String(n)),t.push(g(m({id:w(8)},r),{searchValue:d,type:p||"selector",label:o,value:n}))}),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(n=>(n.searchValue||"").toLower().replace(/ /g,"").includes(o))}),p},Shallow:e=>{let{rootStates:t,val_status:r}=e,p=re(t);return l(L,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:l(U.Description,g(m({className:t.className},p),{position:"absolute",width:1,freeCSS:g(m({},p.freeCSS),{color:"orange"}),"data-id":"shallow_"+r.componentId,children:l(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:n,val_preventOpenSelector:a,set_preventOpenSelector:d,val_openSelector:s,set_openSelector:u,val_status:i,set_status:S,val_activeInput:f,set_activeInput:y}=e,j=t,{tone:D,required:O,form:h,className:k,multiSelect:I,enableFormSubmit:x,checkValidationAtFirst:F,onValidate:E,onValidateDelay:J,onUpdateValue:K,onUpdateValidValue:q,onUserAction:X,value:$="",options:R,leftIndicator:P,rightIndicator:T,leftIcon:ve,rightIcon:ye,componentId:_e,status_id:ge,wrapStyles:he,emptySelect:Ie,SearchInput:be,SearchInputPlaceholder:Ce,SelectedComponent:we,SelectorComponent:De,SelectorStyles:Oe,SelectorPosition:ke,DynamicOptionsOnSearch:xe,DynamicOptionsOnSearchDelay:Re}=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"]);return B(()=>{var V;if(t.disabled||!s||c.is.exist(o))return;let _=C.FilterSelectableOptions(e.val_options,r,!1);n(((V=_[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("#SearchInput_"+t.componentId).focus()}},[i.rawValue]),B(()=>{let _="autocomplete-click-"+t.componentId;if(!s){c(document).removeEvent([_]);return}c('[data-input-origin="'+t.componentId+'"]')&&(c("#SearchInput_"+t.componentId).focus(),c(document).addEvent({eventID:_,eventType:"mousedown",callback:ne=>{let G=c(ne.target),le=!!c(G).parent("."+z("Core")).length,ae=!!c(G).parent("."+z("Selector")).length;le||ae||(u(!1),y(!1))},options:{passive:!1}}))},[s]),A(H,{children:[l(L,g(m({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||!!f,className:[k,z("Core")].join(" "),onFocus:_=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(_)),!t.disabled){if(a)return d(!1);u(!0),y(!0),_.preventDefault()}},onCompositionStart:_=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(_))},onCompositionEnd:_=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(_))},onClick:_=>{v!=null&&v.onClick&&(v==null||v.onClick(_)),!t.disabled&&(u(!0),y(!0))},onKeyDown:_=>{let{key:V}=_;x&&W.SubmitForm(_,h),!s&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(u(!0),y(!0))},children:A(M.Left,{gap:0,children:[l(se,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),A(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/3",freeCSS:{letterSpacing:".5px"},children:[l(C.Selected,m({},e)),l(C.SearchInput,m({},e))]})]})})),s&&l(C.Selector,m({},e))]})},SearchInput:e=>{let{rootStates:t,val_status:r,set_status:p}=e;return t.disabled||!e.val_openSelector&&!e.val_activeInput?null:l(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(n=>g(m({},n),{eventID:w(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(n=>g(m({},n),{eventID:w(8),isFocusing:!1}))},onCompositionStart:o=>{p(n=>g(m({},n),{eventID:w(8),isComposing:!0}))},onCompositionEnd:o=>{p(n=>g(m({},n),{eventID:w(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:a,ctrlKey:d}=o,s=a||d;n=="Tab"?(e.set_openSelector(!1),e.set_activeInput(!1),e.set_preventOpenSelector(!1)):n==" "?c.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):n=="Backspace"?c.scope(()=>{if(e.val_keyword)return;let u=[...e.val_status.rawValue];u.pop(),e.set_status(i=>g(m({},i),{rawValue:u,eventType:"update",eventID:w(8),isInspected:!1}))}):n=="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 f=[...S.rawValue];return c.scope(()=>{if(i===null)return f=[];S.rawValue.includes(i)?f=f.filter(D=>D!==i):t.multiSelect?f.push(i):f=[i]}),g(m({},S),{rawValue:f,eventType:"update",eventID:w(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),c.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(n))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let u=n=="ArrowDown"?1:-1,i=C.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,f=null;c.scope(()=>{var D,O,h,k,I,x,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){f=(D=i[0])==null?void 0:D.id;return}if(u==1){if(f=(O=i[0])==null?void 0:O.id,s){f=(h=i[S])==null?void 0:h.id;return}if(y==-1||y==S)return;f=(k=i[y+1])==null?void 0:k.id}else{if(f=(I=i[S])==null?void 0:I.id,s){f=(x=i[0])==null?void 0:x.id;return}if(y==-1||y==0)return;f=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(f)}),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(()=>Y(void 0,null,function*(){var S;let u=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=C.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 n=C.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 l(L,g(m({position:"absolute"},a),{freeCSS:m({minWidth:"75%",zIndex:1e3},a.freeCSS),children:l(ce.Body,g(m({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:m({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(Z,{gap:"1/12",padding:[1,0],children:[p=="fetch"&&l(M.Center,{padding:"1/2",children:l(ue.Theme.R,{showInitial:!0})}),p!="fetch"&&A(H,{children:[!n.length&&l(U.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),n.map((s,u)=>{if(!s)return null;let{type:i,value:S}=s,f=e.val_optionFocused==s.id,y=e.val_status.rawValue.includes(S),D=e.rootStates.SelectorComponent;return l(Z,{"data-autocomplete-input-value":s.id,children:l(D,{option:s,isFocused:f,isSelected:y,addCallback:()=>{e.set_status(O=>{let h=[...O.rawValue];return c.scope(()=>{if(S===null)return h=[];O.rawValue.includes(S)?h=h.filter(I=>I!==S):e.rootStates.multiSelect?h.push(S):h=[S]}),g(m({},O),{rawValue:h,eventType:"update",eventID:w(8),isInspected:!1})})}})},s.id)})]})]})}))}))},Selected:e=>{let{rootStates:t,val_status:r,set_status:p,val_optionsDict:o}=e,n=[];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=""),n.push(l(L,{className:z("SelectedCell"),children:l(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(f=>f!==a),p(f=>g(m({},f),{rawValue:S,eventType:"update",eventID:w(8),isInspected:!1}))}})},c.Stringify(d==null?void 0:d.value)||w(8)))}),l(H,{children:n})},Core:e=>{var q,X,$;let{value:t}=e,[r,p]=b(!1),[o,n]=b(!1),[a,d]=b(!1),[s,u]=b(!1),[i,S]=b(""),[f,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)||""),[h,k]=b({}),[I,x]=b(W.DefaultStatus(e.componentId,t)),F=ie(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[c.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!f.length)return;let R=[...f],P=m({},h);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[c.Stringify(T==null?void 0:T.value)]=T)}),k(P)},[f]);let E={rootStates:e,val_options:f,set_options:y,val_optionFocused:D,set_optionFocused:O,val_optionsDict:h,set_optionsDict:k,val_optionsModified:o,set_optionsModified:n,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:x},J=!!e.multiSelect;W.CommonEffects({type:J?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:x,SystemValidation:me});let K=I.rawValue.length&&I.rawValue[0]!==null;return K=K||a||s,A(de,{val_status:I,set_status:x,states:e,children:[l(fe,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),l(C.Shallow,m({},E)),l(C.Button,m({},E))]})}},oe=e=>{let t=m({},e);return t=g(m({value:[],min:0,max:65535,multiSelect:!0,SearchInput:!0,emptySelect:!0,SelectorComponent:({option:r,isSelected:p,isFocused:o,addCallback:n})=>r?(r==null?void 0:r.type)=="label"?l(H,{children:r.label}):l(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:n,children:A(M.Left,{gap:"1/2",children:[p&&l(N.Check,{fontColor:"theme"}),l(U.Supplement,{transition:"short",children:r.label})]})}):null,SelectedComponent:({value:r,label:p,removeCallback:o})=>A(M.Left,{ssCardBox:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[l(L,{padding:[0,"1/4"],children:p}),l(ee.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:l(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:m({cursor:"pointer"},t.freeCSS)}),t.multiSelect||(t.min=0,t.max=1),t.options=t.options||[],t.emptySelect&&(t.options=[{value:null,label:l(U.Supplement,{fontColor:"4.thin",children:"\u9078\u629E\u3092\u89E3\u9664"})},...t.options]),t.value=c.flatArray(t.value),t.options=C.InitOptions(t.options),c.is.nullish(t.rightIcon)&&(t.rightIcon=l(te,{children:l(N.Search,{})}),t.disabled&&(t.rightIcon=l(te,{fontColor:"5.translucent",children:l(N.Ban,{})}))),t.rightIcon&&(t=m({paddingRight:3},t)),t.leftIcon&&(t=m({paddingLeft:3},t)),l(pe,{componentId:t.componentId,children:C.Core,states:Se(t)})};export{oe as Autocomplete,oe as default};
|
|
1
|
+
import{b as m,c as g,d as Z,e as ee}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 r,{UUID as w}from"jmini";import{ExtractStyles as ue}from"../../@utils";import{Box as L,Span as ce,FAI as N,Column as te}from"../../atoms";import{Literal as U,Row as M}from"../../mols";import{Button as oe}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 le}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(c=>c!==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:c})=>c=="invalid").length,notice:d}}const C={InitOptions:e=>{let t=[];return e.forEach(s=>{if(!s)return;let{type:p,label:o,value:l,searchValue:a}=s,d=a||r.is.string(o)&&o||""||r.is.string(l)&&l||r.Stringify(l||"")||"";r.is.nullish(o)&&(o=String(l)),t.push(g(m({id:w(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")),r.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,g(m({className:t.className},p),{position:"absolute",width:1,freeCSS:g(m({},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:c,val_status:i,set_status:S,val_activeInput:f,set_activeInput:y}=e,G=t,{tone:D,required:O,form:h,className:k,multiSelect:I,enableFormSubmit:x,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:ke,SelectorStyles:xe,SelectorPosition:Re,DynamicOptionsOnSearch:Te,DynamicOptionsOnSearchDelay:Ve}=G,v=Z(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||!u||r.is.exist(o))return;let _=C.FilterSelectableOptions(e.val_options,s,!1);l(((V=_[0])==null?void 0:V.id)||"")},[s]),B(()=>{if(i.eventType!="init"&&i.eventType!="override"){if(t.max==i.rawValue.length){c(!1),d(!0),p("");return}r(J).focus()}},[i.rawValue]),B(()=>{let _="autocomplete-click-"+t.componentId;if(!u){r(document).removeEvent([_]);return}r('[data-input-origin="'+t.componentId+'"]')&&(r(J).focus(),r(document).addEvent({eventID:_,eventType:"mousedown",callback:ae=>{var Y;let Q=r(ae.target),ie=!!r(Q).parent("."+z("Core")).length,re=!!r(Q).parent("."+z("Selector")).length;ie||re||((Y=r(J)[0])==null||Y.blur(),c(!1),y(!1))},options:{passive:!1}}))},[u]),A(H,{children:[n(L,g(m({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||!!f,className:[k,z("Core")].join(" "),onFocus:_=>{if(v!=null&&v.onFocus&&(v==null||v.onFocus(_)),!t.disabled){if(a)return d(!1);c(!0),y(!0),_.preventDefault()}},onCompositionStart:_=>{v!=null&&v.onCompositionStart&&(v==null||v.onCompositionStart(_))},onCompositionEnd:_=>{v!=null&&v.onCompositionEnd&&(v==null||v.onCompositionEnd(_))},onClick:_=>{v!=null&&v.onClick&&(v==null||v.onClick(_)),!t.disabled&&(c(!0),y(!0))},onKeyDown:_=>{let{key:V}=_;x&&W.SubmitForm(_,h),!u&&(V==" "||V=="ArrowDown"||V=="ArrowUp"||V=="Enter")&&(c(!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(C.Selected,m({},e)),n(C.SearchInput,m({},e))]})]})})),u&&n(C.Selector,m({},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=>g(m({},l),{eventID:w(8),isFocusing:!0}))},onBlur:o=>{e.set_activeInput(!1),p(l=>g(m({},l),{eventID:w(8),isFocusing:!1}))},onCompositionStart:o=>{p(l=>g(m({},l),{eventID:w(8),isComposing:!0}))},onCompositionEnd:o=>{p(l=>g(m({},l),{eventID:w(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)):l==" "?r.scope(()=>{e.val_openSelector||e.val_keyword||(o.preventDefault(),e.set_openSelector(!0))}):l=="Backspace"?r.scope(()=>{if(e.val_keyword)return;let c=[...e.val_status.rawValue];c.pop(),e.set_status(i=>g(m({},i),{rawValue:c,eventType:"update",eventID:w(8),isInspected:!1}))}):l=="Enter"&&r.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 c=e.val_options.find(S=>(S==null?void 0:S.id)==e.val_optionFocused);if(!c)return;let{value:i}=c;e.set_status(S=>{let f=[...S.rawValue];return r.scope(()=>{if(i===null)return f=[];S.rawValue.includes(i)?f=f.filter(D=>D!==i):t.multiSelect?f.push(i):f=[i]}),g(m({},S),{rawValue:f,eventType:"update",eventID:w(8),isInspected:!1})}),e.set_optionsModified(!0),e.set_keyword("")}),r.scope(()=>{if(!["ArrowDown","ArrowUp"].includes(l))return;if(o.preventDefault(),!e.val_openSelector)return e.set_openSelector(!0);let c=l=="ArrowDown"?1:-1,i=C.FilterSelectableOptions(e.val_options,e.val_keyword),S=i.length-1,f=null;r.scope(()=>{var D,O,h,k,I,x,F;let y=i.findIndex(E=>(E==null?void 0:E.id)==e.val_optionFocused);if(y==-1){f=(D=i[0])==null?void 0:D.id;return}if(c==1){if(f=(O=i[0])==null?void 0:O.id,u){f=(h=i[S])==null?void 0:h.id;return}if(y==-1||y==S)return;f=(k=i[y+1])==null?void 0:k.id}else{if(f=(I=i[S])==null?void 0:I.id,u){f=(x=i[0])==null?void 0:x.id;return}if(y==-1||y==0)return;f=(F=i[y-1])==null?void 0:F.id}}),e.set_optionFocused(f)}),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]=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 s("ok");o("fetch");let u="autocomplete-search-"+e.rootStates.componentId;e.set_optionFocused(""),r.interval.once(()=>ee(void 0,null,function*(){var S;let c=yield e.rootStates.DynamicOptionsOnSearch(e.val_keyword);o("idle");let i=C.InitOptions(c||[]);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=r(`[data-selector-id="${e.val_status.componentId}"]`)[0];if(!u)return;let c=r(`[data-autocomplete-input-value="${e.val_optionFocused}"]`)[0];c&&(u.scrollTop=c.offsetTop-24)},[e.val_optionFocused]);let l=C.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,g(m({position:"absolute"},a),{freeCSS:m({minWidth:"75%",zIndex:1e3},a.freeCSS),children:n(de.Body,g(m({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:m({maxHeight:12*24},(d=e.rootStates.SelectorStyles)==null?void 0:d.freeCSS),children:A(te,{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,c)=>{if(!u)return null;let{type:i,value:S}=u,f=e.val_optionFocused==u.id,y=e.val_status.rawValue.includes(S),D=e.rootStates.SelectorComponent;return n(te,{"data-autocomplete-input-value":u.id,children:n(D,{option:u,isFocused:f,isSelected:y,addCallback:()=>{e.set_status(O=>{let h=[...O.rawValue];return r.scope(()=>{if(S===null)return h=[];O.rawValue.includes(S)?h=h.filter(I=>I!==S):e.rootStates.multiSelect?h.push(S):h=[S]}),g(m({},O),{rawValue:h,eventType:"update",eventID:w(8),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[r.Stringify(a)];if(!d)return;let u=t.SelectedComponent,c=d.label;(d==null?void 0:d.value)===null&&(c=""),l.push(n(L,{className:z("SelectedCell"),children:n(u,{value:d==null?void 0:d.value,label:c,removeCallback:i=>{if(i.stopPropagation(),i.preventDefault(),t.disabled)return;let S=[...s.rawValue];S=S.filter(f=>f!==a),p(f=>g(m({},f),{rawValue:S,eventType:"update",eventID:w(8),isInspected:!1}))}})},r.Stringify(d==null?void 0:d.value)||w(8)))}),n(H,{children:l})},Core:e=>{var q,X,$;let{value:t}=e,[s,p]=b(!1),[o,l]=b(!1),[a,d]=b(!1),[u,c]=b(!1),[i,S]=b(""),[f,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)||""),[h,k]=b({}),[I,x]=b(W.DefaultStatus(e.componentId,t)),F=se(!1);B(()=>{o||(F.current?y(e.options):F.current=!0)},[r.Stringify(($=e.options)==null?void 0:$.map(R=>R.value))]),B(()=>{if(!f.length)return;let R=[...f],P=m({},h);R.forEach(T=>{(T==null?void 0:T.type)!="label"&&(P[r.Stringify(T==null?void 0:T.value)]=T)}),k(P)},[f]);let E={rootStates:e,val_options:f,set_options:y,val_optionFocused:D,set_optionFocused:O,val_optionsDict:h,set_optionsDict:k,val_optionsModified:o,set_optionsModified:l,val_preventOpenSelector:s,set_preventOpenSelector:p,val_openSelector:a,set_openSelector:d,val_activeInput:u,set_activeInput:c,val_keyword:i,set_keyword:S,val_status:I,set_status:x},j=!!e.multiSelect;W.CommonEffects({type:j?"autocomplete.multi":"autocomplete.single",states:e,val_status:I,set_status:x,SystemValidation:ye});let K=I.rawValue.length&&I.rawValue[0]!==null;return K=K||a||u,A(fe,{val_status:I,set_status:x,states:e,children:[n(ve,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:K}),n(C.Shallow,m({},E)),n(C.Button,m({},E))]})}},ne=e=>{let t=m({},e);return t=g(m({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(oe.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:"cloud",borderRadius:"2.tone.secondary",fontSize:"1.mini",padding:"1/2",gap:0,children:[n(L,{padding:[0,"1/4"],children:p}),n(oe.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,isRounded:!0,padding:"1/4",onClick:o,freeCSS:{lineHeight:1,aspectRatio:"1/1"},children:n(N.X,{})})]}),SelectorPosition:3},t),{freeCSS:m({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=r.flatArray(t.value),t.options=C.InitOptions(t.options),r.is.nullish(t.rightIcon)&&(t.rightIcon=n(le,{children:n(N.Search,{})}),t.disabled&&(t.rightIcon=n(le,{fontColor:"5.translucent",children:n(N.Ban,{})}))),t.rightIcon&&(t=m({paddingRight:3},t)),t.leftIcon&&(t=m({paddingLeft:3},t)),n(Se,{componentId:t.componentId,children:C.Core,states:me(t)})};export{ne as Autocomplete,ne as default};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{b as n,c as s,d as
|
|
1
|
+
import{b as n,c as s,d as te,e as ue}from"../../chunk-C5N2D3ZX.js";import{Fragment as fe,jsx as u,jsxs as q}from"react/jsx-runtime";import g,{UUID as y,useStore as ce}from"jmini";import{useState as pe,useEffect as ae}from"react";import{$$fromRoot as Fe,ExtractStyles as Ne}from"../../@utils";import{Box as N,FAI as ke}from"../../atoms";import{Literal as ie}from"../../mols";import{Tips as me,Button as De}from"..";import{faEye as Ee}from"@fortawesome/free-solid-svg-icons/faEye";import{OptionalInputWrapper as He,BoxWrapper as Ae,CoreEffects as P,DefaultBoxishStyles as Le}from"./core";import{InputLabel as Be}from"./Label";import{LeftIcon as Me,RightIcon as de}from".";const _e={katakana:{reg:/^[ァ-ヶー ｦ-ﾟ ]*$/g,exist:!0,reason:"\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},"hankaku.katakana":{reg:/^[ｦ-ﾟ ]*$/g,exist:!0,reason:"\u534A\u89D2\u30AB\u30BF\u30AB\u30CA\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},number:{reg:/^-?[0-9\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},digitNumber:{reg:/^-?[0-9\,\.]{0,}[0-9]{1,}$/g,exist:!0,reason:"\u534A\u89D2\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},fileName:{reg:/[¥\/:*\?\"\'\|\.\s\n\r\<\>]/g,exist:!1,reason:"\u7A7A\u767D\u307E\u305F\u306F\u4E00\u90E8\u306E\u7279\u6B8A\u6587\u5B57\u306F\u4F7F\u7528\u3067\u304D\u307E\u305B\u3093"},creditCard:{reg:/^\d{14,16}$/g,exist:!0,reason:"14~16\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},email:{reg:/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+\.[A-Za-z0-9]+$/,exist:!0,reason:q(fe,{children:[u(N,{children:"\u25CB\u25CB\u25CB\u25CB@\u25CB\u25CB\u25CB\u25CB.\u25CB\u25CB\u25CB\u306E\u5F62\u5F0F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),u(N,{children:"\u6700\u5F8C\u306E\u6587\u5B57\u306B.(\u30C9\u30C3\u30C8)\u3092\u5165\u308C\u308B\u3053\u3068\u306F\u3067\u304D\u307E\u305B\u3093"})]})},password:{reg:/^(?=[^A-Z]*[A-Z])(?=[^a-z]*[a-z])(?=[^0-9]*[0-9]).{8,}$/,exist:!0,reason:"8\u6587\u5B57\u4EE5\u4E0A\u3001\u534A\u89D2\u82F1\u6570\u5927\u5C0F\u6587\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"},tel:{reg:/.*$/g,exist:!0,reason:q(fe,{children:[u(N,{children:"0\u304B\u3089\u59CB\u307E\u308B\u756A\u53F7\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"}),u(N,{children:"9~12\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),u(N,{children:"\u6570\u5B57\u306E\u307F\u5165\u529B\u53EF\u80FD\u3067\u3059"})]})},url:{reg:/^https?:\/\/[^\n\s]+(\.|\:)[^\n\s\.\:]+$/,exist:!0,reason:"URL\u5F62\u5F0F : http(s)://\u25EF\u25EF\u25EF\u25EF"},postal:{reg:/^\d{7}$/g,exist:!0,reason:"7\u6841\u306E\u6570\u5B57\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}},w={setSelection:e=>{let{id:i,restrict:a,val_status:o}=e,p=Fe("#"+i)[0];if(!p||!o.prevValue||!o.safeValue||!o.isFocusing||o.isComposing)return;let{safeValue:t,prevValue:d,caretFrom:f,caretTo:r}=o;if(a=="creditCard")t.length>=d.length&&f%5==0&&(f++,r++),p.setSelectionRange(f,r);else if(a=="postal")t.length==5&&d.length==3&&(f++,r++),p.setSelectionRange(f,r);else if(a=="digitNumber"){let l=t.length-d.length;l==2&&(f++,r++),l==-2&&(f--,r--),p.setSelectionRange(f,r)}},Validation:{System:e=>{let{value:i,states:a}=e,{restrict:o="text",defaultValidation:p,maxLength:t,multiline:d,required:f}=a,r=[];if(d||(t=t||255),g.is.exist(t)&&i.length>=Number(t)&&r.push({type:"invalid",label:t+"\u5B57\u4EE5\u5185\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),i){let l=w.Validation.Text(i,o,p);l.ok||r.push({type:"invalid",label:l.body})}else f&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"});return{ok:!r.filter(({type:l})=>l=="invalid").length,notice:r}},Text:(e,i,a)=>{let o={ok:!0,body:""};return(()=>{let p=a||_e[i];if(!p)return;let t=p.reason;if(p){let d=!!(+!!e.match(p.reg)^+!p.exist);o={ok:d,body:d?"":t}}})(),o},SyncValue:e=>{let{restrict:i,allowDecimals:a,allowZeroStart:o,value:p=""}=e,t=String(p);["tel","number","digitNumber","postal","creditCard"].includes(i)&&(t=t.zen2hanNumber()),i=="katakana",i=="hankaku.katakana",["postal","creditCard"].includes(i)&&(t=t.removeLetters()),g.scope(()=>{if(!["number","digitNumber"].includes(i))return;t=t.replace(/(\.\d+)\..*/g,"$1").replace(/\.+/g,".").replace(/[^0-9.-]/g,"");let f=Number(t)<0||t[0]=="-";t=t.replace(/[^0-9.]/g,""),f&&(t="-"+t);let r=Number(a);a?t=t.replace(/(\.\d{0,})\..*/g,"$1").replace(/\.(\d{0,})/g,(l,x)=>x.length>r?"."+x.slice(0,r):l):t=t.replace(/\.\d?/g,""),g.scope(()=>{i=="number"&&(o||(t=t.replace(/^0(\d+)/g,"$1").replace(/^-0(\d+)/g,"-$1")))}),g.scope(()=>{let l=t.slice(-1);if(!t||l=="."||l=="-")return;let{min:x,max:h}=e;g.is.exist(x)&&g.is.number(x)&&Number(t)<Number(x)&&(t=String(x.toFixed(r))),g.is.exist(h)&&g.is.number(h)&&Number(t)>Number(h)&&(t=String(h.toFixed(r)))}),g.scope(()=>{if(!t||t=="-"||i!="digitNumber")return;let l=t.slice(-1),[x,h]=t.split(".");t=x.replace(/\B(?=(\d{3})+(?!\d))/g,","),h&&(t+="."+h),l=="."&&(t+=".")})});let d=t;return i=="digitNumber"||(i=="postal"?t.length>=4&&(d=t.clip(0,3)+"-"+t.clip(3)):i=="creditCard"&&(d=t.replace(/.{4}(?=.)/g,"$& "))),(i=="digitNumber"||i=="number")&&(t=t.replace(/,/g,"")),{safeValue:d,rawValue:t}}},Shallow:e=>{let{rootStates:i,val_status:a}=e,o=a.rawValue||"";ae(()=>{g.scope(()=>ue(void 0,null,function*(){if(!i.multiline)return;let l=g('[data-input-origin="'+a.componentId+'"]'),x=g('[data-input-shallow="'+a.componentId+'"]'),h=g('[data-input-min-height-value-shallow="'+a.componentId+'"]'),v=g('[data-input-max-height-value-shallow="'+a.componentId+'"]');if(!l[0]||!x[0]||!h[0]||!v[0])return;let E=x.position(),J=h.position(),Y=v.position(),k=0;i.autoHeight&&(k=E.height),k=Math.max(k,J.height),k=Math.min(k,Y.height),l[0].style.height=k+"px"}))},[o]);let p=o||"";(!!o.match(/\n$/)||!o)&&(p+="T");let d="",f="";if(i.multiline){let l=i.minRows||1,x=i.maxRows||100;d=`
|
|
2
2
|
T`.repeat(l-1),f=`
|
|
3
|
-
T`.repeat(x-1)}let r=Fe(i);return q(N,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:[u(ne.Description,s(n({className:i.className},r),{position:"absolute",width:1,freeCSS:s(n({},r.freeCSS),{color:"orange"}),"data-input-shallow":a.componentId,children:u(N,{"data-input-value-shallow":a.componentId,children:c})})),u(ne.Description,s(n({className:i.className},r),{position:"absolute",left:0,freeCSS:s(n({},r.freeCSS),{backgroundColor:"transparent",color:"blue"}),"data-input-min-height-value-shallow":a.componentId,children:d})),u(ne.Description,s(n({className:i.className},r),{position:"absolute",right:0,freeCSS:s(n({},r.freeCSS),{backgroundColor:"transparent",color:"red"}),"data-input-max-height-value-shallow":a.componentId,children:f}))]})},InputBox:e=>{let{rootStates:i,val_status:a,set_status:o,val_inputType:c,set_inputType:t}=e;if(i.multiline)return null;let oe=i,{componentId:d,tone:f,required:r,restrict:l="text",form:x,autoComplete:h="off",autoCapitalize:v="off",minRows:E,maxRows:J,multiline:Y,autoHeight:k,enableFormSubmit:G,clearButton:fe=!1,allowDecimals:_,allowZeroStart:L,checkValidationAtFirst:U,onChange:X,onKeyDown:Q,onValidate:ge,onValidateDelay:xe,onUpdateValue:be,onUpdateValidValue:Ie,onUserAction:Se,value:he="",leftIndicator:Te,rightIndicator:we,leftIcon:ye,rightIcon:Ce,maxLength:p,min:K,max:B,label:T,isLabelActive:V,defaultValidation:le,wrapStyles:$e}=oe,m=ae(oe,["componentId","tone","required","restrict","form","autoComplete","autoCapitalize","minRows","maxRows","multiline","autoHeight","enableFormSubmit","clearButton","allowDecimals","allowZeroStart","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","maxLength","min","max","label","isLabelActive","defaultValidation","wrapStyles"]);return u(N,s(n({htmlTag:"input",type:c,inputMode:["number","digitNumber","creditCard"].includes(l)?"numeric":l=="email"?"email":"text","data-disabled":i.disabled,"data-show-validation":Z.isShowValidation(a,!!U),"data-component-id":a.componentId,"data-input-origin":a.componentId,value:a.safeValue,autoComplete:h,autoCapitalize:v,onKeyDown:I=>{let{key:b,target:R}=I,M=R,{selectionStart:$,selectionEnd:j}=M,W=Number($),z=Number(j);{let H=a.safeValue[Number(W)],A=a.safeValue[Number(W)-1];b=="Delete"&&(l=="creditCard"&&H==" "||l=="postal"&&H=="-"||l=="digitNumber"&&H==",")&&(M.setSelectionRange(W+1,z+1),I.preventDefault()),b=="Backspace"&&(l=="creditCard"&&A==" "||l=="postal"&&A=="-"||l=="digitNumber"&&A==",")&&(M.setSelectionRange(W-1,z-1),I.preventDefault()),b=="Enter"||b=="Tab"}g.scope(()=>{["number","digitNumber","creditCard"].includes(l)&&b=="Clear"&&o(H=>s(n({},H),{rawValue:"",safeValue:"",eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1}))}),g.scope(()=>{if(!["number","digitNumber"].includes(l)||!["ArrowUp","ArrowDown"].includes(b))return;let H=+(b=="ArrowUp")*2-1,A=a.rawValue.slice(-1),re=a.safeValue[z-1],D=z-1,F=String(a.safeValue),ee=a.rawValue.split(".")[1],ve=(ee==null?void 0:ee.length)||0;g.scope(()=>{if(!A){F="0";return}if(A=="-"){F+="0";return}if(A=="."){F+="0";return}if(z==0)return;let te=String(F).slice(0,D).match(/\./),Ve=String(F).slice(D),O=String(Ve.toNumber().toFixed(0)).length;re=="."&&(O=1,D=F.split(".")[0].length-1),re==","&&(O+=1,D--),te&&(O=-1*(ve-O));let P=F[D].toNumber()+H;P<0?P=9:P>=10&&(P=0),F=F.partReplace(D,String(P)),setTimeout(()=>{M.setSelectionRange(D+1,D+1)},1)}),o(te=>s(n(n({},te),w.Validation.SyncValue({allowDecimals:_,allowZeroStart:L,min:K,max:B,restrict:l,value:F})),{eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),I.preventDefault()}),Q&&Q(I),G&&Z.SubmitForm(I,x)},onChange:I=>{let{value:b,selectionStart:R,selectionEnd:M}=I.target,$=w.Validation.SyncValue({allowDecimals:_,allowZeroStart:L,min:K,max:B,restrict:l,value:b});a.isComposing&&($.safeValue=b),$.safeValue!=a.safeValue&&(o(j=>s(n(n({},j),$),{prevValue:a.safeValue,eventType:"update",eventID:y(12),caretFrom:Number(R),caretTo:Number(M),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),X&&X(I))},width:1},m),{onFocus:I=>{m!=null&&m.onFocus&&(m==null||m.onFocus(I)),o(b=>s(n({},b),{eventID:y(12),isFocusing:!0}))},onBlur:I=>{m!=null&&m.onBlur&&(m==null||m.onBlur(I)),o(b=>s(n({},b),{eventID:y(12),isFocusing:!1}))},onCompositionStart:I=>{m!=null&&m.onCompositionStart&&(m==null||m.onCompositionStart(I)),o(b=>s(n({},b),{eventID:y(12),isComposing:!0}))},onCompositionEnd:I=>{if(m!=null&&m.onCompositionEnd&&(m==null||m.onCompositionEnd(I)),l=="text"){g.interval.once(()=>{o(R=>s(n({},R),{isComposing:!1}))},100,"input.textfield.composing.end");return}let b=w.Validation.SyncValue({allowDecimals:_,allowZeroStart:L,min:K,max:B,restrict:l,value:a.safeValue});o(R=>s(n(n({},R),b),{prevValue:R.safeValue,eventType:"update",eventID:y(12),caretFrom:Number(R.safeValue.length+1),caretTo:Number(R.safeValue.length+1),isComposing:!1,isInspected:!1}))}}))},TextAreaBox:e=>{let{rootStates:i,val_status:a,set_status:o,isShallow:c}=e,B=i,{componentId:t,tone:d,required:f,form:r,label:l,isLabelActive:x,minRows:h,maxRows:v,multiline:E,autoHeight:J,allowDecimals:Y,allowZeroStart:k,enableFormSubmit:G,maxLength:fe,checkValidationAtFirst:_,onChange:L,onKeyDown:U,onValidate:X,onValidateDelay:Q,onUpdateValue:ge,onUpdateValidValue:xe,onUserAction:be,value:Ie="",leftIndicator:Se,rightIndicator:he,leftIcon:Te,rightIcon:we,defaultValidation:ye,wrapStyles:Ce}=B,p=ae(B,["componentId","tone","required","form","label","isLabelActive","minRows","maxRows","multiline","autoHeight","allowDecimals","allowZeroStart","enableFormSubmit","maxLength","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","defaultValidation","wrapStyles"]);return!i.multiline?null:u(N,s(n({htmlTag:"textarea","data-show-validation":Z.isShowValidation(a,!!_),"data-input-origin":a.componentId,"data-component-id":a.componentId,value:a.rawValue,width:1},p),{onFocus:T=>{p!=null&&p.onFocus&&(p==null||p.onFocus(T)),o(V=>s(n({},V),{eventID:y(12),isFocusing:!0}))},onBlur:T=>{p!=null&&p.onBlur&&(p==null||p.onBlur(T)),o(V=>s(n({},V),{eventID:y(12),isFocusing:!1}))},onCompositionStart:T=>{p!=null&&p.onCompositionStart&&(p==null||p.onCompositionStart(T)),o(V=>s(n({},V),{eventID:y(12),isComposing:!0}))},onCompositionEnd:T=>{p!=null&&p.onCompositionEnd&&(p==null||p.onCompositionEnd(T)),g.interval.once(()=>{o(V=>s(n({},V),{eventID:y(12),isComposing:!1}))},100,"input.textfield.composing.end")},onKeyDown:T=>{U&&U(T),G&&Z.SubmitForm(T,r)},onChange:T=>{let{value:V}=T.target;o(le=>s(n({},le),{rawValue:V,eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),L&&L(T)}}))}},_e=e=>{let{componentId:i,restrict:a="text",value:o="",min:c,max:t,allowDecimals:d,allowZeroStart:f}=e,[r,l]=ce(s(n({componentId:i},w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:c,max:t,restrict:a,value:o})),{prevValue:"",eventType:"init",eventID:y(12),caretFrom:null,caretTo:null})),[x,h]=ce(["password","concealed"].includes(a)&&"password"||"text");ie(()=>{l(E=>s(n(n({},E),w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:c,max:t,restrict:a,value:o})),{isInspected:!1})),ue.set({[i+":set_inputType"]:h})},[]);let v={rootStates:e,val_inputType:x,set_inputType:h,val_status:r,set_status:l};return Z.CommonEffects({type:"textfield",states:e,val_status:r,set_status:l,SystemValidation:w.Validation.System,ExtraOverrideStates:E=>w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:c,max:t,restrict:a,value:E})}),ie(()=>{w.setSelection({id:e.id,restrict:a,val_status:r})},[r]),q(He,{val_status:r,set_status:l,states:v.rootStates,children:[u(Le,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||!!r.isFocusing||!!r.rawValue}),u(w.Shallow,n({},v)),u(w.InputBox,n({},v)),u(w.TextAreaBox,n({},v))]})},C=e=>{var i,a;return e=n({autoHeight:!0,restrict:"text",fontSize:"inherit",value:""},e),e.value=(a=w.Validation.SyncValue({allowDecimals:e.allowDecimals,allowZeroStart:e.allowZeroStart,min:e.min,max:e.max,restrict:e.restrict||"text",value:(i=e.value)!=null?i:""}).rawValue)!=null?a:"",e.multiline?(e.minRows=e.minRows||5,e.maxRows=e.maxRows||20):(e.minRows=1,e.maxRows=1),u(Ee,{componentId:e.componentId,children:_e,states:Ae(e)})},S=C;S.Validate=w.Validation.Text,S.Katakana=e=>u(C,s(n({},e),{restrict:"katakana",multiline:!1,autoHeight:!1})),S.HankakuKatakana=e=>u(C,s(n({},e),{restrict:"hankaku.katakana",multiline:!1,autoHeight:!1})),S.CreditCard=e=>u(C,s(n({},e),{restrict:"creditCard",multiline:!1,autoHeight:!1})),S.Tel=e=>u(C,s(n({},e),{restrict:"tel",multiline:!1,autoHeight:!1})),S.Number=e=>u(C,s(n({},e),{restrict:"number",multiline:!1,autoHeight:!1})),S.DigitNumber=e=>u(C,s(n({},e),{restrict:"digitNumber",multiline:!1,autoHeight:!1})),S.Email=e=>u(C,s(n({},e),{restrict:"email",multiline:!1,autoHeight:!1})),S.Url=e=>u(C,s(n({},e),{restrict:"url",multiline:!1,autoHeight:!1})),S.Postal=e=>u(C,s(n({label:"\u90F5\u4FBF\u756A\u53F7"},e),{restrict:"postal",multiline:!1,autoHeight:!1,leftIcon:u(Be,{ssSphere:2,fontColor:"4.thin",children:"\u3012"})})),S.Password=e=>u(C,s(n({label:"\u30D1\u30B9\u30EF\u30FC\u30C9",rightIcon:u(me,{ssSphere:2.5,freeCSS:{pointerEvents:"all"},children:u(ke.Sub,{ssSphere:2.5,borderRadius:"3.tone.tertiary",fontColor:"theme",flexCenter:!0,height:1,ssEffectsOnActive:["expand"],onMouseOver:i=>{pe.open(i.currentTarget,"\u30C6\u30AD\u30B9\u30C8\u3092\u8868\u793A",24)},onMouseLeave:pe.abort,tabIndex:-1,onClick:i=>{g(i.target).parent().parent().find("input").callback(a=>{let o=a[0];if(!o)return;let c=o.dataset.componentId;if(!c)return;let t=ue.get(c+":set_inputType");t&&t(d=>d==="password"&&"text"||"password")})},children:u(Ne,{icon:De})})}),restrict:"password"},e),{multiline:!1,autoHeight:!1})),S.Concealed=e=>u(S.Password,s(n({label:"\u79D8\u5BC6\u9375"},e),{restrict:"concealed"})),S.Money={JPY:e=>u(S.DigitNumber,s(n({rightIcon:u(me,{fontColor:"4.thin",children:"\u5186"})},e),{multiline:!1,autoHeight:!1}))};export{S as TextField,_e as TextInput,S as default};
|
|
3
|
+
T`.repeat(x-1)}let r=Ne(i);return q(N,{position:"absolute",top:0,left:0,right:0,height:0,overflow:"hidden",opacity:"trans",freeCSS:{zIndex:3,pointerEvents:"none"},children:[u(ie.Description,s(n({className:i.className},r),{position:"absolute",width:1,freeCSS:s(n({},r.freeCSS),{color:"orange"}),"data-input-shallow":a.componentId,children:u(N,{"data-input-value-shallow":a.componentId,children:p})})),u(ie.Description,s(n({className:i.className},r),{position:"absolute",left:0,freeCSS:s(n({},r.freeCSS),{backgroundColor:"transparent",color:"blue"}),"data-input-min-height-value-shallow":a.componentId,children:d})),u(ie.Description,s(n({className:i.className},r),{position:"absolute",right:0,freeCSS:s(n({},r.freeCSS),{backgroundColor:"transparent",color:"red"}),"data-input-max-height-value-shallow":a.componentId,children:f}))]})},InputBox:e=>{let{rootStates:i,val_status:a,set_status:o,val_inputType:p,set_inputType:t}=e;if(i.multiline)return null;let re=i,{componentId:d,tone:f,required:r,restrict:l="text",form:x,autoComplete:h="off",autoCapitalize:v="off",minRows:E,maxRows:J,multiline:Y,autoHeight:k,enableFormSubmit:ne,clearButton:le=!1,allowDecimals:Z,allowZeroStart:B,checkValidationAtFirst:U,onChange:M,onKeyDown:G,onValidate:ge,onValidateDelay:xe,onUpdateValue:be,onUpdateValidValue:Ie,onUserAction:Se,value:he="",leftIndicator:Te,rightIndicator:we,leftIcon:ye,rightIcon:Ce,maxLength:ve,min:c,max:K,label:X,isLabelActive:T,defaultValidation:V,wrapStyles:oe}=re,m=te(re,["componentId","tone","required","restrict","form","autoComplete","autoCapitalize","minRows","maxRows","multiline","autoHeight","enableFormSubmit","clearButton","allowDecimals","allowZeroStart","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","maxLength","min","max","label","isLabelActive","defaultValidation","wrapStyles"]);return u(N,s(n({htmlTag:"input",type:p,inputMode:["number","digitNumber","creditCard"].includes(l)?"numeric":l=="email"?"email":"text","data-disabled":i.disabled,"data-show-validation":P.isShowValidation(a,!!U),"data-component-id":a.componentId,"data-input-origin":a.componentId,value:a.safeValue,autoComplete:h,autoCapitalize:v,onKeyDown:I=>{let{key:b,target:R}=I,L=R,{selectionStart:_,selectionEnd:Q}=L,W=Number(_),$=Number(Q);{let H=a.safeValue[Number(W)],A=a.safeValue[Number(W)-1];b=="Delete"&&(l=="creditCard"&&H==" "||l=="postal"&&H=="-"||l=="digitNumber"&&H==",")&&(L.setSelectionRange(W+1,$+1),I.preventDefault()),b=="Backspace"&&(l=="creditCard"&&A==" "||l=="postal"&&A=="-"||l=="digitNumber"&&A==",")&&(L.setSelectionRange(W-1,$-1),I.preventDefault()),b=="Enter"||b=="Tab"}g.scope(()=>{["number","digitNumber","creditCard"].includes(l)&&b=="Clear"&&o(H=>s(n({},H),{rawValue:"",safeValue:"",eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1}))}),g.scope(()=>{if(!["number","digitNumber"].includes(l)||!["ArrowUp","ArrowDown"].includes(b))return;let H=+(b=="ArrowUp")*2-1,A=a.rawValue.slice(-1),se=a.safeValue[$-1],D=$-1,F=String(a.safeValue),j=a.rawValue.split(".")[1],Ve=(j==null?void 0:j.length)||0;g.scope(()=>{if(!A){F="0";return}if(A=="-"){F+="0";return}if(A=="."){F+="0";return}if($==0)return;let ee=String(F).slice(0,D).match(/\./),Re=String(F).slice(D),O=String(Re.toNumber().toFixed(0)).length;se=="."&&(O=1,D=F.split(".")[0].length-1),se==","&&(O+=1,D--),ee&&(O=-1*(Ve-O));let z=F[D].toNumber()+H;z<0?z=9:z>=10&&(z=0),F=F.partReplace(D,String(z)),setTimeout(()=>{L.setSelectionRange(D+1,D+1)},1)}),o(ee=>s(n(n({},ee),w.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:K,restrict:l,value:F})),{eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),I.preventDefault()}),G&&G(I),ne&&P.SubmitForm(I,x)},onChange:I=>{let{value:b,selectionStart:R,selectionEnd:L}=I.target,_=w.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:K,restrict:l,value:b});a.isComposing&&(_.safeValue=b),_.safeValue!=a.safeValue&&(o(Q=>s(n(n({},Q),_),{prevValue:a.safeValue,eventType:"update",eventID:y(12),caretFrom:Number(R),caretTo:Number(L),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),M&&M(I))},width:1},m),{onFocus:I=>{m!=null&&m.onFocus&&(m==null||m.onFocus(I)),o(b=>s(n({},b),{eventID:y(12),isFocusing:!0}))},onBlur:I=>{m!=null&&m.onBlur&&(m==null||m.onBlur(I)),o(b=>s(n({},b),{eventID:y(12),isFocusing:!1}))},onCompositionStart:I=>{m!=null&&m.onCompositionStart&&(m==null||m.onCompositionStart(I)),o(b=>s(n({},b),{eventID:y(12),isComposing:!0}))},onCompositionEnd:I=>{if(m!=null&&m.onCompositionEnd&&(m==null||m.onCompositionEnd(I)),l=="text"){g.interval.once(()=>{o(R=>s(n({},R),{isComposing:!1}))},100,"input.textfield.composing.end");return}let b=w.Validation.SyncValue({allowDecimals:Z,allowZeroStart:B,min:c,max:K,restrict:l,value:a.safeValue});o(R=>s(n(n({},R),b),{prevValue:R.safeValue,eventType:"update",eventID:y(12),caretFrom:Number(R.safeValue.length+1),caretTo:Number(R.safeValue.length+1),isComposing:!1,isInspected:!1}))}}))},TextAreaBox:e=>{let{rootStates:i,val_status:a,set_status:o,isShallow:p}=e,X=i,{componentId:t,tone:d,required:f,form:r,label:l,isLabelActive:x,clearButton:h=!1,minRows:v,maxRows:E,multiline:J,autoHeight:Y,allowDecimals:k,allowZeroStart:ne,enableFormSubmit:le,maxLength:Z,checkValidationAtFirst:B,onChange:U,onKeyDown:M,onValidate:G,onValidateDelay:ge,onUpdateValue:xe,onUpdateValidValue:be,onUserAction:Ie,value:Se="",leftIndicator:he,rightIndicator:Te,leftIcon:we,rightIcon:ye,defaultValidation:Ce,wrapStyles:ve}=X,c=te(X,["componentId","tone","required","form","label","isLabelActive","clearButton","minRows","maxRows","multiline","autoHeight","allowDecimals","allowZeroStart","enableFormSubmit","maxLength","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","leftIndicator","rightIndicator","leftIcon","rightIcon","defaultValidation","wrapStyles"]);return!i.multiline?null:u(N,s(n({htmlTag:"textarea","data-show-validation":P.isShowValidation(a,!!B),"data-input-origin":a.componentId,"data-component-id":a.componentId,value:a.rawValue,width:1},c),{onFocus:T=>{c!=null&&c.onFocus&&(c==null||c.onFocus(T)),o(V=>s(n({},V),{eventID:y(12),isFocusing:!0}))},onBlur:T=>{c!=null&&c.onBlur&&(c==null||c.onBlur(T)),o(V=>s(n({},V),{eventID:y(12),isFocusing:!1}))},onCompositionStart:T=>{c!=null&&c.onCompositionStart&&(c==null||c.onCompositionStart(T)),o(V=>s(n({},V),{eventID:y(12),isComposing:!0}))},onCompositionEnd:T=>{c!=null&&c.onCompositionEnd&&(c==null||c.onCompositionEnd(T)),g.interval.once(()=>{o(V=>s(n({},V),{eventID:y(12),isComposing:!1}))},100,"input.textfield.composing.end")},onKeyDown:T=>{M&&M(T),le&&P.SubmitForm(T,r)},onChange:T=>{let{value:V}=T.target;o(oe=>s(n({},oe),{rawValue:V,eventType:"update",eventID:y(12),isFocusing:!0,isInspected:!1,isValidated:!1,notice:[]})),U&&U(T)}}))}},$e=e=>{let{componentId:i,restrict:a="text",value:o="",min:p,max:t,allowDecimals:d,allowZeroStart:f}=e,[r,l]=pe(s(n({componentId:i},w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:p,max:t,restrict:a,value:o})),{prevValue:"",eventType:"init",eventID:y(12),caretFrom:null,caretTo:null})),[x,h]=pe(["password","concealed"].includes(a)&&"password"||"text");ae(()=>{l(E=>s(n(n({},E),w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:p,max:t,restrict:a,value:o})),{isInspected:!1})),ce.set({[i+":set_inputType"]:h})},[]);let v={rootStates:e,val_inputType:x,set_inputType:h,val_status:r,set_status:l};return P.CommonEffects({type:"textfield",states:e,val_status:r,set_status:l,SystemValidation:w.Validation.System,ExtraOverrideStates:E=>w.Validation.SyncValue({allowDecimals:d,allowZeroStart:f,min:p,max:t,restrict:a,value:E})}),ae(()=>{w.setSelection({id:e.id,restrict:a,val_status:r})},[r]),q(Ae,{val_status:r,set_status:l,states:v.rootStates,children:[u(Be,{componentId:e.componentId,fontSize:e.fontSize,required:e.required,label:e.label,isActive:e.isLabelActive||!!r.isFocusing||!!r.rawValue}),u(w.Shallow,n({},v)),u(w.InputBox,n({},v)),u(w.TextAreaBox,n({},v))]})},C=e=>{var i,a;return e=n({autoHeight:!0,restrict:"text",fontSize:"inherit",value:""},e),e.value=(a=w.Validation.SyncValue({allowDecimals:e.allowDecimals,allowZeroStart:e.allowZeroStart,min:e.min,max:e.max,restrict:e.restrict||"text",value:(i=e.value)!=null?i:""}).rawValue)!=null?a:"",e.multiline?(e.minRows=e.minRows||5,e.maxRows=e.maxRows||20):(e.minRows=1,e.maxRows=1),u(He,{componentId:e.componentId,children:$e,states:Le(e)})},S=C;S.Validate=w.Validation.Text,S.Katakana=e=>u(C,s(n({},e),{restrict:"katakana",multiline:!1,autoHeight:!1})),S.HankakuKatakana=e=>u(C,s(n({},e),{restrict:"hankaku.katakana",multiline:!1,autoHeight:!1})),S.CreditCard=e=>u(C,s(n({},e),{restrict:"creditCard",multiline:!1,autoHeight:!1})),S.Tel=e=>u(C,s(n({},e),{restrict:"tel",multiline:!1,autoHeight:!1})),S.Number=e=>u(C,s(n({},e),{restrict:"number",multiline:!1,autoHeight:!1})),S.DigitNumber=e=>u(C,s(n({},e),{restrict:"digitNumber",multiline:!1,autoHeight:!1})),S.Email=e=>u(C,s(n({},e),{restrict:"email",multiline:!1,autoHeight:!1})),S.Url=e=>u(C,s(n({},e),{restrict:"url",multiline:!1,autoHeight:!1})),S.Postal=e=>u(C,s(n({label:"\u90F5\u4FBF\u756A\u53F7"},e),{restrict:"postal",multiline:!1,autoHeight:!1,leftIcon:u(Me,{ssSphere:2,fontColor:"4.thin",children:"\u3012"})})),S.Password=e=>u(C,s(n({label:"\u30D1\u30B9\u30EF\u30FC\u30C9",rightIcon:u(de,{ssSphere:2.5,freeCSS:{pointerEvents:"all"},children:u(De.Sub,{ssSphere:2.5,borderRadius:"3.tone.tertiary",fontColor:"theme",flexCenter:!0,height:1,ssEffectsOnActive:["expand"],onMouseOver:i=>{me.open(i.currentTarget,"\u30C6\u30AD\u30B9\u30C8\u3092\u8868\u793A",24)},onMouseLeave:me.abort,tabIndex:-1,onClick:i=>{g(i.target).parent().parent().find("input").callback(a=>{let o=a[0];if(!o)return;let p=o.dataset.componentId;if(!p)return;let t=ce.get(p+":set_inputType");t&&t(d=>d==="password"&&"text"||"password")})},children:u(ke,{icon:Ee})})}),restrict:"password"},e),{multiline:!1,autoHeight:!1})),S.Concealed=e=>u(S.Password,s(n({label:"\u79D8\u5BC6\u9375"},e),{restrict:"concealed"})),S.Money={JPY:e=>u(S.DigitNumber,s(n({rightIcon:u(de,{fontColor:"4.thin",children:"\u5186"})},e),{multiline:!1,autoHeight:!1}))};export{S as TextField,$e as TextInput,S as default};
|