amotify 0.2.281 → 0.2.283

package/demo/next/package.json

@@ -8,11 +8,12 @@
     "dev:next": "NODE_OPTIONS=\"--max-old-space-size=8192\" NEXT_TURBOPACK_TRACING=0 next dev --turbopack -p 8000"
   },
   "dependencies": {
+    "@mui/x-data-grid": "^8.28.1",
     "cross-env": "^7.0.3",
     "dotenv": "^16.4.5",
     "express": "^4.19.2",
-    "jmini": "^0.0.116",
-    "next": "^16.1.1",
+    "jmini": "^0.0.117",
+    "next": "^16.2.1",
     "node-cron": "^4.1.1",
     "nodemon": "^3.1.4",
     "npm-run-all": "^4.1.5",

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

@@ -10,16 +10,16 @@ declare namespace DataGrid {
     type TR = StyleProps.BasicElement & React.HTMLAttributes<HTMLTableRowElement>;
     type TableCell = StyleProps.BasicElement & React.ThHTMLAttributes<HTMLTableCellElement>;
     type RowID = string | number;
+    type Keytype = string | number;
     /**
      * -1: descending
      * 0: disabled
      * 1: ascending
      */
-    type Keytype = string | number;
     type SortType = -1 | 0 | 1;
-    type Tones = 'border' | 'border.vertical' | 'border.horizontal' | false;
     type Checkable = boolean | 'left' | 'right';
-    type CellPosition = {
+    type Tones = 'border' | 'border.vertical' | 'border.horizontal' | false;
+    type CellInfo = {
         rowIdx: number;
         colIdx: number;
         topIdx: number;
@@ -35,7 +35,7 @@ declare namespace DataGrid {
         label?: ReactElement;
     };
     namespace Cell {
-        type Head<K extends Keytype> = Cell & {
+        type Header<K extends Keytype = Keytype> = Cell & {
             key: K;
             /**
              * default 0
@@ -60,31 +60,22 @@ declare namespace DataGrid {
             onLabelRender?(value: T): ReactElement;
         };
     }
-    type Row<K extends Keytype = Keytype, T = Keytype> = {
-        row_id?: RowID;
-        /**
-         * for checker
-         */
-        isSelected?: boolean;
-        isFilterMatched?: boolean;
-        isVisible?: boolean;
-        searchKey?: string;
-        onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-    } & Partial<Record<K, Cell.Body<T> | RowID | boolean | Function>>;
-    type Header<K extends Keytype = Keytype> = Cell.Head<K>[];
-    type Body<K extends Keytype = Keytype> = Row<K>[];
-    type InternalRow<K extends Keytype = Keytype, T = Keytype> = {
-        row_id?: RowID;
-        /**
-         * for checker
-         */
-        isSelected?: boolean;
-        isFilterMatched?: boolean;
-        isVisible?: boolean;
-        searchKey?: string;
-        draggerIndex?: number;
-        onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-    } & Partial<Record<K, Cell.Body<T>>>;
+    type Header<K extends Keytype = any> = Cell.Header<K>[];
+    namespace Body {
+        type RowMeta = {
+            row_id?: RowID;
+            /**
+             * for checker
+             */
+            isSelected?: boolean;
+            isFilterMatched?: boolean;
+            isVisible?: boolean;
+            searchKey?: string;
+            onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        };
+        type Row<K extends Keytype = Keytype, T = Keytype> = RowMeta & Partial<Record<K, Cell.Body<T> | RowID | boolean | Function>>;
+    }
+    type Body<K extends Keytype = Keytype> = Body.Row<K>[];
     type Footer<K extends Keytype = Keytype, T = Keytype> = Partial<Record<K, Cell.Footer<T> | RowID>>;
     type Input<K extends Keytype = Keytype> = {
         tone?: Tones;
@@ -113,47 +104,15 @@ declare namespace DataGrid {
             onRight?: StyleProps.StyleProps;
         };
         cellClassName?: string;
-        onCellStyles?(props: CellPosition, def: StyleProps.StyleProps): StyleProps.StyleProps;
+        onCellStyles?(props: CellInfo, def: StyleProps.StyleProps): StyleProps.StyleProps;
         className?: string;
         onNoRecordsRender?(): ReactElement;
-        onRowClick?(row: Row, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-        onCellClick?(opt: CellPosition, event: React.MouseEvent<HTMLTableCellElement, MouseEvent>): void;
+        onRowClick?(row: Body.Row, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        onCellClick?(opt: CellInfo, event: React.MouseEvent<HTMLTableCellElement, MouseEvent>): void;
         onSorted?(col: number, sort: SortType): void;
-        onSelected?(rows: Row[]): void;
-        onDragged?(rows: Row[]): void;
+        onSelected?(rows: Body.Row[]): void;
+        onDragged?(rows: Body.Row[]): void;
     } & StyleProps.States;
-    type Config = {
-        datagridID: string;
-        colLength: number;
-        body: InternalRow[];
-        filter: {
-            keyword: string;
-            current: (string[])[];
-        };
-        sort: {
-            col: number;
-            dir: SortType;
-        };
-        paging: {
-            rows: number;
-            total: number;
-            current: number;
-        };
-        draggable?: boolean;
-    };
-    type Props = {
-        input: Input;
-        val_config: Config;
-        set_config: React.Dispatch<React.SetStateAction<Config>>;
-    };
-    type RemoteProps = {
-        val_config: Config;
-        remoteUpdate: {
-            paging(pageIdx: number): void;
-            maxRow(maxRows: number): void;
-            searchKey(keyword: string): void;
-        };
-    };
     type Component = <K extends string = string>(props: DataGrid.Input<K>) => ReactElement;
     type FNs = {
         getBodyRows(datagridID: string): Body[];
@@ -183,6 +142,6 @@ declare namespace DataGrid {
     };
     type Methods = Component & FNs;
 }
-export declare const onDefaultCellStyles: (args: DataGrid.CellPosition, prev: StyleProps.StyleProps) => StyleProps.StyleProps;
+export declare const onDefaultCellStyles: (args: DataGrid.CellInfo, prev: StyleProps.StyleProps) => StyleProps.StyleProps;
 declare const DataGrid: DataGrid.Methods;
 export { DataGrid, DataGrid as default };

package/dist/fn/DataGrid/index.js

@@ -1 +1 @@
-import{b as i,c as p,d as V,e as se}from"../../chunk-C5N2D3ZX.js";import{Fragment as we,jsx as r,jsxs as U}from"react/jsx-runtime";import b,{useStore as ce,UUID as ge}from"jmini";import re,{useState as me,useEffect as Z,useMemo as he}from"react";import{ExtractStyles as _,GenerateHTMLProps as Se,DragEffect as le,useRemote as Y}from"../../@utils";import{faArrowUp as Ce}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as Re}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as k,Flex as xe,FAI as v,Span as Ie}from"../../atoms";import{Literal as ae,Row as A,MarkerPen as pe}from"../../mols";import{Button as ee}from"../Button";import E from"../Input";import{TableClasses as Te}from"../../@styles/componentClasses";import{faGripVertical as ue}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as ye}from"../Tips";const x={toSafetyData:o=>{var n,s,d;let{header:e=[]}=o,t={datagridID:o.datagridID||ge(),colLength:o.colLength||e.length||0,body:o.body||[],filter:{keyword:o.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:o.maxRows||100,total:1,current:1},draggable:!!e.some(l=>l.draggable)};t.body.forEach((l,a)=>{var m;l.row_id=(m=l.row_id)!=null?m:a,l.isFilterMatched=!0,l.isVisible=!0,l.draggerIndex=a+1,l.searchKey="",e.forEach((I,P)=>{var c;let g=l[I.key];b.isNullish(g)||(b.isRecord(g)||(g={data:g}),g.sortKey=(c=g.sortKey)!=null?c:String(g.data),l.searchKey+=String(g.sortKey)+" ",l[I.key]=g)})});{let l=(n=e==null?void 0:e.filter(a=>a.defSort))==null?void 0:n[0];l&&(t.sort.col=(s=e.indexOf(l))!=null?s:-1,t.sort.dir=(d=l==null?void 0:l.sortable)!=null?d:1)}return t.draggable,x.updateRowMeta(t,o)},updateRowMeta:(o,e)=>{let t=i({},o);if(t.sort.col>=0&&t.sort.dir){let n=e.header[t.sort.col].key;t.sort.dir==1?t.body.toASC(n+".data"):t.body.toDESC(n+".data")}{let n=String(t.filter.keyword)||"";t.body.forEach(s=>{var l;if(s.isFilterMatched=!0,!n)return;let d=!!((l=s.searchKey)!=null&&l.match(new RegExp(n.escapeRegExChar(),"i")));s.isFilterMatched=d})}{let n=t.paging.rows;t.paging.total=Math.ceil(t.body.filter(a=>a.isFilterMatched).length/n);let s=n*(t.paging.current-1),d=s+n,l=0;t.body.forEach(a=>{a.isVisible=!1,a.isFilterMatched&&(a.isVisible=l>=s&&l<d,l++)})}return t.draggable&&t.body.toASC("draggerIndex"),t},index:o=>{var I,P,g;let[e,t]=me(()=>x.toSafetyData(o));const n=re.useRef(!1);Z(()=>{if(e){if(!n.current){n.current=!0;return}t(x.toSafetyData(o))}},[he(()=>o.props,[o.props])]),Z(()=>{e&&(ce.set({["rows-"+e.datagridID]:e.body}),Y.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:c=>{t(u=>x.updateRowMeta(p(i({},u),{paging:p(i({},u.paging),{current:Math.max(1,Math.min(u.paging.total,c))})}),o))},maxRow:c=>{t(u=>x.updateRowMeta(p(i({},u),{paging:p(i({},u.paging),{rows:c,current:1})}),o))},searchKey:c=>{b.interval.once(()=>{t(u=>{let w=p(i({},u),{paging:p(i({},u.paging),{current:1}),filter:p(i({},u.filter),{keyword:String(c||"").trim()})});return x.updateRowMeta(w,o)})},300,"InputSearchTime")}}}))},[e]);const s=re.useRef(!1);Z(()=>{if(e&&o.onSelected){if(!s.current){s.current=!0;return}o.onSelected(e.body.filter(c=>c.isSelected))}},[(I=e==null?void 0:e.body)==null?void 0:I.filter(c=>c.isSelected).length]);const d=re.useRef(!1);Z(()=>{if(e&&o.onSorted){if(!d.current){d.current=!0;return}o.onSorted(e.sort.col,e.sort.dir)}},[(P=e==null?void 0:e.sort)==null?void 0:P.col,(g=e==null?void 0:e.sort)==null?void 0:g.dir]);let l={input:o,val_config:e,set_config:t},{className:a,style:m}=Se(o);return r(k,{className:a,style:m,children:r(D.Table,{className:Te("DataGrid"),borderRadius:"inherit",children:U(D.Body,{children:[r(x.Header,i({},l)),r(x.Body,i({},l)),r(x.Footer,i({},l))]})})})},Checker:o=>r(k,{onClick:e=>{e.stopPropagation()},children:r(E.Checker,p(i({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},o),{label:!1}))}),Header:o=>{let{input:e,val_config:t,set_config:n}=o;if(e.headerless)return null;let s="datagrid-dragger-"+t.datagridID,d=["datagrid",t.datagridID,""].join("-"),l=1+t.body.filter(a=>a.isVisible).length+ +!!e.footer;return r(le.DropArea,p(i({component:D.Row,id:d},e.rowStyles),{dragInfo:{type:s,id:d,idx:0,marker:"bottom"},children:e.header.map((a,m)=>{var W,q,$,Q,J;let[I,P]=_(a),j=P,{isTH:g,key:c,label:u,checkable:w,draggable:S,defSort:G,sortable:B,filterable:z,isHidden:O}=j,M=V(j,["isTH","key","label","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(O)return null;let T={rowIdx:0,colIdx:m,topIdx:0,leftIdx:m,rightIdx:t.colLength-m-1,bottomIdx:l-1,isHeader:!0,isBody:!1,isFooter:!1},H=S,L=B!=0,C=m==t.sort.col,F=b.deepMerge(b.deepCopy(e.cellStyles),ie(T,{}),(W=e.cellStyles)==null?void 0:W.onHeader,!T.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!T.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!T.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!T.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),I);e.onCellStyles&&(F=e.onCellStyles(T,F||{}));let K=[r(k,{flexSizing:0,children:u||c},"data")];return L&&K.unshift(r(v,{fontSize:"1.mini",opacity:C?"max":"low",transition:"middle",xcss:{transform:C&&t.sort.dir==-1?"rotate(180deg)":"none"},icon:C?Ce:Re},"sort")),w=="left"&&K.unshift(r(x.Checker,{value:t.body.every(y=>y.isSelected),onUpdateValue:y=>{n(R=>{let f=i({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!y)}),f})}},"check")),H&&K.unshift(r(ee.Clear.S,{ssSphere:2,fontColor:"theme",onMouseOver:y=>{ye.open(y.currentTarget,U(ae.Supplement,{children:[r(v,{icon:ue}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:y=>ye.abort(),onClick:y=>{y.stopPropagation()},children:r(v.QuestionCircle,{})},"drag")),w=="right"&&K.push(r(x.Checker,{value:t.body.every(y=>y.isSelected),onUpdateValue:y=>{n(R=>{let f=i({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!y)}),f})}},"check")),r(D.Cell,p(i(i({isTH:!!g,ssPushable:!!B},_(F||{})[0]),M),{className:[e.cellClassName,M.className].join(" "),onClick:y=>{M.onClick&&M.onClick(y),e.onCellClick&&e.onCellClick(T,y),L&&n(R=>{let f=i({},R);return f.sort={col:m,dir:C?R.sort.dir*-1:B},x.updateRowMeta(f,e)})},children:r(A.Left,{gap:"1/3",children:K})}),m)})}))},Body:o=>{var l;let{input:e,val_config:t,set_config:n}=o,s=t.body.filter(a=>a.isVisible),d=+!e.headerless+s.length+ +!!e.footer;return U(we,{children:[!s.length&&r(D.Row,p(i({},e.rowStyles),{children:r(D.Cell,{colSpan:t.colLength,padding:1,children:(l=e.onNoRecordsRender)==null?void 0:l.call(e)})})),s.map((a,m)=>{let I=m;e.headerless||(I+=1);let P="datagrid-dragger-"+t.datagridID,g=["datagrid",t.datagridID,a.row_id].join("-");return r(le.DropArea,p(i({component:D.Row,id:g,ssPushable:!!e.onRowClick||!!a.onRowClick},e.rowStyles),{onClick:c=>{a.onRowClick&&a.onRowClick(c),e.onRowClick&&e.onRowClick(a,c)},dragInfo:{type:P,id:g,idx:a.draggerIndex,disabled:!t.draggable,marker:"bottom"},children:e.header.map((c,u)=>{var W,q,$,Q,J,y;let w=c.draggable,S=a[c.key];if(!S)return null;b.isRecord(S)||(S={data:S});let[G,B]=_(S),j=B,{isTH:z,sortKey:O,data:M,label:T,onLabelRender:H}=j,L=V(j,["isTH","sortKey","data","label","onLabelRender"]),C={rowIdx:I,colIdx:u,topIdx:I,leftIdx:u,rightIdx:t.colLength-u-1,bottomIdx:d-I-1,isHeader:!1,isBody:!0,isFooter:!1},F=b.deepMerge(b.deepCopy(e.cellStyles),ie(C,{}),(W=e.cellStyles)==null?void 0:W.onBody,!C.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!C.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!C.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!C.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),G);e.onCellStyles&&(F=e.onCellStyles(C,F||{}));let K=[r(k,{flexSizing:0,children:(y=H==null?void 0:H(M))!=null?y:pe(T!=null?T:String(M),t.filter.keyword)},"data")];return c.checkable=="left"&&K.unshift(r(x.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{n(f=>p(i({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),w&&K.unshift(r(ee.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:R=>{let f=b("#"+g)[0],h=f.cloneNode(!0);h.style.width=f.offsetWidth+"px",le.Start(P,{dragElement:h,startEvent:R,originId:g,horizontal:!1,allowPrevDataOnDropend:!1},de=>se(void 0,null,function*(){let te=m,N=Number(de.idx);if(b.isNullish(N)||N==-1||(N>te&&N--,te==N)||!de.end)return;let X=b.deepCopy(t.body||[]),fe=X.splice(te,1)[0];X.splice(N,0,fe),X.forEach((oe,be)=>{oe.draggerIndex=be+1}),e.onDragged&&e.onDragged(X),n(oe=>p(i({},oe),{body:X}))}))},children:r(A.Center,{gap:"1/4",children:r(v,{icon:ue})})},"drag")),c.checkable=="right"&&K.push(r(x.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{n(f=>p(i({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),r(D.Cell,p(i(i({isTH:!!z},_(F||{})[0]),L),{className:[e.cellClassName,L.className].join(" "),onClick:R=>{L.onClick&&L.onClick(R),e.onCellClick&&e.onCellClick(C,R)},children:r(A.Left,{gap:"1/3",children:K})}),u)})}),String(a.row_id))})]})},Footer:o=>{let{input:e,val_config:t,set_config:n}=o;if(!e.footer)return null;let s=+!e.headerless+t.body.filter(d=>d.isVisible).length+1;return r(D.Row,p(i({},e.rowStyles),{children:e.header.map((d,l)=>{var z,O,M,T,H,L;let a=e.footer[d.key];if(!a)return null;b.isRecord(a)||(a={data:a});let[m,I]=_(a),B=I,{isTH:P,data:g,label:c,onLabelRender:u}=B,w=V(B,["isTH","data","label","onLabelRender"]),S={rowIdx:s-1,colIdx:l,topIdx:s-1,leftIdx:l,rightIdx:t.colLength-l-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},G=b.deepMerge(b.deepCopy(e.cellStyles),ie(S,{}),(z=e.cellStyles)==null?void 0:z.onBody,!S.leftIdx&&((O=e.cellStyles)==null?void 0:O.onLeft),!S.rightIdx&&((M=e.cellStyles)==null?void 0:M.onRight),!S.topIdx&&((T=e.cellStyles)==null?void 0:T.onTop),!S.bottomIdx&&((H=e.cellStyles)==null?void 0:H.onBottom),m);return e.onCellStyles&&(G=e.onCellStyles(S,G||{})),r(D.Cell,p(i(i({isTH:!!P},_(G||{})[0]),w),{className:[e.cellClassName,w.className].join(" "),onClick:C=>{w.onClick&&w.onClick(C),e.onCellClick&&e.onCellClick(S,C)},children:r(k,{flexSizing:0,children:(L=u==null?void 0:u(g))!=null?L:pe(c!=null?c:String(g),t.filter.keyword)})}),l)})}))}},ie=(o,e)=>{let t=i({},e);return o.topIdx||(t.borderTop="unset"),o.bottomIdx||(t.borderBottom="unset"),o.rightIdx||(t.borderRight="unset"),o.leftIdx||(t.borderLeft="unset"),o.topIdx||(o.leftIdx||(t.borderTopLeftRadius="inherit"),o.rightIdx||(t.borderTopRightRadius="inherit")),o.bottomIdx||(o.leftIdx||(t.borderBottomLeftRadius="inherit"),o.rightIdx||(t.borderBottomRightRadius="inherit")),t},De=o=>(o=i({datagridID:ge(),tone:"border",colLength:0,maxRows:100,onNoRecordsRender:()=>r(A.Center,{children:r(ae.Supplement,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},o),o.rowStyles=i({backgroundColor:"layer.0"},o.rowStyles),o.cellStyles=i(p(i({},b.scope(()=>{if(!o.tone)return{};let e={};return b.isOneOf(o.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),b.isOneOf(o.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{padding:"1/3",transition:"short"}),o.cellStyles),o.tone&&(o=i({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},o)),o.header=o.header||[],o.header.forEach((e,t)=>{var n;e.sortable=(n=e.sortable)!=null?n:1,e.checkable===!0&&(e.checkable="left")}),r(x.index,i({},o))),ne={getBodyRows:o=>ce.get("rows-"+o)||[],Table:o=>r(k,p(i({htmlTag:"table",borderRadius:"inherit"},o),{border:o.border})),Head:o=>r(k,i({htmlTag:"thead",borderRadius:"inherit"},o)),Body:o=>r(k,i({htmlTag:"tbody",borderRadius:"inherit"},o)),Row:o=>r(k,i({htmlTag:"tr",borderRadius:"inherit"},o)),TH:o=>r(k,i({htmlTag:"th"},o)),TD:o=>r(k,i({htmlTag:"td"},o)),Cell:o=>{let n=o,{isTH:e}=n,t=V(n,["isTH"]);return e?r(ne.TH,i({},t)):r(ne.TD,i({},t))},RightIndicator:{unitWidth:3,data:"",label:r(v.AngleRight,{fontColor:"theme",fontSize:"4.thirdTitle"})},SearchInput:o=>{let d=o,{datagridID:e}=d,t=V(d,["datagridID"]),n=Y.catch(o.datagridID);if(!n)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:s}=n;return r(E.TextField,p(i({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:r(E.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:r(v.Search,{})}),value:s.filter.keyword},t),{onUpdateValidValue:(...l)=>{t.onUpdateValidValue&&t.onUpdateValidValue(...l),n.remoteUpdate.searchKey(l[0])}}))},Info:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=t.body.filter(d=>d.isFilterMatched).length,s=n.ratio(t.paging.total)||0;return U(xe,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[r(Ie,{fontSize:"4.thirdTitle",fontColor:"theme",children:n.toLocaleString()}),"/ ",t.paging.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=[];for(let d=0;d<t.paging.total;d++)n.push({value:d+1,label:(d+1).toString()});const s=d=>{let l=Math.min(Math.max(1,d),t.paging.total),a=i({},t);a.paging.current=l,e.remoteUpdate.paging(l)};return r(E.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:r(E.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==1){s(t.paging.total);return}s(t.paging.current-1)},children:r(v.ChevronLeft,{})})}),rightIcon:r(E.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==t.paging.total){s(1);return}s(t.paging.current+1)},children:r(v.ChevronRight,{})})}),options:n.map(d=>({value:d.value||0,label:U(A.Left,{gap:"1/3",verticalAlign:"baseline",children:[d.label,U(ae,{fontColor:"4.thin",fontSize:"0.xs",children:["/ ",t.paging.total]})]})})),value:t.paging.current,onUpdateValidValue:d=>{s(d)}})},RowCount:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,n=t.body.filter(a=>a.isFilterMatched).length,s=t.paging.rows,d=0,l=o.options.map(a=>(d|=+(a==s),{value:a,label:a.toString()}));return d||l.push({value:s,label:s.toString()}),r(A.Center,{gap:"1/2",children:r(E.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:r(E.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:r(E.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),value:t.paging.rows,options:l.toASC("value"),onUpdateValidValue:a=>{e.remoteUpdate.maxRow(Number(a))}})})}},D=Object.assign(De,ne);export{D as DataGrid,D as default,ie as onDefaultCellStyles};
+import{b as n,c as p,d as V,e as se}from"../../chunk-C5N2D3ZX.js";import{Fragment as De,jsx as r,jsxs as U}from"react/jsx-runtime";import b,{useStore as ce,UUID as ge}from"jmini";import re,{useState as me,useEffect as Z,useMemo as he}from"react";import{ExtractStyles as A,GenerateHTMLProps as Se,DragEffect as le,useRemote as Y}from"../../@utils";import{faArrowUp as Ce}from"@fortawesome/free-solid-svg-icons/faArrowUp";import{faUpDown as Re}from"@fortawesome/free-solid-svg-icons/faUpDown";import{Box as k,Flex as Ie,FAI as v,Span as xe}from"../../atoms";import{Literal as ae,Row as _,MarkerPen as pe}from"../../mols";import{Button as ee}from"../Button";import K from"../Input";import{TableClasses as Te}from"../../@styles/componentClasses";import{faGripVertical as ye}from"@fortawesome/free-solid-svg-icons/faGripVertical";import{Tips as ue}from"../Tips";const I={toSafetyData:o=>{var i,s,d;let{header:e=[]}=o,t={datagridID:o.datagridID||ge(),colLength:o.colLength||e.length||0,body:o.body||[],filter:{keyword:o.defaultSearchKey||"",current:[]},sort:{col:-1,dir:1},paging:{rows:o.maxRows||100,total:1,current:1},draggable:!!e.some(l=>l.draggable)};t.body.forEach((l,a)=>{var m;l.row_id=(m=l.row_id)!=null?m:a,l.isFilterMatched=!0,l.isVisible=!0,l.draggerIndex=a+1,l.searchKey="",e.forEach((x,M)=>{var c;let g=l[x.key];b.isNullish(g)||(b.isRecord(g)||(g={data:g}),g.sortKey=(c=g.sortKey)!=null?c:String(g.data),l.searchKey+=String(g.sortKey)+" ",l[x.key]=g)})});{let l=(i=e==null?void 0:e.filter(a=>a.defSort))==null?void 0:i[0];l&&(t.sort.col=(s=e.indexOf(l))!=null?s:-1,t.sort.dir=(d=l==null?void 0:l.sortable)!=null?d:1)}return t.draggable,I.updateRowMeta(t,o)},updateRowMeta:(o,e)=>{let t=n({},o);if(t.sort.col>=0&&t.sort.dir){let i=e.header[t.sort.col].key;t.sort.dir==1?t.body.toASC(i+".data"):t.body.toDESC(i+".data")}{let i=String(t.filter.keyword)||"";t.body.forEach(s=>{var l;if(s.isFilterMatched=!0,!i)return;let d=!!((l=s.searchKey)!=null&&l.match(new RegExp(i.escapeRegExChar(),"i")));s.isFilterMatched=d})}{let i=t.paging.rows;t.paging.total=Math.ceil(t.body.filter(a=>a.isFilterMatched).length/i);let s=i*(t.paging.current-1),d=s+i,l=0;t.body.forEach(a=>{a.isVisible=!1,a.isFilterMatched&&(a.isVisible=l>=s&&l<d,l++)})}return t.draggable&&t.body.toASC("draggerIndex"),t},index:o=>{var x,M,g;let[e,t]=me(()=>I.toSafetyData(o));const i=re.useRef(!1);Z(()=>{if(e){if(!i.current){i.current=!0;return}t(I.toSafetyData(o))}},[he(()=>o.props,[o.props])]),Z(()=>{e&&(ce.set({["rows-"+e.datagridID]:e.body}),Y.bridge(e.datagridID,{val_config:e,remoteUpdate:{paging:c=>{t(y=>I.updateRowMeta(p(n({},y),{paging:p(n({},y.paging),{current:Math.max(1,Math.min(y.paging.total,c))})}),o))},maxRow:c=>{t(y=>I.updateRowMeta(p(n({},y),{paging:p(n({},y.paging),{rows:c,current:1})}),o))},searchKey:c=>{b.interval.once(()=>{t(y=>{let D=p(n({},y),{paging:p(n({},y.paging),{current:1}),filter:p(n({},y.filter),{keyword:String(c||"").trim()})});return I.updateRowMeta(D,o)})},300,"InputSearchTime")}}}))},[e]);const s=re.useRef(!1);Z(()=>{if(e&&o.onSelected){if(!s.current){s.current=!0;return}o.onSelected(e.body.filter(c=>c.isSelected))}},[(x=e==null?void 0:e.body)==null?void 0:x.filter(c=>c.isSelected).length]);const d=re.useRef(!1);Z(()=>{if(e&&o.onSorted){if(!d.current){d.current=!0;return}o.onSorted(e.sort.col,e.sort.dir)}},[(M=e==null?void 0:e.sort)==null?void 0:M.col,(g=e==null?void 0:e.sort)==null?void 0:g.dir]);let l={input:o,val_config:e,set_config:t},{className:a,style:m}=Se(o);return r(k,{className:a,style:m,children:r(w.Table,{className:Te("DataGrid"),borderRadius:"inherit",children:U(w.Body,{children:[r(I.Header,n({},l)),r(I.Body,n({},l)),r(I.Footer,n({},l))]})})})},Checker:o=>r(k,{onClick:e=>{e.stopPropagation()},children:r(K.Checker,p(n({wrapStyles:{display:"inlineBlock"},cellStyles:{gap:0}},o),{label:!1}))}),Header:o=>{let{input:e,val_config:t,set_config:i}=o;if(e.headerless)return null;let s="datagrid-dragger-"+t.datagridID,d=["datagrid",t.datagridID,""].join("-"),l=1+t.body.filter(a=>a.isVisible).length+ +!!e.footer;return r(le.DropArea,p(n({component:w.Row,id:d},e.rowStyles),{dragInfo:{type:s,id:d,idx:0,marker:"bottom"},children:e.header.map((a,m)=>{var W,q,$,Q,J;let[x,M]=A(a),j=M,{isTH:g,key:c,label:y,checkable:D,draggable:S,defSort:G,sortable:E,filterable:z,isHidden:O}=j,P=V(j,["isTH","key","label","checkable","draggable","defSort","sortable","filterable","isHidden"]);if(O)return null;let T={rowIdx:0,colIdx:m,topIdx:0,leftIdx:m,rightIdx:t.colLength-m-1,bottomIdx:l-1,isHeader:!0,isBody:!1,isFooter:!1},H=S,L=E!=0,C=m==t.sort.col,F=b.deepMerge(b.deepCopy(e.cellStyles),ne(T,{}),(W=e.cellStyles)==null?void 0:W.onHeader,!T.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!T.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!T.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!T.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),x);e.onCellStyles&&(F=e.onCellStyles(T,F||{}));let B=[r(k,{flexSizing:0,children:y||c},"data")];return L&&B.unshift(r(v,{fontSize:"1.mini",opacity:C?"max":"low",transition:"middle",xcss:{transform:C&&t.sort.dir==-1?"rotate(180deg)":"none"},icon:C?Ce:Re},"sort")),D=="left"&&B.unshift(r(I.Checker,{value:t.body.every(u=>u.isSelected),onUpdateValue:u=>{i(R=>{let f=n({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!u)}),f})}},"check")),H&&B.unshift(r(ee.Clear.S,{ssSphere:2,fontColor:"theme",onMouseOver:u=>{ue.open(u.currentTarget,U(ae.Supplement,{children:[r(v,{icon:ye}),"\u30C9\u30E9\u30C3\u30B0\u3067\u5217\u306E\u9806\u756A\u3092\u5909\u66F4"]}),22)},onMouseLeave:u=>ue.abort(),onClick:u=>{u.stopPropagation()},children:r(v.QuestionCircle,{})},"drag")),D=="right"&&B.push(r(I.Checker,{value:t.body.every(u=>u.isSelected),onUpdateValue:u=>{i(R=>{let f=n({},R);return f.body.forEach(h=>{h.isFilterMatched&&(h.isSelected=!!u)}),f})}},"check")),r(w.Cell,p(n(n({isTH:!!g,ssPushable:!!E},A(F||{})[0]),P),{className:[e.cellClassName,P.className].join(" "),onClick:u=>{P.onClick&&P.onClick(u),e.onCellClick&&e.onCellClick(T,u),L&&i(R=>{let f=n({},R);return f.sort={col:m,dir:C?R.sort.dir*-1:E},I.updateRowMeta(f,e)})},children:r(_.Left,{gap:"1/3",children:B})}),m)})}))},Body:o=>{var l;let{input:e,val_config:t,set_config:i}=o,s=t.body.filter(a=>a.isVisible),d=+!e.headerless+s.length+ +!!e.footer;return U(De,{children:[!s.length&&r(w.Row,p(n({},e.rowStyles),{children:r(w.Cell,{colSpan:t.colLength,padding:1,children:(l=e.onNoRecordsRender)==null?void 0:l.call(e)})})),s.map((a,m)=>{let x=m;e.headerless||(x+=1);let M="datagrid-dragger-"+t.datagridID,g=["datagrid",t.datagridID,a.row_id].join("-");return r(le.DropArea,p(n({component:w.Row,id:g,ssPushable:!!e.onRowClick||!!a.onRowClick},e.rowStyles),{onClick:c=>{a.onRowClick&&a.onRowClick(c),e.onRowClick&&e.onRowClick(a,c)},dragInfo:{type:M,id:g,idx:a.draggerIndex,disabled:!t.draggable,marker:"bottom"},children:e.header.map((c,y)=>{var W,q,$,Q,J,u;let D=c.draggable,S=a[c.key];if(!S)return null;b.isRecord(S)||(S={data:S});let[G,E]=A(S),j=E,{isTH:z,sortKey:O,data:P,label:T,onLabelRender:H}=j,L=V(j,["isTH","sortKey","data","label","onLabelRender"]),C={rowIdx:x,colIdx:y,topIdx:x,leftIdx:y,rightIdx:t.colLength-y-1,bottomIdx:d-x-1,isHeader:!1,isBody:!0,isFooter:!1},F=b.deepMerge(b.deepCopy(e.cellStyles),ne(C,{}),(W=e.cellStyles)==null?void 0:W.onBody,!C.leftIdx&&((q=e.cellStyles)==null?void 0:q.onLeft),!C.rightIdx&&(($=e.cellStyles)==null?void 0:$.onRight),!C.topIdx&&((Q=e.cellStyles)==null?void 0:Q.onTop),!C.bottomIdx&&((J=e.cellStyles)==null?void 0:J.onBottom),G);e.onCellStyles&&(F=e.onCellStyles(C,F||{}));let B=[r(k,{flexSizing:0,children:(u=H==null?void 0:H(P))!=null?u:pe(T!=null?T:String(P),t.filter.keyword)},"data")];return c.checkable=="left"&&B.unshift(r(I.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{i(f=>p(n({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),D&&B.unshift(r(ee.Clear.S,{tabIndex:-1,isRounded:!0,ssSphere:2.5,fontColor:"6.clear",onPointerDown:R=>{let f=b("#"+g)[0],h=f.cloneNode(!0);h.style.width=f.offsetWidth+"px",le.Start(M,{dragElement:h,startEvent:R,originId:g,horizontal:!1,allowPrevDataOnDropend:!1},de=>se(void 0,null,function*(){let te=m,N=Number(de.idx);if(b.isNullish(N)||N==-1||(N>te&&N--,te==N)||!de.end)return;let X=b.deepCopy(t.body||[]),fe=X.splice(te,1)[0];X.splice(N,0,fe),X.forEach((oe,be)=>{oe.draggerIndex=be+1}),e.onDragged&&e.onDragged(X),i(oe=>p(n({},oe),{body:X}))}))},children:r(_.Center,{gap:"1/4",children:r(v,{icon:ye})})},"drag")),c.checkable=="right"&&B.push(r(I.Checker,{override:"force",value:!!a.isSelected,onUpdateValue:R=>{i(f=>p(n({},f),{body:f.body.map(h=>(h.row_id==a.row_id&&(h.isSelected=!!R),h))}))}},"check")),r(w.Cell,p(n(n({isTH:!!z},A(F||{})[0]),L),{className:[e.cellClassName,L.className].join(" "),onClick:R=>{L.onClick&&L.onClick(R),e.onCellClick&&e.onCellClick(C,R)},children:r(_.Left,{gap:"1/3",children:B})}),y)})}),String(a.row_id))})]})},Footer:o=>{let{input:e,val_config:t,set_config:i}=o;if(!e.footer)return null;let s=+!e.headerless+t.body.filter(d=>d.isVisible).length+1;return r(w.Row,p(n({},e.rowStyles),{children:e.header.map((d,l)=>{var z,O,P,T,H,L;let a=e.footer[d.key];if(!a)return null;b.isRecord(a)||(a={data:a});let[m,x]=A(a),E=x,{isTH:M,data:g,label:c,onLabelRender:y}=E,D=V(E,["isTH","data","label","onLabelRender"]),S={rowIdx:s-1,colIdx:l,topIdx:s-1,leftIdx:l,rightIdx:t.colLength-l-1,bottomIdx:0,isHeader:!1,isBody:!1,isFooter:!0},G=b.deepMerge(b.deepCopy(e.cellStyles),ne(S,{}),(z=e.cellStyles)==null?void 0:z.onBody,!S.leftIdx&&((O=e.cellStyles)==null?void 0:O.onLeft),!S.rightIdx&&((P=e.cellStyles)==null?void 0:P.onRight),!S.topIdx&&((T=e.cellStyles)==null?void 0:T.onTop),!S.bottomIdx&&((H=e.cellStyles)==null?void 0:H.onBottom),m);return e.onCellStyles&&(G=e.onCellStyles(S,G||{})),r(w.Cell,p(n(n({isTH:!!M},A(G||{})[0]),D),{className:[e.cellClassName,D.className].join(" "),onClick:C=>{D.onClick&&D.onClick(C),e.onCellClick&&e.onCellClick(S,C)},children:r(k,{flexSizing:0,children:(L=y==null?void 0:y(g))!=null?L:pe(c!=null?c:String(g),t.filter.keyword)})}),l)})}))}},ne=(o,e)=>{let t=n({},e);return o.topIdx||(t.borderTop="unset"),o.bottomIdx||(t.borderBottom="unset"),o.rightIdx||(t.borderRight="unset"),o.leftIdx||(t.borderLeft="unset"),o.topIdx||(o.leftIdx||(t.borderTopLeftRadius="inherit"),o.rightIdx||(t.borderTopRightRadius="inherit")),o.bottomIdx||(o.leftIdx||(t.borderBottomLeftRadius="inherit"),o.rightIdx||(t.borderBottomRightRadius="inherit")),t},we=o=>(o=n({datagridID:ge(),tone:"border",colLength:0,maxRows:100,onNoRecordsRender:()=>r(_.Center,{children:r(ae.Supplement,{fontColor:"4.thin",children:"(\u30C7\u30FC\u30BF\u306A\u3057)"})})},o),o.rowStyles=n({backgroundColor:"layer.0"},o.rowStyles),o.cellStyles=n(p(n({},b.scope(()=>{if(!o.tone)return{};let e={};return b.isOneOf(o.tone,"border","border.horizontal")&&(e.borderBottom="2.normal"),b.isOneOf(o.tone,"border","border.vertical")&&(e.borderRight="2.normal"),e})),{padding:"1/3",transition:"short"}),o.cellStyles),o.tone&&(o=n({border:!0,borderRadius:"2.tone.secondary",backgroundColor:"layer.1"},o)),o.header=o.header||[],o.header.forEach((e,t)=>{var i;e.sortable=(i=e.sortable)!=null?i:1,e.checkable===!0&&(e.checkable="left")}),r(I.index,n({},o))),ie={getBodyRows:o=>ce.get("rows-"+o)||[],Table:o=>r(k,p(n({htmlTag:"table",borderRadius:"inherit"},o),{border:o.border})),Head:o=>r(k,n({htmlTag:"thead",borderRadius:"inherit"},o)),Body:o=>r(k,n({htmlTag:"tbody",borderRadius:"inherit"},o)),Row:o=>r(k,n({htmlTag:"tr",borderRadius:"inherit"},o)),TH:o=>r(k,n({htmlTag:"th"},o)),TD:o=>r(k,n({htmlTag:"td"},o)),Cell:o=>{let i=o,{isTH:e}=i,t=V(i,["isTH"]);return e?r(ie.TH,n({},t)):r(ie.TD,n({},t))},RightIndicator:{unitWidth:3,data:"",label:r(v.AngleRight,{fontColor:"theme",fontSize:"4.thirdTitle"})},SearchInput:o=>{let d=o,{datagridID:e}=d,t=V(d,["datagridID"]),i=Y.catch(o.datagridID);if(!i)return console.warn("[DataGrid] SearchInput must be used inside DataGrid."),null;let{val_config:s}=i;return r(K.TextField,p(n({label:"\u691C\u7D22...",clearButton:!0,padding:["1/2","2/3"],rightIcon:r(K.RightIcon,{ssSphere:2,fontColor:"5.translucent",right:"2/3",children:r(v.Search,{})}),value:s.filter.keyword},t),{onUpdateValidValue:(...l)=>{t.onUpdateValidValue&&t.onUpdateValidValue(...l),i.remoteUpdate.searchKey(l[0])}}))},Info:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,i=t.body.filter(d=>d.isFilterMatched).length,s=i.ratio(t.paging.total)||0;return U(Ie,{verticalAlign:"baseline",gap:"1/2",fontSize:"1.mini",fontColor:"3.blur",children:[r(xe,{fontSize:"4.thirdTitle",fontColor:"theme",children:i.toLocaleString()}),"/ ",t.paging.total.toLocaleString(),"\u4EF6 (",s,"%)"]})},Paging:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,i=[];for(let d=0;d<t.paging.total;d++)i.push({value:d+1,label:(d+1).toString()});const s=d=>{let l=Math.min(Math.max(1,d),t.paging.total),a=n({},t);a.paging.current=l,e.remoteUpdate.paging(l)};return r(K.Select,{emptySelect:!1,padding:["1/3","2/3"],override:"force",gap:0,leftIcon:r(K.LeftIcon,{xcss:{left:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==1){s(t.paging.total);return}s(t.paging.current-1)},children:r(v.ChevronLeft,{})})}),rightIcon:r(K.RightIcon,{xcss:{right:2,pointerEvents:"all"},children:r(ee.Sub.S,{color:"cloud",fontColor:"4.thin",ssSquare:2.5,unitWidth:2,onClick:()=>{if(t.paging.current==t.paging.total){s(1);return}s(t.paging.current+1)},children:r(v.ChevronRight,{})})}),options:i.map(d=>({value:d.value||0,label:U(_.Left,{gap:"1/3",verticalAlign:"baseline",children:[d.label,U(ae,{fontColor:"4.thin",fontSize:"0.xs",children:["/ ",t.paging.total]})]})})),value:t.paging.current,onUpdateValidValue:d=>{s(d)}})},RowCount:o=>{let e=Y.catch(o.datagridID);if(!e)return null;let{val_config:t}=e,i=t.body.filter(a=>a.isFilterMatched).length,s=t.paging.rows,d=0,l=o.options.map(a=>(d|=+(a==s),{value:a,label:a.toString()}));return d||l.push({value:s,label:s.toString()}),r(_.Center,{gap:"1/2",children:r(K.Select,{emptySelect:!1,override:"force",padding:"1/3",paddingLeft:3,paddingRight:2,pickerStyles:{xcss:{minWidth:12*9}},pickerPosition:4,leftIcon:r(K.LeftIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{left:6},children:"\u8868\u793A"}),rightIcon:r(K.RightIcon,{fontSize:"0.xs",fontColor:"4.thin",xcss:{right:6},children:"\u4EF6"}),value:t.paging.rows,options:l.toASC("value"),onUpdateValidValue:a=>{e.remoteUpdate.maxRow(Number(a))}})})}},w=Object.assign(we,ie);export{w as DataGrid,w as default,ne as onDefaultCellStyles};

package/dist/index.d.ts

@@ -33,7 +33,7 @@ declare const amotify: {
     RightIcon: React.FC<fn.Parts.Input>;
     LeftIcon: React.FC<fn.Parts.Input>;
     Table: typeof fn.Table;
-    onDefaultCellStyles: (args: fn.DataGrid.CellPosition, prev: utils.StyleProps.StyleProps) => utils.StyleProps.StyleProps;
+    onDefaultCellStyles: (args: fn.DataGrid.CellInfo, prev: utils.StyleProps.StyleProps) => utils.StyleProps.StyleProps;
     DataGrid: fn.DataGrid.Methods;
     Sheet: fn.Sheet.Methods;
     Snackbar: fn.Snackbar.Methods;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.2.281",
+  "version": "0.2.283",
   "description": "UI Component for React,NextJS,esbuild",
   "scripts": {
     "start": "run-p clean build:*",
@@ -90,7 +90,7 @@
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@fortawesome/react-fontawesome": "^3.3.0",
     "dotenv": "^17.0.1",
-    "jmini": "^0.0.116",
+    "jmini": "^0.0.117",
     "react": "^19.2.3"
   },
   "devDependencies": {