amotify 0.2.206 → 0.2.208

package/demo/next/src/app/(router)/page.tsx

@@ -108,31 +108,35 @@ let Page = () => {
         <Literal>
           val_value { val_value || "null" }
         </Literal>
-        <input
-          type='text'
-          onChange={ event => {
-            let {
-              value: rawValue,
-              selectionStart,
-              selectionEnd,
-            } = event.target as HTMLInputElement
-            console.log(
-              rawValue,
-              ( event as any ).key
-            )
-          } }
-        />
         <Input.TextField
-          override='force'
+          form='form_test'
+          name='testInput'
+          // override='force'
           value={ val_value }
-          onUpdateValidValue={ value => {
+          required
+          onUserAction={ ( ...args ) => {
             console.log(
-              '[onUpdateValidValue]',value
+              '[onUserAction]',...args
             )
-            set_value( value )
+          } }
+          onUpdateValidValue={ value => {
+            // console.log(
+            //   '[onUpdateValidValue]',value
+            // )
+            // set_value( value )
           } }
         />
       </Box>
+      <Button.Prime
+        submitOption={ {
+          formName: 'form_test',
+          callback: form => {
+            console.log( form )
+          }
+        } }
+      >
+        Submit
+      </Button.Prime>
     </Column>
   </Plate>
 }

package/dist/fn/Button.js

@@ -1 +1 @@
-import{b as s,c as i,d as B,e as z}from"../chunk-C5N2D3ZX.js";import{jsx as p}from"react/jsx-runtime";import L,{UUID as P}from"jmini";import{pageRouter as k,ReadStyleSet as R}from"../@utils";import{Input as E}from".";import{Box as I}from"../atoms";import{ButtonClasses as c}from"../@styles/componentClasses";const x={Size:(l,t,o,n)=>{let e={fontSize:"inherit"};return o=o||"R",t=="plain"?{}:(t=="link"?o=="xsmall"?e.fontSize="0.xs":o=="small"?e.fontSize="1.mini":o=="regular"||o=="large"&&(e.fontSize="3.paragraph"):e=s({borderRadius:"2.tone.secondary",transition:"middle",position:"relative",textAlign:"center"},e),o=="xsmall"?e=i(s({},e),{padding:["1/3","2/3"],fontSize:"0.xs",borderRadius:"3.tone.tertiary"}):o=="small"?e=i(s({},e),{padding:["1/2","3/4"],fontSize:"1.mini",borderRadius:"3.tone.tertiary"}):o=="regular"?e.padding=["3/4",1]:o=="large"&&(e.padding=[1,2],e.fontSize="3.paragraph",e.isSemiBoldFont=!0),e)},Tone:(l,t,o,n)=>{let e={display:"inlineBlock",fontWeight:"inherit",fontColor:"inherit",border:"unset"};return t=="plain"||(t=="link"?(e.fontColor="theme",e.textAlign="left",e.backgroundColor="trans"):t=="normal"?e=i(s({},e),{backgroundColor:"trans"}):t=="border"?e=i(s({},e),{backgroundColor:"layer.1",border:"2.normal",borderStyle:"solid",boxShadow:"0.min"}):t=="prime"?(e=i(s({},e),{isSemiBoldFont:!0,fontColor:"white",backgroundColor:n,boxShadow:"0.normal",ssEffectsOnActive:["shrink","push","ripple.white"]}),n=="white"&&(e=i(s({},e),{fontColor:"theme",ssEffectsOnActive:["shrink","push","ripple.cloud"]}))):t=="sub"?e=i(s({},e),{fontColor:n,ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="clear"?e=i(s({},e),{fontColor:n,backgroundColor:"trans",ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="fillToBorder"?e=i(s({},e),{boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,fontColor:n,backgroundColor:n}):t=="borderToFill"&&(e=i(s({},e),{fontColor:n,boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,backgroundColor:n})),n=="cloud"&&(e.fontColor="2.normal"),t!="link"&&(e=s({position:"relative",ssEffectsOnActive:["shrink","push"]},e))),e}},F=l=>{let t=R(s({isLocked:!1,isActive:!1,isActiveStyles:{},isActiveClassName:"",tabIndex:0,className:"",color:"theme",tone:"border","aria-label":P()},l)),o=t.seed;{let{isLocked:y=!1,isActive:m=!1,isActiveStyles:h={},isActiveClassName:C="",tone:r="border",size:u="regular",color:a="theme",className:T=""}=t;t=s(s(s({},x.Size(l.seed,r,u,a)),x.Tone(l.seed,r,u,a)),t),t.className=[T,c("Wrap"),c("isNeutral_"+!m),c("isLocked_"+y),c("Tone_"+r),c("Color_"+a),c("Tone_"+r+"_Color_"+a)].join(" "),m&&(t=s(s({className:[t.className,C].join(" ")},t),h))}if(o=="button"){let n=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,submitOption:r,onClick:u}=n,a=B(n,["isLocked","isActive","isActiveClassName","isActiveStyles","submitOption","onClick"]);return r&&(r=s({acceptInvalidForm:!1,submitDelegationKey:"auxEnter"},r),a=i(s({},a),{"data-form-submit-button":r.formName,"data-sdfike":L.flatArray(r.submitDelegationKey).join(",")})),p(I,i(s({htmlTag:"button",fontHeight:"inherit"},a),{onClick:T=>z(void 0,null,function*(){if(y||(u&&u(T),!r))return;let S=yield E.CollectForm(r.formName);!r.acceptInvalidForm&&!S.valid||r.callback(S.data,S.valid)})}))}else if(o=="label"){let e=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r}=e,u=B(e,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick"]);return p(I,i(s({htmlTag:"label"},u),{onClick:a=>{y||r&&r(a)}}))}else if(o=="anchor"){let M=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r,href:u="",newTab:a,sync:T,shiftQueryParams:S}=M,A=B(M,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick","href","newTab","sync","shiftQueryParams"]);return p(I,i(s({htmlTag:"button"},A),{onClick:f=>{if(y)return;if(r)return r(f);let v=f.ctrlKey||f.metaKey,N=a||!!v,b=u;if(S&&(b+=location.search),T){k.pushSync(b);return}k.push(b,!!N)}}))}return null},d=function(l,t){const o=e=>p(F,s({seed:l,tone:t,size:"regular"},e)),n=o;return n.Plain=e=>p(o,s({size:"plain",tone:t},e)),n.XS=e=>p(o,s({size:"xsmall",tone:t},e)),n.S=e=>p(o,s({size:"small",tone:t},e)),n.R=e=>p(o,s({size:"regular",tone:t},e)),n.L=e=>p(o,s({size:"large",tone:t},e)),n},g=function(l){const o=n=>p(F,s({seed:l,tone:"prime",size:"regular"},n));return o.Plain=d(l,"plain"),o.Link=d(l,"link"),o.Normal=d(l,"normal"),o.Border=d(l,"border"),o.Prime=d(l,"prime"),o.Sub=d(l,"sub"),o.Clear=d(l,"clear"),o.FillToBorder=d(l,"fillToBorder"),o.BorderToFill=d(l,"borderToFill"),o},w=g("button"),H=g("label"),K=g("anchor");export{K as Anchor,w as Button,H as Label};
+import{b as s,c as i,d as B,e as z}from"../chunk-C5N2D3ZX.js";import{jsx as p}from"react/jsx-runtime";import L,{UUID as P}from"jmini";import{pageRouter as k,ReadStyleSet as R}from"../@utils";import{Input as E}from".";import{Box as I}from"../atoms";import{ButtonClasses as c}from"../@styles/componentClasses";const x={Size:(l,t,o,n)=>{let e={fontSize:"inherit"};return o=o||"R",t=="plain"?{}:(t=="link"?o=="xsmall"?e.fontSize="0.xs":o=="small"?e.fontSize="1.mini":o=="regular"||o=="large"&&(e.fontSize="3.paragraph"):e=s({borderRadius:"2.tone.secondary",transition:"middle",position:"relative",textAlign:"center"},e),o=="xsmall"?e=i(s({},e),{padding:["1/3","2/3"],fontSize:"0.xs",borderRadius:"3.tone.tertiary"}):o=="small"?e=i(s({},e),{padding:["1/2","3/4"],fontSize:"1.mini",borderRadius:"3.tone.tertiary"}):o=="regular"?e.padding=["3/4",1]:o=="large"&&(e.padding=[1,2],e.fontSize="3.paragraph",e.isSemiBoldFont=!0),e)},Tone:(l,t,o,n)=>{let e={display:"inlineBlock",fontWeight:"inherit",fontColor:"inherit",border:"unset"};return t=="plain"||(t=="link"?(e.fontColor="theme",e.textAlign="left",e.backgroundColor="trans"):t=="normal"?e=i(s({},e),{backgroundColor:"trans"}):t=="border"?e=i(s({},e),{backgroundColor:"layer.1",border:"2.normal",borderStyle:"solid",boxShadow:"0.min"}):t=="prime"?(e=i(s({},e),{isSemiBoldFont:!0,fontColor:"white",backgroundColor:n,boxShadow:"0.normal",ssEffectsOnActive:["shrink","push","ripple.white"]}),n=="white"&&(e=i(s({},e),{fontColor:"theme",ssEffectsOnActive:["shrink","push","ripple.cloud"]}))):t=="sub"?e=i(s({},e),{fontColor:n,ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="clear"?e=i(s({},e),{fontColor:n,backgroundColor:"trans",ssEffectsOnActive:["shrink","ripple.cloud"]}):t=="fillToBorder"?e=i(s({},e),{boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,fontColor:n,backgroundColor:n}):t=="borderToFill"&&(e=i(s({},e),{fontColor:n,boxShadow:"0.normal",border:"2.normal",borderWidth:2,borderColor:n,backgroundColor:n})),n=="cloud"&&(e.fontColor="2.normal"),t!="link"&&(e=s({position:"relative",ssEffectsOnActive:["shrink","push"]},e))),e}},F=l=>{let t=R(s({isLocked:!1,isActive:!1,isActiveStyles:{},isActiveClassName:"",tabIndex:0,className:"",color:"theme",tone:"border","aria-label":P()},l)),o=t.seed;{let{isLocked:y=!1,isActive:m=!1,isActiveStyles:h={},isActiveClassName:C="",tone:r="border",size:u="regular",color:a="theme",className:T=""}=t;t=s(s(s({},x.Size(l.seed,r,u,a)),x.Tone(l.seed,r,u,a)),t),t.className=[T,c("Wrap"),c("isNeutral_"+!m),c("isLocked_"+y),c("Tone_"+r),c("Color_"+a),c("Tone_"+r+"_Color_"+a)].join(" "),m&&(t=s(s({className:[t.className,C].join(" ")},t),h))}if(o=="button"){let n=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,submitOption:r,onClick:u}=n,a=B(n,["isLocked","isActive","isActiveClassName","isActiveStyles","submitOption","onClick"]);return r&&(r=s({acceptInvalidForm:!1,submitDelegationKey:"auxEnter"},r),a=i(s({},a),{"data-form-submit-button":r.formName,"data-sdfike":L.flatArray(r.submitDelegationKey).join(",")})),p(I,i(s({htmlTag:"button",fontHeight:"inherit"},a),{onClick:T=>z(void 0,null,function*(){if(y||(u&&u(T),!r))return;let S=yield E.CollectForm(r.formName);!S.valid&&!r.acceptInvalidForm||r.callback(S.data,S.valid)})}))}else if(o=="label"){let e=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r}=e,u=B(e,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick"]);return p(I,i(s({htmlTag:"label"},u),{onClick:a=>{y||r&&r(a)}}))}else if(o=="anchor"){let M=t,{isLocked:y,isActive:m,isActiveClassName:h,isActiveStyles:C,onClick:r,href:u="",newTab:a,sync:T,shiftQueryParams:S}=M,A=B(M,["isLocked","isActive","isActiveClassName","isActiveStyles","onClick","href","newTab","sync","shiftQueryParams"]);return p(I,i(s({htmlTag:"button"},A),{onClick:f=>{if(y)return;if(r)return r(f);let v=f.ctrlKey||f.metaKey,N=a||!!v,b=u;if(S&&(b+=location.search),T){k.pushSync(b);return}k.push(b,!!N)}}))}return null},d=function(l,t){const o=e=>p(F,s({seed:l,tone:t,size:"regular"},e)),n=o;return n.Plain=e=>p(o,s({size:"plain",tone:t},e)),n.XS=e=>p(o,s({size:"xsmall",tone:t},e)),n.S=e=>p(o,s({size:"small",tone:t},e)),n.R=e=>p(o,s({size:"regular",tone:t},e)),n.L=e=>p(o,s({size:"large",tone:t},e)),n},g=function(l){const o=n=>p(F,s({seed:l,tone:"prime",size:"regular"},n));return o.Plain=d(l,"plain"),o.Link=d(l,"link"),o.Normal=d(l,"normal"),o.Border=d(l,"border"),o.Prime=d(l,"prime"),o.Sub=d(l,"sub"),o.Clear=d(l,"clear"),o.FillToBorder=d(l,"fillToBorder"),o.BorderToFill=d(l,"borderToFill"),o},w=g("button"),H=g("label"),K=g("anchor");export{K as Anchor,w as Button,H as Label};

package/dist/fn/Input/CollectForm.js

@@ -1 +1 @@
-import{e as n}from"../../chunk-C5N2D3ZX.js";import p,{useStore as e}from"jmini";const c=t=>n(void 0,null,function*(){let s=1,l={};return yield p.scope(()=>n(void 0,null,function*(){if(e.get("form-process-"+t))return;e.set({["form-process-"+t]:!0});let i=document.activeElement;i&&i.blur();{let o=e.get(["form-data",t].join("-"));if(!o){e.set({["form-process-"+t]:!1});return}for(let[m,a]of Object.entries(o)){if(!a)continue;let r=e.get(a.componentId);r&&r.Refresh&&(yield r.Refresh())}}{let o=e.get(["form-data",t].join("-"));if(!o){e.set({["form-process-"+t]:!1});return}for(let[m,a]of Object.entries(o))a&&(s&=Number(a.validation),l[m]=a.value)}e.set({["form-process-"+t]:!1})})),{valid:!!s,data:l}});export{c as CollectForm,c as default};
+import{e as l}from"../../chunk-C5N2D3ZX.js";import m,{useStore as o}from"jmini";const p=e=>l(void 0,null,function*(){let a=0,s={};return yield m.scope(()=>l(void 0,null,function*(){if(o.get("form-process-"+e)){console.log("currently processing form",e);return}a=1,o.set({["form-process-"+e]:!0});let i=document.activeElement;i&&i.blur();let r=o.get(["form-data",e].join("-"));if(!r){o.set({["form-process-"+e]:!1});return}for(let[c,t]of Object.entries(r)){if(!t)continue;let n=o.get(t.componentId);n&&n.Refresh&&(yield n.Refresh())}for(let[c,t]of Object.entries(r))t&&(a&=Number(t.validation),s[c]=t.value);o.set({["form-process-"+e]:!1})})),{valid:!!a,data:s}});export{p as CollectForm,p as default};

package/dist/fn/Input/Switch.js

@@ -1 +1 @@
-import{b as a,c as i,d as V}from"../../chunk-C5N2D3ZX.js";import{jsx as t,jsxs as U}from"react/jsx-runtime";import{UUID as k}from"jmini";import{useState as D}from"react";import c from"../../atoms/Box";import{Row as L}from"../../mols";import{Label as A}from"../Button";import{OptionalInputWrapper as W,BoxWrapper as P,CoreEffects as B}from"./core";import{InputSwitchClasses as f}from"../../@styles/componentClasses";function H(e){let{value:o,states:n}=e,{required:b}=n,s=[];return b&&!o&&s.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!s.filter(({type:m})=>m=="invalid").length,notice:s}}const O=e=>{let T=e,{componentId:o,color:n="posi",required:b,form:s,id:m,enableFormSubmit:M,checkValidationAtFirst:q,onChange:R,onKeyDown:w,onValidate:K,onValidateDelay:$,onUpdateValue:G,onUpdateValidValue:J,onUserAction:Q,size:C="regular",value:_="",icon:x="",isApply:l=!1}=T,N=V(T,["componentId","color","required","form","id","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","size","value","icon","isApply"]),[r,S]=D({componentId:e.componentId||"",dataValue:_,eventType:"init",eventID:k()}),[v,F]=D({ok:!1,notice:[]}),p=!!r.dataValue;B.CommonEffects({type:"switch",states:e,val_status:r,set_status:S,val_validate:v,set_validate:F,SystemValidation:H});let h="middle",g=5,I=3;return l&&(I=4),U(P,{val_status:r,set_status:S,val_validate:v,states:e,children:[t(c,a({htmlTag:"input",type:"checkbox","data-component-id":r.componentId,checked:r.dataValue,className:f("Input"),id:m,onKeyDown:u=>{w&&w(u),M&&B.SubmitForm(u,s)},onChange:u=>{let{checked:z}=u.target;v.ok&&F({ok:!1,notice:[]}),S(E=>i(a({},E),{dataValue:z,eventType:"update",eventID:k()})),R&&R(u)}},N)),t(A.Plain,{tabIndex:-1,htmlFor:m,padding:"1/4",transition:h,borderRadius:"1.tone.primary",className:f("Label"),children:t(c,i(a({},l?{padding:"1/4",isRounded:!0,backgroundColor:p?n:"layer.3"}:{}),{children:U(L.Center,{unitHeight:C=="small"?2:C=="regular"?2.5:C=="large"?3:0,position:"relative",freeCSS:{aspectRatio:(g+I)/g},children:[!l&&t(c,{position:"absolute",backgroundColor:p?n:"layer.5",isRounded:!0,transition:h,width:1,opacity:"middle",className:f("Bar"),freeCSS:{height:"40%"}}),t(c,{position:"absolute",top:0,backgroundColor:!l&&p?n:"white",transition:h,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:f("Dot"),freeCSS:{height:"100%",aspectRatio:"1",left:p?`calc(${I.ratio(g+I)}%)`:0},children:x&&t(c,{transition:h,flexCenter:!0,fontColor:p?l?n:"white":"6.clear",children:x})})]})}))})]})},y=e=>{let o=a({},e);return o.value=!!o.value,o.color=o.color||"theme",t(W,{componentId:o.componentId,children:O,states:o})},d=y;d.S=e=>t(y,i(a({},e),{size:"small"})),d.R=e=>t(y,i(a({},e),{size:"regular"})),d.L=e=>t(y,i(a({},e),{size:"large"}));export{d as Switch,d as default};
+import{b as o,c as l,d as D}from"../../chunk-C5N2D3ZX.js";import{jsx as a,jsxs as z}from"react/jsx-runtime";import{UUID as S}from"jmini";import{useState as M}from"react";import I from"../../atoms/Box";import{Row as U}from"../../mols";import{Label as A}from"../Button";import{OptionalInputWrapper as W,BoxWrapper as P,CoreEffects as N}from"./core";import{InputSwitchClasses as g}from"../../@styles/componentClasses";function H(e){let{value:n,states:s}=e,{required:x}=s,r=[];return x&&!n&&r.push({type:"invalid",label:"ON\u306B\u306A\u3063\u3066\u3044\u307E\u305B\u3093"}),{ok:!r.filter(({type:f})=>f=="invalid").length,notice:r}}const O=e=>{let B=e,{componentId:n,color:s="posi",required:x,form:r,id:f,enableFormSubmit:E,checkValidationAtFirst:q,onChange:F,onKeyDown:T,onValidate:K,onValidateDelay:$,onUpdateValue:G,onUpdateValidValue:J,onUserAction:Q,size:R="regular",value:L="",icon:V="",isApply:p=!1}=B,t=D(B,["componentId","color","required","form","id","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onValidateDelay","onUpdateValue","onUpdateValidValue","onUserAction","size","value","icon","isApply"]),[u,c]=M({componentId:e.componentId||"",dataValue:L,eventType:"init",eventID:S()}),[v,k]=M({ok:!1,notice:[]}),d=!!u.dataValue;N.CommonEffects({type:"switch",states:e,val_status:u,set_status:c,val_validate:v,set_validate:k,SystemValidation:H});let y="middle",w=5,C=3;return p&&(C=4),z(P,{val_status:u,set_status:c,val_validate:v,states:e,children:[a(I,l(o({htmlTag:"input",type:"checkbox","data-component-id":u.componentId,checked:u.dataValue,className:g("Input"),id:f,onKeyDown:i=>{T&&T(i),E&&N.SubmitForm(i,r)},onChange:i=>{let{checked:m}=i.target;v.ok&&k({ok:!1,notice:[]}),c(_=>l(o({},_),{dataValue:m,eventType:"update",eventID:S()})),F&&F(i)}},t),{onFocus:i=>{t!=null&&t.onFocus&&(t==null||t.onFocus(i)),c(m=>l(o({},m),{eventID:S(),isFocusing:!0}))},onBlur:i=>{t!=null&&t.onBlur&&(t==null||t.onBlur(i)),c(m=>l(o({},m),{eventID:S(),isFocusing:!1}))}})),a(A.Plain,{tabIndex:-1,htmlFor:f,padding:"1/4",transition:y,borderRadius:"1.tone.primary",className:g("Label"),children:a(I,l(o({},p?{padding:"1/4",isRounded:!0,backgroundColor:d?s:"layer.3"}:{}),{children:z(U.Center,{unitHeight:R=="small"?2:R=="regular"?2.5:R=="large"?3:0,position:"relative",freeCSS:{aspectRatio:(w+C)/w},children:[!p&&a(I,{position:"absolute",backgroundColor:d?s:"layer.5",isRounded:!0,transition:y,width:1,opacity:"middle",className:g("Bar"),freeCSS:{height:"40%"}}),a(I,{position:"absolute",top:0,backgroundColor:!p&&d?s:"white",transition:y,isRounded:!0,flexCenter:!0,boxShadow:"1.remark",className:g("Dot"),freeCSS:{height:"100%",aspectRatio:"1",left:d?`calc(${C.ratio(w+C)}%)`:0},children:V&&a(I,{transition:y,flexCenter:!0,fontColor:d?p?s:"white":"6.clear",children:V})})]})}))})]})},b=e=>{let n=o({},e);return n.value=!!n.value,n.color=n.color||"theme",a(W,{componentId:n.componentId,children:O,states:n})},h=b;h.S=e=>a(b,l(o({},e),{size:"small"})),h.R=e=>a(b,l(o({},e),{size:"regular"})),h.L=e=>a(b,l(o({},e),{size:"large"}));export{h as Switch,h as default};

package/dist/fn/Input/core.js

@@ -1 +1 @@
-import{b as o,c as d,e as b}from"../../chunk-C5N2D3ZX.js";import{jsx as f,jsxs as V}from"react/jsx-runtime";import{useState as k,useEffect as g}from"react";import p,{UUID as y,useStore as v}from"jmini";import{$$fromRoot as D}from"../../@utils";import{InputClasses as _}from"../../@styles/componentClasses";import{Box as B,Flex as E,FAI as h,Column as N}from"../../atoms";import{Row as x,Literal as w}from"../../mols";import{Button as F}from"../Button";import R from"../Tooltips";const et=t=>{let[n]=k(t.componentId||y());t=o({},t),t.states=d(o({enableFormSubmit:!0,status_id:y(),override:"never",form:"",id:y(),"aria-label":"Input-"+n},t.states),{componentId:n});let{children:e}=t;return f(e,o({},t.states))},at=t=>{let{children:n,val_status:e,val_validate:a,states:i}=t,{leftIcon:l,wrapStyles:u}=i;return i.checkValidationAtFirst||e.eventType=="init"&&(a.notice=[]),V(x.Center,d(o({position:"relative",verticalAlign:"unset",gap:0},u),{className:_("Wrapper"),"data-notice-uid":e.componentId,children:[f(T.Notice,{notice:a.notice,val_status:e}),i.leftIndicator,V(E,{position:"relative",flexSizing:"auto",children:[n,l,f(T.RightIcon,o({},t)),f(T.ClearButton,o({},t))]}),i.rightIndicator]}))},T={ClearButton:t=>!t.states.clearButton||!t.val_status.dataValue?null:f(F.Normal,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3,transform:"translateY(-50%)"},onClick:()=>{t.set_status(n=>d(o({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:y()}))},children:f(h.X,{})}),RightIcon:t=>t.states.clearButton&&t.val_status.dataValue?null:t.states.rightIcon,Notice:t=>{let{notice:n,val_status:e}=t,{componentId:a}=e,i="NoticeTimer-"+a,l="NoticeTimerClose-"+a,u="notice-tips-"+a;return g(()=>{p.interval.once(()=>{if(!n.length){R.close(u);return}R.open({tipsID:u,parent:`[data-notice-uid="${a}"]`,gravityPoint:24,padding:[1,0],closeAtParentBlur:!1,content:V(R.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[f(B,{position:"absolute",unitHeight:1,unitWidth:1,right:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),f(N,{backgroundColor:"inherit",gap:"1/3",position:"relative",freeCSS:{zIndex:2},children:n.map((I,S)=>{let{type:r,label:s}=I,m=r=="invalid"?h.Exclamation:r=="warn"?h.Exclamation:h.Check;return V(x.Left,{gap:0,borderRadius:"2.tone.secondary",children:[f(m,{flexCenter:!0,fontSize:"2.normal",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[r]}),f(w.Supplement,{fontSize:"0.xs",fontColor:"white",children:s})]},S+"-"+p.Stringify(I))})})]})})},350,i),p.interval.once(()=>{R.close(u)},6e3,l)},[n]),null}},A={DefaultStatus:(t,n)=>({componentId:t,dataValue:n,eventType:"init",eventID:y()}),CommonEffects:function(t){let{type:n,states:e,val_status:a,set_status:i,val_validate:l,set_validate:u,SystemValidation:I}=t;e=o({},e);let{componentId:S}=a;g(()=>(v.update({[S]:{ResolveRefresh:null,Refresh:()=>new Promise((r,s)=>{v.get(S).ResolveRefresh=r,i(m=>d(o({},m),{eventType:"refresh",eventID:y()}))}),GenNotice:r=>{let{ok:s,notice:m}=r;u({ok:s,notice:m})}}}),()=>{v.delete(S)}),[]),p.scope(()=>{let{override:r}=e;if(r=="never"||r=="beforeModified"&&!["init","override"].includes(a.eventType)||a.isComposing)return;let s=v.get(a.componentId);if(s){if(e.value==a.dataValue){s.status_id=e.status_id;return}e.status_id!=s.status_id&&i(m=>d(o(d(o({},m),{dataValue:e.value}),t.ExtraOverrideStates&&t.ExtraOverrideStates()),{eventType:"override",eventID:y()}))}}),g(()=>{A.ValidationCheck({val_status:a,set_validate:u,SystemValidation:I,states:e})},[a.eventID,a.dataValue]),g(()=>(p.scope(()=>{let{componentId:r,eventType:s,dataValue:m}=a,c=m;if(n=="autocomplete.single"||n=="list.radio"?c=c[0]:e.isChecker&&(c=!!c[0]),e.form=e.form||"testForm",e.name&&e.form&&v.update({[["form-data",e.form].join("-")]:{[e.name]:{componentId:r,type:n,value:c,validation:l.ok}}}),e.onUserAction&&e.onUserAction(c,{eventType:s,componentId:r,isValidated:!!l.ok,isComposing:!!a.isComposing,isFocusing:!!a.isFocusing}),s=="refresh"){let C=v.get(r);C&&C.ResolveRefresh&&C.ResolveRefresh(null)}else s=="update"&&(e.onUpdateValue&&e.onUpdateValue(c,s,r),p.scope(()=>{e.onUpdateValidValue&&l.ok&&e.onUpdateValidValue(c,s,r)}))}),()=>{v.update({[["form-data",e.form].join("-")]:{[e.name]:null}})}),[l])},ValidationCheck:t=>{let{states:n}=t,e="ValidationTimer-"+t.val_status.componentId;p.interval.abort(e);let a=t.SystemValidation({value:t.val_status.dataValue,states:n});if(!a.ok){t.set_validate(a);return}let i=a.notice;const l=()=>b(void 0,null,function*(){if(!n.onValidate)return;let u=yield n.onValidate(t.val_status.dataValue,t.val_status.eventType,t);t.set_validate({ok:u.ok,notice:[...i,...u.notice]})});if(n.onValidate){if(t.val_status.eventType=="refresh"){l();return}p.interval.once(l,n.onValidateDelay||500,e);return}t.set_validate({ok:!0,notice:i})},SubmitForm:(t,n)=>{let e=!1;if(!n)return e;let a=D(`[data-form-submit-button="${n}"]`)[0];if(!a)return e;let i=a.dataset.sdfike||"",l=t.key,u=t.ctrlKey||t.metaKey;return p.scope(()=>{i.includes("enter")&&(l!="Enter"||t.nativeEvent.isComposing||(t==null?void 0:t.keyCode)==229)||((l=="Enter"&&(i.includes("enter")||i.includes("auxEnter")&&u)||l==" "&&i.includes("space"))&&(a.click(),t.preventDefault()),e=!0)}),e},isShowValidation:(t,n,e)=>{let a=t.ok;return!e&&n.eventType=="init"?!0:a}},nt=function(t){t=o({tone:"border"},t);let n=p.scope(()=>{if(t.tone=="plain")return{};let a={padding:1,transition:"middle",flexSizing:"auto",boxShadow:"0.min"};return t.tone=="border"?a=d(o({},a),{border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"}):t.tone=="cloud"?a=d(o({},a),{border:"1.thin",borderRadius:"2.tone.secondary",backgroundColor:"cloud"}):t.tone=="bottomBorder"&&(a=d(o({},a),{borderRadius:0,border:"unset",borderBottom:!0,backgroundColor:"cloud"})),a});return d(o(o(o(o(o(o({fontColor:"2.normal"},n),!!t.rightIcon&&{paddingRight:3}),!!t.leftIcon&&{paddingLeft:3}),!!t.leftIndicator&&{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3",marginLeft:"1/4"}),!!t.rightIndicator&&{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3",marginRight:"1/4"}),t),{freeCSS:o({letterSpacing:"1px",resize:"none"},t.freeCSS),className:[_("Input"),t.className].join(" ")})};export{at as BoxWrapper,A as CoreEffects,nt as DefaultBoxishStyles,et as OptionalInputWrapper};
+import{b as i,c as p,e as b}from"../../chunk-C5N2D3ZX.js";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useState as x,useEffect as S}from"react";import f,{UUID as y,useStore as v}from"jmini";import{$$fromRoot as D}from"../../@utils";import{InputClasses as _}from"../../@styles/componentClasses";import{Box as B,Flex as E,FAI as V,Column as F}from"../../atoms";import{Row as k,Literal as N}from"../../mols";import{Button as w}from"../Button";import C from"../Tooltips";const et=t=>{let[n]=x(t.componentId||y());t=i({},t),t.states=p(i({enableFormSubmit:!0,status_id:y(),override:"never",form:"",id:y(),"aria-label":"Input-"+n},t.states),{componentId:n});let{children:e}=t;return m(e,i({},t.states))},at=t=>{let{children:n,val_status:e,val_validate:a,states:r}=t,{leftIcon:o,wrapStyles:d}=r;return r.checkValidationAtFirst||e.eventType=="init"&&(a.notice=[]),h(k.Center,p(i({position:"relative",verticalAlign:"unset",gap:0},d),{className:_("Wrapper"),"data-notice-uid":e.componentId,children:[m(T.Notice,{notice:a.notice,val_status:e}),r.leftIndicator,h(E,{position:"relative",flexSizing:"auto",children:[n,o,m(T.RightIcon,i({},t)),m(T.ClearButton,i({},t))]}),r.rightIndicator]}))},T={ClearButton:t=>!t.states.clearButton||!t.val_status.dataValue?null:m(w.Normal,{ssSphere:2,flexCenter:!0,fontColor:"5.translucent",ssEffectsOnActive:["ripple.theme"],position:"absolute",right:1,top:"50%",freeCSS:{zIndex:3,transform:"translateY(-50%)"},onClick:()=>{t.set_status(n=>p(i({},n),{dataValue:"",formatValue:"",eventType:"update",eventID:y()}))},children:m(V.X,{})}),RightIcon:t=>t.states.clearButton&&t.val_status.dataValue?null:t.states.rightIcon,Notice:t=>{let{notice:n,val_status:e}=t,{componentId:a}=e,r="NoticeTimer-"+a,o="NoticeTimerClose-"+a,d="notice-tips-"+a;return S(()=>{f.interval.once(()=>{if(!n.length){C.close(d);return}C.open({tipsID:d,parent:`[data-notice-uid="${a}"]`,gravityPoint:24,padding:[1,0],closeAtParentBlur:!1,content:h(C.Body,{padding:["1/2","2/3"],fontSize:"1.mini",position:"relative",children:[m(B,{position:"absolute",unitHeight:1,unitWidth:1,right:1,backgroundColor:"dark",freeCSS:{zIndex:1,transform:"rotate(45deg)",top:-6}}),m(F,{backgroundColor:"inherit",gap:"1/3",position:"relative",freeCSS:{zIndex:2},children:n.map((I,g)=>{let{type:s,label:u}=I,c=s=="invalid"?V.Exclamation:s=="warn"?V.Exclamation:V.Check;return h(k.Left,{gap:0,borderRadius:"2.tone.secondary",children:[m(c,{flexCenter:!0,fontSize:"2.normal",fontColor:{invalid:"nega",warn:"warn",valid:"posi"}[s]}),m(N.Supplement,{fontSize:"0.xs",fontColor:"white",children:u})]},g+"-"+f.Stringify(I))})})]})})},350,r),f.interval.once(()=>{C.close(d)},6e3,o)},[n]),null}},A={DefaultStatus:(t,n)=>({componentId:t,dataValue:n,eventType:"init",eventID:y()}),CommonEffects:function(t){let{type:n,states:e,val_status:a,set_status:r,val_validate:o,set_validate:d,SystemValidation:I}=t;e=i({},e);let{componentId:g}=a;S(()=>(v.update({[g]:{ResolveRefresh:null,Refresh:()=>new Promise((s,u)=>{v.get(g).ResolveRefresh=s,r(c=>p(i({},c),{eventType:"refresh",eventID:y()}))}),GenNotice:s=>{let{ok:u,notice:c}=s;d({ok:u,notice:c})}}}),()=>{v.delete(g)}),[]),f.scope(()=>{let{override:s}=e;if(s=="never"||s=="beforeModified"&&!["init","override"].includes(a.eventType)||a.isComposing)return;let u=v.get(a.componentId);if(u){if(e.value==a.dataValue){u.status_id=e.status_id;return}e.status_id!=u.status_id&&r(c=>p(i(p(i({},c),{dataValue:e.value}),t.ExtraOverrideStates&&t.ExtraOverrideStates()),{eventType:"override",eventID:y()}))}}),S(()=>{A.ValidationCheck({val_status:a,set_validate:d,SystemValidation:I,states:e})},[a.eventID,a.dataValue]),S(()=>{let{componentId:s,eventType:u,dataValue:c}=a,l=c;if(n=="autocomplete.single"||n=="list.radio"?l=l[0]:e.isChecker&&(l=!!l[0]),e.form=e.form||"testForm",e.name&&e.form&&v.update({[["form-data",e.form].join("-")]:{[e.name]:{componentId:s,type:n,value:l,validation:o.ok}}}),e.onUserAction&&e.onUserAction(l,{eventType:u,componentId:s,isValidated:!!o.ok,isComposing:!!a.isComposing,isFocusing:!!a.isFocusing}),u=="refresh"){let R=v.get(s);R&&R.ResolveRefresh&&R.ResolveRefresh(null)}return()=>{v.update({[["form-data",e.form].join("-")]:{[e.name]:null}})}},[a,o]),S(()=>{f.scope(()=>{let{componentId:s,eventType:u,dataValue:c}=a,l=c;n=="autocomplete.single"||n=="list.radio"?l=l[0]:e.isChecker&&(l=!!l[0]),u=="update"&&(e.onUpdateValue&&e.onUpdateValue(l,{eventType:u,componentId:s,isValidated:!!o.ok,isComposing:!!a.isComposing,isFocusing:!!a.isFocusing}),f.scope(()=>{e.onUpdateValidValue&&o.ok&&e.onUpdateValidValue(l,{eventType:u,componentId:s,isValidated:!!o.ok,isComposing:!!a.isComposing,isFocusing:!!a.isFocusing})}))})},[o.ok,a.dataValue])},ValidationCheck:t=>{let{states:n}=t,e="ValidationTimer-"+t.val_status.componentId;f.interval.abort(e);let a=t.SystemValidation({value:t.val_status.dataValue,states:n});if(!a.ok){t.set_validate(a);return}let r=a.notice;const o=()=>b(void 0,null,function*(){if(!n.onValidate)return;let d=yield n.onValidate(t.val_status.dataValue,t.val_status.eventType,t);t.set_validate({ok:d.ok,notice:[...r,...d.notice]})});if(n.onValidate){if(t.val_status.eventType=="refresh"){o();return}f.interval.once(o,n.onValidateDelay||500,e);return}t.set_validate({ok:!0,notice:r})},SubmitForm:(t,n)=>{let e=!1;if(!n)return e;let a=D(`[data-form-submit-button="${n}"]`)[0];if(!a)return e;let r=a.dataset.sdfike||"",o=t.key,d=t.ctrlKey||t.metaKey;return f.scope(()=>{r.includes("enter")&&(o!="Enter"||t.nativeEvent.isComposing||(t==null?void 0:t.keyCode)==229)||((o=="Enter"&&(r.includes("enter")||r.includes("auxEnter")&&d)||o==" "&&r.includes("space"))&&(a.click(),t.preventDefault()),e=!0)}),e},isShowValidation:(t,n,e)=>{let a=t.ok;return!e&&n.eventType=="init"?!0:a}},nt=function(t){t=i({tone:"border"},t);let n=f.scope(()=>{if(t.tone=="plain")return{};let a={padding:1,transition:"middle",flexSizing:"auto",boxShadow:"0.min"};return t.tone=="border"?a=p(i({},a),{border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"}):t.tone=="cloud"?a=p(i({},a),{border:"1.thin",borderRadius:"2.tone.secondary",backgroundColor:"cloud"}):t.tone=="bottomBorder"&&(a=p(i({},a),{borderRadius:0,border:"unset",borderBottom:!0,backgroundColor:"cloud"})),a});return p(i(i(i(i(i(i({fontColor:"2.normal"},n),!!t.rightIcon&&{paddingRight:3}),!!t.leftIcon&&{paddingLeft:3}),!!t.leftIndicator&&{borderTopLeftRadius:"2/3",borderBottomLeftRadius:"2/3",marginLeft:"1/4"}),!!t.rightIndicator&&{borderTopRightRadius:"2/3",borderBottomRightRadius:"2/3",marginRight:"1/4"}),t),{freeCSS:i({letterSpacing:"1px",resize:"none"},t.freeCSS),className:[_("Input"),t.className].join(" ")})};export{at as BoxWrapper,A as CoreEffects,nt as DefaultBoxishStyles,et as OptionalInputWrapper};

package/dist/fn/Input/index.d.ts

@@ -3,7 +3,13 @@ import { ReactElement, StyleTags } from '../../@declares';
 export declare namespace InputTypes {
     type BoxTone = 'border' | 'cloud' | 'bottomBorder' | 'plain';
     type Type = 'hidden' | 'textfield' | 'textfield.multiline' | 'select' | 'list.radio' | 'list.checkbox' | 'autocomplete.single' | 'autocomplete.multi' | 'time' | 'switch' | 'slider' | 'file' | 'contenteditable' | 'color' | '';
-    type OnUpdateValue<T = any> = (value: T, eventType: Validation.EventType, componentId: string) => void;
+    type OnUpdateValue<T = any> = (value: T, option: {
+        eventType?: Validation.EventType;
+        componentId?: string;
+        isValidated?: boolean;
+        isComposing?: boolean;
+        isFocusing?: boolean;
+    }) => void;
     type OnUserAction<T = any> = (value: T, option: {
         eventType?: Validation.EventType;
         componentId?: string;

package/dist/fn/Input/index.js

@@ -1 +1 @@
-import"../../chunk-C5N2D3ZX.js";import*as t from"./Parts";export*from"./Parts";import i from"./Plain";import a from"./Hidden";import p from"./TextField";import m from"./Contenteditable";import n from"./DigitCharacters";import l from"./Time";import d from"./Select";import s from"./Autocomplete";import*as r from"./List";import c from"./Search";import x from"./Filer";import y from"./Slider";import T from"./Switch";import f from"./Checker";import g from"./Segmented";import S from"./Color";import b from"./CollectForm";var o;(e=>(e.Plain=i,e.Hidden=a,e.TextField=p,e.Contenteditable=m,e.DigitCharacters=n,e.Time=l,e.Select=d,e.Autocomplete=s,e.List=r.List,e.Radio=r.Radio,e.Checkbox=r.Checkbox,e.Checker=f,e.Search=c,e.Filer=x,e.Slider=y,e.Switch=T,e.Segmented=g,e.Color=S,e.LeftIcon=t.LeftIcon,e.RightIcon=t.RightIcon,e.LeftIndicator=t.LeftIndicator,e.RightIndicator=t.RightIndicator,e.RequiredSign=t.RequiredSign,e.RequiredShortSign=t.RequiredShortSign,e.OmitSign=t.OmitSign,e.CollectForm=b))(o||(o={}));export{o as Input,o as default};
+import"../../chunk-C5N2D3ZX.js";import*as t from"./Parts";export*from"./Parts";import i from"./Plain";import a from"./Hidden";import p from"./TextField";import m from"./Contenteditable";import n from"./DigitCharacters";import l from"./Time";import d from"./Select";import s from"./Autocomplete";import*as r from"./List";import c from"./Search";import x from"./Filer";import y from"./Slider";import T from"./Switch";import f from"./Checker";import g from"./Segmented";import b from"./Color";import S from"./CollectForm";var o;(e=>(e.Plain=i,e.Hidden=a,e.TextField=p,e.Contenteditable=m,e.DigitCharacters=n,e.Time=l,e.Select=d,e.Autocomplete=s,e.List=r.List,e.Radio=r.Radio,e.Checkbox=r.Checkbox,e.Checker=f,e.Search=c,e.Filer=x,e.Slider=y,e.Switch=T,e.Segmented=g,e.Color=b,e.LeftIcon=t.LeftIcon,e.RightIcon=t.RightIcon,e.LeftIndicator=t.LeftIndicator,e.RightIndicator=t.RightIndicator,e.RequiredSign=t.RequiredSign,e.RequiredShortSign=t.RequiredShortSign,e.OmitSign=t.OmitSign,e.CollectForm=S))(o||(o={}));export{o as Input,o as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.2.206",
+  "version": "0.2.208",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",