funda-ui 4.7.101 → 4.7.105

package/lib/esm/Stepper/index.scss

@@ -1,4 +1,5 @@
 
+
 /* ======================================================
    <!-- Stepper -->
 /* ====================================================== */
@@ -8,36 +9,69 @@
     --stepper-color-default: #333;
     --stepper-color-active: white;
     --stepper-color-complete: #2563eb;
-    --stepper-bg-default: white;
-    --stepper-bg-active: #2563eb;
-    --stepper-bg-complete: #22c55e;
+    --stepper-indicator-default: white;
+    --stepper-indicator-active: #2563eb;
+    --stepper-indicator-complete: #22c55e;
     --stepper-border-default: #ccc;
     --stepper-border-active: #2563eb;
     --stepper-border-complete: #22c55e;
+    --stepper-line-default: #dfdfdf;
+    --stepper-line-active: #2563eb;
+    --stepper-line-complete: #22c55e;
     --stepper-indicator-size: 0.875rem;
+    --stepper-indicator-offset: 100px;
     --stepper-title-size: 0.875rem;
-    
+
 
     position: relative;
 
-    /* NAvigation Header (only horizontal) */
+    /* Navigation Header (only horizontal) */
     .stepper-header {
         display: flex;
-        align-items: center;
-        margin-bottom: 1.5rem;
+        align-items: flex-start;
         flex-wrap: nowrap;
+        position: relative;
+
+        /* background line */
+        &::before {
+            content: '';
+            position: absolute;
+            top: 16px;  /* Subtract the height of the title */
+            left: 14px;
+            right: 0;
+            height: 2px;
+            background-color: var(--stepper-line-default);
+            z-index: 1;
+            width: calc(100% - 32px);
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            top: 16px; /* Subtract the height of the title */
+            left: 14px;
+            height: 2px;
+            background-color: var(--stepper-line-complete);
+            z-index: 2;
+            transition: width 0.3s ease-in-out;
+            width: 0;
+        }
+
+        &::after {
+            width: var(--stepper-progress-width, 0%);
+            max-width: calc(100% - 32px);
+        }
     }
 
-    /* Main Navigation */
-    /* Each step item (with circle + title)  */
+    /* Main Navigation - Each step item (with circle + title) */
     .step-item {
         flex: none;
         display: flex;
         flex-direction: column;
         align-items: center;
-        max-width: 100px;
+        max-width: var(--stepper-indicator-offset);
         position: relative;
-        z-index: 1;
+        z-index: 3;
 
         &.step-item--clickable {
             cursor: pointer;
@@ -45,26 +79,49 @@
         
     }
 
+
+    /* Line */
     .step-line {
         flex: 1;
         height: 2px;
-        background-color: #ddd;
+        background-color:  var(--stepper-line-default);
         margin: 0 4px;
         position: relative;
         top: -10px;
         z-index: 0;
+        overflow: hidden;
+        opacity: 0;
+
+        &--active {
+            background-color: var(--stepper-line-default);
+        }
 
         &--complete {
-            background-color: var(--stepper-bg-complete);
+            background-color: var(--stepper-line-default);
         }
+              
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--stepper-line-complete);
+            transform: scaleX(0);
+            transform-origin: left;
+            transition: transform 0.3s ease-in-out;
+        }   
         
-        &--active {
-            background-color: var(--stepper-bg-complete);
+        &--active::after,
+        &--complete::after {
+            transform: scaleX(1);
         }
-            
     }
 
