@nova-design-system/nova-vue 3.14.0 → 3.15.0

package/dist/generated/components.d.ts

@@ -56,6 +56,7 @@ export declare const NvLoader: import("vue").DefineSetupFnComponent<JSX.NvLoader
 export declare const NvMenu: import("vue").DefineSetupFnComponent<JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenu & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvMenuitem: import("vue").DefineSetupFnComponent<JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvMenuitem & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvNotification: import("vue").DefineSetupFnComponent<JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvNotification & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
+export declare const NvNotificationcontainer: import("vue").DefineSetupFnComponent<JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvNotificationcontainer & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvPopover: import("vue").DefineSetupFnComponent<JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean>, {}, {}, JSX.NvPopover & import("./vue-component-lib/utils").InputProps<boolean> & {}, import("vue").PublicProps>;
 export declare const NvRow: import("vue").DefineSetupFnComponent<JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvRow & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
 export declare const NvStack: import("vue").DefineSetupFnComponent<JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.NvStack & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;

package/dist/generated/components.js

@@ -543,8 +543,12 @@ export const NvNotification = /*@__PURE__*/ defineContainer('nv-notification', u
     'icon',
     'dismissible',
     'hidden',
+    'initiallyHidden',
     'hiddenChanged'
 ], 'hidden', 'hidden-changed');
