lau-ecom-design-system 1.0.23 → 1.0.26

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.23",
+  "version": "1.0.26",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",
@@ -30,7 +30,6 @@
     "watch": "rollup -c -w"
   },
   "dependencies": {
-    "lau-ecom-design-system": "file:lau-ecom-design-system-1.0.22.tgz",
     "vue": "^3.5.12"
   },
   "devDependencies": {

package/src/components/LauEcomIcon/LauEcomUpcIconClose.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+</template> 

package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue

@@ -16,7 +16,7 @@ withDefaults(
     :width="width"
     :height="height"
     viewBox="0 0 16 16"
-    fill="none"
+    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path

package/src/components/LauEcomIcon/LauEcomUpcIconSearch.vue

@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 withDefaults(
   defineProps<{
-    color?: string;
     width?: string;
     height?: string;
   }>(),
   {
-    color: "currentColor",
     width: "24",
     height: "24",
   },
@@ -19,21 +17,13 @@ withDefaults(
     :height="height"
     viewBox="0 0 24 24"
     fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M21 21L16.65 16.65"
-      :stroke="color"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
 </template> 

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -6,9 +6,6 @@ import {
   LauEcomUpcIconNavArrow,
 } from "../LauEcomIcon";
 
-// Log de versión del componente
-console.log('🔍 InputSearch Version: 1.0.25 - Debug Mode');
-
 interface Props {
   placeholder?: string;
   isDisabled?: boolean;
@@ -35,30 +32,22 @@ const props = withDefaults(defineProps<Props>(), {
   isDisabled: false,
   modelValue: "",
   forceClose: false,
-  buttonColorClass: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70",
-  buttonTextColorClass: "dsEcom-text-white",
+  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: "dsEcom-text-neutral-100",
+  arrowColorClass: "text-neutral-100",
   arrowButtonClass: "",
   mobileInputWidth: "240px",
   mobileInputHeight: "40px",
-  mobilePanelClass: "dsEcom-bg-white",
+  mobilePanelClass: "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,
@@ -73,12 +62,6 @@ 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);
@@ -88,47 +71,33 @@ const handleSearch = () => {
 };
 
 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 = [
+  return [
     "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(() => [
@@ -175,103 +144,14 @@ const updateExpandedPosition = () => {
       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) {
@@ -282,14 +162,19 @@ const handleMobileSearchClick = () => {
 };
 
 const handleMobileSearchClose = () => {
-  console.log('🔍 Mobile Search Close:', {
-    buttonColorClass: props.buttonColorClass,
-    buttonTextColorClass: props.buttonTextColorClass,
-    arrowColorClass: props.arrowColorClass
-  });
-  isMobileSearchOpen.value = false;
-  searchQuery.value = '';
-  emit('update:modelValue', '');
+  // 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 = () => {
@@ -304,15 +189,44 @@ const handleMobileSearch = () => {
 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-if="isMobileView && !isMobileSearchOpen"
+      v-show="isMobileView && !isMobileSearchOpen"
       @click="handleMobileSearchClick"
-      class="dsEcom-p-2 dsEcom-rounded-lg"
+      class="dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
       :class="[buttonColorClass]"
     >
       <LauEcomUpcIconSearch 
@@ -324,28 +238,32 @@ const handleMobileClear = () => {
 
     <!-- Capa blanca móvil -->
     <div
-      v-if="isMobileView && isMobileSearchOpen"
-      class="dsEcom-fixed dsEcom-inset-0 dsEcom-z-50"
+      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">
+        <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"
+            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-[-90deg]"
+              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">
+          <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-0 dsEcom-flex-1 dsEcom-transform-gpu">
             <input
               v-model="searchQuery"
               type="text"
@@ -355,7 +273,7 @@ const handleMobileClear = () => {
                 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"
+              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"
             />
@@ -363,7 +281,7 @@ const handleMobileClear = () => {
               @click="handleMobileSearch"
               :style="{ height: props.mobileInputHeight }"
               :class="[
-                'dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0',
+                'dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu',
                 buttonColorClass,
                 buttonTextColorClass
               ]"
@@ -373,9 +291,9 @@ const handleMobileClear = () => {
           </div>
 
           <button
-            v-if="searchQuery.length >= 3"
+            v-show="searchQuery.length >= 3"
             @click="handleMobileClear"
-            class="dsEcom-p-2 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80"
+            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>
@@ -384,7 +302,7 @@ const handleMobileClear = () => {
     </div>
 
     <!-- Versión desktop -->
-    <div v-if="!isMobileView">
+    <div v-show="!isMobileView" class="dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu">
       <div 
         :class="[containerClasses, props.containerClass]"
         ref="originalContainer"
@@ -396,7 +314,7 @@ const handleMobileClear = () => {
             :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',
+              '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 }
             ]"
@@ -436,14 +354,17 @@ const handleMobileClear = () => {
       <!-- Overlay -->
       <div
         v-show="isExpanded"
-        :class="overlayClasses"
+        :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"
+        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
@@ -457,7 +378,7 @@ const handleMobileClear = () => {
             :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',
+              '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"
@@ -499,12 +420,26 @@ const handleMobileClear = () => {
 <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>