@ioca/react 1.4.80 → 1.5.1

package/lib/es/components/collapse/collapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapse.js","names":[],"sources":["../../../../packages/components/collapse/collapse.tsx"],"sourcesContent":["import { MinusRound, PlusRound } from \"@ricons/material\";\nimport classNames from \"classnames\";\nimport { Children, useMemo, useState } from \"react\";\nimport Helpericon from \"../utils/helpericon\";\nimport \"./index.css\";\nimport Item from \"./item\";\nimport { ICollapse, ICollapseItem, TKey } from \"./type\";\n\nconst Collapse = (props: ICollapse) => {\n\tconst {\n\t\tactive,\n\t\titems,\n\t\tmultiple,\n\t\tborder,\n\t\theaderClickable,\n\t\tclassName,\n\t\tchildren,\n\t\trenderToggle = (active: boolean) =>\n\t\t\tactive ? <MinusRound /> : <PlusRound />,\n\t\tonCollapse,\n\t\t...restProps\n\t} = props;\n\n\tconst [activeKey, setActiveKey] = useState(active);\n\n\tconst collapses = useMemo(() => {\n\t\tif (!items) {\n\t\t\tif (!children) return [];\n\n\t\t\treturn (\n\t\t\t\tChildren.map(children, (node, i) => {\n\t\t\t\t\tconst { key, props: nodeProps } = node as {\n\t\t\t\t\t\tkey?: TKey;\n\t\t\t\t\t\tprops?: any;\n\t\t\t\t\t};\n\t\t\t\t\tconst { title, children, content, disabled, ...restProps } =\n\t\t\t\t\t\tnodeProps;\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...restProps,\n\t\t\t\t\t\tkey: key || i,\n\t\t\t\t\t\ttitle,\n\t\t\t\t\t\tcontent: children || content,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t};\n\t\t\t\t}) || []\n\t\t\t);\n\t\t}\n\n\t\treturn items;\n\t}, [children]);\n\n\tconst handleHeaderClick = (item: ICollapseItem) => {\n\t\tif (!headerClickable) return;\n\n\t\thandleToggle(item);\n\t};\n\n\tconst handleToggle = (item: ICollapseItem, e?) => {\n\t\tconst { key, disabled } = item;\n\t\te?.stopPropagation();\n\t\tif (disabled) return;\n\n\t\tif (!multiple) {\n\t\t\tconst nextActive = activeKey === key ? undefined : key;\n\t\t\tsetActiveKey(nextActive);\n\t\t\tonCollapse?.(key as TKey, nextActive !== undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tconst group = Array.isArray(activeKey) ? [...activeKey] : [];\n\n\t\tconst i = group.findIndex((k) => k === key);\n\n\t\tif (i > -1) {\n\t\t\tgroup.splice(i, 1);\n\t\t} else {\n\t\t\tkey !== undefined && group.push(key);\n\t\t}\n\t\tsetActiveKey(group as any);\n\t\tonCollapse?.(key as TKey, i < 0);\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\n\t\t\t\t\"i-collapse\",\n\t\t\t\t{\n\t\t\t\t\t\"i-collapse-bordered\": border,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...restProps}\n\t\t>\n\t\t\t{collapses.map((item) => {\n\t\t\t\tconst {\n\t\t\t\t\tkey,\n\t\t\t\t\ttitle,\n\t\t\t\t\tcontent,\n\t\t\t\t\tdisabled,\n\t\t\t\t\tclassName,\n\t\t\t\t\t...restProps\n\t\t\t\t} = item;\n\t\t\t\tconst isActive = multiple\n\t\t\t\t\t? ((activeKey as TKey[]) || []).includes(key)\n\t\t\t\t\t: activeKey === key;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\tclassName={classNames(\"i-collapse-item\", className, {\n\t\t\t\t\t\t\t\"i-collapse-active\": isActive,\n\t\t\t\t\t\t\t\"i-collapse-disabled\": disabled,\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{...restProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName='i-collapse-header'\n\t\t\t\t\t\t\tonClick={() => handleHeaderClick(item)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\n\t\t\t\t\t\t\t<Helpericon\n\t\t\t\t\t\t\t\tactive\n\t\t\t\t\t\t\t\tclassName='i-collapse-toggle'\n\t\t\t\t\t\t\t\ticon={renderToggle(isActive)}\n\t\t\t\t\t\t\t\tonClick={(e) => handleToggle(item, e)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className='i-collapse-content'>{content}</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n};\n\nCollapse.Item = Item;\n\nexport default Collapse;\n"],"mappings":""}
+{"version":3,"file":"collapse.js","sources":["../../../../packages/components/collapse/collapse.tsx"],"sourcesContent":["import { MinusRound, PlusRound } from \"@ricons/material\";\r\nimport classNames from \"classnames\";\r\nimport { Children, useMemo, useState } from \"react\";\r\nimport Helpericon from \"../utils/helpericon\";\r\nimport \"./index.css\";\r\nimport Item from \"./item\";\r\nimport { ICollapse, ICollapseItem, TKey } from \"./type\";\r\n\r\nconst Collapse = (props: ICollapse) => {\r\n\tconst {\r\n\t\tactive,\r\n\t\titems,\r\n\t\tmultiple,\r\n\t\tborder,\r\n\t\theaderClickable,\r\n\t\tclassName,\r\n\t\tchildren,\r\n\t\trenderToggle = (active: boolean) =>\r\n\t\t\tactive ? <MinusRound /> : <PlusRound />,\r\n\t\tonCollapse,\r\n\t\t...restProps\r\n\t} = props;\r\n\r\n\tconst [activeKey, setActiveKey] = useState(active);\r\n\r\n\tconst collapses = useMemo(() => {\r\n\t\tif (!items) {\r\n\t\t\tif (!children) return [];\r\n\r\n\t\t\treturn (\r\n\t\t\t\tChildren.map(children, (node, i) => {\r\n\t\t\t\t\tconst { key, props: nodeProps } = node as {\r\n\t\t\t\t\t\tkey?: TKey;\r\n\t\t\t\t\t\tprops?: any;\r\n\t\t\t\t\t};\r\n\t\t\t\t\tconst { title, children, content, disabled, ...restProps } =\r\n\t\t\t\t\t\tnodeProps;\r\n\r\n\t\t\t\t\treturn {\r\n\t\t\t\t\t\t...restProps,\r\n\t\t\t\t\t\tkey: key || i,\r\n\t\t\t\t\t\ttitle,\r\n\t\t\t\t\t\tcontent: children || content,\r\n\t\t\t\t\t\tdisabled,\r\n\t\t\t\t\t};\r\n\t\t\t\t}) || []\r\n\t\t\t);\r\n\t\t}\r\n\r\n\t\treturn items;\r\n\t}, [children]);\r\n\r\n\tconst handleHeaderClick = (item: ICollapseItem) => {\r\n\t\tif (!headerClickable) return;\r\n\r\n\t\thandleToggle(item);\r\n\t};\r\n\r\n\tconst handleToggle = (item: ICollapseItem, e?) => {\r\n\t\tconst { key, disabled } = item;\r\n\t\te?.stopPropagation();\r\n\t\tif (disabled) return;\r\n\r\n\t\tif (!multiple) {\r\n\t\t\tconst nextActive = activeKey === key ? undefined : key;\r\n\t\t\tsetActiveKey(nextActive);\r\n\t\t\tonCollapse?.(key as TKey, nextActive !== undefined);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tconst group = Array.isArray(activeKey) ? [...activeKey] : [];\r\n\r\n\t\tconst i = group.findIndex((k) => k === key);\r\n\r\n\t\tif (i > -1) {\r\n\t\t\tgroup.splice(i, 1);\r\n\t\t} else {\r\n\t\t\tkey !== undefined && group.push(key);\r\n\t\t}\r\n\t\tsetActiveKey(group as any);\r\n\t\tonCollapse?.(key as TKey, i < 0);\r\n\t};\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={classNames(\r\n\t\t\t\t\"i-collapse\",\r\n\t\t\t\t{\r\n\t\t\t\t\t\"i-collapse-bordered\": border,\r\n\t\t\t\t},\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t\t{...restProps}\r\n\t\t>\r\n\t\t\t{collapses.map((item) => {\r\n\t\t\t\tconst {\r\n\t\t\t\t\tkey,\r\n\t\t\t\t\ttitle,\r\n\t\t\t\t\tcontent,\r\n\t\t\t\t\tdisabled,\r\n\t\t\t\t\tclassName,\r\n\t\t\t\t\t...restProps\r\n\t\t\t\t} = item;\r\n\t\t\t\tconst isActive = multiple\r\n\t\t\t\t\t? ((activeKey as TKey[]) || []).includes(key)\r\n\t\t\t\t\t: activeKey === key;\r\n\r\n\t\t\t\treturn (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={key}\r\n\t\t\t\t\t\tclassName={classNames(\"i-collapse-item\", className, {\r\n\t\t\t\t\t\t\t\"i-collapse-active\": isActive,\r\n\t\t\t\t\t\t\t\"i-collapse-disabled\": disabled,\r\n\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t{...restProps}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclassName='i-collapse-header'\r\n\t\t\t\t\t\t\tonClick={() => handleHeaderClick(item)}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t{title}\r\n\r\n\t\t\t\t\t\t\t<Helpericon\r\n\t\t\t\t\t\t\t\tactive\r\n\t\t\t\t\t\t\t\tclassName='i-collapse-toggle'\r\n\t\t\t\t\t\t\t\ticon={renderToggle(isActive)}\r\n\t\t\t\t\t\t\t\tonClick={(e) => handleToggle(item, e)}\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t\t<div className='i-collapse-content'>{content}</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t);\r\n\t\t\t})}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nCollapse.Item = Item;\r\n\r\nexport default Collapse;\r\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/lib/es/components/collapse/index.js

@@ -1,7 +1,6 @@
-import Collapse from "./collapse.js";
-//#region packages/components/collapse/index.tsx
-var collapse_default = Collapse;
-//#endregion
-export { collapse_default as default };
+import Collapse from './collapse.js';
 
-//# sourceMappingURL=index.js.map
+
+
+export { Collapse as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/collapse/index.tsx"],"sourcesContent":["import Collapse from \"./collapse\";\n\nexport default Collapse;\n"],"mappings":";;AAEA,IAAA,mBAAe"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/collapse/item.js

@@ -1,9 +1,8 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-//#region packages/components/collapse/item.tsx
+import { jsx, Fragment } from 'react/jsx-runtime';
+
 function Item(props) {
-	return /* @__PURE__ */ jsx(Fragment, {});
+    return jsx(Fragment, {});
 }
-//#endregion
-export { Item as default };
 
-//# sourceMappingURL=item.js.map
+export { Item as default };
+//# sourceMappingURL=item.js.map

package/lib/es/components/collapse/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":[],"sources":["../../../../packages/components/collapse/item.tsx"],"sourcesContent":["import { ICollapseItem } from \"./type\";\n\nexport default function Item(props: ICollapseItem) {\n\treturn <></>;\n}\n"],"mappings":";;AAEA,SAAwB,KAAK,OAAsB;AAClD,QAAO,oBAAA,UAAA,EAAK,CAAA"}
+{"version":3,"file":"item.js","sources":["../../../../packages/components/collapse/item.tsx"],"sourcesContent":["import { ICollapseItem } from \"./type\";\r\n\r\nexport default function Item(props: ICollapseItem) {\r\n\treturn <></>;\r\n}\r\n"],"names":["_jsx"],"mappings":";;AAEc,SAAU,IAAI,CAAC,KAAoB,EAAA;AAChD,IAAA,OAAOA,iBAAK;AACb;;;;"}

