@voicenter-team/voicenter-ui-plus 3.0.1 → 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/types/OptionAndConfig.types.d.ts

@@ -2,7 +2,7 @@ import type { StyleValue } from 'vue';
 import { COMPONENT_COLOR_TYPE } from '../enum/constants';
 import { NestedKeys, PathValue } from '.';
 import type { TIcon } from './icons.types';
-export type OptionObjectValueType = Record<string, unknown>;
+export type OptionObjectValueType = object;
 export type OptionNonObjectValueType = string | number | boolean;
 export type OptionValueType = OptionObjectValueType | OptionNonObjectValueType;
 export type ConfigOptionType<Option extends OptionValueType> = Option extends OptionObjectValueType ? {

package/library/types/types/VcTable.types.d.ts

@@ -2,7 +2,7 @@ import { OptionObjectValueType } from '.';
 import { TIcon } from './icons.types';
 export declare type Alignment = 'left' | 'center' | 'right';
 export declare type SortFunction<Option extends OptionObjectValueType> = (a: Option, b: Option) => number;
-export declare type FormatFunction<Option extends OptionObjectValueType = OptionObjectValueType> = (row: Option) => string | number | unknown;
+export declare type FormatFunction<Option extends OptionObjectValueType = Record<string, unknown>> = (row: Option) => string | number | unknown;
 /** @description Configuration for column filtering functionality */
 export declare type FilterableConfig = {
     /** @description Whether filtering is enabled for this column */
@@ -16,7 +16,7 @@ export declare type ColumnFilterState = {
 };
 /** @description Default filter options per column (always shown in filter popover) */
 export declare type FilterOptionsMap = Record<string, Array<string | number>>;
-export declare type ColumnTypeItem<Option extends OptionObjectValueType = OptionObjectValueType> = {
+export declare type ColumnTypeItem<Option extends OptionObjectValueType = Record<string, unknown>> = {
     columnItemLabel: string;
     columnItemKey: string;
     /**

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

@@ -1,4 +1,4 @@
-import type { ConfigOptionType, OptionObjectValueType } from './OptionAndConfig.types';
+import type { ConfigOptionType } from './OptionAndConfig.types';
 import type { TIcon } from './icons.types';
 export declare type VcTreeNodeType<T extends string = string> = {
     id?: string | number;
@@ -15,7 +15,7 @@ export declare type VcTreeNodeType<T extends string = string> = {
     checked?: boolean;
     _keyPath?: string;
     type?: T;
-} & OptionObjectValueType;
+} & Record<string, unknown>;
 export declare type VcTreeConfig<NodeType extends VcTreeNodeType> = ConfigOptionType<NodeType> & {
     childrenKey: keyof NodeType;
     valueKey: keyof NodeType;

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.1",
+  "version": "3.0.3",
   "scripts": {
     "dev": "vite",
     "build": "vite build",