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

package/library/types/components/VcSelect/VcSelectGrouped.vue.d.ts

@@ -5,8 +5,8 @@ export type OptionObjectGroupedValueType<Option extends OptionObjectValueType> =
 };
 declare const _default: <Option extends object, Config extends ConfigOptionType<Option>, Model extends ExtractValueType<Option, Config>, Multiple extends boolean = false>(__VLS_props: {
     id?: string | undefined;
-    size?: "" | "small" | "default" | "large" | undefined;
-    color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    size?: "" | "default" | "small" | "large" | undefined;
+    color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     readonly onFocus?: ((evt: Event) => any) | undefined;
     readonly onBlur?: ((evt: Event) => any) | undefined;
     readonly onChange?: ((option: (Multiple extends true ? Option[] : Option) | undefined) => any) | undefined;
@@ -63,8 +63,8 @@ declare const _default: <Option extends object, Config extends ConfigOptionType<
 } | undefined, __VLS_expose?: ((exposed: import('vue').ShallowUnwrapRef<{}>) => void) | undefined, __VLS_setup?: Promise<{
     props: {
         id?: string | undefined;
-        size?: "" | "small" | "default" | "large" | undefined;
-        color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        size?: "" | "default" | "small" | "large" | undefined;
+        color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         readonly onFocus?: ((evt: Event) => any) | undefined;
         readonly onBlur?: ((evt: Event) => any) | undefined;
         readonly onChange?: ((option: (Multiple extends true ? Option[] : Option) | undefined) => any) | undefined;
@@ -125,8 +125,8 @@ declare const _default: <Option extends object, Config extends ConfigOptionType<
     __ctx?: {
         props: {
             id?: string | undefined;
-            size?: "" | "small" | "default" | "large" | undefined;
-            color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            size?: "" | "default" | "small" | "large" | undefined;
+            color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             readonly onFocus?: ((evt: Event) => any) | undefined;
             readonly onBlur?: ((evt: Event) => any) | undefined;
             readonly onChange?: ((option: (Multiple extends true ? Option[] : Option) | undefined) => any) | undefined;

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

@@ -64,8 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
     onChange?: ((option: VcSplitButtonOption) => any) | undefined;
     onClick?: ((option: VcSplitButtonOption | undefined) => any) | undefined;
 }>, {
-    size: "" | "small" | "default" | "large";
-    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    size: "" | "default" | "small" | "large";
+    color: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative";
     loading: boolean;
     disabled: boolean;
     popoverMaxWidth: string | number;

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

@@ -5,7 +5,7 @@ declare const _default: <Model extends string | number | boolean | undefined>(__
     size?: VcSwitchSizeType | undefined;
     values?: Model[] | undefined;
     ariaLabel?: string | undefined;
-    color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     readonly onChange?: ((model: Model) => any) | undefined;
     readonly onInput?: ((model: Model) => any) | undefined;
     width?: string | number | undefined;
@@ -52,7 +52,7 @@ declare const _default: <Model extends string | number | boolean | undefined>(__
         size?: VcSwitchSizeType | undefined;
         values?: Model[] | undefined;
         ariaLabel?: string | undefined;
-        color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         readonly onChange?: ((model: Model) => any) | undefined;
         readonly onInput?: ((model: Model) => any) | undefined;
         width?: string | number | undefined;
@@ -103,7 +103,7 @@ declare const _default: <Model extends string | number | boolean | undefined>(__
             size?: VcSwitchSizeType | undefined;
             values?: Model[] | undefined;
             ariaLabel?: string | undefined;
-            color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             readonly onChange?: ((model: Model) => any) | undefined;
             readonly onInput?: ((model: Model) => any) | undefined;
             width?: string | number | undefined;

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

@@ -55,7 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<im
 }>, {
     borderless: boolean;
     icon: TIcon;
-    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    color: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative";
     label: string;
     disabled: boolean;
     square: boolean;

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

@@ -49,7 +49,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     removeItem: typeof removeItem;
     disabled: import("vue").ComputedRef<boolean>;
     isError: import("vue").ComputedRef<boolean>;
-    color: import("vue").ComputedRef<"" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative">;
+    color: import("vue").ComputedRef<"" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative">;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: (string | number)[]) => void;
     add: (value: {
@@ -97,7 +97,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     id: string;
     class: string;
-    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    color: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative";
     style: string | false | import("vue").CSSProperties | StyleValue[] | null;
     disabled: boolean;
     max: number;
@@ -115,7 +115,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     allowDuplicate: boolean;
     tagBorderless: boolean;
     tagSquare: boolean;
-    tagColor: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    tagColor: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative";
     tagMaxContent: string | number;
     valueType: "string" | "number";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -59,7 +59,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }) => any) | undefined;
 }>, {
     id: string;
-    color: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative";
+    color: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative";
     disabled: boolean;
     name: string;
     placeholder: string;

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

@@ -4,7 +4,7 @@ import type Node from 'element-plus/es/components/tree/src/model/node';
 declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config extends VcTreeConfig<VcTreeNodeGenericType>>(__VLS_props: {
     scrollHeight?: string | number | undefined;
     lazy?: boolean | undefined;
-    color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     loading?: boolean | undefined;
     options?: VcTreeNodeGenericType[] | undefined;
     config: Config;
@@ -19,7 +19,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
     expandedKeys?: (string | number)[] | undefined;
     defaultCheckedKeys?: (string | number)[] | undefined;
     filterPrefixIcon?: TIcon | undefined;
-    filterPrefixIconColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    filterPrefixIconColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     useTypes?: VcTreeNodeGenericType["type"][] | undefined;
     clearFilterOnOptionsChange?: boolean | undefined;
 } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, __VLS_ctx?: {
@@ -50,7 +50,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
     props: {
         scrollHeight?: string | number | undefined;
         lazy?: boolean | undefined;
-        color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         loading?: boolean | undefined;
         options?: VcTreeNodeGenericType[] | undefined;
         config: Config;
@@ -65,7 +65,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
         expandedKeys?: (string | number)[] | undefined;
         defaultCheckedKeys?: (string | number)[] | undefined;
         filterPrefixIcon?: TIcon | undefined;
-        filterPrefixIconColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        filterPrefixIconColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         useTypes?: VcTreeNodeGenericType["type"][] | undefined;
         clearFilterOnOptionsChange?: boolean | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
@@ -100,7 +100,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
         props: {
             scrollHeight?: string | number | undefined;
             lazy?: boolean | undefined;
-            color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             loading?: boolean | undefined;
             options?: VcTreeNodeGenericType[] | undefined;
             config: Config;
@@ -115,7 +115,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
             expandedKeys?: (string | number)[] | undefined;
             defaultCheckedKeys?: (string | number)[] | undefined;
             filterPrefixIcon?: TIcon | undefined;
-            filterPrefixIconColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            filterPrefixIconColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             useTypes?: VcTreeNodeGenericType["type"][] | undefined;
             clearFilterOnOptionsChange?: boolean | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;

package/library/types/components/VcTree/VcTreeSelect.vue.d.ts

@@ -3,7 +3,7 @@ import { VcTreeConfig, VcTreeNodeType } from '../../types';
 declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config extends VcTreeConfig<VcTreeNodeGenericType>, Model extends ExtractValueType<VcTreeNodeGenericType, Config>>(__VLS_props: {
     id?: string | undefined;
     scrollHeight?: string | number | undefined;
-    color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
     name?: string | undefined;
@@ -21,7 +21,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
     config: Config;
     emptyText?: string | undefined;
     tagBorderless?: boolean | undefined;
-    tagColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+    tagColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
     nodeKey?: keyof VcTreeNodeGenericType | undefined;
     useTypes?: VcTreeNodeGenericType["type"][] | undefined;
     clearFilterOnOptionsChange?: boolean | undefined;
@@ -456,7 +456,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
     props: {
         id?: string | undefined;
         scrollHeight?: string | number | undefined;
-        color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         loading?: boolean | undefined;
         disabled?: boolean | undefined;
         name?: string | undefined;
@@ -474,7 +474,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
         config: Config;
         emptyText?: string | undefined;
         tagBorderless?: boolean | undefined;
-        tagColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+        tagColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
         nodeKey?: keyof VcTreeNodeGenericType | undefined;
         useTypes?: VcTreeNodeGenericType["type"][] | undefined;
         clearFilterOnOptionsChange?: boolean | undefined;
@@ -913,7 +913,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
         props: {
             id?: string | undefined;
             scrollHeight?: string | number | undefined;
-            color?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            color?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             loading?: boolean | undefined;
             disabled?: boolean | undefined;
             name?: string | undefined;
@@ -931,7 +931,7 @@ declare const _default: <VcTreeNodeGenericType extends VcTreeNodeType, Config ex
             config: Config;
             emptyText?: string | undefined;
             tagBorderless?: boolean | undefined;
-            tagColor?: "" | "primary" | "secondary" | "destructive" | "success" | "warning" | "active" | "primary-alternative" | undefined;
+            tagColor?: "" | "success" | "warning" | "primary" | "secondary" | "destructive" | "active" | "primary-alternative" | undefined;
             nodeKey?: keyof VcTreeNodeGenericType | undefined;
             useTypes?: VcTreeNodeGenericType["type"][] | undefined;
             clearFilterOnOptionsChange?: boolean | undefined;

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;
@@ -17,4 +18,26 @@ export declare type UIConfig = {
      * 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;
+    /**
+     * 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

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

@@ -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): () => 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) {
+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 vnode = createVNode(component);
+  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.3",
+  "version": "3.0.5",
   "scripts": {
     "dev": "vite",
     "build": "vite build",