funda-ui 4.3.555 → 4.4.15

package/lib/esm/MultipleSelect/ItemList.tsx

@@ -8,7 +8,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-import { formatIndentVal, multiSelControlOptionExist } from './multiple-select-utils/func';
+import { formatIndentVal, multiSelControlOptionExist } from './utils/func';
 
 /* Recursively nested components to traverse nodes
 -------------------------------------------------*/

package/lib/esm/MultipleSelect/index.tsx

@@ -22,7 +22,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 
-import { multiSelControlOptionExist, uniqueArr } from './multiple-select-utils/func';
+import { multiSelControlOptionExist, uniqueArr } from './utils/func';
 import ItemList from './ItemList';
 
 

package/lib/esm/NativeSelect/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef, forwardRef } from 'react';
 
-import { optionsFlat, isObject } from './native-select-utils/func';
+import { optionsFlat, isObject } from './utils/func';
 
 
 import useComId from 'funda-utils/dist/cjs/useComId';

package/lib/esm/Select/index.scss

@@ -376,6 +376,7 @@
     --cus-sel-listgroup-popwin-min-width: 200px;
     --cus-sel-listgroup-tool-bg: rgb(248,249,250);
     --cus-sel-listgroup-checkbox: #a5a5a5;
+    --cus-sel-listgroup-checkbox-active: #3162B2;
     --cus-sel-listgroup-item-hover-focus-bg: rgba(0,0,0,.1);
     --cus-sel-listgroup-content-scrollbar-color: rgba(0, 0, 0, 0.2);
     --cus-sel-listgroup-content-scrollbar-track: rgba(0, 0, 0, 0);
@@ -384,6 +385,8 @@
     --cus-sel-listgroup-groupborder-color: #d8d8d8;
 
 
+
+
     display: none;
     min-width: var(--cus-sel-listgroup-popwin-min-width);
     z-index: 1055;  /* --bs-modal-zindex */
@@ -463,10 +466,31 @@
 
         }
 
+        
 
+        /* ITEM SELECTED */
         &.item-selected {
+
+            .custom-select-multi__control-option-checkbox-placeholder {
+                svg {
+                    path {
+                        stroke: var(--cus-sel-listgroup-checkbox-active);
+                    }
+                }
+
+            }
+
+            
+            .custom-select-multi__control-option-checkbox-selected {
+                svg {
+                    fill: var(--cus-sel-listgroup-checkbox-active);
             
-         
+                    path {
+                        stroke: var(--cus-sel-listgroup-checkbox-active);
+                    }
+                }
+
+            }
 
         }
 
@@ -475,8 +499,19 @@
             background-color: var(--cus-sel-listgroup-item-hover-focus-bg);
         }
 
+
     }
 
+    /*------ Multiple selection ------*/
+    &.multiple-selection {
+        .list-group-item {
+            &.active {
+                border-top-width: 0;
+            }
+        }
+    }
+
+    
 
     /*------ Group ------*/
     .custom-select-grouptitle {

package/lib/esm/Select/index.tsx

@@ -7,7 +7,7 @@ import {
     removeItemOnce,
     optionsCustomSelectFlat,
     isObject
-} from './select-utils/func';
+} from './utils/func';
 
 
 import RootPortal from 'funda-root-portal';
@@ -154,6 +154,7 @@ export type SelectProps = {
     onChange?: SelectOptionChangeFnType | null;
     onBlur?: (e: any) => void;
     onFocus?: (e: any) => void;
+    onKeyPressed?: (arg1: any, arg2: any, arg3: any) => void;
 };
 
 
@@ -209,13 +210,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         onChange,
         onBlur,
         onFocus,
+        onKeyPressed,
         ...attributes
     } = props;
 
 
     const DEPTH = depth || 1055;  // the default value same as bootstrap
-    const LIVE_SEARCH_OK = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;
-    const LIVE_SEARCH_DISABLED = (typeof fetchTrigger === 'undefined' || fetchTrigger === false) && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
+    const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
+    const LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
 
     
     const FIRST_REQUEST_AUTO = typeof firstRequestAutoExec === 'undefined' ? true : firstRequestAutoExec;
