lau-ecom-design-system 1.0.21 → 1.0.23

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -1,244 +1,511 @@
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
-import {
-  LauEcomUpcIconCheck as 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;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "Quiero aprender...",
-  isDisabled: false,
-  modelValue: "",
-  forceClose: false,
-});
-
-// 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,
-});
-
-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);
-    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 scrollTop = window.pageYOffset || document.documentElement.scrollTop;
-    expandedContainer.value.style.top = `${rect.top + scrollTop}px`;
-    console.log('🔍 Updated expanded position:', { top: rect.top + scrollTop });
-  }
-};
-
-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;
-  }
-});
-</script>
-
-<template>
-  <div class="dsEcom-relative">
-    <div 
-      :class="containerClasses"
-      ref="originalContainer"
-    >
-      <input
-        v-model="searchQuery"
-        type="text"
-        :placeholder="placeholder"
-        :disabled="isDisabled"
-        class="lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60"
-        @focus="handleFocus"
-        @input="handleInput"
-        @keyup.enter="handleSearch"
-        :class="{ 'dsEcom-invisible': isExpanded }"
-      />
-      <button
-        v-if="searchQuery.length >= 3 && !isExpanded"
-        @click="handleSearch"
-        class="dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
-      >
-        <LauEcomUpcIconSearch width="20" height="20" />
-      </button>
-    </div>
-
-    <!-- Overlay -->
-    <div
-      :class="overlayClasses"
-      @click="closeSearch"
-    ></div>
-
-    <!-- Versión expandida -->
-    <div 
-      v-show="isExpanded"
-      class="dsEcom-fixed dsEcom-w-[656px] dsEcom-left-1/2 dsEcom-transform -dsEcom-translate-x-1/2 dsEcom-z-50"
-      :style="{ top: isExpanded ? `${originalContainer?.getBoundingClientRect().top}px` : '0' }"
-      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-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-bg-white"
-          @input="handleInput"
-          @keyup.enter="handleSearch"
-          autofocus
-        />
-
-        <div class="dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-flex dsEcom-gap-2">
-          <button
-            v-if="searchQuery.length >= 3"
-            @click="clearSearch"
-            class="dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300"
-          >
-            <LauEcomUpcIconClose width="16" height="16" />
-          </button>
-
-          <button
-            v-if="searchQuery.length >= 3"
-            @click="handleSearch"
-            class="dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
-          >
-            <LauEcomUpcIconSearch width="20" height="20" />
-          </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";
+
+// Log de versión del componente
+console.log('🔍 InputSearch Version: 1.0.25 - Debug Mode');
+
+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: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70",
+  buttonTextColorClass: "dsEcom-text-white",
+  buttonClass: "",
+  inputClass: "dsEcom-h-10 dsEcom-rounded-lg",
+  containerClass: "",
+  expandedWidth: "50vw",
+  isMobileSearch: false,
+  arrowColorClass: "dsEcom-text-neutral-100",
+  arrowButtonClass: "",
+  mobileInputWidth: "240px",
+  mobileInputHeight: "40px",
+  mobilePanelClass: "dsEcom-bg-white",
+  expandedBackgroundClass: "dsEcom-bg-white",
+  overlayClass: "dsEcom-bg-black dsEcom-opacity-50"
+});
+
+// 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 isMobileView = ref(false);
+const isMobileSearchOpen = 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-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`;
+    }
+
+    // Log para debugging
+    console.log('🔍 Expanded position updated:', {
+      top: topPosition,
+      left: leftPosition,
+      width: expandedContainer.value.style.width,
+      originalLeft: rect.left,
+      viewportWidth,
+      originalWidth: rect.width
+    });
+  }
+};
+
+onMounted(() => {
+  console.log('🔍 Component mounted with props:', {
+    buttonColorClass: props.buttonColorClass,
+    buttonTextColorClass: props.buttonTextColorClass,
+    arrowColorClass: props.arrowColorClass,
+    isMobileSearch: props.isMobileSearch,
+    mobileInputWidth: props.mobileInputWidth,
+    mobileInputHeight: props.mobileInputHeight
+  });
+  checkMobileView();
+  window.addEventListener('resize', updateExpandedPosition);
+  window.addEventListener('resize', checkMobileView);
+});
+
+onBeforeUnmount(() => {
+  console.log('🔍 Component will unmount');
+  window.removeEventListener('resize', updateExpandedPosition);
+  window.removeEventListener('resize', checkMobileView);
+});
+
+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
+  ];
+});
+
+const checkMobileView = () => {
+  const wasMobile = isMobileView.value;
+  isMobileView.value = window.innerWidth < 768;
+  if (wasMobile !== isMobileView.value) {
+    console.log('🔍 Mobile view changed:', {
+      isMobileView: isMobileView.value,
+      width: window.innerWidth,
+      buttonColorClass: props.buttonColorClass,
+      buttonTextColorClass: props.buttonTextColorClass
+    });
+  }
+};
+
+const handleMobileSearchClick = () => {
+  console.log('🔍 Mobile Search Click:', {
+    buttonColorClass: props.buttonColorClass,
+    buttonTextColorClass: props.buttonTextColorClass,
+    arrowColorClass: props.arrowColorClass,
+    isMobileView: isMobileView.value
+  });
+  isMobileSearchOpen.value = true;
+  nextTick(() => {
+    if (expandedContainer.value) {
+      const input = expandedContainer.value.querySelector('input');
+      input?.focus();
+    }
+  });
+};
+
+const handleMobileSearchClose = () => {
+  console.log('🔍 Mobile Search Close:', {
+    buttonColorClass: props.buttonColorClass,
+    buttonTextColorClass: props.buttonTextColorClass,
+    arrowColorClass: props.arrowColorClass
+  });
+  isMobileSearchOpen.value = false;
+  searchQuery.value = '';
+  emit('update:modelValue', '');
+};
+
+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();
+};
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <!-- Versión móvil - Solo botón de búsqueda -->
+    <button
+      v-if="isMobileView && !isMobileSearchOpen"
+      @click="handleMobileSearchClick"
+      class="dsEcom-p-2 dsEcom-rounded-lg"
+      :class="[buttonColorClass]"
+    >
+      <LauEcomUpcIconSearch 
+        width="24" 
+        height="24" 
+        :class="[buttonTextColorClass]"
+      />
+    </button>
+
+    <!-- Capa blanca móvil -->
+    <div
+      v-if="isMobileView && isMobileSearchOpen"
+      class="dsEcom-fixed dsEcom-inset-0 dsEcom-z-50"
+      :class="[mobilePanelClass]"
+    >
+      <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">
+          <button
+            @click="handleMobileSearchClose"
+            class="dsEcom-p-2 dsEcom-rounded-lg"
+            :class="[arrowButtonClass]"
+          >
+            <LauEcomUpcIconNavArrow 
+              width="24" 
+              height="24" 
+              class="dsEcom-transform dsEcom-rotate-[-90deg]"
+              :class="[arrowColorClass]"
+              color="currentColor"
+            />
+          </button>
+
+          <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-0 dsEcom-flex-1">
+            <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"
+              @input="handleInput"
+              @keyup.enter="handleMobileSearch"
+            />
+            <button
+              @click="handleMobileSearch"
+              :style="{ height: props.mobileInputHeight }"
+              :class="[
+                'dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0',
+                buttonColorClass,
+                buttonTextColorClass
+              ]"
+            >
+              <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+            </button>
+          </div>
+
+          <button
+            v-if="searchQuery.length >= 3"
+            @click="handleMobileClear"
+            class="dsEcom-p-2 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80"
+          >
+            <LauEcomUpcIconClose width="16" height="16" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Versión desktop -->
+    <div v-if="!isMobileView">
+      <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-shadow-lg dsEcom-overflow-hidden"
+        :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',
+              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;
+}
+
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>
+