BsNotification:

- Add feature to enable hiding the notification icon.
- Improves initializing and removes unnecessary html element.
- Improves the notification provider in handling and processing notification items.
- Improves css variables and classes.
- Update CHANGELOG.md
- Bump to version 2.1.3

Author: ahmadfajar

CHANGELOG.md

@@ -3,6 +3,19 @@
 > All notable changes to this project will be documented in this file.
 
 
+## v2.1.3
+
+Released: December 10, 2024
+
+### Features & Improvements
+
+- **BsNotification**: 
+  - Add feature to enable hiding the notification icon. 
+  - Improves initializing and removes unnecessary html element. 
+  - Improves the notification provider in handling and processing notification items. 
+  - Improves css variables and classes.
+
+
 ## v2.1.2
 
 Released: December 08, 2024

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-mdbootstrap",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "description": "Bootstrap5 Material Design Components for Vue.js",
   "author": {
     "name": "Ahmad Fajar",

scss/banner.scss

@@ -1,5 +1,5 @@
 /*!
- * Vue MDBootstrap v2.1.2
+ * Vue MDBootstrap v2.1.3
  * Released under the BSD-3 License.
  * Copyright Ahmad Fajar (https://ahmadfajar.github.io).
  */

src/components/Notification/BsNotificationBar.ts

@@ -57,7 +57,7 @@ export default defineComponent<TBsNotificationBar>({
 
         return () =>
             h('div', {
-                class: `${cssPrefix}notification-bar`,
+                class: `${cssPrefix}dialog-progressbar`,
                 style: { width: barWidth.value + '%' },
             });
     },

src/components/Notification/BsNotificationItem.ts

@@ -1,35 +1,43 @@
-import { useRenderNotificationItem } from '@/components/Notification/mixins/notificationApi.ts';
+import {
+    useDeferHideNotification,
+    useRenderNotificationItem,
+} from '@/components/Notification/mixins/notificationApi.ts';
 import type {
-    INotificationProvider,
     TBsNotificationItem,
     TNotificationItemOptionProps,
-    TNotificationOption,
+    TNotificationVariant,
 } from '@/components/Notification/types';
-import { useVueMdbNotification } from '@/mixins/CommonApi.ts';
-import Helper from '@/utils/Helper';
+import {
+    booleanProp,
+    booleanTrueProp,
+    numberProp,
+    stringMandatoryProp,
+    stringProp,
+} from '@/mixins/CommonProps.ts';
 import type { Prop } from 'vue';
-import { defineComponent, onMounted, ref, shallowRef } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent<TBsNotificationItem>({
     name: 'BsNotificationItem',
     props: {
-        options: {
-            type: Object,
-            default: undefined,
-        } as Prop<TNotificationOption>,
+        message: stringMandatoryProp,
+        title: stringProp,
+        timeout: numberProp,
+        clickClose: booleanProp,
+        closeButton: booleanTrueProp,
+        iconOff: booleanProp,
+        progressBar: booleanProp,
+        variant: stringMandatoryProp as Prop<TNotificationVariant>,
     },
-    setup(props) {
+    emits: ['dismiss'],
+    setup(props, { emit }) {
         const thisProps = props as Readonly<TNotificationItemOptionProps>;
-        const provider = shallowRef<INotificationProvider>();
         const timerId = ref<number>();
 
         onMounted(() => {
-            provider.value = useVueMdbNotification();
-            timerId.value = Helper.defer(() => {
-                provider.value?.remove(<TNotificationOption>thisProps.options);
-            }, thisProps.options?.timeout as number);
+            useDeferHideNotification(emit, timerId, thisProps.timeout);
         });
 
-        return () => useRenderNotificationItem(thisProps, provider, timerId);
+        return () => useRenderNotificationItem(emit, thisProps, timerId);
     },
 });

src/components/Notification/mixins/NotificationProvider.ts

@@ -1,130 +1,122 @@
 import type {
     INotificationProvider,
-    TNotificationItem,
     TNotificationOption,
     TNotificationPosition,
     TNotificationVariant,
 } from '@/components/Notification/types';
 import Helper from '@/utils/Helper';
-import { reactive } from 'vue';
+import { type Reactive, reactive } from 'vue';
 
 export default class NotificationProvider implements INotificationProvider {
-    private readonly _item: TNotificationItem;
-    private readonly _positions: TNotificationPosition[] = [
-        'top-right',
-        'top-left',
-        'top-center',
-        'top-full-width',
-        'bottom-right',
-        'bottom-left',
-        'bottom-center',
-        'bottom-full-width',
-    ];
+    private readonly _collection: Reactive<Map<TNotificationPosition, TNotificationOption[]>>;
 
     constructor() {
-        const item = {} as TNotificationItem;
-
-        for (let i = 0; i <= this._positions.length - 1; i++) {
-            item[this._positions[i]] = [];
-        }
-
-        this._item = reactive(item);
+        this._collection = reactive(new Map<TNotificationPosition, TNotificationOption[]>());
     }
 
-    get notification() {
-        return this._item;
+    get collection(): Map<TNotificationPosition, TNotificationOption[]> {
+        return this._collection;
     }
 
     add(data: string | TNotificationOption): TNotificationOption | null {
-        const option = this._createOption(data);
-        const position = option.position as TNotificationPosition;
-
-        if (option.preventDuplicates) {
-            const keys = this.notification[position].keys();
-
-            for (const index of keys) {
-                if (
-                    this._item[position][index].title === option.title &&
-                    this._item[position][index].message === option.message
-                ) {
-                    console.warn('Duplicate notification', option);
-                    return null;
+        const toastOption = this._createOption(data);
+        const placement = toastOption.position as TNotificationPosition;
+        const toastItems = this._collection.get(placement);
+
+        if (!toastItems) {
+            this._collection.set(placement, [toastOption]);
+        } else {
+            if (toastOption.preventDuplicates) {
+                for (const toast of toastItems) {
+                    if (
+                        toast.message === toastOption.message &&
+                        toast.title === toastOption.title
+                    ) {
+                        console.warn('Duplicate notification', toastOption);
+                        return null;
+                    }
                 }
             }
+
+            toastItems.push(toastOption);
+            this._collection.set(placement, toastItems);
         }
-        this._item[position].push(option);
 
-        return option;
+        return toastOption;
     }
 
     clearAll() {
-        for (let i = 0; i < this._positions.length; i++) {
-            this._item[this._positions[i]] = [];
-        }
+        this._collection.clear();
     }
 
     close(item: TNotificationOption) {
         this.remove(item);
     }
 
+    private _deleteIfEmpty(placement: TNotificationPosition, data?: TNotificationOption[]): void {
+        if (Helper.isEmpty(data)) {
+            this._collection.delete(placement);
+        } else {
+            this._collection.set(placement, data ?? []);
+        }
+    }
+
     remove(item: TNotificationOption) {
         const oid = item.oid as string;
         const position = item.position as TNotificationPosition;
-        this._item[position] = this.notification[position].filter((it) => it.oid !== oid);
+        const toastItems = this._collection.get(position);
+        const results = toastItems?.filter((it) => it.oid !== oid);
+
+        this._deleteIfEmpty(position, results);
     }
 
     removeByType(variant: TNotificationVariant) {
-        for (let i = 0; i < this._positions.length; i++) {
-            const keys = this.notification[this._positions[i]].keys();
-
-            for (const index of keys) {
-                if (this.notification[this._positions[i]][index].variant === variant) {
-                    this.remove(this.notification[this._positions[i]][index]);
-                }
-            }
-        }
+        this._collection.forEach((values, placement) => {
+            const results = values.filter((it) => it.variant !== variant);
+            this._deleteIfEmpty(placement, results);
+        });
     }
 
-    error(option: string | TNotificationOption, title?: string): TNotificationOption | null {
-        return this._doAdd(option, 'error', title);
+    error(data: string | TNotificationOption, title?: string): TNotificationOption | null {
+        return this._doAdd(data, 'error', title);
     }
 
-    info(option: string | TNotificationOption, title?: string): TNotificationOption | null {
-        return this._doAdd(option, 'info', title);
+    info(data: string | TNotificationOption, title?: string): TNotificationOption | null {
+        return this._doAdd(data, 'info', title);
     }
 
-    success(option: string | TNotificationOption, title?: string): TNotificationOption | null {
-        return this._doAdd(option, 'success', title);
+    success(data: string | TNotificationOption, title?: string): TNotificationOption | null {
+        return this._doAdd(data, 'success', title);
     }
 
-    warning(option: string | TNotificationOption, title?: string): TNotificationOption | null {
-        return this._doAdd(option, 'warning', title);
+    warning(data: string | TNotificationOption, title?: string): TNotificationOption | null {
+        return this._doAdd(data, 'warning', title);
     }
 
     private _doAdd(
-        option: string | TNotificationOption,
+        data: string | TNotificationOption,
         variant: TNotificationVariant,
         title?: string
     ): TNotificationOption | null {
-        const data = this._createOption(option);
-        data.variant = variant;
-        data.title = title;
+        const option = Helper.isObject(data) ? data : ({ message: data } as TNotificationOption);
+        option.variant = variant;
+        option.title = title || option.title;
 
-        return this.add(data);
+        return this.add(option);
     }
 
     private _createOption(option: string | TNotificationOption): TNotificationOption {
         const defaultOption = {
             oid: Helper.uuid(true),
             clickClose: false,
             closeButton: true,
-            // closeOnHover: false,
+            iconOff: false,
             progressBar: false,
             preventDuplicates: false,
             position: 'bottom-right' as TNotificationPosition,
             variant: 'default' as TNotificationVariant,
             timeout: 6000,
-        };
+        } as TNotificationOption;
 
         if (Helper.isObject(option) && !Helper.isEmpty(option.message)) {
             return {