funda-ui 4.7.101 → 4.7.105

package/lib/css/Stepper/index.css

@@ -5,19 +5,23 @@
   --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) */
-  /* Main Navigation */
-  /* Each step item (with circle + title)  */
-  /* Step Indicator */
+  /* Navigation Header (only horizontal) */
+  /* Main Navigation - Each step item (with circle + title) */
+  /* Line */
+  /* Indicator */
   /* Title */
   /* Panels Area */
   /* Buttons */
@@ -25,18 +29,45 @@
 }
 .stepper-container .stepper-header {
   display: flex;
-  align-items: center;
-  margin-bottom: 1.5rem;
+  align-items: flex-start;
   flex-wrap: nowrap;
+  position: relative;
+  /* background line */
+}
+.stepper-container .stepper-header::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);
+}
+.stepper-container .stepper-header::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;
+}
+.stepper-container .stepper-header::after {
+  width: var(--stepper-progress-width, 0%);
+  max-width: calc(100% - 32px);
 }
 .stepper-container .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;
 }
 .stepper-container .step-item.step-item--clickable {
   cursor: pointer;
@@ -44,17 +75,34 @@
 .stepper-container .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;
+}
+.stepper-container .step-line--active {
+  background-color: var(--stepper-line-default);
 }
 .stepper-container .step-line--complete {
-  background-color: var(--stepper-bg-complete);
+  background-color: var(--stepper-line-default);
 }
-.stepper-container .step-line--active {
-  background-color: var(--stepper-bg-complete);
+.stepper-container .step-line::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;
+}
+.stepper-container .step-line--active::after, .stepper-container .step-line--complete::after {
+  transform: scaleX(1);
 }
 .stepper-container .step-indicator {
   width: 32px;
@@ -67,17 +115,17 @@
   border: 2px solid #ccc;
   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);
 }
 .stepper-container .step-indicator--active {
-  background-color: var(--stepper-bg-active);
+  background-color: var(--stepper-indicator-active);
   color: var(--stepper-color-active);
   border-color: var(--stepper-border-active);
 }
 .stepper-container .step-indicator--complete {
-  background-color: var(--stepper-bg-complete);
+  background-color: var(--stepper-indicator-complete);
   color: var(--stepper-color-active);
   border-color: var(--stepper-border-complete);
 }
