lau-ecom-design-system 1.0.22 → 1.0.23

package/src/components/LauEcomInput2/LauEcomInput2.vue

@@ -1,207 +0,0 @@
-<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>