🟢 Alert

<template>
  <NAlert
    title="WARNING"
    description="This documentation is still a work in progress. The package itself is not yet officially released and some sections of this documentation may be incomplete or missing entirely until the first release. We are working hard to complete the documentation as soon as possible."
  />
</template>

<template>
  <div flex="~ col" space-y-4>
    <NAlert
      alert="outline"
      title="Outline variant (default)"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
    />

    <NAlert
      alert="soft"
      title="Soft variant"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
    />

    <NAlert
      alert="border"
      title="Border variant"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
    />
  </div>
</template>

<script setup lang="ts">
const description = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.'
</script>

<template>
  <div flex="~ col" space-y-4>
    <NAlert alert="outline-info" title="Info color" :description="description" />

    <NAlert alert="border-success" title="Success color" :description="description" />

    <NAlert alert="outline-warning" title="Warning color" :description="description" />

    <NAlert alert="border-error" title="Error color" :description="description" />

    <NAlert alert="soft-purple" title="Purple color" :description="description" />

    <NAlert alert="outline-lime" title="Lime color" :description="description" />

    <NAlert alert="border-pink" title="Pink color" :description="description" />

    <NAlert alert="outline-sky" title="Sky color" :description="description" />
  </div>
</template>

<template>
  <div flex="~ col" space-y-4>
    <NAlert
      title="Customize icon"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      icon="i-heroicons-beaker-20-solid"
    />

    <NAlert
      alert="outline-info"
      title="Info icon"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      icon
    />

    <NAlert
      alert="outline-success"
      title="Success icon"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      icon
    />

    <NAlert
      alert="outline-warning"
      title="Warning icon"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      icon
    />

    <NAlert
      alert="outline-error"
      title="Error icon"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      icon
    />
  </div>
</template>

<script setup lang="ts">
const alerts = {
  title: 'Attention needed',
  description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.',
  icon: true,
}
</script>

<template>
  <div flex="~ col" space-y-4>
    <NAlert size="xs" alert="outline-info" v-bind="alerts" />

    <NAlert size="sm" alert="outline-success" v-bind="alerts" />

    <NAlert size="24px" alert="outline-warning" v-bind="alerts" />

    <NAlert size="2rem" alert="outline-error" v-bind="alerts" />
  </div>
</template>

<script setup lang="ts">
const close1 = ref(false)
const close2 = ref(false)

// auto reset if all alerts are closed
watchEffect(() => {
  if (close1.value && close2.value) {
    setTimeout(() => {
      close1.value = false
      close2.value = false
    }, 1000)
  }
})
</script>

<template>
  <div flex="~ col" space-y-4>
    <NAlert
      v-if="!close1"
      title="Closable alert 1"
      closable
      @close="close1 = true"
    />

    <NAlert
      v-if="!close2"
      title="Closable alert 2"
      closable
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
      @close="close2 = true"
    />
  </div>
</template>

<template>
  <NAlert
    alert="outline-info"
    icon
  >
    <template #title>
      <div class="flex-1 md:flex md:justify-between space-y-3 md:space-y-0">
        <p class="text-brand">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus vel optio aliquam autem dolorem enim! Quo, nesciunt deleniti. Natus quisquam quae quis quam ipsa reiciendis at alias molestiae voluptate repudiandae.
        </p>
        <NButton
          btn="text-info"
          to="#"
          label="i-heroicons-chevron-double-right"
          icon
          class="animate-pulse p-0 md:ml-4"
        />
      </div>
    </template>
  </NAlert>
</template>

<template>
  <NAlert alert="soft-error" icon>
    <template #title>
      There were some errors with your submission
    </template>
    <template #description>
      <ul role="list" class="list-disc pl-4.5 space-y-1">
        <li>The team name must be a string.</li>
        <li>The team name must be at least 1 character.</li>
      </ul>
    </template>
  </NAlert>
</template>

<template>
  <NAlert alert="border-success" icon>
    <template #title>
      Payment completed
    </template>
    <template #description>
      <div class="text-sm text-success-700 dark:text-success-200">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.</p>
      </div>
      <div class="mt-4">
        <div class="flex -mx-2.5 -my-1.5">
          <NButton leading="i-heroicons-document-text-20-solid" btn="ghost-success" class="text-success-800 dark:text-success-100">
            View receipt
          </NButton>
          <NButton btn="ghost-success" class="text-success-800 dark:text-success-100">
            Dismiss
          </NButton>
        </div>
      </div>
    </template>
  </NAlert>
</template>