funuicss 3.7.15 → 3.8.0

package/ui/specials/Circle.js

@@ -59,7 +59,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, _c = _a.className, className = _c === void 0 ? '' : _c, bordered = _a.bordered, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "className", "bordered", "style"]);
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, _c = _a.className, className = _c === void 0 ? '' : _c, bordered = _a.bordered, body = _a.body, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "className", "bordered", "body", "style"]);
     return (React.createElement("div", __assign({ className: " ".concat(className, " animated fade-in ").concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: __assign({ width: "".concat(size + "rem" || '2.3rem'), height: "".concat(size + "rem" || '2.3rem') }, style), key: key, onClick: onClick }, rest),
-        React.createElement(React.Fragment, null, children)));
+        React.createElement(React.Fragment, null, body || children)));
 }

package/ui/table/Table.d.ts

@@ -1,4 +1,15 @@
 import * as React from 'react';
+type ColumnConfig = {
+    field: string;
+    title: string;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    cellClassName?: string;
+    textWrap?: boolean;
+    headerClassName?: string;
+};
 type TableProps = {
     children?: React.ReactNode;
     funcss?: string;
@@ -17,6 +28,7 @@ type TableProps = {
         "data": any[];
         "titles": string[];
         "funcss": string[];
+        "columns"?: ColumnConfig[];
     };
     filterOnchange?: (filter?: any, value?: any, totals?: number) => {};
     clearSearch?: boolean;
@@ -38,8 +50,10 @@ type TableProps = {
     filterableFields?: string[];
     prioritizeSearchFields?: string[];
     onRowClick?: (data: any) => void;
+    columns?: ColumnConfig[];
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, trCss, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, trCss, columns, // New columns prop
+...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -89,7 +89,8 @@ function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, trCss = _a.trCss, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick", "trCss"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, trCss = _a.trCss, columns = _a.columns, // New columns prop
+    rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick", "trCss", "columns"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
@@ -180,6 +181,70 @@ function Table(_a) {
             filterOnchange(selectedField, selectedValue, filteredData.length);
         }
     }, [selectedField, selectedValue]);
