amotify 0.1.6 → 0.1.8

package/dist/fn/Effect/Pudding.js

@@ -0,0 +1,2 @@
+import{$$ as t}from"@utils";import{EffectClasses as e}from"@styles/componentClasses/_";new class{constructor(){this.UserEvent()}UserEvent(){t(document).addEvent({eventType:"click",target:".eff_pudding",callback:function(a){t(a.target).removeClass(e("PuddingEffect")).await(1).addClass(e("PuddingEffect")).await(510).removeClass(e("PuddingEffect"))}})}};
+//# sourceMappingURL=Pudding.js.map

package/dist/fn/Effect/Pudding.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Effect/Pudding.tsx"],
+  "sourcesContent": ["import { $$ } from '@utils'\n\nimport { EffectClasses } from '@styles/componentClasses/_'\n\nnew class {\n  constructor() {\n    this.UserEvent()\n  }\n  UserEvent() {\n    $$( document ).addEvent( {\n      eventType: 'click',\n      target: '.eff_pudding',\n      callback: function ( event ) {\n        // Pudding\n        $$( event.target )\n          .removeClass( EffectClasses( 'PuddingEffect' ) )\n          .await( 1 )\n          .addClass( EffectClasses( 'PuddingEffect' ) )\n          .await( 510 )\n          .removeClass( EffectClasses( 'PuddingEffect' ) )\n      }\n    } )\n  }\n}"],
+  "mappings": "AAAA,OAAS,MAAAA,MAAU,SAEnB,OAAS,iBAAAC,MAAqB,6BAE9B,IAAI,KAAM,CACR,aAAc,CACZ,KAAK,UAAU,CACjB,CACA,WAAY,CACVD,EAAI,QAAS,EAAE,SAAU,CACvB,UAAW,QACX,OAAQ,eACR,SAAU,SAAWE,EAAQ,CAE3BF,EAAIE,EAAM,MAAO,EACd,YAAaD,EAAe,eAAgB,CAAE,EAC9C,MAAO,CAAE,EACT,SAAUA,EAAe,eAAgB,CAAE,EAC3C,MAAO,GAAI,EACX,YAAaA,EAAe,eAAgB,CAAE,CACnD,CACF,CAAE,CACJ,CACF",
+  "names": ["$$", "EffectClasses", "event"]
+}

package/dist/fn/Effect/Ripple.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/fn/Effect/Ripple.js

@@ -0,0 +1,4 @@
+import{$$ as e,Config as M}from"@utils";import{EffectClasses as i}from"@styles/componentClasses/_";new class{constructor(){this.UserEvent()}UserEvent(){let u="eff_ripple";const f=t=>{let l=e.Time().ms,p=t.target,s=e(p);if(!s[0])return;let o=s.findClass(/^eff_ripple-/)[0];if(!o)return;let r=o.split("-")[1],n="RippleWrap-"+e.uuid.gen(),{left:c,top:v,height:b,width:E}=s.position(),{pageXOffset:h,pageYOffset:R}=e.getScreenSize(),{x:T,y:g}=e.getCursor(t),d=Math.min(E*1.5,300),y=Math.max(T-(c+h),0),C=Math.max(g-(v+R),0),m={RippleElement:s,startedAt:l,size:d};e(document).addEvent({eventID:"RippleMouseUp",eventType:"mouseup",callback:()=>{a(m)}}).addEvent({eventID:"RippleTouchEnd",eventType:"touchend",callback:()=>{setTimeout(()=>{a(m)},20)}}),e(s).addClass([i("RippleElement"),i("Color_"+r)]).append(`<div class="${i("RippleWrap")}" id="${n}">
+  <div class="${i("Wave")}" />
+</div>`).addEvent({eventID:"RippleMouseOut",eventType:"mouseout",callback:I=>{a(m)}}).find("#"+n).find("."+i("Wave")).css({left:y,top:C}).await(10).css({height:d,width:d,opacity:".3",transition:".25s"})},a=t=>{let{RippleElement:l,startedAt:p,size:s}=t,r=e.Time().ms-p<=400?".75s":".55s",n=s*2.5;e(document).removeEvent(["RippleMouseUp","RippleTouchMove","RippleTouchEnd","RippleMouseOut"]),l.removeEvent(["RippleMouseOut"]).find("."+i("Wave")).css({height:n,width:n,opacity:"0",transition:r}).await(750).parent().callback(c=>{c.remove()})};e(document).addEvent({eventType:"touchstart",target:"."+u,callback:t=>{f(t)}}).addEvent({eventType:"mousedown",target:"."+u,callback:t=>{M.get().isTouchDevice||f(t)}})}};
+//# sourceMappingURL=Ripple.js.map

package/dist/fn/Effect/Ripple.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Effect/Ripple.tsx"],
+  "sourcesContent": ["import {\n  $$,\n  Config\n} from '@utils'\n\ntype Info = {\n  RippleElement: $$.Chains\n  startedAt: number\n  size: number\n}\n\nimport { EffectClasses } from '@styles/componentClasses/_'\n\nnew class {\n  constructor() {\n    this.UserEvent()\n  }\n  UserEvent() {\n    let RippleElementClassName = 'eff_ripple'\n    const EffectStart = ( event: Event ) => {\n      let startedAt = $$.Time().ms\n      let target: HTMLElement = event.target as any\n\n      let RippleElement = $$( target )\n      if ( !RippleElement[ 0 ] ) return\n      let Classname = RippleElement.findClass( /^eff_ripple-/ )[ 0 ]\n      if ( !Classname ) return\n      let Color = Classname.split( '-' )[ 1 ]\n\n      let\n        ID = 'RippleWrap-' + $$.uuid.gen(),\n        {\n          left,\n          top,\n          height,\n          width\n        } = RippleElement.position(),\n        {\n          pageXOffset,\n          pageYOffset\n        } = $$.getScreenSize(),\n        {\n          x: cursorX,\n          y: cursorY\n        } = $$.getCursor( event ),\n        size = Math.min( width * 1.5,300 ),\n        x = Math.max( cursorX - ( left + pageXOffset ),0 ),\n        y = Math.max( cursorY - ( top + pageYOffset ),0 )\n\n      let effectInfo: Info = {\n        RippleElement,\n        startedAt,\n        size\n      }\n\n      $$( document ).addEvent( {\n        eventID: 'RippleMouseUp',\n        eventType: 'mouseup',\n        callback: () => {\n          EffectEnd( effectInfo )\n        }\n      } ).addEvent( {\n        eventID: 'RippleTouchEnd',\n        eventType: 'touchend',\n        callback: () => {\n          setTimeout( () => {\n            EffectEnd( effectInfo )\n          },20 )\n        }\n      } )\n\n      $$( RippleElement )\n        .addClass( [\n          EffectClasses( 'RippleElement' ),\n          EffectClasses( 'Color_' + Color )\n        ] )\n        .append( `<div class=\"${ EffectClasses( 'RippleWrap' ) }\" id=\"${ ID }\">\n  <div class=\"${ EffectClasses( 'Wave' ) }\" />\n</div>` )\n        .addEvent( {\n          eventID: 'RippleMouseOut',\n          eventType: 'mouseout',\n          callback: ( event ) => {\n            EffectEnd( effectInfo )\n          }\n        } )\n        .find( '#' + ID )\n        .find( '.' + EffectClasses( 'Wave' ) )\n        .css( { left: x,top: y } )\n        .await( 10 )\n        .css( {\n          height: size,\n          width: size,\n          opacity: '.3',\n          transition: '.25s'\n        } )\n    }\n    const EffectEnd = ( effectInfo: Info ) => {\n      let {\n        RippleElement,\n        startedAt,\n        size\n      } = effectInfo\n\n      let processTime = $$.Time().ms - startedAt\n      let transition = processTime <= 400 ? '.75s' : '.55s'\n      let diameter = size * 2.5\n\n      $$( document ).removeEvent( [\n        'RippleMouseUp',\n        'RippleTouchMove',\n        'RippleTouchEnd',\n        'RippleMouseOut'\n      ] )\n\n      RippleElement\n        .removeEvent( [ 'RippleMouseOut' ] )\n        .find( '.' + EffectClasses( 'Wave' ) )\n        .css( {\n          height: diameter,\n          width: diameter,\n          opacity: '0',\n          transition: transition\n        } )\n        .await( 750 )\n        .parent()\n        .callback( ( Parent ) => {\n          Parent.remove()\n        } )\n    }\n\n    $$( document )\n      .addEvent( {\n        eventType: 'touchstart',\n        target: '.' + RippleElementClassName,\n        callback: ( event ) => {\n          EffectStart( event )\n        }\n      } )\n      .addEvent( {\n        eventType: 'mousedown',\n        target: '.' + RippleElementClassName,\n        callback: ( event ) => {\n          if ( Config.get().isTouchDevice ) return\n          EffectStart( event )\n        }\n      } )\n  }\n}"],
+  "mappings": "AAAA,OACE,MAAAA,EACA,UAAAC,MACK,SAQP,OAAS,iBAAAC,MAAqB,6BAE9B,IAAI,KAAM,CACR,aAAc,CACZ,KAAK,UAAU,CACjB,CACA,WAAY,CACV,IAAIC,EAAyB,aAC7B,MAAMC,EAAgBC,GAAkB,CACtC,IAAIC,EAAYN,EAAG,KAAK,EAAE,GACtBO,EAAsBF,EAAM,OAE5BG,EAAgBR,EAAIO,CAAO,EAC/B,GAAK,CAACC,EAAe,CAAE,EAAI,OAC3B,IAAIC,EAAYD,EAAc,UAAW,cAAe,EAAG,CAAE,EAC7D,GAAK,CAACC,EAAY,OAClB,IAAIC,EAAQD,EAAU,MAAO,GAAI,EAAG,CAAE,EAGpCE,EAAK,cAAgBX,EAAG,KAAK,IAAI,EACjC,CACE,KAAAY,EACA,IAAAC,EACA,OAAAC,EACA,MAAAC,CACF,EAAIP,EAAc,SAAS,EAC3B,CACE,YAAAQ,EACA,YAAAC,CACF,EAAIjB,EAAG,cAAc,EACrB,CACE,EAAGkB,EACH,EAAGC,CACL,EAAInB,EAAG,UAAWK,CAAM,EACxBe,EAAO,KAAK,IAAKL,EAAQ,IAAI,GAAI,EACjCM,EAAI,KAAK,IAAKH,GAAYN,EAAOI,GAAc,CAAE,EACjDM,EAAI,KAAK,IAAKH,GAAYN,EAAMI,GAAc,CAAE,EAE9CM,EAAmB,CACrB,cAAAf,EACA,UAAAF,EACA,KAAAc,CACF,EAEApB,EAAI,QAAS,EAAE,SAAU,CACvB,QAAS,gBACT,UAAW,UACX,SAAU,IAAM,CACdwB,EAAWD,CAAW,CACxB,CACF,CAAE,EAAE,SAAU,CACZ,QAAS,iBACT,UAAW,WACX,SAAU,IAAM,CACd,WAAY,IAAM,CAChBC,EAAWD,CAAW,CACxB,EAAE,EAAG,CACP,CACF,CAAE,EAEFvB,EAAIQ,CAAc,EACf,SAAU,CACTN,EAAe,eAAgB,EAC/BA,EAAe,SAAWQ,CAAM,CAClC,CAAE,EACD,OAAQ,eAAgBR,EAAe,YAAa,CAAE,SAAUS,CAAG;AAAA,gBAC3DT,EAAe,MAAO,CAAE;AAAA,OACjC,EACC,SAAU,CACT,QAAS,iBACT,UAAW,WACX,SAAYG,GAAW,CACrBmB,EAAWD,CAAW,CACxB,CACF,CAAE,EACD,KAAM,IAAMZ,CAAG,EACf,KAAM,IAAMT,EAAe,MAAO,CAAE,EACpC,IAAK,CAAE,KAAMmB,EAAE,IAAKC,CAAE,CAAE,EACxB,MAAO,EAAG,EACV,IAAK,CACJ,OAAQF,EACR,MAAOA,EACP,QAAS,KACT,WAAY,MACd,CAAE,CACN,EACMI,EAAcD,GAAsB,CACxC,GAAI,CACF,cAAAf,EACA,UAAAF,EACA,KAAAc,CACF,EAAIG,EAGAE,EADczB,EAAG,KAAK,EAAE,GAAKM,GACD,IAAM,OAAS,OAC3CoB,EAAWN,EAAO,IAEtBpB,EAAI,QAAS,EAAE,YAAa,CAC1B,gBACA,kBACA,iBACA,gBACF,CAAE,EAEFQ,EACG,YAAa,CAAE,gBAAiB,CAAE,EAClC,KAAM,IAAMN,EAAe,MAAO,CAAE,EACpC,IAAK,CACJ,OAAQwB,EACR,MAAOA,EACP,QAAS,IACT,WAAYD,CACd,CAAE,EACD,MAAO,GAAI,EACX,OAAO,EACP,SAAYE,GAAY,CACvBA,EAAO,OAAO,CAChB,CAAE,CACN,EAEA3B,EAAI,QAAS,EACV,SAAU,CACT,UAAW,aACX,OAAQ,IAAMG,EACd,SAAYE,GAAW,CACrBD,EAAaC,CAAM,CACrB,CACF,CAAE,EACD,SAAU,CACT,UAAW,YACX,OAAQ,IAAMF,EACd,SAAYE,GAAW,CAChBJ,EAAO,IAAI,EAAE,eAClBG,EAAaC,CAAM,CACrB,CACF,CAAE,CACN,CACF",
+  "names": ["$$", "Config", "EffectClasses", "RippleElementClassName", "EffectStart", "event", "startedAt", "target", "RippleElement", "Classname", "Color", "ID", "left", "top", "height", "width", "pageXOffset", "pageYOffset", "cursorX", "cursorY", "size", "x", "y", "effectInfo", "EffectEnd", "transition", "diameter", "Parent"]
+}