package/lib/es/components/datagrid/cell.js

@@ -1,36 +1,24 @@
-import classNames from "classnames";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/datagrid/cell.tsx
-function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1 }) {
-	return {
-		"--datagrid-justify": justify,
-		gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
-		insetInline: `var(--datagrid-cell-inset-${col})`
-	};
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function getCellStyle({ justify, col, row, colSpan = 1, rowSpan = 1, }) {
+    const style = {
+        "--datagrid-justify": justify,
+        gridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${col + 1 + colSpan}`,
+        insetInline: `var(--datagrid-cell-inset-${col})`,
+    };
+    return style;
 }
 function Cell(props) {
-	const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick } = props;
-	const { id, fixed, justify, rowSpan, render } = column;
-	const style = getCellStyle({
-		justify,
-		fixed,
-		col,
-		row,
-		rowSpan
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: classNames("i-datagrid-cell", { [`i-datagrid-cell-fixed-${fixed}`]: fixed }),
-		"data-col": id,
-		style,
-		onClick: (e) => onCellClick?.(data, column, row, col, e),
-		onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e),
-		children: render?.(data[id], data, row, col) ?? /* @__PURE__ */ jsx("div", {
-			className: classNames("i-datagrid-cell-content", { "i-datagrid-cell-content-ellipsis": cellEllipsis }),
-			children: data[id]
-		})
-	});
+    const { column, row, col, data, cellEllipsis, onCellClick, onCellDoubleClick, } = props;
+    const { id, fixed, justify, rowSpan, render } = column;
+    const style = getCellStyle({ justify, col, row, rowSpan });
+    return (jsx("div", { className: classNames("i-datagrid-cell", {
+            [`i-datagrid-cell-fixed-${fixed}`]: fixed,
+        }), "data-col": id, style: style, onClick: (e) => onCellClick?.(data, column, row, col, e), onDoubleClick: (e) => onCellDoubleClick?.(data, column, row, col, e), children: render?.(data[id], data, row, col) ?? (jsx("div", { className: classNames("i-datagrid-cell-content", {
+                "i-datagrid-cell-content-ellipsis": cellEllipsis,
+            }), children: data[id] })) }));
 }
-//#endregion
-export { Cell, getCellStyle };
 
-//# sourceMappingURL=cell.js.map
+export { Cell, getCellStyle };
+//# sourceMappingURL=cell.js.map

package/lib/es/components/datagrid/cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"cell.js","names":[],"sources":["../../../../packages/components/datagrid/cell.tsx"],"sourcesContent":["import classNames from \"classnames\";\nimport { ICell, IColumn } from \"./type\";\n\nexport function getCellStyle({\n\tjustify,\n\tcol,\n\trow,\n\tcolSpan = 1,\n\trowSpan = 1,\n}: Pick<IColumn, \"justify\" | \"fixed\"> & {\n\tcol: number;\n\trow: number;\n\tcolSpan?: number;\n\trowSpan?: number;\n\tisHeader?: boolean;\n}) {\n\tconst style = {\n\t\t\"--datagrid-justify\": justify,\n\t\tgridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${\n\t\t\tcol + 1 + colSpan\n\t\t}`,\n\t\tinsetInline: `var(--datagrid-cell-inset-${col})`,\n\t};\n\n\treturn style;\n}\n\nexport function Cell(props: ICell) {\n\tconst {\n\t\tcolumn,\n\t\trow,\n\t\tcol,\n\t\tdata,\n\t\tcellEllipsis,\n\t\tonCellClick,\n\t\tonCellDoubleClick,\n\t} = props;\n\tconst { id, fixed, justify, rowSpan, render } = column;\n\tconst style = getCellStyle({ justify, fixed, col, row, rowSpan });\n\n\treturn (\n\t\t<div\n\t\t\tclassName={classNames(\"i-datagrid-cell\", {\n\t\t\t\t[`i-datagrid-cell-fixed-${fixed}`]: fixed,\n\t\t\t})}\n\t\t\tdata-col={id}\n\t\t\tstyle={style}\n\t\t\tonClick={(e) => onCellClick?.(data, column, row, col, e)}\n\t\t\tonDoubleClick={(e) =>\n\t\t\t\tonCellDoubleClick?.(data, column, row, col, e)\n\t\t\t}\n\t\t>\n\t\t\t{render?.(data[id], data, row, col) ?? (\n\t\t\t\t<div\n\t\t\t\t\tclassName={classNames(\"i-datagrid-cell-content\", {\n\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\": cellEllipsis,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{data[id]}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;AAGA,SAAgB,aAAa,EAC5B,SACA,KACA,KACA,UAAU,GACV,UAAU,KAOR;AASF,QARc;EACb,sBAAsB;EACtB,UAAU,GAAG,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,IAAI,QAAQ,KACxD,MAAM,IAAI;EAEX,aAAa,6BAA6B,IAAI;EAC9C;;AAKF,SAAgB,KAAK,OAAc;CAClC,MAAM,EACL,QACA,KACA,KACA,MACA,cACA,aACA,sBACG;CACJ,MAAM,EAAE,IAAI,OAAO,SAAS,SAAS,WAAW;CAChD,MAAM,QAAQ,aAAa;EAAE;EAAS;EAAO;EAAK;EAAK;EAAS,CAAC;AAEjE,QACC,oBAAC,OAAD;EACC,WAAW,WAAW,mBAAmB,GACvC,yBAAyB,UAAU,OACpC,CAAC;EACF,YAAU;EACH;EACP,UAAU,MAAM,cAAc,MAAM,QAAQ,KAAK,KAAK,EAAE;EACxD,gBAAgB,MACf,oBAAoB,MAAM,QAAQ,KAAK,KAAK,EAAE;YAG9C,SAAS,KAAK,KAAK,MAAM,KAAK,IAAI,IAClC,oBAAC,OAAD;GACC,WAAW,WAAW,2BAA2B,EAChD,oCAAoC,cACpC,CAAC;aAED,KAAK;GACD,CAAA;EAEF,CAAA"}
+{"version":3,"file":"cell.js","sources":["../../../../packages/components/datagrid/cell.tsx"],"sourcesContent":["import classNames from \"classnames\";\r\nimport { ICell, IColumn } from \"./type\";\r\n\r\nexport function getCellStyle({\r\n\tjustify,\r\n\tcol,\r\n\trow,\r\n\tcolSpan = 1,\r\n\trowSpan = 1,\r\n}: Pick<IColumn, \"justify\" | \"fixed\"> & {\r\n\tcol: number;\r\n\trow: number;\r\n\tcolSpan?: number;\r\n\trowSpan?: number;\r\n\tisHeader?: boolean;\r\n}) {\r\n\tconst style = {\r\n\t\t\"--datagrid-justify\": justify,\r\n\t\tgridArea: `${row + 1} / ${col + 1} / ${row + 1 + rowSpan} / ${\r\n\t\t\tcol + 1 + colSpan\r\n\t\t}`,\r\n\t\tinsetInline: `var(--datagrid-cell-inset-${col})`,\r\n\t};\r\n\r\n\treturn style;\r\n}\r\n\r\nexport function Cell(props: ICell) {\r\n\tconst {\r\n\t\tcolumn,\r\n\t\trow,\r\n\t\tcol,\r\n\t\tdata,\r\n\t\tcellEllipsis,\r\n\t\tonCellClick,\r\n\t\tonCellDoubleClick,\r\n\t} = props;\r\n\tconst { id, fixed, justify, rowSpan, render } = column;\r\n\tconst style = getCellStyle({ justify, fixed, col, row, rowSpan });\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tclassName={classNames(\"i-datagrid-cell\", {\r\n\t\t\t\t[`i-datagrid-cell-fixed-${fixed}`]: fixed,\r\n\t\t\t})}\r\n\t\t\tdata-col={id}\r\n\t\t\tstyle={style}\r\n\t\t\tonClick={(e) => onCellClick?.(data, column, row, col, e)}\r\n\t\t\tonDoubleClick={(e) =>\r\n\t\t\t\tonCellDoubleClick?.(data, column, row, col, e)\r\n\t\t\t}\r\n\t\t>\r\n\t\t\t{render?.(data[id], data, row, col) ?? (\r\n\t\t\t\t<div\r\n\t\t\t\t\tclassName={classNames(\"i-datagrid-cell-content\", {\r\n\t\t\t\t\t\t\"i-datagrid-cell-content-ellipsis\": cellEllipsis,\r\n\t\t\t\t\t})}\r\n\t\t\t\t>\r\n\t\t\t\t\t{data[id]}\r\n\t\t\t\t</div>\r\n\t\t\t)}\r\n\t\t</div>\r\n\t);\r\n}\r\n"],"names":["_jsx"],"mappings":";;;SAGgB,YAAY,CAAC,EAC5B,OAAO,EACP,GAAG,EACH,GAAG,EACH,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,GAOX,EAAA;AACA,IAAA,MAAM,KAAK,GAAG;AACb,QAAA,oBAAoB,EAAE,OAAO;QAC7B,QAAQ,EAAE,GAAG,GAAG,GAAG,CAAC,CAAA,GAAA,EAAM,GAAG,GAAG,CAAC,CAAA,GAAA,EAAM,GAAG,GAAG,CAAC,GAAG,OAAO,CAAA,GAAA,EACvD,GAAG,GAAG,CAAC,GAAG,OACX,CAAA,CAAE;QACF,WAAW,EAAE,CAAA,0BAAA,EAA6B,GAAG,CAAA,CAAA,CAAG;KAChD;AAED,IAAA,OAAO,KAAK;AACb;AAEM,SAAU,IAAI,CAAC,KAAY,EAAA;AAChC,IAAA,MAAM,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,IAAI,EACJ,YAAY,EACZ,WAAW,EACX,iBAAiB,GACjB,GAAG,KAAK;AACT,IAAA,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,MAAM;AACtD,IAAA,MAAM,KAAK,GAAG,YAAY,CAAC,EAAE,OAAO,EAAS,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC;AAEjE,IAAA,QACCA,GAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;AACxC,YAAA,CAAC,CAAA,sBAAA,EAAyB,KAAK,CAAA,CAAE,GAAG,KAAK;AACzC,SAAA,CAAC,EAAA,UAAA,EACQ,EAAE,EACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAC,KAAK,WAAW,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EACxD,aAAa,EAAE,CAAC,CAAC,KAChB,iBAAiB,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAA,QAAA,EAG9C,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,KAClCA,aACC,SAAS,EAAE,UAAU,CAAC,yBAAyB,EAAE;AAChD,gBAAA,kCAAkC,EAAE,YAAY;aAChD,CAAC,EAAA,QAAA,EAED,IAAI,CAAC,EAAE,CAAC,EAAA,CACJ,CACN,EAAA,CACI;AAER;;;;"}

package/lib/es/components/datagrid/datagrid.js

@@ -1,138 +1,113 @@
-import loading_default from "../loading/index.js";
-import { useReactive } from "../../js/hooks.js";
-import { getNextSorter } from "../../js/utils.js";
-import Empty from "../utils/empty/index.js";
-import Row, { Header } from "./row.js";
-import classNames from "classnames";
-import { useEffect, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/components/datagrid/datagrid.tsx
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useReactive } from '../../js/hooks.js';
+import classNames from 'classnames';
+import { useRef, useMemo, useEffect } from 'react';
+import { getNextSorter } from '../../js/utils.js';
+import Loading from '../loading/loading.js';
+import Empty from '../utils/empty/index.js';
+import Row, { Header } from './row.js';
+
 const Datagrid = (props) => {
-	const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = /* @__PURE__ */ jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => /* @__PURE__ */ jsx(loading_default, {
-		size: "1.5em",
-		className: "color-3",
-		absolute: true
-	}), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize } = props;
-	const container = useRef(null);
-	const state = useReactive({
-		rows: data,
-		widths: columns.map((col) => col.width ?? "min-content"),
-		sortBy: "",
-		sortType: ""
-	});
-	const styles = useMemo(() => {
-		const { widths } = state;
-		const o = {
-			...style,
-			"--grid-template-columns": widths.map((w) => {
-				return typeof w === "number" ? `${w}px` : w;
-			}).join(" ")
-		};
-		if (!resizable) return o;
-		const fws = columns.map((col, i) => {
-			const { fixed } = col;
-			if (!fixed) return 0;
-			return widths[i];
-		});
-		columns.map((col, i) => {
-			const { fixed } = col;
-			if (!fixed) return;
-			if (i === 0) o[`--datagrid-cell-inset-0`] = 0;
-			else if (i === fws.length - 1) o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
-			else {
-				const isLeft = fixed === "left";
-				const sum = (isLeft ? fws.slice(0, i) : fws.slice(i + 1)).reduce((pre, cur) => pre + cur) + "px";
-				const result = isLeft ? `${sum} auto` : `auto ${sum}`;
-				o[`--datagrid-cell-inset-${i}`] = result;
-			}
-		});
-		return o;
-	}, [state.widths, resizable]);
-	const handleWidthChange = (i, w) => {
-		if (!resizable) return;
-		const [ ...ws] = state.widths;
-		ws[i] = w;
-		state.widths = ws;
-		onResize?.(columns[i], w);
-	};
-	const handleHeaderClick = (column, e) => {
-		if (column?.sorter) {
-			const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
-			Object.assign(state, {
-				sortBy,
-				sortType
-			});
-			onSort?.(sortBy, sortType);
-		}
-		onHeaderClick?.(column, e);
-	};
-	const rows = useMemo(() => {
-		const { sortBy, sortType } = state;
-		if (sortBy && !onSort) {
-			const sorter = columns.find((col) => col.id === sortBy)?.sorter;
-			const sortFn = typeof sorter === "function" ? sorter : (a, b) => b[sortBy] - a[sortBy];
-			const sorted = [...data].sort(sortFn);
-			return sortType === "desc" ? sorted : sorted.reverse();
-		}
-		return data;
-	}, [
-		data,
-		columns,
-		state.sortBy,
-		state.sortType
-	]);
-	useEffect(() => {
-		if (!container.current) return;
-		const { current: div } = container;
-		const tds = div.querySelector(".i-datagrid-row")?.children;
-		if (!tds?.length) return;
-		state.widths = Array.from(tds).map((node) => node.offsetWidth);
-	}, [columns, resizable]);
-	useEffect(() => {
-		loading && container.current?.scrollTo({
-			top: 0,
-			left: 0
-		});
-	}, [loading]);
-	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			maxHeight: height,
-			"--cell-padding": cellPadding,
-			...styles
-		},
-		className: classNames("i-datagrid-container", className, {
-			"i-datagrid-bordered": border,
-			"i-datagrid-striped": striped
-		}),
-		children: [/* @__PURE__ */ jsxs("div", {
-			ref: container,
-			className: classNames("i-datagrid", { "i-datagrid-loading": loading }),
-			onWheel: onScroll,
-			children: [
-				header && /* @__PURE__ */ jsx(Header, {
-					columns,
-					resizable,
-					sortType: state.sortType,
-					sortBy: state.sortBy,
-					cellEllipsis,
-					onWidthChange: handleWidthChange,
-					onHeaderClick: handleHeaderClick
-				}),
-				rows.map((row, i) => /* @__PURE__ */ jsx(Row, {
-					row: i + (header ? 1 : 0),
-					data: row,
-					cellEllipsis,
-					columns,
-					onCellClick,
-					onRowClick,
-					onCellDoubleClick
-				}, i)),
-				rows.length < 1 && empty
-			]
-		}), loading && renderLoading()]
-	});
+    const { data = [], columns = [], border, striped, header = true, resizable, cellPadding = ".5em", cellEllipsis, empty = jsx(Empty, {}), loading, height = "unset", style, className, renderLoading = () => (jsx(Loading, { size: '1.5em', className: 'color-3', absolute: true })), onCellClick, onRowClick, onCellDoubleClick, onHeaderClick, onSort, onScroll, onResize, } = props;
+    const container = useRef(null);
+    const state = useReactive({
+        rows: data,
+        widths: columns.map((col) => col.width ?? "min-content"),
+        sortBy: "",
+        sortType: "",
+    });
+    const styles = useMemo(() => {
+        const { widths } = state;
+        const o = {
+            ...style,
+            "--grid-template-columns": widths
+                .map((w) => {
+                return typeof w === "number" ? `${w}px` : w;
+            })
+                .join(" "),
+        };
+        if (!resizable)
+            return o;
+        const fws = columns.map((col, i) => {
+            const { fixed } = col;
+            if (!fixed)
+                return 0;
+            return widths[i];
+        });
+        columns.map((col, i) => {
+            const { fixed } = col;
+            if (!fixed)
+                return;
+            if (i === 0) {
+                o[`--datagrid-cell-inset-0`] = 0;
+            }
+            else if (i === fws.length - 1) {
+                o[`--datagrid-cell-inset-${fws.length - 1}`] = "auto 0";
+            }
+            else {
+                const isLeft = fixed === "left";
+                const before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);
+                const sum = before.reduce((pre, cur) => pre + cur) + "px";
+                const result = isLeft ? `${sum} auto` : `auto ${sum}`;
+                o[`--datagrid-cell-inset-${i}`] = result;
+            }
+        });
+        return o;
+    }, [state.widths, resizable]);
+    const handleWidthChange = (i, w) => {
+        if (!resizable)
+            return;
+        const [...ws] = state.widths;
+        ws[i] = w;
+        state.widths = ws;
+        onResize?.(columns[i], w);
+    };
+    const handleHeaderClick = (column, e) => {
+        if (column?.sorter) {
+            const [sortBy, sortType] = getNextSorter(state.sortBy, state.sortType, column.id);
+            Object.assign(state, {
+                sortBy,
+                sortType,
+            });
+            onSort?.(sortBy, sortType);
+        }
+        onHeaderClick?.(column, e);
+    };
+    const rows = useMemo(() => {
+        const { sortBy, sortType } = state;
+        if (sortBy && !onSort) {
+            const sorter = columns.find((col) => col.id === sortBy)?.sorter;
+            const sortFn = typeof sorter === "function"
+                ? sorter
+                : (a, b) => b[sortBy] - a[sortBy];
+            const sorted = [...data].sort(sortFn);
+            return sortType === "desc" ? sorted : sorted.reverse();
+        }
+        return data;
+    }, [data, columns, state.sortBy, state.sortType]);
+    useEffect(() => {
+        if (!container.current)
+            return;
+        const { current: div } = container;
+        const tds = div.querySelector(".i-datagrid-row")?.children;
+        if (!tds?.length)
+            return;
+        state.widths = Array.from(tds).map((node) => node.offsetWidth);
+    }, [columns, resizable]);
+    useEffect(() => {
+        loading && container.current?.scrollTo({ top: 0, left: 0 });
+    }, [loading]);
+    const mergedStyle = {
+        "--cell-padding": cellPadding,
+        ...styles,
+    };
+    return (jsxs("div", { style: { maxHeight: height, ...mergedStyle }, className: classNames("i-datagrid-container", className, {
+            "i-datagrid-bordered": border,
+            "i-datagrid-striped": striped,
+        }), children: [jsxs("div", { ref: container, className: classNames("i-datagrid", {
+                    "i-datagrid-loading": loading,
+                }), onWheel: onScroll, children: [header && (jsx(Header, { columns: columns, resizable: resizable, sortType: state.sortType, sortBy: state.sortBy, cellEllipsis: cellEllipsis, onWidthChange: handleWidthChange, onHeaderClick: handleHeaderClick })), rows.map((row, i) => (jsx(Row, { row: i + (header ? 1 : 0), data: row, cellEllipsis: cellEllipsis, columns: columns, onCellClick: onCellClick, onRowClick: onRowClick, onCellDoubleClick: onCellDoubleClick }, i))), rows.length < 1 && empty] }), loading && renderLoading()] }));
 };
