@voicenter-team/voicenter-ui-plus 3.0.2 → 3.0.4

package/library/types/index.d.ts

@@ -59,6 +59,7 @@ export { default as VcProgress } from './components/VcProgress/VcProgress.vue';
 export { default as VcProgressCircular } from './components/VcProgress/VcProgressCircular.vue';
 export { default as VcSkeletonLoader } from './components/VcSkeletonLoader/VcSkeletonLoader.vue';
 export { default as VcNotification } from './components/VcNotification/VcNotification.vue';
+export { default as VcPluginOverlays } from './components/VcPluginOverlays/VcPluginOverlays.vue';
 export { default as VcForm } from './components/VcForm/VcForm.vue';
 export { default as VcFormItem } from './components/VcForm/VcFormItem.vue';
 export { default as VcSplitButton } from './components/VcSplitButton/VcSplitButton.vue';
@@ -81,6 +82,7 @@ export { default as allCountries } from './enum/countries';
 export type { CountryDataType } from './enum/countries';
 export { VcIconList } from './enum/icons';
 export { default as makeDataTestAttributeValue } from './utils/makeDataTestAttributeValue';
+export { mountPluginOverlays } from './utils/mountPluginOverlays';
 export { convertToUnit, resolveFieldData, getRefElement, getFileSize } from './utils/helpers';
 export { default as UniqueComponentId } from './utils/UniqueComponentId';
 export { default as useInputColor } from './composables/input/useInputColor';

package/library/types/types/Entry.types.d.ts

@@ -1,5 +1,6 @@
 import { LanguageType } from '../localization/Localization.types';
 import { UIThemeConfig } from '../theme/theme.types';
+import type { OverlayNotificationsConfig } from './Overlay.types';
 export declare type UIConfig = {
     lang?: LanguageType;
     themeConfig?: UIThemeConfig;
@@ -10,4 +11,18 @@ export declare type UIConfig = {
      * Defaults to `false`.
      */
     injectIconFont?: boolean;
+    /**
+     * When `true` (default), plugin install mounts {@link VcPluginOverlays} into
+     * `document.body` so `useConfirmModal`, `useConfirmPopup`, and toast
+     * notifications work without adding overlay components to App.vue.
+     * Set to `false` if you mount `<VcPluginOverlays />` yourself.
+     */
+    mountOverlays?: boolean;
+    /**
+     * Notification hosts inside auto-mounted `VcPluginOverlays`.
+     * - `'default'` — one top-right container (default)
+     * - `'none'` — no notification host; add your own `<VcNotification />` in App.vue
+     * - array — multiple `{ group, position }` hosts (pass matching `group` in `$notify.add`)
+     */
+    overlayNotifications?: OverlayNotificationsConfig;
 };

package/library/types/types/Overlay.types.d.ts

@@ -0,0 +1,15 @@
+import type { ToastPositionType } from './VcNotification.types';
+export type OverlayNotificationHost = {
+    group?: string;
+    position?: ToastPositionType;
+};
+/**
+ * Controls which `VcNotification` hosts are rendered inside `VcPluginOverlays`.
+ * - `'default'` — single container (top-right, ungrouped messages)
+ * - `'none'` — skip notifications; mount your own `<VcNotification />` in App.vue
+ * - `OverlayNotificationHost[]` — multiple positioned/grouped containers
+ */
+export type OverlayNotificationsConfig = 'default' | 'none' | OverlayNotificationHost[];
+export type VcPluginOverlaysProps = {
+    notifications?: OverlayNotificationsConfig;
+};

package/library/types/types/index.d.ts

@@ -50,3 +50,4 @@ export * from './Tabs';
 export * from './VcEditableTabs.types';
 export * from './VcSipFlow.types';
 export * from './VcTour.types';
+export * from './Overlay.types';

package/library/types/utils/mountPluginOverlays.d.ts

@@ -0,0 +1,10 @@
+import type { App, Component } from 'vue';
+/**
+ * Mounts singleton overlay components (confirm modal/popover, notifications)
+ * into `document.body` with the consumer app's context so globally registered
+ * components, directives, i18n, and provide/inject all resolve correctly.
+ *
+ * Plugin mode calls this automatically. Tree-shake consumers can either mount
+ * `<VcPluginOverlays />` in App.vue or call this helper after `createApp`.
+ */
+export declare function mountPluginOverlays(app: App, component: Component, props?: Record<string, unknown>): () => void;

package/library/utils/mountPluginOverlays.mjs

@@ -0,0 +1,24 @@
+import { createVNode, render } from "vue";
+const HOST_ATTR = "data-vc-plugin-overlays";
+function mountPluginOverlays(app, component, props) {
+  if (typeof document === "undefined") {
+    return () => {
+    };
+  }
+  let container = document.querySelector(`[${HOST_ATTR}]`);
+  if (!container) {
+    container = document.createElement("div");
+    container.setAttribute(HOST_ATTR, "");
+    document.body.appendChild(container);
+  }
+  const vnode = createVNode(component, props);
+  vnode.appContext = app._context;
+  render(vnode, container);
+  return () => {
+    render(null, container);
+    container.remove();
+  };
+}
+export {
+  mountPluginOverlays
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voicenter-team/voicenter-ui-plus",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "scripts": {
     "dev": "vite",
     "build": "vite build",