@meta-1/design 0.0.205 → 0.0.207

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/design",
-  "version": "0.0.205",
+  "version": "0.0.207",
   "keywords": [
     "easykit",
     "design",

package/src/components/uix/data-grid/index.tsx

@@ -34,7 +34,7 @@ import {
   ValueFormatter,
 } from "@meta-1/design";
 import { UIXContext } from "@meta-1/design/components/uix/config-provider";
-import { LoadingOverlay, NoRowsOverlay } from "./overlays";
+import { NoRowsOverlay } from "./overlays";
 
 import "./style.css";
 
@@ -358,21 +358,21 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
         sortable: false,
         filter: false,
         headerName: "",
-        cellClass: cn("!px-0", actionsCellClassName),
+        cellClass: cn("px-0", actionsCellClassName),
         cellRenderer: (params: any) => {
           let items = rowActions;
           if (isFunction(rowActions)) {
             items = rowActions(params.data);
           }
           return (
-            <div className="flex w-full justify-center py-1" onClick={(e) => e.stopPropagation()}>
+            <div className="flex w-full justify-center" onClick={(e) => e.stopPropagation()}>
               <Dropdown
                 align="end"
                 asChild={true}
                 items={items as DropdownMenuItemProps[]}
                 onItemClick={(item) => onRowActionClick?.(item, params.data)}
               >
-                <Action className="!p-0 h-6 w-6">
+                <Action className="size-6 p-0">
                   <DotsHorizontalIcon />
                 </Action>
               </Dropdown>
@@ -410,7 +410,6 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
   // 注册自定义组件
   const components = useMemo(
     () => ({
-      loadingOverlay: LoadingOverlay,
       noRowsOverlay: NoRowsOverlay,
     }),
     [],
@@ -524,12 +523,6 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
     [props],
   );
 
-  // 根据 loading 状态控制覆盖层的显示
-  useEffect(() => {
-    if (!gridApiRef.current) return;
-    gridApiRef.current.setGridOption("loading", loading || false);
-  }, [loading]);
-
   const gridHeight = useMemo(() => {
     if (!maxHeight) return undefined;
     return typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight;
@@ -580,14 +573,13 @@ export function DataGrid<TData>(props: DataGridProps<TData>) {
                     : undefined
               }
               getRowId={getRowId ? (params) => getRowId(params.data) : undefined}
-              loadingOverlayComponent="loadingOverlay"
               noRowsOverlayComponent="noRowsOverlay"
               noRowsOverlayComponentParams={empty ? { noRowsMessage: empty } : undefined}
               onColumnVisible={onColumnVisible}
               onGridReady={onGridReady}
               onRowClicked={handleRowClick}
               onSelectionChanged={onSelectionChanged}
-              rowData={loading ? [] : data}
+              rowData={data}
               rowHeight={autoRowHeight ? undefined : typeof rowHeight === "number" ? rowHeight : undefined}
               rowSelection={checkbox ? "multiple" : undefined}
               suppressAnimationFrame={false}

package/src/components/uix/data-grid/style.css

@@ -1,6 +1,35 @@
 @import "../../../assets/style/theme.css";
 
 /* 自定义样式已移除，后续按需添加 */
-.data-grid {
-  --ag-row-height: 34px;
+.ag-cell,
+.ag-full-width-row .ag-cell-wrapper.ag-row-group {
+  --ag-internal-content-line-height: 24px;
+}
+
+/* 隐藏最后一列后面的分割线 */
+:where(.ag-ltr) .ag-header-cell:last-child:after,
+:where(.ag-ltr)
+  .ag-header-group-cell:last-child:where(:not(.ag-header-span-height.ag-header-group-cell-no-group)):after {
+  visibility: hidden;
+}
+
+/* 设置 cell 的 padding */
+:where(.ag-ltr) .ag-cell:not(.ag-cell-inline-editing),
+:where(.ag-ltr) .ag-full-width-row .ag-cell-wrapper.ag-row-group {
+  padding-left: calc(
+    var(--ag-cell-horizontal-padding) -
+    1px +
+    var(--ag-row-group-indent-size) *
+    var(--ag-indentation-level)
+  );
+  padding-right: calc(var(--ag-cell-horizontal-padding) - 1px);
+  padding-top: 4px;
+  padding-bottom: 4px;
+  font-size: 14px;
+}
+
+/* 允许 actions 列溢出 */
+.ag-cell[col-id="actions"] .ag-cell-value:not(.ag-allow-overflow),
+.ag-cell[col-id="actions"] .ag-group-value {
+  overflow: visible;
 }