funuicss 3.4.6 → 3.4.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.4.6",
+  "version": "3.4.8",
   "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/select/Select.d.ts

@@ -22,6 +22,7 @@ interface CustomSelectProps {
     status?: 'success' | 'warning' | 'danger' | '';
     className?: string;
     funcss?: string;
+    searchAutoFocus?: boolean;
     style?: React.CSSProperties;
 }
 declare const Select: React.FC<CustomSelectProps>;

package/ui/select/Select.js

@@ -35,12 +35,12 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var Select = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p;
-    var _q = (0, react_1.useState)(false), isOpen = _q[0], setIsOpen = _q[1];
-    var _r = (0, react_1.useState)(null), selectedOption = _r[0], setSelectedOption = _r[1];
-    var _s = (0, react_1.useState)(''), searchQuery = _s[0], setSearchQuery = _s[1];
-    var _t = (0, react_1.useState)(-1), focusedIndex = _t[0], setFocusedIndex = _t[1];
-    var _u = (0, react_1.useState)(options), filteredOptions = _u[0], setFilteredOptions = _u[1];
+    var id = _a.id, name = _a.name, value = _a.value, defaultValue = _a.defaultValue, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select an option' : _b, _c = _a.options, options = _c === void 0 ? [] : _c, onChange = _a.onChange, onBlur = _a.onBlur, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.bordered, bordered = _f === void 0 ? false : _f, _g = _a.borderless, borderless = _g === void 0 ? false : _g, _h = _a.rounded, rounded = _h === void 0 ? false : _h, _j = _a.flat, flat = _j === void 0 ? false : _j, _k = _a.fullWidth, fullWidth = _k === void 0 ? false : _k, _l = _a.status, status = _l === void 0 ? '' : _l, _m = _a.className, className = _m === void 0 ? '' : _m, _o = _a.funcss, funcss = _o === void 0 ? '' : _o, _p = _a.style, style = _p === void 0 ? {} : _p, _q = _a.searchAutoFocus, searchAutoFocus = _q === void 0 ? false : _q;
+    var _r = (0, react_1.useState)(false), isOpen = _r[0], setIsOpen = _r[1];
+    var _s = (0, react_1.useState)(null), selectedOption = _s[0], setSelectedOption = _s[1];
+    var _t = (0, react_1.useState)(''), searchQuery = _t[0], setSearchQuery = _t[1];
+    var _u = (0, react_1.useState)(-1), focusedIndex = _u[0], setFocusedIndex = _u[1];
+    var _v = (0, react_1.useState)(options), filteredOptions = _v[0], setFilteredOptions = _v[1];
     var containerRef = (0, react_1.useRef)(null);
     var triggerRef = (0, react_1.useRef)(null);
     var searchInputRef = (0, react_1.useRef)(null);