package/dist/fn/Effect/_.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FadeIn, FadeUp } from './Fade';
+import './Pudding';
+import './Ripple';
+declare const Effect: {
+    FadeIn: import("react").FC<FadeIn.Input>;
+    FadeUp: import("react").FC<FadeUp.Input>;
+};
+export { Effect, Effect as default };

package/dist/fn/Effect/_.js

@@ -0,0 +1,2 @@
+import"../../chunk-E3D4DIO4.js";import{FadeIn as o,FadeUp as e}from"./Fade";import"./Pudding";import"./Ripple";const t={FadeIn:o,FadeUp:e};export{t as Effect,t as default};
+//# sourceMappingURL=_.js.map

package/dist/fn/Effect/_.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Effect/_.tsx"],
+  "sourcesContent": ["import { FadeIn,FadeUp } from './Fade'\nimport './Pudding'\nimport './Ripple'\n\nconst Effect = {\n  FadeIn,\n  FadeUp\n}\n\nexport {\n  Effect,\n  Effect as default\n}"],
+  "mappings": "gCAAA,OAAS,UAAAA,EAAO,UAAAC,MAAc,SAC9B,MAAO,YACP,MAAO,WAEP,MAAMC,EAAS,CACb,OAAAF,EACA,OAAAC,CACF",
+  "names": ["FadeIn", "FadeUp", "Effect"]
+}

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

@@ -0,0 +1,17 @@
+import { TagProperty, ReactElement } from '../../@declaration/_';
+import { InputTypes } from './_';
+declare namespace Checker {
+    type Input = InputTypes.CoreInput & {
+        label: ReactElement;
+        id?: string;
+        tabIndex?: number;
+        disabled?: boolean;
+        value?: boolean;
+        cellStyles?: TagProperty.Params;
+        cellClassName?: string;
+        cellCheckedStyles?: TagProperty.Params;
+        cellCheckedClassName?: string;
+    };
+}
+declare const Checker: (params: Checker.Input) => import("react/jsx-runtime").JSX.Element;
+export { Checker, Checker as default };

package/dist/fn/Input/Checker.js

@@ -0,0 +1,2 @@
+import{b as l,c as t}from"../../chunk-E3D4DIO4.js";import{jsx as u}from"react/jsx-runtime";import c from"./List";const n=e=>(e=l({},e),u(c.Plain,t(l({},e),{tone:"plain",icon:!0,type:"checker",iconType:"checkbox",value:e.value?!0:null,cellStyles:l({padding:0},e.cellStyles),options:[{value:!0,label:e.label}],onUpdateValidValue:a=>{let o=!!a.value[0];e.onUpdateValidValue&&e.onUpdateValidValue(t(l({},a),{value:o}))}})));export{n as Checker,n as default};
+//# sourceMappingURL=Checker.js.map

package/dist/fn/Input/Checker.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Input/Checker.tsx"],
+  "sourcesContent": ["import {\n  TagProperty,\n  ReactElement\n} from '@declaration'\n\nimport {\n  InputTypes\n} from './_'\n\nimport List from './List'\n\nnamespace Checker {\n  export type Input = InputTypes.CoreInput & {\n    label: ReactElement\n\n    id?: string\n    tabIndex?: number\n\n    disabled?: boolean\n    value?: boolean\n\n\n    cellStyles?: TagProperty.Params\n    cellClassName?: string\n    cellCheckedStyles?: TagProperty.Params\n    cellCheckedClassName?: string\n  }\n}\n\nconst Checker = ( params: Checker.Input ) => {\n  params = { ...params }\n  return <List.Plain\n    { ...params }\n    tone='plain'\n    icon\n    type='checker'\n    iconType='checkbox'\n    value={ params.value ? true : null }\n    cellStyles={ {\n      padding: 0,\n      ...params.cellStyles\n    } }\n    options={ [\n      { value: true,label: params.label }\n    ] }\n    onUpdateValidValue={ ( args ) => {\n      let Value = !!args.value[ 0 ]\n      if ( params.onUpdateValidValue )\n        params.onUpdateValidValue( {\n          ...args,\n          value: Value\n        } )\n    } }\n  />\n}\n\nexport {\n  Checker,\n  Checker as default\n}"],
+  "mappings": "mDA+BS,cAAAA,MAAA,oBAtBT,OAAOC,MAAU,SAoBjB,MAAMC,EAAYC,IAChBA,EAASC,EAAA,GAAKD,GACPH,EAACC,EAAK,MAALI,EAAAD,EAAA,GACDD,GADC,CAEN,KAAK,QACL,KAAI,GACJ,KAAK,UACL,SAAS,WACT,MAAQA,EAAO,MAAQ,GAAO,KAC9B,WAAaC,EAAA,CACX,QAAS,GACND,EAAO,YAEZ,QAAU,CACR,CAAE,MAAO,GAAK,MAAOA,EAAO,KAAM,CACpC,EACA,mBAAuBG,GAAU,CAC/B,IAAIC,EAAQ,CAAC,CAACD,EAAK,MAAO,CAAE,EACvBH,EAAO,oBACVA,EAAO,mBAAoBE,EAAAD,EAAA,GACtBE,GADsB,CAEzB,MAAOC,CACT,EAAE,CACN,GACF",
+  "names": ["jsx", "List", "Checker", "params", "__spreadValues", "__spreadProps", "args", "Value"]
+}

package/dist/fn/Input/Chips/Selector.d.ts

@@ -0,0 +1,44 @@
+import { ReactElement } from '../../../@declaration/_';
+import { $$ } from '../../../@utils/_';
+import { Types } from './_';
+declare namespace Selector {
+    type Input = {
+        selectorID: string;
+        bottomContent: ReactElement;
+        options: Types.ChipsOptions[];
+        limit?: number;
+        selected: Types.ChipsOptions[];
+        SelectorCellComponent: Types.SelectorCellComponentInput;
+        onUpdated(params: {
+            values: any[];
+        }): void;
+        onDynamicSearch?: Types.onDynamicSearch;
+    };
+    type OpenSelectorInput = {
+        parent: $$.Args;
+        selectorID: string;
+        options: Types.ChipsOptions[];
+        selected: Types.ChipsOptions[];
+        bottomContent?: ReactElement;
+        gravityPoint?: number;
+        limit?: number;
+        onDynamicSearch?: {
+            (k: string): Promise<{
+                options: Types.ChipsOptions[];
+            }>;
+        };
+        onUpdated(params: {
+            values: any[];
+        }): void;
+        onClosed(): void;
+        SelectorCellComponent?: Types.SelectorCellComponentInput;
+    };
+    type Methods = {
+        openSelector(params: OpenSelectorInput): void;
+        closeSelector(selectorID: string): void;
+        updateOptions(selectorID: string, options: Types.ChipsOptions[]): void;
+        updateSelected(selectorID: string, selected: Types.ChipsOptions[]): void;
+    };
+}
+declare const Selector: Selector.Methods;
+export { Selector, Selector as default };

package/dist/fn/Input/Chips/Selector.js

