lau-ecom-design-system 1.0.23 → 1.0.26

package/src/components/LauEcomInputSearchHeader/LauEcomInputSearchHeader.vue

@@ -0,0 +1,432 @@
+<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>