lau-ecom-design-system 1.0.20 → 1.0.22

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.20",
+  "version": "1.0.22",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",
@@ -26,7 +26,8 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "prepare": "husky"
+    "prepare": "husky",
+    "watch": "rollup -c -w"
   },
   "dependencies": {
     "vue": "^3.5.12"

package/src/components/LauEcomDropdown/LauEcomDropdown.vue

@@ -5,7 +5,6 @@ import {
   LauEcomUpcIconExclamationTriangle,
 } from "../LauEcomIcon";
 import { DropdownItem } from "./types";
-import { Colors } from "../../utils";
 
 interface Props {
   id?: string;
@@ -14,6 +13,9 @@ interface Props {
   placeholder?: string;
   dropdownItems: DropdownItem[];
   errorMessage?: string;
+  disabledColor?: string;
+  errorColor?: string;
+  defaultColor?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -22,6 +24,9 @@ const props = withDefaults(defineProps<Props>(), {
   isDisabled: false,
   placeholder: "Placeholder",
   errorMessage: "",
+  disabledColor: "var(--neutral-70)",
+  errorColor: "var(--feedback-error-60)",
+  defaultColor: "var(--neutral-100)",
 });
 
 const isOpen = ref(false);
@@ -62,9 +67,9 @@ const lauEcomIconClasses = computed(() => {
 });
 
 const iconArrowDownColor = computed(() => {
-  if (props.isDisabled) return Colors["upc-color-neutral-70"];
-  if (props.errorMessage) return Colors["upc-color-red-60-base"];
-  return Colors["upc-color-neutral-100"];
+  if (props.isDisabled) return props.disabledColor;
+  if (props.errorMessage) return props.errorColor;
+  return props.defaultColor;
 });
 </script>
 
@@ -110,7 +115,7 @@ const iconArrowDownColor = computed(() => {
         <LauEcomUpcIconExclamationTriangle
           width="16"
           height="16"
-          :color="Colors['upc-color-red-60-base']"
+          :color="errorColor"
         />
       </span>
       <p class="dsEcom-ml-1">

package/src/components/LauEcomIcon/LauEcomUpcIconSearch.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    color?: string;
+    width?: string;
+    height?: string;
+  }>(),
+  {
+    color: "currentColor",
+    width: "24",
+    height: "24",
+  },
+);
+</script>
+
+<template>
+  <svg
+    :width="width"
+    :height="height"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M21 21L16.65 16.65"
+      :stroke="color"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template> 

package/src/components/LauEcomInput/LauEcomInput.vue

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
   type: "text",
   placeholder: "Placeholder",
   isDisabled: false,
-  label: "label",
+  label: "Text label",
   size: LauEcomSize.md,
   name: "input",
   modelValue: "",

package/src/components/LauEcomInput2/LauEcomInput2.vue

@@ -0,0 +1,207 @@
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { LauEcomSize } from "../../enums";
+import {
+  LauEcomUpcIconExclamationTriangle,
+  LauEcomUpcIconNavCheckmark,
+} from "../LauEcomIcon";
+
+interface Props {
+  id?: string;
+  type?: string;
+  placeholder?: string;
+  isDisabled?: boolean;
+  label?: string;
+  size?: LauEcomSize;
+  name?: string;
+  modelValue?: string | number;
+  inputContainerClass?: string;
+  inputClass?: string;
+  errorMessage?: string;
+  hasSuccess?: boolean;
+  limit?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  id: "lauEcomInput",
+  type: "text",
+  placeholder: "Placeholder",
+  isDisabled: false,
+  label: "Text label",
+  size: LauEcomSize.md,
+  name: "input",
+  modelValue: "",
+  inputContainerClass: "",
+  inputClass: "",
+  errorMessage: "",
+  hasSuccess: false,
+  limit: 50,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+}>();
+
+const inputValue = ref(props.modelValue);
+const errorMessageValue = ref(props.errorMessage);
+
+const handleInput = (event: Event) => {
+  const newValue = (event.target as HTMLInputElement).value;
+
+  if (newValue.length === props.limit) {
+    errorMessageValue.value = "Excediste el numero de caracteres";
+    inputValue.value = newValue;
+    emit("update:modelValue", newValue);
+    return;
+  } else {
+    errorMessageValue.value = props.errorMessage;
+  }
+
+  inputValue.value = newValue;
+  emit("update:modelValue", newValue);
+};
+
+const labelClasses = computed(() => {
+  return {
+    "lau-ecom-label": true,
+    "lau-ecom-label--disabled": props.isDisabled,
+  };
+});
+
+const inputContainerClasses = computed(() => {
+  return [
+    "dsEcom-relative",
+    props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
+    props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
+  ];
+});
+
+const inputClasses = computed(() => {
+  return [
+    "lau-ecom-input core-font-body-reg-04-16px",
+    props.inputClass,
+    props.size === LauEcomSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
+    { "lau-ecom-input--disabled": props.isDisabled },
+    { "lau-ecom-input--error": errorMessageValue.value },
+    { "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value },
+    props.hasSuccess || errorMessageValue.value
+      ? "placeholder:!dsEcom-text-neutral-100"
+      : "placeholder:!dsEcom-text-neutral-80",
+  ];
+});
+
+const successClasses = computed(() => {
+  return [
+    "lau-ecom-success",
+    props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-flex dsEcom-flex-col">
+    <label v-if="label" :class="labelClasses">
+      {{ label }}
+    </label>
+    <div :class="inputContainerClasses">
+      <input
+        :id="id"
+        :class="inputClasses"
+        :type="type"
+        :placeholder="placeholder"
+        :name="name"
+        :disabled="isDisabled"
+        :value="inputValue"
+        :maxlength="limit"
+        @input="handleInput"
+      />
+      <div v-if="hasSuccess && !errorMessageValue" :class="successClasses">
+        <LauEcomUpcIconNavCheckmark
+          class="dsEcom-fill-feedback-success-60"
+          width="24"
+          height="24"
+        />
+      </div>
+      <div
+        v-if="errorMessageValue"
+        class="lau-ecom-error-message core-font-body-reg-06-12px"
+      >
+        <div class="dsEcom-flex">
+          <LauEcomUpcIconExclamationTriangle
+            class="dsEcom-fill-primary-60"
+            width="16"
+            height="16"
+          />
+          <p class="dsEcom-ml-1">
+            {{ errorMessageValue }}
+          </p>
+        </div>
+
+        <span v-if="inputValue.toString().length === limit">
+          {{ `${inputValue.toString().length}/${limit}` }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.lau-ecom-label {
+  @apply dsEcom-block  
+    dsEcom-text-neutral-100
+    dsEcom-font-core-font-family-public-sans
+    dsEcom-text-[12px]
+    dsEcom-font-core-font-weight-extrabold
+    dsEcom-leading-[18px];
+}
+
+.lau-ecom-label--disabled {
+  @apply !dsEcom-text-neutral-70;
+}
+
+.lau-ecom-input {
+  @apply dsEcom-w-full 
+    dsEcom-pl-3 
+    dsEcom-pr-[44px] 
+    dsEcom-rounded-sm
+    dsEcom-border 
+    dsEcom-border-neutral-80
+    hover:dsEcom-border-stroke-secondary-60
+    focus:dsEcom-border-stroke-secondary-60 focus:!dsEcom-text-neutral-100
+    focus-visible:dsEcom-outline-none
+    disabled:placeholder:dsEcom-text-neutral-70 disabled:dsEcom-bg-neutral-20
+    disabled:!dsEcom-border-neutral-70;
+}
+
+.lau-ecom-input--disabled {
+  @apply !dsEcom-text-neutral-70;
+}
+
+.lau-ecom-input--error {
+  @apply !dsEcom-border-feedback-error-60;
+}
+
+.lau-ecom-input-success {
+  @apply !dsEcom-border-feedback-success-60
+    placeholder:!dsEcom-text-neutral-100;
+}
+
+.lau-ecom-error-message {
+  @apply dsEcom-flex
+    dsEcom-items-center
+    dsEcom-mt-[2px]
+    dsEcom-justify-between
+    dsEcom-text-primary-60;
+}
+
+.lau-ecom-success {
+  @apply dsEcom-absolute
+    dsEcom-right-3;
+}
+</style>

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -0,0 +1,323 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
+import {
+  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;
+  buttonColorClass?: string;
+  buttonTextColorClass?: string;
+  buttonClass?: string;
+  inputClass?: string;
+  containerClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: "Quiero aprender...",
+  isDisabled: false,
+  modelValue: "",
+  forceClose: false,
+  buttonColorClass: "dsEcom-bg-primary-60 hover:dsEcom-bg-primary-70",
+  buttonTextColorClass: "dsEcom-text-white",
+  buttonClass: "",
+  inputClass: "dsEcom-h-10 dsEcom-rounded-lg",
+  containerClass: ""
+});
+
+// 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,
+  "click:search-icon": () => 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);
+    emit("click:search-icon");
+    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 viewportHeight = window.innerHeight;
+    
+    // Si el input original está fuera de la vista (arriba o abajo), posicionamos el expandido en una posición visible
+    let topPosition;
+    if (rect.top < 0) {
+      topPosition = '20px'; // Si está arriba de la vista, lo ponemos cerca del tope
+    } else if (rect.top > viewportHeight) {
+      topPosition = '20px'; // Si está abajo de la vista, también lo ponemos cerca del tope
+    } else {
+      topPosition = `${rect.top}px`; // Si está visible, mantenemos su posición actual
+    }
+    
+    expandedContainer.value.style.position = 'fixed';
+    expandedContainer.value.style.top = topPosition;
+    expandedContainer.value.style.left = '50%';
+    expandedContainer.value.style.transform = 'translateX(-50%)';
+    expandedContainer.value.style.width = '656px';
+    expandedContainer.value.style.maxWidth = '90vw';
+  }
+};
+
+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;
+  }
+});
+
+const buttonClasses = computed(() => {
+  const defaultClasses = "dsEcom-absolute dsEcom-right-0 dsEcom-top-1/2 -dsEcom-translate-y-1/2 dsEcom-p-2 dsEcom-rounded-r-lg dsEcom-transition-all dsEcom-duration-300";
+  
+  // Si hay buttonClass, usamos esas clases directamente
+  if (props.buttonClass) {
+    return [defaultClasses, props.buttonClass];
+  }
+  
+  // Si no, usamos las clases de color tradicionales
+  return [
+    defaultClasses,
+    props.buttonColorClass,
+    props.buttonTextColorClass
+  ];
+});
+</script>
+
+<template>
+  <div class="dsEcom-relative">
+    <div 
+      :class="[containerClasses, props.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',
+            props.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-if="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',
+              props.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',
+              props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-r-lg',
+              props.buttonColorClass,
+              props.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"
+      @click="closeSearch"
+    ></div>
+
+    <!-- Versión expandida -->
+    <div 
+      v-show="isExpanded"
+      class="dsEcom-fixed dsEcom-z-50 dsEcom-bg-white dsEcom-shadow-lg dsEcom-overflow-hidden"
+      :class="[props.inputClass?.includes('rounded') ? props.inputClass : 'dsEcom-rounded-lg']"
+      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',
+            props.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-if="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',
+              props.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': !props.inputClass?.includes('rounded') },
+              props.buttonColorClass,
+              props.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;
+}
+
+.dsEcom-transform-gpu {
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+</style>
+
+