@@ -0,0 +1,2 @@
+import{b as B,c as k,d as $,e as L}from"../../../chunk-E3D4DIO4.js";import{Fragment as j,jsx as n,jsxs as y}from"react/jsx-runtime";import{useState as O,useEffect as A,useRef as K}from"react";import{$$ as S,Config as P,useStore as U}from"@utils";import F from"@atoms/Box";import z from"@atoms/FAI";import M from"@atoms/Span";import H from"@mols/Column";import b from"@mols/Row";import V from"@fn/Button";import E from"@fn/Sheet";import G from"@fn/Loader/_";import Q from"../Text";import X from"../Parts";import{InputChipsClasses as Y}from"@styles/componentClasses/_";const Z=e=>{let[g,r]=O("show"),[C,N]=O(""),[f]=O(S.uuid.gen()),[l,I]=O(e.options),[o,v]=O(l[0]||null),[h,x]=O(e.selected),[D,R]=O("init");A(()=>{U.set({key:e.selectorID,value:{updateOptions:t=>{I(t)},updateSelected:t=>{x(t)}}})},[]);const T=K(!1);A(()=>{T.current?E.reposition(e.selectorID):T.current=!0},[l]);const W=K(!1);A(()=>{W.current?(r("interlude"),v(l[0]||null),e.onDynamicSearch?(S.interval.clear(f+"-dynamicSearch"),S.interval.standBy(f+"-dynamicSearch",400,()=>L(void 0,null,function*(){let{options:t}=yield e.onDynamicSearch(C);I(t),r("show")}))):(S.interval.clear(f+"-staticSearch"),S.interval.standBy(f+"-staticSearch",400,()=>L(void 0,null,function*(){let t=new RegExp(C,"ig"),p=[];[...e.options].forEach(a=>{var c;!!(!C||((c=String(a.label))!=null?c:String(a.value)).match(t))&&p.push(a)}),I(p),r("show")})))):W.current=!0},[C]);const _=K(!1);A(()=>{_.current?e.onUpdated({values:h}):_.current=!0},[h]),A(()=>{S.scope(()=>{if(S.is.nullish(o)||D=="MouseEvent")return;let t=S(P.get().appRoot).find("#"+f+"-Selector-Cell-Wrap");if(!t[0])return;let p=S(P.get().appRoot).find('[data-chips-selector-cell="'+f+"-"+JSON.stringify((o==null?void 0:o.value)||"").replace(/\"/ig,"")+'"]');if(!p[0])return;let{top:a,height:w}=t.position(),{top:c,height:d}=p.position();if(a<=c&&c+d<=a+w)return;let i=t[0].scrollTop+(c-a);D=="ArrowDown"?i-=w-d-20:D=="ArrowUp"&&(i-=20),t[0].scrollTop=i})},[o]);let J=[];return g=="interlude"?J=[y(b.Center,{padding:2,gap:0,children:[n(G.Theme.R,{showInitial:!0}),n(F,{padding:[0,1],fontSize:"1.mini",fontColor:"4.thin",children:"\u691C\u7D22\u4E2D..."})]})]:J=[l.map((t,p)=>{let{value:a,label:w}=t,c=String(JSON.stringify(a)),d=h.findIndex(m=>JSON.stringify(m.value)==c),i=d!=-1,s=JSON.stringify((o==null?void 0:o.value)||"")==c,u={};return(i||s)&&(u={fontColor:"theme",isSemiBoldFont:!0}),s&&(u=k(B({},u),{backgroundColor:"cloud",paddingLeft:"2/3"})),i&&(u=k(B({},u),{backgroundColor:"tcOpFew"})),n(V.Button.Clear.R,k(B({color:"cloud",padding:"1/3",tabIndex:-1,textAlign:"left","data-chips-selector-cell":f+"-"+c.replace(/\"/ig,""),isActive:i||s,isActiveStyles:u},u),{onMouseOver:()=>{R("MouseEvent"),v(t)},onClick:()=>{let m=[...h];i?m.splice(d,1):(m=[...m,t],e.limit&&m.length>e.limit&&m.shift()),x(m)},children:n(e.SelectorCellComponent,{isSelected:i,isFocused:s,value:a,label:w})}),p)})],y(j,{children:[y(H,{padding:"2/3",gap:"2/3",borderBottom:!0,children:[y(b.Separate,{children:[n(Q.Normal,{value:C,onUpdateValidValue:({value:t})=>{N(t)},id:e.selectorID+"-KeywordInput",padding:"2/3",placeholder:"\u691C\u7D22...",leftIcon:n(X.LeftIcon,{right:"2/3",fontSize:"1.mini",fontColor:"3.blur",children:n(z.Search,{})}),onKeyDown:t=>{let{key:p,metaKey:a,ctrlKey:w}=t,c=a||w;if(["ArrowDown","ArrowUp"].includes(p)){let d=+(p=="ArrowDown")*2-1;if(c){let i=l[d==1?l.length-1:0];v(i)}else{let i=l.findIndex(s=>JSON.stringify(s.value)==JSON.stringify((o==null?void 0:o.value)||""))+d;l[i]?v(l[i]):v(l[d==1?0:l.length-1]||null)}}else if(p=="Enter"){let d=h.findIndex(u=>JSON.stringify(u.value)==JSON.stringify((o==null?void 0:o.value)||"")),i=d!=-1,s=[...h];if(i)s.splice(d,1);else{let u=l.findIndex(m=>JSON.stringify(m.value)==JSON.stringify((o==null?void 0:o.value)||""));if(u==-1)return;s=[...s,l[u]],e.limit&&s.length>e.limit&&s.shift()}x(s)}R(p)}}),n(V.Button.Border.S,{marginRight:"1/3",ssSphere:2,backgroundColor:"cloud",borderRadius:"2.tone.secondary",onClick:()=>{E.close(e.selectorID)},children:n(z.Times,{})})]}),y(b.Separate,{children:[y(b.Left,{gap:"1/2",verticalAlign:"baseline",children:[n(M,{fontColor:"theme",children:l.length}),n(F,{fontSize:"1.mini",fontColor:"3.blur",children:"\u4EF6\u306E\u30D2\u30C3\u30C8"})]}),n(b.Right,{children:e.limit?y(M,{fontColor:"3.blur",fontSize:"1.mini",children:[n(M,{fontSize:"3.paragraph",fontColor:"theme",isSemiBoldFont:!0,children:h.length})," / ",e.limit," \u4EF6"]}):null})]})]}),n(H,{gap:"1/4",padding:"1/2",overflow:"auto",freeCSS:{maxHeight:12*26,maxWidth:12*26},id:f+"-Selector-Cell-Wrap",className:Y("SelectorWrapper"),children:J}),e.bottomContent]})},q={openSelector:e=>{let R=e,{selectorID:g,options:r,selected:C,limit:N,bottomContent:f,onDynamicSearch:l,SelectorCellComponent:I,onUpdated:o,onClosed:v,parent:h}=R,x=$(R,["selectorID","options","selected","limit","bottomContent","onDynamicSearch","SelectorCellComponent","onUpdated","onClosed","parent"]),D=g;I=I||(T=>y(b.Left,{children:[n(z.CheckCircle,{fontColor:T.isSelected?"theme":"6.clear"}),T.label]})),E.open(k(B({parent:h,sheetID:D,type:"custom",gravityPoint:22,padding:[1,0],hold_state:!0,close_option:{aroundClick:!0,escapeKeyDown:!0}},x),{content:n(F,{borderRadius:"2.tone.secondary",backgroundColor:"1.layer.base",border:!0,boxShadow:"1.normal",overflow:"hidden",children:n(Z,{selectorID:g,options:r,limit:N,selected:C,onUpdated:o,SelectorCellComponent:I,bottomContent:f,onDynamicSearch:l})}),openAfter:()=>{S(P.get().appRoot).find("#"+e.selectorID+"-KeywordInput").focus()},closeAfter:()=>{v()}}))},closeSelector:e=>{E.close(e)},updateOptions:(e,g)=>{let r=U.get(e);r&&r.updateOptions&&r.updateOptions(g)},updateSelected:(e,g)=>{let r=U.get(e);r&&r.updateSelected&&r.updateSelected(g)}};export{q as Selector,q as default};
+//# sourceMappingURL=Selector.js.map

package/dist/fn/Input/Chips/Selector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/fn/Input/Chips/Selector.tsx"],
+  "sourcesContent": ["import {\n  TagProperty,\n  ReactElement,\n} from '@declaration'\nimport {\n  useState,\n  useEffect,\n  useRef\n} from 'react'\nimport {\n  $$,\n  Config,\n  useStore,\n} from '@utils'\n\nimport Box from '@atoms/Box'\nimport FAI from '@atoms/FAI'\nimport Span from '@atoms/Span'\nimport Column from '@mols/Column'\nimport Row from '@mols/Row'\nimport Button from '@fn/Button'\nimport Sheet from '@fn/Sheet'\nimport Loader from '@fn/Loader/_'\n\nimport {\n  Types\n} from './_'\n\nimport Text from '../Text'\nimport Parts from '../Parts'\n\nimport { InputChipsClasses } from '@styles/componentClasses/_'\n\n\nnamespace Selector {\n  export type Input = {\n    selectorID: string\n    bottomContent: ReactElement\n    options: Types.ChipsOptions[]\n    limit?: number\n    selected: Types.ChipsOptions[]\n    SelectorCellComponent: Types.SelectorCellComponentInput\n    onUpdated( params: {\n      values: any[]\n    } ): void\n    onDynamicSearch?: Types.onDynamicSearch\n  }\n  export type OpenSelectorInput = {\n    parent: $$.Args\n    selectorID: string\n    options: Types.ChipsOptions[]\n    selected: Types.ChipsOptions[]\n    bottomContent?: ReactElement\n    gravityPoint?: number\n    limit?: number\n    onDynamicSearch?: {\n      ( k: string ): Promise<{\n        options: Types.ChipsOptions[]\n      }>\n    }\n    onUpdated( params: {\n      values: any[]\n    } ): void\n    onClosed(): void\n    SelectorCellComponent?: Types.SelectorCellComponentInput\n  }\n  export type Methods = {\n    openSelector( params: OpenSelectorInput ): void\n    closeSelector( selectorID: string ): void\n    updateOptions( selectorID: string,options: Types.ChipsOptions[] ): void\n    updateSelected( selectorID: string,selected: Types.ChipsOptions[] ): void\n  }\n}\n\nconst Component = ( params: Selector.Input ) => {\n  type StatusTypes = 'show' | 'interlude'\n  let [ val_status,set_status ] = useState( 'show' as StatusTypes )\n  let [ val_keyword,set_keyword ] = useState( '' )\n  let [ val_componentID ] = useState( $$.uuid.gen() )\n\n  let [ val_options,set_options ] = useState( params.options )\n  let [ val_focus,set_focus ] = useState( val_options[ 0 ] || null )\n  let [ val_selected,set_selected ] = useState( params.selected )\n  let [ val_keyEvent,set_keyEvent ] = useState( 'init' )\n\n  useEffect( () => {\n    useStore.set( {\n      key: params.selectorID,\n      value: {\n        updateOptions: ( options: Types.ChipsOptions[] ) => {\n          set_options( options )\n        },\n        updateSelected: ( selected: Types.ChipsOptions[] ) => {\n          set_selected( selected )\n        }\n      }\n    } )\n  },[] )\n  const mountedOptions = useRef( false )\n  useEffect( () => {\n    if ( mountedOptions.current ) {\n      Sheet.reposition( params.selectorID )\n    } else {\n      mountedOptions.current = true\n    }\n  },[ val_options ] )\n  const mountedKeyword = useRef( false )\n  useEffect( () => {\n    if ( mountedKeyword.current ) {\n      set_status( 'interlude' )\n      set_focus( val_options[ 0 ] || null )\n\n      if ( params.onDynamicSearch ) {\n        $$.interval.clear( val_componentID + '-dynamicSearch' )\n        $$.interval.standBy(\n          val_componentID + '-dynamicSearch',\n          400,\n          async () => {\n            let {\n              options\n            } = await params.onDynamicSearch!( val_keyword )\n            set_options( options )\n            set_status( 'show' )\n          }\n        )\n      } else {\n        $$.interval.clear( val_componentID + '-staticSearch' )\n        $$.interval.standBy(\n          val_componentID + '-staticSearch',\n          400,\n          async () => {\n            let regExp = new RegExp( val_keyword,'ig' )\n            let newSelection: Types.ChipsOptions[] = [];\n            [ ...params.options ].forEach( ( o ) => {\n              let match = Boolean( !val_keyword || ( String( o.label ) ?? String( o.value ) ).match( regExp ) )\n              if ( match ) newSelection.push( o )\n            } )\n\n            set_options( newSelection )\n            set_status( 'show' )\n          }\n        )\n      }\n    } else {\n      mountedKeyword.current = true\n    }\n  },[ val_keyword ] )\n  const mountedSelected = useRef( false )\n  useEffect( () => {\n    if ( mountedSelected.current ) {\n      params.onUpdated( {\n        values: val_selected\n      } )\n    } else {\n      mountedSelected.current = true\n    }\n  },[ val_selected ] )\n  useEffect( () => {\n    $$.scope( () => {\n      if ( $$.is.nullish( val_focus ) ) return\n      if ( val_keyEvent == 'MouseEvent' ) return\n\n      let Wrapper = $$( Config.get().appRoot ).find( '#' + val_componentID + '-Selector-Cell-Wrap' )\n      if ( !Wrapper[ 0 ] ) return\n\n      let focusCell = $$( Config.get().appRoot ).find( '[data-chips-selector-cell=\"' + val_componentID + '-' + JSON.stringify( val_focus?.value || '' ).replace( /\\\"/ig,'' ) + '\"]' )\n      if ( !focusCell[ 0 ] ) return\n\n      let { top: pTop,height: pHeight } = Wrapper.position()\n      let { top: cTop,height: cHeight } = focusCell.position()\n      if ( pTop <= cTop && cTop + cHeight <= pTop + pHeight ) return\n\n      let scroll = Wrapper[ 0 ].scrollTop + ( cTop - pTop )\n      if ( val_keyEvent == 'ArrowDown' ) {\n        scroll -= ( pHeight - cHeight ) - 20\n      } else if ( val_keyEvent == 'ArrowUp' ) {\n        scroll -= 20\n      }\n\n      Wrapper[ 0 ].scrollTop = scroll\n    } )\n  },[ val_focus ] )\n\n  let List: ReactElement[] = []\n\n  if ( val_status == 'interlude' ) {\n    List = [ <Row.Center\n      padding={ 2 }\n      gap={ 0 }\n    >\n      <Loader.Theme.R\n        showInitial\n      />\n      <Box\n        padding={ [ 0,1 ] }\n        fontSize='1.mini'\n        fontColor='4.thin'\n      >\n        \u691C\u7D22\u4E2D...\n      </Box>\n    </Row.Center> ]\n  } else {\n    List = [\n      val_options.map( ( option,index ) => {\n        let {\n          value,label\n        } = option\n\n        let safeValue = String( JSON.stringify( value ) )\n\n        let findIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == safeValue )\n\n        let isSelected = findIndex != -1\n        let isFocused = JSON.stringify( val_focus?.value || '' ) == safeValue\n\n        let styles: TagProperty.Params = {}\n        if ( isSelected || isFocused ) {\n          styles = {\n            fontColor: 'theme',\n            isSemiBoldFont: true,\n          }\n        }\n        if ( isFocused ) {\n          styles = {\n            ...styles,\n            backgroundColor: 'cloud',\n            paddingLeft: '2/3'\n          }\n        }\n        if ( isSelected ) {\n          styles = {\n            ...styles,\n            backgroundColor: 'tcOpFew',\n          }\n        }\n\n        return <Button.Button.Clear.R\n          key={ index }\n          color='cloud'\n          padding={ '1/3' }\n          tabIndex={ -1 }\n          textAlign='left'\n          data-chips-selector-cell={ val_componentID + '-' + safeValue.replace( /\\\"/ig,'' ) }\n          isActive={ isSelected || isFocused }\n          isActiveStyles={ styles }\n          { ...styles }\n          onMouseOver={ () => {\n            set_keyEvent( 'MouseEvent' )\n            set_focus( option )\n          } }\n          onClick={ () => {\n            let newSelected = [ ...val_selected ]\n            if ( isSelected ) {\n              newSelected.splice( findIndex,1 )\n            } else {\n              newSelected = [\n                ...newSelected,\n                option\n              ]\n\n              if ( params.limit && newSelected.length > params.limit ) {\n                newSelected.shift()\n              }\n            }\n            set_selected( newSelected )\n          } }\n        >\n          <params.SelectorCellComponent\n            isSelected={ isSelected }\n            isFocused={ isFocused }\n            value={ value }\n            label={ label }\n          />\n        </Button.Button.Clear.R>\n      } )\n    ]\n  }\n\n  return <>\n    <Column\n      padding={ '2/3' }\n      gap={ '2/3' }\n      borderBottom\n    >\n      <Row.Separate>\n        <Text.Normal\n          value={ val_keyword }\n          onUpdateValidValue={ ( { value } ) => {\n            set_keyword( value )\n          } }\n          id={ params.selectorID + '-KeywordInput' }\n          padding={ '2/3' }\n          placeholder='\u691C\u7D22...'\n          leftIcon={ <Parts.LeftIcon\n            right={ '2/3' }\n            fontSize={ '1.mini' }\n            fontColor='3.blur'\n          >\n            <FAI.Search />\n          </Parts.LeftIcon> }\n          onKeyDown={ ( event ) => {\n            let {\n              key,\n              metaKey,ctrlKey\n            } = event\n            let auxKey = metaKey || ctrlKey\n\n            if ( [ 'ArrowDown','ArrowUp' ].includes( key ) ) {\n              let dir = Number( key == 'ArrowDown' ) * 2 - 1\n              if ( auxKey ) {\n                let next = val_options[ dir == 1 ? val_options.length - 1 : 0 ]\n                set_focus( next )\n              } else {\n                let nextIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) ) + dir\n\n                if ( val_options[ nextIndex ] ) {\n                  set_focus( val_options[ nextIndex ] )\n                } else {\n                  set_focus( val_options[ dir == 1 ? 0 : val_options.length - 1 ] || null )\n                }\n              }\n            } else if ( key == 'Enter' ) {\n              let selectedIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )\n              let isSelected = selectedIndex != -1\n              let newSelected = [ ...val_selected ]\n              if ( isSelected ) {\n                newSelected.splice( selectedIndex,1 )\n              } else {\n                let optionsIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )\n                if ( optionsIndex == -1 ) return\n                newSelected = [\n                  ...newSelected,\n                  val_options[ optionsIndex ],\n                ]\n\n                if ( params.limit && newSelected.length > params.limit ) {\n                  newSelected.shift()\n                }\n              }\n\n              set_selected( newSelected )\n            }\n            set_keyEvent( key )\n          } }\n        />\n        <Button.Button.Border.S\n          marginRight={ '1/3' }\n          ssSphere={ 2 }\n          backgroundColor='cloud'\n          borderRadius={ '2.tone.secondary' }\n          onClick={ () => {\n            Sheet.close( params.selectorID! )\n          } }\n        >\n          <FAI.Times />\n        </Button.Button.Border.S>\n      </Row.Separate>\n      <Row.Separate>\n        <Row.Left\n          gap={ '1/2' }\n          verticalAlign='baseline'\n        >\n          <Span\n            fontColor={ 'theme' }\n          >\n            { val_options.length }\n          </Span>\n          <Box\n            fontSize='1.mini'\n            fontColor='3.blur'\n          >\n            \u4EF6\u306E\u30D2\u30C3\u30C8\n          </Box>\n        </Row.Left>\n        <Row.Right>\n          { params.limit ? <Span\n            fontColor={ '3.blur' }\n            fontSize='1.mini'\n          >\n            <Span\n              fontSize='3.paragraph'\n              fontColor='theme'\n              isSemiBoldFont\n            >\n              { val_selected.length }\n            </Span> / { params.limit } \u4EF6\n          </Span> : null }\n        </Row.Right>\n      </Row.Separate>\n    </Column>\n    <Column\n      gap={ '1/4' }\n      padding={ '1/2' }\n      overflow={ 'auto' }\n      freeCSS={ {\n        maxHeight: 12 * 26,\n        maxWidth: 12 * 26\n      } }\n      id={ val_componentID + '-Selector-Cell-Wrap' }\n      className={ InputChipsClasses( 'SelectorWrapper' ) }\n    >\n      { List }\n    </Column>\n    { params.bottomContent }\n  </>\n}\n\nconst Selector: Selector.Methods = {\n  openSelector: ( params ) => {\n    let {\n      selectorID,\n      options,\n      selected,\n      limit,\n      bottomContent,\n      onDynamicSearch,\n      SelectorCellComponent,\n      onUpdated,\n      onClosed,\n      parent,\n      ...sheetarams\n    } = params\n    let sheetID = selectorID\n\n    SelectorCellComponent = SelectorCellComponent || ( ( params ) => {\n      return <Row.Left>\n        <FAI.CheckCircle\n          // isSolidIcon={ params.isSelected }\n          // isRegularIcon={ !params.isSelected }\n          fontColor={ params.isSelected ? 'theme' : '6.clear' }\n        />\n        { params.label }\n      </Row.Left>\n    } )\n\n    Sheet.open( {\n      parent,\n      sheetID,\n      type: 'custom',\n      gravityPoint: 22,\n      padding: [ 1,0 ],\n      hold_state: true,\n      close_option: {\n        aroundClick: true,\n        escapeKeyDown: true\n      },\n      ...sheetarams,\n      content: <Box\n        borderRadius={ '2.tone.secondary' }\n        backgroundColor={ '1.layer.base' }\n        border\n        boxShadow={ '1.normal' }\n        overflow='hidden'\n      >\n        <Component\n          selectorID={ selectorID }\n          options={ options }\n          limit={ limit }\n          selected={ selected }\n          onUpdated={ onUpdated }\n          SelectorCellComponent={ SelectorCellComponent }\n          bottomContent={ bottomContent }\n          onDynamicSearch={ onDynamicSearch }\n        />\n      </Box>,\n      openAfter: () => {\n        $$( Config.get().appRoot )\n          .find( '#' + params.selectorID + '-KeywordInput' )\n          .focus()\n      },\n      closeAfter: () => {\n        onClosed()\n      }\n    } )\n  },\n  closeSelector: ( selectorID ) => {\n    Sheet.close( selectorID )\n  },\n  updateOptions: ( selectorID,options ) => {\n    let C = useStore.get( selectorID )\n    if ( C && C.updateOptions ) C.updateOptions( options )\n  },\n  updateSelected: ( selectorID,selected ) => {\n    let C = useStore.get( selectorID )\n    if ( C && C.updateSelected ) C.updateSelected( selected )\n  }\n}\n\nexport {\n  Selector,\n  Selector as default\n}"],
+  "mappings": "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",
+  "names": ["Fragment", "jsx", "jsxs", "useState", "useEffect", "useRef", "$$", "Config", "useStore", "Box", "FAI", "Span", "Column", "Row", "Button", "Sheet", "Loader", "Text", "Parts", "InputChipsClasses", "Component", "params", "val_status", "set_status", "val_keyword", "set_keyword", "val_componentID", "val_options", "set_options", "val_focus", "set_focus", "val_selected", "set_selected", "val_keyEvent", "set_keyEvent", "options", "selected", "mountedOptions", "mountedKeyword", "__async", "regExp", "newSelection", "o", "_a", "mountedSelected", "Wrapper", "focusCell", "pTop", "pHeight", "cTop", "cHeight", "scroll", "List", "option", "index", "value", "label", "safeValue", "findIndex", "v", "isSelected", "isFocused", "styles", "__spreadProps", "__spreadValues", "newSelected", "event", "key", "metaKey", "ctrlKey", "auxKey", "dir", "next", "nextIndex", "selectedIndex", "optionsIndex", "Selector", "selectorID", "limit", "bottomContent", "onDynamicSearch", "SelectorCellComponent", "onUpdated", "onClosed", "parent", "sheetarams", "__objRest", "sheetID", "C"]
+}

package/dist/fn/Input/Chips/_.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+import { ReactElement } from '../../../@declaration/_';
+import { InputTypes } from '../_';
+export declare namespace Types {
+    type ChipsOptions = {
+        value: any;
+        label: string;
+    };
+    type SelectedCellComponentInput = React.FC<{
+        removeCallback: Function;
+        defaultRemoveButton: ReactElement;
+        openCallback(): void;
+        value: any;
+        label: string;
+    }>;
+    type SelectorCellComponentInput = React.FC<{
+        isSelected: boolean;
+        isFocused: boolean;
+        value: any;
+        label: string;
+    }>;
+    type onDynamicSearch = {
+        (k: string): Promise<{
+            options: ChipsOptions[];
+        }>;
+    };
+}
+import Selector from './Selector';
+declare namespace Chips {
+    type Methods = React.FC<Input> & {
+        fn: Selector.Methods;
+    };
+    type Input = InputTypes.CoreInput & {
+        tabIndex?: number;
+        id?: string;
+        disabled?: boolean;
+        value?: Options[];
+        limit?: number;
+        selectorGravityPoint?: number;
+        defaultOptions?: Options[];
+        onDynamicSearch?: Types.onDynamicSearch;
+        leftIndicator?: ReactElement | false;
+        rightIndicator?: ReactElement | false;
+        rightIcon?: ReactElement | false;
+        leftIcon?: ReactElement | false;
+        SelectedCellComponent?: SelectedCellComponentInput;
+        SelectorCellComponent?: SelectorCellComponentInput;
+        AddButtonComponent?: AddButtonComponentInput;
+    };
+    type Options = Types.ChipsOptions;
+    type onDynamicSearch = Types.onDynamicSearch;
+    type AddButtonComponentInput = React.FC<{
+        selected: Options[];
+        openCallback(): void;
+    }>;
+    type SelectedCellComponentInput = Types.SelectedCellComponentInput;
+    type SelectorCellComponentInput = Types.SelectorCellComponentInput;
+}
+declare const Chips: Chips.Methods;
+export { Chips, Chips as default };

package/dist/fn/Input/Chips/_.js

@@ -0,0 +1,2 @@
+import{b as r,c as v,d as P}from"../../../chunk-E3D4DIO4.js";import{jsx as p,jsxs as R}from"react/jsx-runtime";import{useState as g,useEffect as J,useRef as L}from"react";import{$$ as u,Config as b}from"@utils";import K from"@atoms/FAI";import H from"@mols/Row";import N from"@fn/Button";import Q from"@fn/Sheet";import{Wrapper as X,BoxWrapper as Y,CommonEffects as Z,DefaultStyles as j}from"../core";import ee from"../Hidden";import U from"./Selector";function te(e){let{value:c,params:s}=e,{required:o}=s,d=[];return o&&!c.length&&d.push({type:"invalid",label:"\u4E00\u3064\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044"}),{ok:!d.filter(({type:C})=>C=="invalid").length,notice:d}}const ne=e=>{let _=e,{required:c,form:s,name:o,checkValidationAtFirst:d,onValidate:C,onUpdateValue:O,onUpdateValidValue:W,value:F=[],limit:A,leftIndicator:le,rightIndicator:ae,leftIcon:ie,rightIcon:pe,SelectedCellComponent:x,AddButtonComponent:D,componentID:ue,defaultOptions:re,enableFormSubmit:ce}=_,M=P(_,["required","form","name","checkValidationAtFirst","onValidate","onUpdateValue","onUpdateValidValue","value","limit","leftIndicator","rightIndicator","leftIcon","rightIcon","SelectedCellComponent","AddButtonComponent","componentID","defaultOptions","enableFormSubmit"]);D=D;let[a]=g(u.uuid.gen()),[m,k]=g({componentID:e.componentID||"",dataValue:F.map(t=>t),eventID:u.uuid.gen(),eventType:"init"}),[B,q]=g({ok:!1,notice:[]}),[n,z]=g([...F]);Z({params:e,val_status:m,set_status:k,val_validate:B,set_validate:q,DefaultValidation:te,onUpdateValue:O,onUpdateValidValue:W,ExtraOverrideParams:{formatValue:n,dataValue:n.map(t=>t)},ExtraStoreParams:{searchTimer:null}});const y=t=>{z(t),k(v(r({},m),{dataValue:t.map(i=>i),eventID:u.uuid.gen(),eventType:"update"}))},I=()=>{U.openSelector({parent:u(b.get().appRoot).find(`[data-chips-input-wrapper="${a}"]`),gravityPoint:e.selectorGravityPoint,SelectorCellComponent:e.SelectorCellComponent,selectorID:a,options:e.defaultOptions||[],selected:n,limit:e.limit,onDynamicSearch:e.onDynamicSearch,onUpdated:t=>{y(t.values)},onClosed:()=>{u(b.get().appRoot).find(`[data-chips-input-wrapper="${a}"]`).focus()}})};let h=A&&A<=n.length;const E=L(!1);J(()=>{E.current?h&&(Q.close(a),u(b.get().appRoot).find(`[data-chips-input-wrapper="${a}"]`).focus()):E.current=!0},[n]);let G=n.map(t=>{let{value:i,label:T}=t;x=x;const S=()=>{let l=n.findIndex($=>$.value==i);if(l==-1)return;let f=[...n];f.splice(l,1),y(f),f.length||setTimeout(()=>{u(b.get().appRoot).find(`[data-chips-input-wrapper="${a}"]`).focus()},200)};return p(x,{value:i,label:T,removeCallback:S,defaultRemoveButton:p(N.Button.Sub.S,{padding:"2/3",flexSizing:"none",color:"cloud",backgroundColor:"cloud",isRounded:!0,onClick:()=>{S()},children:p(K.Times,{})}),openCallback:()=>{I()}},JSON.stringify(i))});return R(Y,{val_status:m,set_status:k,val_validate:B,params:e,children:[p(ee,{"data-value":JSON.stringify(m.dataValue.map(t=>t.value)),name:o,form:s,"data-input-type":"chips-"+["single","multi"][+(e.limit!=1)],"data-validation":B.ok,componentID:m.componentID,"data-focusor":a}),R("button",v(r({"data-chips-input-wrapper":a,onKeyDown:t=>{let{key:i,ctrlKey:T,metaKey:S,keyCode:l}=t,f=T||S;if(l>=48&&l<=57||l>=65&&l<=90||l>=96&&l<=105){if(h)return;I()}else if(i!="Tab"){if(i=="Backspace"){if(!n.length)return;if(f)y([]);else{let w=[...n];w.pop(),y(w)}}}},onClick:()=>{h||I()}},M),{children:[h?null:p(D,{selected:n,openCallback:I}),G]}))]})},oe=e=>{let s=[...e.value||[]].splice(0,e.limit||65535);return p(ne,v(r({SelectedCellComponent:o=>{let{value:d,label:C,removeCallback:O}=o;return R(H.Left,{ssCardBox:!0,padding:"1/2",gap:"1/2",isRounded:!0,textAlign:"left",children:[C,o.defaultRemoveButton]})},AddButtonComponent:o=>e.limit&&e.limit<=o.selected.length?null:R(N.Button.Sub.R,{color:"cloud",padding:"1/2",onClick:()=>{o.openCallback()},children:[p(K.Plus,{}),"\u8FFD\u52A0\u3059\u308B"]})},e),{value:s}))},V=e=>{e=r({},e),e=r({gap:1,display:"flex",horizontalAlign:"left",verticalAlign:"center",flexWrap:!0},e);let c=j.Boxish(e);return p(X,{componentID:e.componentID,children:oe,params:c})};V.fn=U;export{V as Chips,V as default};
+//# sourceMappingURL=_.js.map

package/dist/fn/Input/Chips/_.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/fn/Input/Chips/_.tsx"],
+  "sourcesContent": ["import {\n  TagProperty,\n  ReactElement,\n} from '@declaration'\nimport {\n  useState,\n  useEffect,\n  useRef\n} from 'react'\nimport {\n  $$,\n  Config\n} from '@utils'\n\nimport FAI from '@atoms/FAI'\nimport Row from '@mols/Row'\nimport Button from '@fn/Button'\nimport Sheet from '@fn/Sheet'\n\nimport {\n  Wrapper,\n  BoxWrapper,\n  CommonEffects,\n  DefaultStyles\n} from '../core'\n\nimport { InputTypes } from '../_'\n\nimport Hidden from '../Hidden'\n\nexport namespace Types {\n  export type ChipsOptions = {\n    value: any\n    label: string\n  }\n  export type SelectedCellComponentInput = React.FC<{\n    removeCallback: Function\n    defaultRemoveButton: ReactElement\n    openCallback(): void\n    value: any\n    label: string\n  }>\n  export type SelectorCellComponentInput = React.FC<{\n    isSelected: boolean\n    isFocused: boolean\n    value: any\n    label: string\n  }>\n  export type onDynamicSearch = {\n    ( k: string ): Promise<{\n      options: ChipsOptions[]\n    }>\n  }\n}\n\n\nimport Selector from './Selector'\n\nnamespace Chips {\n  export type Methods = React.FC<Input> & {\n    fn: Selector.Methods\n  }\n  export type Input = InputTypes.CoreInput & {\n    tabIndex?: number\n\n    id?: string\n\n    disabled?: boolean\n\n    value?: Options[]\n    limit?: number\n\n    selectorGravityPoint?: number\n\n    defaultOptions?: Options[]\n    onDynamicSearch?: Types.onDynamicSearch\n\n    leftIndicator?: ReactElement | false\n    rightIndicator?: ReactElement | false\n    rightIcon?: ReactElement | false\n    leftIcon?: ReactElement | false\n\n    SelectedCellComponent?: SelectedCellComponentInput\n    SelectorCellComponent?: SelectorCellComponentInput\n    AddButtonComponent?: AddButtonComponentInput\n  }\n  export type Options = Types.ChipsOptions\n  export type onDynamicSearch = Types.onDynamicSearch\n  export type AddButtonComponentInput = React.FC<{\n    selected: Options[]\n    openCallback(): void\n  }>\n  export type SelectedCellComponentInput = Types.SelectedCellComponentInput\n  export type SelectorCellComponentInput = Types.SelectorCellComponentInput\n}\n\nfunction DefaultValidation( props: {\n  value: any\n  params: any\n} ): InputTypes.Validation.Result {\n  let {\n    value,\n    params\n  } = props\n  let {\n    required\n  } = params as Chips.Input\n  let notice: InputTypes.Validation.Notice[] = []\n\n  if ( required && !value.length ) {\n    notice.push( { type: 'invalid',label: '\u4E00\u3064\u4EE5\u4E0A\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044' } )\n  }\n\n  return {\n    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,\n    notice: notice\n  }\n}\n\nconst Core: React.FC<Chips.Input> = ( params ) => {\n  let {\n    required,\n    form,\n    name,\n\n    checkValidationAtFirst,\n    onValidate,\n    onUpdateValue,onUpdateValidValue,\n    value = [],\n    limit,\n\n    leftIndicator,rightIndicator,leftIcon,rightIcon,\n\n    SelectedCellComponent,\n    AddButtonComponent,\n\n    componentID,\n    defaultOptions,\n    enableFormSubmit,\n\n    ...others\n  } = params\n  AddButtonComponent = AddButtonComponent!\n\n  let [ val_selectorID ] = useState( $$.uuid.gen() )\n  let [ val_status,set_status ] = useState( {\n    componentID: params.componentID || '',\n    dataValue: value.map( ( val: any ) => val ),\n    eventID: $$.uuid.gen(),\n    eventType: 'init'\n  } as InputTypes.Status.Plain )\n  let [ val_validate,set_validate ] = useState( {\n    ok: false,\n    notice: []\n  } as InputTypes.Validation.Result )\n\n  let [ val_selected,set_selected ] = useState( [ ...value ] )\n\n  CommonEffects( {\n    params,\n    val_status,set_status,\n    val_validate,set_validate,\n    DefaultValidation,\n    onUpdateValue,onUpdateValidValue,\n    ExtraOverrideParams: {\n      formatValue: val_selected,\n      dataValue: val_selected.map( ( val: any ) => val )\n    },\n    ExtraStoreParams: {\n      searchTimer: null\n    }\n  } )\n\n  const UpdateValue = ( values: Chips.Options[] ) => {\n    set_selected( values )\n    set_status( {\n      ...val_status,\n      dataValue: values.map( ( val: any ) => val ),\n      eventID: $$.uuid.gen(),\n      eventType: 'update'\n    } as InputTypes.Status.Plain )\n  }\n  const OpenSelector = () => {\n    Selector.openSelector( {\n      parent: $$( Config.get().appRoot ).find( `[data-chips-input-wrapper=\"${ val_selectorID }\"]` ),\n      gravityPoint: params.selectorGravityPoint,\n      SelectorCellComponent: params.SelectorCellComponent,\n      selectorID: val_selectorID,\n      options: params.defaultOptions || [],\n      selected: val_selected,\n      limit: params.limit,\n      onDynamicSearch: params.onDynamicSearch,\n      onUpdated: ( args ) => {\n        UpdateValue( args.values )\n      },\n      onClosed: () => {\n        $$( Config.get().appRoot )\n          .find( `[data-chips-input-wrapper=\"${ val_selectorID }\"]` )\n          .focus()\n      }\n    } )\n  }\n\n  let isFully = limit && limit <= val_selected.length\n\n  const mounted = useRef( false )\n  useEffect( () => {\n    if ( mounted.current ) {\n      if ( isFully ) {\n        Sheet.close( val_selectorID )\n\n        $$( Config.get().appRoot )\n          .find( `[data-chips-input-wrapper=\"${ val_selectorID }\"]` )\n          .focus()\n      }\n    } else {\n      mounted.current = true\n    }\n  },[ val_selected ] )\n\n  let Selected = val_selected.map( ( s ) => {\n    let { value,label } = s\n    SelectedCellComponent = SelectedCellComponent!\n\n    const removeCallback = () => {\n      let findIndex = val_selected.findIndex( ( v ) => v.value == value )\n      if ( findIndex == -1 ) return\n      let newSelected = [ ...val_selected ]\n      newSelected.splice( findIndex,1 )\n      UpdateValue( newSelected )\n      if ( !newSelected.length ) {\n        setTimeout( () => {\n          $$( Config.get().appRoot )\n            .find( `[data-chips-input-wrapper=\"${ val_selectorID }\"]` )\n            .focus()\n        },200 )\n      }\n    }\n    return <SelectedCellComponent\n      key={ JSON.stringify( value ) }\n      value={ value }\n      label={ label }\n      removeCallback={ removeCallback }\n      defaultRemoveButton={ <Button.Button.Sub.S\n        padding={ '2/3' }\n        flexSizing={ 'none' }\n        color='cloud'\n        backgroundColor='cloud'\n        isRounded\n        onClick={ () => {\n          removeCallback()\n        } }\n      >\n        <FAI.Times />\n      </Button.Button.Sub.S> }\n      openCallback={ () => {\n        OpenSelector()\n      } }\n    />\n  } )\n\n  return <BoxWrapper\n    val_status={ val_status }\n    set_status={ set_status }\n    val_validate={ val_validate }\n    params={ params }\n  >\n    <Hidden\n      data-value={ JSON.stringify( val_status.dataValue.map( ( v: any ) => v.value ) ) }\n      name={ name }\n      form={ form }\n      data-input-type={ 'chips-' + [ 'single','multi' ][ Number( params.limit != 1 ) ] }\n      data-validation={ val_validate.ok }\n      componentID={ val_status.componentID }\n      data-focusor={ val_selectorID }\n    />\n    <button\n      data-chips-input-wrapper={ val_selectorID }\n      onKeyDown={ ( e ) => {\n        let { key,ctrlKey,metaKey,keyCode } = e\n        let auxKey = ctrlKey || metaKey\n        let isString = ( keyCode >= 48 && keyCode <= 57 ) || ( keyCode >= 65 && keyCode <= 90 ) || ( keyCode >= 96 && keyCode <= 105 )\n\n        if ( isString ) {\n          if ( isFully ) return\n          OpenSelector()\n        } else if ( key == 'Tab' ) {\n\n        } else if ( key == 'Backspace' ) {\n          if ( !val_selected.length ) return\n          if ( auxKey ) {\n            UpdateValue( [] )\n          } else {\n            let newSelected = [ ...val_selected ]\n            newSelected.pop()\n            UpdateValue( newSelected )\n          }\n        }\n      } }\n      onClick={ () => {\n        if ( isFully ) return\n        // if ( val_selected.length ) return\n        OpenSelector()\n      } }\n      { ...others }\n    >\n      { !isFully ? <AddButtonComponent\n        selected={ val_selected }\n        openCallback={ OpenSelector }\n      /> : null }\n      { Selected }\n    </button>\n  </BoxWrapper>\n}\n\nconst ChipsInput: React.FC<Chips.Input> = ( params ) => {\n  let DefaultValues = [ ...( params.value || [] ) ]\n  let Values = DefaultValues.splice( 0,params.limit || 65535 )\n\n  return <Core\n    SelectedCellComponent={ ( params ) => {\n      let {\n        value,\n        label,\n        removeCallback\n      } = params\n\n      return <Row.Left\n        ssCardBox\n        padding={ '1/2' }\n        gap={ '1/2' }\n        isRounded\n        textAlign='left'\n      >\n        { label }\n        { params.defaultRemoveButton }\n      </Row.Left>\n    } }\n    AddButtonComponent={ ( props ) => {\n      if ( params.limit && params.limit <= props.selected.length ) return null\n\n      return <Button.Button.Sub.R\n        color='cloud'\n        padding={ '1/2' }\n        onClick={ () => {\n          props.openCallback()\n        } }\n      >\n        <FAI.Plus />\n        \u8FFD\u52A0\u3059\u308B\n      </Button.Button.Sub.R>\n    } }\n    { ...params }\n    value={ Values }\n  />\n}\n\nconst Chips: Chips.Methods = ( rawParams: Chips.Input ) => {\n  rawParams = { ...rawParams }\n  rawParams = {\n    gap: 1,\n    display: 'flex',\n    horizontalAlign: 'left',\n    verticalAlign: 'center',\n    flexWrap: true,\n    ...rawParams\n  }\n  let params = DefaultStyles.Boxish( rawParams ) as Chips.Input\n\n  return <Wrapper\n    componentID={ rawParams.componentID }\n    children={ ChipsInput }\n    params={ params }\n  />\n}\nChips.fn = Selector\nexport {\n  Chips,\n  Chips as default\n}"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "useEffect", "useRef", "$$", "Config", "FAI", "Row", "Button", "Sheet", "Wrapper", "BoxWrapper", "CommonEffects", "DefaultStyles", "Hidden", "Selector", "DefaultValidation", "props", "value", "params", "required", "notice", "type", "Core", "_a", "form", "name", "checkValidationAtFirst", "onValidate", "onUpdateValue", "onUpdateValidValue", "limit", "leftIndicator", "rightIndicator", "leftIcon", "rightIcon", "SelectedCellComponent", "AddButtonComponent", "componentID", "defaultOptions", "enableFormSubmit", "others", "__objRest", "val_selectorID", "val_status", "set_status", "val", "val_validate", "set_validate", "val_selected", "set_selected", "UpdateValue", "values", "__spreadProps", "__spreadValues", "OpenSelector", "args", "isFully", "mounted", "Selected", "s", "label", "removeCallback", "findIndex", "v", "newSelected", "e", "key", "ctrlKey", "metaKey", "keyCode", "auxKey", "ChipsInput", "Values", "Chips", "rawParams"]
+}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { ReactElement } from '../../@declaration/_';
+import { InputTypes } from './_';
+declare namespace Contenteditable {
+    type Input = InputTypes.CoreInput & React.TextareaHTMLAttributes<HTMLDivElement> & {
+        tone?: InputTypes.BoxTone;
+        tabIndex?: number;
+        id?: string;
+        children?: string;
+        leftIndicator?: ReactElement | false;
+        rightIndicator?: ReactElement | false;
+        leftIcon?: ReactElement | false;
+        rightIcon?: ReactElement | false;
+    };
+}
+declare const Contenteditable: React.FC<Contenteditable.Input>;
+export { Contenteditable, Contenteditable as default };

package/dist/fn/Input/Contenteditable.js

@@ -0,0 +1,2 @@
+import{b as n,c as u,d as y}from"../../chunk-E3D4DIO4.js";import{jsx as s}from"react/jsx-runtime";import{useState as T}from"react";import{$$ as h}from"@utils";import{Wrapper as x,BoxWrapper as _,SubmitForm as k,CommonEffects as L,DefaultStyles as F}from"./core";function B(t){let{value:e,params:o}=t,{required:i}=o,a=[];return i&&!e&&a.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!a.filter(({type:c})=>c=="invalid").length,notice:a}}const H=t=>{let g=t,{componentID:e,tone:o,required:i,form:a,enableFormSubmit:c,checkValidationAtFirst:M,onInput:f,onKeyDown:I,onValidate:W,onUpdateValue:D,onUpdateValidValue:C,children:m="",leftIndicator:q,rightIndicator:A,leftIcon:K,rightIcon:U}=g,R=y(g,["componentID","tone","required","form","enableFormSubmit","checkValidationAtFirst","onInput","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","children","leftIndicator","rightIndicator","leftIcon","rightIcon"]),V={componentID:e,dataValue:m,eventType:"init",eventID:h.uuid.gen()},[l,r]=T(V),[d,v]=T({ok:!1,notice:[]});return L({params:t,val_status:l,set_status:r,val_validate:d,set_validate:v,onUpdateValue:D,onUpdateValidValue:C,DefaultValidation:B}),s(_,{val_status:l,set_status:r,val_validate:d,params:t,children:s("div",u(n({contentEditable:!0,"data-form":a,"data-name":t.name,"data-input-type":"contenteditable","data-validation":d.ok,"data-value":l.dataValue,"data-component-id":l.componentID,onKeyDown:p=>{I&&I(p),c&&k(p)},onInput:p=>{let S=p.currentTarget,{innerHTML:$,innerText:E}=S;d.ok&&v({ok:!1,notice:[]}),r(u(n({},l),{dataValue:E,eventType:"update",eventID:h.uuid.gen()})),f&&f(p)}},R),{children:m}))})},b=t=>{var o,i;t=n({},t),t.rightIcon&&(t.paddingRight=(o=t.paddingRight)!=null?o:3),t.leftIcon&&(t.paddingLeft=(i=t.paddingLeft)!=null?i:3),t=u(n({},t),{freeCSS:n({whiteSpace:"pre-wrap"},t.freeCSS)});let e=F.Boxish(t);return e.rows=e.rows||5,s(x,{componentID:t.componentID,children:H,params:e})};export{b as Contenteditable,b as default};
+//# sourceMappingURL=Contenteditable.js.map

package/dist/fn/Input/Contenteditable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Input/Contenteditable.tsx"],
+  "sourcesContent": ["import {\n  ReactElement\n} from '@declaration'\nimport {\n  useState\n} from 'react'\n\nimport {\n  $$\n} from '@utils'\n\nimport {\n  Wrapper,\n  BoxWrapper,\n  SubmitForm,\n  CommonEffects,\n  DefaultStyles,\n} from './core'\n\nimport { InputTypes } from './_'\n\nnamespace Contenteditable {\n  export type Input = InputTypes.CoreInput & React.TextareaHTMLAttributes<HTMLDivElement> & {\n    tone?: InputTypes.BoxTone\n\n    tabIndex?: number\n    id?: string\n\n    children?: string\n\n    leftIndicator?: ReactElement | false\n    rightIndicator?: ReactElement | false\n    leftIcon?: ReactElement | false\n    rightIcon?: ReactElement | false\n  }\n}\n\nfunction DefaultValidation( props: {\n  value: any\n  params: any\n} ): InputTypes.Validation.Result {\n  let { value,params } = props\n  let { required } = params as Contenteditable.Input\n  let notice: InputTypes.Validation.Notice[] = []\n\n  if ( required && !value ) {\n    notice.push( { type: 'invalid',label: '\u5FC5\u9808\u9805\u76EE\u3067\u3059' } )\n  }\n\n  return {\n    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,\n    notice: notice\n  }\n}\n\nconst ContenteditableInput: React.FC<Contenteditable.Input> = ( params ) => {\n  let {\n    componentID,\n    tone,\n    required,\n    form,\n\n    enableFormSubmit,\n\n    checkValidationAtFirst,\n    onInput,onKeyDown,\n    onValidate,\n    onUpdateValue,\n    onUpdateValidValue,\n    children = '',\n    leftIndicator,rightIndicator,leftIcon,rightIcon,\n\n    ...others\n  } = params\n\n  let Default_Status: InputTypes.Status.Plain = {\n    componentID: componentID!,\n    dataValue: children,\n    eventType: 'init',\n    eventID: $$.uuid.gen()\n  }\n  let [ val_status,set_status ] = useState( Default_Status )\n  let [ val_validate,set_validate ] = useState( {\n    ok: false,\n    notice: []\n  } as InputTypes.Validation.Result )\n\n  CommonEffects( {\n    params,\n    val_status,\n    set_status,\n    val_validate,\n    set_validate,\n    onUpdateValue,\n    onUpdateValidValue,\n    DefaultValidation\n  } )\n\n  return <BoxWrapper\n    val_status={ val_status }\n    set_status={ set_status }\n    val_validate={ val_validate }\n    params={ params }\n  >\n    <div\n      contentEditable\n      data-form={ form }\n      data-name={ params.name }\n      data-input-type={ 'contenteditable' }\n      data-validation={ val_validate.ok }\n      data-value={ val_status.dataValue }\n      data-component-id={ val_status.componentID }\n      onKeyDown={ ( event ) => {\n        !!onKeyDown && onKeyDown( event )\n        !!enableFormSubmit && SubmitForm( event )\n      } }\n      onInput={ ( event ) => {\n        let contentEditor = event.currentTarget as HTMLDivElement\n        let {\n          innerHTML,\n          innerText\n        } = contentEditor\n\n        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )\n        set_status( {\n          ...val_status,\n          dataValue: innerText,\n          eventType: 'update',\n          eventID: $$.uuid.gen(),\n        } )\n\n        onInput && onInput( event )\n      } }\n      { ...others }\n    >\n      { children }\n    </div>\n  </BoxWrapper>\n}\n\nconst Contenteditable: React.FC<Contenteditable.Input> = ( rawParams ) => {\n  rawParams = { ...rawParams }\n  if ( rawParams.rightIcon ) rawParams.paddingRight = rawParams.paddingRight ?? 3\n  if ( rawParams.leftIcon ) rawParams.paddingLeft = rawParams.paddingLeft ?? 3\n  rawParams = {\n    ...rawParams,\n    freeCSS: {\n      whiteSpace: 'pre-wrap',\n      ...rawParams.freeCSS\n    },\n  }\n\n  let params = DefaultStyles.Boxish( rawParams )\n  params.rows = params.rows || 5\n  return <Wrapper\n    componentID={ rawParams.componentID }\n    children={ ContenteditableInput }\n    params={ params }\n  />\n}\n\nexport {\n  Contenteditable,\n  Contenteditable as default\n}"],
+  "mappings": "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",
+  "names": ["jsx", "useState", "$$", "Wrapper", "BoxWrapper", "SubmitForm", "CommonEffects", "DefaultStyles", "DefaultValidation", "props", "value", "params", "required", "notice", "type", "ContenteditableInput", "_a", "componentID", "tone", "form", "enableFormSubmit", "checkValidationAtFirst", "onInput", "onKeyDown", "onValidate", "onUpdateValue", "onUpdateValidValue", "children", "leftIndicator", "rightIndicator", "leftIcon", "rightIcon", "others", "__objRest", "Default_Status", "val_status", "set_status", "val_validate", "set_validate", "__spreadProps", "__spreadValues", "event", "contentEditor", "innerHTML", "innerText", "Contenteditable", "rawParams", "_b"]
+}

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagProperty } from '../../@declaration/_';
+import { InputTypes } from './_';
+declare namespace DigitCharacters {
+    type Input = InputTypes.CoreInput & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+        tone?: InputTypes.BoxTone;
+        combineInput?: boolean;
+        digits: number;
+        numericOnly?: boolean;
+        tabIndex?: number;
+        id?: string;
+        value?: string | number;
+        listStyles?: TagProperty.Params;
+    };
+}
+declare const DigitCharacters: React.FC<DigitCharacters.Input>;
+export { DigitCharacters, DigitCharacters as default };