@@ -414,7 +416,6 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     //performance
     const handleChangeFetchSafe = useDebounce((val: any) => {
 
-
         let _orginalData: OptionConfig[] = [];
         const update = (inputData: any) => {
             const filterRes = () => {
@@ -533,7 +534,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             let filterRes: any = [];
 
 
-            if (fetchTrigger) {
+            if (MANUAL_REQ) {
 
                 // If a manual action is used to trigger the request
                 if (typeof fetchTriggerForDefaultData !== 'undefined' && fetchTriggerForDefaultData !== null && typeof fetchTriggerForDefaultData?.values[0] !== 'undefined') {
@@ -1131,7 +1132,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         if (!MULTI_SEL_VALID) popwinPosHide();
 
 
-        if (LIVE_SEARCH_OK) {
+        if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);
         } else {
@@ -1173,6 +1174,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         setIsOpen(true);
 
 
+
         // pop win initalization
         setTimeout(() => {
             popwinPosInit();
@@ -1189,7 +1191,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
 
-        if (LIVE_SEARCH_OK) {
+        if (MANUAL_REQ) {
             // clean data
             setOptionsData([]);
         } else {
@@ -1198,6 +1200,11 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         }
 
 
+        // When you select multiple times, it automatically focuses on the search input box
+        if (MULTI_SEL_VALID) {
+            selectInputRef.current.select();
+        }
+
         // update temporary value
         setControlTempValue('');
 
@@ -1211,6 +1218,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
     }
+    
+
+    function fixFocusStatus() {
+        // When selecting multiple times, in order to avoid losing 
+        if (MULTI_SEL_VALID) handleFocus(selectInputRef.current);
+    }
 
     async function handleSelect(el: any, dataInput: any = false, valueArr: any[] = [], labelArr: any[] = []) {
 
@@ -1546,7 +1559,8 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             }
         }
 
-            
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
 
     }
 
@@ -1656,6 +1670,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
             multipleSelectionCallback(_values, _labels)
         );
 
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+
 
     }
 
@@ -1757,7 +1774,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     async function handleFirstFetch(inputVal: any = null) {
         const _oparams: any[] = fetchFuncMethodParams || [];
-        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (fetchTrigger ? '------' : ''));
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? '------' : ''));
         const res = await fetchData((_params).join(','), finalRes(inputVal), inputVal);
 
         return res;
@@ -1787,6 +1804,9 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         //
         handleChangeFetchSafe(val);
 
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+        
 
     }
 
@@ -1798,8 +1818,10 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
         // update temporary value
         setControlTempValue('');
 
+
         //
-        onFocus?.(event);
+        onFocus?.(selectInputRef.current);
+        
     }
 
     function handleBlur(event: any) {
@@ -1820,7 +1842,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
         setTimeout(() => {
-            onBlur?.(event);
+            onBlur?.(selectInputRef.current);
         }, 300);
     }
 
@@ -1883,6 +1905,14 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     async function handleKeyPressed(event: KeyboardEvent<HTMLDivElement>) {
         const key = event.code;
 
+        //
+        onKeyPressed?.(
+            event,
+            selectInputRef.current,
+            valueInputRef.current
+        );
+
+
         if (!isOpen) return;
 
         let res: any = null;
@@ -1957,6 +1987,18 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
     }
 
+    function handleDocOut(e: any) {
+
+        if (e.target.closest('.custom-select__options-wrapper') === null && e.target.closest('.custom-select__wrapper') === null) {
+            // cancel
+            cancel();
+            if (MULTI_SEL_VALID) popwinPosHide();
+
+            // DO NOT USE "handleBlur(null)"
+        }
+    }
+
+
     useEffect(() => {
 
 
@@ -2007,6 +2049,20 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
     }, []);
 
 
+
+    // Fixed an out-of-focus issue
+    //--------------
+    // !!! TIPS:
+    // Fixed: When `fixFocusStatus()` is triggered, the above judgment will be invalidated, and this judgment will be used
+    // Fixed: The pop-up window is not closed due to the mixing of business components
+    useEffect(() => {
+        document.addEventListener('pointerdown', handleDocOut);
+        return () => {
+            document.removeEventListener('pointerdown', handleDocOut);
+        };
+    }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
+
+
     return (
         <>
 
@@ -2161,7 +2217,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         {
                             'reverse': isOpen
                         }
-                    )} style={{display: fetchTrigger ? 'none' : 'inline-block' }}>
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
                         {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
                             <g stroke="none" strokeWidth="1" fill="none">
                                 <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
@@ -2180,7 +2236,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                     {/* SEARCH BUTTON */}
-                    {fetchTrigger ? <>
+                    {MANUAL_REQ ? <>
                         <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {
@@ -2223,25 +2279,113 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                                 {typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? <>
 
                                     <li className="custom-select-multi__list-item-statusstring" >
-                             
-                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && controlArr.labels.length > 0 && controlArr.labels.length < optionsData.length ? multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && controlArr.labels.length === 0 ? multiSelectSelectedItemOnlyStatus.noneLabel : null}
+                
+                                        
+                                        {MANUAL_REQ ? <>
+                                            {/* ===================== Manual requests ===================== */}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
 
-                                        {/* all */}
-                                        {controlArr.labels.length > 0 ? <>
-                                            {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && controlArr.labels.length === optionsData.length ? multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        </>: null}
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
 
+                                            {/* ===================== /Manual requests ===================== */}
 
-                                        {/*-----*/}
-                                        {typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && controlArr.labels.length > 0 ? MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        {typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && controlArr.labels.length === 0 ? MULTI_SEL_SELECTED_STATUS.noneLabel : null}
+                                        </> : <>
+                                            {/* ===================== Auto requests ===================== */}
 
-                                        {/* all */}
-                                        {controlArr.labels.length > 0 ? <>
-                                            {typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && controlArr.labels.length === optionsData.length ? MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) : null}
-                                        </>: null}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0 && 
+                                                controlArr.labels.length < optionsData.length 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
+
+
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
+                                            {/* ===================== /Auto requests ===================== */}
 
+                                        </>}
 
                                     </li>
                                 </> : <>
@@ -2340,7 +2484,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         {
                             'reverse': isOpen
                         }
-                    )} style={{display: fetchTrigger ? 'none' : 'inline-block' }}>
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
                         {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
                             <g stroke="none" strokeWidth="1" fill="none">
                                 <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
@@ -2357,7 +2501,7 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
                     {/* SEARCH BUTTON */}
-                    {fetchTrigger ? <>
+                    {MANUAL_REQ ? <>
                         <span className="custom-select-multi__control-searchbtn">
                             <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
                                 handleFetch().then((response: any) => {
@@ -2390,7 +2534,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                         <div
                             ref={listRef}
                             id={`custom-select__options-wrapper-${idRes}`}
-                            className="custom-select__options-wrapper list-group position-absolute border shadow small"
+                            className={combinedCls(
+                                'custom-select__options-wrapper list-group position-absolute border shadow small',
+                                {
+                                    'multiple-selection': MULTI_SEL_VALID
+                                }
+                            )}
                             style={{ zIndex: DEPTH, width: WIN_WIDTH, display: 'none' }}
                             role="tablist"
                         >

package/lib/esm/Table/Table.tsx

@@ -7,8 +7,8 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 import { TableProvider } from './TableContext';
-import useTableResponsive from './table-utils/hooks/useTableResponsive';
-import useTableDraggable from './table-utils/hooks/useTableDraggable';
+import useTableResponsive from './utils/hooks/useTableResponsive';
+import useTableDraggable from './utils/hooks/useTableDraggable';
 
 
 export interface TableProps extends React.HTMLAttributes<HTMLDivElement> {

package/lib/esm/Table/TableCell.tsx

@@ -6,8 +6,8 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 import { TableContext } from './TableContext';
 
-import { cellMark, removeCellFocusClassName } from './table-utils/func';
-import useTableKeyPress from './table-utils/hooks/useTableKeyPress';
+import { cellMark, removeCellFocusClassName } from './utils/func';
+import useTableKeyPress from './utils/hooks/useTableKeyPress';
 
 export interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
     active?: boolean;

package/lib/esm/Table/TableRow.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, forwardRef } from 'react';
 
 import { TableContext } from './TableContext';
-import { convertMapToArr } from './table-utils/func';
+import { convertMapToArr } from './utils/func';
 
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     active?: boolean;

package/lib/esm/Table/index.tsx

@@ -8,7 +8,7 @@ export { default as TableColgroup } from './TableColgroup';
 export { default as TableCaption } from './TableCaption';
 
 // utils
-export { default as TableFilter } from './table-utils/TableFilter';
-export { default as ToggleSelection } from './table-utils/ToggleSelection';
-export { default as DragHandleSprite } from './table-utils/DragHandleSprite';
-export { default as SortSprite } from './table-utils/SortSprite';
+export { default as TableFilter } from './utils/TableFilter';
+export { default as ToggleSelection } from './utils/ToggleSelection';
+export { default as DragHandleSprite } from './utils/DragHandleSprite';
+export { default as SortSprite } from './utils/SortSprite';

package/lib/esm/Tree/TreeList.tsx

@@ -11,7 +11,7 @@ import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
 import { initUlHeight } from './init-height';
-import { removeItemOnce, activeClass } from './tree-utils';
+import { removeItemOnce, activeClass } from './utils/func';
 
 export interface FetchConfig {
     fetchFuncAsync?: any | undefined;

package/lib/esm/Utils/libs/date.ts

@@ -101,6 +101,33 @@ function dateFormat(v: Date | string): Date | String {
 }
 
 
+/**
+ * Get date details
+ * @param {Date | String} v 
+ * @param {Boolean} padZeroEnabled 
+ * @typedef {Object} JSON
+ */
+function getDateDetails(v: Date | string, padZeroEnabled: boolean = true): Record<string, string | number> {
+
+    const date: any = dateFormat(v);
+    const year = date.getFullYear();
+    const month = padZero(date.getMonth() + 1, padZeroEnabled);
+    const day = padZero(date.getDate(), padZeroEnabled);
+    const hours = padZero(date.getHours(), padZeroEnabled);
+    const minutes = padZero(date.getMinutes(), padZeroEnabled);
+    const seconds = padZero(date.getSeconds(), padZeroEnabled);
+
+    return {
+        year: String(year),
+        month,
+        day,
+        hours,
+        minutes,
+        seconds
+    };
+}
+
+
 /**
  * Get calendar date
  * @param {Date | String} v 
@@ -433,11 +460,79 @@ function timestampToDate(v: number, padZeroEnabled: boolean = true): string {
 }
 
 
+/**
+ * Get the date of the specified month
+ * @param {Number} year 
+ * @param {Number} month 
+ * @returns {Array<string>} 
+ */
+function getMonthDates(year: number, month: number) {
+    const dates: string[] = [];
+
+    // Get the total number of days in the month
+    const daysInMonth = new Date(year, month, 0).getDate();
+
+   
+    for (let day = 1; day <= daysInMonth; day++) {
+        dates.push(`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`); // 'YYYY-MM-DD'
+    }
+
+    return dates;
+}
+
+/**
+ * Get the date of the specified week (From Sunday)
+ * @param {Number} weekOffset 
+ * @returns {Array<Date>} 
+ */
+function getWeekDatesFromSun(weekOffset: number) {
+    const dates: Array<Date> = [];
+    const currentDate = new Date();
+
+    // Calculate the date of Sunday
+    const dayOfWeek = currentDate.getDay(); // 0 is Sunday
+    currentDate.setDate(currentDate.getDate() - dayOfWeek + weekOffset * 7);
+
+    // Get the date of the week
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(currentDate);
+        date.setDate(currentDate.getDate() + i);
+        dates.push(date);
+    }
+
+    return dates;
+}
+
+/**
+ * Get the date of the specified week (From Monday)
+ * @param {Number} weekOffset 
+ * @returns {Array<Date>} 
+ */
+function getWeekDatesFromMon(weekOffset: number) {
+    const dates: Array<Date> = [];
+    const currentDate = new Date();
+
+    // Set the date to Monday
+    const dayOfWeek = currentDate.getDay();
+    const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek;
+    currentDate.setDate(currentDate.getDate() + diffToMonday + weekOffset * 7);
+
+    // Get the date of the week
+    for (let i = 0; i < 7; i++) {
+        const date = new Date(currentDate);
+        date.setDate(currentDate.getDate() + i);
+        dates.push(date);
+    }
+
+    return dates;
+}
+
 export {
     isTimeString,
     getNow,
     padZero,
     dateFormat,
+    getDateDetails,
 
     //
     isValidDate,
@@ -474,5 +569,10 @@ export {
     setDateHours,
     setDateMinutes,
     setDateDays,
-    timestampToDate
+    timestampToDate,
+
+    // get dates list
+    getMonthDates,
+    getWeekDatesFromSun,
+    getWeekDatesFromMon
 }