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="solid-primary"
      title="Solid primary"
      description="Lorem ipsum dolor sit amet consectetur adipisicing elit. aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum."
    />

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

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

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

    <NAlert
      alert="border-primary"
      title="Border primary"
      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="text-gray" title="Text gray (default)" :description="description" />

    <NAlert alert="solid-primary" title="Solid primary" :description="description" />

    <NAlert alert="solid-white" title="Solid white" :description="description" />

    <NAlert alert="solid-black" title="Solid black" :description="description" />

    <NAlert alert="text-info" title="Text info" :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="text-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="text-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="text-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="text-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="solid-gray">
    <NIcon name="i-lucide-circle-check" />
    <NAlertTitle class="overflow-ellipsis max-w-[calc(100%-4rem)]">
      The selected emails have been marked as spam.
    </NAlertTitle>

    <NButton
      btn="outline-gray"
      class="absolute right-3 top-2.5 h-6 shadow-none"
    >
      Undo
    </NButton>
  </NAlert>
</template>

<template>
  <NAlert alert="text-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-700 dark:text-success-200"
          >
            View receipt
          </NButton>
          <NButton btn="ghost-success" class="text-success-700 dark:text-success-200">
            Dismiss
          </NButton>
        </div>
      </div>
    </template>
  </NAlert>
</template>

<script setup lang="ts">
import type { NAlertProps } from '../../types'
import { computed } from 'vue'
import { cn } from '../../utils'
import Icon from '../elements/Icon.vue'
import AlertClose from './AlertClose.vue'
import AlertDescription from './AlertDescription.vue'
import AlertTitle from './AlertTitle.vue'

const props = withDefaults(defineProps<NAlertProps>(), {
  alert: 'text-gray',
  icon: false,
  closable: false,
  size: 'sm',
})

const emit = defineEmits<{
  (e: 'close'): void
}>()

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
    data-slot="alert"
    role="alert"
    :size
    :class="cn(
      'alert',
      props.una?.alert,
      props.class,
    )"
    :alert
  >
    <slot>
      <slot v-if="$slots.icon || props.icon !== false" name="icon">
        <Icon :name="icon" />
      </slot>

      <AlertTitle
        v-if="title || $slots.title"
        :size
        :una
        v-bind="props._alertTitle"
      >
        <slot name="title">
          {{ title }}
        </slot>
      </AlertTitle>

      <AlertDescription
        v-if="description || $slots.description"
        :size
        :una
        v-bind="props._alertDescription"
      >
        <slot name="description">
          {{ description }}
        </slot>
      </AlertDescription>

      <AlertClose
        v-if="$slots.close || props.closable"
        :size
        v-bind="props._alertClose"
        :una
        @click="emit('close')"
      >
        <slot name="close" />
      </AlertClose>

      <slot v-if="$slots.actions" name="actions" />
    </slot>
  </div>
</template>

<script setup lang="ts">
import type { NAlertTitleProps } from '../../types'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NAlertTitleProps>(), {
  size: 'sm',
})
</script>

<template>
  <div
    data-slot="alert-title"
    :size
    :class="cn(
      'alert-title',
      props.una?.alertTitle,
      props.class,
    )"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { NAlertDescriptionProps } from '../../types'
import { cn } from '../../utils'

const props = withDefaults(defineProps<NAlertDescriptionProps>(), {
  size: 'sm',
})
</script>

<template>
  <div
    data-slot="alert-description"
    :size
    :class="cn(
      'alert-description',
      props.una?.alertDescription,
      props.class,
    )"
  >
    <slot />
  </div>
</template>

<script setup lang="ts">
import type { NAlertCloseProps } from '../../types'
import { cn } from '../../utils'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(defineProps<NAlertCloseProps>(), {
  label: 'alert-close-icon',
  square: '1.4285714285714286em',
  btn: '~',
  icon: true,
})
</script>

<template>
  <div
    data-slot="alert-close-wrapper"
    :class="cn(
      'alert-close-wrapper',
      props.una?.alertCloseWrapper,
    )"
  >
    <slot>
      <NButton
        v-bind="{ ...props, ...$attrs }"
        :size
        :class="cn(
          props.btn === '~' && 'text-current hover:ring-1 hover:ring-current',
          props.class,
        )"
      />
    </slot>
  </div>
</template>