package/dist/fn/Input/DigitCharacters.js

@@ -0,0 +1,2 @@
+import{b as t,c as s,d as S}from"../../chunk-E3D4DIO4.js";import{jsx as I,jsxs as Z}from"react/jsx-runtime";import{useState as V}from"react";import{$$ as f,Config as q}from"@utils";import{Wrapper as w,BoxWrapper as U,SubmitForm as $,CommonEffects as j,DefaultStyles as z}from"./core";import G from"@atoms/Flex";import J from"./Hidden";import{InputClasses as R}from"@styles/componentClasses/_";function Q(e){let{value:n,params:u}=e,{required:p,numericOnly:l=!1,digits:m}=u,r=[];return p&&!n&&r.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),n&&(l&&n.match(/\D/)&&r.push({type:"invalid",label:"\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"}),n.length!=m&&r.push({type:"warn",label:"\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044"})),{ok:!r.filter(({type:d})=>d=="invalid"||d=="warn").length,notice:r}}const X=(e,n="")=>{let u=String(n),p=[];for(let l=0;l<e;l++)p[l]=u[l]||"";return{formatValue:p,dataValue:u}},F=(e="")=>{let n=e,u=n.join("");return{formatValue:n,dataValue:u}},Y=e=>{let b=e,{tone:n,required:u,form:p,name:l,className:m="",digits:r,numericOnly:d=!1,enableFormSubmit:_,checkValidationAtFirst:P,onChange:ee,onKeyDown:te,onValidate:ne,onUpdateValue:k,onUpdateValidValue:A,value:N="",override:ie,componentID:ae,listStyles:B}=b,E=S(b,["tone","required","form","name","className","digits","numericOnly","enableFormSubmit","checkValidationAtFirst","onChange","onKeyDown","onValidate","onUpdateValue","onUpdateValidValue","value","override","componentID","listStyles"]);d&&(e.inputMode=e.inputMode||"numeric");let H=s(t({componentID:e.componentID||""},X(r,N)),{eventType:"init",eventID:f.uuid.gen()}),[i,g]=V(H),[h,L]=V({ok:!1,notice:[]});j({params:e,val_status:i,set_status:g,val_validate:h,set_validate:L,onUpdateValue:k,onUpdateValidValue:A,DefaultValidation:Q});let v=[];for(let a=0;a<r;a++){let W=i.formatValue[a],K={},x=m;e.combineInput&&(x=[m,R("DigitCharacterCell"),R("Combined")].join(" ")),v.push(I("input",{type:"text",inputMode:e.inputMode||"text",value:W,"data-form-name":p,id:"Digit-"+a+"-"+i.componentID,className:x,style:t(t({},e.style),K),onKeyDown:D=>{let{key:y,code:O}=D;if(y=="Tab")return;D.preventDefault();let c=null;if(y=="Backspace"){let o=i.formatValue;o[a]="",g(s(t(t({},i),F(o)),{eventType:"update",eventID:f.uuid.gen()})),c=a-1}else if(["ArrowLeft","ArrowRight"].includes(y)){let o=+(y=="ArrowRight")*2-1;c=a+o}else _&&$(D),(()=>{let o=O.match(/^(Key(.)|Digit(\d)|Numpad(\d))/);if(!o)return;let C=o[2]||o[3]||o[4];if(d&&!C.match(/\d/)||!C)return;let T=i.formatValue;T[a]=C,g(s(t(t({},i),F(T)),{eventType:"update",eventID:f.uuid.gen()})),c=a+1})();f.is.exist(c)&&f(q.get().appRoot).find("#Digit-"+c+"-"+i.componentID).focus()},onChange:()=>{}},a))}return Z(U,{val_status:i,set_status:g,val_validate:h,params:e,children:[I(J,t({name:l,"data-input-type":"digitCharacters","data-form":p,"data-validation":h.ok,componentID:i.componentID,"data-value":i.dataValue},E)),I(G,s(t({gap:"1/2",flexChilds:"even",flexWrap:!1,flexSizing:"auto"},B),{children:v}))]})},M=e=>{e=t({},e),e=t({textAlign:"center",width:0},e),e.combineInput&&(e=s(t({textAlign:"center",width:0},e),{freeCSS:t({minWidth:12*2,marginRight:-1},e.freeCSS),listStyles:t({borderRadius:"2.tone.secondary",border:"unset",gap:0},e.listStyles)}));let n=z.Boxish(e);return I(w,{componentID:e.componentID,children:Y,params:n})};export{M as DigitCharacters,M as default};
+//# sourceMappingURL=DigitCharacters.js.map