-//#endregion
-export { Datagrid as default };
 
-//# sourceMappingURL=datagrid.js.map
+export { Datagrid as default };
+//# sourceMappingURL=datagrid.js.map

package/lib/es/components/datagrid/datagrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid.js","names":[],"sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import { useReactive } from \"../../js/hooks\";\nimport classNames from \"classnames\";\nimport { CSSProperties, MouseEvent, useEffect, useMemo, useRef } from \"react\";\nimport { getNextSorter } from \"../../js/utils\";\nimport Loading from \"../loading\";\nimport Empty from \"../utils/empty\";\nimport \"./index.css\";\nimport Row, { Header } from \"./row\";\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\n\nconst Datagrid = (props: IDatagrid) => {\n\tconst {\n\t\tdata = [],\n\t\tcolumns = [],\n\t\tborder,\n\t\tstriped,\n\t\theader = true,\n\t\tresizable,\n\t\tcellPadding = \".5em\",\n\t\tcellEllipsis,\n\t\tempty = <Empty />,\n\t\tloading,\n\t\theight = \"unset\",\n\t\tstyle,\n\t\tclassName,\n\t\trenderLoading = () => (\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\n\t\t),\n\t\tonCellClick,\n\t\tonRowClick,\n\t\tonCellDoubleClick,\n\t\tonHeaderClick,\n\t\tonSort,\n\t\tonScroll,\n\t\tonResize,\n\t} = props;\n\n\tconst container = useRef<HTMLDivElement>(null);\n\tconst state = useReactive<TDatagridState>({\n\t\trows: data,\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\n\t\tsortBy: \"\",\n\t\tsortType: \"\",\n\t});\n\n\tconst styles = useMemo(() => {\n\t\tconst { widths } = state;\n\n\t\tconst o = {\n\t\t\t...style,\n\t\t\t\"--grid-template-columns\": widths\n\t\t\t\t.map((w) => {\n\t\t\t\t\treturn typeof w === \"number\" ? `${w}px` : w;\n\t\t\t\t})\n\t\t\t\t.join(\" \"),\n\t\t};\n\n\t\tif (!resizable) return o;\n\n\t\tconst fws = columns.map((col, i) => {\n\t\t\tconst { fixed } = col;\n\t\t\tif (!fixed) return 0;\n\t\t\treturn widths[i] as number;\n\t\t});\n\n\t\tcolumns.map((col, i) => {\n\t\t\tconst { fixed } = col;\n\t\t\tif (!fixed) return;\n\t\t\tif (i === 0) {\n\t\t\t\to[`--datagrid-cell-inset-0`] = 0;\n\t\t\t} else if (i === fws.length - 1) {\n\t\t\t\to[`--datagrid-cell-inset-${fws.length - 1}`] = \"auto 0\";\n\t\t\t} else {\n\t\t\t\tconst isLeft = fixed === \"left\";\n\t\t\t\tconst before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);\n\t\t\t\tconst sum = before.reduce((pre, cur) => pre + cur) + \"px\";\n\t\t\t\tconst result = isLeft ? `${sum} auto` : `auto ${sum}`;\n\t\t\t\to[`--datagrid-cell-inset-${i}`] = result;\n\t\t\t}\n\t\t});\n\n\t\treturn o;\n\t}, [state.widths, resizable]);\n\n\tconst handleWidthChange = (i: number, w: number) => {\n\t\tif (!resizable) return;\n\n\t\tconst [...ws] = state.widths;\n\t\tws[i] = w;\n\t\tstate.widths = ws;\n\t\tonResize?.(columns[i], w);\n\t};\n\n\tconst handleHeaderClick = (column?: IColumn, e?: MouseEvent) => {\n\t\tif (column?.sorter) {\n\t\t\tconst [sortBy, sortType] = getNextSorter(\n\t\t\t\tstate.sortBy,\n\t\t\t\tstate.sortType,\n\t\t\t\tcolumn.id\n\t\t\t);\n\n\t\t\tObject.assign(state, {\n\t\t\t\tsortBy,\n\t\t\t\tsortType,\n\t\t\t});\n\n\t\t\tonSort?.(sortBy, sortType);\n\t\t}\n\n\t\tonHeaderClick?.(column, e);\n\t};\n\n\tconst rows = useMemo(() => {\n\t\tconst { sortBy, sortType } = state;\n\n\t\tif (sortBy && !onSort) {\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\n\t\t\tconst sortFn =\n\t\t\t\ttypeof sorter === \"function\"\n\t\t\t\t\t? sorter\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\n\t\t\tconst sorted = [...data].sort(sortFn);\n\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\n\t\t}\n\n\t\treturn data;\n\t}, [data, columns, state.sortBy, state.sortType]);\n\n\tuseEffect(() => {\n\t\tif (!container.current) return;\n\t\tconst { current: div } = container;\n\t\tconst tds = div.querySelector(\".i-datagrid-row\")?.children;\n\t\tif (!tds?.length) return;\n\t\tstate.widths = Array.from(tds).map((node: any) => node.offsetWidth);\n\t}, [columns, resizable]);\n\n\tuseEffect(() => {\n\t\tloading && container.current?.scrollTo({ top: 0, left: 0 });\n\t}, [loading]);\n\n\tconst mergedStyle = {\n\t\t\"--cell-padding\": cellPadding,\n\t\t...styles,\n\t} as CSSProperties;\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{ maxHeight: height, ...mergedStyle }}\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\n\t\t\t\t\"i-datagrid-bordered\": border,\n\t\t\t\t\"i-datagrid-striped\": striped,\n\t\t\t})}\n\t\t>\n\t\t\t<div\n\t\t\t\tref={container}\n\t\t\t\tclassName={classNames(\"i-datagrid\", {\n\t\t\t\t\t\"i-datagrid-loading\": loading,\n\t\t\t\t})}\n\t\t\t\tonWheel={onScroll}\n\t\t\t>\n\t\t\t\t{header && (\n\t\t\t\t\t<Header\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tresizable={resizable}\n\t\t\t\t\t\tsortType={state.sortType}\n\t\t\t\t\t\tsortBy={state.sortBy}\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\tonWidthChange={handleWidthChange}\n\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{rows.map((row, i) => (\n\t\t\t\t\t<Row\n\t\t\t\t\t\tkey={i}\n\t\t\t\t\t\trow={i + (header ? 1 : 0)}\n\t\t\t\t\t\tdata={row}\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\n\t\t\t\t\t\tcolumns={columns}\n\t\t\t\t\t\tonCellClick={onCellClick}\n\t\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\n\t\t\t\t{rows.length < 1 && empty}\n\t\t\t</div>\n\n\t\t\t{loading && renderLoading()}\n\t\t</div>\n\t);\n};\n\nexport default Datagrid;\n"],"mappings":""}
+{"version":3,"file":"datagrid.js","sources":["../../../../packages/components/datagrid/datagrid.tsx"],"sourcesContent":["import { useReactive } from \"../../js/hooks\";\r\nimport classNames from \"classnames\";\r\nimport { CSSProperties, MouseEvent, useEffect, useMemo, useRef } from \"react\";\r\nimport { getNextSorter } from \"../../js/utils\";\r\nimport Loading from \"../loading\";\r\nimport Empty from \"../utils/empty\";\r\nimport \"./index.css\";\r\nimport Row, { Header } from \"./row\";\r\nimport type { IColumn, IData, IDatagrid, TDatagridState } from \"./type\";\r\n\r\nconst Datagrid = (props: IDatagrid) => {\r\n\tconst {\r\n\t\tdata = [],\r\n\t\tcolumns = [],\r\n\t\tborder,\r\n\t\tstriped,\r\n\t\theader = true,\r\n\t\tresizable,\r\n\t\tcellPadding = \".5em\",\r\n\t\tcellEllipsis,\r\n\t\tempty = <Empty />,\r\n\t\tloading,\r\n\t\theight = \"unset\",\r\n\t\tstyle,\r\n\t\tclassName,\r\n\t\trenderLoading = () => (\r\n\t\t\t<Loading size='1.5em' className='color-3' absolute />\r\n\t\t),\r\n\t\tonCellClick,\r\n\t\tonRowClick,\r\n\t\tonCellDoubleClick,\r\n\t\tonHeaderClick,\r\n\t\tonSort,\r\n\t\tonScroll,\r\n\t\tonResize,\r\n\t} = props;\r\n\r\n\tconst container = useRef<HTMLDivElement>(null);\r\n\tconst state = useReactive<TDatagridState>({\r\n\t\trows: data,\r\n\t\twidths: columns.map((col) => col.width ?? \"min-content\"),\r\n\t\tsortBy: \"\",\r\n\t\tsortType: \"\",\r\n\t});\r\n\r\n\tconst styles = useMemo(() => {\r\n\t\tconst { widths } = state;\r\n\r\n\t\tconst o = {\r\n\t\t\t...style,\r\n\t\t\t\"--grid-template-columns\": widths\r\n\t\t\t\t.map((w) => {\r\n\t\t\t\t\treturn typeof w === \"number\" ? `${w}px` : w;\r\n\t\t\t\t})\r\n\t\t\t\t.join(\" \"),\r\n\t\t};\r\n\r\n\t\tif (!resizable) return o;\r\n\r\n\t\tconst fws = columns.map((col, i) => {\r\n\t\t\tconst { fixed } = col;\r\n\t\t\tif (!fixed) return 0;\r\n\t\t\treturn widths[i] as number;\r\n\t\t});\r\n\r\n\t\tcolumns.map((col, i) => {\r\n\t\t\tconst { fixed } = col;\r\n\t\t\tif (!fixed) return;\r\n\t\t\tif (i === 0) {\r\n\t\t\t\to[`--datagrid-cell-inset-0`] = 0;\r\n\t\t\t} else if (i === fws.length - 1) {\r\n\t\t\t\to[`--datagrid-cell-inset-${fws.length - 1}`] = \"auto 0\";\r\n\t\t\t} else {\r\n\t\t\t\tconst isLeft = fixed === \"left\";\r\n\t\t\t\tconst before = isLeft ? fws.slice(0, i) : fws.slice(i + 1);\r\n\t\t\t\tconst sum = before.reduce((pre, cur) => pre + cur) + \"px\";\r\n\t\t\t\tconst result = isLeft ? `${sum} auto` : `auto ${sum}`;\r\n\t\t\t\to[`--datagrid-cell-inset-${i}`] = result;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\treturn o;\r\n\t}, [state.widths, resizable]);\r\n\r\n\tconst handleWidthChange = (i: number, w: number) => {\r\n\t\tif (!resizable) return;\r\n\r\n\t\tconst [...ws] = state.widths;\r\n\t\tws[i] = w;\r\n\t\tstate.widths = ws;\r\n\t\tonResize?.(columns[i], w);\r\n\t};\r\n\r\n\tconst handleHeaderClick = (column?: IColumn, e?: MouseEvent) => {\r\n\t\tif (column?.sorter) {\r\n\t\t\tconst [sortBy, sortType] = getNextSorter(\r\n\t\t\t\tstate.sortBy,\r\n\t\t\t\tstate.sortType,\r\n\t\t\t\tcolumn.id\r\n\t\t\t);\r\n\r\n\t\t\tObject.assign(state, {\r\n\t\t\t\tsortBy,\r\n\t\t\t\tsortType,\r\n\t\t\t});\r\n\r\n\t\t\tonSort?.(sortBy, sortType);\r\n\t\t}\r\n\r\n\t\tonHeaderClick?.(column, e);\r\n\t};\r\n\r\n\tconst rows = useMemo(() => {\r\n\t\tconst { sortBy, sortType } = state;\r\n\r\n\t\tif (sortBy && !onSort) {\r\n\t\t\tconst sorter = columns.find((col) => col.id === sortBy)?.sorter;\r\n\t\t\tconst sortFn =\r\n\t\t\t\ttypeof sorter === \"function\"\r\n\t\t\t\t\t? sorter\r\n\t\t\t\t\t: (a: IData, b: IData) => b[sortBy] - a[sortBy];\r\n\t\t\tconst sorted = [...data].sort(sortFn);\r\n\r\n\t\t\treturn sortType === \"desc\" ? sorted : sorted.reverse();\r\n\t\t}\r\n\r\n\t\treturn data;\r\n\t}, [data, columns, state.sortBy, state.sortType]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (!container.current) return;\r\n\t\tconst { current: div } = container;\r\n\t\tconst tds = div.querySelector(\".i-datagrid-row\")?.children;\r\n\t\tif (!tds?.length) return;\r\n\t\tstate.widths = Array.from(tds).map((node: any) => node.offsetWidth);\r\n\t}, [columns, resizable]);\r\n\r\n\tuseEffect(() => {\r\n\t\tloading && container.current?.scrollTo({ top: 0, left: 0 });\r\n\t}, [loading]);\r\n\r\n\tconst mergedStyle = {\r\n\t\t\"--cell-padding\": cellPadding,\r\n\t\t...styles,\r\n\t} as CSSProperties;\r\n\r\n\treturn (\r\n\t\t<div\r\n\t\t\tstyle={{ maxHeight: height, ...mergedStyle }}\r\n\t\t\tclassName={classNames(\"i-datagrid-container\", className, {\r\n\t\t\t\t\"i-datagrid-bordered\": border,\r\n\t\t\t\t\"i-datagrid-striped\": striped,\r\n\t\t\t})}\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tref={container}\r\n\t\t\t\tclassName={classNames(\"i-datagrid\", {\r\n\t\t\t\t\t\"i-datagrid-loading\": loading,\r\n\t\t\t\t})}\r\n\t\t\t\tonWheel={onScroll}\r\n\t\t\t>\r\n\t\t\t\t{header && (\r\n\t\t\t\t\t<Header\r\n\t\t\t\t\t\tcolumns={columns}\r\n\t\t\t\t\t\tresizable={resizable}\r\n\t\t\t\t\t\tsortType={state.sortType}\r\n\t\t\t\t\t\tsortBy={state.sortBy}\r\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\r\n\t\t\t\t\t\tonWidthChange={handleWidthChange}\r\n\t\t\t\t\t\tonHeaderClick={handleHeaderClick}\r\n\t\t\t\t\t/>\r\n\t\t\t\t)}\r\n\r\n\t\t\t\t{rows.map((row, i) => (\r\n\t\t\t\t\t<Row\r\n\t\t\t\t\t\tkey={i}\r\n\t\t\t\t\t\trow={i + (header ? 1 : 0)}\r\n\t\t\t\t\t\tdata={row}\r\n\t\t\t\t\t\tcellEllipsis={cellEllipsis}\r\n\t\t\t\t\t\tcolumns={columns}\r\n\t\t\t\t\t\tonCellClick={onCellClick}\r\n\t\t\t\t\t\tonRowClick={onRowClick}\r\n\t\t\t\t\t\tonCellDoubleClick={onCellDoubleClick}\r\n\t\t\t\t\t/>\r\n\t\t\t\t))}\r\n\r\n\t\t\t\t{rows.length < 1 && empty}\r\n\t\t\t</div>\r\n\r\n\t\t\t{loading && renderLoading()}\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default Datagrid;\r\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;AAUA,MAAM,QAAQ,GAAG,CAAC,KAAgB,KAAI;AACrC,IAAA,MAAM,EACL,IAAI,GAAG,EAAE,EACT,OAAO,GAAG,EAAE,EACZ,MAAM,EACN,OAAO,EACP,MAAM,GAAG,IAAI,EACb,SAAS,EACT,WAAW,GAAG,MAAM,EACpB,YAAY,EACZ,KAAK,GAAGA,GAAA,CAAC,KAAK,EAAA,EAAA,CAAG,EACjB,OAAO,EACP,MAAM,GAAG,OAAO,EAChB,KAAK,EACL,SAAS,EACT,aAAa,GAAG,OACfA,GAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAA,IAAA,EAAA,CAAG,CACrD,EACD,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,QAAQ,EACR,QAAQ,GACR,GAAG,KAAK;AAET,IAAA,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC;IAC9C,MAAM,KAAK,GAAG,WAAW,CAAiB;AACzC,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,KAAK,IAAI,aAAa,CAAC;AACxD,QAAA,MAAM,EAAE,EAAE;AACV,QAAA,QAAQ,EAAE,EAAE;AACZ,KAAA,CAAC;AAEF,IAAA,MAAM,MAAM,GAAG,OAAO,CAAC,MAAK;AAC3B,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK;AAExB,QAAA,MAAM,CAAC,GAAG;AACT,YAAA,GAAG,KAAK;AACR,YAAA,yBAAyB,EAAE;AACzB,iBAAA,GAAG,CAAC,CAAC,CAAC,KAAI;AACV,gBAAA,OAAO,OAAO,CAAC,KAAK,QAAQ,GAAG,CAAA,EAAG,CAAC,CAAA,EAAA,CAAI,GAAG,CAAC;AAC5C,YAAA,CAAC;iBACA,IAAI,CAAC,GAAG,CAAC;SACX;AAED,QAAA,IAAI,CAAC,SAAS;AAAE,YAAA,OAAO,CAAC;QAExB,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AAClC,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG;AACrB,YAAA,IAAI,CAAC,KAAK;AAAE,gBAAA,OAAO,CAAC;AACpB,YAAA,OAAO,MAAM,CAAC,CAAC,CAAW;AAC3B,QAAA,CAAC,CAAC;QAEF,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAI;AACtB,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG;AACrB,YAAA,IAAI,CAAC,KAAK;gBAAE;AACZ,YAAA,IAAI,CAAC,KAAK,CAAC,EAAE;AACZ,gBAAA,CAAC,CAAC,CAAA,uBAAA,CAAyB,CAAC,GAAG,CAAC;YACjC;iBAAO,IAAI,CAAC,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;gBAChC,CAAC,CAAC,CAAA,sBAAA,EAAyB,GAAG,CAAC,MAAM,GAAG,CAAC,CAAA,CAAE,CAAC,GAAG,QAAQ;YACxD;iBAAO;AACN,gBAAA,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM;gBAC/B,MAAM,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;AAC1D,gBAAA,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,GAAG,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI;AACzD,gBAAA,MAAM,MAAM,GAAG,MAAM,GAAG,CAAA,EAAG,GAAG,CAAA,KAAA,CAAO,GAAG,CAAA,KAAA,EAAQ,GAAG,EAAE;AACrD,gBAAA,CAAC,CAAC,CAAA,sBAAA,EAAyB,CAAC,EAAE,CAAC,GAAG,MAAM;YACzC;AACD,QAAA,CAAC,CAAC;AAEF,QAAA,OAAO,CAAC;IACT,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;AAE7B,IAAA,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,CAAS,KAAI;AAClD,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,MAAM,CAAC,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM;AAC5B,QAAA,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;AACT,QAAA,KAAK,CAAC,MAAM,GAAG,EAAE;QACjB,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAC1B,IAAA,CAAC;AAED,IAAA,MAAM,iBAAiB,GAAG,CAAC,MAAgB,EAAE,CAAc,KAAI;AAC9D,QAAA,IAAI,MAAM,EAAE,MAAM,EAAE;YACnB,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,GAAG,aAAa,CACvC,KAAK,CAAC,MAAM,EACZ,KAAK,CAAC,QAAQ,EACd,MAAM,CAAC,EAAE,CACT;AAED,YAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;gBACpB,MAAM;gBACN,QAAQ;AACR,aAAA,CAAC;AAEF,YAAA,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC;QAC3B;AAEA,QAAA,aAAa,GAAG,MAAM,EAAE,CAAC,CAAC;AAC3B,IAAA,CAAC;AAED,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;AACzB,QAAA,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK;AAElC,QAAA,IAAI,MAAM,IAAI,CAAC,MAAM,EAAE;AACtB,YAAA,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,MAAM;AAC/D,YAAA,MAAM,MAAM,GACX,OAAO,MAAM,KAAK;AACjB,kBAAE;AACF,kBAAE,CAAC,CAAQ,EAAE,CAAQ,KAAK,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC;YACjD,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC;AAErC,YAAA,OAAO,QAAQ,KAAK,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,OAAO,EAAE;QACvD;AAEA,QAAA,OAAO,IAAI;AACZ,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEjD,SAAS,CAAC,MAAK;QACd,IAAI,CAAC,SAAS,CAAC,OAAO;YAAE;AACxB,QAAA,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,SAAS;QAClC,MAAM,GAAG,GAAG,GAAG,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,QAAQ;QAC1D,IAAI,CAAC,GAAG,EAAE,MAAM;YAAE;QAClB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAS,KAAK,IAAI,CAAC,WAAW,CAAC;AACpE,IAAA,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAExB,SAAS,CAAC,MAAK;AACd,QAAA,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;AAC5D,IAAA,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC;AAEb,IAAA,MAAM,WAAW,GAAG;AACnB,QAAA,gBAAgB,EAAE,WAAW;AAC7B,QAAA,GAAG,MAAM;KACQ;IAElB,QACCC,cACC,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,EAC5C,SAAS,EAAE,UAAU,CAAC,sBAAsB,EAAE,SAAS,EAAE;AACxD,YAAA,qBAAqB,EAAE,MAAM;AAC7B,YAAA,oBAAoB,EAAE,OAAO;SAC7B,CAAC,EAAA,QAAA,EAAA,CAEFA,IAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE;AACnC,oBAAA,oBAAoB,EAAE,OAAO;iBAC7B,CAAC,EACF,OAAO,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEhB,MAAM,KACND,GAAA,CAAC,MAAM,EAAA,EACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,YAAY,EAAE,YAAY,EAC1B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,iBAAiB,EAAA,CAC/B,CACF,EAEA,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MAChBA,GAAA,CAAC,GAAG,EAAA,EAEH,GAAG,EAAE,CAAC,IAAI,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,EACzB,IAAI,EAAE,GAAG,EACT,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EAAA,EAP/B,CAAC,CAQL,CACF,CAAC,EAED,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,KAAK,CAAA,EAAA,CACpB,EAEL,OAAO,IAAI,aAAa,EAAE,CAAA,EAAA,CACtB;AAER;;;;"}

package/lib/es/components/datagrid/index.js

@@ -1,7 +1,6 @@
-import Datagrid from "./datagrid.js";
-//#region packages/components/datagrid/index.tsx
-var datagrid_default = Datagrid;
-//#endregion
-export { datagrid_default as default };
+import Datagrid from './datagrid.js';
 
-//# sourceMappingURL=index.js.map
+
+
+export { Datagrid as default };
+//# sourceMappingURL=index.js.map

package/lib/es/components/datagrid/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../packages/components/datagrid/index.tsx"],"sourcesContent":["import Datagrid from \"./datagrid\";\n\nexport default Datagrid;\n"],"mappings":";;AAEA,IAAA,mBAAe"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/lib/es/components/datagrid/resize.js

