sera-components 1.6.10 → 1.8.0

package/dist/misc/index.d.ts

@@ -4,3 +4,4 @@ export * from './transition';
 export * from './menu';
 export * from './locale';
 export * from './row';
+export * from './pop-confirm';

package/dist/misc/menu.d.ts

@@ -1,10 +1,10 @@
 import { Trie } from '../utils';
-import { NavigateFunction, Permission, NoArgsRoute, NoURLArgsRoute } from '../types';
+import { NavigateFunction, Permission, Route } from '../types';
 type MenuKey = string;
-export interface MenuRoute<Q, R> {
-    path: NoURLArgsRoute<Q> | NoArgsRoute;
+export interface MenuRoute<P, R> {
+    path: Route<P>;
     role: R;
-    defaultPathArgs?: Q;
+    defaultPathArgs?: P;
 }
 export interface SeraMenuItem<R> {
     key: MenuKey;

package/dist/misc/pop-confirm.d.ts

@@ -0,0 +1,29 @@
+import { MultiLingualString as MLS } from 'sera-db';
+import { ButtonProps, PopoverProps } from '@mantine/core';
+export interface PopConfirmProps {
+    /** The element that triggers the popconfirm */
+    children: React.ReactNode;
+    /** Title/message shown in the popconfirm */
+    title: React.ReactNode;
+    /** Callback when confirm button is clicked */
+    onConfirm: () => void;
+    /** Callback when cancel button is clicked */
+    onCancel?: () => void;
+    /** Label for confirm button. Defaults to "Confirm" / "Xác nhận" */
+    confirmLabel?: MLS;
+    /** Label for cancel button. Defaults to "Cancel" / "Hủy" */
+    cancelLabel?: MLS;
+    /** Props for the confirm button */
+    confirmProps?: Omit<ButtonProps, "onClick">;
+    /** Props for the cancel button */
+    cancelProps?: Omit<ButtonProps, "onClick">;
+    /** Props for the Popover component */
+    popoverProps?: Omit<PopoverProps, "opened" | "onClose" | "children">;
+    /** Whether the popconfirm is disabled */
+    disabled?: boolean;
+}
+/**
+ * A popover-based confirmation component similar to AntDesign's Popconfirm.
+ * Wraps a trigger element and shows a confirmation popover when clicked.
+ */
+export declare const PopConfirm: ({ children, title, onConfirm, onCancel, confirmLabel, cancelLabel, confirmProps, cancelProps, popoverProps, disabled, }: PopConfirmProps) => import("react/jsx-runtime").JSX.Element;

package/dist/sera-context.d.ts

@@ -1,10 +1,10 @@
-import { EntityRoutes, LinkComponent } from './types';
+import { EntityRoutes, EntityLinkComponent } from './types';
 export declare const SeraContext: import('react').Context<{
-    link: LinkComponent;
+    EntityLink: EntityLinkComponent;
     entityRoutes: EntityRoutes;
 }>;
-export declare const SeraContextProvider: ({ link, entityRoutes, children, }: {
-    link: LinkComponent;
+export declare const SeraContextProvider: ({ EntityLink, entityRoutes, children, }: {
+    EntityLink: EntityLinkComponent;
     entityRoutes: EntityRoutes;
     children: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/table/embedded-table.d.ts

@@ -1,9 +1,16 @@
 import { SeraColumn } from './make-columns';
 import { SeraActionConfig } from './table-action';
 export interface SeraEmbeddedTableProps<R> {
+    /** Pagination configuration */
     pagination?: {
+        /** Position(s) to display pagination controls */
         positions?: Set<"topRight" | "bottomLeft" | "bottomCenter" | "bottomRight">;
+        /** Whether to show page size selector. Defaults to true. */
         showSizeChanger?: boolean;
+        /** Initial page size. Defaults to 10. */
+        pageSize?: number;
+        /** Available page size options in the dropdown. Defaults to [10, 20, 50, 100]. */
+        pageSizeOptions?: number[];
     };
     columns: SeraColumn<R>[];
     data: R[];

package/dist/table/make-columns.d.ts

@@ -53,10 +53,12 @@ export interface SeraColumn<R> {
  * - Object properties with other cardinalities use SingleForeignKeyDisplay
  * - Non-object properties use components from DataType2DisplayComponent mapping
  */
-export declare function makeTableColumn<R>(db: DB, property: DOP, { title, nestedKey, component, }?: {
+export declare function makeTableColumn<R>(db: DB, property: DOP, { title, nestedKey, component, rowSpan, colSpan, }?: {
     title?: React.ReactNode;
     nestedKey?: string;
     component?: React.ComponentType<DisplayInterface<any>>;
+    rowSpan?: (record: R, rowIndex: number) => number | undefined;
+    colSpan?: (record: R, rowIndex: number) => number | undefined;
 }): SeraColumn<R>;
 export declare function makeTableColumnFromNestedProperty<R>(db: DB, property: DOP, nestedProperty: DOP, { title, nestedKey, component, }?: {
     title?: React.ReactNode;

package/dist/table/table-action.d.ts

@@ -2,7 +2,7 @@ import { MantineSize } from '@mantine/core';
 export interface SeraActionConfig<ID extends string | number> {
     add?: () => void;
     edit?: (id: ID) => void;
-    delete?: () => void;
+    delete?: (ids: ID[]) => void;
     export?: () => void;
     reload?: boolean;
     import?: () => void;

package/dist/table/table-pagination.d.ts

@@ -1,9 +1,11 @@
 import { MantineSize } from '@mantine/core';
-export declare const TablePagination: ({ total, pageIndex, pageSize, allowPageSizeChange, onUpdatePagination, }: {
+export declare const TablePagination: ({ total, pageIndex, pageSize, allowPageSizeChange, pageSizeOptions, onUpdatePagination, }: {
     total: number;
     pageIndex: number;
     pageSize: number;
     allowPageSizeChange?: boolean;
+    /** Available page size options. Defaults to ["10", "20", "50", "100"]. */
+    pageSizeOptions?: string[];
     onUpdatePagination: (pageIndex: number, pageSize: number) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare function DataTablePageSizeSelector({ size, values, value, onChange, }: {

package/dist/table/table.d.ts

@@ -5,9 +5,14 @@ export interface SeraTableProps<ID extends string | number, Q extends {
     limit: number;
     offset: number;
 }, R> {
+    /** Pagination configuration */
     pagination?: {
+        /** Position(s) to display pagination controls */
         positions?: Set<"topRight" | "bottomLeft" | "bottomCenter" | "bottomRight">;
+        /** Whether to show page size selector. Defaults to true. */
         showSizeChanger?: boolean;
+        /** Available page size options in the dropdown. Defaults to [10, 20, 50, 100]. */
+        pageSizeOptions?: number[];
     };
     columns: SeraColumn<R>[];
     query: ObservableQuery<Q>;

package/dist/types.d.ts

@@ -21,49 +21,27 @@ export interface NavigateFunction {
     }>, options?: any): void | Promise<void>;
     (delta: number): void | Promise<void>;
 }
-export interface NoArgsRoute {
-    path(): {
+export interface Route<P> {
+    path(args: P): {
         open: (navigate: NavigateFunction) => void;
     };
-    getURL(): string;
+    getURL(args: P): string;
     pathDef: string;
 }
-export interface NoURLArgsRoute<Q> {
-    path({ queryArgs }: {
-        queryArgs: Q;
-    }): {
-        open: (navigate: NavigateFunction) => void;
-    };
-    getURL({ queryArgs }: {
-        queryArgs: Q;
-    }): string;
-    pathDef: string;
-}
-export interface EntityRoute {
-    path({ urlArgs }: {
-        urlArgs: {
-            id: string | number;
-        };
-    }): {
-        open: (navigate: NavigateFunction) => void;
-    };
-    getURL({ urlArgs }: {
-        urlArgs: {
-            id: string | number;
-        };
-    }): string;
+export interface EntityRoute extends Route<{
+    id: string | number;
+}> {
 }
 export interface EntityRoutes extends Record<ClassName, {
     view: EntityRoute;
     edit: EntityRoute;
 }> {
 }
-export type LinkComponent = React.FunctionComponent<{
+export type EntityLinkComponent = React.FunctionComponent<{
     path: EntityRoute;
-    urlArgs: {
+    args: {
         id: string | number;
     };
-    queryArgs: {};
     openInNewPage?: boolean;
     children?: React.ReactNode;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sera-components",
   "private": false,
-  "version": "1.6.10",
+  "version": "1.8.0",
   "type": "module",
   "files": [
     "dist"