package/dist/fn/Input/DigitCharacters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/fn/Input/DigitCharacters.tsx"],
+  "sourcesContent": ["import {\n  TagProperty\n} from '@declaration'\nimport {\n  useState,\n  useEffect\n} from 'react'\nimport {\n  $$,\n  Config\n} from '@utils'\n\nimport {\n  Wrapper,\n  BoxWrapper,\n  SubmitForm,\n  CommonEffects,\n  DefaultStyles\n} from './core'\n\nimport { InputTypes } from './_'\n\n\nimport Flex from '@atoms/Flex'\nimport Hidden from './Hidden'\n\nimport { InputClasses } from '@styles/componentClasses/_'\n\nnamespace DigitCharacters {\n  export type Input = InputTypes.CoreInput & React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>,HTMLInputElement> & {\n    tone?: InputTypes.BoxTone\n\n    combineInput?: boolean\n    digits: number\n    numericOnly?: boolean\n\n    tabIndex?: number\n    id?: string\n\n\n    value?: string | number\n\n    listStyles?: TagProperty.Params\n  }\n}\n\nfunction DefaultValidation( props: {\n  value: any\n  params: any\n} ): InputTypes.Validation.Result {\n  let { value,params } = props\n  let {\n    required,\n    numericOnly = false,\n    digits\n  } = params as DigitCharacters.Input\n  let notice: InputTypes.Validation.Notice[] = []\n\n  if ( required && !value ) {\n    notice.push( { type: 'invalid',label: '\u5FC5\u9808\u9805\u76EE\u3067\u3059' } )\n  }\n  if ( value ) {\n    if ( numericOnly && value.match( /\\D/ ) ) {\n      notice.push( { type: 'invalid',label: '\u6570\u5B57\u306E\u307F\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044' } )\n    }\n    if ( value.length != digits ) {\n      notice.push( { type: 'warn',label: '\u6700\u5F8C\u307E\u3067\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044' } )\n    }\n  }\n\n  return {\n    ok: !notice.filter( ( { type } ) => type == 'invalid' || type == 'warn' ).length,\n    notice: notice\n  }\n}\n\n\nconst dataToFormat = ( digits: number,value: any = '' ) => {\n  let dataValue = String( value )\n  let formatValue: any = []\n  for ( let index = 0; index < digits; index++ ) {\n    formatValue[ index ] = dataValue[ index ] || ''\n  }\n  return {\n    formatValue,\n    dataValue\n  }\n}\nconst formatToData = ( value: any = '' ) => {\n  let formatValue = value\n  let dataValue = formatValue.join( '' )\n  return {\n    formatValue,\n    dataValue\n  }\n}\n\n\nconst DigitCharactersInput: React.FC<DigitCharacters.Input> = ( params ) => {\n  let {\n    tone,\n    required,\n    form,\n    name,\n\n    className = '',\n    digits,\n    numericOnly = false,\n    enableFormSubmit,\n\n    checkValidationAtFirst,\n    onChange,onKeyDown,\n    onValidate,\n    onUpdateValue,\n    onUpdateValidValue,\n    value = '',\n\n    override,\n\n    componentID,\n    listStyles,\n    ...others\n  } = params\n\n  if ( numericOnly ) {\n    params.inputMode = params.inputMode || 'numeric'\n  }\n\n  let Default_Status: InputTypes.Status.DigitCharacters = {\n    componentID: params.componentID || '',\n    ...dataToFormat( digits,value ),\n    eventType: 'init',\n    eventID: $$.uuid.gen()\n  }\n\n  let [ val_status,set_status ] = useState( Default_Status )\n  let [ val_validate,set_validate ] = useState( {\n    ok: false,\n    notice: []\n  } as InputTypes.Validation.Result )\n\n  CommonEffects( {\n    params,\n    val_status,\n    set_status,\n    val_validate,\n    set_validate,\n    onUpdateValue,\n    onUpdateValidValue,\n    DefaultValidation\n  } )\n\n  let Digits = []\n  for ( let index = 0; index < digits; index++ ) {\n    let Character = val_status.formatValue[ index ]\n\n    let Styles: React.CSSProperties = {}\n\n    let ClassName = className\n\n    if ( params.combineInput ) {\n      ClassName = [\n        className,\n        InputClasses( 'DigitCharacterCell' ),\n        InputClasses( 'Combined' )\n      ].join( ' ' )\n    }\n\n    Digits.push( <input\n      key={ index }\n      type={ 'text' }\n      inputMode={ params.inputMode || 'text' }\n      value={ Character }\n      data-form-name={ form }\n      id={ 'Digit-' + index + '-' + val_status.componentID }\n      className={ ClassName }\n      style={ {\n        ...params.style,\n        ...Styles\n      } }\n      onKeyDown={ ( event ) => {\n        let {\n          key,\n          code\n        } = event\n\n        if ( key == 'Tab' ) return\n        event.preventDefault()\n        let nextFocusIndex = null\n\n        if ( key == 'Backspace' ) {\n          let newFormatValue = val_status.formatValue\n          newFormatValue[ index ] = ''\n\n          set_status( {\n            ...val_status,\n            ...formatToData( newFormatValue ),\n            eventType: 'update',\n            eventID: $$.uuid.gen()\n          } )\n          nextFocusIndex = index - 1\n        } else if ( [ 'ArrowLeft','ArrowRight' ].includes( key ) ) {\n          let dir = Number( key == 'ArrowRight' ) * 2 - 1\n          nextFocusIndex = index + dir\n        } else {\n          if ( enableFormSubmit ) SubmitForm( event );\n\n          ( () => {\n            let regExp = code.match( /^(Key(.)|Digit(\\d)|Numpad(\\d))/ )\n            if ( !regExp ) return\n\n            let newCharacter: string = regExp[ 2 ] || regExp[ 3 ] || regExp[ 4 ]\n            if ( numericOnly ) {\n              if ( !newCharacter.match( /\\d/ ) ) return\n            }\n            if ( !newCharacter ) return\n\n            let newFormatValue = val_status.formatValue\n            newFormatValue[ index ] = newCharacter\n\n            set_status( {\n              ...val_status,\n              ...formatToData( newFormatValue ),\n              eventType: 'update',\n              eventID: $$.uuid.gen()\n            } )\n            nextFocusIndex = index + 1\n          } )()\n        }\n\n        if ( $$.is.exist( nextFocusIndex ) ) {\n          $$( Config.get().appRoot )\n            .find( '#Digit-' + nextFocusIndex + '-' + val_status.componentID )\n            .focus()\n        }\n      } }\n      onChange={ () => { } }\n    /> )\n  }\n\n  return <BoxWrapper\n    val_status={ val_status }\n    set_status={ set_status }\n    val_validate={ val_validate }\n    params={ params }\n  >\n    <Hidden\n      name={ name }\n      data-input-type={ 'digitCharacters' }\n      data-form={ form }\n      data-validation={ val_validate.ok }\n      componentID={ val_status.componentID }\n      data-value={ val_status.dataValue }\n      { ...others }\n    />\n    <Flex\n      gap={ '1/2' }\n      flexChilds='even'\n      flexWrap={ false }\n      flexSizing='auto'\n      { ...listStyles }\n    >\n      { Digits }\n    </Flex>\n  </BoxWrapper>\n}\n\nconst DigitCharacters: React.FC<DigitCharacters.Input> = ( rawParams ) => {\n  rawParams = { ...rawParams }\n  rawParams = {\n    textAlign: 'center',\n    width: 0,\n    ...rawParams\n  }\n  if ( rawParams.combineInput ) {\n    rawParams = {\n      textAlign: 'center',\n      width: 0,\n      ...rawParams,\n      freeCSS: {\n        minWidth: 12 * 2,\n        marginRight: -1,\n        ...rawParams.freeCSS\n      },\n      listStyles: {\n        borderRadius: '2.tone.secondary',\n        border: 'unset',\n        gap: 0,\n        ...rawParams.listStyles\n      },\n    }\n  }\n  let params = DefaultStyles.Boxish( rawParams ) as DigitCharacters.Input\n\n  return <Wrapper\n    componentID={ rawParams.componentID }\n    children={ DigitCharactersInput }\n    params={ params }\n  />\n}\n\nexport {\n  DigitCharacters,\n  DigitCharacters as default\n}"],
+  "mappings": "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",
+  "names": ["jsx", "jsxs", "useState", "$$", "Config", "Wrapper", "BoxWrapper", "SubmitForm", "CommonEffects", "DefaultStyles", "Flex", "Hidden", "InputClasses", "DefaultValidation", "props", "value", "params", "required", "numericOnly", "digits", "notice", "type", "dataToFormat", "dataValue", "formatValue", "index", "formatToData", "DigitCharactersInput", "_a", "tone", "form", "name", "className", "enableFormSubmit", "checkValidationAtFirst", "onChange", "onKeyDown", "onValidate", "onUpdateValue", "onUpdateValidValue", "override", "componentID", "listStyles", "others", "__objRest", "Default_Status", "__spreadProps", "__spreadValues", "val_status", "set_status", "val_validate", "set_validate", "Digits", "Character", "Styles", "ClassName", "event", "key", "code", "nextFocusIndex", "newFormatValue", "dir", "regExp", "newCharacter", "DigitCharacters", "rawParams"]
+}

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

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { TagProperty } from '../../@declaration/_';
+import { InputTypes } from './_';
+declare namespace Filer {
+    type Methods = React.FC<Input> & FNs;
+    type Input = InputTypes.CoreInput & React.DOMAttributes<HTMLInputElement> & {
+        tone?: InputTypes.BoxTone;
+        tabIndex?: number;
+        id?: string;
+        disabled?: boolean;
+        value?: CustomFile[];
+        limit?: number;
+        fileNameEdit?: boolean;
+        systemOnly?: boolean;
+        accept?: Accept;
+        cellStyles?: TagProperty.Params;
+        cellClassName?: string;
+    };
+    type CustomFile = File & {
+        id: string;
+    };
+    type Accept = 'image' | string;
+    type ListInput = {
+        files: File[];
+        params: Filer.Input;
+        val_status: InputTypes.Status.Plain;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
+    };
+    type CellInput = {
+        index: number;
+        file: File;
+        className?: string;
+        val_status: InputTypes.Status.Plain;
+        set_status: React.Dispatch<React.SetStateAction<InputTypes.Status.Plain>>;
+        fileNameEdit?: boolean;
+    };
+    type FNs = {
+        fn: {
+            openDialog(params: {
+                accept?: Accept;
+                multiple?: boolean;
+            }): Promise<File[]>;
+        };
+    };
+}
+declare const Filer: Filer.Methods;
+export { Filer, Filer as default };

