lau-ecom-design-system 1.0.19 → 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>
+
+        

package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue

@@ -1,16 +1,16 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div
-    class="dsEcom-bg-opacity-70 dsEcom-flex dsEcom-justify-center dsEcom-items-center dsEcom-absolute dsEcom-inset-0 dsEcom-z-50 dsEcom-bg-neutral-80"
-  >
-    <div
-      class="dsEcom-flex dsEcom-flex-col dsEcom-gap-4 dsEcom-text-white dsEcom-items-center"
-    >
-      <p class="upc-epg-font-heading-04-32px">Procesando los datos...</p>
-      <p class="core-font-body-reg-02-20px">Espere un momento por favor</p>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
+<script setup lang="ts"></script>
+
+<template>
+  <div
+    class="dsEcom-bg-opacity-70 dsEcom-flex dsEcom-justify-center dsEcom-items-center dsEcom-absolute dsEcom-inset-0 dsEcom-z-50 dsEcom-bg-neutral-80"
+  >
+    <div
+      class="dsEcom-flex dsEcom-flex-col dsEcom-gap-4 dsEcom-text-white dsEcom-items-center"
+    >
+      <p class="upc-epg-font-heading-04-32px">Procesando los datos...</p>
+      <p class="core-font-body-reg-02-20px">Espere un momento por favor</p>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