@@ -109,19 +157,51 @@
 
 /*------ Verticle ------*/
 .stepper-container.stepper-container--vertical {
+  --stepper-indicator-offset: 50px;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 1rem; /* line length */
+  /* background line */
+  /* Layout */
+  /* Title */
+  /* Panel */
+  /* Line */
+}
+.stepper-container.stepper-container--vertical::before {
+  content: "";
+  position: absolute;
+  top: 20px;
+  left: 24px;
+  width: 2px;
+  height: calc(100% - 32px);
+  background-color: var(--stepper-line-default);
+  z-index: 1;
+}
+.stepper-container.stepper-container--vertical::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;
+}
+.stepper-container.stepper-container--vertical::after {
+  height: var(--stepper-progress-height, 0%);
+  max-height: calc(100% - 32px);
 }
 .stepper-container.stepper-container--vertical .vertical-step-row {
   display: flex;
   align-items: flex-start;
-  margin-bottom: 1rem;
 }
 .stepper-container.stepper-container--vertical .vertical-step-left {
   flex-shrink: 0;
-  width: 50px;
+  width: var(--stepper-indicator-offset);
   position: relative;
+  /* Main Navigation - Each step item (with circle + title) */
+  /* Line */
 }
 .stepper-container.stepper-container--vertical .vertical-step-left .step-item {
   margin-top: 20px;
@@ -129,6 +209,7 @@
 .stepper-container.stepper-container--vertical .vertical-step-left .step-line {
   position: absolute;
   left: 20px;
+  opacity: 0;
 }
 .stepper-container.stepper-container--vertical .vertical-step-right {
   flex: 1;
@@ -144,19 +225,6 @@
 .stepper-container.stepper-container--vertical .stepper-panel-header {
   display: block;
 }
-.stepper-container.stepper-container--vertical .stepper-header {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  padding-left: 2rem;
-}
-.stepper-container.stepper-container--vertical .stepper-header .step-item {
-  flex-direction: row;
-  max-width: 150px;
-}
-.stepper-container.stepper-container--vertical .stepper-header .step-item:not(:first-child) {
-  margin-top: 8px;
-}
 .stepper-container.stepper-container--vertical .step-line {
   flex: auto;
   width: 2px;
@@ -165,3 +233,10 @@
   top: auto;
   left: -24px;
 }
+.stepper-container.stepper-container--vertical .step-line::after {
+  transform-origin: top;
+  transform: scaleY(0);
+}
+.stepper-container.stepper-container--vertical .step-line--active::after, .stepper-container.stepper-container--vertical .step-line--complete::after {
+  transform: scaleY(1);
+}

package/lib/css/Toast/index.css

@@ -9,8 +9,8 @@
   --toasts-offset-bothsides: 15px;
   --toasts-container-gap: 0.5rem;
   --toasts-container-width: 350px;
-  --toasts-progress-height: 5px;
-  --toasts-progress-bg: rgba(255,255,255,.6);
+  --toasts-progress-height: 3px;
+  --toasts-progress-bg: rgba(228, 228, 228, 0.6);
   width: var(--toasts-container-width);
   position: fixed;
   left: 50%;
@@ -72,34 +72,28 @@
 }
 .toasts__wrapper .toast-container {
   margin-bottom: var(--toasts-container-gap);
+  /* Use clip-path instead of opacity to achieve a fade effect, avoiding the problem of transparency overlay */
+  clip-path: inset(0 0 0 0);
+  transform: translateY(0);
+  /* Rendering of 3D transformations */
+  backface-visibility: hidden;
+  transform-style: preserve-3d;
+  /* init animation */
+  /* enter animation */
+  /* exit animation */
+}
+.toasts__wrapper .toast-container.animate-ready {
+  pointer-events: none;
+  clip-path: inset(0 0 100% 0);
+  transform: translateY(10px);
 }
-.toasts__wrapper .toast-container.auto-anim-switch--initfirst {
-  transform: translateY(-20px);
-  opacity: 0;
+.toasts__wrapper .toast-container.animate-in {
+  clip-path: inset(0 0 0 0);
+  transform: translateY(0);
 }
-.toasts__wrapper .toast-container.auto-anim-switch--first {
-  animation-name: toast-anim-show-first;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-}
-.toasts__wrapper .toast-container.auto-anim-switch:not(.only-one) {
-  animation-name: toast-anim-hide;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
-}
-.toasts__wrapper .toast-container.only-one.auto-anim-switch {
-  animation-name: toast-anim-hide--onlyone;
-  animation-duration: 0.3s;
-  animation-timing-function: linear;
-  animation-delay: 0;
-  animation-iteration-count: 1;
-  animation-fill-mode: forwards;
+.toasts__wrapper .toast-container.hide-start {
+  clip-path: inset(0 0 100% 0);
+  transform: translateY(-10px);
 }
 .toasts__wrapper.toasts__wrapper--cascading .toast-container {
   margin-bottom: 0;
@@ -120,6 +114,7 @@
 .toasts__wrapper .toast-progress .progress-bar {
   background: var(--toasts-progress-bg);
   width: 100%;
+  height: 100%;
   transition: all 0.1s;
 }
 
@@ -152,50 +147,3 @@
 .toast-container.hide-end {
   display: none;
 }
-
-@keyframes toast-anim-initfirst {
-  0% {
-    transform: translateY(-20px);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(20px);
-    opacity: 0;
-  }
-}
-@keyframes toast-anim-show-first {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes toast-anim-hide {
-  0% {
-    transform: translateY(-100%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(10px);
-    opacity: 0;
-    /* prevent auto-close's item */
-    display: block;
-  }
-}
-@keyframes toast-anim-hide--onlyone {
-  0% {
-    transform: translateY(-100%);
-    opacity: 1;
-    /* prevent auto-close's item */
-    display: block;
-  }
-  100% {
-    transform: translateY(10px);
-    opacity: 0;
-    /* prevent auto-close's item */
-    display: block;
-  }
-}

package/lib/esm/Checkbox/index.tsx

@@ -67,16 +67,27 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return val;
+            },
             clear: (cb?: any) => {
                 setVal(false);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    onChange(null, false);
+                }
             },
             set: (value: string, cb?: any) => {
                 setVal(value);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    onChange(null, value);
+                }
             }
         }),
-        [contentRef],
+        [contentRef, val],
     );
 
 

package/lib/esm/Date/index.tsx

@@ -342,9 +342,14 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
             control: () => {
                 return getAllSplittingInputs();
             },
