lau-ecom-design-system 1.0.23 → 1.0.26

package/src/components/LauEcomInputSearchHeader/LauEcomInputSearchHeaderDesktop.vue

@@ -0,0 +1,324 @@
+<script lang="ts" setup>
+import { ref, computed, nextTick, watch, onMounted } from "vue";
+import { LauEcomUpcIconSearch } from "../LauEcomIcon";
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: string;
+  inputWidth?: string;
+  inputHeight?: string;
+  inputClass?: string;
+  inputBorderClass?: string;
+  inputBgClass?: string;
+  inputTextClass?: string;
+  searchButtonClass?: string;
+  searchButtonBgClass?: string;
+  searchButtonTextClass?: string;
+  searchIconSize?: {
+    width: string;
+    height: string;
+  };
+  searchIconClass?: string;
+  expandedWidth?: string;
+  expandedBgClass?: string;
+  expandedShadowClass?: string;
+  overlayBgClass?: string;
+  overlayOpacityClass?: string;
+  isMobile?: boolean;
+  mobileButtonBgClass?: string;
+  mobileButtonTextClass?: string;
+  searchButtonId?: string;
+  shouldClose?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Buscar...",
+  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: "",
+  expandedWidth: "800px",
+  expandedBgClass: "dsEcom-bg-white",
+  expandedShadowClass: "dsEcom-shadow-lg",
+  overlayBgClass: "dsEcom-bg-black",
+  overlayOpacityClass: "dsEcom-bg-opacity-50",
+  isMobile: false,
+  mobileButtonBgClass: "dsEcom-bg-primary-60",
+  mobileButtonTextClass: "dsEcom-text-white",
+  searchButtonId: "",
+  shouldClose: false
+});
+
+const emit = defineEmits({
+  "update:modelValue": (value: string) => true,
+  "search": (value: string) => true,
+  "click:search-icon": () => true,
+  "clear": () => true,
+  "update:should-close": (value: boolean) => true
+});
+
+const searchQuery = ref(props.modelValue);
+const isExpanded = ref(false);
+const isMounted = ref(false);
+const isTransitioning = ref(false);
+const originalContainer = ref<HTMLElement | null>(null);
+
+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-h-full',
+  props.searchButtonClass,
+  props.searchButtonBgClass,
+  props.searchButtonTextClass
+]);
+
+const showClearButton = computed(() => {
+  return searchQuery.value && searchQuery.value.length >= 3;
+});
+
+const handleSearch = () => {
+  if (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 handleFocus = () => {
+  isTransitioning.value = true;
+  isExpanded.value = true;
+};
+
+const closeSearch = () => {
+  isTransitioning.value = true;
+  isExpanded.value = false;
+  emit('update:should-close', false);
+};
+
+const handleClear = () => {
+  searchQuery.value = "";
+  emit("update:modelValue", "");
+  emit("clear");
+};
+
+watch(() => props.modelValue, (newValue: string) => {
+  if (newValue !== searchQuery.value) {
+    searchQuery.value = newValue;
+  }
+});
+
+// Watch for shouldClose prop changes
+watch(() => props.shouldClose, (newValue) => {
+  if (newValue) {
+    closeSearch();
+    emit('update:should-close', false);
+  }
+});
+
+// Add onMounted hook
+onMounted(() => {
+  isMounted.value = true;
+  // Forzar un reflow para asegurar que las transiciones estén listas
+  nextTick(() => {
+    if (originalContainer.value) {
+      originalContainer.value.offsetHeight;
+    }
+  });
+});
+</script>
+
+<template>
+  <!-- Overlay -->
+  <Transition
+    enter-active-class="dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out"
+    leave-active-class="dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out"
+    enter-from-class="dsEcom-opacity-0"
+    leave-to-class="dsEcom-opacity-0"
+  >
+    <div
+      v-show="isMounted && isExpanded"
+      :class="[
+        'dsEcom-fixed dsEcom-inset-0 dsEcom-w-screen dsEcom-h-screen',
+        overlayBgClass,
+        overlayOpacityClass
+      ]"
+      @click="closeSearch"
+    ></div>
+  </Transition>
+
+  <!-- Contenedor del input -->
+  <div class="dsEcom-relative dsEcom-transform-gpu">
+    <!-- Container principal -->
+    <div 
+      ref="originalContainer"
+      :class="[
+        'dsEcom-inline-flex dsEcom-items-center',
+        'dsEcom-transition-transform dsEcom-transition-width dsEcom-duration-300 dsEcom-ease-in-out',
+        { 'dsEcom-transition-active': isTransitioning },
+        isExpanded ? [
+          'dsEcom-absolute dsEcom-z-[60]',
+          props.expandedBgClass,
+          props.expandedShadowClass
+        ] : 'dsEcom-relative'
+      ]"
+      :style="{ 
+        width: isExpanded ? props.expandedWidth : inputWidth,
+        maxWidth: isExpanded ? '90vw' : 'none'
+      }"
+      @transitionend="isTransitioning = false"
+    >
+      <div class="dsEcom-relative dsEcom-w-full">
+        <div class="dsEcom-flex dsEcom-items-center">
+          <div class="dsEcom-relative dsEcom-w-full">
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              :style="{ height: inputHeight }"
+              :class="[
+                inputClasses, 
+                'dsEcom-w-full dsEcom-pr-24'
+              ]"
+              @focus="handleFocus"
+              @input="handleInput"
+              @keydown="(e) => e.key === 'Enter' && handleSearch()"
+              :autofocus="isExpanded"
+            />
+            <!-- Botón Clear (X) -->
+            <button
+              v-if="showClearButton"
+              @click="handleClear"
+              type="button"
+              class="dsEcom-absolute dsEcom-right-12 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2 dsEcom-text-neutral-400 hover:dsEcom-text-neutral-600 dsEcom-transition-colors dsEcom-duration-200"
+              aria-label="Limpiar búsqueda"
+            >
+              <span class="dsEcom-text-xl">&times;</span>
+            </button>
+            <!-- Botón Search -->
+            <button
+              :id="searchButtonId"
+              @click="handleSearch"
+              type="button"
+              :class="[
+                searchButtonClasses,
+                'dsEcom-absolute dsEcom-right-0 dsEcom-top-0 dsEcom-bottom-0 dsEcom-flex dsEcom-items-center dsEcom-justify-center'
+              ]"
+              :style="{ 
+                minWidth: inputHeight,
+                height: inputHeight 
+              }"
+              aria-label="Buscar"
+            >
+              <LauEcomUpcIconSearch 
+                :width="searchIconSize.width" 
+                :height="searchIconSize.height"
+                :class="searchIconClass"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+[v-cloak] {
+  display: none;
+}
+
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  will-change: transform, opacity, width;
+}
+
+.dsEcom-transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.dsEcom-transition-width {
+  transition-property: width;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.dsEcom-transition-active {
+  transition-property: all;
+}
+
+.dsEcom-opacity-0 {
+  opacity: 0;
+}
+
+.dsEcom-fixed.dsEcom-inset-0 {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.dsEcom-w-screen {
+  width: 100vw;
+}
+
+.dsEcom-h-screen {
+  height: 100vh;
+}
+
+.dsEcom-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.dsEcom-transition-opacity {
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+[v-show] {
+  transition: opacity 0.3s ease-in-out;
+}
+
+[v-show="false"] {
+  opacity: 0 !important;
+  pointer-events: none;
+}
+
+[v-show="true"] {
+  opacity: 1;
+}
+
+/* Asegurar que el contenido también tenga transición suave */
+.dsEcom-px-4 {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style> 

package/src/components/LauEcomInputSearchHeader/LauEcomInputSearchHeaderMobile.vue

@@ -0,0 +1,279 @@
+<script lang="ts" setup>
+import { ref, computed, watch } from "vue";
+import {
+  LauEcomUpcIconSearch,
+  LauEcomUpcIconNavArrow,
+  LauEcomUpcIconClose,
+} from "../LauEcomIcon";
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: 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 botó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 móvil
+  mobilePanelBgClass?: string;
+  mobilePanelClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Buscar...",
+  isDisabled: false,
+  modelValue: "",
+  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" }),
+
+  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 isSearchOpen = ref(false);
+const searchPanel = ref<HTMLElement | null>(null);
+
+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 handleSearch = () => {
+  if (searchQuery.value?.trim()) {
+    emit("search", searchQuery.value);
+    emit("update:modelValue", searchQuery.value);
+    emit("click:search-icon");
+    handleSearchClose();
+  }
+};
+
+const handleInput = () => {
+  emit("update:modelValue", searchQuery.value);
+};
+
+const handleSearchOpen = () => {
+  isSearchOpen.value = true;
+};
+
+const handleSearchClose = () => {
+  isSearchOpen.value = false;
+  setTimeout(() => {
+    searchQuery.value = '';
+    emit('update:modelValue', '');
+  }, 300);
+};
+
+const clearSearch = () => {
+  searchQuery.value = '';
+  emit('update:modelValue', '');
+};
+
+watch(() => props.modelValue, (newValue: string) => {
+  if (newValue !== searchQuery.value) {
+    searchQuery.value = newValue;
+  }
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative dsEcom-transform-gpu">
+    <!-- Botón de búsqueda -->
+    <button
+      :class="[
+        'dsEcom-fixed dsEcom-right-4 dsEcom-top-4 dsEcom-z-50',
+        'dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out',
+        mobileButtonClass,
+        mobileButtonBgClass,
+        'text-base-color-primary-60',
+        isSearchOpen ? 'dsEcom-opacity-0 dsEcom-pointer-events-none' : 'dsEcom-opacity-100'
+      ]"
+      @click="handleSearchOpen"
+    >
+      <LauEcomUpcIconSearch 
+        :width="mobileIconSize.width" 
+        :height="mobileIconSize.height"
+        class="text-current"
+      />
+    </button>
+
+    <!-- Panel de búsqueda -->
+    <div
+      ref="searchPanel"
+      :class="[
+        'dsEcom-fixed dsEcom-right-4 dsEcom-top-4 dsEcom-z-50',
+        'dsEcom-transition-all dsEcom-duration-300 dsEcom-ease-in-out',
+        mobilePanelBgClass,
+        mobilePanelClass,
+        isSearchOpen ? 'dsEcom-w-[calc(100%-2rem)] dsEcom-opacity-100' : 'dsEcom-w-12 dsEcom-opacity-0 dsEcom-pointer-events-none'
+      ]"
+    >
+      <div class="dsEcom-flex dsEcom-items-center dsEcom-gap-2 dsEcom-h-12">
+        <button
+          @click="handleSearchClose"
+          :class="[
+            'dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-colors dsEcom-duration-300 dsEcom-ease-in-out',
+            arrowButtonClass,
+            arrowButtonBgClass,
+            'text-base-color-primary-60'
+          ]"
+        >
+          <LauEcomUpcIconNavArrow 
+            :width="arrowIconSize.width" 
+            :height="arrowIconSize.height"
+            class="dsEcom-transform dsEcom--rotate-90 text-current"
+          />
+        </button>
+
+        <div class="dsEcom-flex-1 dsEcom-overflow-hidden">
+          <div class="dsEcom-relative">
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              :style="{ height: inputHeight }"
+              :class="[
+                inputClasses, 
+                'dsEcom-w-full dsEcom-pr-24',
+                'dsEcom-transition-colors dsEcom-duration-300 dsEcom-ease-in-out'
+              ]"
+              @input="handleInput"
+              @keyup.enter="handleSearch"
+              :autofocus="isSearchOpen"
+            />
+            <!-- Botón de limpiar -->
+            <button
+              v-if="searchQuery"
+              @click="clearSearch"
+              :class="[
+                'dsEcom-absolute dsEcom-right-12 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2 dsEcom-px-2',
+                'dsEcom-transition-colors dsEcom-duration-300 dsEcom-ease-in-out',
+                'text-base-color-primary-60'
+              ]"
+            >
+              <LauEcomUpcIconClose
+                :width="searchIconSize.width" 
+                :height="searchIconSize.height"
+                class="text-current"
+              />
+            </button>
+            <!-- Botón de búsqueda -->
+            <button
+              @click="handleSearch"
+              :class="[
+                searchButtonClasses,
+                'dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2 dsEcom-px-3',
+                'dsEcom-transition-colors dsEcom-duration-300 dsEcom-ease-in-out',
+                'text-base-color-primary-60'
+              ]"
+            >
+              <LauEcomUpcIconSearch 
+                :width="searchIconSize.width" 
+                :height="searchIconSize.height"
+                class="text-current"
+              />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+  will-change: opacity, width;
+}
+
+/* Transiciones base */
+.dsEcom-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+/* Input styles */
+input {
+  transition-property: background-color, border-color, color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+/* Efectos hover para botones */
+button:hover {
+  opacity: 0.8;
+}
+
+button:active {
+  opacity: 0.6;
+}
+</style>