malio-layer-ui/app/components/malio/input/InputUpload.vue

<template>
  <div
    :class="mergedGroupClass"
  >
    <input
      ref="fileInputRef"
      type="file"
      :accept="accept"
      class="hidden"
      :disabled="disabled"
      @change="onFileChange"
    >

    <input
      :id="inputId"
      :class="mergedInputClass"
      :disabled="disabled"
      :value="currentDisplayValue"
      :readonly="true"
      :aria-invalid="!!error"
      :aria-describedby="describedBy"
      v-bind="attrs"
      placeholder="_"
      type="text"
      @click="openFilePicker"
      @focus="isFocused = true"
      @blur="isFocused = false"
    >

    <label
      v-if="label"
      :for="inputId"
      :class="mergedLabelClass"
    >
      {{ label }}
    </label>

    <IconifyIcon
      v-if="displayIcon"
      icon="mdi:cloud-arrow-up-outline"
      :width="24"
      :height="24"
      data-test="icon"
      :class="[
      hasError
        ? 'text-m-danger'
        : hasSuccess
          ? 'text-m-success' : 'text-m-muted',
      'pointer-events-none absolute right-[10px] top-1/2 -translate-y-1/2',
    ]"
    />

  </div>
  <p
    v-if="hint || hasError || hasSuccess"
    :id="`${inputId}-describedby`"
    :class="[
        hasError
          ? 'text-m-danger'
          : hasSuccess
            ? 'text-m-success'
            : 'text-m-muted',
        'mt-1 text-xs ml-[2px] ',
      ]"
  >
    {{ hint || error || success }}
  </p>
</template>

<script setup lang="ts">

import {computed, ref, useAttrs, useId} from 'vue'
import { Icon as IconifyIcon } from '@iconify/vue'
import {twMerge} from 'tailwind-merge'

defineOptions({name: 'MalioInputUpload', inheritAttrs: false})

const props = withDefaults(
  defineProps<{
    id?: string
    label?: string
    modelValue?: string | null | undefined
    inputClass?: string
    labelClass?: string
    groupClass?: string
    disabled?: boolean
    hint?: string
    error?: string
    success?: string
    displayIcon?: boolean
    accept?: string
  }>(),
  {
    id: '',
    modelValue: undefined,
    label: '',
    inputClass: '',
    labelClass: '',
    groupClass: '',
    disabled: false,
    hint: '',
    error: '',
    success: '',
    displayIcon: true,
    accept: '',
  },
)

const attrs = useAttrs()
const generatedId = useId()
const localValue = ref('')
const isFocused = ref(false)
const fileInputRef = ref<HTMLInputElement | null>(null)

const inputId = computed(() => props.id?.toString() || `malio-input-upload-${generatedId}`)
const isControlled = computed(() => props.modelValue !== undefined)
const currentDisplayValue = computed(() => (isControlled.value ? (props.modelValue ?? '') : localValue.value))
const shouldFloatLabel = computed(() => isFocused.value || currentDisplayValue.value.length > 0)
const hasError = computed(() => !!props.error)
const hasSuccess = computed(() => !!props.success)
const isFilled = computed(() => currentDisplayValue.value.trim().length > 0)
const mergedGroupClass = computed(() =>
  twMerge(
    'relative mt-4 flex h-12 w-full items-center',
    props.groupClass,
  ),
)
const mergedInputClass = computed(() =>
  twMerge(
    'floating-input grow-height peer min-h-[40px] w-full border bg-white pl-3 pr-3 py-1 outline-none placeholder:text-transparent focus:border-2 text-lg rounded-md',
    isFilled.value ? 'border-black' : 'border-m-muted',
    disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-pointer',
    hasError.value
      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
      : hasSuccess.value
        ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
        : 'focus:border-m-primary',
    props.displayIcon ? '!pr-10' : '',
    'focus:pl-[11px]',
    props.inputClass,
  ),
)
const mergedLabelClass = computed(() =>
  twMerge(
    'floating-label absolute top-2 mt-[5px] inline-block origin-left transition-transform duration-150 font-medium text-sm',
    'left-3',
    shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
    disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
    hasError.value
      ? 'text-m-danger'
      : hasSuccess.value
        ? 'text-m-success'
        : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',
    props.labelClass,
  ),
)

const describedBy = computed(() => {
  const ids: string[] = []
  if (props.hint && !hasSuccess.value && !hasError.value) 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
  (event: 'file-selected', file: File): void
}>()

const openFilePicker = () => {
  if (props.disabled) return
  fileInputRef.value?.click()
}

const onFileChange = (event: Event) => {
  const target = event.target as HTMLInputElement
  const file = target.files?.[0]
  if (file) {
    const fileName = file.name
    if (!isControlled.value) {
      localValue.value = fileName
    }
    emit('update:modelValue', fileName)
    emit('file-selected', file)
  }
}

const disabled = computed(() => props.disabled)
</script>

<style scoped>
.floating-label {
  background: white;
  padding: 0 0.25rem;
}

.grow-height {
  transition: border-color 160ms ease, box-shadow 160ms ease, padding-top 160ms ease, padding-bottom 160ms ease;
}

.grow-height:focus {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
@media (prefers-reduced-motion: reduce) {
  .grow-height { transition: none; }
}
</style>