@meta-1/design 0.0.168 → 0.0.170

package/package.json

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

package/src/components/ui/dialog.tsx

@@ -52,7 +52,7 @@ function DialogContent({
       <DialogOverlay onClick={onOverlayClick} />
       <DialogPrimitive.Content
         className={cn(
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100vw-2rem)] max-h-[calc(100vh-2rem)] translate-x-[-50%] translate-y-[-50%] rounded-lg border bg-background shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:max-w-lg",
           className,
         )}
         data-slot="dialog-content"
@@ -61,7 +61,7 @@ function DialogContent({
         {children}
         {showClose ? (
           <DialogPrimitive.Close
-            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 z-10"
             onClick={onCloseClick}
           >
             <XIcon />
@@ -76,7 +76,7 @@ function DialogContent({
 function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      className={cn("flex flex-col gap-2 text-center sm:text-left flex-shrink-0 p-6 pb-0", className)}
       data-slot="dialog-header"
       {...props}
     />
@@ -86,7 +86,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
 function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end flex-shrink-0 p-6 pt-0", className)}
       data-slot="dialog-footer"
       {...props}
     />

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

@@ -57,6 +57,7 @@ export interface DataTableProps<TData> {
   showColumnVisibility?: boolean;
   stickyColumns?: StickyColumnProps[];
   checkbox?: boolean;
+  onRowSelectionChange?: (selectedRows: TData[]) => void;
   rowActions?: DropdownMenuItemProps[] | ((cell: TData) => DropdownMenuItemProps[]);
   onRowActionClick?: (item: DropdownMenuItemProps, row: Row<TData>) => void;
   loading?: boolean;
@@ -161,6 +162,7 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     showColumnVisibility = true,
     rowActions,
     checkbox = false,
+    onRowSelectionChange,
     stickyColumns = [],
     onRowActionClick,
     filter,
@@ -284,6 +286,14 @@ export function DataTable<TData>(props: DataTableProps<TData>) {
     },
   });
 
+  // 当行选中状态改变时，通知外部
+  useEffect(() => {
+    if (checkbox && onRowSelectionChange) {
+      const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
+      onRowSelectionChange(selectedRows);
+    }
+  }, [rowSelection, checkbox, onRowSelectionChange, table]);
+
   const leftStickyColumns = useMemo<StickyColumnProps[]>(() => {
     const columns: StickyColumnProps[] = [];
     if (checkbox) {

package/src/components/uix/dialog/index.tsx

@@ -51,13 +51,11 @@ export const Dialog: FC<DialogProps> = (props) => {
         onOverlayClick={maskClosable ? onCancel : () => {}}
         showClose={closable}
       >
-        {title || description ? (
-          <DialogHeader>
-            {title ? <DialogTitle>{title}</DialogTitle> : null}
-            {description ? <DialogDescription>{description}</DialogDescription> : null}
-          </DialogHeader>
-        ) : null}
-        <div className="my-2">{props.children}</div>
+        <DialogHeader className={cn(!title && !description && "sr-only")}>
+          <DialogTitle className={cn(!title && "sr-only")}>{title || "Dialog"}</DialogTitle>
+          {description ? <DialogDescription>{description}</DialogDescription> : null}
+        </DialogHeader>
+        <div className="min-h-0 flex-1 overflow-x-auto overflow-y-auto px-6 py-4">{props.children}</div>
         {footer ? <DialogFooter>{footer}</DialogFooter> : null}
         {loading ? (
           <div className={cn("absolute top-0 right-0 bottom-0 left-0 bg-white/50", "flex items-center justify-center")}>

package/src/components/uix/pagination/index.tsx

@@ -21,6 +21,14 @@ export interface PaginationProps {
   onChange?: (page: number) => void;
   onSizeChange?: (size: number) => void;
   sizeOptions?: number[];
+  /** 简单模式：只显示上一页、当前页、下一页 */
+  simple?: boolean;
+  /** 是否显示总数信息 */
+  showTotal?: boolean;
+  /** 是否显示页面大小选择器 */
+  showSizeChanger?: boolean;
+  /** 是否显示快速跳转 */
+  showQuickJumper?: boolean;
 }
 
 export const SIZE_OPTIONS = [10, 20, 50, 100];
@@ -66,7 +74,18 @@ const generatePageNumbers = (currentPage: number, totalPages: number) => {
 };
 
 export const Pagination: FC<PaginationProps> = (props) => {
-  const { total = 0, page = 1, size = 20, sizeOptions = SIZE_OPTIONS, onChange, onSizeChange } = props;
+  const {
+    total = 0,
+    page = 1,
+    size = 20,
+    sizeOptions = SIZE_OPTIONS,
+    onChange,
+    onSizeChange,
+    simple = false,
+    showTotal = true,
+    showSizeChanger = true,
+    showQuickJumper = true,
+  } = props;
 
   const config = useContext(UIXContext);
   const totalPageText = get(config.locale, "Pagination.totalPage");
@@ -101,14 +120,53 @@ export const Pagination: FC<PaginationProps> = (props) => {
 
   const pageNumbers = generatePageNumbers(page, totalPage);
 
+  if (simple) {
+    // 简单模式渲染
+    return (
+      <div className="flex items-center justify-center">
+        <ShadcnPagination>
+          <PaginationContent>
+            {/* 上一页 */}
+            <PaginationItem>
+              <PaginationPrevious
+                className={page === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                onClick={page === 1 ? undefined : () => onChange?.(page - 1)}
+                size="default"
+              />
+            </PaginationItem>
+
+            {/* 当前页 */}
+            <PaginationItem>
+              <PaginationLink isActive size="default">
+                {page}
+              </PaginationLink>
+            </PaginationItem>
+
+            {/* 下一页 */}
+            <PaginationItem>
+              <PaginationNext
+                className={page === totalPage ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                onClick={page === totalPage ? undefined : () => onChange?.(page + 1)}
+                size="default"
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </ShadcnPagination>
+      </div>
+    );
+  }
+
+  // 标准模式渲染
   return (
     <div className="flex items-center justify-center space-x-6">
       <ShadcnPagination>
         {/* 总数信息 */}
-        <div className="flex items-center space-x-2 text-muted-foreground text-sm">
-          <span>{totalPageText?.replace("%total", `${total}`)}</span>
-          <span>{totalText?.replace("%page", `${totalPage}`)}</span>
-        </div>
+        {showTotal ? (
+          <div className="flex items-center space-x-2 text-muted-foreground text-sm">
+            <span>{totalPageText?.replace("%total", `${total}`)}</span>
+            <span>{totalText?.replace("%page", `${totalPage}`)}</span>
+          </div>
+        ) : null}
         {/* 分页导航 */}
         <PaginationContent>
           {/* 上一页 */}
@@ -148,32 +206,38 @@ export const Pagination: FC<PaginationProps> = (props) => {
           </PaginationItem>
         </PaginationContent>
         {/* 控制区域 */}
-        <div className="flex items-center space-x-3">
-          {/* 页面大小选择 */}
-          <Select
-            className="w-auto"
-            onChange={(v) => onSizeChange?.(Number(v))}
-            options={sizeOptions.map((v) => ({ label: sizeText?.replace("%size", `${v}`) || "", value: `${v}` }))}
-            value={`${size}`}
-          />
-
-          {/* 跳转输入框 */}
-          <div className="flex items-center space-x-1 text-sm">
-            <span>{go}</span>
-            <Input
-              className="h-9 w-12 rounded px-2 text-center"
-              onChange={handleChange}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") {
-                  onChange?.(Number(pageValue));
-                }
-              }}
-              type="text"
-              value={pageValue}
-            />
-            <span>{goSuffix}</span>
+        {showSizeChanger || showQuickJumper ? (
+          <div className="flex items-center space-x-3">
+            {/* 页面大小选择 */}
+            {showSizeChanger ? (
+              <Select
+                className="w-auto"
+                onChange={(v) => onSizeChange?.(Number(v))}
+                options={sizeOptions.map((v) => ({ label: sizeText?.replace("%size", `${v}`) || "", value: `${v}` }))}
+                value={`${size}`}
+              />
+            ) : null}
+
+            {/* 跳转输入框 */}
+            {showQuickJumper ? (
+              <div className="flex items-center space-x-1 text-sm">
+                <span>{go}</span>
+                <Input
+                  className="h-9 w-12 rounded px-2 text-center"
+                  onChange={handleChange}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                      onChange?.(Number(pageValue));
+                    }
+                  }}
+                  type="text"
+                  value={pageValue}
+                />
+                <span>{goSuffix}</span>
+              </div>
+            ) : null}
           </div>
-        </div>
+        ) : null}
       </ShadcnPagination>
     </div>
   );