+    // Helper function to get column configuration for a specific index
+    var getColumnConfig = function (index) {
+        if (columns && columns[index]) {
+            return columns[index];
+        }
+        if ((data === null || data === void 0 ? void 0 : data.columns) && data.columns[index]) {
+            return data.columns[index];
+        }
+        return undefined;
+    };
+    // Helper function to generate grid template columns
+    var generateGridTemplateColumns = function () {
+        var _a;
+        // First, try to use the explicit columns prop
+        if (columns && columns.length > 0) {
+            return columns.map(function (col) {
+                return typeof col.width === 'number' ? "".concat(col.width, "px") :
+                    col.width || '1fr';
+            }).join(' ');
+        }
+        // Then, try to use columns from data
+        if ((data === null || data === void 0 ? void 0 : data.columns) && data.columns.length > 0) {
+            return data.columns.map(function (col) {
+                return typeof col.width === 'number' ? "".concat(col.width, "px") :
+                    col.width || '1fr';
+            }).join(' ');
+        }
+        // For custom columns, we need to add their widths too
+        if (customColumns && customColumns.length > 0) {
+            var totalColumns = (((_a = data === null || data === void 0 ? void 0 : data.fields) === null || _a === void 0 ? void 0 : _a.length) || 0) + customColumns.length;
+            return Array(totalColumns).fill('1fr').join(' ');
+        }
+        // Default fallback
+        if (data === null || data === void 0 ? void 0 : data.fields) {
+            return data.fields.map(function () { return '1fr'; }).join(' ');
+        }
+        return '1fr';
+    };
+    // Helper function to get column width for a specific index
+    var getColumnWidth = function (index) {
+        var col = getColumnConfig(index);
+        if (col === null || col === void 0 ? void 0 : col.width) {
+            return typeof col.width === 'number' ? "".concat(col.width, "px") : col.width;
+        }
+        return 'auto';
+    };
+    // Helper function to get column min-width for a specific index
+    var getColumnMinWidth = function (index) {
+        var col = getColumnConfig(index);
+        if (col === null || col === void 0 ? void 0 : col.minWidth) {
+            return typeof col.minWidth === 'number' ? "".concat(col.minWidth, "px") : col.minWidth;
+        }
+        return '80px';
+    };
+    // Helper function to get column max-width for a specific index
+    var getColumnMaxWidth = function (index) {
+        var col = getColumnConfig(index);
+        if (col === null || col === void 0 ? void 0 : col.maxWidth) {
+            return typeof col.maxWidth === 'number' ? "".concat(col.maxWidth, "px") : col.maxWidth;
+        }
+        return 'none';
+    };
+    // Generate grid template columns string
+    var gridTemplateColumns = generateGridTemplateColumns();
     return (React.createElement("div", { className: "".concat(funcss ? funcss : '', " roundEdge") },
         data &&
             React.createElement("div", { className: "pr-4 pl-4 pt-2 pb-2 lighter tableHeader mb-2", style: { overflow: "show" } },
@@ -257,36 +322,99 @@ function Table(_a) {
             React.createElement("div", __assign({ className: "table-grid ".concat(bordered ? 'bordered' : '', " ").concat(noStripped ? '' : 'stripped', " ").concat(hoverable ? 'hoverableTr' : '', " ").concat(light ? 'light' : '', " ").concat(dark ? 'dark' : ''), style: {
                     height: height ? height + "px" : "",
                     position: 'relative',
-                    zIndex: 1
+                    zIndex: 1,
+                    // Set grid template columns on the main container for consistency
+                    gridTemplateColumns: gridTemplateColumns
                 } }, rest),
-                data && (data === null || data === void 0 ? void 0 : data.titles) && (React.createElement("div", { className: "table-head" }, data.titles.map(function (mdoc, index) { return (React.createElement("div", { key: mdoc, className: "table-header text-secondary ".concat(index === 0 ? "first_table_data" : "", " ").concat(index === data.titles.length - 1 ? "last_table_data" : ""), "data-label": mdoc }, mdoc)); }))),
+                data && (data === null || data === void 0 ? void 0 : data.titles) && (React.createElement("div", { className: "table-head", style: {
+                        // Match the grid template columns
+                        gridTemplateColumns: gridTemplateColumns
+                    } }, data.titles.map(function (mdoc, index) {
+                    var colConfig = getColumnConfig(index);
+                    return (React.createElement("div", { key: mdoc, className: "table-header text-secondary ".concat((colConfig === null || colConfig === void 0 ? void 0 : colConfig.headerClassName) || '', " ").concat(index === 0 ? "first_table_data" : "", " ").concat(index === data.titles.length - 1 ? "last_table_data" : ""), "data-label": mdoc, style: {
+                            // Apply column-specific styles
+                            minWidth: getColumnMinWidth(index),
+                            maxWidth: getColumnMaxWidth(index),
+                            width: getColumnWidth(index),
+                            overflow: 'hidden',
+                            whiteSpace: 'nowrap',
+                            textOverflow: 'ellipsis'
+                        } }, mdoc));
+                }))),
                 head && React.createElement("div", { className: "table-head" }, head),
-                React.createElement("div", { className: "table-body" },
+                React.createElement("div", { className: "table-body", style: {
+                        // Match the grid template columns
+                        gridTemplateColumns: gridTemplateColumns
+                    } },
                     body && body,
                     data &&
                         (function () {
                             var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
                             var shouldSlice = !searchQuery || results.length > 10;
-                            return (shouldSlice ? results.slice(startIndex, endIndex) : results).map(function (mdoc, index) { return (React.createElement("div", { className: "table-row animated slide-up ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
+                            return (shouldSlice ? results.slice(startIndex, endIndex) : results).map(function (mdoc, index) { return (React.createElement("div", { className: "table-row animated slide-up ".concat(trCss), key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined, style: {
+                                    // Match the grid template columns
+                                    gridTemplateColumns: gridTemplateColumns
+                                } },
                                 data.fields.map(function (fdoc, findex) {
                                     var _a, _b;
-                                    return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : ""), "data-label": ((_b = data.titles) === null || _b === void 0 ? void 0 : _b[findex]) || fdoc, style: { overflow: "visible" } }, getNestedValue(mdoc, fdoc)));
+                                    var colConfig = getColumnConfig(findex);
+                                    var cellContent = getNestedValue(mdoc, fdoc);
+                                    return (React.createElement("div", { key: fdoc, className: "table-cell ".concat(data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || "" : "", " ").concat((colConfig === null || colConfig === void 0 ? void 0 : colConfig.cellClassName) || '', " ").concat((colConfig === null || colConfig === void 0 ? void 0 : colConfig.textWrap) ? 'wrap' : 'truncate'), "data-label": ((_b = data.titles) === null || _b === void 0 ? void 0 : _b[findex]) || fdoc, style: {
+                                            overflow: "visible",
+                                            // Apply column-specific styles to match header
+                                            minWidth: getColumnMinWidth(findex),
+                                            maxWidth: getColumnMaxWidth(findex),
+                                            width: getColumnWidth(findex),
+                                            // Text handling based on column config
+                                            whiteSpace: (colConfig === null || colConfig === void 0 ? void 0 : colConfig.textWrap) ? 'normal' : 'nowrap',
+                                            overflowWrap: (colConfig === null || colConfig === void 0 ? void 0 : colConfig.textWrap) ? 'break-word' : 'normal',
+                                            textOverflow: (colConfig === null || colConfig === void 0 ? void 0 : colConfig.textWrap) ? 'clip' : 'ellipsis'
+                                        } }, cellContent));
                                 }),
                                 customColumns
-                                    ? customColumns.map(function (column, columnIndex) { return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
-                                            position: "relative",
-                                            overflow: "visible",
-                                        } },
-                                        React.createElement("div", { style: {
+                                    ? customColumns.map(function (column, columnIndex) {
+                                        var _a;
+                                        // Calculate index for custom column (after regular data fields)
+                                        var colIndex = (((_a = data === null || data === void 0 ? void 0 : data.fields) === null || _a === void 0 ? void 0 : _a.length) || 0) + columnIndex;
+                                        return (React.createElement("div", { key: columnIndex, className: "table-cell", "data-label": column.title || "Action", style: {
                                                 position: "relative",
                                                 overflow: "visible",
-                                                zIndex: 50,
-                                            } }, column.render && column.render(mdoc)),
-                                        column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title)))); })
+                                                // Apply column-specific styles
+                                                minWidth: getColumnMinWidth(colIndex),
+                                                maxWidth: getColumnMaxWidth(colIndex),
+                                                width: getColumnWidth(colIndex)
+                                            } },
+                                            React.createElement("div", { style: {
+                                                    position: "relative",
+                                                    overflow: "visible",
+                                                    zIndex: 50,
+                                                } }, column.render && column.render(mdoc)),
+                                            column.onClick && (React.createElement(Button_1.default, { onClick: function () { return column.onClick && column.onClick(mdoc); } }, column.title))));
+                                    })
                                     : "")); });
                         })(),
                     isLoading &&
-                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement("div", { key: index, className: "table-row skeleton" }, data === null || data === void 0 ? void 0 : data.fields.map(function (_, cellIndex) { return (React.createElement("div", { key: cellIndex, className: "table-cell" })); }))); }),
+                        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function (_, index) { return (React.createElement("div", { key: index, className: "table-row skeleton", style: {
+                                // Match the grid template columns
+                                gridTemplateColumns: gridTemplateColumns
+                            } }, data === null || data === void 0 ? void 0 :
+                            data.fields.map(function (_, cellIndex) {
+                                return (React.createElement("div", { key: cellIndex, className: "table-cell", style: {
+                                        // Apply column-specific styles to match headers
+                                        minWidth: getColumnMinWidth(cellIndex),
+                                        maxWidth: getColumnMaxWidth(cellIndex),
+                                        width: getColumnWidth(cellIndex)
+                                    } }));
+                            }),
+                            customColumns && customColumns.map(function (_, customIndex) {
+                                var _a;
+                                var colIndex = (((_a = data === null || data === void 0 ? void 0 : data.fields) === null || _a === void 0 ? void 0 : _a.length) || 0) + customIndex;
+                                return (React.createElement("div", { key: "skeleton-custom-".concat(customIndex), className: "table-cell", style: {
+                                        minWidth: getColumnMinWidth(colIndex),
+                                        maxWidth: getColumnMaxWidth(colIndex),
+                                        width: getColumnWidth(colIndex)
+                                    } }));
+                            }))); }),
                     children ? children : ""),
                 filteredData.length === 0 && !isLoading && !children && (React.createElement("div", { className: "table-empty" },
                     React.createElement("div", { className: "empty-icon" }, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: "text-error" })),

