Alert

<template>
  <NAlert
    title="Alert"
    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 class="flex 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 class="flex 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 class="flex 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 class="flex 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 class="flex 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>

<script setup lang="ts">
import type { NAlertProps } from '../../types'
import { computed } from 'vue'
import NButton from '../elements/Button.vue'
import NIcon from '../elements/Icon.vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NAlertProps>(), {
  icon: false,
})

const emit = defineEmits(['close'])

const slots = defineSlots<{
  default?: any
  title?: any
  description?: any
  icon?: any
  closeIcon?: any
}>()

const alertVariants = ['soft', 'outline', 'border'] as const
const hasVariant = computed(() => alertVariants.some(alertVariants => props.alert?.includes(alertVariants)))
const isBaseVariant = computed(() => props.alert?.includes('~'))

const alertClassVariants = computed(() => {
  const icon = {
    info: 'alert-info-icon',
    success: 'alert-success-icon',
    warning: 'alert-warning-icon',
    error: 'alert-error-icon',
    default: '',
  }

  // TODO: simplify and optimize this
  const alertType = props.alert ? (props.alert.includes('info') ? 'info' : (props.alert.includes('success') ? 'success' : (props.alert.includes('warning') ? 'warning' : (props.alert.includes('error') ? 'error' : 'default')))) : 'default'

  return {
    icon: icon[alertType],
  }
})

const icon = computed(() => {
  if (props.icon === '' || props.icon === undefined || props.icon === true)
    return alertClassVariants.value.icon

  return props.icon.toString()
})
</script>

<template>
  <div
    v-bind="$attrs"
    :alert="alert"
    class="alert"
    :class="[
      { 'alert-default-variant': !hasVariant && !isBaseVariant },
      una?.alert,
    ]"
  >
    <div
      alert="inner-wrapper"
      :class="una?.alertInnerWrapper"
    >
      <div
        v-if="props.icon !== false"
        alert="icon-wrapper"
        :class="una?.alertIconWrapper"
      >
        <slot name="icon">
          <NIcon
            alert="icon-base"
            :name="icon"
            aria-hidden="true"
          />
        </slot>
      </div>

      <slot>
        <div
          alert="content-wrapper"
          :class="una?.alertContentWrapper"
        >
          <div
            v-if="slots.title || title"
            alert="title"
            :class="una?.alertTitle"
          >
            <slot name="title">
              <div>
                {{ title }}
              </div>
            </slot>
          </div>
          <div
            v-if="slots.description || description"
            alert="description"
            :class="una?.alertDescription"
          >
            <slot name="description">
              <p>
                {{ description }}
              </p>
            </slot>
          </div>
        </div>
      </slot>

      <div
        v-if="slots.closeIcon || closable"
        alert="close-wrapper"
        :class="una?.alertCloseWrapper"
      >
        <div
          alert="close-inner-wrapper"
          :class="una?.alertCloseInnerWrapper"
        >
          <NButton
            alert="close"
            :class="una?.alertClose"
            btn="~"
            square
            @click="emit('close')"
          >
            <slot name="closeIcon">
              <NIcon
                :class="`${una?.alertCloseIconBase} alert-close-icon-base`"
                :name="una?.alertCloseIcon ?? 'alert-close-icon'"
                aria-hidden="true"
              />
            </slot>
          </NButton>
        </div>
      </div>
    </div>
  </div>
</template>