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

package/library/components/VcPluginOverlays/VcPluginOverlays.vue.mjs

@@ -7,7 +7,8 @@ import _sfc_main$3 from "../VcPopover/VcConfirmPopover.vue.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VcPluginOverlays",
   props: {
-    notifications: { default: "default" }
+    notifications: { default: "default" },
+    appendTo: { default: "body" }
   },
   setup(__props) {
     const props = __props;
@@ -22,16 +23,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        shouldRenderDefaultNotification.value ? (openBlock(), createBlock(_sfc_main$1, { key: 0 })) : createCommentVNode("", true),
+        shouldRenderDefaultNotification.value ? (openBlock(), createBlock(_sfc_main$1, {
+          key: 0,
+          "teleported-to": __props.appendTo
+        }, null, 8, ["teleported-to"])) : createCommentVNode("", true),
         (openBlock(true), createElementBlock(Fragment, null, renderList(notificationHosts.value, (item, index) => {
           return openBlock(), createBlock(_sfc_main$1, {
             key: notificationHostKey(item, index),
             group: item.group,
-            position: item.position
-          }, null, 8, ["group", "position"]);
+            position: item.position,
+            "teleported-to": __props.appendTo
+          }, null, 8, ["group", "position", "teleported-to"]);
         }), 128)),
-        createVNode(_sfc_main$2),
-        createVNode(_sfc_main$3)
+        createVNode(_sfc_main$2, { "append-to": __props.appendTo }, null, 8, ["append-to"]),
+        createVNode(_sfc_main$3, { "append-to": __props.appendTo }, null, 8, ["append-to"])
       ], 64);
     };
   }

package/library/components/VcPopover/VcConfirmPopover.vue.mjs

@@ -21,7 +21,8 @@ const DEFAULT_PLACEMENT = "bottom-start";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "VcConfirmPopover",
   props: {
-    options: { default: () => ({}) }
+    options: { default: () => ({}) },
+    appendTo: { default: "body" }
   },
   emits: ["close", "confirm"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -170,6 +171,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         placement: placement.value,
         "popper-class": [BASE_CLASS, popoverOptions.value.popoverClass].join(" "),
         teleported: popoverOptions.value.teleported,
+        "append-to": __props.appendTo,
         "gpu-acceleration": false,
         "stop-popper-mouse-event": popoverOptions.value.mouseEvent,
         offset: popoverOptions.value.offset,
@@ -233,7 +235,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ])
         ]),
         _: 1
-      }, 8, ["visible", "virtual-ref", "effect", "persistent", "placement", "popper-class", "teleported", "stop-popper-mouse-event", "offset", "hide-after"])) : createCommentVNode("", true);
+      }, 8, ["visible", "virtual-ref", "effect", "persistent", "placement", "popper-class", "teleported", "append-to", "stop-popper-mouse-event", "offset", "hide-after"])) : createCommentVNode("", true);
     };
   }
 });

package/library/plugin.mjs

@@ -323,9 +323,15 @@ const install = function installCore(app, config) {
   }
   loadTextFont();
   if ((config == null ? void 0 : config.mountOverlays) !== false) {
-    mountPluginOverlays(app, _sfc_main$y, {
-      notifications: (config == null ? void 0 : config.overlayNotifications) ?? "default"
-    });
+    mountPluginOverlays(
+      app,
+      _sfc_main$y,
+      {
+        notifications: (config == null ? void 0 : config.overlayNotifications) ?? "default",
+        appendTo: (config == null ? void 0 : config.overlayAppendTo) ?? "body"
+      },
+      config == null ? void 0 : config.overlayContainer
+    );
   }
 };
 export {

package/library/types/components/VcPluginOverlays/VcPluginOverlays.vue.d.ts

@@ -1,12 +1,16 @@
 import type { OverlayNotificationsConfig } from '../../types/Overlay.types';
 interface IProps {
     notifications?: OverlayNotificationsConfig;
+    appendTo?: string | HTMLElement;
 }
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
     notifications: string;
+    appendTo: string;
 }>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
     notifications: string;
