🟢 Input

<script setup lang="ts">
const value = ref('')
</script>

<template>
<div flex>
  <NInput
    v-model="value"
    type="text"
    placeholder="Enter your name"
  />
</div>
</template>

<template>
<div grid="~ sm:cols-2" gap-4>
  <NInput
    input="outline"
    placeholder="This is the outline variant (default color)"
  />

  <NInput
    input="solid"
    placeholder="This is the solid variant (default color)"
  />

  <NInput
    input="~"
    placeholder="This is the base input"
  />
</div>
</template>

<template>
<div flex="~ col" gap-4>
  <span class="text-sm font-medium">Dynamic colors:</span>

  <div grid="~ sm:cols-2" gap-4>
    <NInput
      input="outline-primary"
      placeholder="This is the primary color (default)"
    />
    <NInput
      input="outline-indigo"
      placeholder="This is the indigo color"
    />
    <NInput
      input="outline-rose"
      placeholder="This is the rose color"
    />
    <NInput
      input="outline-lime"
      placeholder="This is the lime color"
    />
  </div>

  <hr border="base">

  <span class="text-sm font-medium">Static color:</span>

  <div>
    <NInput
      input="outline-gray"
      placeholder="This is the gray color"
    />
  </div>
</div>
</template>

<template>
<div grid="~ cols-1 sm:cols-2" gap-4>
  <NInput
    size="xs"
    placeholder="This is extra small size"
  />

  <NInput
    size="sm"
    placeholder="This is small size"
  />

  <NInput
    size="md"
    placeholder="This is base or md size (default)"
  />

  <NInput
    size="2xl"
    placeholder="This is 2xl size"
  />

  <NInput
    size="lg"
    class="rounded-full"
    placeholder="This is custom"
  />

  <NInput
    size="26px"
    placeholder="This is custom"
    class="rounded-none"
  />

  <NInput
    :una="{
      inputWrapper: 'sm:col-span-2',
    }"
    size="6rem"
    placeholder="This is 6rem size"
  />
</div>
</template>

<template>
<div grid="~ cols-1 sm:cols-2" gap-4>
  <div sm:col-span-1>
    <NInput
      leading="i-heroicons-magnifying-glass-20-solid"
      placeholder="This is leading icon"
    />
  </div>

  <div sm:col-span-1>
    <NInput
      trailing="i-heroicons-question-mark-circle-20-solid text-primary"
      placeholder="This is trailing icon with custom class"
    />
  </div>

  <div sm:col-span-2>
    <NInput
      input="outline-purple"
      size="1.3rem"
      leading="i-heroicons-paper-clip-20-solid"
      trailing="i-heroicons-chat-bubble-left-ellipsis-20-solid"
      :una="{
        inputLeading: 'text-yellow',
        inputTrailing: 'text-blue',
      }"
      placeholder="You can also use una to add custom class"
    />
  </div>
</div>
</template>

<template>
<div grid="~ cols-1 sm:cols-2" gap-4>
  <NInput
    disabled
    loading
    placeholder="This is the disabled variant with loading indicator"
  />

  <NInput
    :una="{
      inputLoading: 'text-lime',
      inputLoadingIcon: 'i-tabler-fidget-spinner',
    }"
    loading
    placeholder="Custom color loading icon"
  />

  <NInput
    :una="{
      inputLoading: 'text-rose animate-none',
      inputLoadingIcon: 'i-svg-spinners-blocks-shuffle-3',
    }"
    loading
    reverse
    placeholder="Loading icon is on the left side"
  />

  <NInput
    :una="{
      inputLoading: 'animate-pulse text-yellow',
      inputLoadingIcon: 'i-heroicons-ellipsis-horizontal-20-solid',
    }"
    loading
    placeholder="This is possible too"
  />
</div>
</template>

<template>
<div grid="~ sm:cols-2" gap-4>
  <NInput
    status="error"
    placeholder="This is the outline variant with error status"
  />
  <NInput
    type="email"
    status="success"
    placeholder="This is the outline variant with success status"
  />
  <NInput
    type="email"
    status="warning"
    placeholder="This is the outline variant with warning status"
  />
  <NInput
    type="email"
    status="info"
    placeholder="This is the outline variant with info status"
  />
</div>
</template>

<template>
<div grid="~ sm:cols-2" gap-4>
  <NInput
    disabled
    placeholder="You can't click here (disabled)"
  />

  <NInput
    readonly
    placeholder="You can't type here (readonly)"
  />
</div>
</template>

<script setup lang="ts">
function click(description: string) {
// eslint-disable-next-line no-alert
alert(description)
}

const isPasswordVisible = ref(false)
</script>

<template>
<div grid="~ cols-1 sm:cols-2" gap-4>
  <NInput
    :type="isPasswordVisible ? 'text' : 'password'"
    :trailing="isPasswordVisible ? 'i-heroicons-eye-20-solid' : 'i-heroicons-eye-slash-20-solid'"
    :una="{
      inputTrailing: 'pointer-events-auto cursor-pointer',
    }"
    model-value="Password"
    @trailing="isPasswordVisible = !isPasswordVisible"
  />

  <NInput
    input="outline-purple"
    leading="i-heroicons-hand-thumb-up-20-solid"
    trailing="i-heroicons-arrow-down-tray-20-solid "
    :una="{
      inputLeading: 'active:scale-120 text-blue pointer-events-auto cursor-pointer active:text-green',
      inputTrailing: 'active:scale-90 text-yellow pointer-events-auto cursor-pointer active:text-lime',
    }"
    placeholder="Leading and trailing icons are clickable"
    @leading="click('leading icon is clicked')"
    @trailing="click('trailing icon is clicked')"
  />
</div>
</template>

<template>
<div flex>
  <NInput
    placeholder="Search"
    trailing="i-heroicons-chat-bubble-left-right-20-solid"
    class="pl-12"
  >
    <template #leading>
      <!-- TODO convert to NAvatar soon -->
      <div class="rounded-full bg-base">
        <img
          class="h-6"
          src="https://avatars.githubusercontent.com/u/33350692?s=400&u=49395c835e8197ae2ee42ca02c95e828d8f64239&v=4"
        >
      </div>
    </template>
  </NInput>
</div>
</template>

<template>
<div flex>
  <NInput
    leading="i-heroicons-currency-dollar-20-solid"
    placeholder="Search"
    class="pr-12"
  >
    <template #trailing>
      <span class="text-sm">
        USD
      </span>
    </template>
  </NInput>
</div>
</template>