Alixan UI

Поле ввода

Отображает form input с floating label, аккуратными состояниями и slots для leading или trailing иконок.

Установка

npx alixan-ui-nuxt add input

This command installs only the base Input component with built-in validation props.

Использование

Label поднимается при фокусе или наличии значения. Используйте XControl для значения и состояния валидации.

<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <Input :control="control" label="Name" />
</template>

Состояние

<script setup lang="ts">
const readonlyControl = useXControl('readonly@example.com')
const disabledControl = useXControl('')
const errorControl = useXControl('')
</script>

<template>
  <div class="grid w-full gap-3">
    <Input :control="readonlyControl" label="Readonly" readonly />
    <Input :control="disabledControl" label="Disabled" disabled />
    <Input :control="errorControl" label="Required" error="Required field" />
 </div>
</template>

Валидация

Состояние invalid в родителе: true
<script setup lang="ts">
const control = useXControl('')

const check = () => {
  control.validate()
}
</script>

<template>
  <Input :control="control" label="Username" required :min="3" :max="20" />
  <Button @click="check">{{ $t('inputValidation.check') }}</Button>
  <span>
    {{ $t('inputValidation.parentInvalid') }}: {{ control.invalid }}
  </span>
</template>

Длина

6-12 characters

<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <Input :control="control" label="Code" :min="6" :max="12" hint="6-12 characters" />
</template>

С иконкой

<script setup lang="ts">
import { Eye, EyeOff, Lock, Mail } from '@lucide/vue'

const emailControl = useXControl('')
const passwordControl = useXControl('')
const isPasswordVisible = ref(false)
</script>

<template>
  <div class="grid w-full gap-3">
    <EmailInput :control="emailControl">
      <template #leading>
        <Mail class="size-5" />
      </template>
    </EmailInput>

    <Input
      :control="passwordControl"
      label="Password"
      :type="isPasswordVisible ? 'text' : 'password'"
    >
      <template #leading>
        <Lock class="size-5" />
      </template>
      <template #trailing>
        <IconButton
          variant="ghost"
          color="default"
          size="sm"
          @click="isPasswordVisible = !isPasswordVisible"
        >
          <EyeOff v-if="isPasswordVisible" />
          <Eye v-else />
        </IconButton>
      </template>
    </Input>
  </div>
</template>

Варианты

Install focused wrappers when you want a dedicated component for a specific input pattern.

Username Input

npx alixan-ui-nuxt add username-input
<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <UsernameInput :control="control" />
</template>

Email Input

npx alixan-ui-nuxt add email-input
<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <EmailInput :control="control" required />
</template>

Password Input

npx alixan-ui-nuxt add password-input
<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <PasswordInput
    :control="control"
    required
    :min="8"
    :max="32"
  />
</template>

Phone Input

npx alixan-ui-nuxt add phone-input

Default country code is +7. The input keeps it as a prefix and applies ### ### ## ## to the number. 

<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <PhoneInput
    :control="control"
    country-code="+7"
    placeholder="777 777 77 77"
  />
</template>

ИИН

npx alixan-ui-nuxt add iin-input
<script setup lang="ts">
const control = useXControl('')
</script>

<template>
  <IinInput :control="control" required />
</template>

Справочник API

СвойствоТипПо умолчаниюОписание
controlXControl<string | number | null>-Необязательный XControl, который хранит значение, состояние валидации и маркеры взаимодействия с полем.
idstring-Пользовательский id. Генерируется автоматически, если не передан.
labelstring-Текст floating label.
type'text' | 'email' | 'password' | 'tel' | 'url' | 'number''text'Нативный type поля.
placeholderstring-Нативный placeholder поля.
autocomplete'on' | 'off'-Управляет нативным browser autocomplete.
autofocusbooleanfalseФокусирует поле при mount.
requiredbooleanfalseПоказывает локализованное сообщение required после blur, если значение пустое.
minnumber-Валидация минимальной длины текста после blur.
maxnumber-Валидация максимальной длины текста после blur.
patternstring-Нативная строка pattern. Значение должно полностью совпасть с pattern после blur.
patternMessagestring'validation.pattern'Сообщение валидации, когда pattern не совпадает.
maskstring-Маска цифр, где # — цифра.
hintstring-Вспомогательный текст под полем.
errorstring-Сообщение ошибки. Также переключает поле в destructive state.
disabledbooleanfalseОтключает взаимодействие с полем.
readonlybooleanfalseДелает поле читаемым, но недоступным для редактирования.
hasClearButtonbooleantrueПоказывает кнопку очистки, когда у поля есть значение и нет trailing slot.

API XControl

СвойствоТипПо умолчаниюОписание
valueT-Текущее значение, которым управляет control.
errorsRecord<string, string>{}Текущие ошибки по ключам required, min, max, pattern или external.
valid / invalidbooleantrue / falseВычисляемые маркеры валидности на основе текущих ошибок.
touched / untouchedbooleanfalse / trueПоказывает, покинул ли пользователь поле или была запрошена валидация.
dirty / pristinebooleanfalse / trueПоказывает, изменялось ли значение через поле.
disabled / enabledbooleanfalse / trueВычисляемые состояния enabled и disabled, используемые Input.
setValue(value)(value: T) => void-Программно обновляет значение control.
reset(value?)(value?: T) => void-Сбрасывает значение, ошибки и маркеры взаимодействия.
validate()() => boolean-Помечает поле как touched и возвращает результат валидации.
hasError(key)(key: string) => boolean-Проверяет наличие конкретной ошибки валидации.
disable() / enable()() => void-Отключает или включает control и связанный Input.