lau-ecom-design-system 1.0.23 → 1.0.26

package/src/components/LauEcomInputSearch/LauEcomInputSearchDesktop.vue

@@ -0,0 +1,229 @@
+<!-- LauEcomInputSearchDesktop.vue -->
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import {
+  LauEcomUpcIconSearch,
+  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
+} from "../LauEcomIcon";
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: string;
+  buttonColorClass?: string;
+  buttonTextColorClass?: string;
+  containerClass?: string;
+  expandedWidth?: string;
+  expandedBackgroundClass?: string;
+  overlayClass?: string;
+  inputClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Buscar...",
+  isDisabled: false,
+  modelValue: "",
+  buttonColorClass: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70",
+  buttonTextColorClass: "dsEcom-text-white",
+  containerClass: "",
+  expandedWidth: "50vw",
+  expandedBackgroundClass: "dsEcom-bg-white",
+  overlayClass: "dsEcom-bg-black dsEcom-opacity-50",
+  inputClass: "dsEcom-h-10 dsEcom-rounded-lg"
+});
+
+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 containerClasses = computed(() => {
+  return [
+    "dsEcom-transition-transform dsEcom-duration-300 dsEcom-ease-in-out dsEcom-relative",
+    {
+      "dsEcom-w-[250px] md:dsEcom-w-[350px]": !isExpanded.value
+    }
+  ];
+});
+
+const overlayClasses = computed(() => [
+  "dsEcom-fixed dsEcom-inset-0 dsEcom-transition-opacity dsEcom-duration-300 dsEcom-ease-in-out dsEcom-z-40",
+  props.overlayClass,
+  {
+    "dsEcom-opacity-100": showOverlay.value,
+    "dsEcom-opacity-0 dsEcom-pointer-events-none": !showOverlay.value
+  }
+]);
+
+const handleSearch = () => {
+  if (searchQuery.value && 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 clearSearch = () => {
+  searchQuery.value = "";
+  emit("update:modelValue", "");
+};
+
+const closeSearch = () => {
+  showOverlay.value = false;
+  setTimeout(() => {
+    isExpanded.value = false;
+  }, 300);
+};
+
+const handleFocus = () => {
+  isExpanded.value = true;
+  showOverlay.value = true;
+};
+</script>
+
+<template>
+  <div class="dsEcom-relative dsEcom-transform-gpu">
+    <div 
+      :class="[containerClasses, containerClass]"
+      ref="originalContainer"
+    >
+      <div class="dsEcom-relative" :class="{ 'dsEcom-invisible': isExpanded }">
+        <input
+          v-model="searchQuery"
+          type="text"
+          :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 dsEcom-transition-all dsEcom-duration-300',
+            inputClass,
+            { 'dsEcom-opacity-0': isExpanded }
+          ]"
+          @focus="handleFocus"
+          @input="handleInput"
+          @keyup.enter="handleSearch"
+        />
+        <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
+          <button
+            v-show="searchQuery.length >= 3"
+            @click="clearSearch"
+            :class="[
+              'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
+              inputClass
+            ]"
+          >
+            <LauEcomUpcIconClose width="16" height="16" />
+          </button>
+
+          <button
+            @click="handleSearch"
+            :class="[
+              'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
+              inputClass?.includes('rounded') ? inputClass : 'dsEcom-rounded-r-lg',
+              buttonColorClass,
+              buttonTextColorClass,
+              'dsEcom-border-0'
+            ]"
+            style="margin: 1px; height: calc(100% - 2px);"
+          >
+            <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Overlay -->
+    <div
+      v-show="isExpanded"
+      :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 dsEcom-transition-all dsEcom-duration-300"
+      :class="[
+        inputClass?.includes('rounded') ? inputClass : 'dsEcom-rounded-lg',
+        expandedBackgroundClass
+      ]"
+      :style="{
+        width: expandedWidth,
+        maxWidth: '90vw'
+      }"
+      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-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',
+            inputClass
+          ]"
+          @input="handleInput"
+          @keyup.enter="handleSearch"
+          autofocus
+        />
+        <div class="dsEcom-absolute dsEcom-right-0 dsEcom-inset-y-0 dsEcom-flex dsEcom-items-stretch">
+          <button
+            v-show="searchQuery.length >= 3"
+            @click="clearSearch"
+            :class="[
+              'dsEcom-flex dsEcom-items-center dsEcom-px-1.5 dsEcom-text-neutral-100 hover:dsEcom-text-neutral-80 dsEcom-transition-all dsEcom-duration-300',
+              inputClass
+            ]"
+          >
+            <LauEcomUpcIconClose width="16" height="16" />
+          </button>
+
+          <button
+            @click="handleSearch"
+            :class="[
+              'dsEcom-flex dsEcom-items-center dsEcom-px-3 dsEcom-transition-all dsEcom-duration-300',
+              { 'dsEcom-rounded-r-lg': !inputClass?.includes('rounded') },
+              buttonColorClass,
+              buttonTextColorClass,
+              'dsEcom-border-0'
+            ]"
+            style="margin: 1px; height: calc(100% - 2px);"
+          >
+            <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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;
+}
+</style> 