-    /* Step Indicator */
+
+
+    /* Indicator */
     .step-indicator {
         width: 32px;
         height: 32px;
@@ -77,18 +134,18 @@
         font-size: var(--stepper-indicator-size);
 
         /* default */
-        background-color: var(--stepper-bg-default);
+        background-color: var(--stepper-indicator-default);
         color: var(--stepper-color-default);
         border-color: var(--stepper-border-default);
 
         &--active {
-            background-color: var(--stepper-bg-active);
+            background-color: var(--stepper-indicator-active);
             color: var(--stepper-color-active);
             border-color: var(--stepper-border-active);
         } 
 
         &--complete {
-            background-color: var(--stepper-bg-complete);
+            background-color: var(--stepper-indicator-complete);
             color: var(--stepper-color-active);
             border-color: var(--stepper-border-complete);
         }
@@ -143,28 +200,65 @@
 
 /*------ Verticle ------*/
 .stepper-container.stepper-container--vertical {
+
+    --stepper-indicator-offset: 50px;
+
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 1rem; /* line length */
+
+    /* background line */
+    &::before {
+        content: '';
+        position: absolute;
+        top: 20px;
+        left: 24px;
+        width: 2px;
+        height: calc(100% - 32px);
+        background-color: var(--stepper-line-default);
+        z-index: 1;
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        top: 20px;
+        left: 24px;
+        width: 2px;
+        background-color: var(--stepper-line-complete);
+        z-index: 2;
+        transition: height 0.3s ease-in-out;
+        height: 0;
+    }
+
+    &::after {
+        height: var(--stepper-progress-height, 0%);
+        max-height: calc(100% - 32px);
+    }
 
 
+    /* Layout */
     .vertical-step-row {
         display: flex;
         align-items: flex-start;
-        margin-bottom: 1rem;
     }
     .vertical-step-left {
         flex-shrink: 0;
-        width: 50px;
+        width: var(--stepper-indicator-offset);
         position: relative;
         
+        /* Main Navigation - Each step item (with circle + title) */
         .step-item {
             margin-top: 20px;
         }
+
+        /* Line */
         .step-line {
             position: absolute;
             left: 20px;
+            opacity: 0;
         }
+
     }
     
     .vertical-step-right {
@@ -175,26 +269,20 @@
         top: 1.5rem;
     }
 
+    /* Title */
     .step-title {
         display: none;
         margin-left: .3rem;
     }
+    
+    /* Panel */
     .stepper-panel-header {
         display: block;
     }
-    .stepper-header {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        padding-left: 2rem;
-        .step-item {
-            flex-direction: row;
-            max-width: 150px;
-            &:not(:first-child) {
-                margin-top: 8px;
-            }
-        }
-    }
+
+
+
+    /* Line */
     .step-line {
         flex: auto;
         width: 2px;
@@ -202,5 +290,16 @@
         margin-top: 4px;
         top: auto;
         left: -24px;
+
+        &::after {
+            transform-origin: top;
+            transform: scaleY(0);
+        }   
+        
+        &--active::after,
+        &--complete::after {
+            transform: scaleY(1);
+        }
+
     }
 }

package/lib/esm/Stepper/index.tsx

@@ -2,8 +2,9 @@ import React, { useRef, useEffect, forwardRef, useImperativeHandle, useState } f
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
+
 interface StepperPanelProps {
-    header: React.ReactNode;
+    header?: React.ReactNode;
     children?: React.ReactNode;
     style?: React.CSSProperties;
 }
@@ -28,7 +29,7 @@ interface StepperRef {
 
 const StepperPanel: React.FC<StepperPanelProps> = (props) => {
     const {
-        header, 
+        header = <><svg width="1rem" height="1rem"><rect fill="none"/></svg></>, 
         children, 
         style
     } = props;
@@ -55,6 +56,7 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
     } = props;
 
 
+    const rootRef = useRef<HTMLDivElement>(null);
     const [isLastStepComplete, setIsLastStepComplete] = useState<boolean>(false);
     const [activeIndex, setActiveIndex] = useState<number>(initialStep);
     const panels = React.Children.toArray(children) as React.ReactElement<StepperPanelProps>[];
@@ -230,6 +232,39 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
         </>;
     };
 
+    // Calculate the width/height of the progress line
+    const calculateProgressStyle = () => {
+        if (!panels.length || rootRef.current === null) return {};
+        
+        const stepItems = rootRef.current.querySelectorAll('.step-item');
+        if (!stepItems.length) return {};
+
+        if (isVertical) {
+            const totalHeight = stepItems[0].clientHeight * (panels.length - 1);
+            const progress = (activeIndex / (panels.length - 1)) * 100;
+            return {
+                '--stepper-progress-height': `${progress}%`
+            } as React.CSSProperties;
+        } else {
+            const firstItem = stepItems[0] as HTMLDivElement;
+            const lastItem = stepItems[stepItems.length - 1] as HTMLDivElement;
+            if (!firstItem || !lastItem) return {};
+
+            const firstCenter = firstItem.offsetLeft + (firstItem.clientWidth / 2);
+            const lastCenter = lastItem.offsetLeft + (lastItem.clientWidth / 2);
+            const totalWidth = lastCenter - firstCenter;
+
+            const currentItem = stepItems[activeIndex] as HTMLDivElement;
+            if (!currentItem) return {};
+
+            const currentCenter = currentItem.offsetLeft + (currentItem.clientWidth / 2);
+            const progress = ((currentCenter - firstCenter) / totalWidth) * 100;
+
+            return {
+                '--stepper-progress-width': `${progress}%`
+            } as React.CSSProperties;
+        }
+    };
 
     useEffect(() => {
         // Only trigger onChange if values actually changed from previous values
@@ -243,8 +278,18 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
         }
     }, [activeIndex, isLastStepComplete]);
 
