funda-ui 4.7.345 → 4.7.512

package/CascadingSelect/index.css

@@ -174,7 +174,8 @@
 }
 .casc-select__items-wrapper .casc-select__items-col-searchbox input {
   border: 1px solid var(--casc-select-searchbox-border-color);
-  border-radius: 0.35rem;
+  border-radius: 0.15rem;
+  width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }

package/CascadingSelectE2E/index.css

@@ -174,7 +174,8 @@
 }
 .casc-select-e2e__items-wrapper .casc-select-e2e__items-col-searchbox input {
   border: 1px solid var(--casc-select-e2e-searchbox-border-color);
-  border-radius: 0.35rem;
+  border-radius: 0.15rem;
+  width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }

package/Table/index.js

@@ -2069,7 +2069,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -2087,8 +2108,11 @@ function useTableSort(_ref, deps) {
     data = _ref.data,
     spyElement = _ref.spyElement,
     fieldType = _ref.fieldType,
+    _ref$isReverse = _ref.isReverse,
+    isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,
     onColSort = _ref.onColSort,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    sortBy = _ref.sortBy;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = useTableSort_slicedToArray(_useState, 2),
     inverse = _useState2[0],
@@ -2102,16 +2126,22 @@ function useTableSort(_ref, deps) {
     var filterType = fieldType || 'text';
     var curIndex = el.dataset.tableCol;
     var targetComparator = [].slice.call(tbodyRef.querySelectorAll("[data-table-col=\"".concat(curIndex, "\"]")));
+    var handleProcess = function handleProcess() {
+      allRows(spyElement).forEach(function (node) {
+        node.classList.add('newsort');
+      });
+      setInverse(!inverse);
+    };
 
-    //sort of HTML elements
-    var sortBy = function sortBy(a, b) {
+    // 
+    var defaultSortBy = function defaultSortBy(a, b) {
       var txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
         txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
       //type of number
       if (filterType == 'number') {
-        txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-        txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+        txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+        txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
       }
 
       //type of date
@@ -2121,13 +2151,23 @@ function useTableSort(_ref, deps) {
       }
 
       //add filter class
-      allRows(spyElement).forEach(function (node) {
-        node.classList.add('newsort');
-      });
-      setInverse(!inverse);
-      return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+      handleProcess();
+
+      // result
+      if (filterType == 'text') {
+        return isReverse ? txt1.localeCompare(txt2, 'zh-CN', {
+          sensitivity: 'base'
+        }) : txt2.localeCompare(txt1, 'zh-CN', {
+          sensitivity: 'base'
+        });
+      } else {
+        return isReverse ? txt1 < txt2 ? -1 : txt1 > txt2 ? 1 : 0 : txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+      }
     };
-    targetComparator.sort(sortBy);
+
+    // Use a custom sort method if available, otherwise default is used
+    var sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+    targetComparator.sort(sortFn);
 
     //console.log( 'targetComparator:', targetComparator );
     //console.log( 'inverse:', inverse );
@@ -2177,7 +2217,10 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
   var fieldType = props.fieldType,
     className = props.className,
     icon = props.icon,
-    onClick = props.onClick;
+    _props$isReverse = props.isReverse,
+    isReverse = _props$isReverse === void 0 ? false : _props$isReverse,
+    onClick = props.onClick,
+    sortBy = props.sortBy;
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     rootRef = _useContext.rootRef,
@@ -2191,7 +2234,9 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       spyElement: rootRef.current,
       fieldType: fieldType,
       onColSort: onColSort,
-      onClick: onClick
+      isReverse: isReverse,
+      onClick: onClick,
+      sortBy: sortBy
     }, [rootRef]),
     handleSortList = _useTableSort.handleSortList;
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, colSortable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {

package/lib/cjs/Table/index.js

@@ -2069,7 +2069,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -2087,8 +2108,11 @@ function useTableSort(_ref, deps) {
     data = _ref.data,
     spyElement = _ref.spyElement,
     fieldType = _ref.fieldType,
+    _ref$isReverse = _ref.isReverse,
+    isReverse = _ref$isReverse === void 0 ? false : _ref$isReverse,
     onColSort = _ref.onColSort,
-    onClick = _ref.onClick;
+    onClick = _ref.onClick,
+    sortBy = _ref.sortBy;
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
     _useState2 = useTableSort_slicedToArray(_useState, 2),
     inverse = _useState2[0],
@@ -2102,16 +2126,22 @@ function useTableSort(_ref, deps) {
     var filterType = fieldType || 'text';
     var curIndex = el.dataset.tableCol;
     var targetComparator = [].slice.call(tbodyRef.querySelectorAll("[data-table-col=\"".concat(curIndex, "\"]")));
+    var handleProcess = function handleProcess() {
+      allRows(spyElement).forEach(function (node) {
+        node.classList.add('newsort');
+      });
+      setInverse(!inverse);
+    };
 
-    //sort of HTML elements
-    var sortBy = function sortBy(a, b) {
+    // 
+    var defaultSortBy = function defaultSortBy(a, b) {
       var txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
         txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
       //type of number
       if (filterType == 'number') {
-        txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-        txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+        txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+        txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
       }
 
       //type of date
@@ -2121,13 +2151,23 @@ function useTableSort(_ref, deps) {
       }
 
       //add filter class
-      allRows(spyElement).forEach(function (node) {
-        node.classList.add('newsort');
-      });
-      setInverse(!inverse);
-      return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+      handleProcess();
+
+      // result
+      if (filterType == 'text') {
+        return isReverse ? txt1.localeCompare(txt2, 'zh-CN', {
+          sensitivity: 'base'
+        }) : txt2.localeCompare(txt1, 'zh-CN', {
+          sensitivity: 'base'
+        });
+      } else {
+        return isReverse ? txt1 < txt2 ? -1 : txt1 > txt2 ? 1 : 0 : txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+      }
     };
-    targetComparator.sort(sortBy);
+
+    // Use a custom sort method if available, otherwise default is used
+    var sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+    targetComparator.sort(sortFn);
 
     //console.log( 'targetComparator:', targetComparator );
     //console.log( 'inverse:', inverse );
@@ -2177,7 +2217,10 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
   var fieldType = props.fieldType,
     className = props.className,
     icon = props.icon,
-    onClick = props.onClick;
+    _props$isReverse = props.isReverse,
+    isReverse = _props$isReverse === void 0 ? false : _props$isReverse,
+    onClick = props.onClick,
+    sortBy = props.sortBy;
   var _useContext = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useContext)(TableContext),
     originData = _useContext.originData,
     rootRef = _useContext.rootRef,
@@ -2191,7 +2234,9 @@ var SortSprite = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_re
       spyElement: rootRef.current,
       fieldType: fieldType,
       onColSort: onColSort,
-      onClick: onClick
+      isReverse: isReverse,
+      onClick: onClick,
+      sortBy: sortBy
     }, [rootRef]),
     handleSortList = _useTableSort.handleSortList;
   return /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((external_root_React_commonjs2_react_commonjs_react_amd_react_default()).Fragment, null, colSortable ? /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("span", {

package/lib/css/CascadingSelect/index.css

@@ -174,7 +174,8 @@
 }
 .casc-select__items-wrapper .casc-select__items-col-searchbox input {
   border: 1px solid var(--casc-select-searchbox-border-color);
-  border-radius: 0.35rem;
+  border-radius: 0.15rem;
+  width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }

package/lib/css/CascadingSelectE2E/index.css

@@ -174,7 +174,8 @@
 }
 .casc-select-e2e__items-wrapper .casc-select-e2e__items-col-searchbox input {
   border: 1px solid var(--casc-select-e2e-searchbox-border-color);
-  border-radius: 0.35rem;
+  border-radius: 0.15rem;
+  width: 100%;
   background: transparent;
   font-size: 0.75rem;
 }

package/lib/esm/CascadingSelect/index.scss

@@ -236,7 +236,8 @@
     .casc-select__items-col-searchbox {
         input {
             border: 1px solid var(--casc-select-searchbox-border-color);
-            border-radius: 0.35rem;
+            border-radius: 0.15rem;
+            width: 100%;
             background: transparent;
             font-size: 0.75rem;
         }

package/lib/esm/CascadingSelectE2E/index.scss

@@ -239,7 +239,8 @@
     .casc-select-e2e__items-col-searchbox {
         input {
             border: 1px solid var(--casc-select-e2e-searchbox-border-color);
-            border-radius: 0.35rem;
+            border-radius: 0.15rem;
+            width: 100%;
             background: transparent;
             font-size: 0.75rem;
         }

package/lib/esm/Table/Table.tsx

@@ -5,6 +5,7 @@ import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import { TableProvider } from './TableContext';
 import useTableResponsive from './utils/hooks/useTableResponsive';
 import useTableDraggable from './utils/hooks/useTableDraggable';

package/lib/esm/Table/TableCell.tsx

@@ -2,8 +2,6 @@ import React, { forwardRef, useContext } from 'react';
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
-
 import { TableContext } from './TableContext';
 
 import { cellMark, removeCellFocusClassName } from './utils/func';

package/lib/esm/Table/utils/SortSprite.tsx

@@ -7,7 +7,9 @@ export type SortSpriteProps = {
     fieldType: 'text' | 'number' | 'date';
     className?: string;
     icon?: React.ReactNode;
+    isReverse?: boolean;
     onClick?: (e: any) => void;
+    sortBy?: (handleProcess: Function, filterType: string, inverse: boolean) => ((a: Element, b: Element) => number); // A function that determines the order of the elements. 
 };
 
 
@@ -16,7 +18,9 @@ const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
         fieldType,
         className,
         icon,
-        onClick
+        isReverse = false,
+        onClick,
+        sortBy
     } = props;
 
     const {
@@ -34,7 +38,9 @@ const SortSprite = forwardRef((props: SortSpriteProps, externalRef: any) => {
         spyElement: rootRef.current,
         fieldType: fieldType,
         onColSort: onColSort,
-        onClick: onClick
+        isReverse: isReverse,
+        onClick: onClick,
+        sortBy: sortBy
     }, [rootRef]);
 
 

package/lib/esm/Table/utils/hooks/useTableSort.tsx

@@ -10,7 +10,28 @@ const App = () => {
 
     useTableSort({
         enabled: sortableTable && rootRef.current,
-        spyElement: rootRef.current
+        spyElement: rootRef.current,
+        sortBy: (handleProcess: Function, filterType: string, inverse: boolean) => (a: Element, b: Element) => {
+        
+            // Custom comparison logic
+            let v1 = a.textContent, v2 = b.textContent;
+            if (filterType === 'number') {
+                v1 = parseFloat(v1);
+                v2 = parseFloat(v2);
+            }
+        
+            let result = 0;
+            if (filterType === 'text') {
+                result = v1.localeCompare(v2);
+            } else {
+                result = v1 - v2;
+            }
+        
+            // Apply display animation and status updates
+            handleProcess();
+        
+            return inverse ? -result : result;
+        }
     }, [rootRef]);
 
     return (
@@ -25,13 +46,16 @@ import { useEffect, useState } from 'react';
 
 import { getTbody, allRows, sortDataByIndex, initOrderProps, initRowColProps } from '../func';
 
+
 export interface UseTableSortProps {
     enabled: boolean;
     data?: any[];
     spyElement?: any;
     fieldType: 'text' | 'number' | 'date';
+    isReverse?: boolean;
     onColSort?: (fetchData: any) => void;
     onClick?: (e: any) => void;
+    sortBy?: (handleProcess: Function, filterType: string, inverse: boolean) => ((a: Element, b: Element) => number); // A function that determines the order of the elements. 
 }
 
 function useTableSort({
@@ -39,8 +63,10 @@ function useTableSort({
     data,
     spyElement,
     fieldType,
+    isReverse = false,
     onColSort,
-    onClick
+    onClick,
+    sortBy
 }: UseTableSortProps, deps: any[]) {
 
    
@@ -60,17 +86,24 @@ function useTableSort({
         const curIndex = el.dataset.tableCol;
         const targetComparator = [].slice.call(tbodyRef.querySelectorAll(`[data-table-col="${curIndex}"]`));
 
+        const handleProcess = function () {
+            allRows(spyElement).forEach((node: any) => {
+                node.classList.add('newsort');
+            });
+
+            setInverse(!inverse);
+        };
 
-        //sort of HTML elements
-        const sortBy = function (a: any, b: any) {
+        // 
+        const defaultSortBy = function (a: Element, b: Element) {
 
-            let txt1 = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
-                txt2 = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
+            let txt1: any = a.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase(),
+                txt2: any = b.innerHTML.replace(/(<([^>]+)>)/ig, '').toLowerCase();
 
             //type of number
             if (filterType == 'number') {
-                txt1 = Number(txt1.replace(/[^0-9.-]+/g, ''));
-                txt2 = Number(txt2.replace(/[^0-9.-]+/g, ''));
+                txt1 = parseFloat(txt1.replace(/[^0-9.+-]+/g, ''));
+                txt2 = parseFloat(txt2.replace(/[^0-9.+-]+/g, ''));
             }
 
             //type of date
@@ -79,17 +112,28 @@ function useTableSort({
                 txt2 = new Date(txt2);
             }
 
-            //add filter class
-            allRows(spyElement).forEach((node: any) => {
-                node.classList.add('newsort');
-            });
 
-            setInverse(!inverse);
-
-            return txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0;
+            //add filter class
+            handleProcess();
+
+            
+            // result
+            if (filterType == 'text') {
+                return isReverse
+                    ? txt1.localeCompare(txt2, 'zh-CN', { sensitivity: 'base' })
+                    : txt2.localeCompare(txt1, 'zh-CN', { sensitivity: 'base' });
+            } else {
+                return isReverse
+                    ? (txt1 < txt2 ? -1 : txt1 > txt2 ? 1 : 0)
+                    : (txt2 < txt1 ? -1 : txt2 > txt1 ? 1 : 0);
+            }
+            
         }
 
-        targetComparator.sort(sortBy);
+        // Use a custom sort method if available, otherwise default is used
+        const sortFn = typeof sortBy === 'function' ? sortBy(handleProcess, filterType, inverse) : defaultSortBy;
+
+        targetComparator.sort(sortFn);
 
         //console.log( 'targetComparator:', targetComparator );
         //console.log( 'inverse:', inverse );

package/package.json

@@ -2,7 +2,7 @@
   "author": "UIUX Lab",
   "email": "uiuxlab@gmail.com",
   "name": "funda-ui",
-  "version": "4.7.345",
+  "version": "4.7.512",
   "description": "React components using pure Bootstrap 5+ which does not contain any external style and script libraries.",
   "repository": {
     "type": "git",