@nova-design-system/nova-vue 3.14.0-beta.0 → 3.14.0

package/dist/generated/components.d.ts

@@ -56,7 +56,6 @@ 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,12 +543,8 @@ 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,4 +1,3 @@
 export * from './generated/components';
 export * from './plugin';
-export * from './providers';
 export * from '@nova-design-system/nova-webcomponents/constants';

package/dist/index.js

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

package/dist/plugin.d.ts

@@ -8,19 +8,9 @@
  * By providing custom implementations, we ensure that event names are
  * properly transformed, allowing Stencil components to work seamlessly in Vue.
  */
-import { App } from 'vue';
-import { type NotificationServiceOptions } from './providers/NotificationService';
+import { Plugin } from 'vue';
 /**
- * Configuration options for the NovaComponents plugin.
+ * This is the Vue plugin that is used to define the custom elements and event
+ * handlers.
  */
-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>;
-};
+export declare const NovaComponents: Plugin;

package/dist/plugin.js

@@ -9,7 +9,6 @@
  * 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.
@@ -40,18 +39,15 @@ 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, event
- * handlers, and includes the notification service.
+ * This is the Vue plugin that is used to define the custom elements and event
+ * handlers.
  */
 export const NovaComponents = {
-    async install(app, options = {}) {
-        // Define custom elements with event handling
+    async install() {
         defineCustomElements(window, {
             ce: (eventName, opts) => new CustomEvent(transformEventName(eventName), opts),
             ael,
             rel,
         });
-        // Install notification service
-        NvNotificationService.install(app, options.notifications);
     },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nova-design-system/nova-vue",
-  "version": "3.14.0-beta.0",
+  "version": "3.14.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,9 +31,7 @@
   },
   "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",
@@ -43,7 +41,7 @@
     "@nova-design-system/nova-webcomponents": "*"
   },
   "devDependencies": {
-    "vue": "3.5.17",
+    "vue": "3.4.36",
     "nova-utils": "*",
     "nova-storybook-utils": "*"
   }

package/dist/providers/NotificationService.d.ts

@@ -1,84 +0,0 @@
-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

@@ -1,215 +0,0 @@
-/* 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

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

package/dist/providers/index.js

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