package/src/components/LauEcomPaginator/LauEcomPaginator.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import LauEcomPaginatorButton from "./LauEcomPaginatorButton.vue";
+
+interface Props {
+  currentPage?: number;
+  totalPages?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentPage: 6,
+  totalPages: 6,
+});
+
+const emit = defineEmits(["onPrevPage", "onNextPage"]);
+
+const handlePrevPage = () => {
+  emit("onPrevPage");
+};
+
+const handleNextPage = () => {
+  emit("onNextPage");
+};
+
+const isPrevPageDisabled = computed(() => {
+  return props.currentPage === 1;
+});
+
+const isNextPageDisabled = computed(() => {
+  return props.currentPage === props.totalPages;
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-gap-6 dsEcom-items-center">
+    <LauEcomPaginatorButton
+      :is-disabled="isPrevPageDisabled"
+      @on-click="handlePrevPage"
+    />
+    <p class="pagination button-bold-05-20px">
+      {{ currentPage }}/{{ totalPages }}
+    </p>
+    <LauEcomPaginatorButton
+      class="dsEcom-rotate-180"
+      :is-disabled="isNextPageDisabled"
+      @on-click="handleNextPage"
+    />
+  </div>
+</template>
+
+<style scoped>
+.pagination {
+  @apply dsEcom-text-primary-60
+  dsEcom-cursor-default
+  hover:dsEcom-text-primary-70;
+}
+</style>

package/src/components/LauEcomPaginator/LauEcomPaginatorButton.vue

@@ -0,0 +1,68 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { LauEcomUpcIconNavBack } from "../LauEcomIcon";
+
+interface Props {
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isDisabled: false,
+});
+
+const emit = defineEmits(["onClick"]);
+
+const buttonClasses = computed(() => {
+  return {
+    "paginator-button": true,
+    "paginator-button--disabled": props.isDisabled,
+  };
+});
+
+const iconClasses = computed(() => {
+  return {
+    "paginator-button__icon": true,
+    "paginator-button__icon--disabled": props.isDisabled,
+  };
+});
+
+const handleClick = () => {
+  emit("onClick");
+};
+</script>
+
+<template>
+  <button :class="buttonClasses" :disabled="isDisabled" @click="handleClick">
+    <LauEcomUpcIconNavBack :class="iconClasses" />
+  </button>
+</template>
+
+<style scoped>
+.paginator-button {
+  @apply dsEcom-border-[1px] 
+    dsEcom-w-fit 
+    dsEcom-p-[10px] 
+    dsEcom-rounded-full
+    dsEcom-border-secondary-60
+    hover:dsEcom-border-secondary-70
+    active:dsEcom-border-secondary-80;
+}
+
+.paginator-button--disabled {
+  @apply dsEcom-border-neutral-70
+  hover:dsEcom-border-neutral-70
+  active:dsEcom-border-neutral-70;
+}
+
+.paginator-button__icon {
+  @apply dsEcom-fill-secondary-60
+  hover:dsEcom-fill-secondary-70
+  active:dsEcom-fill-secondary-80;
+}
+
+.paginator-button__icon--disabled {
+  @apply dsEcom-fill-neutral-70
+  hover:dsEcom-fill-neutral-70
+  active:dsEcom-fill-neutral-70;
+}
+</style>

package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue

@@ -1,103 +1,103 @@
-<script lang="ts" setup>
-import { computed, ref, watch } from "vue";
-
-interface Props {
-  id?: string;
-  label?: string;
-  value?: string | number | boolean;
-  modelValue?: string | number | boolean;
-  isRequired?: boolean;
-  isDisabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  id: "",
-  label: "default",
-  value: "",
-  modelValue: "",
-  isRequired: false,
-  isDisabled: false,
-});
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-
-const lauEcomRadioButtonClasses = computed(() => {
-  return {
-    "lau-ecom-radio-button lau-ecom-radio-button--upc": true,
-    "lau-ecom-radio-button--disabled": props.isDisabled,
-    "lau-ecom-radio-button--required": props.isRequired,
-  };
-});
-
-const radioGroupValue = ref(props.modelValue);
-
-const handleChange = () => {
-  emit("update:modelValue", String(props.value));
-};
-
-watch(
-  () => props.modelValue,
-  (newValue) => {
-    radioGroupValue.value = newValue;
-  },
-);
-</script>
-
-<template>
-  <label>
-    <input
-      :id="id"
-      v-model="radioGroupValue"
-      :class="lauEcomRadioButtonClasses"
-      type="radio"
-      :disabled="isDisabled"
-      :value="value"
-      @change="handleChange"
-    />
-    <span :for="id">{{ label }}</span>
-  </label>
-</template>
-
-<style scoped>
-.lau-ecom-radio-button {
-  @apply dsEcom-relative
-    dsEcom-float-left
-    dsEcom-mr-2
-    dsEcom-h-5
-    dsEcom-w-5
-    dsEcom-appearance-none
-    dsEcom-rounded-full
-    dsEcom-border-[1px]
-    dsEcom-border-solid
-    dsEcom-border-neutral-90 
-    checked:before:dsEcom-opacity-[0.16] 
-    checked:after:dsEcom-content-[''] 
-    checked:after:dsEcom-absolute 
-    checked:after:dsEcom-left-1/2 
-    checked:after:dsEcom-top-1/2 
-    checked:after:dsEcom-h-3 
-    checked:after:dsEcom-w-3 
-    checked:after:dsEcom-rounded-full  
-    checked:after:[transform:translate(-50%,-50%)] 
-    checked:focus:before:dsEcom-scale-100;
-}
-
-.lau-ecom-radio-button--upc {
-  @apply hover:dsEcom-border-primary-60
-    checked:dsEcom-border-primary-60
-    checked:after:dsEcom-bg-primary-60
-    checked:focus:dsEcom-border-primary-60;
-}
-
-.lau-ecom-radio-button--disabled {
-  @apply !dsEcom-border-neutral-50
-  checked:after:dsEcom-bg-neutral-50
-  disabled:dsEcom-cursor-not-allowed;
-}
-
-.lau-ecom-radio-button--required {
-  @apply dsEcom-border-primary-60;
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref, watch } from "vue";
+
+interface Props {
+  id?: string;
+  label?: string;
+  value?: string | number | boolean;
+  modelValue?: string | number | boolean;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "",
+  label: "default",
+  value: "",
+  modelValue: "",
+  isRequired: false,
+  isDisabled: false,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const lauEcomRadioButtonClasses = computed(() => {
+  return {
+    "lau-ecom-radio-button lau-ecom-radio-button--upc": true,
+    "lau-ecom-radio-button--disabled": props.isDisabled,
+    "lau-ecom-radio-button--required": props.isRequired,
+  };
+});
+
+const radioGroupValue = ref(props.modelValue);
+
+const handleChange = () => {
+  emit("update:modelValue", String(props.value));
+};
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    radioGroupValue.value = newValue;
+  },
+);
+</script>
+
+<template>
+  <label>
+    <input
+      :id="id"
+      v-model="radioGroupValue"
+      :class="lauEcomRadioButtonClasses"
+      type="radio"
+      :disabled="isDisabled"
+      :value="value"
+      @change="handleChange"
+    />
+    <span :for="id">{{ label }}</span>
+  </label>
+</template>
+
+<style scoped>
+.lau-ecom-radio-button {
+  @apply dsEcom-relative
+    dsEcom-float-left
+    dsEcom-mr-2
+    dsEcom-h-5
+    dsEcom-w-5
+    dsEcom-appearance-none
+    dsEcom-rounded-full
+    dsEcom-border-[1px]
+    dsEcom-border-solid
+    dsEcom-border-neutral-90 
+    checked:before:dsEcom-opacity-[0.16] 
+    checked:after:dsEcom-content-[''] 
+    checked:after:dsEcom-absolute 
+    checked:after:dsEcom-left-1/2 
+    checked:after:dsEcom-top-1/2 
+    checked:after:dsEcom-h-3 
+    checked:after:dsEcom-w-3 
+    checked:after:dsEcom-rounded-full  
+    checked:after:[transform:translate(-50%,-50%)] 
+    checked:focus:before:dsEcom-scale-100;
+}
+
+.lau-ecom-radio-button--upc {
+  @apply hover:dsEcom-border-primary-60
+    checked:dsEcom-border-primary-60
+    checked:after:dsEcom-bg-primary-60
+    checked:focus:dsEcom-border-primary-60;
+}
+
+.lau-ecom-radio-button--disabled {
+  @apply !dsEcom-border-neutral-50
+  checked:after:dsEcom-bg-neutral-50
+  disabled:dsEcom-cursor-not-allowed;
+}
+
+.lau-ecom-radio-button--required {
+  @apply dsEcom-border-primary-60;
+}
+</style>