Input (输入框)

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <KunInput
    v-model="value"
    label="Username"
    placeholder="Type here…"
    description="Helper text below the field."
    class-name="max-w-xs"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const v = ref('')
</script>

<template>
  <div class="flex max-w-xs flex-col gap-3">
    <KunInput v-model="v" size="xs" placeholder="xs" />
    <KunInput v-model="v" size="sm" placeholder="sm" />
    <KunInput v-model="v" size="md" placeholder="md" />
    <KunInput v-model="v" size="lg" placeholder="lg" />
    <KunInput v-model="v" size="xl" placeholder="xl" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const a = ref('')
const b = ref('')
const c = ref('locked')
</script>

<template>
  <div class="flex max-w-xs flex-col gap-3">
    <KunInput v-model="a" label="With error" error="This field is required." />
    <KunInput v-model="b" label="Invalid (no message)" is-invalid />
    <KunInput v-model="c" label="Disabled" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('Clear me')
const password = ref('')
</script>

<template>
  <div class="flex max-w-xs flex-col gap-3">
    <KunInput
      v-model="text"
      label="可清除"
      placeholder="Type something…"
      is-clearable
    />
    <KunInput
      v-model="password"
      type="password"
      label="密码"
      placeholder="••••••••"
      reveal-password
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const search = ref('')
const amount = ref('')
</script>

<template>
  <div class="flex max-w-xs flex-col gap-3">
    <KunInput v-model="search" placeholder="Search…" description="带前缀图标">
      <template #prefix>
        <KunIcon name="lucide:search" class="text-default-400 size-4" />
      </template>
    </KunInput>
    <KunInput v-model="amount" placeholder="0.00" description="带后缀单位">
      <template #prefix>
        <span class="text-default-400 text-sm">$</span>
      </template>
      <template #suffix>
        <span class="text-default-400 text-sm">USD</span>
      </template>
    </KunInput>
  </div>
</template>