amotify 0.2.288 → 0.2.290

package/dist/@utils/index.d.ts

@@ -2,6 +2,7 @@ export * from '../@declares';
 export * from './config';
 export * from './useRemote';
 export * from './useRouterEffect';
+export * from './useUpdateEffect';
 export * from './pageRouter';
 export * from './color';
 export * from './GenerateClassName';

package/dist/@utils/index.js

@@ -1 +1 @@
-export*from"../@declares";export*from"./config";export*from"./useRemote";export*from"./useRouterEffect";export*from"./pageRouter";export*from"./color";export*from"./GenerateClassName";export*from"./dragEffect";export*from"./LaunchReactApp";export*from"./getElement";
+export*from"../@declares";export*from"./config";export*from"./useRemote";export*from"./useRouterEffect";export*from"./useUpdateEffect";export*from"./pageRouter";export*from"./color";export*from"./GenerateClassName";export*from"./dragEffect";export*from"./LaunchReactApp";export*from"./getElement";

package/dist/@utils/useUpdateEffect.d.ts

@@ -0,0 +1,2 @@
+declare const useUpdateEffect: (effect: () => void | (() => void), deps: any[]) => void;
+export { useUpdateEffect, useUpdateEffect as default };

package/dist/@utils/useUpdateEffect.js

@@ -0,0 +1 @@
+import"../chunk-C5N2D3ZX.js";import{useEffect as f,useRef as n}from"react";const t=(r,u)=>{const e=n(!1);f(()=>{if(!e.current){e.current=!0;return}return r()},u)};export{t as default,t as useUpdateEffect};

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

@@ -1,4 +1,3 @@
-import { Records } from 'jmini';
 import { ReactElement, StyleProps } from '../../@declares';
 import React from 'react';
 import Input from '../Input';
@@ -62,28 +61,25 @@ declare namespace DataGrid {
         };
     }
     type Header<K extends KeyType = KeyType> = Cell.Header<K>[];
-    namespace Body {
-        type MetaRecord = {
-            row_id?: RowID;
-            /**
-             * for checker
-             */
-            isSelected?: boolean;
-            isFilterMatched?: boolean;
-            isVisible?: boolean;
-            draggerIndex?: number;
-            onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
-        };
-        type Row<K extends KeyType = KeyType, T = DataType> = MetaRecord & Partial<Record<K, Cell.Body<T> | KeyType | boolean | Function>>;
-        type StrictRow<K extends KeyType = KeyType, T = DataType> = MetaRecord & Partial<Record<K, Cell.Body<T>>>;
-    }
-    type Body<K extends KeyType = KeyType> = Body.Row<K>[];
-    type StrictBody<K extends KeyType = KeyType> = Body.StrictRow<K>[];
+    type RowMeta = {
+        row_id?: RowID;
+        /**
+         * for checker
+         */
+        isSelected?: boolean;
+        isFilterMatched?: boolean;
+        isVisible?: boolean;
+        draggerIndex?: number;
+        onRowClick?(event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+    };
+    type Row<K extends KeyType = KeyType, T = DataType> = RowMeta & Partial<Record<K, Cell.Body<T> | KeyType | boolean | Function>>;
+    type StrictRow<K extends KeyType = KeyType, T = DataType> = RowMeta & Partial<Record<K, Cell.Body<T>>>;
+    type Body<K extends KeyType = KeyType> = Row<K>[];
+    type StrictBody<K extends KeyType = KeyType> = StrictRow<K>[];
     type Footer<K extends KeyType = KeyType, T = DataType> = Partial<Record<K, Cell.Footer<T> | RowID>>;
     type Input<K extends KeyType = KeyType> = {
         tone?: Tones;
         datagridID?: string;
-        props?: Records;
         /**
          * default 100
          */
@@ -110,16 +106,17 @@ declare namespace DataGrid {
         onCellStyles?(props: CellInfo, def: StyleProps.StyleProps): StyleProps.StyleProps;
         className?: string;
         onNoRecordsRender?(): ReactElement;
-        onRowClick?(row: Body.Row, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
+        onRowClick?(row: Row, event: React.MouseEvent<HTMLTableRowElement, MouseEvent>): void;
         onCellClick?(opt: CellInfo, event: React.MouseEvent<HTMLTableCellElement, MouseEvent>): void;
         onSorted?(col: number, sort: SortType): void;
-        onSelected?(rows: Body.StrictRow<K>[]): void;
-        onDragged?(rows: Body.StrictRow<K>[]): void;
+        onSelected?(rows: StrictRow<K>[]): void;
+        onDragged?(rows: StrictRow<K>[]): void;
     } & StyleProps.States;
     type Component = <K extends KeyType = KeyType>(props: DataGrid.Input<K>) => React.JSX.Element;
     type FNs = {
         toSafetyBody<K extends KeyType = KeyType>(body: Body<K>): StrictBody<K>;
         getBodyRows(datagridID: string): Body[];
+        remoteRefresh(datagridID: string): void;
         Table: React.FC<Table>;
         Head: React.FC<TableHead>;
         Body: React.FC<TableBody>;

package/dist/fn/DataGrid/index.js

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

package/dist/index.d.ts

@@ -77,6 +77,7 @@ declare const amotify: {
         afterCB?: ((pathName: string) => void) | undefined;
         afterFirstCB?: ((pathName: string) => void) | undefined;
     }) => void;
+    useUpdateEffect: (effect: () => void | (() => void), deps: any[]) => void;
     pageRouter: utils.pageRouter.Methods;
     ColorObjects: {
         key: utils.ThemeColor;

package/package.json

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