@alexochihua/exos-library-components 2.25.33 → 2.25.34

package/dist/exos-library-components.common.js

@@ -55402,6 +55402,9 @@ const _hoisted_20 = {
 };
 
 
+const ESTIMATED_OPTION_ROW_PX = 44;
+
+// Lazy load state (solo cuando lazyOptions está definido)
 const DROPDOWN_GAP_PX = 8;
 /** Gap entre el dropdown y el trigger cuando abre hacia arriba, para que el label quede siempre visible. */
 const DROPDOWN_LABEL_GAP_PX = 8;
@@ -55895,8 +55898,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
      */
     const clickOutsideIgnore = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
     let scrollResizeCleanup = null;
-
-    // Lazy load state (solo cuando lazyOptions está definido)
+    let dropdownResizeObserverCleanup = null;
     const lazyOptionsList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)([]);
     const isLoadingLazy = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(false);
     const page = (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.ref)(1);
@@ -56216,6 +56218,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.onBeforeUnmount)(() => {
       window.removeEventListener('resize', handleResize);
+      disconnectDropdownResizeObserver();
       if (scrollResizeCleanup) {
         scrollResizeCleanup();
         scrollResizeCleanup = null;
@@ -56298,10 +56301,55 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       if (topSpace >= needHeight) return true;
       return topSpace >= bottomSpace;
     };
+    const getMeasuredDropdownHeight = () => {
+      const dropdownElement = contentSelect.value;
+      if (!dropdownElement) {
+        return 0;
+      }
+      const measuredHeight = Math.max(dropdownElement.offsetHeight, dropdownElement.scrollHeight, dropdownElement.getBoundingClientRect().height);
+      return measuredHeight > 0 ? measuredHeight : 0;
+    };
+    const getDropdownHeightForPositioning = () => {
+      const measuredHeight = getMeasuredDropdownHeight();
+      if (measuredHeight > 0) {
+        return measuredHeight;
+      }
+      const optionCount = displayOptionsForDropdown.value.length;
+      if (optionCount > 0) {
+        return Math.min(optionCount * ESTIMATED_OPTION_ROW_PX + 8, window.innerHeight * DROPDOWN_MAX_HEIGHT_VH);
+      }
+      return window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+    };
+    const scheduleTeleportDropdownPositionUpdate = () => {
+      if (!isSelectOpened.value || !useTeleport.value) {
+        return;
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
+        updateDropdownPositionFixed();
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(updateDropdownPositionFixed);
+      });
+    };
+    const disconnectDropdownResizeObserver = () => {
+      if (dropdownResizeObserverCleanup) {
+        dropdownResizeObserverCleanup();
+        dropdownResizeObserverCleanup = null;
+      }
+    };
+    const connectDropdownResizeObserver = () => {
+      disconnectDropdownResizeObserver();
+      if (!isSelectOpened.value || !useTeleport.value || typeof ResizeObserver === 'undefined' || !contentSelect.value) {
+        return;
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        updateDropdownPositionFixed();
+      });
+      resizeObserver.observe(contentSelect.value);
+      dropdownResizeObserverCleanup = () => resizeObserver.disconnect();
+    };
     const calculateDropPositionY = () => {
       if (isSelectOpened.value) {
         const refComp = instance.refs[`mainSelectComp-${instance.uid}`];
-        const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+        const dropdownHeight = getDropdownHeightForPositioning();
         const openAbove = refComp ? shouldOpenAbove({
           referenceEl: refComp,
           dropdownHeight,
@@ -56328,12 +56376,14 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       const triggerEl = getTriggerEl();
       if (!triggerEl) return;
       const rect = triggerEl.getBoundingClientRect();
-      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+      const measuredHeight = getMeasuredDropdownHeight();
+      const heightForDirection = measuredHeight > 0 ? measuredHeight : getDropdownHeightForPositioning();
       const openAbove = shouldOpenAbove({
         referenceEl: triggerEl,
-        dropdownHeight,
+        dropdownHeight: heightForDirection,
         useViewport: true
       });
+      const maxDropdownHeightVh = window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
       const style = {
         position: 'fixed',
         left: rect.left + 'px',
@@ -56342,10 +56392,17 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         maxWidth: rect.width + 'px',
         zIndex: 9999
       };
+      showPosition.value = !openAbove;
       if (openAbove) {
-        style.top = Math.max(0, rect.top - dropdownHeight - DROPDOWN_LABEL_GAP_PX) + 'px';
+        const spaceAbove = rect.top - DROPDOWN_LABEL_GAP_PX - DROPDOWN_GAP_PX;
+        style.maxHeight = Math.min(maxDropdownHeightVh, Math.max(spaceAbove, 0)) + 'px';
+        style.top = 'auto';
+        style.bottom = window.innerHeight - rect.top + DROPDOWN_LABEL_GAP_PX + 'px';
       } else {
+        const spaceBelow = window.innerHeight - rect.bottom - DROPDOWN_GAP_PX;
+        style.maxHeight = Math.min(maxDropdownHeightVh, Math.max(spaceBelow, 0)) + 'px';
         style.top = rect.bottom + 'px';
+        style.bottom = 'auto';
       }
       dropdownPositionFixed.value = style;
     };
@@ -56798,17 +56855,24 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       });
     });
 
