nuance-ui 0.1.56 → 0.1.58

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.56",
+  "version": "0.1.58",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 import { defu } from 'defu';
 
 const defaultConfig = {
@@ -37,7 +37,7 @@ const module$1 = defineNuxtModule({
     nuxt.options.alias["@nui/utils"] = resolve("./runtime/utils");
     nuxt.options.alias["@nui/helpers"] = resolve("./runtime/helpers");
     nuxt.options.alias["@nui/types"] = resolve("./runtime/types");
-    nuxt.options.alias["@nui/modals"] = resolve("./runtime/plugins/modals");
+    nuxt.options.alias["@nui/modals"] = resolve("./runtime/modals");
     nuxt.options.appConfig.nui = defu(nuxt.options.appConfig.nui || {}, defaultConfig);
     nuxt.options.postcss = nuxt.options.postcss || {};
     nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {};
@@ -70,10 +70,6 @@ const module$1 = defineNuxtModule({
       addImportsDir(resolve("./runtime/composals"));
       addImportsDir(resolve("./runtime/helpers"));
     }
-    addPlugin({
-      src: resolve("./runtime/plugins/modals/plugin.client"),
-      mode: "client"
-    });
     nuxt.options.css.push(resolve("./runtime/styles/global.css"));
   }
 });

package/dist/runtime/components/index.d.ts

@@ -20,7 +20,6 @@ export * from './input/index.js';
 export * from './link/index.js';
 export * from './loader/index.js';
 export * from './modal/index.js';
-export * from './modals/index.js';
 export * from './nav-link/index.js';
 export * from './paper.vue.js';
 export * from './popover/index.js';

package/dist/runtime/components/index.js

@@ -18,7 +18,6 @@ export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./loader/index.js";
 export * from "./modal/index.js";
-export * from "./modals/index.js";
 export * from "./nav-link/index.js";
 export * from "./paper.vue";
 export * from "./popover/index.js";

package/dist/runtime/composals/index.d.ts

@@ -1,5 +1,4 @@
 export * from './use-active-link.js';
 export * from './use-date-config.js';
-export * from './use-modal.js';
 export * from './use-style-resolver.js';
 export * from './use-theme.js';

package/dist/runtime/composals/index.js

@@ -1,5 +1,4 @@
 export * from "./use-active-link.js";
 export * from "./use-date-config.js";
-export * from "./use-modal.js";
 export * from "./use-style-resolver.js";
 export * from "./use-theme.js";

package/dist/runtime/{components/modals → modals}/_confirm-modal/confirm-modal.d.vue.ts

@@ -1,8 +1,7 @@
-import type { MaybePromise } from '@nui/types';
-import type { ButtonProps } from '../../button/button.vue.js';
-import type { ModalRootProps } from '../../modal/modal-root.vue.js';
+import type { ButtonProps, ModalRootProps } from '../../components/index.js';
+import type { MaybePromise } from '../../types/index.js';
 type ConfirmLabels = Record<'confirm' | 'cancel', string>;
-export interface ConfirmModalProps extends ModalRootProps {
+export interface ConfirmModalProps extends /* @vue-ignore */ ModalRootProps {
     /** Modal title */
     title: string;
     /** Description text displayed below the title */

package/dist/runtime/{components/modals → modals}/_confirm-modal/confirm-modal.vue

@@ -1,11 +1,11 @@
 <script setup>
-import { useModal } from "@nui/composals";
 import { ref } from "vue";
-import Button from "../../button/button.vue";
-import ModalCloseButton from "../../modal/modal-close-button.vue";
-import ModalHeader from "../../modal/modal-header.vue";
-import ModalRoot from "../../modal/modal-root.vue";
-import Title from "../../title.vue";
+import Button from "../../components/button/button.vue";
+import ModalCloseButton from "../../components/modal/modal-close-button.vue";
+import ModalHeader from "../../components/modal/modal-header.vue";
+import ModalRoot from "../../components/modal/modal-root.vue";
+import Title from "../../components/title.vue";
+import { useModal } from "../use-modal";
 const {
   title,
   description: body,
@@ -25,22 +25,7 @@ const {
   onCancel: { type: Function, required: false },
   onConfirm: { type: Function, required: false },
   cancelProps: { type: Object, required: false },
-  confirmProps: { type: Object, required: false },
-  centered: { type: Boolean, required: false },
-  fullScreen: { type: Boolean, required: false },
-  closeOnClickOutside: { type: Boolean, required: false },
-  withinPortal: { type: Boolean, required: false },
-  withoutOverlay: { type: Boolean, required: false },
-  yOffset: { type: void 0, required: false },
-  xOffset: { type: void 0, required: false },
-  radius: { type: [String, Number], required: false },
-  size: { type: String, required: false },
-  shadow: { type: String, required: false },
-  padding: { type: [String, Number], required: false },
-  transition: { type: String, required: false },
-  portalTarget: { type: [String, Object, null], required: false },
-  is: { type: null, required: false },
-  mod: { type: [Object, Array, null], required: false }
+  confirmProps: { type: Object, required: false }
 });
 const { opened, resolve: hide } = useModal("confirm");
 const loading = ref(false);

package/dist/runtime/{components/modals → modals}/_confirm-modal/confirm-modal.vue.d.ts

@@ -1,8 +1,7 @@
-import type { MaybePromise } from '@nui/types';
-import type { ButtonProps } from '../../button/button.vue.js';
-import type { ModalRootProps } from '../../modal/modal-root.vue.js';
+import type { ButtonProps, ModalRootProps } from '../../components/index.js';
+import type { MaybePromise } from '../../types/index.js';
 type ConfirmLabels = Record<'confirm' | 'cancel', string>;
-export interface ConfirmModalProps extends ModalRootProps {
+export interface ConfirmModalProps extends /* @vue-ignore */ ModalRootProps {
     /** Modal title */
     title: string;
     /** Description text displayed below the title */

package/dist/runtime/{components/modals → modals}/_confirm-modal/index.d.ts

@@ -4,5 +4,5 @@ import type { ConfirmModalProps } from './confirm-modal.vue.js';
  *
  * Resolves with `true` if the user confirmed, rejects if cancelled.
  */
-export declare const openConfirmModal: (props?: ConfirmModalProps | undefined) => Promise<boolean>;
+export declare const openConfirmModal: (props?: any) => Promise<boolean>;
 export type { ConfirmModalProps };

package/dist/runtime/{components/modals → modals}/_confirm-modal/index.js

@@ -1,4 +1,4 @@
-import { $modals } from "../../../plugins/modals/index.js";
+import { $modals } from "../modal-manager.js";
 import ConfirmModal from "./confirm-modal.vue";
 export const openConfirmModal = $modals.create(
   "confirm",

package/dist/runtime/modals/index.d.ts

@@ -0,0 +1,4 @@
+export * from './_confirm-modal/index.js';
+export { $modals } from './modal-manager.js';
+export { default as NModalsProvider } from './modals-provider.vue.js';
+export * from './use-modal.js';

package/dist/runtime/modals/index.js

@@ -0,0 +1,4 @@
+export * from "./_confirm-modal/index.js";
+export { $modals } from "./modal-manager.js";
+export { default as NModalsProvider } from "./modals-provider.vue";
+export * from "./use-modal.js";

package/dist/runtime/{plugins/modals → modals}/modal-manager.d.ts

@@ -29,10 +29,12 @@ export interface ModalState<Props extends object = object, Resolve = unknown, Re
  * const result = await open({ foo: 'bar' }) // result: string
  * ```
  */
-export declare class ModalManager {
+declare class ModalManager {
     #private;
-    /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
-    get modals(): import("vue").Reactive<Map<string, ModalState<object, unknown, unknown>>>;
+    /** Reactive map of active modals */
+    readonly modals: import("vue").Reactive<Map<string, ModalState<object, unknown, unknown>>>;
+    private constructor();
+    static get instance(): ModalManager;
     /**
      * Registers a modal component and returns a typed function to open it.
      */
@@ -76,3 +78,5 @@ export declare class ModalManager {
      */
     state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): ModalState<Props, Resolve, Reject>;
 }
+export declare const $modals: import("vue").Raw<ModalManager>;
+export {};

package/dist/runtime/{plugins/modals → modals}/modal-manager.js

@@ -1,35 +1,39 @@
 import { markRaw, reactive } from "vue";
-export class ModalManager {
+class ModalManager {
+  static #instance = null;
   /** Reactive map of active modals */
-  #modals = reactive(/* @__PURE__ */ new Map());
+  modals = reactive(/* @__PURE__ */ new Map());
   /** Eagerly registered components (id → Component) */
   #registered = /* @__PURE__ */ new Map();
   /** Lazily registered loaders (id → loader) */
   #lazy = /* @__PURE__ */ new Map();
-  /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
-  get modals() {
-    return this.#modals;
+  constructor() {
   }
   // ── Facade ──
+  static get instance() {
+    if (!this.#instance)
+      this.#instance = new ModalManager();
+    return this.#instance;
+  }
   /**
    * Registers a modal component and returns a typed function to open it.
    */
   create(id, component) {
-    this.#registered.set(id, component);
-    return (props) => this.#show(id, props ?? {});
+    ModalManager.instance.#registered.set(id, component);
+    return (props) => ModalManager.instance.#show(id, props ?? {});
   }
   /**
    * Registers a lazy modal — the component is loaded on first open.
    */
   createLazy(id, loader) {
-    this.#lazy.set(id, loader);
-    return (props) => this.#show(id, props ?? {});
+    ModalManager.instance.#lazy.set(id, loader);
+    return (props) => ModalManager.instance.#show(id, props ?? {});
   }
   /**
    * Opens a previously registered modal by its identifier.
    */
   async show(id, props = {}) {
-    return this.#show(id, props);
+    return ModalManager.instance.#show(id, props);
   }
   /**
    * Closes the modal and resolves its promise with the given result.
@@ -38,7 +42,7 @@ export class ModalManager {
    * @param result — value the promise resolves with
    */
   resolve(id, result) {
-    this.#resolve(id, result);
+    ModalManager.instance.#resolve(id, result);
   }
   /**
    * Closes the modal and rejects its promise with the given reason.
@@ -47,7 +51,7 @@ export class ModalManager {
    * @param reason — rejection reason
    */
   reject(id, reason) {
-    this.#reject(id, reason);
+    ModalManager.instance.#reject(id, reason);
   }
   /**
    * Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
@@ -55,7 +59,7 @@ export class ModalManager {
    * Used inside a modal component (via {@link useModal}).
    */
   state(id) {
-    return this.#modals.get(id);
+    return ModalManager.instance.modals.get(id);
   }
   // ── Private implementation ──
   async #show(id, props = {}) {
@@ -71,7 +75,7 @@ export class ModalManager {
     const component = this.#registered.get(id);
     if (!component)
       return Promise.reject(new Error(`Modal "${id}" is not registered`));
-    const existing = this.#modals.get(id);
+    const existing = this.modals.get(id);
     return new Promise((resolve, reject) => {
       if (existing) {
         existing.props = props;
@@ -79,7 +83,7 @@ export class ModalManager {
         existing.resolve = resolve;
         existing.reject = reject;
       } else {
-        this.#modals.set(id, {
+        this.modals.set(id, {
           id,
           component: markRaw(component),
           props,
@@ -91,17 +95,18 @@ export class ModalManager {
     });
   }
   #resolve(id, result) {
-    const modal = this.#modals.get(id);
+    const modal = this.modals.get(id);
     if (!modal)
       return;
     modal.opened = false;
     modal.resolve?.(result);
   }
   #reject(id, reason) {
-    const modal = this.#modals.get(id);
+    const modal = this.modals.get(id);
     if (!modal)
       return;
     modal.opened = false;
     modal.reject?.(reason);
   }
 }
+export const $modals = markRaw(ModalManager.instance);

package/dist/runtime/modals/modals-provider.vue

@@ -0,0 +1,16 @@
+<script setup>
+import { $modals } from "./modal-manager";
+</script>
+
+<template>
+	<ClientOnly>
+		<div id='nui-modals-root'>
+			<component
+				:is='entry.component'
+				v-for='[id, entry] in $modals.modals'
+				:key='id'
+				v-bind='entry.props'
+			/>
+		</div>
+	</ClientOnly>
+</template>

package/dist/runtime/{composals → modals}/use-modal.d.ts

@@ -21,8 +21,8 @@ id: string): {
      *
      * Setting to `true` reopens the modal, setting to `false` calls `reject`
      */
-    opened: import("vue").WritableComputedRef<any, boolean>;
+    opened: import("vue").WritableComputedRef<boolean, boolean>;
     /** closes the modal and resolves the promise */
-    resolve: (reason: Resolve) => any;
-    reject: () => any;
+    resolve: (reason: Resolve) => void;
+    reject: () => void;
 };

package/dist/runtime/{composals → modals}/use-modal.js

@@ -1,11 +1,10 @@
-import { useNuxtApp } from "#app";
 import { computed } from "vue";
+import { $modals } from "./modal-manager.js";
 export function useModal(id) {
-  const manager = useNuxtApp().$modals;
-  const state = computed(() => manager.state(id));
+  const state = computed(() => $modals.state(id));
   const opened = computed({
     get: () => state.value?.opened,
-    set: (opened2) => opened2 ? manager.show(id, state.value.props) : manager.reject(id, "cancel")
+    set: (opened2) => opened2 ? $modals.show(id, state.value.props) : $modals.reject(id, "cancel")
   });
   if (!state)
     throw new Error(`Modal ${id} is not exist`);
@@ -17,7 +16,7 @@ export function useModal(id) {
      */
     opened,
     /** closes the modal and resolves the promise */
-    resolve: (reason) => manager.resolve(id, reason),
-    reject: () => manager.reject(id)
+    resolve: (reason) => $modals.resolve(id, reason),
+    reject: () => $modals.reject(id)
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.56",
+	"version": "0.1.58",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",

package/dist/runtime/components/modals/index.d.ts

@@ -1 +0,0 @@
-export * from './_confirm-modal/index.js';

package/dist/runtime/components/modals/index.js

@@ -1 +0,0 @@
-export * from "./_confirm-modal/index.js";

package/dist/runtime/components/modals/modals-provider.vue

@@ -1,19 +0,0 @@
-<script setup>
-import { useNuxtApp } from "#app";
-import { ClientOnly } from "#components";
-import { computed } from "vue";
-const modals = computed(() => useNuxtApp().$modals?.modals ?? []);
-</script>
-
-<template>
-	<ClientOnly>
-		<div id='nui-modals-root'>
-			<component
-				:is='entry.component'
-				v-for='[id, entry] in modals'
-				:key='id'
-				v-bind='entry.props'
-			/>
-		</div>
-	</ClientOnly>
-</template>

package/dist/runtime/plugins/modals/index.d.ts

@@ -1 +0,0 @@
-export { $modals } from './plugin.client.js';

package/dist/runtime/plugins/modals/index.js

@@ -1 +0,0 @@
-export { $modals } from "./plugin.client.js";

package/dist/runtime/plugins/modals/plugin.client.d.ts

@@ -1,8 +0,0 @@
-import { ModalManager } from './modal-manager.js';
-export declare const $modals: import("vue").Raw<ModalManager>;
-declare const _default: import("#app").Plugin<{
-    modals: import("vue").Raw<ModalManager>;
-}> & import("#app").ObjectPlugin<{
-    modals: import("vue").Raw<ModalManager>;
-}>;
-export default _default;

package/dist/runtime/plugins/modals/plugin.client.js

@@ -1,10 +0,0 @@
-import { defineNuxtPlugin, markRaw } from "#imports";
-import { ModalManager } from "./modal-manager.js";
-export const $modals = markRaw(new ModalManager());
-export default defineNuxtPlugin(() => {
-  return {
-    provide: {
-      modals: $modals
-    }
-  };
-});