lau-ecom-design-system 1.0.21 → 1.0.22

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
 import {
-  LauEcomUpcIconCheck as LauEcomUpcIconSearch,
+  LauEcomUpcIconSearch,
   LauEcomCoreIconNavClose as LauEcomUpcIconClose,
 } from "../LauEcomIcon";
 
@@ -13,6 +13,11 @@ interface Props {
   isDisabled?: boolean;
   modelValue?: string;
   forceClose?: boolean;
+  buttonColorClass?: string;
+  buttonTextColorClass?: string;
+  buttonClass?: string;
+  inputClass?: string;
+  containerClass?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,6 +25,11 @@ const props = withDefaults(defineProps<Props>(), {
   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
@@ -33,6 +43,7 @@ console.log('🔍 InputSearch Props:', {
 const emit = defineEmits({
   "update:modelValue": (value: string) => true,
   "search": (value: string) => true,
+  "click:search-icon": () => true
 });
 
 const searchQuery = ref(props.modelValue);
@@ -49,6 +60,7 @@ const handleSearch = () => {
   if (searchQuery.value && searchQuery.value.trim()) {
     emit("search", searchQuery.value);
     emit("update:modelValue", searchQuery.value);
+    emit("click:search-icon");
     closeSearch();
   }
 };
@@ -88,9 +100,9 @@ const handleFocus = () => {
 
 const containerClasses = computed(() => {
   const classes = [
-    "dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out",
+    "dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out dsEcom-relative",
     {
-      "dsEcom-relative dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
+      "dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
     }
   ];
   console.log('🔍 Container classes updated:', { isExpanded: isExpanded.value });
@@ -111,9 +123,24 @@ 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 });
+    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';
   }
 };
 
@@ -154,36 +181,77 @@ watch(() => props.modelValue, (newValue) => {
     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"
+      :class="[containerClasses, props.containerClass]"
       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 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>
@@ -191,8 +259,8 @@ watch(() => props.modelValue, (newValue) => {
     <!-- 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' }"
+      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">
@@ -201,27 +269,38 @@ watch(() => props.modelValue, (newValue) => {
           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"
+          :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-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-flex dsEcom-gap-2">
+        <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-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300"
+            :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
-            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"
+            :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" />
+            <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
           </button>
         </div>
       </div>