Add UFLabel + Refactor & Rename UFAlert

dist/components.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-yQdbks90.cjs");exports.AlertContainer=a._sfc_main;exports.AppLink=a._sfc_main$1;exports.CardBox=a._sfc_main$3;exports.CardBoxBig=a._sfc_main$4;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$8;exports.FormLogin=a._sfc_main$6;exports.FormRegister=a._sfc_main$7;exports.HeaderPage=a._sfc_main$5;exports.InfoBox=a._sfc_main$2;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$9;exports.NavBarDropdown=a._sfc_main$10;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$11;exports.NavBarLogin=a._sfc_main$12;exports.NavBarUserCard=a._sfc_main$13;exports.NavBarUserCardButton=a._sfc_main$14;exports.PageForgotPassword=a._sfc_main$17;exports.PageLogin=a._sfc_main$15;exports.PageRegister=a._sfc_main$16;exports.PageResendVerification=a._sfc_main$18;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$19;exports.SideBarItem=a._sfc_main$20;exports.SideBarLabel=a._sfc_main$21;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$22;exports.SprunjePaginator=a._sfc_main$23;exports.SprunjeTable=a._sfc_main$24;exports.default=a.PinkCupcakeComponents;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-Dwrhu1Yx.cjs");exports.AppLink=a._sfc_main$2;exports.CardBox=a._sfc_main$4;exports.CardBoxBig=a._sfc_main$5;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$9;exports.FormLogin=a._sfc_main$7;exports.FormRegister=a._sfc_main$8;exports.HeaderPage=a._sfc_main$6;exports.InfoBox=a._sfc_main$3;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$10;exports.NavBarDropdown=a._sfc_main$11;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$12;exports.NavBarLogin=a._sfc_main$13;exports.NavBarUserCard=a._sfc_main$14;exports.NavBarUserCardButton=a._sfc_main$15;exports.PageForgotPassword=a._sfc_main$18;exports.PageLogin=a._sfc_main$16;exports.PageRegister=a._sfc_main$17;exports.PageResendVerification=a._sfc_main$19;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$20;exports.SideBarItem=a._sfc_main$21;exports.SideBarLabel=a._sfc_main$22;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$23;exports.SprunjePaginator=a._sfc_main$24;exports.SprunjeTable=a._sfc_main$25;exports.UFAlert=a._sfc_main;exports.UFLabel=a._sfc_main$1;exports.default=a.PinkCupcakeComponents;

dist/components.d.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue';
-import { default as AlertContainer } from './components/AlertContainer.vue';
+import { default as UFAlert } from './components/UFAlert.vue';
+import { default as UFLabel } from './components/Content/UFLabel.vue';
 import { default as AppLink } from './components/Content/AppLink.vue';
 import { default as InfoBox } from './components/Content/InfoBox.vue';
 import { default as CardBox } from './components/Content/CardBox.vue';
@@ -29,14 +30,15 @@ import { default as SprunjeColumn } from './components/Sprunjer/SprunjeColumn.vu
 import { default as SprunjeHeader } from './components/Sprunjer/SprunjeHeader.vue';
 import { default as SprunjePaginator } from './components/Sprunjer/SprunjePaginator.vue';
 import { default as SprunjeTable } from './components/Sprunjer/SprunjeTable.vue';