+    // Recalcular posición al filtrar o cambiar opciones (Teleport + suggestion / lazy)
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => [displayOptionsForDropdown.value.length, tempValueInput.value, isLoadingLazy.value], () => {
+      scheduleTeleportDropdownPositionUpdate();
+    });
+
     // Watch para Teleport: actualizar posición fixed y listeners scroll/resize
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => isSelectOpened.value, isOpen => {
       if (scrollResizeCleanup) {
         scrollResizeCleanup();
         scrollResizeCleanup = null;
       }
+      disconnectDropdownResizeObserver();
       if (isOpen && useTeleport.value) {
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
           updateDropdownPositionFixed();
           (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
             updateDropdownPositionFixed();
+            connectDropdownResizeObserver();
           });
           const onScrollResize = () => {
             (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(updateDropdownPositionFixed);

package/dist/exos-library-components.umd.js

@@ -55420,6 +55420,9 @@ const _hoisted_20 = {
 };
 
 
+const ESTIMATED_OPTION_ROW_PX = 44;
+
+// Lazy load state (solo cuando lazyOptions está definido)
 const DROPDOWN_GAP_PX = 8;
 /** Gap entre el dropdown y el trigger cuando abre hacia arriba, para que el label quede siempre visible. */
 const DROPDOWN_LABEL_GAP_PX = 8;
@@ -55913,8 +55916,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
      */
     const clickOutsideIgnore = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)([]);
     let scrollResizeCleanup = null;
-
-    // Lazy load state (solo cuando lazyOptions está definido)
+    let dropdownResizeObserverCleanup = null;
     const lazyOptionsList = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)([]);
     const isLoadingLazy = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(false);
     const page = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(1);
@@ -56234,6 +56236,7 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       window.removeEventListener('resize', handleResize);
+      disconnectDropdownResizeObserver();
       if (scrollResizeCleanup) {
         scrollResizeCleanup();
         scrollResizeCleanup = null;
@@ -56316,10 +56319,55 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       if (topSpace >= needHeight) return true;
       return topSpace >= bottomSpace;
     };
+    const getMeasuredDropdownHeight = () => {
+      const dropdownElement = contentSelect.value;
+      if (!dropdownElement) {
+        return 0;
+      }
+      const measuredHeight = Math.max(dropdownElement.offsetHeight, dropdownElement.scrollHeight, dropdownElement.getBoundingClientRect().height);
+      return measuredHeight > 0 ? measuredHeight : 0;
+    };
+    const getDropdownHeightForPositioning = () => {
+      const measuredHeight = getMeasuredDropdownHeight();
+      if (measuredHeight > 0) {
+        return measuredHeight;
+      }
+      const optionCount = displayOptionsForDropdown.value.length;
+      if (optionCount > 0) {
+        return Math.min(optionCount * ESTIMATED_OPTION_ROW_PX + 8, window.innerHeight * DROPDOWN_MAX_HEIGHT_VH);
+      }
+      return window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+    };
+    const scheduleTeleportDropdownPositionUpdate = () => {
+      if (!isSelectOpened.value || !useTeleport.value) {
+        return;
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDropdownPositionFixed();
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(updateDropdownPositionFixed);
+      });
+    };
+    const disconnectDropdownResizeObserver = () => {
+      if (dropdownResizeObserverCleanup) {
+        dropdownResizeObserverCleanup();
+        dropdownResizeObserverCleanup = null;
+      }
+    };
+    const connectDropdownResizeObserver = () => {
+      disconnectDropdownResizeObserver();
+      if (!isSelectOpened.value || !useTeleport.value || typeof ResizeObserver === 'undefined' || !contentSelect.value) {
+        return;
+      }
+      const resizeObserver = new ResizeObserver(() => {
+        updateDropdownPositionFixed();
+      });
+      resizeObserver.observe(contentSelect.value);
+      dropdownResizeObserverCleanup = () => resizeObserver.disconnect();
+    };
     const calculateDropPositionY = () => {
       if (isSelectOpened.value) {
         const refComp = instance.refs[`mainSelectComp-${instance.uid}`];
-        const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+        const dropdownHeight = getDropdownHeightForPositioning();
         const openAbove = refComp ? shouldOpenAbove({
           referenceEl: refComp,
           dropdownHeight,
@@ -56346,12 +56394,14 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       const triggerEl = getTriggerEl();
       if (!triggerEl) return;
       const rect = triggerEl.getBoundingClientRect();
-      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+      const measuredHeight = getMeasuredDropdownHeight();
+      const heightForDirection = measuredHeight > 0 ? measuredHeight : getDropdownHeightForPositioning();
       const openAbove = shouldOpenAbove({
         referenceEl: triggerEl,
-        dropdownHeight,
+        dropdownHeight: heightForDirection,
         useViewport: true
       });
+      const maxDropdownHeightVh = window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
       const style = {
         position: 'fixed',
         left: rect.left + 'px',
@@ -56360,10 +56410,17 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
         maxWidth: rect.width + 'px',
         zIndex: 9999
       };
+      showPosition.value = !openAbove;
       if (openAbove) {
-        style.top = Math.max(0, rect.top - dropdownHeight - DROPDOWN_LABEL_GAP_PX) + 'px';
+        const spaceAbove = rect.top - DROPDOWN_LABEL_GAP_PX - DROPDOWN_GAP_PX;
+        style.maxHeight = Math.min(maxDropdownHeightVh, Math.max(spaceAbove, 0)) + 'px';
+        style.top = 'auto';
+        style.bottom = window.innerHeight - rect.top + DROPDOWN_LABEL_GAP_PX + 'px';
       } else {
+        const spaceBelow = window.innerHeight - rect.bottom - DROPDOWN_GAP_PX;
+        style.maxHeight = Math.min(maxDropdownHeightVh, Math.max(spaceBelow, 0)) + 'px';
         style.top = rect.bottom + 'px';
+        style.bottom = 'auto';
       }
       dropdownPositionFixed.value = style;
     };
@@ -56816,17 +56873,24 @@ const DROPDOWN_MAX_HEIGHT_VH = 0.4;
       });
     });
 
+    // Recalcular posición al filtrar o cambiar opciones (Teleport + suggestion / lazy)
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => [displayOptionsForDropdown.value.length, tempValueInput.value, isLoadingLazy.value], () => {
+      scheduleTeleportDropdownPositionUpdate();
+    });
+
     // Watch para Teleport: actualizar posición fixed y listeners scroll/resize
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => isSelectOpened.value, isOpen => {
       if (scrollResizeCleanup) {
         scrollResizeCleanup();
         scrollResizeCleanup = null;
       }
+      disconnectDropdownResizeObserver();
       if (isOpen && useTeleport.value) {
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
           updateDropdownPositionFixed();
           (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
             updateDropdownPositionFixed();
+            connectDropdownResizeObserver();
           });
           const onScrollResize = () => {
             (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(updateDropdownPositionFixed);