lau-ecom-design-system 1.0.27 → 1.0.29

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -85,6 +85,8 @@ const handleClear = () => {
 const handleKeyUp = (event: KeyboardEvent) => {
   if (event.key === 'Enter' && inputValue.value) {
     emit('search', inputValue.value);
+    inputValue.value = '';
+    emit('update:modelValue', '');
   }
 };
 </script>
@@ -95,8 +97,8 @@ const handleKeyUp = (event: KeyboardEvent) => {
     :style="{ width }"
   >
     <input
-      type="text"
       v-model="inputValue"
+      type="text"
       :placeholder="placeholder"
       :class="inputClasses"
       @input="handleInput"
@@ -108,14 +110,14 @@ const handleKeyUp = (event: KeyboardEvent) => {
     <!-- 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'
       ]"
+      type="button"
+      @click="handleClear"
     >
       <LauEcomUpcIconClose
         :width="clearIconSize.width"
@@ -136,7 +138,11 @@ const handleKeyUp = (event: KeyboardEvent) => {
         searchIconBgClass,
         'hover:dsEcom-opacity-80'
       ]"
-      @click="$emit('search', inputValue)"
+      @click="() => {
+        emit('search', inputValue.value);
+        inputValue.value = '';
+        emit('update:modelValue', '');
+      }"
     >
       <LauEcomUpcIconSearch
         :width="searchIconSize.width"

package/src/components/LauEcomInputSearchHeader/LauEcomInputSearchHeader.vue

@@ -1,432 +0,0 @@
-<script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
-import {
-  LauEcomUpcIconSearch,
-  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
-  LauEcomUpcIconNavArrow,
-} from "../LauEcomIcon";
-
-interface Props {
-  // Input props
-  placeholder?: string;
-  isDisabled?: boolean;
-  modelValue?: string;
-  inputWidth?: string;
-  inputHeight?: string;
-  inputClass?: string;
-  inputBorderClass?: string;
-  inputBgClass?: string;
-  inputTextClass?: string;
-
-  // Botón de búsqueda props
-  searchButtonClass?: string;
-  searchButtonBgClass?: string;
-  searchButtonTextClass?: string;
-  searchIconSize?: {
-    width: string;
-    height: string;
-  };
-  searchIconClass?: string;
-
-  // Props para versión móvil
-  mobileButtonClass?: string;
-  mobileButtonBgClass?: string;
-  mobileButtonTextClass?: string;
-  mobileIconSize?: {
-    width: string;
-    height: string;
-  };
-
-  // Props para flecha de retorno
-  arrowButtonClass?: string;
-  arrowButtonBgClass?: string;
-  arrowIconClass?: string;
-  arrowIconSize?: {
-    width: string;
-    height: string;
-  };
-
-  // Props para panel expandido
-  expandedWidth?: string;
-  expandedBgClass?: string;
-  expandedShadowClass?: string;
-
-  // Props para overlay y panel móvil
-  overlayBgClass?: string;
-  overlayOpacityClass?: string;
-  mobilePanelBgClass?: string;
-  mobilePanelClass?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: "Quiero aprender...",
-  isDisabled: false,
-  modelValue: "",
-  inputWidth: "350px",
-  inputHeight: "40px",
-  inputClass: "dsEcom-rounded-lg",
-  inputBorderClass: "dsEcom-border dsEcom-border-neutral-80",
-  inputBgClass: "dsEcom-bg-white",
-  inputTextClass: "dsEcom-text-neutral-900",
-  
-  searchButtonClass: "dsEcom-rounded-r-lg",
-  searchButtonBgClass: "bg-base-color-primary-20",
-  searchButtonTextClass: "text-base-color-primary-60",
-  searchIconSize: () => ({ width: "20", height: "20" }),
-  searchIconClass: "",
-
-  mobileButtonClass: "dsEcom-rounded-lg",
-  mobileButtonBgClass: "bg-base-color-primary-20",
-  mobileButtonTextClass: "text-base-color-primary-60",
-  mobileIconSize: () => ({ width: "24", height: "24" }),
-
-  arrowButtonClass: "dsEcom-rounded-lg",
-  arrowButtonBgClass: "bg-base-color-neutral-10",
-  arrowIconClass: "text-[#00A08C]",
-  arrowIconSize: () => ({ width: "24", height: "24" }),
-
-  expandedWidth: "800px",
-  expandedBgClass: "dsEcom-bg-white",
-  expandedShadowClass: "dsEcom-shadow-lg",
-
-  // Defaults para overlay y panel móvil
-  overlayBgClass: "dsEcom-bg-black",
-  overlayOpacityClass: "dsEcom-bg-opacity-50",
-  mobilePanelBgClass: "dsEcom-bg-white",
-  mobilePanelClass: "dsEcom-p-4"
-});
-
-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);
-
-// Añadir ref para la posición expandida
-const originalContainer = ref<HTMLElement | null>(null);
-const expandedPosition = ref({ top: 0, left: 0 });
-
-// Clases computadas
-const inputClasses = computed(() => [
-  'dsEcom-w-full dsEcom-transition-all dsEcom-duration-300',
-  props.inputClass,
-  props.inputBorderClass,
-  props.inputBgClass,
-  props.inputTextClass
-]);
-
-const searchButtonClasses = computed(() => [
-  'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
-  props.searchButtonClass,
-  props.searchButtonBgClass,
-  props.searchButtonTextClass
-]);
-
-const expandedContainerClasses = computed(() => [
-  'dsEcom-fixed dsEcom-z-50 dsEcom-overflow-hidden dsEcom-transition-all dsEcom-duration-300',
-  props.expandedBgClass,
-  props.expandedShadowClass
-]);
-
-// Manejo de posición del input expandido
-const updateExpandedPosition = () => {
-  if (originalContainer.value) {
-    const rect = originalContainer.value.getBoundingClientRect();
-    expandedPosition.value = {
-      top: rect.top,
-      left: rect.left
-    };
-  }
-};
-
-// Handlers
-const handleSearch = () => {
-  if (searchQuery.value?.trim()) {
-    emit("search", searchQuery.value);
-    emit("update:modelValue", searchQuery.value);
-    emit("click:search-icon");
-    if (isMobileView.value) {
-      handleMobileSearchClose();
-    } else {
-      closeSearch();
-    }
-  }
-};
-
-const handleInput = () => {
-  emit("update:modelValue", searchQuery.value);
-};
-
-// Modificar handleFocus
-const handleFocus = () => {
-  if (!isMobileView.value) {
-    updateExpandedPosition();
-    showOverlay.value = true;
-    isExpanded.value = true;
-  }
-};
-
-// Modificar closeSearch
-const closeSearch = () => {
-  showOverlay.value = false;
-  isExpanded.value = false;
-};
-
-const handleMobileSearchClick = () => {
-  isMobileSearchOpen.value = true;
-};
-
-const handleMobileSearchClose = () => {
-  const panel = document.querySelector('.mobile-search-panel') as HTMLElement;
-  if (panel) {
-    panel.style.transform = 'translateY(100%)';
-    panel.style.opacity = '0';
-  }
-  
-  setTimeout(() => {
-    isMobileSearchOpen.value = false;
-    searchQuery.value = '';
-    emit('update:modelValue', '');
-  }, 300);
-};
-
-// Lifecycle hooks
-onMounted(() => {
-  checkMobileView();
-  window.addEventListener('resize', checkMobileView);
-  window.addEventListener('resize', updateExpandedPosition);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', checkMobileView);
-  window.removeEventListener('resize', updateExpandedPosition);
-});
-
-const checkMobileView = () => {
-  isMobileView.value = window.innerWidth < 768;
-};
-
-watch(() => props.modelValue, (newValue) => {
-  if (newValue !== searchQuery.value) {
-    searchQuery.value = newValue;
-  }
-});
-</script>
-
-<template>
-  <div class="dsEcom-relative">
-    <!-- Versión Desktop -->
-    <div v-show="!isMobileView" class="dsEcom-transform-gpu">
-      <div 
-        ref="originalContainer"
-        :class="[
-          'dsEcom-inline-flex dsEcom-items-center dsEcom-transition-all dsEcom-duration-300',
-          isExpanded ? [
-            'dsEcom-fixed dsEcom-z-[60]',
-            expandedBgClass,
-            expandedShadowClass
-          ] : ''
-        ]"
-        :style="{
-          width: isExpanded ? props.expandedWidth : inputWidth,
-          maxWidth: isExpanded ? '90vw' : 'none',
-          top: isExpanded ? `${expandedPosition.top}px` : 'auto',
-          left: isExpanded ? `${expandedPosition.left}px` : 'auto'
-        }"
-      >
-        <div class="dsEcom-relative dsEcom-w-full">
-          <div class="dsEcom-flex dsEcom-items-center">
-            <input
-              v-model="searchQuery"
-              type="text"
-              :placeholder="placeholder"
-              :disabled="isDisabled"
-              :style="{ height: inputHeight }"
-              :class="[inputClasses, 'dsEcom-w-full dsEcom-pr-12']"
-              @focus="handleFocus"
-              @input="handleInput"
-              @keyup.enter="handleSearch"
-            />
-            <button
-              @click="handleSearch"
-              :class="[
-                searchButtonClasses,
-                'dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2 dsEcom-px-3'
-              ]"
-            >
-              <LauEcomUpcIconSearch 
-                :width="searchIconSize.width" 
-                :height="searchIconSize.height"
-                :class="searchIconClass"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Versión Mobile -->
-    <div v-show="isMobileView" class="dsEcom-transform-gpu">
-      <!-- Botón de búsqueda móvil -->
-      <button
-        v-show="!isMobileSearchOpen"
-        @click="handleMobileSearchClick"
-        :class="[
-          'dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300',
-          mobileButtonClass,
-          mobileButtonBgClass,
-          mobileButtonTextClass
-        ]"
-      >
-        <LauEcomUpcIconSearch 
-          :width="mobileIconSize.width" 
-          :height="mobileIconSize.height"
-        />
-      </button>
-
-      <!-- Panel de búsqueda móvil -->
-      <div
-        v-show="isMobileSearchOpen"
-        :class="[
-          'mobile-search-panel dsEcom-fixed dsEcom-inset-0 dsEcom-z-50',
-          mobilePanelBgClass,
-          mobilePanelClass
-        ]"
-      >
-        <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-p-4">
-          <button
-            @click="handleMobileSearchClose"
-            :class="[
-              'dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300',
-              arrowButtonClass,
-              arrowButtonBgClass
-            ]"
-          >
-            <LauEcomUpcIconNavArrow 
-              :width="arrowIconSize.width" 
-              :height="arrowIconSize.height"
-              class="dsEcom-transform dsEcom-rotate-90"
-              :class="arrowIconClass"
-            />
-          </button>
-
-          <div class="dsEcom-flex-1">
-            <div class="dsEcom-relative">
-              <input
-                v-model="searchQuery"
-                type="text"
-                :placeholder="placeholder"
-                :disabled="isDisabled"
-                :style="{ height: inputHeight }"
-                :class="[
-                  inputClasses, 
-                  'dsEcom-w-full dsEcom-pr-12 dsEcom-pl-4',
-                  'dsEcom-border dsEcom-border-neutral-200 dsEcom-rounded-lg'
-                ]"
-                @input="handleInput"
-                @keyup.enter="handleSearch"
-                autofocus
-              />
-              <button
-                @click="handleSearch"
-                :class="[
-                  searchButtonClasses,
-                  'dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2 dsEcom-px-3'
-                ]"
-              >
-                <LauEcomUpcIconSearch 
-                  :width="searchIconSize.width" 
-                  :height="searchIconSize.height"
-                  :class="searchIconClass"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Overlay (fuera del componente principal) -->
-  <Teleport to="body">
-    <Transition name="fade">
-      <div
-        v-if="showOverlay"
-        :class="[
-          'dsEcom-fixed dsEcom-inset-0 dsEcom-z-50 dsEcom-transition-opacity dsEcom-duration-300',
-          overlayBgClass,
-          overlayOpacityClass
-        ]"
-        @click="closeSearch"
-      ></div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped>
-.mobile-search-panel {
-  transform-origin: top center;
-  will-change: transform, opacity;
-  animation: slideIn 0.3s ease-out;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.dsEcom-transform-gpu {
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  perspective: 1000px;
-  will-change: transform, opacity;
-}
-
-/* Asegurarse de que el overlay cubra toda la pantalla */
-.dsEcom-fixed.dsEcom-inset-0 {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Ajustar z-index para asegurar que el overlay esté por debajo del input expandido */
-.dsEcom-z-50 {
-  z-index: 50;
-}
-
-.dsEcom-z-\[60\] {
-  z-index: 60;
-}
-
-/* Transiciones suaves */
-.dsEcom-transition-all {
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Transición para el overlay */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>