lau-ecom-design-system 1.0.20 → 1.0.21

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -0,0 +1,244 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import {
+  LauEcomUpcIconCheck as LauEcomUpcIconSearch,
+  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
+} from "../LauEcomIcon";
+
+// Log de versión del componente
+console.log('🔍 InputSearch Version: 1.0.20 - Debug Mode');
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: string;
+  forceClose?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Quiero aprender...",
+  isDisabled: false,
+  modelValue: "",
+  forceClose: false,
+});
+
+// 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,
+});
+
+const searchQuery = ref(props.modelValue);
+const isExpanded = ref(false);
+const showOverlay = 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);
+    closeSearch();
+  }
+};
+
+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 = [
+    "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(() => [
+  "dsEcom-fixed dsEcom-inset-0 dsEcom-bg-black dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40",
+  {
+    "dsEcom-opacity-50": 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 scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    expandedContainer.value.style.top = `${rect.top + scrollTop}px`;
+    console.log('🔍 Updated expanded position:', { top: rect.top + scrollTop });
+  }
+};
+
+onMounted(() => {
+  console.log('🔍 Component mounted');
+  window.addEventListener('resize', updateExpandedPosition);
+});
+
+onBeforeUnmount(() => {
+  console.log('🔍 Component will unmount');
+  window.removeEventListener('resize', updateExpandedPosition);
+});
+
+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;
+  }
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <div 
+      :class="containerClasses"
+      ref="originalContainer"
+    >
+      <input
+        v-model="searchQuery"
+        type="text"
+        :placeholder="placeholder"
+        :disabled="isDisabled"
+        class="lau-ecom-input dsEcom-border dsEcom-border-neutral-80 dsEcom-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60"
+        @focus="handleFocus"
+        @input="handleInput"
+        @keyup.enter="handleSearch"
+        :class="{ 'dsEcom-invisible': isExpanded }"
+      />
+      <button
+        v-if="searchQuery.length >= 3 && !isExpanded"
+        @click="handleSearch"
+        class="dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
+      >
+        <LauEcomUpcIconSearch width="20" height="20" />
+      </button>
+    </div>
+
+    <!-- Overlay -->
+    <div
+      :class="overlayClasses"
+      @click="closeSearch"
+    ></div>
+
+    <!-- Versión expandida -->
+    <div 
+      v-show="isExpanded"
+      class="dsEcom-fixed dsEcom-w-[656px] dsEcom-left-1/2 dsEcom-transform -dsEcom-translate-x-1/2 dsEcom-z-50"
+      :style="{ top: isExpanded ? `${originalContainer?.getBoundingClientRect().top}px` : '0' }"
+      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-rounded-lg dsEcom-px-4 dsEcom-h-10 dsEcom-w-full dsEcom-focus:outline-none dsEcom-focus:ring-2 dsEcom-focus:ring-primary-60 dsEcom-bg-white"
+          @input="handleInput"
+          @keyup.enter="handleSearch"
+          autofocus
+        />
+
+        <div class="dsEcom-absolute dsEcom-right-2 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-flex dsEcom-gap-2">
+          <button
+            v-if="searchQuery.length >= 3"
+            @click="clearSearch"
+            class="dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300"
+          >
+            <LauEcomUpcIconClose width="16" height="16" />
+          </button>
+
+          <button
+            v-if="searchQuery.length >= 3"
+            @click="handleSearch"
+            class="dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70 dsEcom-text-white dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300"
+          >
+            <LauEcomUpcIconSearch width="20" height="20" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.lau-ecom-input {
+  transition: all 0.3s ease-in-out;
+}
+
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>
+
+