@@ -1,41 +1,40 @@
-import { useMouseMove, useMouseUp, useReactive } from "../../js/hooks.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/components/datagrid/resize.tsx
+import { jsx } from 'react/jsx-runtime';
+import { useReactive, useMouseMove, useMouseUp } from '../../js/hooks.js';
+
 function Resize(props) {
-	const { index, onWidthChange } = props;
-	const state = useReactive({
-		resizing: false,
-		x: 0,
-		width: 0
-	});
-	const handleMouseDown = (e) => {
-		const width = e.target.offsetParent.offsetWidth;
-		Object.assign(state, {
-			x: e.pageX,
-			resizing: true,
-			width
-		});
-	};
-	const handleMouseMove = (e) => {
-		if (!state.resizing) return;
-		e.preventDefault();
-		const after = state.width + e.pageX - state.x;
-		if (after <= 24) return;
-		onWidthChange(index, after);
-	};
-	const handleMouseUp = () => {
-		if (!state.resizing) return;
-		state.resizing = false;
-	};
-	useMouseMove(handleMouseMove);
-	useMouseUp(handleMouseUp);
-	return /* @__PURE__ */ jsx("i", {
-		className: "i-datagrid-resizor",
-		onMouseDown: handleMouseDown,
-		onClick: (e) => e.stopPropagation()
-	});
+    const { index, onWidthChange } = props;
+    const state = useReactive({
+        resizing: false,
+        x: 0,
+        width: 0,
+    });
+    const handleMouseDown = (e) => {
+        const tar = e.target;
+        const width = tar.offsetParent.offsetWidth;
+        Object.assign(state, {
+            x: e.pageX,
+            resizing: true,
+            width,
+        });
+    };
+    const handleMouseMove = (e) => {
+        if (!state.resizing)
+            return;
+        e.preventDefault();
+        const after = state.width + e.pageX - state.x;
+        if (after <= 24)
+            return;
+        onWidthChange(index, after);
+    };
+    const handleMouseUp = () => {
+        if (!state.resizing)
+            return;
+        state.resizing = false;
+    };
+    useMouseMove(handleMouseMove);
+    useMouseUp(handleMouseUp);
+    return (jsx("i", { className: 'i-datagrid-resizor', onMouseDown: handleMouseDown, onClick: (e) => e.stopPropagation() }));
 }
