🟢 Input

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

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

<template>
  <div class="grid gap-4 sm:cols-2">
    <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 class="flex flex-col gap-4">
    <span class="text-sm font-medium">Dynamic colors:</span>

    <div class="grid gap-4 sm:cols-2">
      <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>

    <NSeparator />

    <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 class="grid cols-1 gap-4 sm:cols-2">
    <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 class="grid cols-1 gap-4 sm:cols-2">
    <div class="sm:col-span-1">
      <NInput
        leading="i-heroicons-magnifying-glass-20-solid"
        placeholder="This is leading icon"
      />
    </div>

    <div class="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 class="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 class="grid cols-1 gap-4 sm:cols-2">
    <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 class="grid gap-4 sm:cols-2">
    <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 class="grid gap-4 sm:cols-2">
    <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 class="grid cols-1 gap-4 sm:cols-2">
    <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 class="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 class="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>