lau-ecom-design-system 1.0.22 → 1.0.26

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -1,323 +1,446 @@
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
-import {
-  LauEcomUpcIconSearch,
-  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
-} from "../LauEcomIcon";
-
-// Log de versión del componente
-console.log('🔍 InputSearch Version: 1.0.20 - Debug Mode');
-
-interface Props {
-  placeholder?: string;
-  isDisabled?: boolean;
-  modelValue?: string;
-  forceClose?: boolean;
-  buttonColorClass?: string;
-  buttonTextColorClass?: string;
-  buttonClass?: string;
-  inputClass?: string;
-  containerClass?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "Quiero aprender...",
-  isDisabled: false,
-  modelValue: "",
-  forceClose: false,
-  buttonColorClass: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70",
-  buttonTextColorClass: "dsEcom-text-white",
-  buttonClass: "",
-  inputClass: "dsEcom-h-10 dsEcom-rounded-lg",
-  containerClass: ""
-});
-
-// Log de props iniciales
-console.log('🔍 InputSearch Props:', {
-  placeholder: props.placeholder,
-  isDisabled: props.isDisabled,
-  modelValue: props.modelValue,
-  forceClose: props.forceClose
-});
-
-const emit = defineEmits({
-  "update:modelValue": (value: string) => true,
-  "search": (value: string) => true,
-  "click:search-icon": () => true
-});
-
-const searchQuery = ref(props.modelValue);
-const isExpanded = ref(false);
-const showOverlay = ref(false);
-
-const handleSearch = () => {
-  console.log('🔍 Search triggered:', { 
-    query: searchQuery.value,
-    isExpanded: isExpanded.value,
-    showOverlay: showOverlay.value
-  });
-  
-  if (searchQuery.value && searchQuery.value.trim()) {
-    emit("search", searchQuery.value);
-    emit("update:modelValue", searchQuery.value);
-    emit("click:search-icon");
-    closeSearch();
-  }
-};
-
-const handleInput = () => {
-  console.log('🔍 Input changed:', { 
-    value: searchQuery.value,
-    length: searchQuery.value.length,
-    isExpanded: isExpanded.value
-  });
-  emit("update:modelValue", searchQuery.value);
-};
-
-const clearSearch = () => {
-  console.log('🔍 Clear search triggered');
-  searchQuery.value = "";
-  emit("update:modelValue", "");
-};
-
-const closeSearch = () => {
-  console.log('🔍 Close search triggered');
-  showOverlay.value = false;
-  setTimeout(() => {
-    console.log('🔍 Closing search after timeout');
-    isExpanded.value = false;
-  }, 300);
-};
-
-const handleFocus = () => {
-  console.log('🔍 Focus triggered:', {
-    currentValue: searchQuery.value,
-    wasExpanded: isExpanded.value
-  });
-  isExpanded.value = true;
-  showOverlay.value = true;
-};
-
-const containerClasses = computed(() => {
-  const classes = [
-    "dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out dsEcom-relative",
-    {
-      "dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
-    }
-  ];
-  console.log('🔍 Container classes updated:', { isExpanded: isExpanded.value });
-  return classes;
-});
-
-const overlayClasses = computed(() => [
-  "dsEcom-fixed dsEcom-inset-0 dsEcom-bg-black dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40",
-  {
-    "dsEcom-opacity-50": showOverlay.value,
-    "dsEcom-opacity-0 dsEcom-pointer-events-none": !showOverlay.value
-  }
-]);
-
-const originalContainer = ref<HTMLElement | null>(null);
-const expandedContainer = ref<HTMLElement | null>(null);
-
-const updateExpandedPosition = () => {
-  if (originalContainer.value && expandedContainer.value) {
-    const rect = originalContainer.value.getBoundingClientRect();
-    const viewportHeight = window.innerHeight;
-    
-    // Si el input original está fuera de la vista (arriba o abajo), posicionamos el expandido en una posición visible
-    let topPosition;
-    if (rect.top < 0) {
-      topPosition = '20px'; // Si está arriba de la vista, lo ponemos cerca del tope
-    } else if (rect.top > viewportHeight) {
-      topPosition = '20px'; // Si está abajo de la vista, también lo ponemos cerca del tope
-    } else {
-      topPosition = `${rect.top}px`; // Si está visible, mantenemos su posición actual
-    }
-    
-    expandedContainer.value.style.position = 'fixed';
-    expandedContainer.value.style.top = topPosition;
-    expandedContainer.value.style.left = '50%';
-    expandedContainer.value.style.transform = 'translateX(-50%)';
-    expandedContainer.value.style.width = '656px';
-    expandedContainer.value.style.maxWidth = '90vw';
-  }
-};
-
-onMounted(() => {
-  console.log('🔍 Component mounted');
-  window.addEventListener('resize', updateExpandedPosition);
-});
-
-onBeforeUnmount(() => {
-  console.log('🔍 Component will unmount');
-  window.removeEventListener('resize', updateExpandedPosition);
-});
-
-watch(isExpanded, (newValue) => {
-  console.log('🔍 isExpanded changed:', { 
-    newValue,
-    searchQuery: searchQuery.value,
-    showOverlay: showOverlay.value
-  });
-  if (newValue) {
-    nextTick(updateExpandedPosition);
-  }
-});
-
-watch(() => props.forceClose, (newValue) => {
-  console.log('🔍 forceClose prop changed:', newValue);
-  if (newValue) {
-    closeSearch();
-  }
-});
-
-watch(() => props.modelValue, (newValue) => {
-  console.log('🔍 modelValue prop changed:', {
-    newValue,
-    currentSearchQuery: searchQuery.value
-  });
-  if (newValue !== searchQuery.value) {
-    searchQuery.value = newValue;
-  }
-});
-
-const buttonClasses = computed(() => {
-  const defaultClasses = "dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-p-2 dsEcom-rounded-r-lg dsEcom-transition-all dsEcom-duration-300";
-  
-  // Si hay buttonClass, usamos esas clases directamente
-  if (props.buttonClass) {
-    return [defaultClasses, props.buttonClass];
-  }
-  
-  // Si no, usamos las clases de color tradicionales
-  return [
-    defaultClasses,
-    props.buttonColorClass,
-    props.buttonTextColorClass
-  ];
-});
-</script>
-
-<template>
-  <div class="dsEcom-relative">
-    <div 
-      :class="[containerClasses, props.containerClass]"
-      ref="originalContainer"
-    >
-      <div class="dsEcom-relative" :class="{ 'dsEcom-invisible': isExpanded }">
-        <input
-          v-model="searchQuery"
-          type="text"
-          :placeholder="placeholder"
-          :disabled="isDisabled"
-          :class="[
-            'lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60',
-            props.inputClass,
-            { 'dsEcom-opacity-0': isExpanded }
-          ]"
-          @focus="handleFocus"
-          @input="handleInput"
-          @keyup.enter="handleSearch"
-        />
-        <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
-          <button
-            v-if="searchQuery.length >= 3"
-            @click="clearSearch"
-            :class="[
-              'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
-              props.inputClass
-            ]"
-          >
-            <LauEcomUpcIconClose width="16" height="16" />
-          </button>
-
-          <button
-            @click="handleSearch"
-            :class="[
-              'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
-              props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-r-lg',
-              props.buttonColorClass,
-              props.buttonTextColorClass,
-              'dsEcom-border-0'
-            ]"
-            style="margin: 1px; height: calc(100% - 2px);"
-          >
-            <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Overlay -->
-    <div
-      v-show="isExpanded"
-      :class="overlayClasses"
-      @click="closeSearch"
-    ></div>
-
-    <!-- Versión expandida -->
-    <div 
-      v-show="isExpanded"
-      class="dsEcom-fixed dsEcom-z-50 dsEcom-bg-white dsEcom-shadow-lg dsEcom-overflow-hidden"
-      :class="[props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-lg']"
-      ref="expandedContainer"
-    >
-      <div class="dsEcom-relative">
-        <input
-          v-model="searchQuery"
-          type="text"
-          :placeholder="placeholder"
-          :disabled="isDisabled"
-          :class="[
-            'lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60',
-            props.inputClass
-          ]"
-          @input="handleInput"
-          @keyup.enter="handleSearch"
-          autofocus
-        />
-        <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
-          <button
-            v-if="searchQuery.length >= 3"
-            @click="clearSearch"
-            :class="[
-              'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
-              props.inputClass
-            ]"
-          >
-            <LauEcomUpcIconClose width="16" height="16" />
-          </button>
-
-          <button
-            @click="handleSearch"
-            :class="[
-              'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
-              { 'dsEcom-rounded-r-lg': !props.inputClass?.includes('rounded') },
-              props.buttonColorClass,
-              props.buttonTextColorClass,
-              'dsEcom-border-0'
-            ]"
-            style="margin: 1px; height: calc(100% - 2px);"
-          >
-            <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.lau-ecom-input {
-  transition: all 0.3s ease-in-out;
-}
-
-.dsEcom-transform-gpu {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-}
-</style>
-
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import {
+  LauEcomUpcIconSearch,
+  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
+  LauEcomUpcIconNavArrow,
+} from "../LauEcomIcon";
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: string;
+  forceClose?: boolean;
+  buttonColorClass?: string;
+  buttonTextColorClass?: string;
+  buttonClass?: string;
+  inputClass?: string;
+  containerClass?: string;
+  expandedWidth?: string;
+  isMobileSearch?: boolean;
+  arrowColorClass?: string;
+  arrowButtonClass?: string;
+  mobileInputWidth?: string;
+  mobileInputHeight?: string;
+  mobilePanelClass?: string;
+  expandedBackgroundClass?: string;
+  overlayClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Quiero aprender...",
+  isDisabled: false,
+  modelValue: "",
+  forceClose: false,
+  buttonColorClass: "bg-base-color-primary-20",
+  buttonTextColorClass: "text-base-color-primary-60",
+  buttonClass: "",
+  inputClass: "dsEcom-h-10 dsEcom-rounded-lg",
+  containerClass: "",
+  expandedWidth: "50vw",
+  isMobileSearch: false,
+  arrowColorClass: "text-neutral-100",
+  arrowButtonClass: "",
+  mobileInputWidth: "240px",
+  mobileInputHeight: "40px",
+  mobilePanelClass: "bg-white",
+  expandedBackgroundClass: "dsEcom-bg-white",
+  overlayClass: "dsEcom-bg-black dsEcom-opacity-50"
+});
+
+const emit = defineEmits({
+  "update:modelValue": (value: string) => true,
+  "search": (value: string) => true,
+  "click:search-icon": () => true
+});
+
+const searchQuery = ref(props.modelValue);
+const isExpanded = ref(false);
+const showOverlay = ref(false);
+
+const isMobileView = ref(false);
+const isMobileSearchOpen = ref(false);
+
+const handleSearch = () => {
+  if (searchQuery.value && searchQuery.value.trim()) {
+    emit("search", searchQuery.value);
+    emit("update:modelValue", searchQuery.value);
+    emit("click:search-icon");
+    closeSearch();
+  }
+};
+
+const handleInput = () => {
+  emit("update:modelValue", searchQuery.value);
+};
+
+const clearSearch = () => {
+  searchQuery.value = "";
+  emit("update:modelValue", "");
+};
+
+const closeSearch = () => {
+  showOverlay.value = false;
+  setTimeout(() => {
+    isExpanded.value = false;
+  }, 300);
+};
+
+const handleFocus = () => {
+  isExpanded.value = true;
+  showOverlay.value = true;
+};
+
+const containerClasses = computed(() => {
+  return [
+    "dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out dsEcom-relative",
+    {
+      "dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
+    }
+  ];
+});
+
+const overlayClasses = computed(() => [
+  "dsEcom-fixed dsEcom-inset-0 dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40",
+  props.overlayClass,
+  {
+    "dsEcom-opacity-100": showOverlay.value,
+    "dsEcom-opacity-0 dsEcom-pointer-events-none": !showOverlay.value
+  }
+]);
+
+const originalContainer = ref<HTMLElement | null>(null);
+const expandedContainer = ref<HTMLElement | null>(null);
+
+const updateExpandedPosition = () => {
+  if (originalContainer.value && expandedContainer.value) {
+    const rect = originalContainer.value.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    
+    let topPosition;
+    if (rect.top < 0) {
+      topPosition = '20px';
+    } else if (rect.top > viewportHeight) {
+      topPosition = '20px';
+    } else {
+      topPosition = `${rect.top}px`;
+    }
+
+    // Mantenemos la posición original del input
+    const leftPosition = `${rect.left}px`;
+    
+    expandedContainer.value.style.position = 'fixed';
+    expandedContainer.value.style.top = topPosition;
+    expandedContainer.value.style.left = leftPosition;
+    expandedContainer.value.style.transform = 'none';
+    expandedContainer.value.style.width = props.expandedWidth;
+    expandedContainer.value.style.maxWidth = '90vw';
+
+    // Ajustamos si se sale por la derecha
+    const expandedWidth = parseInt(props.expandedWidth);
+    if (rect.left + expandedWidth > viewportWidth) {
+      // Si se sale por la derecha, ajustamos el ancho para que quepa
+      const availableWidth = viewportWidth - rect.left - 32; // 32px de margen
+      expandedContainer.value.style.width = `${availableWidth}px`;
+    }
+  }
+};
+
+const checkMobileView = () => {
+  isMobileView.value = window.innerWidth < 768;
+};
+
+const handleMobileSearchClick = () => {
+  isMobileSearchOpen.value = true;
+  nextTick(() => {
+    if (expandedContainer.value) {
+      const input = expandedContainer.value.querySelector('input');
+      input?.focus();
+    }
+  });
+};
+
+const handleMobileSearchClose = () => {
+  // Primero ocultamos con la transición
+  const panel = document.querySelector('.dsEcom-fixed') as HTMLElement;
+  if (panel) {
+    panel.style.opacity = '0';
+    panel.style.transform = 'translateY(100%)';
+  }
+  
+  // Luego actualizamos el estado después de la transición
+  setTimeout(() => {
+    isMobileSearchOpen.value = false;
+    searchQuery.value = '';
+    emit('update:modelValue', '');
+  }, 300);
+};
+
+const handleMobileSearch = () => {
+  if (searchQuery.value && searchQuery.value.trim()) {
+    emit("search", searchQuery.value);
+    emit("update:modelValue", searchQuery.value);
+    emit("click:search-icon");
+    handleMobileSearchClose();
+  }
+};
+
+const handleMobileClear = () => {
+  clearSearch();
+};
+
+onMounted(() => {
+  checkMobileView();
+  window.addEventListener('resize', updateExpandedPosition);
+  window.addEventListener('resize', checkMobileView);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateExpandedPosition);
+  window.removeEventListener('resize', checkMobileView);
+});
+
+watch(isExpanded, (newValue) => {
+  if (newValue) {
+    nextTick(updateExpandedPosition);
+  }
+});
+
+watch(() => props.forceClose, (newValue) => {
+  if (newValue) {
+    closeSearch();
+  }
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (newValue !== searchQuery.value) {
+    searchQuery.value = newValue;
+  }
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <!-- Versión móvil - Solo botón de búsqueda -->
+    <button
+      v-show="isMobileView && !isMobileSearchOpen"
+      @click="handleMobileSearchClick"
+      class="dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+      :class="[buttonColorClass]"
+    >
+      <LauEcomUpcIconSearch 
+        width="24" 
+        height="24" 
+        :class="[buttonTextColorClass]"
+      />
+    </button>
+
+    <!-- Capa blanca móvil -->
+    <div
+      v-show="isMobileView && isMobileSearchOpen"
+      class="dsEcom-fixed dsEcom-inset-0 dsEcom-z-50 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+      :class="[mobilePanelClass]"
+      :style="{
+        opacity: isMobileSearchOpen ? '1' : '0',
+        transform: isMobileSearchOpen ? 'translateY(0)' : 'translateY(100%)'
+      }"
+    >
+      <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-p-4">
+        <!-- Input y botones -->
+        <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-flex-1 dsEcom-transform-gpu">
+          <button
+            @click="handleMobileSearchClose"
+            class="dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+            :class="[arrowButtonClass]"
+          >
+            <LauEcomUpcIconNavArrow 
+              width="24" 
+              height="24" 
+              class="dsEcom-transform dsEcom-rotate-90 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+              :class="[arrowColorClass]"
+              color="currentColor"
+            />
+          </button>
+
+          <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-0 dsEcom-flex-1 dsEcom-transform-gpu">
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              :style="{
+                width: props.mobileInputWidth,
+                height: props.mobileInputHeight
+              }"
+              class="lau-ecom-input dsEcom-pl-4 dsEcom-pr-4 dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-l-lg dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-flex-1 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+              @input="handleInput"
+              @keyup.enter="handleMobileSearch"
+            />
+            <button
+              @click="handleMobileSearch"
+              :style="{ height: props.mobileInputHeight }"
+              :class="[
+                'dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu',
+                buttonColorClass,
+                buttonTextColorClass
+              ]"
+            >
+              <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+            </button>
+          </div>
+
+          <button
+            v-show="searchQuery.length >= 3"
+            @click="handleMobileClear"
+            class="dsEcom-p-2 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+          >
+            <LauEcomUpcIconClose width="16" height="16" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Versión desktop -->
+    <div v-show="!isMobileView" class="dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu">
+      <div 
+        :class="[containerClasses, props.containerClass]"
+        ref="originalContainer"
+      >
+        <div class="dsEcom-relative" :class="{ 'dsEcom-invisible': isExpanded }">
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="placeholder"
+            :disabled="isDisabled"
+            :class="[
+              'lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-transition-all dsEcom-duration-300',
+              props.inputClass,
+              { 'dsEcom-opacity-0': isExpanded }
+            ]"
+            @focus="handleFocus"
+            @input="handleInput"
+            @keyup.enter="handleSearch"
+          />
+          <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
+            <button
+              v-if="searchQuery.length >= 3"
+              @click="clearSearch"
+              :class="[
+                'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
+                props.inputClass
+              ]"
+            >
+              <LauEcomUpcIconClose width="16" height="16" />
+            </button>
+
+            <button
+              @click="handleSearch"
+              :class="[
+                'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
+                props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-r-lg',
+                props.buttonColorClass,
+                props.buttonTextColorClass,
+                'dsEcom-border-0'
+              ]"
+              style="margin: 1px; height: calc(100% - 2px);"
+            >
+              <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Overlay -->
+      <div
+        v-show="isExpanded"
+        :class="[
+          overlayClasses,
+          'dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out'
+        ]"
+        @click="closeSearch"
+      ></div>
+
+      <!-- Versión expandida -->
+      <div 
+        v-show="isExpanded"
+        class="dsEcom-fixed dsEcom-z-50 dsEcom-shadow-lg dsEcom-overflow-hidden dsEcom-transition-all dsEcom-duration-300"
+        :class="[
+          props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-lg',
+          expandedBackgroundClass
+        ]"
+        ref="expandedContainer"
+      >
+        <div class="dsEcom-relative">
+          <input
+            v-model="searchQuery"
+            type="text"
+            :placeholder="placeholder"
+            :disabled="isDisabled"
+            :class="[
+              'lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-pl-4 dsEcom-pr-24 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-transition-all dsEcom-duration-300',
+              props.inputClass
+            ]"
+            @input="handleInput"
+            @keyup.enter="handleSearch"
+            autofocus
+          />
+          <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
+            <button
+              v-if="searchQuery.length >= 3"
+              @click="clearSearch"
+              :class="[
+                'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
+                props.inputClass
+              ]"
+            >
+              <LauEcomUpcIconClose width="16" height="16" />
+            </button>
+
+            <button
+              @click="handleSearch"
+              :class="[
+                'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
+                { 'dsEcom-rounded-r-lg': !props.inputClass?.includes('rounded') },
+                props.buttonColorClass,
+                props.buttonTextColorClass,
+                'dsEcom-border-0'
+              ]"
+              style="margin: 1px; height: calc(100% - 2px);"
+            >
+              <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-input {
+  transition: all 0.3s ease-in-out;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  will-change: transform, opacity;
+}
+
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  will-change: transform, opacity;
+}
+
+/* Agregamos transiciones específicas para móvil */
+@media (max-width: 768px) {
+  .dsEcom-fixed {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    will-change: transform, opacity;
+  }
+}
+</style>
+