@juv/codego-react-ui 3.4.11 → 3.5.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +989 -144
- package/dist/index.d.cts +143 -22
- package/dist/index.d.ts +143 -22
- package/dist/index.global.js +1048 -190
- package/dist/index.js +1020 -175
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -104,6 +104,26 @@ interface BreadcrumbProps {
|
|
|
104
104
|
}
|
|
105
105
|
declare function Breadcrumb({ items, separator, maxItems, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
106
106
|
|
|
107
|
+
interface RepeaterField {
|
|
108
|
+
type: "input" | "image" | "attachment";
|
|
109
|
+
key: string;
|
|
110
|
+
label?: string;
|
|
111
|
+
placeholder?: string;
|
|
112
|
+
}
|
|
113
|
+
interface RepeaterProps<T> {
|
|
114
|
+
items: T[];
|
|
115
|
+
onAdd: () => void;
|
|
116
|
+
onRemove: (index: number) => void;
|
|
117
|
+
renderItem?: (item: T, index: number) => React.ReactNode;
|
|
118
|
+
/** Structured field definitions — when provided, renders fields automatically */
|
|
119
|
+
fields?: RepeaterField[];
|
|
120
|
+
/** Called when a field value changes: (rowIndex, key, value) */
|
|
121
|
+
onFieldChange?: (index: number, key: string, value: any) => void;
|
|
122
|
+
addButtonText?: string;
|
|
123
|
+
className?: string;
|
|
124
|
+
}
|
|
125
|
+
declare function Repeater<T extends Record<string, any>>({ items, onAdd, onRemove, renderItem, fields, onFieldChange, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
|
|
126
|
+
|
|
107
127
|
type ToastVariant = "default" | "success" | "error" | "warning" | "info";
|
|
108
128
|
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
109
129
|
interface ToastItem {
|
|
@@ -273,6 +293,17 @@ interface UseServerTableOptions {
|
|
|
273
293
|
onSuccess?: (data: any[]) => void;
|
|
274
294
|
/** Called on fetch error */
|
|
275
295
|
onError?: (error: Error) => void;
|
|
296
|
+
/**
|
|
297
|
+
* Filter fields rendered above the table.
|
|
298
|
+
* Each field appends its value as a query param on every request.
|
|
299
|
+
* Supported types: "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range"
|
|
300
|
+
*/
|
|
301
|
+
filter?: ServerTableFilterField[];
|
|
302
|
+
/**
|
|
303
|
+
* Sortable column keys. Renders a sort dropdown above the table.
|
|
304
|
+
* Appends sort=key&direction=asc|desc to every request.
|
|
305
|
+
*/
|
|
306
|
+
sort?: string[];
|
|
276
307
|
}
|
|
277
308
|
/**
|
|
278
309
|
* Return type from the useServerTable hook
|
|
@@ -289,20 +320,65 @@ interface UseServerTableReturn<T> {
|
|
|
289
320
|
error: string | null;
|
|
290
321
|
goToPage: (page: number) => void;
|
|
291
322
|
reload: () => void;
|
|
292
|
-
/** Manually trigger a data refresh (alias for reload, respects refresh option) */
|
|
293
323
|
refresh: () => void;
|
|
294
|
-
|
|
295
|
-
|
|
324
|
+
/** Rendered filter + sort bar — place above <Table /> */
|
|
325
|
+
filterBar: React.ReactNode;
|
|
326
|
+
searchValue: string;
|
|
327
|
+
onSearchChange: (value: string) => void;
|
|
328
|
+
page: number;
|
|
329
|
+
onPageChange: (page: number) => void;
|
|
330
|
+
sort: {
|
|
331
|
+
key: string;
|
|
332
|
+
direction: "asc" | "desc";
|
|
333
|
+
}[];
|
|
334
|
+
onSortChange: (sort: {
|
|
335
|
+
key: string;
|
|
336
|
+
direction: "asc" | "desc";
|
|
337
|
+
}[]) => void;
|
|
338
|
+
onRowClick?: (item: T) => void;
|
|
339
|
+
onRowDoubleClick?: (item: T) => void;
|
|
340
|
+
rowClassName?: (item: T) => string;
|
|
341
|
+
expandable?: boolean;
|
|
342
|
+
renderExpanded?: (item: T) => React.ReactNode;
|
|
343
|
+
columnVisibility?: Record<string, boolean>;
|
|
344
|
+
onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
|
|
345
|
+
exportable?: boolean;
|
|
346
|
+
onExport?: (type: "csv" | "excel" | "pdf") => void;
|
|
347
|
+
virtualized?: boolean;
|
|
348
|
+
draggable?: boolean;
|
|
349
|
+
onRowReorder?: (data: T[]) => void;
|
|
350
|
+
keyboardNavigation?: boolean;
|
|
351
|
+
theme?: "light" | "dark" | "auto";
|
|
352
|
+
meta?: Record<string, any>;
|
|
353
|
+
actions?: Record<string, (item: T) => void>;
|
|
354
|
+
searchable?: boolean;
|
|
355
|
+
searchPlaceholder?: string;
|
|
356
|
+
clientPagination?: boolean;
|
|
357
|
+
itemsPerPage?: number;
|
|
358
|
+
selectable?: boolean;
|
|
359
|
+
onBulkDelete?: (selectedIds: string[]) => void;
|
|
360
|
+
bulkDeleteBaseUrl?: string;
|
|
361
|
+
idKey?: keyof T;
|
|
362
|
+
defaultActions?: DefaultActionsConfig<T>;
|
|
363
|
+
className?: string;
|
|
296
364
|
}
|
|
297
|
-
/**
|
|
298
|
-
* Server-side pagination prop passed to the Table component
|
|
299
|
-
* @interface ServerPaginationProp
|
|
300
|
-
*/
|
|
301
365
|
interface ServerPaginationProp {
|
|
302
366
|
pagination: ServerPagination;
|
|
303
367
|
currentPage: number;
|
|
304
368
|
goToPage: (page: number) => void;
|
|
305
369
|
}
|
|
370
|
+
type ServerTableFilterType = "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range";
|
|
371
|
+
interface ServerTableFilterField {
|
|
372
|
+
key: string;
|
|
373
|
+
type: ServerTableFilterType;
|
|
374
|
+
label?: string;
|
|
375
|
+
placeholder?: string;
|
|
376
|
+
/** Options for type="select" */
|
|
377
|
+
options?: string[] | {
|
|
378
|
+
label: string;
|
|
379
|
+
value: string;
|
|
380
|
+
}[];
|
|
381
|
+
}
|
|
306
382
|
/**
|
|
307
383
|
* Custom hook for fetching and managing server-side paginated table data.
|
|
308
384
|
* Supports Laravel encryption, auto-column derivation, and flexible pagination.
|
|
@@ -319,12 +395,17 @@ interface ServerPaginationProp {
|
|
|
319
395
|
* })
|
|
320
396
|
* ```
|
|
321
397
|
*/
|
|
322
|
-
declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
|
|
398
|
+
declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }: UseServerTableOptions): UseServerTableReturn<T>;
|
|
323
399
|
/**
|
|
324
400
|
* Available field types for action forms (edit/view modals)
|
|
325
401
|
* @type {ActionFieldType}
|
|
326
402
|
*/
|
|
327
403
|
type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
|
|
404
|
+
/**
|
|
405
|
+
* Display type for viewForm fields — controls how the value is rendered in the View modal
|
|
406
|
+
* @type {ViewFieldType}
|
|
407
|
+
*/
|
|
408
|
+
type ViewFieldType = "text" | "image" | "checkbox" | "toggle" | "attachment" | "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs" | "repeater";
|
|
328
409
|
/**
|
|
329
410
|
* Configuration for a single field in action forms (edit/view modals)
|
|
330
411
|
* @interface ActionField
|
|
@@ -350,6 +431,8 @@ interface ActionField {
|
|
|
350
431
|
step?: number;
|
|
351
432
|
/** Number of OTP digits for type="otp" */
|
|
352
433
|
digits?: number;
|
|
434
|
+
/** Field definitions for type="repeater" / viewType="repeater" */
|
|
435
|
+
repeaterFields?: RepeaterField[];
|
|
353
436
|
/** Validation: regex or built-in preset ("email" | "url" | "numeric" | "alpha" | "alphanumeric") */
|
|
354
437
|
validation?: RegExp | "email" | "url" | "numeric" | "alpha" | "alphanumeric";
|
|
355
438
|
/** Custom message shown when validation fails */
|
|
@@ -360,8 +443,21 @@ interface ActionField {
|
|
|
360
443
|
rowSpan?: number;
|
|
361
444
|
/** Custom render — overrides built-in field renderer */
|
|
362
445
|
render?: (value: any, onChange: (v: any) => void) => React.ReactNode;
|
|
446
|
+
/** Drop-in React component — rendered as-is, bypasses label and built-in renderer. Use for fully custom fields. */
|
|
447
|
+
component?: React.ReactNode;
|
|
363
448
|
/** Hide this field from view/edit forms */
|
|
364
449
|
hidden?: boolean;
|
|
450
|
+
/**
|
|
451
|
+
* Display type for viewForm — controls how the value is rendered in the View modal.
|
|
452
|
+
* Overrides type for view-only rendering.
|
|
453
|
+
* "text" | "image" | "checkbox" | "toggle" | "attachment" |
|
|
454
|
+
* "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs"
|
|
455
|
+
*/
|
|
456
|
+
viewType?: ViewFieldType;
|
|
457
|
+
/** Width applied to the field value in the View modal (e.g. 120, "100%", "8rem") */
|
|
458
|
+
width?: number | string;
|
|
459
|
+
/** Height applied to the field value in the View modal (e.g. 80, "5rem") */
|
|
460
|
+
height?: number | string;
|
|
365
461
|
}
|
|
366
462
|
/**
|
|
367
463
|
* Configuration for customizing the appearance of action buttons (View/Edit/Delete)
|
|
@@ -436,6 +532,8 @@ interface DefaultActionsConfig<T> {
|
|
|
436
532
|
editForm?: ActionField[];
|
|
437
533
|
/** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
|
|
438
534
|
viewForm?: ActionField[];
|
|
535
|
+
/** Grid columns for the view form layout (e.g. 2 = two-column grid). Default single column. */
|
|
536
|
+
viewFormGrid?: number;
|
|
439
537
|
/** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
|
|
440
538
|
editFormGrid?: number;
|
|
441
539
|
/** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
|
|
@@ -535,7 +633,7 @@ type ModalWidth = keyof typeof MODAL_WIDTH;
|
|
|
535
633
|
interface Column<T> {
|
|
536
634
|
key: keyof T | string;
|
|
537
635
|
title: string;
|
|
538
|
-
type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox";
|
|
636
|
+
type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox" | "text-url";
|
|
539
637
|
stackProps?: {
|
|
540
638
|
limit?: number;
|
|
541
639
|
stacked?: boolean;
|
|
@@ -562,6 +660,18 @@ interface Column<T> {
|
|
|
562
660
|
tooltip?: (item: T) => string;
|
|
563
661
|
/** Allow copying cell content */
|
|
564
662
|
copyable?: boolean;
|
|
663
|
+
/**
|
|
664
|
+
* For type="text-url": static URL to navigate to. If omitted, uses the cell value as the URL.
|
|
665
|
+
* Supports dynamic URL via function: (item) => string
|
|
666
|
+
*/
|
|
667
|
+
redirect?: string | ((item: T) => string);
|
|
668
|
+
/** For type="text-url": open link in a new tab. Default false. */
|
|
669
|
+
openNewTab?: boolean;
|
|
670
|
+
/**
|
|
671
|
+
* For type="text-url": underline color.
|
|
672
|
+
* Accepts: "primary" | "info" | "success" | "warning" | "danger" | any hex | rgb | rgba string.
|
|
673
|
+
*/
|
|
674
|
+
underlineColor?: "primary" | "info" | "success" | "warning" | "danger" | string;
|
|
565
675
|
}
|
|
566
676
|
/**
|
|
567
677
|
* Props for the Table component
|
|
@@ -604,15 +714,36 @@ interface TableProps<T> {
|
|
|
604
714
|
actions?: Record<string, (item: T) => void>;
|
|
605
715
|
searchable?: boolean;
|
|
606
716
|
searchPlaceholder?: string;
|
|
607
|
-
|
|
717
|
+
clientPagination?: boolean;
|
|
608
718
|
itemsPerPage?: number;
|
|
609
719
|
selectable?: boolean;
|
|
610
720
|
onBulkDelete?: (selectedIds: string[]) => void;
|
|
611
721
|
idKey?: keyof T;
|
|
722
|
+
/**
|
|
723
|
+
* Base URL for built-in bulk delete actions.
|
|
724
|
+
* DELETE all → `{bulkDeleteBaseUrl}/delete/all`
|
|
725
|
+
* DELETE selected → `{bulkDeleteBaseUrl}/delete/{ids}/selected`
|
|
726
|
+
*/
|
|
727
|
+
bulkDeleteBaseUrl?: string;
|
|
612
728
|
/** When provided, appends an Actions column with View / Edit / Delete buttons */
|
|
613
729
|
defaultActions?: DefaultActionsConfig<T>;
|
|
614
730
|
/** Pass the serverPagination object from useServerTable to enable server-side pagination */
|
|
615
731
|
serverPagination?: ServerPaginationProp | null;
|
|
732
|
+
/**
|
|
733
|
+
* Visual variant of the table.
|
|
734
|
+
* - `"default"` — bordered card with subtle bg (original style)
|
|
735
|
+
* - `"zebra"` — alternating row colors for easy scanning
|
|
736
|
+
* - `"card"` — each row rendered as an individual card
|
|
737
|
+
* - `"glass"` — glassmorphism: transparent + backdrop blur
|
|
738
|
+
* - `"soft"` — neumorphic soft shadows, no hard borders
|
|
739
|
+
*/
|
|
740
|
+
variant?: "default" | "zebra" | "card" | "glass" | "soft";
|
|
741
|
+
/** Custom icon for the column visibility toggle button. When provided, hides the "Columns" text label. */
|
|
742
|
+
columnVisibilityIcon?: React.ReactElement;
|
|
743
|
+
/** Filter bar node (e.g. from useServerTable's filterBar). Rendered below the toolbar when visible. */
|
|
744
|
+
filterBar?: React.ReactNode;
|
|
745
|
+
/** Custom icon for the filter toggle button. When provided, hides the "Filter" text label. */
|
|
746
|
+
filterableIcon?: React.ReactElement;
|
|
616
747
|
className?: string;
|
|
617
748
|
}
|
|
618
749
|
/**
|
|
@@ -632,7 +763,7 @@ interface TableProps<T> {
|
|
|
632
763
|
* { key: "active", type: "toggle", onChange: handleToggle },
|
|
633
764
|
* ]}
|
|
634
765
|
* searchable
|
|
635
|
-
*
|
|
766
|
+
* clientPagination
|
|
636
767
|
* selectable
|
|
637
768
|
* onBulkDelete={handleBulkDelete}
|
|
638
769
|
* defaultActions={{
|
|
@@ -642,7 +773,7 @@ interface TableProps<T> {
|
|
|
642
773
|
* />
|
|
643
774
|
* ```
|
|
644
775
|
*/
|
|
645
|
-
declare function Table<T extends Record<string, any>>({ data, columns, searchable, searchPlaceholder,
|
|
776
|
+
declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, columnVisibilityIcon, filterBar, filterableIcon, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
646
777
|
|
|
647
778
|
type BulletinPriority = "low" | "medium" | "high" | "urgent";
|
|
648
779
|
type BulletinLayout = "grid" | "list" | "masonry";
|
|
@@ -1923,16 +2054,6 @@ interface RadioGroupProps {
|
|
|
1923
2054
|
}
|
|
1924
2055
|
declare function RadioGroup({ options, value: controlledValue, defaultValue, onChange, variant, size, orientation, name, className, required, error, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
1925
2056
|
|
|
1926
|
-
interface RepeaterProps<T> {
|
|
1927
|
-
items: T[];
|
|
1928
|
-
onAdd: () => void;
|
|
1929
|
-
onRemove: (index: number) => void;
|
|
1930
|
-
renderItem: (item: T, index: number) => React.ReactNode;
|
|
1931
|
-
addButtonText?: string;
|
|
1932
|
-
className?: string;
|
|
1933
|
-
}
|
|
1934
|
-
declare function Repeater<T>({ items, onAdd, onRemove, renderItem, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
|
|
1935
|
-
|
|
1936
2057
|
interface ResizablePanelsProps {
|
|
1937
2058
|
children: [React.ReactNode, React.ReactNode];
|
|
1938
2059
|
orientation?: "horizontal" | "vertical";
|
package/dist/index.d.ts
CHANGED
|
@@ -104,6 +104,26 @@ interface BreadcrumbProps {
|
|
|
104
104
|
}
|
|
105
105
|
declare function Breadcrumb({ items, separator, maxItems, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
106
106
|
|
|
107
|
+
interface RepeaterField {
|
|
108
|
+
type: "input" | "image" | "attachment";
|
|
109
|
+
key: string;
|
|
110
|
+
label?: string;
|
|
111
|
+
placeholder?: string;
|
|
112
|
+
}
|
|
113
|
+
interface RepeaterProps<T> {
|
|
114
|
+
items: T[];
|
|
115
|
+
onAdd: () => void;
|
|
116
|
+
onRemove: (index: number) => void;
|
|
117
|
+
renderItem?: (item: T, index: number) => React.ReactNode;
|
|
118
|
+
/** Structured field definitions — when provided, renders fields automatically */
|
|
119
|
+
fields?: RepeaterField[];
|
|
120
|
+
/** Called when a field value changes: (rowIndex, key, value) */
|
|
121
|
+
onFieldChange?: (index: number, key: string, value: any) => void;
|
|
122
|
+
addButtonText?: string;
|
|
123
|
+
className?: string;
|
|
124
|
+
}
|
|
125
|
+
declare function Repeater<T extends Record<string, any>>({ items, onAdd, onRemove, renderItem, fields, onFieldChange, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
|
|
126
|
+
|
|
107
127
|
type ToastVariant = "default" | "success" | "error" | "warning" | "info";
|
|
108
128
|
type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
|
|
109
129
|
interface ToastItem {
|
|
@@ -273,6 +293,17 @@ interface UseServerTableOptions {
|
|
|
273
293
|
onSuccess?: (data: any[]) => void;
|
|
274
294
|
/** Called on fetch error */
|
|
275
295
|
onError?: (error: Error) => void;
|
|
296
|
+
/**
|
|
297
|
+
* Filter fields rendered above the table.
|
|
298
|
+
* Each field appends its value as a query param on every request.
|
|
299
|
+
* Supported types: "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range"
|
|
300
|
+
*/
|
|
301
|
+
filter?: ServerTableFilterField[];
|
|
302
|
+
/**
|
|
303
|
+
* Sortable column keys. Renders a sort dropdown above the table.
|
|
304
|
+
* Appends sort=key&direction=asc|desc to every request.
|
|
305
|
+
*/
|
|
306
|
+
sort?: string[];
|
|
276
307
|
}
|
|
277
308
|
/**
|
|
278
309
|
* Return type from the useServerTable hook
|
|
@@ -289,20 +320,65 @@ interface UseServerTableReturn<T> {
|
|
|
289
320
|
error: string | null;
|
|
290
321
|
goToPage: (page: number) => void;
|
|
291
322
|
reload: () => void;
|
|
292
|
-
/** Manually trigger a data refresh (alias for reload, respects refresh option) */
|
|
293
323
|
refresh: () => void;
|
|
294
|
-
|
|
295
|
-
|
|
324
|
+
/** Rendered filter + sort bar — place above <Table /> */
|
|
325
|
+
filterBar: React.ReactNode;
|
|
326
|
+
searchValue: string;
|
|
327
|
+
onSearchChange: (value: string) => void;
|
|
328
|
+
page: number;
|
|
329
|
+
onPageChange: (page: number) => void;
|
|
330
|
+
sort: {
|
|
331
|
+
key: string;
|
|
332
|
+
direction: "asc" | "desc";
|
|
333
|
+
}[];
|
|
334
|
+
onSortChange: (sort: {
|
|
335
|
+
key: string;
|
|
336
|
+
direction: "asc" | "desc";
|
|
337
|
+
}[]) => void;
|
|
338
|
+
onRowClick?: (item: T) => void;
|
|
339
|
+
onRowDoubleClick?: (item: T) => void;
|
|
340
|
+
rowClassName?: (item: T) => string;
|
|
341
|
+
expandable?: boolean;
|
|
342
|
+
renderExpanded?: (item: T) => React.ReactNode;
|
|
343
|
+
columnVisibility?: Record<string, boolean>;
|
|
344
|
+
onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
|
|
345
|
+
exportable?: boolean;
|
|
346
|
+
onExport?: (type: "csv" | "excel" | "pdf") => void;
|
|
347
|
+
virtualized?: boolean;
|
|
348
|
+
draggable?: boolean;
|
|
349
|
+
onRowReorder?: (data: T[]) => void;
|
|
350
|
+
keyboardNavigation?: boolean;
|
|
351
|
+
theme?: "light" | "dark" | "auto";
|
|
352
|
+
meta?: Record<string, any>;
|
|
353
|
+
actions?: Record<string, (item: T) => void>;
|
|
354
|
+
searchable?: boolean;
|
|
355
|
+
searchPlaceholder?: string;
|
|
356
|
+
clientPagination?: boolean;
|
|
357
|
+
itemsPerPage?: number;
|
|
358
|
+
selectable?: boolean;
|
|
359
|
+
onBulkDelete?: (selectedIds: string[]) => void;
|
|
360
|
+
bulkDeleteBaseUrl?: string;
|
|
361
|
+
idKey?: keyof T;
|
|
362
|
+
defaultActions?: DefaultActionsConfig<T>;
|
|
363
|
+
className?: string;
|
|
296
364
|
}
|
|
297
|
-
/**
|
|
298
|
-
* Server-side pagination prop passed to the Table component
|
|
299
|
-
* @interface ServerPaginationProp
|
|
300
|
-
*/
|
|
301
365
|
interface ServerPaginationProp {
|
|
302
366
|
pagination: ServerPagination;
|
|
303
367
|
currentPage: number;
|
|
304
368
|
goToPage: (page: number) => void;
|
|
305
369
|
}
|
|
370
|
+
type ServerTableFilterType = "input" | "select" | "checkbox" | "toggle" | "date" | "date-time" | "date-range";
|
|
371
|
+
interface ServerTableFilterField {
|
|
372
|
+
key: string;
|
|
373
|
+
type: ServerTableFilterType;
|
|
374
|
+
label?: string;
|
|
375
|
+
placeholder?: string;
|
|
376
|
+
/** Options for type="select" */
|
|
377
|
+
options?: string[] | {
|
|
378
|
+
label: string;
|
|
379
|
+
value: string;
|
|
380
|
+
}[];
|
|
381
|
+
}
|
|
306
382
|
/**
|
|
307
383
|
* Custom hook for fetching and managing server-side paginated table data.
|
|
308
384
|
* Supports Laravel encryption, auto-column derivation, and flexible pagination.
|
|
@@ -319,12 +395,17 @@ interface ServerPaginationProp {
|
|
|
319
395
|
* })
|
|
320
396
|
* ```
|
|
321
397
|
*/
|
|
322
|
-
declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError }: UseServerTableOptions): UseServerTableReturn<T>;
|
|
398
|
+
declare function useServerTable<T extends Record<string, any>>({ url, params, encrypt, key, decryptPayloadLog, columnOverrides, debounce, transform, manual, refresh: refreshEnabled, refreshInterval, hardReload, onSuccess, onError, filter: filterFields, sort: sortKeys }: UseServerTableOptions): UseServerTableReturn<T>;
|
|
323
399
|
/**
|
|
324
400
|
* Available field types for action forms (edit/view modals)
|
|
325
401
|
* @type {ActionFieldType}
|
|
326
402
|
*/
|
|
327
403
|
type ActionFieldType = "input" | "password" | "textarea" | "checkbox" | "toggle" | "select" | "radio" | "slider" | "tag-input" | "otp" | "combobox" | "color-picker" | "date-range" | "rich-text" | "file-upload" | "repeater";
|
|
404
|
+
/**
|
|
405
|
+
* Display type for viewForm fields — controls how the value is rendered in the View modal
|
|
406
|
+
* @type {ViewFieldType}
|
|
407
|
+
*/
|
|
408
|
+
type ViewFieldType = "text" | "image" | "checkbox" | "toggle" | "attachment" | "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs" | "repeater";
|
|
328
409
|
/**
|
|
329
410
|
* Configuration for a single field in action forms (edit/view modals)
|
|
330
411
|
* @interface ActionField
|
|
@@ -350,6 +431,8 @@ interface ActionField {
|
|
|
350
431
|
step?: number;
|
|
351
432
|
/** Number of OTP digits for type="otp" */
|
|
352
433
|
digits?: number;
|
|
434
|
+
/** Field definitions for type="repeater" / viewType="repeater" */
|
|
435
|
+
repeaterFields?: RepeaterField[];
|
|
353
436
|
/** Validation: regex or built-in preset ("email" | "url" | "numeric" | "alpha" | "alphanumeric") */
|
|
354
437
|
validation?: RegExp | "email" | "url" | "numeric" | "alpha" | "alphanumeric";
|
|
355
438
|
/** Custom message shown when validation fails */
|
|
@@ -360,8 +443,21 @@ interface ActionField {
|
|
|
360
443
|
rowSpan?: number;
|
|
361
444
|
/** Custom render — overrides built-in field renderer */
|
|
362
445
|
render?: (value: any, onChange: (v: any) => void) => React.ReactNode;
|
|
446
|
+
/** Drop-in React component — rendered as-is, bypasses label and built-in renderer. Use for fully custom fields. */
|
|
447
|
+
component?: React.ReactNode;
|
|
363
448
|
/** Hide this field from view/edit forms */
|
|
364
449
|
hidden?: boolean;
|
|
450
|
+
/**
|
|
451
|
+
* Display type for viewForm — controls how the value is rendered in the View modal.
|
|
452
|
+
* Overrides type for view-only rendering.
|
|
453
|
+
* "text" | "image" | "checkbox" | "toggle" | "attachment" |
|
|
454
|
+
* "text-url" | "text-url-open-other-tabs" | "image-url" | "image-url-open-other-tabs"
|
|
455
|
+
*/
|
|
456
|
+
viewType?: ViewFieldType;
|
|
457
|
+
/** Width applied to the field value in the View modal (e.g. 120, "100%", "8rem") */
|
|
458
|
+
width?: number | string;
|
|
459
|
+
/** Height applied to the field value in the View modal (e.g. 80, "5rem") */
|
|
460
|
+
height?: number | string;
|
|
365
461
|
}
|
|
366
462
|
/**
|
|
367
463
|
* Configuration for customizing the appearance of action buttons (View/Edit/Delete)
|
|
@@ -436,6 +532,8 @@ interface DefaultActionsConfig<T> {
|
|
|
436
532
|
editForm?: ActionField[];
|
|
437
533
|
/** Fields rendered in the View modal. Auto-derived from row keys when omitted. */
|
|
438
534
|
viewForm?: ActionField[];
|
|
535
|
+
/** Grid columns for the view form layout (e.g. 2 = two-column grid). Default single column. */
|
|
536
|
+
viewFormGrid?: number;
|
|
439
537
|
/** Grid columns for the edit form layout (e.g. 2 = two-column grid). Default single column. */
|
|
440
538
|
editFormGrid?: number;
|
|
441
539
|
/** Size of the View / Edit / Delete / extra action buttons. Default "xs". */
|
|
@@ -535,7 +633,7 @@ type ModalWidth = keyof typeof MODAL_WIDTH;
|
|
|
535
633
|
interface Column<T> {
|
|
536
634
|
key: keyof T | string;
|
|
537
635
|
title: string;
|
|
538
|
-
type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox";
|
|
636
|
+
type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox" | "text-url";
|
|
539
637
|
stackProps?: {
|
|
540
638
|
limit?: number;
|
|
541
639
|
stacked?: boolean;
|
|
@@ -562,6 +660,18 @@ interface Column<T> {
|
|
|
562
660
|
tooltip?: (item: T) => string;
|
|
563
661
|
/** Allow copying cell content */
|
|
564
662
|
copyable?: boolean;
|
|
663
|
+
/**
|
|
664
|
+
* For type="text-url": static URL to navigate to. If omitted, uses the cell value as the URL.
|
|
665
|
+
* Supports dynamic URL via function: (item) => string
|
|
666
|
+
*/
|
|
667
|
+
redirect?: string | ((item: T) => string);
|
|
668
|
+
/** For type="text-url": open link in a new tab. Default false. */
|
|
669
|
+
openNewTab?: boolean;
|
|
670
|
+
/**
|
|
671
|
+
* For type="text-url": underline color.
|
|
672
|
+
* Accepts: "primary" | "info" | "success" | "warning" | "danger" | any hex | rgb | rgba string.
|
|
673
|
+
*/
|
|
674
|
+
underlineColor?: "primary" | "info" | "success" | "warning" | "danger" | string;
|
|
565
675
|
}
|
|
566
676
|
/**
|
|
567
677
|
* Props for the Table component
|
|
@@ -604,15 +714,36 @@ interface TableProps<T> {
|
|
|
604
714
|
actions?: Record<string, (item: T) => void>;
|
|
605
715
|
searchable?: boolean;
|
|
606
716
|
searchPlaceholder?: string;
|
|
607
|
-
|
|
717
|
+
clientPagination?: boolean;
|
|
608
718
|
itemsPerPage?: number;
|
|
609
719
|
selectable?: boolean;
|
|
610
720
|
onBulkDelete?: (selectedIds: string[]) => void;
|
|
611
721
|
idKey?: keyof T;
|
|
722
|
+
/**
|
|
723
|
+
* Base URL for built-in bulk delete actions.
|
|
724
|
+
* DELETE all → `{bulkDeleteBaseUrl}/delete/all`
|
|
725
|
+
* DELETE selected → `{bulkDeleteBaseUrl}/delete/{ids}/selected`
|
|
726
|
+
*/
|
|
727
|
+
bulkDeleteBaseUrl?: string;
|
|
612
728
|
/** When provided, appends an Actions column with View / Edit / Delete buttons */
|
|
613
729
|
defaultActions?: DefaultActionsConfig<T>;
|
|
614
730
|
/** Pass the serverPagination object from useServerTable to enable server-side pagination */
|
|
615
731
|
serverPagination?: ServerPaginationProp | null;
|
|
732
|
+
/**
|
|
733
|
+
* Visual variant of the table.
|
|
734
|
+
* - `"default"` — bordered card with subtle bg (original style)
|
|
735
|
+
* - `"zebra"` — alternating row colors for easy scanning
|
|
736
|
+
* - `"card"` — each row rendered as an individual card
|
|
737
|
+
* - `"glass"` — glassmorphism: transparent + backdrop blur
|
|
738
|
+
* - `"soft"` — neumorphic soft shadows, no hard borders
|
|
739
|
+
*/
|
|
740
|
+
variant?: "default" | "zebra" | "card" | "glass" | "soft";
|
|
741
|
+
/** Custom icon for the column visibility toggle button. When provided, hides the "Columns" text label. */
|
|
742
|
+
columnVisibilityIcon?: React.ReactElement;
|
|
743
|
+
/** Filter bar node (e.g. from useServerTable's filterBar). Rendered below the toolbar when visible. */
|
|
744
|
+
filterBar?: React.ReactNode;
|
|
745
|
+
/** Custom icon for the filter toggle button. When provided, hides the "Filter" text label. */
|
|
746
|
+
filterableIcon?: React.ReactElement;
|
|
616
747
|
className?: string;
|
|
617
748
|
}
|
|
618
749
|
/**
|
|
@@ -632,7 +763,7 @@ interface TableProps<T> {
|
|
|
632
763
|
* { key: "active", type: "toggle", onChange: handleToggle },
|
|
633
764
|
* ]}
|
|
634
765
|
* searchable
|
|
635
|
-
*
|
|
766
|
+
* clientPagination
|
|
636
767
|
* selectable
|
|
637
768
|
* onBulkDelete={handleBulkDelete}
|
|
638
769
|
* defaultActions={{
|
|
@@ -642,7 +773,7 @@ interface TableProps<T> {
|
|
|
642
773
|
* />
|
|
643
774
|
* ```
|
|
644
775
|
*/
|
|
645
|
-
declare function Table<T extends Record<string, any>>({ data, columns, searchable, searchPlaceholder,
|
|
776
|
+
declare function Table<T extends Record<string, any>>({ data, columns, loading, emptyState, error: errorProp, searchable, searchPlaceholder, searchValue: controlledSearch, onSearchChange, clientPagination, itemsPerPage, selectable, onBulkDelete, idKey, bulkDeleteBaseUrl, defaultActions, serverPagination, variant, className, onRowClick, onRowDoubleClick, rowClassName, expandable, renderExpanded, columnVisibility, onColumnVisibilityChange, columnVisibilityIcon, filterBar, filterableIcon, exportable, onExport, virtualized, draggable, onRowReorder, keyboardNavigation, }: TableProps<T>): react_jsx_runtime.JSX.Element;
|
|
646
777
|
|
|
647
778
|
type BulletinPriority = "low" | "medium" | "high" | "urgent";
|
|
648
779
|
type BulletinLayout = "grid" | "list" | "masonry";
|
|
@@ -1923,16 +2054,6 @@ interface RadioGroupProps {
|
|
|
1923
2054
|
}
|
|
1924
2055
|
declare function RadioGroup({ options, value: controlledValue, defaultValue, onChange, variant, size, orientation, name, className, required, error, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
1925
2056
|
|
|
1926
|
-
interface RepeaterProps<T> {
|
|
1927
|
-
items: T[];
|
|
1928
|
-
onAdd: () => void;
|
|
1929
|
-
onRemove: (index: number) => void;
|
|
1930
|
-
renderItem: (item: T, index: number) => React.ReactNode;
|
|
1931
|
-
addButtonText?: string;
|
|
1932
|
-
className?: string;
|
|
1933
|
-
}
|
|
1934
|
-
declare function Repeater<T>({ items, onAdd, onRemove, renderItem, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
|
|
1935
|
-
|
|
1936
2057
|
interface ResizablePanelsProps {
|
|
1937
2058
|
children: [React.ReactNode, React.ReactNode];
|
|
1938
2059
|
orientation?: "horizontal" | "vertical";
|