+
+    useEffect(() => {
+        // Force a recalculation of the progress line
+        const timer = setTimeout(() => {
+            setActiveIndex(prev => prev);
+        }, 0);
+        return () => clearTimeout(timer);
+    }, []);
+
     return (
         <div 
+            ref={rootRef}
             className={combinedCls(
                 'stepper-container',
                 clsWrite(wrapperClassName, ''),
@@ -252,7 +297,10 @@ const Stepper = forwardRef<StepperRef, StepperProps>((props, ref) => {
                     'stepper-container--vertical': isVertical
                 }
             )} 
-            style={style}
+            style={{
+                ...style,
+                ...calculateProgressStyle()
+            }}
         >
             {!isVertical && horizontalPanelsGenerator()}
             {isVertical && verticalPanelsGenerator()}

package/lib/esm/TagInput/index.tsx

@@ -102,16 +102,23 @@ const TagInput = forwardRef((props: TagInputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return VALUE_BY_BRACKETS ? convertArrToValByBrackets(items.map((item: any) => item.content)) : items.map((item: any) => item.content).join(',');
+            },
             clear: (cb?: any) => {
                 initDefaultValue('');
                 cb?.();
+
+                onChange?.(inputRef.current, items, '');
             },
             set: (value: string, cb?: any) => {
                 initDefaultValue(`${value}`);
                 cb?.();
+
+                onChange?.(inputRef.current, items, `${value}`);
             }
         }),
-        [contentRef],
+        [contentRef, items],
     );
 
 

package/lib/esm/Textarea/index.tsx

@@ -297,13 +297,20 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, valRef.current, '');
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, valRef.current, `${value}`);
             },
             resetHeight: () => {
                 reset();
@@ -314,7 +321,7 @@ const Textarea = forwardRef((props: TextareaProps, externalRef: any) => {
                 }, 0);
             },
         }),
-        [contentRef, reset]
+        [contentRef, reset, changedVal]
     );
 
     const propExist = (p: any) => {

package/lib/esm/Toast/Item.tsx

@@ -1,13 +1,20 @@
 import React, { useRef, forwardRef } from 'react';
 
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
 export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
-    onlyOne?: boolean;
+    depth: number;
     index: number;
+    isNew: boolean;
+    uniqueID: string;
+
+    //
+    onlyOne?: boolean;
     title?: string | React.ReactNode | boolean;
     note?: string | React.ReactNode | boolean;
     theme?: string | undefined;
     message?: string | React.ReactNode;
-    depth: number;
     schemeBody?: string;
     schemeHeader?: string;
     closeBtnColor?: string;
@@ -24,13 +31,17 @@ export interface ItemProps extends React.ComponentPropsWithoutRef<any> {
 const Item = forwardRef((props: ItemProps, externalRef: any) => {
 
     const {
-        onlyOne,
+        depth,
         index,
+        isNew,
+        uniqueID,
+
+        //
+        onlyOne,
         title,
         note,
         theme,
         message,
-        depth,
         lock,
         cascading,
         schemeBody,
@@ -43,16 +54,25 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
         evClose
     } = props;
 
-
+    
     const containerRef = useRef<HTMLDivElement>(null);
+    const hideTitle: boolean = (title === '' || title === false) && (note === '' || note === false);
 
     return (
         <>
 
             <div
                 ref={containerRef}
-                className={`toast-container ${onlyOne ? 'only-one' : ''}`}
+                id={`toast-${uniqueID}`}
+                data-toast-id={uniqueID}
+                data-new={isNew}
                 data-index={index}
+                className={combinedCls(
+                    'toast-container',
+                    {
+                        'only-one': onlyOne
+                    }
+                )} 
                 style={cascading ? {
                     transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
                     zIndex: depth
@@ -64,9 +84,20 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
             >
 
                 {/* Bootstrap toast */}
-                <div className={`toast fade show ${schemeBody ? schemeBody : ''} ${theme ? `bg-${theme}` : ''}`} role="alert">
-                    {(title === '' || title === false) && (note === '' || note === false) ? null : <>
-                        <div className={`toast-header ${schemeHeader ? schemeHeader : ''}`}>
+                <div 
+                    className={combinedCls(
+                        `toast fade show ${theme ? `bg-${theme}` : ''}`,
+                        clsWrite(schemeBody, '')
+                    )} 
+                    role="alert"
+                >
+                    {hideTitle ? null : <>
+                        <div 
+                            className={combinedCls(
+                                'toast-header',
+                                clsWrite(schemeHeader, '')
+                            )}
+                        >
                             <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
                             <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
                             {!lock ? <>{!closeDisabled ? <button 
@@ -88,7 +119,7 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
                     <div className="toast-body">
                         {message}
 
-                        {(title === '' || title === false) && (note === '' || note === false) ? <>
+                        {hideTitle ? <>
                             {!closeDisabled ? <button 
                                 data-close="1" 
                                 data-index={index} 
@@ -105,7 +136,17 @@ const Item = forwardRef((props: ItemProps, externalRef: any) => {
 
 
                         {/* PROGRESS */}
-                        <div ref={externalRef} data-progress-index={index} className={`progress active toast-progress ${autoCloseTime === false ? 'd-none' : ''}`} role="progressbar">
+                        <div 
+                            ref={externalRef} 
+                            data-progress-index={index} 
+                            className={combinedCls(
+                                'progress active toast-progress',
+                                {
+                                    'd-none': autoCloseTime === false
+                                }
+                            )}
+                            role="progressbar"
+                        >
                             <div className="progress-bar"></div>
                         </div>
                         {/* /PROGRESS */}