package/src/components/LauEcomInputSearch/LauEcomInputSearchMobile.vue

@@ -0,0 +1,187 @@
+<!-- LauEcomInputSearchMobile.vue -->
+<script lang="ts" setup>
+import { ref } from 'vue';
+import {
+  LauEcomUpcIconSearch,
+  LauEcomCoreIconNavClose as LauEcomUpcIconClose,
+  LauEcomUpcIconNavArrow,
+} from "../LauEcomIcon";
+
+interface Props {
+  placeholder?: string;
+  isDisabled?: boolean;
+  modelValue?: string;
+  buttonColorClass?: string;
+  buttonTextColorClass?: string;
+  arrowColorClass?: string;
+  arrowButtonClass?: string;
+  mobileInputWidth?: string;
+  mobileInputHeight?: string;
+  mobilePanelClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Buscar...",
+  isDisabled: false,
+  modelValue: "",
+  buttonColorClass: "dsEcom-bg-primary-60",
+  buttonTextColorClass: "dsEcom-text-white",
+  arrowColorClass: "dsEcom-text-neutral-100",
+  arrowButtonClass: "",
+  mobileInputWidth: "240px",
+  mobileInputHeight: "40px",
+  mobilePanelClass: "dsEcom-bg-white"
+});
+
+const emit = defineEmits({
+  "update:modelValue": (value: string) => true,
+  "search": (value: string) => true,
+  "click:search-icon": () => true
+});
+
+const searchQuery = ref(props.modelValue);
+const isMobileSearchOpen = ref(false);
+
+const handleMobileSearchClick = () => {
+  isMobileSearchOpen.value = true;
+};
+
+const handleMobileSearchClose = () => {
+  const panel = document.querySelector('.dsEcom-fixed') as HTMLElement;
+  if (panel) {
+    panel.style.opacity = '0';
+    panel.style.transform = 'translateY(100%)';
+  }
+  
+  setTimeout(() => {
+    isMobileSearchOpen.value = false;
+    searchQuery.value = '';
+    emit('update:modelValue', '');
+  }, 300);
+};
+
+const handleMobileSearch = () => {
+  if (searchQuery.value && searchQuery.value.trim()) {
+    emit("search", searchQuery.value);
+    emit("update:modelValue", searchQuery.value);
+    emit("click:search-icon");
+    handleMobileSearchClose();
+  }
+};
+
+const handleInput = () => {
+  emit("update:modelValue", searchQuery.value);
+};
+
+const handleMobileClear = () => {
+  searchQuery.value = "";
+  emit("update:modelValue", "");
+};
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <!-- Botón de búsqueda -->
+    <button
+      v-show="!isMobileSearchOpen"
+      @click="handleMobileSearchClick"
+      class="dsEcom-p-2 dsEcom-rounded-lg dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+      :class="[buttonColorClass]"
+    >
+      <LauEcomUpcIconSearch 
+        width="24" 
+        height="24" 
+        :class="[buttonTextColorClass]"
+      />
+    </button>
+
+    <!-- Panel de búsqueda -->
+    <div
+      v-show="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">
+        <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 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+            :class="[arrowButtonClass]"
+          >
+            <LauEcomUpcIconNavArrow 
+              width="24" 
+              height="24" 
+              class="dsEcom-transform dsEcom-rotate-[-90deg] 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 dsEcom-transform-gpu">
+            <input
+              v-model="searchQuery"
+              type="text"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              :style="{
+                width: mobileInputWidth,
+                height: 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 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu"
+              @input="handleInput"
+              @keyup.enter="handleMobileSearch"
+            />
+            <button
+              @click="handleMobileSearch"
+              :style="{ height: mobileInputHeight }"
+              :class="[
+                'dsEcom-px-3 dsEcom-rounded-r-lg dsEcom-border-0 dsEcom-transition-all dsEcom-duration-300 dsEcom-transform-gpu',
+                buttonColorClass,
+                buttonTextColorClass
+              ]"
+            >
+              <LauEcomUpcIconSearch width="20" height="20" color="currentColor" />
+            </button>
+          </div>
+
+          <button
+            v-show="searchQuery.length >= 3"
+            @click="handleMobileClear"
+            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>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<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;
+}
+
+@media (max-width: 768px) {
+  .dsEcom-fixed {
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+    will-change: transform, opacity;
+  }
+}
+</style>