-//#endregion
-export { Resize as default };
 
-//# sourceMappingURL=resize.js.map
+export { Resize as default };
+//# sourceMappingURL=resize.js.map

package/lib/es/components/datagrid/resize.js.map

@@ -1 +1 @@
-{"version":3,"file":"resize.js","names":[],"sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\n\nexport default function Resize(props) {\n\tconst { index, onWidthChange } = props;\n\tconst state = useReactive({\n\t\tresizing: false,\n\t\tx: 0,\n\t\twidth: 0,\n\t});\n\n\tconst handleMouseDown = (e) => {\n\t\tconst tar = e.target as HTMLElement;\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\n\n\t\tObject.assign(state, {\n\t\t\tx: e.pageX,\n\t\t\tresizing: true,\n\t\t\twidth,\n\t\t});\n\t};\n\n\tconst handleMouseMove = (e) => {\n\t\tif (!state.resizing) return;\n\n\t\te.preventDefault();\n\n\t\tconst after = state.width + e.pageX - state.x;\n\t\tif (after <= 24) return;\n\n\t\tonWidthChange(index, after);\n\t};\n\n\tconst handleMouseUp = () => {\n\t\tif (!state.resizing) return;\n\n\t\tstate.resizing = false;\n\t};\n\n\tuseMouseMove(handleMouseMove);\n\tuseMouseUp(handleMouseUp);\n\n\treturn (\n\t\t<i\n\t\t\tclassName='i-datagrid-resizor'\n\t\t\tonMouseDown={handleMouseDown}\n\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t/>\n\t);\n}\n"],"mappings":";;;AAEA,SAAwB,OAAO,OAAO;CACrC,MAAM,EAAE,OAAO,kBAAkB;CACjC,MAAM,QAAQ,YAAY;EACzB,UAAU;EACV,GAAG;EACH,OAAO;EACP,CAAC;CAEF,MAAM,mBAAmB,MAAM;EAE9B,MAAM,QADM,EAAE,OACK,aAA6B;AAEhD,SAAO,OAAO,OAAO;GACpB,GAAG,EAAE;GACL,UAAU;GACV;GACA,CAAC;;CAGH,MAAM,mBAAmB,MAAM;AAC9B,MAAI,CAAC,MAAM,SAAU;AAErB,IAAE,gBAAgB;EAElB,MAAM,QAAQ,MAAM,QAAQ,EAAE,QAAQ,MAAM;AAC5C,MAAI,SAAS,GAAI;AAEjB,gBAAc,OAAO,MAAM;;CAG5B,MAAM,sBAAsB;AAC3B,MAAI,CAAC,MAAM,SAAU;AAErB,QAAM,WAAW;;AAGlB,cAAa,gBAAgB;AAC7B,YAAW,cAAc;AAEzB,QACC,oBAAC,KAAD;EACC,WAAU;EACV,aAAa;EACb,UAAU,MAAM,EAAE,iBAAiB;EAClC,CAAA"}
+{"version":3,"file":"resize.js","sources":["../../../../packages/components/datagrid/resize.tsx"],"sourcesContent":["import { useMouseMove, useMouseUp, useReactive } from \"../../js/hooks\";\r\n\r\nexport default function Resize(props) {\r\n\tconst { index, onWidthChange } = props;\r\n\tconst state = useReactive({\r\n\t\tresizing: false,\r\n\t\tx: 0,\r\n\t\twidth: 0,\r\n\t});\r\n\r\n\tconst handleMouseDown = (e) => {\r\n\t\tconst tar = e.target as HTMLElement;\r\n\t\tconst width = (tar.offsetParent as HTMLElement).offsetWidth;\r\n\r\n\t\tObject.assign(state, {\r\n\t\t\tx: e.pageX,\r\n\t\t\tresizing: true,\r\n\t\t\twidth,\r\n\t\t});\r\n\t};\r\n\r\n\tconst handleMouseMove = (e) => {\r\n\t\tif (!state.resizing) return;\r\n\r\n\t\te.preventDefault();\r\n\r\n\t\tconst after = state.width + e.pageX - state.x;\r\n\t\tif (after <= 24) return;\r\n\r\n\t\tonWidthChange(index, after);\r\n\t};\r\n\r\n\tconst handleMouseUp = () => {\r\n\t\tif (!state.resizing) return;\r\n\r\n\t\tstate.resizing = false;\r\n\t};\r\n\r\n\tuseMouseMove(handleMouseMove);\r\n\tuseMouseUp(handleMouseUp);\r\n\r\n\treturn (\r\n\t\t<i\r\n\t\t\tclassName='i-datagrid-resizor'\r\n\t\t\tonMouseDown={handleMouseDown}\r\n\t\t\tonClick={(e) => e.stopPropagation()}\r\n\t\t/>\r\n\t);\r\n}\r\n"],"names":["_jsx"],"mappings":";;;AAEc,SAAU,MAAM,CAAC,KAAK,EAAA;AACnC,IAAA,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,GAAG,KAAK;IACtC,MAAM,KAAK,GAAG,WAAW,CAAC;AACzB,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,CAAC,EAAE,CAAC;AACJ,QAAA,KAAK,EAAE,CAAC;AACR,KAAA,CAAC;AAEF,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;AAC7B,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,MAAqB;AACnC,QAAA,MAAM,KAAK,GAAI,GAAG,CAAC,YAA4B,CAAC,WAAW;AAE3D,QAAA,MAAM,CAAC,MAAM,CAAC,KAAK,EAAE;YACpB,CAAC,EAAE,CAAC,CAAC,KAAK;AACV,YAAA,QAAQ,EAAE,IAAI;YACd,KAAK;AACL,SAAA,CAAC;AACH,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,CAAC,KAAI;QAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE;QAErB,CAAC,CAAC,cAAc,EAAE;AAElB,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC;QAC7C,IAAI,KAAK,IAAI,EAAE;YAAE;AAEjB,QAAA,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC;AAC5B,IAAA,CAAC;IAED,MAAM,aAAa,GAAG,MAAK;QAC1B,IAAI,CAAC,KAAK,CAAC,QAAQ;YAAE;AAErB,QAAA,KAAK,CAAC,QAAQ,GAAG,KAAK;AACvB,IAAA,CAAC;IAED,YAAY,CAAC,eAAe,CAAC;IAC7B,UAAU,CAAC,aAAa,CAAC;IAEzB,QACCA,WACC,SAAS,EAAC,oBAAoB,EAC9B,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,eAAe,EAAE,EAAA,CAClC;AAEJ;;;;"}