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

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

@@ -10,4 +10,11 @@ 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;
 };

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): () => 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) {
+  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);
+  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.3",
   "scripts": {
     "dev": "vite",
     "build": "vite build",