-export { AlertContainer, AppLink, InfoBox, CardBox, CardBoxBig, MainContent, HeaderPage, FooterContent, FormLogin, FormRegister, FormForgotPassword, NavBar, NavBarDropdown, NavBarDropdownSeparator, NavBarItem, NavBarLogin, NavBarUserCard, NavBarUserCardButton, PageLogin, PageRegister, PageForgotPassword, PageResendVerification, SideBar, SideBarDropdown, SideBarItem, SideBarLabel, SprunjeColumn, SprunjeHeader, SprunjePaginator, SprunjeTable };
+export { UFAlert, UFLabel, AppLink, InfoBox, CardBox, CardBoxBig, MainContent, HeaderPage, FooterContent, FormLogin, FormRegister, FormForgotPassword, NavBar, NavBarDropdown, NavBarDropdownSeparator, NavBarItem, NavBarLogin, NavBarUserCard, NavBarUserCardButton, PageLogin, PageRegister, PageForgotPassword, PageResendVerification, SideBar, SideBarDropdown, SideBarItem, SideBarLabel, SprunjeColumn, SprunjeHeader, SprunjePaginator, SprunjeTable };
 declare const _default: {
     install: (app: App) => void;
 };
 export default _default;
 declare module 'vue' {
     interface GlobalComponents {
-        UFAlertContainer: typeof AlertContainer;
+        UFAlert: typeof UFAlert;
+        UFLabel: typeof UFLabel;
         UFAppLink: typeof AppLink;
         UFInfoBox: typeof InfoBox;
         UFCardBox: typeof CardBox;

dist/components.js

@@ -1,34 +1,35 @@
-import { _ as s, a as e, d as o, e as n, F as t, j as d, h as i, i as B, f as g, b as p, M as S, k as P, l as m, N as u, m as v, n as C, o as N, p as F, s as l, q as w, r as f, t as j, S as x, u as L, v as b, w as A, x as D, y as I, z as R, A as k, P as H } from "./components-D3kieM32.js";
+import { b as s, e, f as o, F as n, k as t, i as d, j as i, h as B, d as g, M as p, l as S, m as F, N as P, n as m, o as u, p as v, q as N, t as l, r as C, s as w, u as L, S as f, v as j, w as x, x as b, y as U, z as A, A as D, B as I, _ as R, a as k, P as H } from "./components-By2GeFa7.js";
 export {
-  s as AlertContainer,
-  e as AppLink,
-  o as CardBox,
-  n as CardBoxBig,
-  t as FooterContent,
-  d as FormForgotPassword,
-  i as FormLogin,
-  B as FormRegister,
-  g as HeaderPage,
-  p as InfoBox,
-  S as MainContent,
-  P as NavBar,
-  m as NavBarDropdown,
-  u as NavBarDropdownSeparator,
-  v as NavBarItem,
-  C as NavBarLogin,
-  N as NavBarUserCard,
-  F as NavBarUserCardButton,
+  s as AppLink,
+  e as CardBox,
+  o as CardBoxBig,
+  n as FooterContent,
+  t as FormForgotPassword,
+  d as FormLogin,
+  i as FormRegister,
+  B as HeaderPage,
+  g as InfoBox,
+  p as MainContent,
+  S as NavBar,
+  F as NavBarDropdown,
+  P as NavBarDropdownSeparator,
+  m as NavBarItem,
+  u as NavBarLogin,
+  v as NavBarUserCard,
+  N as NavBarUserCardButton,
   l as PageForgotPassword,
-  w as PageLogin,
-  f as PageRegister,
-  j as PageResendVerification,
-  x as SideBar,
-  L as SideBarDropdown,
-  b as SideBarItem,
-  A as SideBarLabel,
-  D as SprunjeColumn,
-  I as SprunjeHeader,
-  R as SprunjePaginator,
-  k as SprunjeTable,
+  C as PageLogin,
+  w as PageRegister,
+  L as PageResendVerification,
+  f as SideBar,
+  j as SideBarDropdown,
+  x as SideBarItem,
+  b as SideBarLabel,
+  U as SprunjeColumn,
+  A as SprunjeHeader,
+  D as SprunjePaginator,
+  I as SprunjeTable,
+  R as UFAlert,
+  k as UFLabel,
   H as default
 };

dist/components/AlertContainer.vue.d.ts → dist/components/Content/UFLabel.vue.d.ts

@@ -1,4 +1,4 @@
-import { AlertInterface } from '@userfrosting/sprinkle-core/types';
+import { Severity } from '@userfrosting/sprinkle-core/types';
 declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
@@ -8,9 +8,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
-    alert: AlertInterface;
+    severity: Severity | keyof typeof Severity;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    alert: AlertInterface;
+    severity: Severity | keyof typeof Severity;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

dist/components/UFAlert.vue.d.ts

@@ -0,0 +1,25 @@
+import { AlertInterface } from '@userfrosting/sprinkle-core/types';
+declare function __VLS_template(): {
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    attrs: Partial<{}>;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<{
+    alert: AlertInterface;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<{
+    alert: AlertInterface;
+}> & Readonly<{
+    onClose?: ((...args: any[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

dist/plugins.js

@@ -1,4 +1,4 @@
-import { c as is, g as fs, U as ts, P as rs } from "./components-D3kieM32.js";
+import { c as is, g as fs, U as ts, P as rs } from "./components-By2GeFa7.js";
 import { defineComponent as t2, computed as y, watch as zs, h as W3 } from "vue";
 const x3 = () => {
 };

src/components.ts

@@ -4,7 +4,8 @@
  */
 import type { App } from 'vue'
 
-import AlertContainer from './components/AlertContainer.vue'
+import UFAlert from './components/UFAlert.vue'
+import UFLabel from './components/Content/UFLabel.vue'
 import AppLink from './components/Content/AppLink.vue'
 import InfoBox from './components/Content/InfoBox.vue'
 import CardBox from './components/Content/CardBox.vue'
@@ -36,7 +37,8 @@ import SprunjePaginator from './components/Sprunjer/SprunjePaginator.vue'
 import SprunjeTable from './components/Sprunjer/SprunjeTable.vue'
 
 export {
-    AlertContainer,
+    UFAlert,
+    UFLabel,
     AppLink,
     InfoBox,
     CardBox,
@@ -70,7 +72,8 @@ export {
 
 export default {
     install: (app: App) => {
-        app.component('UFAlertContainer', AlertContainer)
+        app.component('UFAlert', UFAlert)
+            .component('UFLabel', UFLabel)
             .component('UFAppLink', AppLink)
             .component('UFInfoBox', InfoBox)
             .component('UFCardBox', CardBox)
@@ -105,7 +108,8 @@ export default {
 
 declare module 'vue' {
     export interface GlobalComponents {
-        UFAlertContainer: typeof AlertContainer
+        UFAlert: typeof UFAlert
+        UFLabel: typeof UFLabel
         UFAppLink: typeof AppLink
         UFInfoBox: typeof InfoBox
         UFCardBox: typeof CardBox

src/components/Content/FormForgotPassword.vue

@@ -28,7 +28,7 @@ async function sendForm() {
 <template>
     <form v-on:submit.prevent="sendForm()">
         <fieldset class="uk-fieldset">
-            <UFAlertContainer data-test="error" v-if="alert" :alert="alert" />
+            <UFAlert data-test="error" v-if="alert" :alert="alert" />
             <div class="uk-margin">
                 <div class="uk-inline uk-width-1-1">
                     <span class="uk-form-icon" uk-icon="icon: mail"></span>

src/components/Content/FormLogin.vue

@@ -40,7 +40,7 @@ async function sendLogin() {
 <template>
     <form v-on:submit.prevent="sendLogin()">
         <fieldset class="uk-fieldset">
-            <UFAlertContainer data-test="error" v-if="error" :alert="error" />
+            <UFAlert data-test="error" v-if="error" :alert="error" />
             <div class="uk-margin">
                 <div class="uk-inline uk-width-1-1">
                     <span class="uk-form-icon" uk-icon="icon: user"></span>

src/components/Content/FormRegister.vue

@@ -43,7 +43,7 @@ async function submitForm() {
 <template>
     <form v-on:submit.prevent="submitForm()">
         <fieldset class="uk-fieldset uk-form-stacked">
-            <UFAlertContainer data-test="error" v-if="error" :alert="error" />
+            <UFAlert data-test="error" v-if="error" :alert="error" />
 
             <div class="uk-margin">
                 <label class="uk-form-label" for="first_name">Name and email</label>

src/components/Content/FormResendVerification.vue

@@ -28,7 +28,7 @@ async function sendForm() {
 <template>
     <form v-on:submit.prevent="sendForm()">
         <fieldset class="uk-fieldset">
-            <UFAlertContainer data-test="error" v-if="alert" :alert="alert" />
+            <UFAlert data-test="error" v-if="alert" :alert="alert" />
             <div class="uk-margin">
                 <div class="uk-inline uk-width-1-1">
                     <span class="uk-form-icon" uk-icon="icon: mail"></span>

src/components/Content/UFLabel.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { defineProps, computed } from 'vue'
+import { Severity } from '@userfrosting/sprinkle-core/types'
+
+const props = defineProps<{
+    severity: Severity | keyof typeof Severity
+}>()
+
+/**
+ * Defines style class to use
+ */
+const styleClass = computed(() => {
+    switch (props.severity) {
+        case Severity.Success: {
+            return 'uk-label-success'
+        }
+        case Severity.Warning: {
+            return 'uk-label-warning'
+        }
+        case Severity.Danger: {
+            return 'uk-label-danger'
+        }
+        case Severity.Info: {
+            return 'uk-label-info'
+        }
+        case Severity.Muted: {
+            return 'uk-label-muted'
+        }
+        case Severity.Secondary: {
+            return 'uk-label-secondary'
+        }
+        case Severity.Primary:
+        default: {
+            return 'uk-label-primary'
+        }
+    }
+})
+</script>
+
+<template>
+    <span class="uk-label" :class="styleClass">
+        <slot />
+    </span>
+</template>