@@ -85,7 +85,9 @@ var Select = function (_a) {
             return;
         setIsOpen(true);
         if (searchable && searchInputRef.current) {
-            setTimeout(function () { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+            if (searchAutoFocus) {
+                setTimeout(function () { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
+            }
         }
         else if (selectedOption) {
             var index = filteredOptions.findIndex(function (opt) { return opt.value === selectedOption.value; });

package/ui/table/Query.d.ts

@@ -0,0 +1,7 @@
+interface DataConfig {
+    fields: string[];
+}
+type GetNestedValueFunction = (obj: any, path: string) => any;
+export declare const getAdvancedFilteredData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction) => T[];
+export declare const getFilteredAndPaginatedData: <T = any>(filteredData: T[], searchQuery: string, data: DataConfig, getNestedValue: GetNestedValueFunction, startIndex?: number, endIndex?: number) => T[];
+export {};

package/ui/table/Query.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFilteredAndPaginatedData = exports.getAdvancedFilteredData = void 0;
+// Simple Levenshtein distance function for fuzzy matching
+var levenshteinDistance = function (str1, str2) {
+    var matrix = Array(str2.length + 1).fill(null).map(function () {
+        return Array(str1.length + 1).fill(null);
+    });
+    for (var i = 0; i <= str1.length; i++)
+        matrix[0][i] = i;
+    for (var j = 0; j <= str2.length; j++)
+        matrix[j][0] = j;
+    for (var j = 1; j <= str2.length; j++) {
+        for (var i = 1; i <= str1.length; i++) {
+            var indicator = str1[i - 1] === str2[j - 1] ? 0 : 1;
+            matrix[j][i] = Math.min(matrix[j][i - 1] + 1, // deletion
+            matrix[j - 1][i] + 1, // insertion
+            matrix[j - 1][i - 1] + indicator // substitution
+            );
+        }
+    }
+    return matrix[str2.length][str1.length];
+};
+// Define various search strategies
+var searchStrategies = [
+    // 1. Exact substring match (your original method)
+    function (value, query, terms) {
+        return value.includes(query);
+    },
+    // 2. All terms must be present (AND search)
+    function (value, query, terms) {
+        return terms.every(function (term) { return value.includes(term); });
+    },
+    // 3. Any term must be present (OR search)
+    function (value, query, terms) {
+        return terms.some(function (term) { return value.includes(term); });
+    },
+    // 4. Alphanumeric-only search (ignores special chars)
+    function (value, query, terms) {
+        var cleanValue = value.replace(/[^a-z0-9]/g, '');
+        var cleanQuery = query.replace(/[^a-z0-9]/g, '');
+        return cleanValue.includes(cleanQuery);
+    },
+    // 5. Number extraction and matching
+    function (value, query, terms) {
+        var valueNumbers = value.match(/\d+/g) || [];
+        var queryNumbers = query.match(/\d+/g) || [];
+        return queryNumbers.some(function (queryNum) {
+            return valueNumbers.some(function (valueNum) { return valueNum.includes(queryNum); });
+        });
+    },
+    // 6. Word boundary matching (whole words)
+    function (value, query, terms) {
+        try {
+            var regex = new RegExp("\\b".concat(query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "\\b"), 'i');
+            return regex.test(value);
+        }
+        catch (_a) {
+            return false;
+        }
+    },
+    // 7. Fuzzy matching for typos (simple Levenshtein-based)
+    function (value, query, terms) {
+        if (query.length < 3)
+            return false; // Skip fuzzy for very short queries
+        var words = value.split(/\s+/);
+        return words.some(function (word) {
+            if (Math.abs(word.length - query.length) > 2)
+                return false;
+            return levenshteinDistance(word, query) <= Math.floor(query.length * 0.3);
+        });
+    },
+    // 8. Prefix matching (starts with)
+    function (value, query, terms) {
+        var words = value.split(/[\s-._]+/);
+        return (words.some(function (word) { return word.startsWith(query); }) ||
+            terms.some(function (term) { return words.some(function (word) { return word.startsWith(term); }); }));
+    },
+    // 9. Suffix matching (ends with)
+    function (value, query, terms) {
+        var words = value.split(/[\s-._]+/);
+        return (words.some(function (word) { return word.endsWith(query); }) ||
+            terms.some(function (term) { return words.some(function (word) { return word.endsWith(term); }); }));
+    },
+    // 10. Pattern matching (handles common separators)
+    function (value, query, terms) {
+        // Split on common separators and search in parts
+        var valueParts = value.split(/[-._\s\/\\]/);
+        var queryParts = query.split(/[-._\s\/\\]/);
+        return queryParts.every(function (queryPart) {
+            return valueParts.some(function (valuePart) { return valuePart.includes(queryPart); });
+        });
+    },
+];
+// MAIN FUNCTION: Direct replacement for your original code
+var getAdvancedFilteredData = function (filteredData, searchQuery, data, getNestedValue) {
+    return filteredData.filter(function (mdoc, index) {
+        if (searchQuery) {
+            // Convert search query to lowercase for case-insensitive search
+            var query_1 = searchQuery.toLowerCase().trim();
+            if (!query_1)
+                return true; // If empty query after trim, show all
+            // Split query into multiple terms for multi-term search
+            var queryTerms_1 = query_1.split(/\s+/).filter(function (term) { return term.length > 0; });
+            // Search through all fields defined in data.fields
+            return data.fields.some(function (field) {
+                try {
+                    // Get the value using the same getNestedValue function used for display
+                    var value = getNestedValue(mdoc, field);
+                    // Convert value to string and search
+                    if (value !== null && value !== undefined) {
+                        var stringValue_1 = String(value).toLowerCase();
+                        // Use advanced search strategies instead of just includes
+                        return searchStrategies.some(function (strategy) {
+                            return strategy(stringValue_1, query_1, queryTerms_1);
+                        });
+                    }
+                    return false;
+                }
+                catch (error) {
+                    // Handle any errors in accessing nested values
+                    console.warn("Error accessing field ".concat(field, ":"), error);
+                    return false;
+                }
+            });
+        }
+        else {
+            return true; // If no search query, return all items
+        }
+    });
+};
+exports.getAdvancedFilteredData = getAdvancedFilteredData;
+// Optional: Simplified version with pagination built-in
+var getFilteredAndPaginatedData = function (filteredData, searchQuery, data, getNestedValue, startIndex, endIndex) {
+    if (startIndex === void 0) { startIndex = 0; }
+    var filtered = (0, exports.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue);
+    return endIndex !== undefined ? filtered.slice(startIndex, endIndex) : filtered.slice(startIndex);
+};
+exports.getFilteredAndPaginatedData = getFilteredAndPaginatedData;

package/ui/table/Table.js

@@ -90,6 +90,7 @@ var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var Flex_1 = __importDefault(require("../flex/Flex"));
 var ci_1 = require("react-icons/ci");
 var io5_1 = require("react-icons/io5");
+var Query_1 = require("./Query");
 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,
@@ -202,7 +203,7 @@ function Table(_a) {
                         React.createElement("div", null,
                             React.createElement(Flex_1.default, { width: '100%', wrap: 'nowrap', alignItems: 'center', gap: 0.7 },
                                 !selectedField && !showSearch && filterableFields &&
-                                    React.createElement("div", { className: '' },
+                                    React.createElement("div", { className: 'animated slide-up' },
                                         React.createElement(Select_1.default, { fullWidth: true, searchable: true, funcss: 'min-w-300 w-full', rounded: true, value: selectedField || '', onChange: function (e) { return handleFieldChange(e); }, options: __spreadArray([
                                                 { text: '🔍 Filter', value: '' },
                                                 { text: 'All*', value: '' }
@@ -236,7 +237,7 @@ function Table(_a) {
                                         React.createElement("div", { className: 'animated fade-in' },
                                             React.createElement("div", { onClick: function () { return setshowSearch(false); } },
                                                 React.createElement(ToolTip_1.default, null,
-                                                    filterableFields ? React.createElement(io5_1.IoFilterOutline, null)
+                                                    filterableFields ? React.createElement(io5_1.IoFilterOutline, { className: 'pointer' })
                                                         :
                                                             React.createElement(pi_1.PiXThin, { className: 'pointer', size: 23, onClick: function () { return setshowSearch(false); } }),
                                                     React.createElement(Tip_1.default, { tip: "bottom", animation: "Opacity", duration: 1, content: filterableFields ? "Filter" : "Close Search" })))))
@@ -268,35 +269,33 @@ function Table(_a) {
                 head && React.createElement(Head_1.default, null, head),
                 body && React.createElement(Body_1.default, null, body),
                 data &&
-                    filteredData.filter(function (mdoc, index) {
-                        if (searchQuery) {
-                            // Convert search query to lowercase for case-insensitive search
-                            var query_1 = searchQuery.toLowerCase().trim();
-                            if (!query_1)
-                                return true; // If empty query after trim, show all
-                            // Search through all fields defined in data.fields
-                            return data.fields.some(function (field) {
-                                try {
-                                    // Get the value using the same getNestedValue function used for display
-                                    var value = getNestedValue(mdoc, field);
-                                    // Convert value to string and search
-                                    if (value !== null && value !== undefined) {
-                                        var stringValue = String(value).toLowerCase();
-                                        return stringValue.includes(query_1);
-                                    }
-                                    return false;
-                                }
-                                catch (error) {
-                                    // Handle any errors in accessing nested values
-                                    console.warn("Error accessing field ".concat(field, ":"), error);
-                                    return false;
-                                }
-                            });
-                        }
-                        else {
-                            return true; // If no search query, return all items
-                        }
-                    }).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
+                    // filteredData.filter((mdoc, index) => {
+                    //   if(searchQuery){
+                    //     // Convert search query to lowercase for case-insensitive search
+                    //     const query = searchQuery.toLowerCase().trim();
+                    //     if (!query) return true; // If empty query after trim, show all
+                    //     // Search through all fields defined in data.fields
+                    //     return data.fields.some(field => {
+                    //       try {
+                    //         // Get the value using the same getNestedValue function used for display
+                    //         const value = getNestedValue(mdoc, field);
+                    //         // Convert value to string and search
+                    //         if (value !== null && value !== undefined) {
+                    //           const stringValue = String(value).toLowerCase();
+                    //           return stringValue.includes(query);
+                    //         }
+                    //         return false;
+                    //       } catch (error) {
+                    //         // Handle any errors in accessing nested values
+                    //         console.warn(`Error accessing field ${field}:`, error);
+                    //         return false;
+                    //       }
+                    //     });
+                    //   } else {
+                    //     return true; // If no search query, return all items
+                    //   }
+                    // })
+                    (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue).slice(startIndex, endIndex).map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
                         data.fields.map(function (fdoc, findex) {
                             var _a;
                             return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));