+export const NvNotificationcontainer = /*@__PURE__*/ defineContainer('nv-notificationcontainer', undefined, [
+    'position'
+]);
 export const NvPopover = /*@__PURE__*/ defineContainer('nv-popover', undefined, [
     'triggerElement',
     'open',

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from './plugin';
+export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';

package/dist/index.js

@@ -1,3 +1,4 @@
 export * from './generated/components';
 export * from './plugin';
+export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';

package/dist/plugin.d.ts

@@ -8,9 +8,19 @@
  * By providing custom implementations, we ensure that event names are
  * properly transformed, allowing Stencil components to work seamlessly in Vue.
  */
-import { Plugin } from 'vue';
+import { App } from 'vue';
+import { type NotificationServiceOptions } from './providers/NotificationService';
 /**
- * This is the Vue plugin that is used to define the custom elements and event
- * handlers.
+ * Configuration options for the NovaComponents plugin.
  */
-export declare const NovaComponents: Plugin;
+export interface NovaComponentsOptions {
+    /** Notification service configuration options. */
+    notifications?: NotificationServiceOptions;
+}
+/**
+ * This is the Vue plugin that is used to define the custom elements, event
+ * handlers, and includes the notification service.
+ */
+export declare const NovaComponents: {
+    install(app: App, options?: NovaComponentsOptions): Promise<void>;
+};

package/dist/plugin.js

@@ -9,6 +9,7 @@
  * properly transformed, allowing Stencil components to work seamlessly in Vue.
  */
 import { defineCustomElements } from '@nova-design-system/nova-webcomponents/loader';
+import { NvNotificationService, } from './providers/NotificationService';
 /**
  * Transforms the event name to kebab-case.
  * @param {string} eventName - The name of the event.
@@ -39,15 +40,18 @@ const ael = (el, eventName, cb, opts) => el.addEventListener(transformEventName(
  */
 const rel = (el, eventName, cb, opts) => el.removeEventListener(transformEventName(eventName), cb, opts);
 /**
- * This is the Vue plugin that is used to define the custom elements and event
- * handlers.
+ * This is the Vue plugin that is used to define the custom elements, event
+ * handlers, and includes the notification service.
  */
 export const NovaComponents = {
-    async install() {
+    async install(app, options = {}) {
+        // Define custom elements with event handling
         defineCustomElements(window, {
             ce: (eventName, opts) => new CustomEvent(transformEventName(eventName), opts),
             ael,
             rel,
         });
+        // Install notification service
+        NvNotificationService.install(app, options.notifications);
     },
 };

package/dist/providers/NotificationService.d.ts

@@ -0,0 +1,84 @@
+import { App, type Ref, type Component } from 'vue';
+import { NotificationEmphasis, FeedbackColors, NotificationPosition } from '../index';
+/**
+ * Action callbacks for notifications. Will render buttons automatically.
+ */
+export interface NotificationAction {
+    /** The label of the action. */
+    label: string;
+    /** The callback to execute when the action is clicked. */
+    onClick: () => void;
+}
+/**
+ * Options for creating a notification.
+ */
+export interface NotificationOptions {
+    /** Unique identifier for the notification. If not provided, one will be generated. */
+    id?: string;
+    /** Short and concise text for the notification heading. */
+    heading?: string;
+    /** Main content of the notification. */
+    message?: string;
+    /** Whether the notification can be manually dismissed via close button. */
+    dismissible?: boolean;
+    /** Adjusts the emphasis to make the notification more or less visually
+     * prominent to users. Use this to draw attention to important actions or
+     * reduce focus on less critical ones */
+    emphasis?: `${NotificationEmphasis}`;
+    /** Type of the notification, used to determine the color and default icon. */
+    feedback?: `${FeedbackColors}`;
+    /** Custom icon name to override the default icon. */
+    icon?: string;
+    /** Notification actions */
+    actions?: NotificationAction[];
+    /** Custom components for the notification actions. */
+    actionSlot?: Component;
+}
+/**
+ * A notification with all required fields populated.
+ */
+export interface Notification extends NotificationOptions {
+    /** Timestamp when the notification was created. */
+    createdAt: number;
+}
+/**
+ * Context value provided by the NotificationService.
+ */
+export interface NotificationContextValue {
+    /** Reactive array of active notifications. */
+    notifications: Ref<Notification[]>;
+    /** Function to show a new notification. Returns the notification ID. */
+    show: (options: NotificationOptions) => string;
+    /** Function to dismiss a specific notification by ID. This will remove the
+     * notification after the animation completes */
+    dismiss: (id: string) => void;
+    /** Function to immediately remove a specific notification by ID. */
+    remove: (id: string) => void;
+    /** Function to remove all active notifications immediately. */
+    removeAll: () => void;
+}
+/**
+ * Configuration options for the NotificationService plugin.
+ */
+export interface NotificationServiceOptions {
+    /** Position of the notification container on the screen. */
+    position?: `${NotificationPosition}`;
+    /** Maximum number of notifications to display at once. */
+    maxNotifications?: number;
+    /** Additional CSS class name for the notification container. */
+    className?: string;
+}
+/**
+ * Vue plugin for Nova notifications.
+ */
+export declare const NvNotificationService: {
+    install(app: App, options?: NotificationServiceOptions): void;
+};
+/**
+ * Composable to use notifications in any component.
+ *
+ * @returns {NotificationContextValue} The notification context
+ * @throws {Error} If used outside of an app with NvNotificationService installed
+ */
+export declare const useNotifications: () => NotificationContextValue;
+export default NvNotificationService;

package/dist/providers/NotificationService.js

@@ -0,0 +1,215 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { ref, createApp, h, } from 'vue';
+import { NvButton, NvNotification, NvNotificationcontainer, } from '../generated/components';
+/**
+ * Utility function to generate unique IDs.
+ *
+ * @returns {string} A unique identifier string
+ */
+const generateId = () => {
+    return `notification-${Date.now()}-${Math.random()
+        .toString(36)
+        .substr(2, 9)}`;
+};
+/**
+ * Utility function to unwrap a notification element from a ref.
+ * @param {NvNotificationRef} el The notification element ref
+ * @returns {HTMLNvNotificationElement | null} The notification element
+ */
+const unwrapNotificationEl = (el) => {
+    if (!el)
+        return null;
+    return '$el' in el ? el.$el : el;
+};
+class NotificationManager {
+    notifications = ref([]);
+    options;
+    containerApp = null;
+    constructor(options = {}) {
+        this.options = {
+            position: options.position || 'top-right',
+            maxNotifications: options.maxNotifications || 50,
+            className: options.className || '',
+        };
+        this.createContainer();
+    }
+    // keep track of all notification refs by id
+    elRefs = new Map();
+    // small helper to bind/unbind refs per id
+    setElRef = (id) => (el) => {
+        if (el)
+            this.elRefs.set(id, el);
+        else
+            this.elRefs.delete(id);
+    };
+    createContainer() {
+        // Create container element
+        const containerEl = document.createElement('div');
+        containerEl.id = 'nova-notification-container';
+        document.body.appendChild(containerEl);
+        // Create Vue app for the container
+        this.containerApp = createApp({
+            setup: () => {
+                return () => {
+                    const items = this.notifications.value.map((notification) => {
+                        const hasCustomActions = (notification.actions && notification.actions.length > 0) ||
+                            !!notification.actionSlot;
+                        const actionChildren = [];
+                        notification.actions?.forEach((action) => {
+                            actionChildren.push(h(NvButton, { onClick: action.onClick, emphasis: 'low', size: 'sm' }, { default: () => action.label }));
+                        });
+                        if (notification.actionSlot) {
+                            actionChildren.push(h(notification.actionSlot));
+                        }
+                        const actionContainer = hasCustomActions
+                            ? h('div', { slot: 'actions' }, actionChildren)
+                            : null;
+                        return h(NvNotification, {
+                            key: notification.id,
+                            ref: this.setElRef(notification.id),
+                            heading: notification.heading,
+                            message: notification.message,
+                            dismissible: notification.dismissible,
+                            emphasis: notification.emphasis,
+                            feedback: notification.feedback,
+                            icon: notification.icon,
+                            initiallyHidden: true,
+                            onHiddenChanged: (event) => {
+                                if (event.detail)
+                                    this.handleNotificationClose(notification.id);
+                            },
+                        }, {
+                            default: () => (actionContainer ? [actionContainer] : null),
+                        });
+                    });
+                    return h(NvNotificationcontainer, {
+                        position: this.options.position,
+                        class: this.options.className,
+                        'data-testid': 'notification-container',
+                    }, {
+                        // ✅ function slot avoids the warning
+                        default: () => items,
+                    });
+                };
+            },
+        });
+        this.containerApp.mount(containerEl);
+    }
+    handleNotificationClose(id) {
+        this.remove(id);
+    }
+    /**
+     * Show a new notification.
+     *
+     * @param {NotificationOptions} options - The notification options
+     * @returns {string} The notification ID
+     */
+    show = (options) => {
+        const id = options.id || generateId();
+        const notification = {
+            id,
+            heading: options.heading,
+            message: options.message,
+            dismissible: options.dismissible ?? true,
+            emphasis: options.emphasis ?? 'medium',
+            feedback: options.feedback ?? 'information',
+            actions: options.actions ?? [],
+            actionSlot: options.actionSlot,
+            icon: options.icon,
+            createdAt: Date.now(),
+        };
+        // Remove oldest notifications if we exceed max
+        const newNotifications = [notification, ...this.notifications.value];
+        if (newNotifications.length > this.options.maxNotifications) {
+            this.notifications.value = newNotifications.slice(0, this.options.maxNotifications);
+        }
+        else {
+            this.notifications.value = newNotifications;
+        }
+        setTimeout(() => {
+            const ref = this.elRefs.get(id);
+            const el = unwrapNotificationEl(ref);
+            el?.show();
+        }, 0);
+        return id;
+    };
+    /**
+     * Dismiss a specific notification by ID. This will remove the notification
+     * after the animation completes.
+     *
+     * @param {string} id - The notification ID to dismiss
+     */
+    dismiss = (id) => {
+        const ref = this.elRefs.get(id);
+        const el = unwrapNotificationEl(ref);
+        el?.dismiss();
+    };
+    /**
+     * Immediately remove a specific notification by ID.
+     *
+     * @param {string} id - The notification ID to dismiss
+     */
+    remove = (id) => {
+        this.notifications.value = this.notifications.value.filter((notification) => notification.id !== id);
+        this.elRefs.delete(id);
+    };
+    /**
+     * Clear all active notifications.
+     */
+    removeAll = () => {
+        this.notifications.value = [];
+    };
+    /**
+     * Get the current context value.
+     *
+     * @returns {NotificationContextValue} The context value
+     */
+    getContextValue = () => ({
+        notifications: this.notifications,
+        show: this.show,
+        remove: this.remove,
+        dismiss: this.dismiss,
+        removeAll: this.removeAll,
+    });
+    /**
+     * Destroy the notification manager and clean up resources.
+     */
+    destroy() {
+        if (this.containerApp) {
+            this.containerApp.unmount();
+            this.containerApp = null;
+        }
+        const containerEl = document.getElementById('nova-notification-container');
+        if (containerEl) {
+            document.body.removeChild(containerEl);
+        }
+    }
+}
+// Global notification manager instance
+let notificationManager = null;
+/**
+ * Vue plugin for Nova notifications.
+ */
+export const NvNotificationService = {
+    install(app, options = {}) {
+        notificationManager = new NotificationManager(options);
+        // Provide global property
+        app.config.globalProperties.$notifications =
+            notificationManager.getContextValue();
+        // Provide for composition API
+        app.provide('notifications', notificationManager.getContextValue());
+    },
+};
+/**
+ * Composable to use notifications in any component.
+ *
+ * @returns {NotificationContextValue} The notification context
+ * @throws {Error} If used outside of an app with NvNotificationService installed
+ */
+export const useNotifications = () => {
+    if (!notificationManager) {
+        throw new Error('useNotifications must be used in an app with NovaComponents installed. Use app.use(NovaComponents) in your main.ts');
+    }
+    return notificationManager.getContextValue();
+};
+export default NvNotificationService;

package/dist/providers/index.d.ts

@@ -0,0 +1,2 @@
+export { NvNotificationService, useNotifications, default as NotificationService, } from './NotificationService';
+export type { NotificationOptions, Notification, NotificationContextValue, NotificationServiceOptions, } from './NotificationService';

package/dist/providers/index.js

@@ -0,0 +1 @@
+export { NvNotificationService, useNotifications, default as NotificationService, } from './NotificationService';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.14.0",
+  "version": "3.15.0",
   "description": "Nova is a design system created by Elia Group to empower creators to efficiently build solutions that people love to use.",
   "author": "Elia Group",
   "homepage": "https://nova.eliagroup.io",
@@ -31,7 +31,9 @@
   },
   "scripts": {
     "build": "npm run tsc",
+    "build:watch": "npm run tsc:watch",
     "tsc": "tsc -p . --outDir ./dist",
+    "tsc:watch": "tsc -p . --outDir ./dist --watch",
     "storybook": "storybook dev -p 6008",
     "storybook.build": "storybook build -o ../../storybook-static/vue",
     "clean": "rimraf dist lib/generated",
@@ -41,7 +43,7 @@
     "@nova-design-system/nova-webcomponents": "*"
   },
   "devDependencies": {
-    "vue": "3.4.36",
+    "vue": "3.5.17",
     "nova-utils": "*",
     "nova-storybook-utils": "*"
   }