package/ui/theme/theme.d.ts

@@ -8,6 +8,64 @@ interface Variable {
     name: string;
     value: any;
 }
+export interface BucketField {
+    name: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    options?: string[];
+    min?: number;
+    max?: number;
+    multiple?: boolean;
+}
+export interface Bucket {
+    id: string;
+    name: string;
+    displayName: string;
+    category?: string;
+    fields: BucketField[];
+    createdBy: string;
+    createdAt: number;
+    updatedAt: number;
+    updatedBy: string;
+    recordCount: number;
+    jsonFilesCount: number;
+    totalRecordsInJson: number;
+    lastJsonExport?: number;
+    userId?: string;
+    createdAtString?: string;
+    updatedAtString?: string;
+}
+export interface BucketRecord {
+    id: string;
+    values: Record<string, any>;
+    createdBy: string;
+    createdAt: number;
+    updatedAt: number;
+    updatedBy: string;
+}
+export interface JsonFileMetadata {
+    page: number;
+    totalPages: number;
+    recordsInPage: number;
+    totalRecords: number;
+    exportedAt: string;
+    recordsPerFile: number;
+    projectId: string;
+    bucketId: string;
+    bucketName: string;
+}
+export interface JsonFileData {
+    metadata: JsonFileMetadata;
+    records: BucketRecord[];
+}
+export interface JsonFileInfo {
+    name: string;
+    fullPath: string;
+    url: string;
+    size: number;
+    page: number;
+}
 interface ProjectData {
     theme_config?: {
         colors?: Record<string, string>;
@@ -18,6 +76,7 @@ interface ProjectData {
     default_variation?: ThemeVariant;
     variables?: Variable[];
     assets?: Asset[];
+    buckets?: any[];
     name?: string;
     project_id?: string;
     version?: number;
@@ -34,6 +93,7 @@ interface ThemeProviderProps {
     funcss?: string;
     minHeight?: string;
     children: ReactNode;
+    project?: ProjectData | null;
 }
 interface ThemeContextType {
     variant: ThemeVariant;
@@ -43,6 +103,7 @@ interface ThemeContextType {
     isLoading: boolean;
     isInitialLoad: boolean;
     error: string | null;
+    projectId?: string;
 }
 export declare const useTheme: () => ThemeContextType;
 export declare const useVariant: () => {
@@ -95,3 +156,33 @@ export declare const useImageAssets: () => Asset[];
 export declare const useVideoAssets: () => Asset[];
 export declare const useAudioAssets: () => Asset[];
 export declare const useDocumentAssets: () => Asset[];
+export declare const useBuckets: () => Bucket[];
+export declare const useBucket: (bucketIdOrName: string) => Bucket | undefined;
+export declare const useBucketsByCategory: (category: string) => Bucket[];
+export declare const useBucketJsonFiles: (bucketIdOrName: string) => {
+    files: JsonFileInfo[];
+    loading: boolean;
+    error: string | null;
+    refresh: () => Promise<void>;
+};
+export declare const usePaginatedRecords: (bucketIdOrName: string, page: number, pageSize?: number) => {
+    records: BucketRecord[];
+    metadata: JsonFileMetadata | null;
+    loading: boolean;
+    error: string | null;
+    refresh: () => Promise<void>;
+};
+export declare const useAllJsonRecords: (bucketIdOrName: string) => {
+    records: BucketRecord[];
+    loading: boolean;
+    error: string | null;
+    refresh: () => Promise<void>;
+};
+export declare const useBucketCache: () => {
+    clearCache: (bucketIdOrName?: string) => void;
+    refresh: () => void;
+};
+export declare const getPaginatedRecords: (bucketIdOrName: string, page: number, pageSize?: number) => Promise<{
+    records: BucketRecord[];
+    metadata: JsonFileMetadata | null;
+}>;