funuicss 3.3.3 → 3.3.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.3.3",
+  "version": "3.3.5",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/table/Table.d.ts

@@ -22,6 +22,11 @@ type TableProps = {
     body?: React.ReactNode;
     height?: number;
     pageSize?: number;
+    emptyResponse?: {
+        icon?: React.ReactNode;
+        title?: React.ReactNode;
+        subtitle: React.ReactNode;
+    };
     customColumns?: {
         title: string;
         render: (data: any) => React.ReactNode;
@@ -31,5 +36,5 @@ type TableProps = {
 };
 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
-...rest }: TableProps): React.JSX.Element;
+emptyResponse, ...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -55,6 +55,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -73,22 +82,24 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var Text_1 = __importDefault(require("../text/Text"));
 var react_easy_export_1 = require("react-easy-export");
 var View_1 = __importDefault(require("../view/View"));
+var ScrollInView_1 = __importDefault(require("../ScrollInView/ScrollInView"));
+var Select_1 = __importDefault(require("../select/Select"));
 function Table(_a) {
     var _b, _c;
-    var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, title = _a.title, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, isLoading = _a.isLoading, right = _a.right, hideExport = _a.hideExport, height = _a.height, _d = _a.pageSize, pageSize = _d === void 0 ? data ? 10 : 0 : _d, // Default page size,
+    var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, title = _a.title, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _d = _a.isLoading, isLoading = _d === void 0 ? false : _d, right = _a.right, hideExport = _a.hideExport, height = _a.height, _e = _a.pageSize, pageSize = _e === void 0 ? data ? 10 : 0 : _e, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields"]);
+    emptyResponse = _a.emptyResponse, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
-    var _e = (0, react_1.useState)(''), search = _e[0], setSearch = _e[1];
-    var _f = (0, react_1.useState)(1), currentPage = _f[0], setCurrentPage = _f[1];
+    var _f = (0, react_1.useState)(''), search = _f[0], setSearch = _f[1];
+    var _g = (0, react_1.useState)(1), currentPage = _g[0], setCurrentPage = _g[1];
     // Determine the total number of pages based on data length and page size
     var totalPages = data ? Math.ceil((((_b = data === null || data === void 0 ? void 0 : data.data) === null || _b === void 0 ? void 0 : _b.length) || 0) / pageSize) : 0;
     // Calculate start and end indices for data pagination
     var startIndex = data ? (currentPage - 1) * pageSize : 0;
     var endIndex = data ? Math.min(startIndex + pageSize, ((_c = data === null || data === void 0 ? void 0 : data.data) === null || _c === void 0 ? void 0 : _c.length) || 0) : 0;
-    var _g = (0, react_1.useState)(null), selectedField = _g[0], setSelectedField = _g[1];
-    var _h = (0, react_1.useState)(null), selectedValue = _h[0], setSelectedValue = _h[1];
+    var _h = (0, react_1.useState)(null), selectedField = _h[0], setSelectedField = _h[1];
+    var _j = (0, react_1.useState)(null), selectedValue = _j[0], setSelectedValue = _j[1];
     // Enhanced filter logic:
     var normalize = function (val) { return val === null || val === void 0 ? void 0 : val.toString().toLowerCase().trim(); };
     var matchesSearch = function (item) {
@@ -177,26 +188,31 @@ function Table(_a) {
                     data && filterableFields ?
                         React.createElement("div", { className: "col width-200-max" },
                             React.createElement(RowFlex_1.default, { gap: 0.7 },
-                                !selectedField &&
-                                    React.createElement("select", { className: " input borderedInput roundEdgeSmall smallInput", value: selectedField || '', onChange: function (e) {
-                                            handleFieldChange(e.target.value);
-                                        } },
-                                        React.createElement("option", { value: "" }, "\uD83D\uDD0D Filter"),
-                                        React.createElement("option", { value: "" }, "All*"), filterableFields === null || filterableFields === void 0 ? void 0 :
-                                        filterableFields.map(function (field) { return (React.createElement("option", { key: field, value: field }, field)); })),
-                                selectedField && (React.createElement("select", { className: " input borderedInput width-200-max  roundEdgeSmall smallInput", value: selectedValue || '', onChange: function (e) {
-                                        if (e.target.value === 'clear_all') {
+                                React.createElement(Select_1.default, { value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
+                                        { text: '🔍 Filter', value: '' },
+                                        { text: 'All*', value: '' }
+                                    ], (filterableFields || []).map(function (field) { return ({
+                                        text: field,
+                                        value: field
+                                    }); }), true) }),
+                                selectedField && (React.createElement(Select_1.default, { funcss: "width-200-max", value: selectedValue || '', onChange: function (e) {
+                                        if (e === 'clear_all') {
                                             setSelectedField('');
                                         }
                                         else {
-                                            handleValueChange(e.target.value);
+                                            handleValueChange(e);
                                             handleChangePage(1);
                                         }
-                                    } },
-                                    React.createElement("option", { value: "" }, "All*"),
-                                    uniqueValues.map(function (item) { return (React.createElement(React.Fragment, null, item &&
-                                        React.createElement("option", { key: item, value: item }, item.toString()))); }),
-                                    React.createElement("option", { value: "clear_all" }, "Clear")))))
+                                    }, options: __spreadArray(__spreadArray([
+                                        { text: 'All*', value: '' }
+                                    ], uniqueValues
+                                        .filter(Boolean) // remove null/undefined/empty
+                                        .map(function (item) { return ({
+                                        text: item.toString(),
+                                        value: item
+                                    }); }), true), [
+                                        { text: 'Clear', value: 'clear_all' }
+                                    ], false) }))))
                         : '',
                     React.createElement(React.Fragment, null,
                         React.createElement(RowFlex_1.default, { gap: 0.5 },
@@ -226,14 +242,14 @@ function Table(_a) {
                 isLoading &&
                     [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(function () { return (React.createElement(Row_1.default, { funcss: 'skeleton' })); }),
                 children ? children : ''),
-            (((data === null || data === void 0 ? void 0 : data.data.length) || filteredData.length === 0) && !isLoading) &&
-                React.createElement(View_1.default, { funcss: 'max-w-400 p-4 text-center center' },
-                    React.createElement("div", null,
-                        React.createElement(pi_1.PiEmpty, { size: 30, className: 'text-error' })),
-                    React.createElement("div", null,
-                        React.createElement(Text_1.default, { text: "No Record Found!", size: 'xl' })),
-                    React.createElement("div", null,
-                        React.createElement(Text_1.default, { text: "You can try reloading the page or check your query" })))),
+            (filteredData.length === 0 && !isLoading) &&
+                React.createElement(ScrollInView_1.default, null,
+                    React.createElement(View_1.default, { funcss: 'max-w-400 p-4 text-center center' },
+                        React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.icon) || React.createElement(pi_1.PiEmpty, { size: 30, className: 'text-error' })),
+                        React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.title) ||
+                            React.createElement(Text_1.default, { text: "No Record Found!", size: 'xl' })),
+                        React.createElement("div", null, (emptyResponse === null || emptyResponse === void 0 ? void 0 : emptyResponse.subtitle) ||
+                            React.createElement(Text_1.default, { text: "You can try reloading the page or check your query" }))))),
         data &&
             React.createElement(React.Fragment, null, pageSize &&
                 React.createElement(React.Fragment, null, filteredData.length > pageSize &&