malio-layer-ui/app/components/malio/InputText.vue

<template>
  <div
    class="relative mt-4 w-full"
    :class="[minWidth, maxWidth]"
  >
    <input
      :id="inputId"
      v-maska="mask"
      :name="name"
      :autocomplete="autocomplete"
      class="floating-input grow-height peer min-h-[40px] w-full border bg-white px-3 py-1 outline-none focus:border-2"
      :class="[
        disabled ? 'cursor-not-allowed bg-m-primary ' : 'cursor-text',
        hasError
          ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
          : hasSuccess
            ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
            : 'border-m-border focus:border-m-primary [&:not(:placeholder-shown)]:border-m-primary',
        text,
        iconInputPaddingClass,
        inputClass,
        rounded,
      ]"
      :required="required"
      :maxlength="maxLength"
      :minlength="minLength"
      :disabled="disabled"
      :value="modelValue ?? ''"
      :readonly="readonly"
      :aria-invalid="!!error"
      :aria-describedby="describedBy"
      v-bind="attrs"
      placeholder=" "
      type="text"
      @input="onInput"
    >

    <label
      v-if="label"
      :for="inputId"
      class="floating-label absolute left-3 top-2 origin-left transition-transform duration-150 peer-focus:translate-y-[-1.15rem] peer-focus:scale-90"
      :class="[
        hasError
          ? 'text-m-error peer-valid:text-m-error peer-focus:text-m-error'
          : hasSuccess
            ? 'text-m-success peer-valid:text-m-success peer-focus:text-m-success'
            : 'text-m-muted peer-valid:text-m-primary peer-focus:text-m-primary',
        labelClass,
        textSize,
      ]"
    >
      {{ label }}
    </label>

    <Icon
      v-if="iconName"
      :name="iconName"
      :size="iconSize"
      :class="[
        hasError
          ? 'text-m-error'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
        'pointer-events-none absolute right-2 top-1/2 -translate-y-1/2',
        iconColor,
      ]"
    />

  </div>
  <p
    v-if="hint && !hasError"
    :id="`${inputId}-hint`"
    class="mt-1 text-xs text-m-muted"
  >
    {{ hint }}
  </p>

  <p
    v-if="hasError"
    :id="`${inputId}-error`"
    class="mt-1 text-xs text-m-error"
  >
    {{ error }}
  </p>

  <p
    v-if="hasSuccess && !hasError"
    :id="`${inputId}-success`"
    class="mt-1 text-xs text-m-success"
  >
    {{ successMessage }}
  </p>
</template>

<script setup lang="ts">
import type {MaskInputOptions} from 'maska'
import {vMaska} from 'maska/vue'
import {computed, useAttrs} from 'vue'

defineOptions({inheritAttrs: false})

const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    name?: string
    autocomplete?: string
    modelValue?: string | null | undefined
    minWidth?: string
    maxWidth?: string
    text?: string
    textSize?: string
    inputClass?: string
    labelClass?: string
    required?: boolean
    maxLength?: number | string
    minLength?: number | string
    disabled?: boolean
    readonly?: boolean
    hint?: string
    error?: string
    success?: string
    succes?: string
    iconName?: string
    rounded?: string
    iconSize?: string | number
    iconColor?: string
    mask?: string | MaskInputOptions
  }>(),
  {
    id: '',
    name: '',
    autocomplete: '',
    modelValue: undefined,
    iconName: '',
    label: '',
    minWidth: 'w-96',
    maxWidth: '',
    inputClass: '',
    labelClass: '',
    text: 'text-lg',
    required: false,
    maxLength: undefined,
    minLength: undefined,
    readonly: false,
    textSize: 'text-sm',
    disabled: false,
    rounded: 'rounded-md',
    hint: '',
    error: '',
    success: '',
    succes: '',
    iconSize: 24,
    iconColor: '',
    mask: undefined,
  },
)

const attrs = useAttrs()
const generatedId = `malio-input-text-${Math.random().toString(36).slice(2, 10)}`

const inputId = computed(() => props.id?.toString() || generatedId)
const successMessage = computed(() => props.success || props.succes || '')
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!successMessage.value)

const describedBy = computed(() => {
  const ids: string[] = []
  if (props.hint) ids.push(`${inputId.value}-hint`)
  if (hasError.value) ids.push(`${inputId.value}-error`)
  if (hasSuccess.value && !hasError.value) ids.push(`${inputId.value}-success`)
  return ids.length ? ids.join(' ') : undefined
})

const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void
}>()

const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  emit('update:modelValue', target.value)
}

const iconInputPaddingClass = computed(() => {
  return props.iconName ? 'pr-10' : ''
})
</script>

<style scoped>
.floating-input:focus + label,
.floating-input:not(:placeholder-shown) + label {
  transform: translateY(-1.15rem) scale(0.9);
}

.floating-label {
  background: white;
  padding: 0 0.25rem;
}

.grow-height {
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  transform-origin: center;
}

.grow-height:focus {
  transform: scaleY(1.2);
}

@media (prefers-reduced-motion: reduce) {
  .grow-height {
    transition: none;
  }
}
</style>