lau-ecom-design-system 1.0.26 → 1.0.27

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -1,446 +1,154 @@
-<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>
-
-        
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import { LauEcomUpcIconSearch, LauEcomUpcIconClose } from '../LauEcomIcon';
+
+interface Props {
+  modelValue?: string;
+  placeholder?: string;
+  width?: string;
+  inputClass?: string;
+  inputBorderClass?: string;
+  inputBgClass?: string;
+  inputTextClass?: string;
+  inputFocusClass?: string;
+  
+  // Props para el icono de búsqueda
+  searchIconClass?: string;
+  searchIconBgClass?: string;
+  searchIconSize?: {
+    width: string;
+    height: string;
+  };
+  
+  // Props para el icono de limpiar
+  clearIconClass?: string;
+  clearIconBgClass?: string;
+  clearIconSize?: {
+    width: string;
+    height: string;
+  };
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  placeholder: 'Buscar...',
+  width: '100%',
+  inputClass: 'dsEcom-rounded-lg',
+  inputBorderClass: 'dsEcom-border dsEcom-border-neutral-80',
+  inputBgClass: 'dsEcom-bg-white',
+  inputTextClass: 'dsEcom-text-neutral-900',
+  inputFocusClass: 'focus:dsEcom-ring-1 focus:dsEcom-ring-primary-60 focus:dsEcom-border-primary-60',
+  
+  searchIconClass: 'dsEcom-text-neutral-60',
+  searchIconBgClass: 'dsEcom-bg-transparent',
+  searchIconSize: () => ({ width: '20', height: '20' }),
+  
+  clearIconClass: 'dsEcom-text-neutral-60',
+  clearIconBgClass: 'dsEcom-bg-transparent',
+  clearIconSize: () => ({ width: '20', height: '20' })
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void;
+  (e: 'search', value: string): void;
+  (e: 'clear'): void;
+  (e: 'focus', event: FocusEvent): void;
+  (e: 'blur', event: FocusEvent): void;
+}>();
+
+const inputValue = ref(props.modelValue);
+
+const inputClasses = computed(() => [
+  'dsEcom-w-full',
+  'dsEcom-py-2 dsEcom-pl-4 dsEcom-pr-12',
+  'dsEcom-transition-all dsEcom-duration-300',
+  props.inputClass,
+  props.inputBorderClass,
+  props.inputBgClass,
+  props.inputTextClass,
+  'focus:dsEcom-outline-none',
+  props.inputFocusClass
+]);
+
+const handleInput = (event: Event) => {
+  const value = (event.target as HTMLInputElement).value;
+  inputValue.value = value;
+  emit('update:modelValue', value);
+};
+
+const handleClear = () => {
+  inputValue.value = '';
+  emit('update:modelValue', '');
+  emit('clear');
+};
+
+const handleKeyUp = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && inputValue.value) {
+    emit('search', inputValue.value);
+  }
+};
+</script>
+
+<template>
+  <div 
+    class="dsEcom-relative dsEcom-inline-block"
+    :style="{ width }"
+  >
+    <input
+      type="text"
+      v-model="inputValue"
+      :placeholder="placeholder"
+      :class="inputClasses"
+      @input="handleInput"
+      @keyup="handleKeyUp"
+      @focus="(e) => emit('focus', e)"
+      @blur="(e) => emit('blur', e)"
+    />
+    
+    <!-- Botón de limpiar -->
+    <button
+      v-if="inputValue"
+      type="button"
+      @click="handleClear"
+      :class="[
+        'dsEcom-absolute dsEcom-right-8 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2',
+        'dsEcom-p-1 dsEcom-rounded-full dsEcom-transition-colors dsEcom-duration-300',
+        clearIconBgClass,
+        'hover:dsEcom-opacity-80'
+      ]"
+    >
+      <LauEcomUpcIconClose
+        :width="clearIconSize.width"
+        :height="clearIconSize.height"
+        :class="[clearIconClass, 'dsEcom-transition-colors dsEcom-duration-300']"
+      />
+    </button>
+    
+    <!-- Icono de búsqueda -->
+    <button
+      type="button"
+      :class="[
+        'dsEcom-absolute dsEcom-right-0 dsEcom-top-0 dsEcom-bottom-0',
+        'dsEcom-flex dsEcom-items-center dsEcom-justify-center',
+        'dsEcom-px-4',
+        'dsEcom-transition-colors dsEcom-duration-300',
+        'dsEcom-rounded-r-lg',
+        searchIconBgClass,
+        'hover:dsEcom-opacity-80'
+      ]"
+      @click="$emit('search', inputValue)"
+    >
+      <LauEcomUpcIconSearch
+        :width="searchIconSize.width"
+        :height="searchIconSize.height"
+        :class="[searchIconClass, 'dsEcom-transition-colors dsEcom-duration-300']"
+      />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.dsEcom-transform {
+  transform: translateY(-50%);
+}
+</style>