amotify 0.2.294 → 0.2.296
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.
- package/dist/@utils/color.d.ts +3 -3
- package/dist/fn/Input/Autocomplete.js +1 -1
- package/dist/fn/Input/Color.d.ts +2 -2
- package/dist/fn/Input/Color.js +1 -1
- package/dist/fn/Input/List.js +1 -1
- package/dist/fn/Input/Slider.d.ts +6 -2
- package/dist/fn/Input/Slider.js +1 -1
- package/dist/fn/Input/Switch.d.ts +2 -2
- package/dist/fn/Input/Switch.js +1 -1
- package/dist/fn/Input/index.d.ts +1 -0
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
package/dist/@utils/color.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Themecolor } from '../@declares';
|
|
2
2
|
export declare const ColorObjects: {
|
|
3
|
-
key:
|
|
3
|
+
key: Themecolor;
|
|
4
4
|
isBrand: boolean;
|
|
5
5
|
isAvocado: boolean;
|
|
6
6
|
}[];
|
|
@@ -12,7 +12,7 @@ declare const DarkmodeColors: {
|
|
|
12
12
|
auto(): string;
|
|
13
13
|
};
|
|
14
14
|
declare const ThemeColors: {
|
|
15
|
-
[key in
|
|
15
|
+
[key in Themecolor]: {
|
|
16
16
|
alfa(alfa?: number): string;
|
|
17
17
|
isBrand: boolean;
|
|
18
18
|
isAvocado: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as l,c as f,d as Z,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as c,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as 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:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:u,enableFormSubmit:y,showInitValidation:S,onValidate:g,onValidateDelay:I,onUpdateValue:x,onUpdateValidValue:C,onUserAction:P,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 F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let k=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=k[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(k=>f(l({},k),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let k="autocomplete-click-"+e.componentId;if(!o.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||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},{eventID:k,passive:!1})},[o.isPickerOpen]),V(N,{children:[c(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,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&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(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:[c(ie,{width:0,overflow:"hidden",opacity:"trans",children:"A"}),V(M.Left,{flexWrap:!0,flexSizing:0,gap:"1/2",verticalAlign:"unset",xcss:{letterSpacing:".5px"},children:[c(R.Selected,l({},t)),c(R.SearchInput,l({},t))]}),o.rawValue.length>1&&c($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:k=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:c(B.X,{})})]})})),c(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return c(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,"data-input-value-shallow":i.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),xcss:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:u}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(u===null)return S=[];y.rawValue.includes(u)?S=S.filter(I=>I!==u):e.multiSelect?S.push(u):S=[u]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,u=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=u.length-1,S=null;a.scope(()=>{var I,x,C,P,E,w,D;let g=u.findIndex(_=>(_==null?void 0:_.id)==t.val_optionFocused);if(g==-1){S=(I=u[0])==null?void 0:I.id;return}if(r==1){if(S=(x=u[0])==null?void 0:x.id,O){S=(C=u[y])==null?void 0:C.id;return}if(g==-1||g==y)return;S=(P=u[g+1])==null?void 0:P.id}else{if(S=(E=u[y])==null?void 0:E.id,O){S=(w=u[0])==null?void 0:w.id;return}if(g==-1||g==0)return;S=(D=u[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?c(X,f(l({position:"absolute",ssZIndex:1e3,padding:"1/3"},o),{xcss:l({minWidth:"75%"},o.xcss),children:c(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{xcss:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.xcss),children:V(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&c(M.Center,{padding:"1/2",children:c(le.Theme.R,{showInitial:!0})}),s!="fetch"&&V(N,{children:[!m.length&&c(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,u=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return c(q,{"data-autocomplete-input-value":p.id,children:c(S,{option:p,isFocused:u,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(C=>C!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(x=>f(l({},x),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(c(q,{position:"relative",flexCenter:!0,xcss:{userSelect:"none"},children:c(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(u=>u!==o),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),c(N,{children:m})},Core:t=>{var C,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,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)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[u,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(w=>w.value))]),F(()=>{if(!o.length)return;let w=[...o],D=l({},O);w.forEach(_=>{(_==null?void 0:_.type)!="label"&&(D[a.Stringify(_==null?void 0:_.value)]=_)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:u,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:u,set_status:y,SystemValidation:pe});let x=u.rawValue.length&&u.rawValue[0]!==null||u.isPickerOpen||u.isFocusing;return V(se,{val_status:u,set_status:y,states:t,children:[c(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:x,val_status:u}),c(R.Button,l({},g))]})}},Q=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?c(N,{children:i.option.label}):c($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(M.Left,{gap:"1/2",children:[i.isSelected&&c(B.Check,{fontColor:"theme"}),c(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[c(K,{padding:[0,"1/2"],children:i.label}),c($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,xcss:{lineHeight:1,aspectRatio:"1/1"},children:c(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:c(K.Supplement,{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=c(G,{children:c(B.Search,{})}),e.disabled&&(e.rightIcon=c(G,{fontColor:"5.translucent",children:c(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),c(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Q as Autocomplete,Q as default};
|
|
1
|
+
import{b as l,c as f,d as Z,e as H}from"../../chunk-C5N2D3ZX.js";import{Fragment as N,jsx as c,jsxs as V}from"react/jsx-runtime";import{useState as A,useEffect as F,useRef as ne}from"react";import a,{UUID as v}from"jmini";import{Config as oe}from"../../@utils";import{Box as X,Span as ie,FAI as B,Column as q}from"../../atoms";import{Literal as 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:i}=t,{required:s,options:d,min:m,max:o}=i;m=m||0,o=o||65535;let n=[],p=e.filter(h=>h!==null).length;return s&&(p||n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),p<m&&n.push({type:"invalid",label:m+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),p>o&&n.push({type:"invalid",label:o+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!n.filter(({type:h})=>h=="invalid").length,notice:n}}const R={InitOptions:t=>{let e=[];return t.forEach(i=>{if(!i)return;let{type:s,label:d,value:m,searchValue:o}=i,n=o||a.isString(d)&&d||""||a.isString(m)&&m||a.Stringify(m||"")||"";a.isNullish(d)&&(d=String(m)),e.push(f(l({id:v(8)},i),{searchValue:n,type:s||"selector",label:d,value:m}))}),e},FilterSelectableOptions:(t,e,i)=>{let s=t;return i||(s=t.filter(d=>(d==null?void 0:d.type)!="label")),a.scope(()=>{if(!e)return;let d=e.toLower().replace(/ /g,"");s=s.filter(m=>(m.searchValue||"").toLower().replace(/ /g,"").includes(d))}),s},Button:t=>{let{rootStates:e,val_keyword:i,set_keyword:s,val_optionFocused:d,set_optionFocused:m,val_status:o,set_status:n}=t,J=e,{tone:p,required:h,form:O,className:r,multiSelect:u,enableFormSubmit:y,showInitValidation:S,onValidate:g,onValidateDelay:I,onUpdateValue:x,onUpdateValidValue:C,onUserAction:P,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 F(()=>{var b;if(e.disabled||!o.isPickerOpen||a.isExist(d))return;let k=R.FilterSelectableOptions(t.val_options,i,!1);m(((b=k[0])==null?void 0:b.id)||"")},[i]),F(()=>{if(o.eventType!="init"&&o.eventType!="override"&&e.max==o.rawValue.length){s(""),n(k=>f(l({},k),{eventID:v(8),isPickerOpen:!1}));return}},[o.rawValue]),F(()=>{let k="autocomplete-click-"+e.componentId;if(!o.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||n(te=>f(l({},te),{eventID:v(8),isFocusing:!1,isPickerOpen:!1}))},{eventID:k,passive:!1})},[o.isPickerOpen]),V(N,{children:[c(X,f(l({tabIndex:-1},T),{"data-disabled":e.disabled,"data-show-validation":z.isShowValidation(o,!!S),"data-component-id":o.componentId,"data-input-origin":o.componentId,"data-focus":o.isFocusing||o.isPickerOpen,className:[r,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&&(oe.get().isTouchDevice||a("#"+W).focus()),n(U=>f(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:[c(ie,{"data-input-value-shallow":o.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:[c(R.Selected,l({},t)),c(R.SearchInput,l({},t))]}),o.rawValue.length>1&&c($.Clear,{tabIndex:-1,color:"nega",fontColor:"4.thin",ssSphere:2,onClick:k=>{n(b=>f(l({},b),{eventType:"update",eventID:v(8),rawValue:[]}))},children:c(B.X,{})})]})})),c(R.Picker,l({},t))]})},SearchInput:t=>{let{rootStates:e,val_status:i,set_status:s}=t;if(e.disabled)return null;let d=!!i.isFocusing||!!i.isPickerOpen||!!i.rawValue.length;i.isFocusing||e.multiSelect||i.rawValue.length&&(d=!1);let m=e.searchInputPlaceholder||"\u691C\u7D22...";return c(X,{htmlTag:"input",id:"SearchInput_"+e.componentId,placeholder:m,opacity:d?"max":"trans",transition:"middle",flexSizing:0,fontSize:"inherit",border:"0.trans",backgroundColor:"trans",isRounded:!0,padding:[0,"2/3"],value:t.val_keyword,className:[L("SearchInput"),d&&L("isActive")].join(" "),xcss:{outline:"none",minWidth:12*4},onFocus:o=>{s(n=>f(l({},n),{eventID:v(8),isFocusing:!0,isPickerOpen:!0}))},onBlur:o=>H(void 0,null,function*(){s(n=>f(l({},n),{eventID:v(8),isFocusing:!1}))}),onCompositionStart:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!0}))},onCompositionEnd:o=>{s(n=>f(l({},n),{eventID:v(8),isComposing:!1}))},onKeyDown:o=>{let{key:n,metaKey:p,ctrlKey:h}=o,O=p||h;n=="Escape"?s(r=>f(l({},r),{eventID:v(12),isPickerOpen:!1})):n=="Tab"?s(r=>f(l({},r),{eventID:v(8),isFocusing:!1,isPickerOpen:!1})):n==" "?a.scope(()=>{i.isPickerOpen||t.val_keyword||(o.preventDefault(),s(r=>f(l({},r),{eventID:v(8),isPickerOpen:!0})))}):n=="Backspace"?a.scope(()=>{if(t.val_keyword)return;let r=[...t.val_status.rawValue];r.pop(),O&&(r=[]),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1}))}):n=="Enter"&&a.scope(()=>{if(i.isComposing||(o==null?void 0:o.keyCode)===229)return;if(!i.isPickerOpen){s(y=>f(l({},y),{eventID:v(8),isPickerOpen:!0}));return}if(!t.val_optionFocused)return;let r=t.val_options.find(y=>(y==null?void 0:y.id)==t.val_optionFocused);if(!r)return;let{value:u}=r;s(y=>{let S=[...y.rawValue];return a.scope(()=>{if(u===null)return S=[];y.rawValue.includes(u)?S=S.filter(I=>I!==u):e.multiSelect?S.push(u):S=[u]}),f(l({},y),{rawValue:S,eventType:"update",eventID:v(8),isInspected:!1})}),t.set_optionsModified(!0),t.set_keyword("")}),a.scope(()=>{if(!a.isOneOf(n,"ArrowDown","ArrowUp"))return;if(o.preventDefault(),!i.isPickerOpen){s(g=>f(l({},g),{eventID:v(8),isPickerOpen:!0}));return}let r=n=="ArrowDown"?1:-1,u=R.FilterSelectableOptions(t.val_options,t.val_keyword),y=u.length-1,S=null;a.scope(()=>{var I,x,C,P,E,w,D;let g=u.findIndex(_=>(_==null?void 0:_.id)==t.val_optionFocused);if(g==-1){S=(I=u[0])==null?void 0:I.id;return}if(r==1){if(S=(x=u[0])==null?void 0:x.id,O){S=(C=u[y])==null?void 0:C.id;return}if(g==-1||g==y)return;S=(P=u[g+1])==null?void 0:P.id}else{if(S=(E=u[y])==null?void 0:E.id,O){S=(w=u[0])==null?void 0:w.id;return}if(g==-1||g==0)return;S=(D=u[g-1])==null?void 0:D.id}}),t.set_optionFocused(S)}),e.enableFormSubmit&&z.SubmitForm(o,t.rootStates.form)},onChange:o=>{let p=o.target.value;t.set_keyword(p),t.set_optionFocused(""),p&&s(h=>f(l({},h),{eventID:v(8),isPickerOpen:!0}))}},"searchInput")},Picker:t=>{var n;let{rootStates:e,val_status:i}=t,[s,d]=A("idle");F(()=>{if(!e.onDynamicSearchOptions||!i.isPickerOpen)return;if(t.val_optionsModified)return t.set_optionsModified(!1);if(i.isComposing)return;d("fetch");let p="autocomplete-search-"+e.componentId;t.set_optionFocused(""),a.interval.once(()=>H(void 0,null,function*(){var r;let h=yield e.onDynamicSearchOptions(t.val_keyword);d("idle");let O=R.InitOptions(h||[]);t.set_options(O),t.set_optionFocused(((r=O[0])==null?void 0:r.id)||"")}),e.onDynamicSearchOptionsDelay||500,p)},[t.val_keyword,i.isComposing]),F(()=>{let p=a(`[data-selector-id="${i.componentId}"]`)[0];if(!p)return;let h=a(`[data-autocomplete-input-value="${t.val_optionFocused}"]`)[0];h&&(p.scrollTop=h.offsetTop-24)},[t.val_optionFocused]);let m=R.FilterSelectableOptions(t.val_options,e.onDynamicSearchOptions?"":t.val_keyword,!0),o={};{let p=e.pickerPosition||0;a.isOneOf(p,1,2)?o.bottom="100%":a.isOneOf(p,3,4)&&(o.top="100%"),a.isOneOf(p,1,3)?o.left=0:a.isOneOf(p,2,4)&&(o.right=0)}return i.isPickerOpen?c(X,f(l({position:"absolute",ssZIndex:1e3,padding:"1/3"},o),{xcss:l({minWidth:"75%"},o.xcss),children:c(ae.Body,f(l({className:L("Selector"),borderRadius:"2.tone.secondary",ssCardBox:!0,tabIndex:-1,boxShadow:"1.normal",overflow:"auto","data-selector-id":i.componentId},e.pickerStyles),{xcss:l({maxHeight:12*24},(n=e.pickerStyles)==null?void 0:n.xcss),children:V(q,{gap:"1/12",padding:[1,0],children:[s=="fetch"&&c(M.Center,{padding:"1/2",children:c(le.Theme.R,{showInitial:!0})}),s!="fetch"&&V(N,{children:[!m.length&&c(K.Supplement,{padding:[0,1],fontColor:"4.thin",children:"\u5019\u88DC\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093"}),m.map((p,h)=>{if(!p)return null;let{type:O,value:r}=p,u=t.val_optionFocused==p.id,y=i.rawValue.includes(r),S=e.onSelectorRender;return c(q,{"data-autocomplete-input-value":p.id,children:c(S,{option:p,isFocused:u,isSelected:y,onAdd:()=>{t.set_status(g=>{let I=[...g.rawValue];return a.scope(()=>{if(r===null)return I=[];if(g.rawValue.includes(r)){I=I.filter(C=>C!==r);return}e.multiSelect?I.push(r):I=[r]}),f(l({},g),{rawValue:I,eventType:"update",eventID:v(8),isFocusing:e.max!=I.length,isInspected:!1})})},onKeyDown:g=>{let{key:I}=g;I=="Tab"&&(t.set_optionFocused(""),t.set_status(x=>f(l({},x),{eventID:v(8),isPickerOpen:!1,isFocusing:!1})))}})},p.id)})]})]})}))})):null},Selected:t=>{let{rootStates:e,val_status:i,set_status:s,val_optionsDict:d}=t,m=[];return i.rawValue.forEach(o=>{let n=d[a.Stringify(o)];if(!n)return;let p=e.onSelectedRender,h=(n==null?void 0:n.selectedLabel)||(n==null?void 0:n.label);(n==null?void 0:n.value)===null&&(h=""),m.push(c(q,{position:"relative",flexCenter:!0,xcss:{userSelect:"none"},children:c(p,{value:n==null?void 0:n.value,label:h,onRemove:O=>{if(e.disabled)return;let r=[...i.rawValue];r=r.filter(u=>u!==o),s(u=>f(l({},u),{rawValue:r,eventType:"update",eventID:v(8),isInspected:!1,isFocusing:e.max!=r.length,isPickerOpen:!0}))}})},a.Stringify(n==null?void 0:n.value)||v(8)))}),c(N,{children:m})},Core:t=>{var C,P,E;let{value:e}=t,[i,s]=A(!1),[d,m]=A(""),[o,n]=A(t.options),[p,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)||((P=t.options[0])==null?void 0:P.id)||""),[O,r]=A({}),[u,y]=A(z.DefaultStatus(t.componentId,e)),S=ne(!1);F(()=>{i||(S.current?n(t.options):S.current=!0)},[a.Stringify((E=t.options)==null?void 0:E.map(w=>w.value))]),F(()=>{if(!o.length)return;let w=[...o],D=l({},O);w.forEach(_=>{(_==null?void 0:_.type)!="label"&&(D[a.Stringify(_==null?void 0:_.value)]=_)}),r(D)},[o]);let g={rootStates:t,val_options:o,set_options:n,val_optionFocused:p,set_optionFocused:h,val_optionsDict:O,set_optionsDict:r,val_optionsModified:i,set_optionsModified:s,val_keyword:d,set_keyword:m,val_status:u,set_status:y},I=!!t.multiSelect;z.CommonEffects({type:I?"autocomplete.multi":"autocomplete.single",states:t,val_status:u,set_status:y,SystemValidation:pe});let x=u.rawValue.length&&u.rawValue[0]!==null||u.isPickerOpen||u.isFocusing;return V(se,{val_status:u,set_status:y,states:t,children:[c(ce,{componentId:t.componentId,fontSize:t.fontSize,required:t.required,label:t.label,isActive:x,val_status:u}),c(R.Button,l({},g))]})}},Q=t=>{let e=l({},t);return e=f(l({value:[],min:0,max:65535,multiSelect:!0,emptySelect:!0,onSelectorRender:i=>{var s;return i.option?((s=i.option)==null?void 0:s.type)=="label"?c(N,{children:i.option.label}):c($.Sub.S,{color:"cloud",tabIndex:-1,backgroundColor:"trans",borderRadius:0,fontColor:"2.normal",textAlign:"left",padding:["2/3",1.5],isActive:i.isFocused,isActiveStyles:{backgroundColor:"cloud"},onClick:i.onAdd,onKeyDown:i.onKeyDown,children:V(M.Left,{gap:"1/2",children:[i.isSelected&&c(B.Check,{fontColor:"theme"}),c(K.Supplement,{transition:"short",children:i.option.label})]})}):null},onSelectedRender:i=>V(M.Left,{ssCardBox:!0,borderRadius:"1.tone.primary",fontSize:"1.mini",padding:"1/3",gap:0,children:[c(K,{padding:[0,"1/2"],children:i.label}),c($.Clear,{flexSizing:"none",color:"nega",fontColor:"4.thin",tabIndex:-1,ssSphere:2,onClick:i.onRemove,xcss:{lineHeight:1,aspectRatio:"1/1"},children:c(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:c(K.Supplement,{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=c(G,{children:c(B.Search,{})}),e.disabled&&(e.rightIcon=c(G,{fontColor:"5.translucent",children:c(B.Ban,{})}))),e.rightIcon&&(e=l({paddingRight:3},e)),e.leftIcon&&(e=l({paddingLeft:3},e)),c(re,{componentId:e.componentId,children:R.Core,states:ue(e)})};export{Q as Autocomplete,Q as default};
|
package/dist/fn/Input/Color.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { Themecolor } from '../../@declares';
|
|
3
3
|
import { InputTypes } from '.';
|
|
4
4
|
declare namespace Color {
|
|
5
5
|
type Input = InputTypes.CoreInput<string> & React.DOMAttributes<HTMLInputElement> & {
|
|
@@ -8,7 +8,7 @@ declare namespace Color {
|
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
value?: string;
|
|
10
10
|
};
|
|
11
|
-
type Color =
|
|
11
|
+
type Color = Themecolor | 'theme' | 'posi' | 'nega' | 'warn';
|
|
12
12
|
}
|
|
13
13
|
declare const Color: React.FC<Color.Input>;
|
|
14
14
|
export { Color, Color as default };
|
package/dist/fn/Input/Color.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as m}from"jmini";import{useState as T}from"react";import x from"../../atoms/Box";import{OptionalInputWrapper as F,BoxWrapper as h,CoreEffects as c,DefaultBoxishStyles as w}from"./core";import{InputSwitchClasses as B}from"../../@styles/componentClasses";function S(e){let{value:r,states:I}=e,{required:p}=I,l=[];return p&&!r&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:f})=>f=="invalid").length,notice:l}}const U=e=>{let g=e,{componentId:r,required:I,form:p,enableFormSubmit:l,showInitValidation:f,onChange:
|
|
1
|
+
import{b as n,c as a,d as v}from"../../chunk-C5N2D3ZX.js";import{jsx as d}from"react/jsx-runtime";import{UUID as m}from"jmini";import{useState as T}from"react";import x from"../../atoms/Box";import{OptionalInputWrapper as F,BoxWrapper as h,CoreEffects as c,DefaultBoxishStyles as w}from"./core";import{InputSwitchClasses as B}from"../../@styles/componentClasses";function S(e){let{value:r,states:I}=e,{required:p}=I,l=[];return p&&!r&&l.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!l.filter(({type:f})=>f=="invalid").length,notice:l}}const U=e=>{let g=e,{componentId:r,required:I,form:p,enableFormSubmit:l,showInitValidation:f,onChange:y,onKeyDown:C,onValidate:E,onValidateDelay:R,onUpdateValue:W,onUpdateValidValue:_,onUserAction:H,value:b=""}=g,t=v(g,["componentId","required","form","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value"]),[i,s]=T(c.DefaultStatus(e.componentId||"",b));return c.CommonEffects({type:"color",states:e,val_status:i,set_status:s,SystemValidation:S}),d(h,{val_status:i,set_status:s,states:e,children:d(x,n({htmlTag:"input",type:"color","data-component-id":i.componentId,value:i.rawValue,className:B("Input"),onKeyDown:o=>{C&&C(o),l&&c.SubmitForm(o,p)},onChange:o=>{let{value:u}=o.target;s(D=>a(n({},D),{rawValue:u,eventType:"update",eventID:m(12),isInspected:!1,isValidated:!1,notice:[]})),y&&y(o)},onFocus:o=>{t!=null&&t.onFocus&&(t==null||t.onFocus(o)),s(u=>a(n({},u),{eventID:m(12),isFocusing:!0}))},onBlur:o=>{t!=null&&t.onBlur&&(t==null||t.onBlur(o)),s(u=>a(n({},u),{eventID:m(12),isFocusing:!1}))}},t))})},V=e=>{let r=a(n(a(n({},w(e)),{backgroundColor:"cloud",unitHeight:3}),e),{xcss:n({minWidth:108},e.xcss)});return d(F,{componentId:e.componentId,children:U,states:r})};export{V as Color,V as default};
|
package/dist/fn/Input/List.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as d,d as z}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import m,{UUID as D}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ne,GenerateHTMLProps as se}from"../../@utils";import{Box as x,Flex as ae,FAI as re,Span as ce}from"../../atoms";import{Button as de}from"../Button";import{OptionalInputWrapper as ue,BoxWrapper as pe,CoreEffects as F}from"./core";import{InputListClasses as y}from"../../@styles/componentClasses";function me(t){let{value:l,states:n}=t,{type:e,required:a,min:s,max:h}=n;s=s||0,h=h||65535;let c=[],f=l.length;return a&&(f||e=="radio"&&c.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),f<s&&c.push({type:"invalid",label:s+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),f>h&&c.push({type:"invalid",label:h+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!c.filter(({type:V})=>V=="invalid").length,notice:c}}const C={InitOptions:t=>{let l=[];return t.forEach(n=>{if(!n)return;let{label:e,value:a}=n;m.isNullish(e)&&(e=String(a)),l.push(d(o({},n),{label:e,value:a}))}),l},OptionalListWrapper:t=>{let{value:l,options:n=[]}=t,e=m.isExist(l)?m.Arrayify(l):[],a=[];return e.forEach(s=>{n.findIndex(c=>m.isEqual(c.value,s))!=-1&&a.push(s)}),i(C.Core,d(o({},t),{value:a,options:n}))},Core:t=>{let k=t,{type:l,tone:n,required:e,componentId:a="",form:s,override:h,icon:c,iconType:f,iconSize:V,iconPosition:_,iconColor:R,onIconRender:J,enableFormSubmit:X,showInitValidation:A,onValidate:U,onValidateDelay:v,onUpdateValue:W,onUpdateValidValue:$,onUserAction:H,value:I,options:q,className:j,cellStyles:K,cellClassName:Z,cellCheckedStyles:G,cellCheckedClassName:E,min:u,max:O,hideInput:L,xcss:Q,wrapStyles:b}=k,Y=z(k,["type","tone","required","componentId","form","override","icon","iconType","iconSize","iconPosition","iconColor","onIconRender","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","xcss","wrapStyles"]),[N,T]=ie(F.DefaultStatus(a,I));return F.CommonEffects({type:"list."+l,states:t,val_status:N,set_status:T,SystemValidation:me}),i(pe,{val_status:N,set_status:T,states:t,children:i(C.List,{rootStates:t,val_status:N,set_status:T})})},List:t=>{let{rootStates:l,val_status:n,set_status:e}=t,{componentId:a,type:s,tone:h,icon:c,iconSize:f,iconColor:V,isChecker:_,options:R,name:J,form:X,tabIndex:A,hideInput:U,disabled:v,className:W,cellStyles:$,cellClassName:H="",cellCheckedStyles:I,cellCheckedClassName:q="",enableFormSubmit:j}=l,K=l.onIconRender,Z=R.map((G,E)=>{let oe=G,{value:u,label:O,disabled:L,className:Q="",checkedStyles:b,checkedClassName:Y="",xcss:N}=oe,T=z(oe,["value","label","disabled","className","checkedStyles","checkedClassName","xcss"]),k=D(),w=n.rawValue.findIndex(r=>r===u||m.isEqual(r,u))!=-1,S=o(o({},$),T),B=[y("Label"),H,Q];w&&(S=d(o(o(o({},S),I),b),{xcss:o(o(o({},S==null?void 0:S.xcss),I==null?void 0:I.xcss),b==null?void 0:b.xcss)}),B=[...B,q,Y]);const ee=()=>{if(v||L)return;let r=[];if(s=="radio")r=[u];else if(s=="checkbox"||_)if(!w)r=[...n.rawValue,u];else{let p=[...n.rawValue];p.splice(n.rawValue.findIndex(P=>P==u),1),r=p}e(p=>d(o({},p),{rawValue:r,eventType:"update",eventID:D(12),isInspected:!1}))};let te=[i(ce,{ssZIndex:2,flexSizing:0,children:m.isString(O)?i(x,{children:O}):O},"content")];return c&&te[l.iconPosition=="right"?"push":"unshift"](i(K,{isChecked:w,iconSize:f,iconColor:V,toggle:ee},"icon")),[i(x,{htmlTag:"input",type:s=="radio"?"radio":"checkbox",className:y("Input"),name:"RadioCheckbox-"+J,"data-list-index":a+"-"+E,id:k,value:String(u),disabled:v||L,checked:w,onFocus:r=>{L||s=="radio"&&(n.rawValue.length||e(p=>d(o({},p),{rawValue:[u],eventType:"update",eventID:D(12),isInspected:!1})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:p,shiftKey:P}=r;if((s=="checkbox"||t.rootStates.isChecker)&&p!="Tab"){if(p.match(/Arrow/)){r.preventDefault();let le=m.isOneOf(p,"ArrowLeft","ArrowUp")?-1:1,g=E+le;g<0?g=R.length-1:g>=R.length&&(g=0),ne(`input[data-list-index="${a}-${g}"]`).focus()}}j&&F.SubmitForm(r,X)},tabIndex:A},"List-"+m.Stringify(u)),i(x,d(o({htmlTag:"label","data-disabled":v||L,htmlFor:k,className:B.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},S),{children:te}),"ListTrigger-"+m.Stringify(u))]});return i(ae,{flexSizing:"auto",style:l.style,xcss:o({},l.xcss),className:[W,y("CellBase"),y("HideInput_"+U),y("IconIndicator_"+!!c),y("Tone_"+h)].join(" "),children:Z})},IconBase:t=>{let l=
|
|
1
|
+
import{b as o,c as d,d as z}from"../../chunk-C5N2D3ZX.js";import{jsx as i}from"react/jsx-runtime";import m,{UUID as D}from"jmini";import{useState as ie}from"react";import{$$fromRoot as ne,GenerateHTMLProps as se}from"../../@utils";import{Box as x,Flex as ae,FAI as re,Span as ce}from"../../atoms";import{Button as de}from"../Button";import{OptionalInputWrapper as ue,BoxWrapper as pe,CoreEffects as F}from"./core";import{InputListClasses as y}from"../../@styles/componentClasses";function me(t){let{value:l,states:n}=t,{type:e,required:a,min:s,max:h}=n;s=s||0,h=h||65535;let c=[],f=l.length;return a&&(f||e=="radio"&&c.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"})),f<s&&c.push({type:"invalid",label:s+"\u500B\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),f>h&&c.push({type:"invalid",label:h+"\u500B\u307E\u3067\u9078\u629E\u3067\u304D\u307E\u3059"}),{ok:!c.filter(({type:V})=>V=="invalid").length,notice:c}}const C={InitOptions:t=>{let l=[];return t.forEach(n=>{if(!n)return;let{label:e,value:a}=n;m.isNullish(e)&&(e=String(a)),l.push(d(o({},n),{label:e,value:a}))}),l},OptionalListWrapper:t=>{let{value:l,options:n=[]}=t,e=m.isExist(l)?m.Arrayify(l):[],a=[];return e.forEach(s=>{n.findIndex(c=>m.isEqual(c.value,s))!=-1&&a.push(s)}),i(C.Core,d(o({},t),{value:a,options:n}))},Core:t=>{let k=t,{type:l,tone:n,required:e,componentId:a="",form:s,override:h,icon:c,iconType:f,iconSize:V,iconPosition:_,iconColor:R,onIconRender:J,enableFormSubmit:X,showInitValidation:A,onValidate:U,onValidateDelay:v,onUpdateValue:W,onUpdateValidValue:$,onUserAction:H,value:I,options:q,className:j,cellStyles:K,cellClassName:Z,cellCheckedStyles:G,cellCheckedClassName:E,min:u,max:O,hideInput:L,xcss:Q,wrapStyles:b}=k,Y=z(k,["type","tone","required","componentId","form","override","icon","iconType","iconSize","iconPosition","iconColor","onIconRender","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","options","className","cellStyles","cellClassName","cellCheckedStyles","cellCheckedClassName","min","max","hideInput","xcss","wrapStyles"]),[N,T]=ie(F.DefaultStatus(a,I));return F.CommonEffects({type:"list."+l,states:t,val_status:N,set_status:T,SystemValidation:me}),i(pe,{val_status:N,set_status:T,states:t,children:i(C.List,{rootStates:t,val_status:N,set_status:T})})},List:t=>{let{rootStates:l,val_status:n,set_status:e}=t,{componentId:a,type:s,tone:h,icon:c,iconSize:f,iconColor:V,isChecker:_,options:R,name:J,form:X,tabIndex:A,hideInput:U,disabled:v,className:W,cellStyles:$,cellClassName:H="",cellCheckedStyles:I,cellCheckedClassName:q="",enableFormSubmit:j}=l,K=l.onIconRender,Z=R.map((G,E)=>{let oe=G,{value:u,label:O,disabled:L,className:Q="",checkedStyles:b,checkedClassName:Y="",xcss:N}=oe,T=z(oe,["value","label","disabled","className","checkedStyles","checkedClassName","xcss"]),k=D(),w=n.rawValue.findIndex(r=>r===u||m.isEqual(r,u))!=-1,S=o(o({},$),T),B=[y("Label"),H,Q];w&&(S=d(o(o(o({},S),I),b),{xcss:o(o(o({},S==null?void 0:S.xcss),I==null?void 0:I.xcss),b==null?void 0:b.xcss)}),B=[...B,q,Y]);const ee=()=>{if(v||L)return;let r=[];if(s=="radio")r=[u];else if(s=="checkbox"||_)if(!w)r=[...n.rawValue,u];else{let p=[...n.rawValue];p.splice(n.rawValue.findIndex(P=>P==u),1),r=p}e(p=>d(o({},p),{rawValue:r,eventType:"update",eventID:D(12),isInspected:!1}))};let te=[i(ce,{ssZIndex:2,flexSizing:0,children:m.isString(O)?i(x,{children:O}):O},"content")];return c&&te[l.iconPosition=="right"?"push":"unshift"](i(K,{isChecked:w,iconSize:f,iconColor:V,toggle:ee},"icon")),[i(x,{htmlTag:"input",type:s=="radio"?"radio":"checkbox",className:y("Input"),name:"RadioCheckbox-"+J,"data-list-index":a+"-"+E,id:k,value:String(u),disabled:v||L,checked:w,onFocus:r=>{L||s=="radio"&&(n.rawValue.length||e(p=>d(o({},p),{rawValue:[u],eventType:"update",eventID:D(12),isInspected:!1})))},onChange:()=>{ee()},onKeyDown:r=>{let{key:p,shiftKey:P}=r;if((s=="checkbox"||t.rootStates.isChecker)&&p!="Tab"){if(p.match(/Arrow/)){r.preventDefault();let le=m.isOneOf(p,"ArrowLeft","ArrowUp")?-1:1,g=E+le;g<0?g=R.length-1:g>=R.length&&(g=0),ne(`input[data-list-index="${a}-${g}"]`).focus()}}j&&F.SubmitForm(r,X)},tabIndex:A},"List-"+m.Stringify(u)),i(x,d(o({htmlTag:"label","data-disabled":v||L,htmlFor:k,className:B.join(" "),tabIndex:-1,display:"flex",verticalAlign:"center",flexWrap:!1},S),{children:te}),"ListTrigger-"+m.Stringify(u))]});return i(ae,{flexSizing:"auto",style:l.style,xcss:o({},l.xcss),className:[W,y("CellBase"),y("HideInput_"+U),y("IconIndicator_"+!!c),y("Tone_"+h)].join(" "),children:Z})},IconBase:t=>{let l=18;return t.iconSize=="large"?l=12*2.5:t.iconSize=="xLarge"&&(l=12*3),i(de.Clear,{tabIndex:-1,color:"cloud",ssEffectsOnActive:!1,padding:0,flexCenter:!0,className:y("Icon"),xcss:{borderRadius:t.type=="radio"?"50%":"20%",width:l,aspectRatio:1},onClick:n=>{n.preventDefault(),n.stopPropagation(),t.toggle()},children:t.children})},RadioIcon:t=>i(C.IconBase,d(o({type:"radio"},t),{children:i(x,{flexCenter:!0,isRounded:!0,border:t.isChecked?"0.trans":"3.thick",borderColor:t.isChecked?t.iconColor:"3.thick",position:"relative",transition:"middle",xcss:{width:"100%",height:"100%"},children:i(x,{position:"absolute",transition:"middle",isRounded:!0,backgroundColor:t.iconColor,opacity:t.isChecked?"max":"trans",xcss:{width:"60%",height:"60%",transform:t.isChecked?"scale(1)":"scale(.4)"}})})})),CheckboxIcon:t=>i(C.IconBase,d(o({type:"checkbox"},t),{children:i(x,{flexCenter:!0,boxShadow:t.isChecked?"0.remark":"none",border:t.isChecked?"0.trans":"3.thick",backgroundColor:t.isChecked?t.iconColor:"trans",position:"relative",transition:"middle",fontColor:"white",xcss:{borderRadius:"25%",padding:"4%",width:"100%",height:"100%"},children:i(re.Check,{transition:"middle",opacity:t.isChecked?"max":"trans",ssZIndex:8,xcss:{width:"100%",height:"100%",transform:t.isChecked?"scale(1)":"scale(.5)"}})})}))},M=t=>{t=t||"checkbox";const l=e=>(e=d(o({gap:1,icon:!0,iconSize:"regular",iconType:t=="radio"?"radio":"checkbox",iconPosition:"left",iconColor:"theme"},e),{type:t,cellStyles:o({gap:"1/6",position:"relative",borderRadius:"2.tone.secondary",transition:"middle"},e.cellStyles)}),e.onIconRender||(e=d(o({},e),{onIconRender:e.iconType=="radio"?C.RadioIcon:C.CheckboxIcon})),e.iconSize=="large"?e.cellStyles.gap="1/2":e.iconSize=="xLarge"&&(e.cellStyles.gap="2/3"),e.tone=="normal"?(e.cellStyles=o({padding:["1/4",1],border:"1.thin",backgroundColor:"layer.1"},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme",boxShadow:"1.normal"},e.cellCheckedStyles)):e.tone=="border"?(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.1",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({borderColor:"theme",fontColor:"theme"},e.cellCheckedStyles)):e.tone=="cloud"&&(e.cellStyles=o({border:"1.thin",backgroundColor:"layer.2",padding:["1/2",1,"1/2","1/2"]},e.cellStyles),e.cellCheckedStyles=o({backgroundColor:"cloud",fontColor:"theme"},e.cellCheckedStyles)),e=se(e),e.options=C.InitOptions(e.options),i(ue,{componentId:e.componentId,children:C.OptionalListWrapper,states:e}));return Object.assign(l,{Normal:e=>i(l,o({type:t,tone:"normal",icon:!1},e)),Border:e=>i(l,o({type:t,tone:"border"},e)),Cloud:e=>i(l,o({type:t,tone:"cloud"},e)),Vivid:e=>i(l,o({type:t,tone:"normal",icon:!1,cellCheckedStyles:{backgroundColor:"theme",fontColor:"white"}},e)),Simple:e=>i(l,o({type:t,tone:"plain",icon:!1,cellCheckedStyles:{fontColor:"theme"}},e))})},he=M("radio"),Ce=M("checkbox"),ye=M();export{Ce as Checkbox,ye as List,he as Radio};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import { ReactElement,
|
|
2
|
+
import { ReactElement, Themecolor } from '../../@declares';
|
|
3
3
|
import { InputTypes } from '.';
|
|
4
4
|
declare namespace Slider {
|
|
5
5
|
type Size = 'small' | 'medium' | 'large';
|
|
@@ -12,6 +12,10 @@ declare namespace Slider {
|
|
|
12
12
|
disabled?: boolean;
|
|
13
13
|
value?: number | [number, number];
|
|
14
14
|
color?: Color;
|
|
15
|
+
/**
|
|
16
|
+
* default min
|
|
17
|
+
*/
|
|
18
|
+
trackMin?: number;
|
|
15
19
|
min: number;
|
|
16
20
|
max: number;
|
|
17
21
|
step: number;
|
|
@@ -26,7 +30,7 @@ declare namespace Slider {
|
|
|
26
30
|
};
|
|
27
31
|
}
|
|
28
32
|
type Input = Input.Single | Input.Range;
|
|
29
|
-
type Color =
|
|
33
|
+
type Color = Themecolor | 'theme' | 'posi' | 'nega' | 'warn';
|
|
30
34
|
type LegendsCallback = {
|
|
31
35
|
(value: number): ReactElement;
|
|
32
36
|
};
|
package/dist/fn/Input/Slider.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as
|
|
1
|
+
import{b as d,c as h,d as F,e as P}from"../../chunk-C5N2D3ZX.js";import{Fragment as ee,jsx as m,jsxs as C}from"react/jsx-runtime";import x,{UUID as E}from"jmini";import{useState as W,useEffect as K}from"react";import{$$fromRoot as _,GenerateHTMLProps as $}from"../../@utils";import{Box as b,Flex as q,Column as z}from"../../atoms";import{Literal as O}from"../../mols";import{Button as Y}from"../Button";import{OptionalInputWrapper as G,BoxWrapper as j,CoreEffects as X}from"./core";import{InputSliderClasses as V}from"../../@styles/componentClasses";function Q(e){let{value:n,states:t}=e,{required:o}=t,a=[],[l,r]=x.Arrayify(n);return o&&!l&&!r&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:i})=>i=="invalid").length,notice:a}}const f={getOffsetLeft:e=>{let{trackMin:n,min:t,max:o,value:a}=e,l=(a-(n!=null?n:t))/(o-(n!=null?n:t));return Math.min(l,1)*100},normalize:e=>{let{min:n,max:t,step:o,value:a}=e;a=Math.max(a,n),a=Math.min(a,t);let l=Math.round(a/o)*o;return{value:l,offsetLeft:f.getOffsetLeft(h(d({},e),{value:l}))}},Effects:{Start:(e,n)=>{let t=x.getCursor(e).x,{val_status:o}=n,{componentId:a}=o,l=_("#"+a+"_Bar"),{width:r,left:i}=l.position(),c=(t-i)/r;c=Math.max(c,0),c=Math.min(c,1);let u=c*o.max;x(document).onEvent("mousemove",p=>{f.Effects.Move(p,n,u)},{eventID:"SliderMouseMove",passive:!1}).onEvent("touchmove",p=>{f.Effects.Move(p,n,u)},{eventID:"SliderTouchMove",passive:!1}).onEvent("mouseup",()=>{f.Effects.End()},{eventID:"SliderMouseUp"}).onEvent("touchend",()=>{f.Effects.End()},{eventID:"SliderTouchEnd"})},Move:(e,n,t)=>{var I;let o=x.getCursor(e).x,{val_status:a}=n,{componentId:l}=a,r=_("#"+l+"_Bar"),{width:i,left:c}=r.position(),u=(o-c)/i;u=Math.max(u,0),u=Math.min(u,1);let p=(I=a.trackMin)!=null?I:a.min,v=u*(a.max-p)+p,S=f.normalize(h(d({},a),{value:v})).value,s=Math.round(v-t);return n.onChange(S,s),e.preventDefault(),e.stopPropagation(),!1},End:()=>{x(document).removeEvent(["SliderMouseMove","SliderTouchMove","SliderMouseUp","SliderTouchEnd"])}},Rail:e=>{let{rootStates:n,val_status:t,set_status:o}=e,{componentId:a}=t,l=2;n.size=="small"?l=1.5:n.size=="large"&&(l=2.5);let r=[f.normalize(h(d({},t),{value:t.safeValue[0]})),f.normalize(h(d({},t),{value:t.safeValue[1]||0}))];const i=(c,u)=>{let{min:p,max:v,step:g}=t;c=Math.max(Math.min(c,v),p),o(S=>{let s=d({},S);return s.safeValue[u]==c?s:(s.safeValue[u]=c,t.ranged&&s.safeValue[0]>s.safeValue[1]&&(s.safeValue=[s.safeValue[1],s.safeValue[0]]),h(d({},s),{rawValue:s.ranged?s.safeValue:s.safeValue[0],eventType:"update",eventID:E(12),isInspected:!1}))})};return m(z,{padding:[1,"1/2"],onPointerDown:c=>{e.rootStates.disabled||(c.stopPropagation(),!t.ranged&&f.Effects.Start(c,{val_status:t,onChange:u=>{i(u,0)}}))},children:C(b,{className:V("Bar"),height:0,position:"relative",transition:"middle",flexSizing:"none",id:a+"_Bar",children:[m(b,{position:"absolute",isRounded:!0,backgroundColor:"cloud",xcss:{top:-2*l,left:-2*l,right:-2*l,bottom:-2*l}}),m(f.Range,{rootStates:n,val_status:t,set_status:o,formatData:r,onUpdateValue:i}),m(f.DiscreteScale,{rootStates:n,val_status:t}),m(f.Edge,{focusIndex:0,rootStates:n,val_status:t,set_status:o,formatData:r[0],onUpdateValue:i}),t.ranged&&m(f.Edge,{focusIndex:1,rootStates:n,val_status:t,set_status:o,formatData:r[1],onUpdateValue:i})]})})},DiscreteScale:e=>{let{rootStates:n,val_status:t}=e;if(!n.discreteScale)return null;let{trackMin:o,min:a,max:l,step:r}=t,i=Math.round(a/r),u=Math.round(l/r)-i+1,p=0,v=t.safeValue[0]||0;return t.ranged&&(p=t.safeValue[0]||0,v=t.safeValue[1]||0),m(ee,{children:Array.from({length:u},(g,S)=>S+i).map(g=>{let S=g*r;S=Math.max(S,a),S=Math.min(S,l);let s=f.getOffsetLeft(h(d({},t),{value:S}))+"%",I=x.isInRange(S,p,v);return m(z,{gap:0,position:"absolute",verticalAlign:"center",horizontalAlign:"center",width:0,height:0,transition:"middle",fontColor:"1.clear",xcss:{pointerEvents:"none",top:"50%",left:s,transform:"translateY(-50%)"},children:m(b,{isRounded:!0,backgroundColor:I?"layer.0":"gray",ssSphere:"1/4"})},S)})})},Range:e=>{let{rootStates:n,formatData:t,val_status:o}=e,a=2;return n.size=="small"?a=1.5:n.size=="large"&&(a=2.5),C(b,{className:V("Range"),position:"absolute",transition:"middle",xcss:d({cursor:"pointer",top:"50%",transform:"translateY(-50%)"},o.ranged?{left:t[0].offsetLeft+"%",width:t[1].offsetLeft-t[0].offsetLeft+"%"}:{left:0,width:(t[0].offsetLeft||0)+"%"}),onPointerDown:l=>{if(!e.rootStates.disabled){if(l.stopPropagation(),o.ranged){let[r,i]=o.safeValue;l.stopPropagation(),f.Effects.Start(l,{val_status:o,onChange:(c,u)=>{e.set_status(p=>{let v=p.safeValue,g=d({},p);return g.safeValue=[f.normalize(h(d({},o),{value:r+u})).value,f.normalize(h(d({},o),{value:i+u})).value],g.safeValue[0]==v[0]&&g.safeValue[1]==v[1]?h(d({},p),{eventType:"update",eventID:E(12)}):h(d({},g),{rawValue:g.ranged?g.safeValue:g.safeValue[0],eventType:"update",eventID:E(12),isInspected:!1})})}});return}f.Effects.Start(l,{val_status:o,onChange:r=>{e.onUpdateValue(r,0)}})}},children:[m(b,{className:V("Field"),transition:"middle",position:"absolute",isRounded:!0,backgroundColor:n.color,xcss:{top:-6*a,bottom:-6*a,left:-6*a,right:-6*a}}),m(b,{className:V("Child"),transition:"middle",position:"absolute",isRounded:!0,backgroundColor:n.color,xcss:{pointerEvents:"none",top:-2*a,left:-2*a,right:-2*a,bottom:-2*a}})]})},Edge:e=>{let{formatData:n,rootStates:t,val_status:o,set_status:a}=e,l=2;return t.size=="small"?l=1.5:t.size=="large"&&(l=2.5),C(Y.Plain,{className:V("Edge"),position:"absolute",transition:"middle",height:0,width:0,flexCenter:!0,xcss:{left:n.offsetLeft+"%"},onPointerDown:r=>{e.rootStates.disabled||e.focusIndex==1&&!o.ranged||(r.stopPropagation(),f.Effects.Start(r,{val_status:o,onChange:i=>{e.onUpdateValue(i,e.focusIndex)}}))},onKeyDown:r=>{t.enableFormSubmit&&X.SubmitForm(r,t.form);let{min:i,max:c,step:u}=o,{key:p,metaKey:v,ctrlKey:g}=r,S=g||v,s=o.safeValue[e.focusIndex];if(!p.match(/Arrow/))return;r.preventDefault(),p.match(/Left|Up/)?S?s=i:s-=u:p.match(/Right|Down/)&&(S?s=c:s+=u);let I=f.normalize(h(d({},o),{value:s}));e.onUpdateValue(I.value,e.focusIndex)},onFocus:r=>{a(i=>h(d({},i),{eventID:E(12),isFocusing:!0}))},onBlur:r=>{a(i=>h(d({},i),{eventID:E(12),isFocusing:!1}))},children:[m(b,{className:V("EdgeChild"),transition:"middle",position:"absolute",backgroundColor:t.color,isRounded:!0,opacity:"trans",xcss:{pointerEvents:"all",top:-12*l,bottom:-12*l,left:-12*l,right:-12*l}}),m(b,{transition:"long",boxShadow:"1.remark",fontSize:"0.xs",backgroundColor:!o.ranged||e.focusIndex==1?t.color:"layer.0",ssSphere:l,xcss:{pointerEvents:"all"}})]})},Legends:e=>{var g;let{val_status:n,rootStates:t}=e,{trackMin:o,min:a,max:l,step:r}=n,[i]=W(E()),c=(g=t.legends)!=null?g:!0,u=Math.round(a/r),p=Math.round(l/r),v=p-u+1;return K(()=>{if(!c)return;const S=()=>P(void 0,null,function*(){yield x.pending(100);let s=_("#"+i),I=_("#"+i+"-"+a),T=s.position().width-I.position().left,B=12*4,k=Math.round(T/B),U=Math.max(1,Math.floor(v/k));for(let y=u;y<=p;y++){let D=y*r,A=y==u||y==p||y%U==0;_("#"+i+"-"+D).css({display:A?"flex":"none"})}});return x(window).onEvent("resize",S,{eventID:"SliderResizeCB-"+i}),S(),()=>{x(window).removeEvent("SliderResizeCB-"+i)}},[]),c?C(q,{fontSize:"0.xs",position:"relative",padding:[0,"1/2"],id:i,xcss:{pointerEvents:"none",userSelect:"none"},children:[C(z,{gap:0,unitWidth:0,opacity:"trans",children:[m(b,{unitHeight:"1/2"}),m(O.Supplement,{fontHeight:1.2,children:"A"})]}),Array.from({length:v},(S,s)=>s+u).map(S=>{let s=S*r;s=Math.max(s,a),s=Math.min(s,l);let I=f.getOffsetLeft(h(d({},n),{value:s}))+"%";return C(z,{gap:0,id:i+"-"+s,className:V("Legend"),position:"relative",verticalAlign:"center",unitWidth:0,display:"none",transition:"middle",fontColor:"1.clear",textAlign:"center",xcss:{left:I,whiteSpace:"nowrap"},children:[m(b,{isRounded:!0,backgroundColor:"mono.positive",opacity:"low",unitWidth:"1/12",unitHeight:"1/2"}),m(O.Supplement,{fontHeight:1.2,fontSize:"0.xs",children:t.onLegendRender?t.onLegendRender(s):s.rank()})]},s)})]}):null},index:e=>{let N=e,{color:n="theme",required:t,form:o="",discreteScale:a,size:l,ranged:r,legends:i,onLegendRender:c,trackMin:u,min:p,max:v,step:g,enableFormSubmit:S,showInitValidation:s,onValidate:I,onValidateDelay:T,onUpdateValue:B,onUpdateValidValue:k,onUserAction:U,value:y=0,className:D,wrapStyles:A}=N,J=F(N,["color","required","form","discreteScale","size","ranged","legends","onLegendRender","trackMin","min","max","step","enableFormSubmit","showInitValidation","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","value","className","wrapStyles"]),[L,w]=W({componentId:e.componentId||"",rawValue:y,safeValue:x.Arrayify(y),ranged:!!r,trackMin:Math.min(u!=null?u:p,p),min:p,max:v,step:g,eventType:"init",eventID:E(12)});return X.CommonEffects({type:"slider",states:e,val_status:L,set_status:w,SystemValidation:Q,ExtraOverrideStates:H=>({safeValue:x.Arrayify(H)})}),m(j,{val_status:L,set_status:w,states:e,children:C(z,h(d({gap:0,padding:[0,"1/2"],flexSizing:"auto"},J),{className:[D,V("Wrap")].join(" "),children:[m(f.Rail,{rootStates:e,val_status:L,set_status:w}),m(f.Legends,{rootStates:e,val_status:L})]}))})}},M=e=>{let n=h(d({color:"theme",size:"medium",discreteScale:!0},e),{xcss:d({minWidth:120},e.xcss)});return m(G,{componentId:e.componentId,children:f.index,states:$(n)})},R=M;R.Small=e=>m(M,d({size:"small"},e)),R.Medium=e=>m(M,d({size:"medium"},e)),R.Large=e=>m(M,d({size:"large"},e));const Z=e=>m(M,d({ranged:!0},e));R.Range=Z,R.Range.Small=e=>m(M,d({ranged:!0,size:"small"},e)),R.Range.Medium=e=>m(M,d({ranged:!0,size:"medium"},e)),R.Range.Large=e=>m(M,d({ranged:!0,size:"large"},e));export{R as Slider,R as default};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import {
|
|
2
|
+
import { Themecolor, ReactElement } from '../../@declares';
|
|
3
3
|
import { InputTypes } from '.';
|
|
4
4
|
declare namespace Switch {
|
|
5
5
|
type Size = 'small' | 'regular' | 'large';
|
|
@@ -13,7 +13,7 @@ declare namespace Switch {
|
|
|
13
13
|
value?: boolean;
|
|
14
14
|
icon?: ReactElement;
|
|
15
15
|
};
|
|
16
|
-
type Color =
|
|
16
|
+
type Color = Themecolor | 'theme' | 'posi' | 'nega' | 'warn';
|
|
17
17
|
namespace Methods {
|
|
18
18
|
type Component = React.FC<Input>;
|
|
19
19
|
type FNs = {
|
package/dist/fn/Input/Switch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{b as o,c as s,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as k}from"react/jsx-runtime";import{UUID as
|
|
1
|
+
import{b as o,c as s,d as T}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as k}from"react/jsx-runtime";import{UUID as b}from"jmini";import{useState as E}from"react";import h from"../../atoms/Box";import{Row as L}from"../../mols";import{Label as U}from"../Button";import{OptionalInputWrapper as P,BoxWrapper as W,CoreEffects as B}from"./core";import{InputSwitchClasses as g}from"../../@styles/componentClasses";function A(e){let{value:n,states:l}=e,{required:S}=l,r=[];return S&&!n&&r.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!r.filter(({type:I})=>I=="invalid").length,notice:r}}const O=e=>{let V=e,{componentId:n,color:l="posi",required:S,form:r,id:I,enableFormSubmit:M,showInitValidation:_,onChange:R,onKeyDown:F,onValidate:H,onValidateDelay:q,onUpdateValue:K,onUpdateValidValue:$,onUserAction:j,size:C="regular",value:N="",icon:v="",isApply:p=!1}=V,t=T(V,["componentId","color","required","form","id","enableFormSubmit","showInitValidation","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","size","value","icon","isApply"]),[c,u]=E({componentId:e.componentId||"",rawValue:N,eventType:"init",eventID:b(12)}),d=!!c.rawValue;B.CommonEffects({type:"switch",states:e,val_status:c,set_status:u,SystemValidation:A});let f="middle",x=5,y=3;return p&&(y=4),k(W,{val_status:c,set_status:u,states:e,children:[a(h,s(o({htmlTag:"input",type:"checkbox","data-component-id":c.componentId,checked:c.rawValue,className:g("Input"),id:I,onKeyDown:i=>{F&&F(i),M&&B.SubmitForm(i,r)},onChange:i=>{let{checked:m}=i.target;u(z=>s(o({},z),{rawValue:m,eventType:"update",eventID:b(12),isInspected:!1,isValidated:!1,notice:[]})),R&&R(i)}},t),{onFocus:i=>{t!=null&&t.onFocus&&(t==null||t.onFocus(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!0}))},onBlur:i=>{t!=null&&t.onBlur&&(t==null||t.onBlur(i)),u(m=>s(o({},m),{eventID:b(12),isFocusing:!1}))}})),a(U.Plain,{tabIndex:-1,htmlFor:I,padding:"1/4",transition:f,borderRadius:"1.tone.primary",className:g("Label"),children:a(h,s(o({},p?{padding:"1/4",isRounded:!0,backgroundColor:d?l:"layer.3"}:{}),{children:k(L.Center,{unitHeight:C=="small"?2:C=="regular"?2.5:C=="large"?3:0,position:"relative",xcss:{aspectRatio:(x+y)/x},children:[!p&&a(h,{position:"absolute",backgroundColor:d?l:"layer.5",isRounded:!0,transition:f,width:1,opacity:"middle",className:g("Bar"),xcss:{height:"40%"}}),a(h,{position:"absolute",top:0,backgroundColor:!p&&d?l:"white",transition:f,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:g("Dot"),xcss:{height:"100%",aspectRatio:"1",left:d?`calc(${y.ratio(x+y)}%)`:0},children:v&&a(h,{transition:f,flexCenter:!0,fontColor:d?p?l:"white":"6.clear",children:v})})]})}))})]})},w=e=>{let n=o({},e);return n.value=!!n.value,n.color=n.color||"theme",a(P,{componentId:n.componentId,children:O,states:n})},D=Object.assign(w,{S:e=>a(w,s(o({},e),{size:"small"})),R:e=>a(w,s(o({},e),{size:"regular"})),L:e=>a(w,s(o({},e),{size:"large"}))});export{D as Switch,D as default};
|
package/dist/fn/Input/index.d.ts
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -80,7 +80,7 @@ declare const amotify: {
|
|
|
80
80
|
useUpdateEffect: (effect: () => void | (() => void), deps: any[]) => void;
|
|
81
81
|
pageRouter: utils.pageRouter.Methods;
|
|
82
82
|
ColorObjects: {
|
|
83
|
-
key: utils.
|
|
83
|
+
key: utils.Themecolor;
|
|
84
84
|
isBrand: boolean;
|
|
85
85
|
isAvocado: boolean;
|
|
86
86
|
}[];
|