+    appendTo: string;
 }>>> & Readonly<{}>, {
+    appendTo: string | HTMLElement;
     notifications: OverlayNotificationsConfig;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/library/types/components/VcPopover/VcConfirmPopover.vue.d.ts

@@ -2,12 +2,18 @@ import { TPopConfirmOptions } from '../../types';
 import type { TIcon } from '../../types/icons.types';
 interface IProps {
     options?: TPopConfirmOptions;
+    /**
+     * Teleport target for the popover content. Defaults to `'body'`. Pass an
+     * element inside a shadow root so the popover renders within the shadow DOM.
+     */
+    appendTo?: string | HTMLElement;
 }
 declare function clickOutside(evt: Event): void;
 declare function onCancel(): void;
 declare function onConfirm(): void;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
     options: () => {};
+    appendTo: string;
 }>>, {
     onConfirm: typeof onConfirm;
     onCancel: typeof onCancel;
@@ -29,11 +35,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     confirm: () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IProps>, {
     options: () => {};
+    appendTo: string;
 }>>> & Readonly<{
     onConfirm?: (() => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
     options: TPopConfirmOptions;
+    appendTo: string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -25,4 +25,19 @@ export declare type UIConfig = {
      * - array — multiple `{ group, position }` hosts (pass matching `group` in `$notify.add`)
      */
     overlayNotifications?: OverlayNotificationsConfig;
+    /**
+     * Teleport target for the auto-mounted overlays (confirm modal, confirm
+     * popover, notifications). Defaults to `'body'`. Pass an element inside a
+     * shadow root (custom-element / web-component hosts) so the overlays render
+     * INSIDE the shadow DOM and pick up its scoped styles, instead of escaping
+     * to `document.body`.
+     */
+    overlayAppendTo?: string | HTMLElement;
+    /**
+     * Where to append the overlay host element that `VcPluginOverlays` mounts
+     * into. Defaults to `document.body`. For shadow-DOM hosts pass the shadow
+     * root (or an element inside it) so the overlay host itself lives within
+     * the shadow tree.
+     */
+    overlayContainer?: Element | DocumentFragment;
 };

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

@@ -12,4 +12,11 @@ export type OverlayNotificationHost = {
 export type OverlayNotificationsConfig = 'default' | 'none' | OverlayNotificationHost[];
 export type VcPluginOverlaysProps = {
     notifications?: OverlayNotificationsConfig;
+    /**
+     * Teleport target for the overlay hosts (confirm modal, confirm popover,
+     * notifications). Defaults to `'body'`. Pass an element inside a shadow
+     * root so the overlays render INSIDE the shadow DOM (custom-element hosts)
+     * and inherit its scoped styles.
+     */
+    appendTo?: string | HTMLElement;
 };

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

@@ -1,10 +1,16 @@
 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.
+ * with the consumer app's context so globally registered components,
+ * directives, i18n, and provide/inject all resolve correctly.
+ *
+ * The host element is appended to `container` (defaults to `document.body`).
+ * For shadow-DOM / custom-element hosts pass the shadow root (or an element
+ * inside it) so the overlays live within the shadow tree and inherit its
+ * scoped styles — pair it with the `appendTo` prop so the teleported content
+ * stays inside the same root.
  *
  * 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;
+export declare function mountPluginOverlays(app: App, component: Component, props?: Record<string, unknown>, container?: Element | DocumentFragment): () => void;

package/library/utils/mountPluginOverlays.mjs

@@ -1,22 +1,24 @@
 import { createVNode, render } from "vue";
 const HOST_ATTR = "data-vc-plugin-overlays";
-function mountPluginOverlays(app, component, props) {
+function mountPluginOverlays(app, component, props, container) {
   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 mountRoot = container ?? document.body;
+  let existingHost = mountRoot.querySelector(`[${HOST_ATTR}]`);
+  if (!existingHost) {
+    existingHost = document.createElement("div");
+    existingHost.setAttribute(HOST_ATTR, "");
+    mountRoot.appendChild(existingHost);
   }
+  const host = existingHost;
   const vnode = createVNode(component, props);
   vnode.appContext = app._context;
-  render(vnode, container);
+  render(vnode, host);
   return () => {
-    render(null, container);
-    container.remove();
+    render(null, host);
+    host.remove();
   };
 }
 export {

package/package.json

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