lau-ecom-design-system 1.0.19 → 1.0.20

package/src/components/LauEcomInput/LauEcomInput.vue

@@ -1,207 +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>
+<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: "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/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>