Input ​

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <div>
      <AInput />
    </div>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <div>
      <AInput
        type="email"
        placeholder="Enter your email"
      />
    </div>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <AInput
      label="Email"
      type="email"
      value="user@domain.com"
    />

    <!-- 👉 Custom label -->
    <AInput
      id="form-x"
      value="user@domain.com"
      type="email"
    >
      <template #label>
        <label for="a-input-form-x">
          <span>Awesome </span>
          <span class="text-red">*</span>
        </label>
      </template>
    </AInput>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <div>
      <AInput
        id="demo-input-hint"
        label="Email"
        hint="Your email will be confidential"
      />
    </div>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <div>
      <AInput
        type="password"
        placeholder="Confirm password"
        append-inner-icon="i-bx-check-double"
      />
    </div>
    <div>
      <AInput
        type="text"
        placeholder="Enter your email"
        prepend-inner-icon="i-bx-at"
        hint="We never share your email with anyone"
      />
    </div>
    <div>
      <AInput
        type="text"
        placeholder="Enter your username"
        prepend-icon="i-bx-user"
      />
    </div>
    <div>
      <AInput
        type="password"
        placeholder="Enter your password"
        append-icon="i-bx-lock"
      />
    </div>
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <!-- 👉 text-xs -->
    <AInput
      class="text-xs col-start-1"
      placeholder="text-xs "
    />

    <!-- 👉 text-sm -->
    <AInput
      class="text-sm col-start-1"
      placeholder="text-sm "
    />

    <!-- 👉 default -->
    <AInput
      class="text-base col-start-1"
      placeholder="default"
    />

    <!-- 👉 text-lg -->
    <AInput
      class="text-lg col-start-1"
      placeholder="text-lg "
    />

    <!-- 👉 text-xl -->
    <AInput
      class="text-xl col-start-1"
      placeholder="text-xl "
    />
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <!-- 👉 rounded-0 -->
    <AInput
      input-wrapper-classes="rounded-0"
      placeholder="rounded-0"
    />

    <!-- 👉 rounded -->
    <AInput
      input-wrapper-classes="rounded"
      placeholder="rounded"
    />

    <!-- 👉 default -->
    <AInput placeholder="default" />

    <!-- 👉 rounded-xl -->
    <AInput
      input-wrapper-classes="rounded-xl"
      placeholder="rounded-xl"
    />

    <!-- 👉 rounded-2xl -->
    <AInput
      input-wrapper-classes="rounded-2xl"
      placeholder="rounded-2xl"
    />
  </div>
</template>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <AInput
      type="text"
      label="Text"
    />
    <AInput
      type="password"
      label="Password"
    />
    <AInput
      type="search"
      label="Search"
    />
    <AInput
      type="number"
      label="Number"
    />
    <AInput
      type="url"
      label="URL"
    />
    <AInput
      type="time"
      label="Time"
    />
    <AInput
      type="date"
      label="Date"
    />
    <AInput
      type="file"
      label="File"
    />
  </div>
</template>

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

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <AInput
      v-model="name"
      disabled
      label="Disabled"
    />
    <AInput
      v-model="name"
      readonly
      label="Readonly"
    />
  </div>
</template>

<script setup lang="ts">
import { useField } from 'vee-validate'

const isRequired = (val: string) => (val.trim() ? true : 'This is required')

const { errorMessage: usernameError, value: username } = useField('username', isRequired)
</script>

<template>
  <div class="grid-row sm:grid-cols-2 place-items-stretch">
    <div>
      <AInput
        v-model="username"
        :error="usernameError"
        label="Username"
        hint="Error message will get displayed here"
      />
    </div>
  </div>
</template>