funda-ui 4.7.625 → 4.7.701

package/lib/css/Popover/index.css

@@ -0,0 +1,198 @@
+/* ======================================================
+    <!-- Popover -->
+/* ====================================================== */
+/*
+ * 1. Base Styles
+ * 2. Position Modifiers - Top
+ * 3. Position Modifiers - Top Left
+ * 4. Position Modifiers - Top Right
+ * 5. Position Modifiers - Bottom
+ * 6. Position Modifiers - Bottom Left
+ * 7. Position Modifiers - Bottom Right
+ * 8. Position Modifiers - Left
+ * 9. Position Modifiers - Right
+ * 10. Size
+*/
+.cus-popover__wrapper {
+  --cus-popover-box-shadow: 0 5px 15px 0 rgba(0,0,0,.07), 0 15px 35px 0 rgba(50,50,93,.1);
+  --cus-popover-content-bg: rgba(17, 17, 17, 0.9);
+  --cus-popover-content-color: #fff;
+  --cus-popover-content-font-size: 0.75em;
+  --cus-popover-content-padding-x: 1em;
+  --cus-popover-content-padding-y: .5em;
+  --cus-popover-content-line-height: 1.5;
+  --cus-popover-arrow-bg-top: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%280%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-bottom: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2236px%22%20height%3D%2212px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28180%2018%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-left: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%28-90%2018%2018%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-bg-right: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2212px%22%20height%3D%2236px%22%3E%3Cpath%20fill%3D%22rgba%2817,%2017,%2017,%200.9%29%22%20transform%3D%22rotate%2890%206%206%29%22%20d%3D%22M2.658,0.000%20C-13.615,0.000%2050.938,0.000%2034.662,0.000%20C28.662,0.000%2023.035,12.002%2018.660,12.002%20C14.285,12.002%208.594,0.000%202.658,0.000%20Z%22/%3E%3C/svg%3E") no-repeat;
+  --cus-popover-arrow-width: 18px;
+  --cus-popover-arrow-height: 6px;
+  position: absolute;
+  z-index: 1055; /* --bs-modal-zindex */
+  pointer-events: none;
+  display: none;
+  margin-top: -0.2rem;
+  /*
+  ---------------------------
+  1. Base Styles
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  2. Position Modifiers - Top
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  3. Position Modifiers - Top Left
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  4. Position Modifiers - Top Right
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  5. Position Modifiers - Bottom
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  6. Position Modifiers - Bottom Left
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  7. Position Modifiers - Bottom Right
+  ---------------------------
+  */
+  /*
+  ---------------------------
+  10. Size
+  ---------------------------
+  */
+}
+.cus-popover__wrapper::before {
+  background-size: 100% auto !important;
+  content: "";
+  position: absolute;
+}
+.cus-popover__wrapper.active {
+  display: block !important;
+}
+.cus-popover__wrapper.active::before,
+.cus-popover__wrapper.active > .cus-popover__content {
+  opacity: 1;
+}
+.cus-popover__wrapper:focus::before,
+.cus-popover__wrapper:focus > .cus-popover__content {
+  opacity: 1;
+}
+.cus-popover__wrapper::before,
+.cus-popover__wrapper > .cus-popover__content {
+  backface-visibility: hidden;
+  will-change: transform;
+  opacity: 0;
+  box-sizing: border-box;
+  z-index: 10;
+  transform-origin: top;
+  box-shadow: var(--cus-popover-box-shadow);
+  transition: none !important; /* Don't use transition if position is outside window */
+}
+.cus-popover__wrapper > .cus-popover__content {
+  pointer-events: auto;
+  background: var(--cus-popover-content-bg);
+  border-radius: 4px;
+  color: var(--cus-popover-content-color);
+  content: attr(aria-label);
+  font-size: var(--cus-popover-content-font-size);
+  font-weight: normal;
+  text-transform: none;
+  padding: var(--cus-popover-content-padding-y) var(--cus-popover-content-padding-x);
+  white-space: nowrap;
+  box-sizing: content-box;
+  line-height: var(--cus-popover-content-line-height);
+}
+.cus-popover__wrapper > .cus-popover__content img {
+  height: auto !important;
+  margin: 0.5rem 0;
+}
+.cus-popover__wrapper[data-microtip-position|=top]::before {
+  background: var(--cus-popover-arrow-bg-top);
+  height: var(--cus-popover-arrow-height);
+  width: var(--cus-popover-arrow-width);
+}
+.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
+  margin-bottom: var(--cus-popover-arrow-height);
+}
+.cus-popover__wrapper[data-microtip-position|=top]::before {
+  top: calc(100% - var(--cus-popover-arrow-height));
+  left: calc(var(--cus-popover-arrow-width) / 2 * -1);
+}
+.cus-popover__wrapper[data-microtip-position|=top] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cus-popover__wrapper[data-microtip-position=top-left] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position=top-right] > .cus-popover__content {
+  bottom: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position|=bottom]::before {
+  background: var(--cus-popover-arrow-bg-bottom);
+  height: var(--cus-popover-arrow-height);
+  width: var(--cus-popover-arrow-width);
+  margin-top: 5px;
+  margin-bottom: 0;
+}
+.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
+  margin-top: var(--cus-popover-arrow-height);
+}
+.cus-popover__wrapper[data-microtip-position|=bottom]::before {
+  bottom: calc(100% - var(--cus-popover-arrow-height));
+  left: calc(var(--cus-popover-arrow-width) / 2 * -1);
+}
+.cus-popover__wrapper[data-microtip-position|=bottom] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.cus-popover__wrapper[data-microtip-position=bottom-left] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(-100% + var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-position=bottom-right] > .cus-popover__content {
+  bottom: auto;
+  top: calc(100% + var(--cus-popover-arrow-height));
+  left: 50%;
+  transform: translateX(calc(0% - var(--cus-popover-arrow-width)));
+}
+.cus-popover__wrapper[data-microtip-size=auto].cus-popover__content {
+  white-space: nowrap;
+  width: auto;
+  max-width: 530px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.cus-popover__wrapper[data-microtip-size=small].cus-popover__content {
+  white-space: initial;
+  width: 80px;
+}
+.cus-popover__wrapper[data-microtip-size=medium].cus-popover__content {
+  white-space: initial;
+  width: 150px;
+}
+.cus-popover__wrapper[data-microtip-size=large].cus-popover__content {
+  white-space: initial;
+  width: 260px;
+}

package/lib/css/TagInput/index.css

@@ -1,46 +1,46 @@
 /* ======================================================
     <!-- Tag Input -->
 /* ====================================================== */
-.tag-input__wrapper {
-  --tag-input-control-border-radius: 0.375rem;
-  --tag-input-control-wrapper-bg: #fff;
-  --tag-input-control-wrapper-border-color: #dee2e6;
-  --tag-input-control-color: #adb5bd;
-  --tag-input-list-bg: #efefef;
-  --tag-input-removebtn-fill: #000;
-  --tag-input-removebtn-hover-fill: #f00;
-  --tag-input-focus-border-color:#86b7fe;
-  --tag-input-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
+.taginput__wrapper {
+  --taginput-control-border-radius: 0.375rem;
+  --taginput-control-wrapper-bg: #fff;
+  --taginput-control-wrapper-border-color: #dee2e6;
+  --taginput-control-color: #adb5bd;
+  --taginput-list-bg: #efefef;
+  --taginput-removebtn-fill: #000;
+  --taginput-removebtn-hover-fill: #f00;
+  --taginput-focus-border-color:#86b7fe;
+  --taginput-focus-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
   display: flex;
 }
-.tag-input__wrapper ul,
-.tag-input__wrapper li {
+.taginput__wrapper ul,
+.taginput__wrapper li {
   padding: 0;
   margin: 0;
   list-style: none;
 }
-.tag-input__wrapper .tag-input__control-wrapper {
+.taginput__wrapper .taginput__control-wrapper {
   display: flex;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div {
+.taginput__wrapper .taginput__control-wrapper > div {
   position: relative;
   align-items: center;
   display: flex;
   flex-wrap: wrap;
   /* bootstrap style that match ".form-control" */
   padding: 0.375rem;
-  background-color: var(--tag-input-control-wrapper-bg);
+  background-color: var(--taginput-control-wrapper-bg);
   background-clip: padding-box;
-  border: 1px solid var(--tag-input-control-wrapper-border-color);
+  border: 1px solid var(--taginput-control-wrapper-border-color);
   appearance: none;
-  border-radius: var(--tag-input-control-border-radius);
+  border-radius: var(--taginput-control-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   padding-bottom: 1px;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control {
   margin-bottom: 0.375rem;
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input {
   background: transparent;
   border: none;
   outline: none;
@@ -51,25 +51,25 @@
   font-size: 0.875rem;
   font-weight: 400;
   line-height: 1.5;
-  color: var(--tag-input-control-color);
+  color: var(--taginput-control-color);
 }
-.tag-input__wrapper .tag-input__control-wrapper > div .tag-input__control input:focus {
+.taginput__wrapper .taginput__control-wrapper > div .taginput__control input:focus {
   outline: none;
   box-shadow: none;
 }
-.tag-input__wrapper ul.tag-input__list li {
+.taginput__wrapper ul.taginput__list li {
   display: inline-block;
   margin: 5px;
   margin-bottom: 0;
   padding: 0.1rem 1.5rem 0.1rem 1rem;
   font-size: 0.875rem;
-  background: var(--tag-input-list-bg);
+  background: var(--taginput-list-bg);
   border-radius: 30px;
   overflow: hidden;
   text-overflow: ellipsis;
   position: relative;
 }
-.tag-input__wrapper ul.tag-input__list li > a {
+.taginput__wrapper ul.taginput__list li > a {
   font-weight: 400;
   opacity: 0.6;
   font-size: 18px;
@@ -79,13 +79,13 @@
   top: 50%;
   transform: translateY(-50%);
 }
-.tag-input__wrapper ul.tag-input__list li > a path {
-  fill: var(--tag-input-removebtn-fill);
+.taginput__wrapper ul.taginput__list li > a path {
+  fill: var(--taginput-removebtn-fill);
 }
-.tag-input__wrapper ul.tag-input__list li > a:hover path {
-  fill: var(--tag-input-removebtn-hover-fill);
+.taginput__wrapper ul.taginput__list li > a:hover path {
+  fill: var(--taginput-removebtn-hover-fill);
 }
-.tag-input__wrapper.focus .tag-input__control-wrapper > div {
-  box-shadow: var(--tag-input-focus-box-shadow);
-  border-color: var(--tag-input-focus-border-color);
+.taginput__wrapper.focus-floating .taginput__control-wrapper > div {
+  box-shadow: var(--taginput-focus-box-shadow);
+  border-color: var(--taginput-focus-border-color);
 }

package/lib/esm/CascadingSelect/index.tsx

@@ -499,7 +499,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         handleDisplayOptions(null);
@@ -513,7 +513,7 @@ const CascadingSelect = forwardRef((props: CascadingSelectProps, externalRef: an
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
 
         //

package/lib/esm/CascadingSelectE2E/index.tsx

@@ -630,7 +630,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         handleDisplayOptions(null);
@@ -644,7 +644,7 @@ const CascadingSelectE2E = forwardRef((props: CascadingSelectE2EProps, externalR
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
 
         //

package/lib/esm/Checkbox/index.tsx

@@ -93,7 +93,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
 
     function handleFocus(event: any) {
-        rootRef.current?.classList.add('focus');
+        rootRef.current?.classList.add('focus-floating');
 
         //
         onFocus?.(event);
@@ -107,7 +107,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         if (typeof (onChange) === 'function') {
@@ -123,7 +123,7 @@ const Checkbox = forwardRef((props: CheckboxProps, externalRef: any) => {
 
         //----
         //remove focus style
-        rootRef.current?.classList.remove('focus');
+        rootRef.current?.classList.remove('focus-floating');
 
         //
         onBlur?.(event);

package/lib/esm/ColorPicker/index.tsx

@@ -79,7 +79,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
 
 
     function handleFocus(event: FocusEvent<HTMLInputElement>) {
-        rootRef.current?.classList.add('focus');
 
         //
         onFocus?.(event);
@@ -91,12 +90,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
         setChangedVal(val);
 
 
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onChange?.(event);
 
@@ -106,13 +99,6 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
         const el = event.target;
         const val = event.target.value;
 
-
-        //----
-        //remove focus style
-        if (val === '') {
-            rootRef.current?.classList.remove('focus');
-        }
-
         //
         onBlur?.(event);
     }
@@ -133,7 +119,10 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
             <div className={combinedCls(
                 'custom-colorpicker__wrapper',
                 shapeClassName,
-                clsWrite(wrapperClassName, 'mb-3 position-relative')
+                clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                {
+                    'focus-floating': changedVal !== ''
+                }
             )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 

package/lib/esm/EventCalendarTimeline/index.tsx

@@ -115,7 +115,7 @@ export type EventCalendarTimelineProps = {
 
     // table
     tableListSectionTitle?: string | React.ReactNode;
-    tableCellMinWidth?: number;
+    tableCellMinWidth?: number | ((mode: 'week' | 'month') => number);
 
     // tooltip
     tableTooltipDirection?: string;
@@ -274,7 +274,6 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     const AUTO_SCROLL = autoScroll || false;
     const SHOW_WEEK = showWeek || false;
     const BODY_DRAG = draggable || false;
-    const CELL_MIN_W = typeof tableCellMinWidth === 'undefined' ? (SHOW_WEEK ? 100 : 50) : tableCellMinWidth;
     const tableGridRef = useRef<any>(null);
     const tableGridHeaderRef = useRef<any>(null);
     const scrollHeaderRef = useRef(null);
@@ -301,6 +300,16 @@ const EventCalendarTimeline = (props: EventCalendarTimelineProps) => {
     // appearance mode
     const [appearanceMode, setAppearanceMode] = useState<string>(appearance);
 
+    // Calculate CELL_MIN_W based on appearanceMode and tableCellMinWidth
+    const CELL_MIN_W = useMemo(() => {
+        if (typeof tableCellMinWidth === 'undefined') {
+            return appearanceMode === 'week' ? 100 : 50;
+        }
+        if (typeof tableCellMinWidth === 'function') {
+            return tableCellMinWidth(appearanceMode as 'week' | 'month');
+        }
+        return tableCellMinWidth;
+    }, [tableCellMinWidth, appearanceMode]);
 
     const findMondayAndTruncate = (dates: string[]) => {
         const _res = dates.map((s: string) => new Date(s));