Complete AlertContainer props & events

package.json

@@ -25,6 +25,7 @@
     },
     "exports": {
         ".": "./src/index.js",
+        "./types": "./src/types.ts",
         "./components": "./src/components/index.js",
         "./plugins/*": "./src/plugins/*",
         "./*.less": "./src/less/*.less",

src/components/AlertContainer.vue

@@ -1,16 +1,27 @@
 <script setup lang="ts">
+import { AlertStyle } from '../types'
+
 interface Alert {
-    title: string
-    description: string
+    title?: string
+    description?: string
+    style?: AlertStyle
+    closeBtn?: boolean
 }
 
-defineProps<Alert>()
+withDefaults(defineProps<Alert>(), {
+    title: '',
+    description: '',
+    style: AlertStyle.Primary,
+    closeBtn: false
+})
 </script>
 
 <template>
-    <div class="uk-alert-danger" uk-alert>
-        <a class="uk-alert-close" uk-close></a>
-        <h3>{{ title }}</h3>
-        <p>{{ description }}</p>
+    <div :class="style" uk-alert>
+        <a v-if="closeBtn" class="uk-alert-close" uk-close @click="$emit('close')"></a>
+        <h3 v-if="title">{{ title }}</h3>
+        <p>
+            <slot>{{ description }}</slot>
+        </p>
     </div>
 </template>

src/types.ts

@@ -0,0 +1,6 @@
+export enum AlertStyle {
+    Primary = 'uk-alert-primary',
+    Success = 'uk-alert-success',
+    Warning = 'uk-alert-warning',
+    Danger = 'uk-alert-danger'
+}

tests/src/views/DashboardAlerts.vue

@@ -1,13 +1,38 @@
 <script setup lang="ts">
 import LayoutDashboard from '../layouts/LayoutDashboard.vue'
 import AlertContainer from '@userfrosting/theme-pink-cupcake/AlertContainer'
+import { AlertStyle } from '@userfrosting/theme-pink-cupcake/types'
+
+function displayAlert() {
+    alert('The alert will be closed')
+}
 </script>
 
 <template>
     <LayoutDashboard>
-        <AlertContainer title="Primary" description="Lorem Ipsum" />
-        <AlertContainer title="Success" description="Lorem Ipsum" />
-        <AlertContainer title="Warning" description="Lorem Ipsum" />
-        <AlertContainer title="Danger" description="Lorem Ipsum" />
+        <AlertContainer title="Primary" description="Lorem Ipsum" :style="AlertStyle.Primary" />
+        <AlertContainer title="Success" description="Lorem Ipsum" :style="AlertStyle.Success" />
+        <AlertContainer title="Warning" description="Lorem Ipsum" :style="AlertStyle.Warning" />
+        <AlertContainer title="Danger" description="Lorem Ipsum" :style="AlertStyle.Danger" />
+        <hr />
+        <AlertContainer
+            description="Alert with all defaults (No title, no style, no close button)" />
+        <AlertContainer title="Title" description="Alert with close button and title" close-btn />
+        <AlertContainer description="Alert with close button and no title" close-btn />
+        <AlertContainer title="Alert with no description" close-btn />
+        <AlertContainer title="Alert description as slot">
+            <font-awesome-icon icon="triangle-exclamation" />
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit
+            <font-awesome-icon icon="triangle-exclamation" />
+        </AlertContainer>
+        <AlertContainer title="Alert with both description" description="Description not used">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit
+        </AlertContainer>
+        <AlertContainer
+            title="Close button action"
+            description="Lorem Ipsum"
+            :style="AlertStyle.Danger"
+            close-btn
+            @close="displayAlert()" />
     </LayoutDashboard>
 </template>