+            getLatestVal: () => {
+                return !dateDefaultValueExist ? `` : valueResConverter(changedVal);
+            },
             clear: (cb?: any) => {
                 clearAll();
                 cb?.();
+
+                onChange?.(inputRef.current, '', false, getAllSplittingInputs());
             },
             blur: (cb?: any) => {
                 getAllSplittingInputs().forEach((el: any) => {
@@ -364,9 +369,11 @@ const Date = forwardRef((props: DateProps, externalRef: any) => {
                 initValue(curTargetVal);
                 
                 cb?.();
+
+                onChange?.(inputRef.current, value, isValidDate(value), getAllSplittingInputs());
             }
         }),
-        [contentRef],
+        [contentRef, dateDefaultValueExist, changedVal],
     );
 
 

package/lib/esm/Input/index.tsx

@@ -308,13 +308,20 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, onComposition, valRef.current, '');
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, onComposition, valRef.current, `${value}`);
             },
             aiPredictReset: () => {
                 setTimeout(() => { // Avoid conflicts with other asynchronous states, resulting in invalid clearing
@@ -322,7 +329,7 @@ const Input = forwardRef((props: InputProps, externalRef: any) => {
                 }, 0);
             },
         }),
-        [contentRef],
+        [contentRef, onComposition, changedVal],
     );
 
     const propExist = (p: any) => {

package/lib/esm/LiveSearch/index.tsx

@@ -196,13 +196,20 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
             control: () => {
                 return inputRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(inputRef.current, [], '', listRef.current);
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(inputRef.current, [], '', listRef.current);
             }
         }),
         [contentRef],

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -150,16 +150,34 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
             control: () => {
                 return getAllControls();
             },
+            getLatestVal: () => {
+                return VALUE_BY_BRACKETS ? convertArrToValByBrackets(valRes(selectedItems)) : valRes(selectedItems).join(',');
+            },
             clear: (cb?: any) => {
                 initDefaultValue('', dataInit);
                 cb?.();
+
+                onChange?.(null, null, '', null, null, null, null);
             },
             set: (value: any, cb?: any) => {
                 initDefaultValue(value, dataInit);
                 cb?.();
+
+                if (Array.isArray(value)) {
+                    const _resDataCollection = value;
+                    const _value = value.map((k: any) => k.value);
+                    const _valueStr = VALUE_BY_BRACKETS ? value.map((k: any) => `[${k.value}]`).join('') : value.map((k: any) => k.value).join(',');
+                    const _label = value.map((k: any) => k.label);
+                    const _labelStr = VALUE_BY_BRACKETS ? value.map((k: any) => `[${k.label}]`).join('') : value.map((k: any) => k.label).join(',');
+
+                    onChange?.(null, _value, _valueStr, _label, _labelStr, null, _resDataCollection);
+                } else {
+                    onChange?.(null, null, value, null, null, null, null);
+                }
+                
             }
         }),
-        [dataInit, contentRef],
+        [dataInit, contentRef, selectedItems],
     );
 
 

package/lib/esm/NumberInput/index.tsx

@@ -105,13 +105,20 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             control: () => {
                 return valRef.current;
             },
+            getLatestVal: () => {
+                return changedVal || '';
+            },
             clear: (cb?: any) => {
                 setChangedVal('');
                 cb?.();
+
+                onChange?.(null, valRef.current, Number(''));
             },
             set: (value: string, cb?: any) => {
                 setChangedVal(`${value}`);
                 cb?.();
+
+                onChange?.(null, valRef.current, Number(formatValue(`${value}`)));
             },
             increment: (cb?: any) => {
                 handleIncrement(null);
@@ -123,7 +130,7 @@ const NumberInput = forwardRef((props: NumberInputProps, externalRef: any) => {
             }
 
         }),
-        [contentRef],
+        [contentRef, changedVal],
     );
 
     const propExist = (p: any) => {

package/lib/esm/Radio/index.tsx

@@ -162,16 +162,32 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
             control: () => {
                 return getAllControls();
             },
+            getLatestVal: () => {
+                return controlValue || '';
+            },
             clear: (cb?: any) => {
                 setControlValue('');
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    const curData: Record<string, unknown> = optionsFlat(dataInit).find((v: any) => v.value == value);
+                    const currentIndex: number = optionsFlat(dataInit).findIndex((v: any) => v.value == value);
+                    onChange(null, '', null, null);
+                }
+
             },
             set: (value: string, cb?: any) => {
                 setControlValue(`${value}`);
                 cb?.();
+
+                if (typeof (onChange) === 'function') {
+                    const curData: Record<string, unknown> = optionsFlat(dataInit).find((v: any) => v.value == value);
+                    const currentIndex: number = optionsFlat(dataInit).findIndex((v: any) => v.value == value);
+                    onChange(null, `${value}`, curData, currentIndex);
+                }
             }
         }),
-        [dataInit, contentRef],
+        [dataInit, contentRef, controlValue],
     );