Input

<script setup lang="ts">
import type { HTMLAttributes, InputHTMLAttributes } from "vue"
import { cn } from "@/lib/utils"

const props = defineProps<{
  /** Доп. классы. Имя `class` — соглашение shadcn-vue (не `className`). */
  class?: HTMLAttributes["class"]
  type?: InputHTMLAttributes["type"]
}>()

// Корень компонента — нативный <input>, а не компонент Reka UI, поэтому
// `v-model` НЕ проходит сюда сквозным атрибутом: он раскрывается в проп
// `modelValue` и слушатель `onUpdate:modelValue`, которые на нативном элементе
// осели бы мёртвым атрибутом. Без явного defineModel любой `<Input v-model>`
// молча односторонний — поле печатается, состояние не меняется.
//
// Биндим `:value` вместо `v-model` намеренно: когда модель не используется,
// она `undefined`, атрибут не выставляется и сквозной `value="..."`
// (неуправляемые поля в блоках) продолжает работать. `v-model` затирал бы его
// пустой строкой.
const model = defineModel<string | number>()

function onInput(event: Event) {
  model.value = (event.target as HTMLInputElement).value
}
</script>

<template>
  <input
    :type="props.type"
    data-slot="input"
    :value="model"
    :class="
      cn(
        'cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
        props.class
      )
    "
    @input="onInput"
  />
</template>

export { default as Input } from "./Input.vue"