Alixan UI

Енгізу өрісі

Floating label, таза күйлер және leading немесе trailing иконкаларға арналған slots бар form input көрсетеді.

Орнату

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-Custom id. Берілмесе автоматты түрде жасалады.
labelstring-Floating label мәтіні.
type'text' | 'email' | 'password' | 'tel' | 'url' | 'number''text'Нативті input type.
placeholderstring-Нативті input placeholder.
autocomplete'on' | 'off'-Нативті browser autocomplete әрекетін басқарады.
autofocusbooleanfalseMount кезінде input-қа focus береді.
requiredbooleanfalseМән бос болса, blur кейін локализацияланған required хабарламасын көрсетеді.
minnumber-Blur кейін минималды мәтін ұзындығын тексеру.
maxnumber-Blur кейін максималды мәтін ұзындығын тексеру.
patternstring-Нативті pattern жолы. Blur кейін мән толық pattern-ге сәйкес болуы керек.
patternMessagestring'validation.pattern'Pattern сәйкес келмегенде көрсетілетін validation хабарламасы.
maskstring-# цифрды білдіретін digit mask.
hintstring-Input астындағы көмекші мәтін.
errorstring-Қате хабарламасы. Сонымен қатар input-ты destructive state-ке ауыстырады.
disabledbooleanfalseInput-пен әрекеттесуді өшіреді.
readonlybooleanfalseInput-ты оқылатын, бірақ өзгертілмейтін етеді.
hasClearButtonbooleantrueInput-та мән бар және trailing slot жоқ кезде тазарту батырмасын көрсетеді.

XControl API

ҚасиетТүріӘдепкіСипаттама
valueT-Control басқаратын ағымдағы мән.
errorsRecord<string, string>{}required, min, max, pattern немесе external кілттері бойынша ағымдағы қателер.
valid / invalidbooleantrue / falseАғымдағы қателерге негізделген есептелетін валидтілік маркерлері.
touched / untouchedbooleanfalse / trueПайдаланушы өрістен шыққанын немесе валидация сұралғанын көрсетеді.
dirty / pristinebooleanfalse / trueМән өріс арқылы өзгертілгенін көрсетеді.
disabled / enabledbooleanfalse / trueInput пайдаланатын есептелетін enabled және disabled күйлері.
setValue(value)(value: T) => void-Control мәнін бағдарламалық түрде жаңартады.
reset(value?)(value?: T) => void-Мәнді, қателерді және әрекеттесу маркерлерін қалпына келтіреді.
validate()() => boolean-Input-ты touched деп белгілеп, validity нәтижесін қайтарады.
hasError(key)(key: string) => boolean-Белгілі бір validation қатесінің бар-жоғын тексереді.
disable() / enable()() => void-Control және байланысқан Input компонентін өшіреді немесе қосады.