feat: alert component

src/components/Alert/Alert.vue

@@ -0,0 +1,73 @@
+<template>
+  <div :class="alertClasses" role="alert" v-if="visible">
+    <div :class="inline ? '' : 'flex items-center'">
+      <svg v-if="icon" :class="['flex-shrink-0', 'w-5', 'h-5', textClasses]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
+      <span
+          :class="titleClasses"
+          v-if="title"
+      >
+        {{ title }}
+      </span>
+      <button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="!inline && closable">
+        <span class="sr-only">Dismiss</span>
+        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+      </button>
+    </div>
+    <div :class="contentClasses">
+      <slot />
+    </div>
+    <div class="inline-flex items-center">
+      <slot name="actions" />
+    </div>
+    <button type="button" :class="closeClasses" aria-label="Close" @click="onCloseClick" v-if="inline && closable">
+      <span class="sr-only">Dismiss</span>
+      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+    </button>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import { useAlertClasses } from './useAlertClasses'
+import { onBeforeUnmount, ref } from 'vue'
+
+export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
+
+const props = defineProps({
+  type: {
+    type: String as PropType<AlertType>,
+    default: 'info',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  icon: {
+    type: Boolean,
+    default: true,
+  },
+  border: {
+    type: Boolean,
+    default: false,
+  },
+  inline: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const { alertClasses, textClasses, closeClasses, contentClasses, titleClasses } = useAlertClasses(props)
+
+const visible = ref(true)
+
+const onCloseClick = () => {
+  visible.value = false
+}
+
+onBeforeUnmount(() => {
+  console.log('UNMOUNTED')
+})
+</script>

src/components/Alert/useAlertClasses.ts

@@ -0,0 +1,106 @@
+import type { AlertType } from './Alert.vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const defaultAlertClasses = 'p-4 text-sm'
+
+const alertTextClasses: Record<AlertType, string> = {
+    danger: 'text-red-700 dark:text-red-800',
+    dark: 'text-gray-700 dark:text-gray-300',
+    info: 'text-blue-700 dark:text-blue-800',
+    success: 'text-green-700 dark:text-green-800',
+    warning: 'text-yellow-700 dark:text-yellow-800',
+}
+
+const alertTypeClasses: Record<AlertType, string> = {
+    danger: 'bg-red-100 dark:bg-red-200',
+    dark: 'bg-gray-100 dark:bg-gray-700',
+    info: 'bg-blue-100 dark:bg-blue-200',
+    success: 'bg-green-100 dark:bg-green-200',
+    warning: 'bg-yellow-100 dark:bg-yellow-200',
+}
+
+const alertBorderClasses: Record<AlertType, string> = {
+    danger: 'border-t-4 border-red-500',
+    dark: 'border-t-4 border-gray-500',
+    info: 'border-t-4 border-blue-500',
+    success: 'border-t-4 border-green-500',
+    warning: 'border-t-4 border-yellow-500',
+}
+
+
+const defaultCloseButtonClasses = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8'
+
+const closeButtonClasses: Record<AlertType, string> = {
+    danger: 'hover:bg-red-200 dark:hover:bg-red-300 focus:ring-red-400 bg-red-100 dark:bg-red-200 text-red-500',
+    dark: 'dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white hover:bg-gray-200 focus:ring-gray-400 bg-gray-100 text-gray-500',
+    info: 'hover:bg-blue-200 dark:hover:bg-blue-300 focus:ring-blue-400 bg-blue-100 dark:bg-blue-200 text-blue-500',
+    success: 'bg-green-100 dark:bg-green-200 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+    warning: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300 bg-yellow-100 dark:bg-yellow-200 text-yellow-500',
+}
+
+export type UseAlertClassesProps = {
+    type: AlertType
+    border: boolean
+    icon: boolean
+    inline: boolean
+    title: string
+}
+
+export function useAlertClasses(props: UseAlertClassesProps): {
+    alertClasses: Ref<string>,
+    textClasses: Ref<string>,
+    closeClasses: Ref<string>,
+    contentClasses: Ref<string>,
+    titleClasses: Ref<string>,
+} {
+
+    const alertClasses = computed<string>(() => {
+        return classNames(
+            defaultAlertClasses,
+            alertTypeClasses[props.type],
+            textClasses.value,
+            props.border ? alertBorderClasses[props.type] : 'rounded-lg', // rounded only if no border
+            props.inline ? 'flex' : '',
+        )
+    })
+
+    const textClasses = computed<string>(() => {
+        return classNames(
+            alertTextClasses[props.type],
+        )
+    })
+
+    const closeClasses = computed<string>(() => {
+        return classNames(
+            defaultCloseButtonClasses,
+            closeButtonClasses[props.type],
+        )
+    })
+
+    const contentClasses = computed<string>(() => {
+        if(!props.inline) return classNames('mt-2 mb-4')
+        if(!props.icon && !props.title) return ''
+        return classNames(!props.title ? 'ml-3' : 'ml-1')
+    })
+
+    const titleClasses = computed<string>(() => {
+        if(!props.icon || !props.inline) return classNames(
+            'font-medium',
+            !props.inline ? 'text-lg ml-2' : '',
+        )
+        return classNames(
+            'font-medium ml-3',
+            !props.inline ? 'text-lg' : '',
+        )
+    })
+
+    return {
+        alertClasses,
+        textClasses,
+        closeClasses,
+        contentClasses,
+        titleClasses,
+    }
+}