@alexochihua/exos-library-components 2.25.25 → 2.25.26

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

@@ -54105,8 +54105,22 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
       let digitIndex = 0;
       const hiddenChar = props.hiddenChar || '*';
 
-      // Seguir el patrón exactamente, insertando separadores según corresponda
-      for (let i = 0; i < pattern.length; i++) {
+      // Índice del primer placeholder (# o hiddenChar) en el patrón
+      let firstPlaceholderIndex = -1;
+      for (let k = 0; k < pattern.length; k++) {
+        if (pattern[k] === '#' || pattern[k] === hiddenChar) {
+          firstPlaceholderIndex = k;
+          break;
+        }
+      }
+
+      // Prefijo literal completo antes del primer placeholder (ej. "PROD-" en "PROD-##-#####")
+      if (cleanValue.length > 0 && firstPlaceholderIndex > 0) {
+        displayValue += pattern.substring(0, firstPlaceholderIndex);
+      }
+
+      // Seguir el patrón exactamente desde el primer placeholder, insertando separadores según corresponda
+      for (let i = firstPlaceholderIndex >= 0 ? firstPlaceholderIndex : 0; i < pattern.length; i++) {
         const patternChar = pattern[i];
         if (patternChar === '#') {
           if (digitIndex < cleanValue.length) {
@@ -54121,8 +54135,7 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
           digitIndex++;
         } else {
           // Es un separador - agregarlo solo si hay dígitos para mostrar
-          // o si es el separador inicial y hay al menos un dígito
-          if (digitIndex > 0 || i === 0 && cleanValue.length > 0) {
+          if (digitIndex > 0) {
             displayValue += patternChar;
           }
         }
@@ -55289,6 +55302,17 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
 };
 
 
+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;
+const DROPDOWN_MAX_HEIGHT_VH = 0.4;
+
+/**
+ * Encuentra el primer ancestro con overflow-y auto/scroll (scroll-parent).
+ * En modo Teleport el dropdown se posiciona respecto al viewport; sin Teleport,
+ * usar el scroll-parent evita que el menú empuje el scroll del contenedor.
+ */
+
 /* harmony default export */ var ESelectvue_type_script_setup_true_lang_js = ({
   __name: 'ESelect',
   props: {
@@ -55576,7 +55600,9 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
      */
     dropdownAppendTo: {
       type: String,
-      default: null
+      default: () => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.inject)('$exosSelectConfig')?.dropdownAppendTo ?? null;
+      }
     },
     /**
      * Dirección de apertura del dropdown de opciones.
@@ -56019,42 +56045,89 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         }
       });
     };
+    const getScrollParent = element => {
+      if (!element) return null;
+      let parent = element.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    /**
+     * Rect del viewport (para medir espacio arriba/abajo cuando se usa Teleport).
+     */
+    const getViewportRect = () => ({
+      top: 0,
+      bottom: window.innerHeight
+    });
+
+    /**
+     * Decide si el dropdown debe abrir hacia arriba según openDirection y espacio disponible.
+     * En auto: compara topSpace y bottomSpace con la altura del dropdown (no umbral fijo).
+     * @param {{ referenceEl: HTMLElement, dropdownHeight: number, useViewport: boolean }} opts
+     * @returns {boolean} true = abrir arriba, false = abrir abajo
+     */
+    const shouldOpenAbove = ({
+      referenceEl,
+      dropdownHeight,
+      useViewport
+    }) => {
+      if (props.openDirection === 'up') return true;
+      if (props.openDirection === 'down') return false;
+      const rect = referenceEl.getBoundingClientRect();
+      const containerRect = useViewport ? getViewportRect() : (() => {
+        const scrollParent = getScrollParent(mainSelectComponent.value);
+        return scrollParent ? scrollParent.getBoundingClientRect() : getViewportRect();
+      })();
+      const topSpace = rect.top - containerRect.top;
+      const bottomSpace = containerRect.bottom - rect.bottom;
+      const needHeight = dropdownHeight + DROPDOWN_GAP_PX;
+      if (bottomSpace >= needHeight) return false;
+      if (topSpace >= needHeight) return true;
+      return topSpace >= bottomSpace;
+    };
     const calculateDropPositionY = () => {
       if (isSelectOpened.value) {
         const refComp = instance.refs[`mainSelectComp-${instance.uid}`];
-        const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(refComp);
+        const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+        const openAbove = refComp ? shouldOpenAbove({
+          referenceEl: refComp,
+          dropdownHeight,
+          useViewport: useTeleport.value
+        }) : false;
         if (openAbove) {
           showPosition.value = false;
-          // Gap solo cuando hay valor seleccionado para que el label flotante no quede tapado
           return {
             top: 'auto',
             left: '0',
-            bottom: hasInfo.value ? 'calc(100% + 0.8rem)' : '100%'
-          };
-        } else {
-          showPosition.value = true;
-          return {
-            left: '0',
-            top: selectHeight.value + 'px' // Despliega hacia abajo
+            bottom: `calc(100% + ${DROPDOWN_LABEL_GAP_PX}px)`
           };
         }
+        showPosition.value = true;
+        return {
+          left: '0',
+          top: selectHeight.value + 'px'
+        };
       }
-
-      // Otro manejo si es necesario cuando el dropdown no está abierto
       return {};
     };
-    const calculateAvailableSpaceY = referenceComp => {
-      const rect = referenceComp.getBoundingClientRect();
-      const bottomSpace = window.innerHeight - rect.bottom;
-      return bottomSpace < 200 ? true : false; // arriba : abajo
-    };
     const getTriggerEl = () => mainSelectComponent.value?.querySelector('[data-testid="select-default"], [data-testid="select-suggest"]');
     const updateDropdownPositionFixed = () => {
       const triggerEl = getTriggerEl();
       if (!triggerEl) return;
       const rect = triggerEl.getBoundingClientRect();
-      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * 0.4;
-      const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(triggerEl);
+      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+      const openAbove = shouldOpenAbove({
+        referenceEl: triggerEl,
+        dropdownHeight,
+        useViewport: true
+      });
       const style = {
         position: 'fixed',
         left: rect.left + 'px',
@@ -56064,8 +56137,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         zIndex: 9999
       };
       if (openAbove) {
-        const gapLabel = hasInfo.value ? 8 : 0;
-        style.top = Math.max(0, rect.top - dropdownHeight - gapLabel) + 'px';
+        style.top = Math.max(0, rect.top - dropdownHeight - DROPDOWN_LABEL_GAP_PX) + 'px';
       } else {
         style.top = rect.bottom + 'px';
       }
@@ -56421,7 +56493,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
 
     // Watch effects
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.watch)(() => props.modelValue, newVal => {
-      if (newVal !== null && newVal !== undefined) {
+      if (newVal !== null && newVal !== undefined && newVal !== '') {
         validate();
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_namespaceObject.nextTick)(() => {
           calculateWidthLabelSelected();
@@ -62553,7 +62625,15 @@ const ExosLibraryComponents = {
         }
       }
     }
+    let defaultSelectConfig = {
+      dropdownAppendTo: null
+    };
+    let selectConfig = defaultSelectConfig;
+    if (options.select?.dropdownAppendTo) {
+      selectConfig.dropdownAppendTo = options.select.dropdownAppendTo;
+    }
     app.provide('$exosDialogConfig', dialogConfig);
+    app.provide('$exosSelectConfig', selectConfig);
     app.provide('$loading', loading);
     app.provide('$notify', notify);
     app.provide('$showMessage', message);

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

@@ -54123,8 +54123,22 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
       let digitIndex = 0;
       const hiddenChar = props.hiddenChar || '*';
 
-      // Seguir el patrón exactamente, insertando separadores según corresponda
-      for (let i = 0; i < pattern.length; i++) {
+      // Índice del primer placeholder (# o hiddenChar) en el patrón
+      let firstPlaceholderIndex = -1;
+      for (let k = 0; k < pattern.length; k++) {
+        if (pattern[k] === '#' || pattern[k] === hiddenChar) {
+          firstPlaceholderIndex = k;
+          break;
+        }
+      }
+
+      // Prefijo literal completo antes del primer placeholder (ej. "PROD-" en "PROD-##-#####")
+      if (cleanValue.length > 0 && firstPlaceholderIndex > 0) {
+        displayValue += pattern.substring(0, firstPlaceholderIndex);
+      }
+
+      // Seguir el patrón exactamente desde el primer placeholder, insertando separadores según corresponda
+      for (let i = firstPlaceholderIndex >= 0 ? firstPlaceholderIndex : 0; i < pattern.length; i++) {
         const patternChar = pattern[i];
         if (patternChar === '#') {
           if (digitIndex < cleanValue.length) {
@@ -54139,8 +54153,7 @@ const EInputMaskvue_type_script_setup_true_lang_js_hoisted_2 = ["id", "value"];
           digitIndex++;
         } else {
           // Es un separador - agregarlo solo si hay dígitos para mostrar
-          // o si es el separador inicial y hay al menos un dígito
-          if (digitIndex > 0 || i === 0 && cleanValue.length > 0) {
+          if (digitIndex > 0) {
             displayValue += patternChar;
           }
         }
@@ -55307,6 +55320,17 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
 };
 
 
+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;
+const DROPDOWN_MAX_HEIGHT_VH = 0.4;
+
+/**
+ * Encuentra el primer ancestro con overflow-y auto/scroll (scroll-parent).
+ * En modo Teleport el dropdown se posiciona respecto al viewport; sin Teleport,
+ * usar el scroll-parent evita que el menú empuje el scroll del contenedor.
+ */
+
 /* harmony default export */ var ESelectvue_type_script_setup_true_lang_js = ({
   __name: 'ESelect',
   props: {
@@ -55594,7 +55618,9 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
      */
     dropdownAppendTo: {
       type: String,
-      default: null
+      default: () => {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$exosSelectConfig')?.dropdownAppendTo ?? null;
+      }
     },
     /**
      * Dirección de apertura del dropdown de opciones.
@@ -56037,42 +56063,89 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         }
       });
     };
+    const getScrollParent = element => {
+      if (!element) return null;
+      let parent = element.parentElement;
+      while (parent) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return null;
+    };
+
+    /**
+     * Rect del viewport (para medir espacio arriba/abajo cuando se usa Teleport).
+     */
+    const getViewportRect = () => ({
+      top: 0,
+      bottom: window.innerHeight
+    });
+
+    /**
+     * Decide si el dropdown debe abrir hacia arriba según openDirection y espacio disponible.
+     * En auto: compara topSpace y bottomSpace con la altura del dropdown (no umbral fijo).
+     * @param {{ referenceEl: HTMLElement, dropdownHeight: number, useViewport: boolean }} opts
+     * @returns {boolean} true = abrir arriba, false = abrir abajo
+     */
+    const shouldOpenAbove = ({
+      referenceEl,
+      dropdownHeight,
+      useViewport
+    }) => {
+      if (props.openDirection === 'up') return true;
+      if (props.openDirection === 'down') return false;
+      const rect = referenceEl.getBoundingClientRect();
+      const containerRect = useViewport ? getViewportRect() : (() => {
+        const scrollParent = getScrollParent(mainSelectComponent.value);
+        return scrollParent ? scrollParent.getBoundingClientRect() : getViewportRect();
+      })();
+      const topSpace = rect.top - containerRect.top;
+      const bottomSpace = containerRect.bottom - rect.bottom;
+      const needHeight = dropdownHeight + DROPDOWN_GAP_PX;
+      if (bottomSpace >= needHeight) return false;
+      if (topSpace >= needHeight) return true;
+      return topSpace >= bottomSpace;
+    };
     const calculateDropPositionY = () => {
       if (isSelectOpened.value) {
         const refComp = instance.refs[`mainSelectComp-${instance.uid}`];
-        const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(refComp);
+        const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+        const openAbove = refComp ? shouldOpenAbove({
+          referenceEl: refComp,
+          dropdownHeight,
+          useViewport: useTeleport.value
+        }) : false;
         if (openAbove) {
           showPosition.value = false;
-          // Gap solo cuando hay valor seleccionado para que el label flotante no quede tapado
           return {
             top: 'auto',
             left: '0',
-            bottom: hasInfo.value ? 'calc(100% + 0.8rem)' : '100%'
-          };
-        } else {
-          showPosition.value = true;
-          return {
-            left: '0',
-            top: selectHeight.value + 'px' // Despliega hacia abajo
+            bottom: `calc(100% + ${DROPDOWN_LABEL_GAP_PX}px)`
           };
         }
+        showPosition.value = true;
+        return {
+          left: '0',
+          top: selectHeight.value + 'px'
+        };
       }
-
-      // Otro manejo si es necesario cuando el dropdown no está abierto
       return {};
     };
-    const calculateAvailableSpaceY = referenceComp => {
-      const rect = referenceComp.getBoundingClientRect();
-      const bottomSpace = window.innerHeight - rect.bottom;
-      return bottomSpace < 200 ? true : false; // arriba : abajo
-    };
     const getTriggerEl = () => mainSelectComponent.value?.querySelector('[data-testid="select-default"], [data-testid="select-suggest"]');
     const updateDropdownPositionFixed = () => {
       const triggerEl = getTriggerEl();
       if (!triggerEl) return;
       const rect = triggerEl.getBoundingClientRect();
-      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * 0.4;
-      const openAbove = props.openDirection === 'up' || props.openDirection === 'auto' && calculateAvailableSpaceY(triggerEl);
+      const dropdownHeight = contentSelect.value?.offsetHeight ?? window.innerHeight * DROPDOWN_MAX_HEIGHT_VH;
+      const openAbove = shouldOpenAbove({
+        referenceEl: triggerEl,
+        dropdownHeight,
+        useViewport: true
+      });
       const style = {
         position: 'fixed',
         left: rect.left + 'px',
@@ -56082,8 +56155,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
         zIndex: 9999
       };
       if (openAbove) {
-        const gapLabel = hasInfo.value ? 8 : 0;
-        style.top = Math.max(0, rect.top - dropdownHeight - gapLabel) + 'px';
+        style.top = Math.max(0, rect.top - dropdownHeight - DROPDOWN_LABEL_GAP_PX) + 'px';
       } else {
         style.top = rect.bottom + 'px';
       }
@@ -56439,7 +56511,7 @@ const ESelectvue_type_script_setup_true_lang_js_hoisted_14 = {
 
     // Watch effects
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, newVal => {
-      if (newVal !== null && newVal !== undefined) {
+      if (newVal !== null && newVal !== undefined && newVal !== '') {
         validate();
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
           calculateWidthLabelSelected();
@@ -62571,7 +62643,15 @@ const ExosLibraryComponents = {
         }
       }
     }
+    let defaultSelectConfig = {
+      dropdownAppendTo: null
+    };
+    let selectConfig = defaultSelectConfig;
+    if (options.select?.dropdownAppendTo) {
+      selectConfig.dropdownAppendTo = options.select.dropdownAppendTo;
+    }
     app.provide('$exosDialogConfig', dialogConfig);
+    app.provide('$exosSelectConfig', selectConfig);
     app.provide('$loading', loading);
     app.provide('$notify', notify);
     app.provide('$showMessage', message);