package/dist/fn/Input/Filer.js

@@ -0,0 +1,2 @@
+import{b as h,c as x,d as Q,e as L}from"../../chunk-E3D4DIO4.js";import{Fragment as G,jsx as t,jsxs as f}from"react/jsx-runtime";import{useState as q,useEffect as te}from"react";import{$$ as p,useStore as X,Config as P,GenerateClassName as ae}from"@utils";import y from"@atoms/Box";import $ from"@atoms/FAI";import O from"@atoms/Flex";import Y from"@mols/Column";import le from"@mols/Row";import W from"@fn/Button";import H from"@fn/Snackbar";import{Wrapper as ne,BoxWrapper as ie,CommonEffects as oe,DefaultStyles as se}from"./core";import re from"./Text";import{InputFilerClasses as m}from"@styles/componentClasses/_";import{faCloudArrowUp as pe}from"@fortawesome/free-solid-svg-icons/faCloudArrowUp";function ue(e){let{value:a,params:l}=e,{required:s}=l,n=[];return s&&!a.length&&n.push({type:"invalid",label:"\u5FC5\u9808\u9805\u76EE\u3067\u3059"}),{ok:!n.filter(({type:u})=>u=="invalid").length,notice:n}}const ee={List:e=>{let{files:a,params:l,val_status:s,set_status:n}=e,u=(l.limit||1)-s.dataValue.length,c=a.map((d,S)=>t(ee.Cell,{index:S,file:d,className:l.cellClassName,val_status:s,set_status:n,fileNameEdit:l.fileNameEdit},d.name));return u>0&&c.push(t("label",{className:[l.cellClassName,m("AddButton")].join(" "),"data-component-id":s.componentID,htmlFor:l.id,tabIndex:l.tabIndex,onKeyDown:d=>{let{key:S}=d;l.tabIndex!=-1&&[" ","Enter"].includes(S)&&p(P.get().appRoot).find("#"+l.id).click()},children:f(le.Center,{padding:["1/3",0],children:[t(y,{isRounded:!0,className:m("AddIcon"),children:t($,{icon:pe,className:m("Icon"),fontColor:"theme",fontSize:"4.thirdTitle",backgroundColor:"tcOpLow",ssSphere:4})}),f(y,{children:[t(y,{children:`\u30D5\u30A1\u30A4\u30EB\u3092\u9078\u629E\uFF08${u}\uFF09`,fontColor:"theme",fontSize:"2.normal",isSemiBoldFont:!0}),t(y,{isSemiBoldFont:!0,fontColor:"4.thin",fontSize:"0.xs",children:"\u30D5\u30A1\u30A4\u30EB\u3092\u30C9\u30ED\u30C3\u30D7"})]})]})},"AddButton")),t(Y,{flexSizing:"auto",className:l.className,children:c})},Cell:e=>{let{index:a,file:l,className:s,val_status:n,set_status:u,fileNameEdit:c=!0}=e,{name:d,size:S,type:i}=l,[R,b]=q(!1),N=p.uuid.gen(),V=S.rank(),[J,M]=d.replace(/\s/,"").replace(/(.*)\.(.*)$/,"$1 $2").split(" "),o="\u30D5\u30A1\u30A4\u30EB";return i.match(/image/)?o=i.replace(/image\//,""):i.match(/pdf/)?o="PDF":i.match(/csv/)?o="CSV":i.match(/spreadsheet/)?o="SpreadSheet":i.match(/presentation/)?o="PowerPoint":i.match(/word/)?o="Word":i.match(/zip/)?o="Zip":i.match(/powerpoint/)?o="PowerPoint":i.match(/html/)?o="HTML":i.match(/js/)?o="JavaScript":i.match(/css/)?o="CSS":i.match(/text\/plain/)&&(o="\u30C6\u30AD\u30B9\u30C8"),te(()=>{R&&setTimeout(()=>{p(P.get().appRoot).find("#"+N).focus()},100)},[R]),f(O,{verticalAlign:"center",flexWrap:!1,gap:1,className:s,children:[t($.File,{fontSize:"4.thirdTitle",fontColor:"4.thin"}),f(y,{flexSizing:0,children:[t(y,{children:t(O,{verticalAlign:"center",gap:"2/3",flexWrap:!1,className:m("FileName"),children:R?t(G,{children:f(Y,{gap:"1/2",flexSizing:0,children:[f(O,{gap:"2/3",verticalAlign:"center",children:[t(re.Normal,{tone:"border",wrapStyles:{flexSizing:"auto"},restrict:"fileName",name:"name",required:!0,id:N,form:"form-"+N,enableFormSubmit:!0,value:J,onKeyDown:g=>{let{key:_}=g;_=="Escape"&&b(!1)}}),f(y,{children:[". ",M]})]}),f(O,{gap:"2/3",horizontalAlign:"right",flexWrap:!1,children:[t(W.Button.Sub.R,{padding:["2/3",1],children:"\u9589\u3058\u308B",onClick:()=>{b(!1)}}),t(W.Button.Prime.R,{padding:["2/3",1],submitOption:{formName:"form-"+N,callback:g=>L(void 0,null,function*(){let{name:_}=g,w=[...n.dataValue],T=w[a],U=T.id;if(!T)return;let{target:r}=yield T.read();if(!r)return;let D=yield String(r.result).toBlob(l.type);if(!D)return;let z=new File([D],_+"."+M,{type:T.type});z.id=U,w[a]=z,u(x(h({},n),{dataValue:w,eventType:"update",eventID:p.uuid.gen()})),b(!1)})},children:"\u6C7A\u5B9A"})]})]})}):f(G,{children:[d,c?t(W.Button.Clear.R,{ssSphere:2.5,flexSizing:"none",color:"cloud",fontColor:"4.thin",padding:"1/3",ssEffectsOnActive:"expand",onClick:()=>{b(!0)},children:t($.Pen,{})}):null]})})}),R?null:t(G,{children:t(y,{fontSize:"1.mini",fontColor:"4.thin",flexSizing:0,children:o+"\u30D5\u30A1\u30A4\u30EB / "+V+"B"})})]}),t(W.Button.Sub.R,{color:"cloud",fontColor:"4.thin",ssSphere:3,onClick:()=>{let g=[...n.dataValue];g[a]&&(g.splice(a,1),u(x(h({},n),{dataValue:g,eventType:"update",eventID:p.uuid.gen()})))},children:t($.Times,{})})]})}},de=e=>{let Z=e,{tone:a,required:l,form:s,fileNameEdit:n=!0,systemOnly:u=!1,accept:c="*",limit:d=1,checkValidationAtFirst:S,onChange:i,onValidate:R,onUpdateValue:b,onUpdateValidValue:N,value:V=[],className:J,cellStyles:M,cellClassName:o,componentID:g,status_id:_,enableFormSubmit:w}=Z,T=Q(Z,["tone","required","form","fileNameEdit","systemOnly","accept","limit","checkValidationAtFirst","onChange","onValidate","onUpdateValue","onUpdateValidValue","value","className","cellStyles","cellClassName","componentID","status_id","enableFormSubmit"]),U={componentID:e.componentID||"",dataValue:V,eventType:"init",eventID:p.uuid.gen()},[r,B]=q(U),[D,z]=q({ok:!1,notice:[]});oe({type:"file",params:e,val_status:r,set_status:B,val_validate:D,set_validate:z,DefaultValidation:ue,onUpdateValue:b,onUpdateValidValue:N,ExtraOverrideParams:{dataValue:V,formatValue:V},ExtraStoreParams:{AddFiles:A=>L(void 0,null,function*(){let k=X.get(r.componentID).Files,v=[];for(var F=0;F<(A==null?void 0:A.length);F++){let I=A[F],{type:E,name:C}=I;if(F+1+k.length>d){H.add({componentID:C,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u9078\u629E\u4E0A\u9650\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${C}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}if(c&&c=="image"&&!E.match(/image/)){H.add({componentID:C,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u5F62\u5F0F\u304C\u7570\u306A\u308B\u305F\u3081\u3001${C} \u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3002`,backgroundColor:"nega"});continue}v.push(I)}B(x(h({},r),{dataValue:[...k,...v],eventType:"update",eventID:p.uuid.gen()}))})}});let j="";return c&&(c=="image"?j="image/png,image/jpeg":j=c),f(ie,{val_status:r,set_status:B,val_validate:D,params:e,children:[t("input",x(h({type:"file",className:m("Input"),"data-form":s,"data-input-type":"file","data-component-id":r.componentID,"data-validation":D.ok,accept:j,multiple:d!=1,onChange:A=>L(void 0,null,function*(){let k=A.target,v=k.files,F=[];for(var I=0;I<(v==null?void 0:v.length);I++){let E=v[I],C=E.name;if(E.id=p.uuid.gen(),I+1+r.dataValue.length>d){H.add({componentID:C,secondsToClose:12e3,children:`\u30D5\u30A1\u30A4\u30EB\u767B\u9332\u6570\u3092\u8D85\u3048\u305F\u305F\u3081\u3001${C}}\u306F\u8FFD\u52A0\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002`,backgroundColor:"nega"});continue}F.push(E)}B(x(h({},r),{dataValue:[...r.dataValue,...F],eventType:"update",eventID:p.uuid.gen()})),k.value=""})},T),{tabIndex:-1,value:""})),u?null:t(ee.List,{files:r.dataValue,params:e,val_status:r,set_status:B})]})};p(document).addEvent({eventType:"dragover",callback:e=>{e.preventDefault(),p(P.get().appRoot).find("."+m("AddButton")).addClass(m("Draggable"))},option:{passive:!1}}).addEvent({eventType:"drop",callback:e=>{e.preventDefault(),p(P.get().appRoot).find("."+m("AddButton")).removeClass(m("Draggable"));let a=e.dataTransfer.files;if(a.length){let l=e.target;if(p(P.get().appRoot).find(l).hasClass(m("AddButton"))){let{componentId:s}=l.dataset,n=X.get(s);n&&n.AddFiles&&n.AddFiles(a)}}},option:{passive:!1}});const K=e=>{e=h({},e),e.override="force";let a=ae(e);return a.cellClassName=[a.cellClassName,se.Boxish(x(h({},a.cellStyles),{tone:a.tone})).className].join(" "),t(ne,{componentID:e.componentID,children:de,params:a})};K.fn={openDialog:e=>{let{multiple:a,accept:l}=e;return new Promise(s=>{const n=document.createElement("input");n.type="file",n.multiple=a!=null?a:!0,l&&(l=="image"?n.accept="image/png,image/jpeg":n.accept=l),n.onchange=u=>{s(u.target.files)},n.click()})}};export{K as Filer,K as default};
+//# sourceMappingURL=Filer.js.map