nuance-ui 0.1.53 → 0.1.54

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
 import { defu } from 'defu';
 
 const defaultConfig = {
@@ -32,12 +32,12 @@ const module$1 = defineNuxtModule({
   defaults: defaultConfig,
   setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url);
-    nuxt.options.alias["@nui"] = resolve("./runtime");
     nuxt.options.alias["@nui/composals"] = resolve("./runtime/composals");
     nuxt.options.alias["@nui/components"] = resolve("./runtime/components");
     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.appConfig.nui = defu(nuxt.options.appConfig.nui || {}, defaultConfig);
     nuxt.options.postcss = nuxt.options.postcss || {};
     nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {};
@@ -70,6 +70,10 @@ const module$1 = defineNuxtModule({
       addImportsDir(resolve("./runtime/composals"));
       addImportsDir(resolve("./runtime/helpers"));
     }
+    addPlugin({
+      src: resolve("./runtime/plugins/modals/plugin.client.ts"),
+      mode: "client"
+    });
     nuxt.options.css.push(resolve("./runtime/styles/global.css"));
   }
 });

package/dist/runtime/components/combobox/combobox-root.d.vue.ts

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     select: (args_0: number) => any;
+    clear: () => any;
     close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
     open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onClear?: (() => any) | undefined;
     onSelect?: ((args_0: number) => any) | undefined;
+    onClear?: (() => any) | undefined;
     onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
     onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
     onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;

package/dist/runtime/components/combobox/combobox-root.vue.d.ts

@@ -25,15 +25,15 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    clear: () => any;
     select: (args_0: number) => any;
+    clear: () => any;
     close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
     open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onClear?: (() => any) | undefined;
     onSelect?: ((args_0: number) => any) | undefined;
+    onClear?: (() => any) | undefined;
     onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
     onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
     onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;

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

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

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

@@ -1,5 +1,5 @@
 <script setup>
-import { $modals } from "@nui/composals";
+import { $modals } from "../../plugins/modals";
 </script>
 
 <template>

package/dist/runtime/components/select/select.d.vue.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onSelect?: ((args_0: number) => any) | undefined;
+        onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
         "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
@@ -48,7 +48,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "clear") => void) & ((evt: "select", args_0: number) => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/select/select.vue.d.ts

@@ -24,8 +24,8 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         modelValue?: ComboboxItem<Value, Ext> | null;
         search?: string;
     }) & {
-        onClear?: (() => any) | undefined;
         onSelect?: ((args_0: number) => any) | undefined;
+        onClear?: (() => any) | undefined;
         onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
         onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
         "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
@@ -48,7 +48,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "clear") => void) & ((evt: "select", args_0: number) => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,5 +1,5 @@
 export * from './use-active-link.js';
 export * from './use-date-config.js';
-export * from './use-modal/index.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,5 @@
 export * from "./use-active-link.js";
 export * from "./use-date-config.js";
-export * from "./use-modal/index.js";
+export * from "./use-modal.js";
 export * from "./use-style-resolver.js";
 export * from "./use-theme.js";

package/dist/runtime/composals/{use-modal/use-modal.d.ts → 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<boolean, boolean>;
+    opened: import("vue").WritableComputedRef<any, boolean>;
     /** closes the modal and resolves the promise */
-    resolve: (reason: Resolve) => void;
-    reject: () => void;
+    resolve: (reason: Resolve) => any;
+    reject: () => any;
 };

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

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

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

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

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

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

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

@@ -17,7 +17,7 @@ export interface ModalState<Props extends object = object, Resolve = unknown, Re
     reject: (reason?: Reject) => void;
 }
 /**
- * Singleton modal manager.
+ * Modal manager.
  *
  * Maintains a component registry and a reactive map of active modals.
  * Opening a modal returns a `Promise` that resolves via `hide`
@@ -31,9 +31,6 @@ export interface ModalState<Props extends object = object, Resolve = unknown, Re
  */
 export declare class ModalManager {
     #private;
-    private constructor();
-    /** Returns the singleton instance (creates on first access) */
-    static get instance(): ModalManager;
     /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
     get modals(): import("vue").Reactive<Map<string, ModalState<object, unknown, unknown>>>;
     /**
@@ -79,5 +76,3 @@ export declare class ModalManager {
      */
     state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): ModalState<Props, Resolve, Reject>;
 }
-/** Global {@link ModalManager} instance for use throughout the application */
-export declare const $modals: ModalManager;

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

@@ -1,23 +1,14 @@
 import { markRaw, reactive } from "vue";
 export class ModalManager {
-  static #instance = null;
   /** Reactive map of active modals */
   #modals = reactive(/* @__PURE__ */ new Map());
   /** Eagerly registered components (id → Component) */
   #registered = /* @__PURE__ */ new Map();
   /** Lazily registered loaders (id → loader) */
   #lazy = /* @__PURE__ */ new Map();
-  constructor() {
-  }
-  /** Returns the singleton instance (creates on first access) */
-  static get instance() {
-    if (!ModalManager.#instance)
-      ModalManager.#instance = new ModalManager();
-    return ModalManager.#instance;
-  }
   /** Reactive map of all active modals. Used by `ModalProvider` for rendering */
   get modals() {
-    return ModalManager.instance.#modals;
+    return this.#modals;
   }
   // ── Facade ──
   /**
@@ -114,4 +105,3 @@ export class ModalManager {
     modal.reject?.(reason);
   }
 }
-export const $modals = ModalManager.instance;

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

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

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

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

package/package.json

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

package/dist/runtime/composals/use-modal/docs.md

@@ -1,302 +0,0 @@
-# Modal System
-
-Система управления модальными окнами на основе промисов. Позволяет открывать модалки императивно из любого места приложения и получать результат через `await`.
-
-## Архитектура
-
-```
-ModalManager (singleton)        — хранит состояния всех модалок, управляет жизненным циклом
-  ├─ create() / createLazy()    — регистрирует компонент модалки и возвращает функцию-открывашку
-  ├─ show() / hide() / reject() — императивное управление
-  └─ state()                    — реактивное состояние для использования внутри компонента
-
-useModal(id)                    — composable для компонента модалки (opened + resolve)
-
-ModalProvider                   — рендерит все активные модалки в DOM
-```
-
-## Быстрый старт
-
-### 1. Регистрация модалки
-
-```ts
-// src/runtime/components/modals/_my-modal/index.ts
-import { $modals } from '@nui/composals'
-
-import MyModal from './my-modal.vue'
-
-
-export const openMyModal = $modals.create<MyModalProps, string>(
-	'my-modal',
-	MyModal,
-)
-```
-
-### 2. Компонент модалки
-
-```vue
-<!-- my-modal.vue -->
-<script setup lang="ts">
-import { useModal } from '@nui/composals'
-
-
-defineProps<{ message: string }>()
-
-const { opened, resolve } = useModal('my-modal')
-</script>
-
-<template>
-	<ModalRoot v-model:open='opened'>
-		<p>{{ message }}</p>
-		<button @click="resolve('ok')">
-			OK
-		</button>
-	</ModalRoot>
-</template>
-```
-
-### 3. Вызов из любого места
-
-```ts
-const result = await openMyModal({ message: 'Hello!' })
-// result: 'ok'
-```
-
----
-
-## API
-
-### `ModalManager`
-
-> Файл: `modal-manager.ts`
-
-Singleton-класс, управляющий реестром и жизненным циклом модальных окон. Экспортируется как `$modals`.
-
-```ts
-import { $modals } from '@nui/composals'
-```
-
-#### `create<TProps, TResult>(id, component)`
-
-Регистрирует компонент модалки и возвращает типизированную функцию для её открытия.
-
-```ts
-const openModal = $modals.create<{ name: string }, boolean>(
-	'greeting',
-	GreetingModal,
-)
-
-const confirmed = await openModal({ name: 'World' })
-```
-
-- **id** — уникальный строковый идентификатор модалки
-- **component** — Vue-компонент
-- **Возвращает** — `(props?) => Promise<TResult>`
-
-#### `createLazy<TProps, TResult>(id, loader)`
-
-Аналогичен `create`, но компонент загружается лениво при первом открытии.
-
-```ts
-const openHeavyModal = $modals.createLazy<HeavyProps, void>(
-	'heavy',
-	() => import('./heavy-modal.vue'),
-)
-```
-
-#### `show<T>(id, props?)`
-
-Открывает ранее зарегистрированную модалку по `id`. Возвращает `Promise<T>`.
-
-#### `hide(id, result?)`
-
-Закрывает модалку, резолвит промис переданным `result`.
-
-#### `reject(id, reason?)`
-
-Закрывает модалку, реджектит промис переданным `reason`.
-
-#### `state<Props, Resolve, Reject>(id)`
-
-Возвращает `ComputedRef<ModalState>` — реактивное состояние модалки. Используется внутри компонента модалки через `useModal`.
-
-#### `modals` (getter)
-
-`ShallowRef<Map<string, ModalState>>` — реактивная карта всех активных модалок. Используется в `ModalProvider` для рендеринга.
-
-#### Интерфейс `ModalState`
-
-```ts
-interface ModalState<Props, Resolve, Reject> {
-	id: string
-	component: Component
-	props: Props
-	opened: boolean
-	resolve: (value?: Resolve) => void
-	reject: (reason?: Reject) => void
-}
-```
-
----
-
-### `useModal(id)`
-
-> Файл: `use-modal.ts`
-
-Composable для использования **внутри** компонента модалки. Связывает компонент с `ModalManager` по `id`.
-
-```ts
-const { opened, resolve } = useModal<MyProps, ResultType>('my-modal')
-```
-
-#### Возвращает
-
-| Поле | Тип | Описание |
-|------|-----|----------|
-| `opened` | `WritableComputedRef<boolean>` | Двусторонний binding для открытия/закрытия. При установке в `false` вызывает `reject`. |
-| `resolve` | `(reason: Resolve) => void` | Закрывает модалку и резолвит промис переданным значением. |
-
-#### Типизация
-
-```ts
-function useModal<
-	Props extends Record<string, unknown>,
-	Resolve = unknown,
-	Reject = unknown,
->(id: string): { opened: WritableComputedRef<boolean>, resolve: (reason: Resolve) => void }
-```
-
-> **Важно:** `id` должен совпадать с тем, что передан в `$modals.create()`.
-
----
-
-### `ModalProvider`
-
-> Файл: `modal-provider.vue`
-
-Компонент-контейнер, который рендерит все активные модалки. Должен быть размещён один раз в корне приложения (обычно в `app.vue` или layout).
-
-```vue
-<template>
-	<NuxtPage />
-	<ModalProvider />
-</template>
-```
-
-Внутри итерирует `$modals.modals` и рендерит каждую модалку через `<component :is="..." v-bind="props" />`.
-
----
-
-## Встроенные модалки
-
-### `ConfirmModal`
-
-> Файл: `_confirm-modal/confirm-modal.vue`
-
-Модалка подтверждения с кнопками «Confirm» / «Cancel». Зарегистрирована с `id = 'confirm'`.
-
-#### Props (`ConfirmModalProps`)
-
-| Prop | Тип | По умолчанию | Описание |
-|------|-----|-------------|----------|
-| `title` | `string` | — | Заголовок модалки (обязательный) |
-| `body` | `string` | — | Текст описания |
-| `labels` | `{ confirm: string, cancel: string }` | `{ confirm: 'Confirm', cancel: 'Cancel' }` | Тексты кнопок |
-| `variant` | `'default' \| 'danger'` | `'default'` | При `'danger'` кнопка подтверждения становится красной |
-| `onCancel` | `() => void` | — | Колбэк при отмене |
-| `onConfirm` | `() => MaybePromise<void>` | — | Колбэк при подтверждении (поддерживает async) |
-| `cancelProps` | `Partial<ButtonProps>` | — | Дополнительные props для кнопки отмены |
-| `confirmProps` | `Partial<ButtonProps>` | — | Дополнительные props для кнопки подтверждения |
-
-Также принимает все props от `ModalRootProps` (например `size`).
-
-#### Использование
-
-```ts
-import { openConfirmModal } from '@nui/components'
-
-// Простое подтверждение
-const confirmed = await openConfirmModal({
-	title: 'Удалить запись?',
-	body: 'Это действие нельзя отменить.',
-	variant: 'danger',
-	labels: { confirm: 'Удалить', cancel: 'Отмена' },
-})
-
-if (confirmed) {
-	// пользователь подтвердил
-}
-```
-
-#### Результат
-
-- **Resolve** → `true` — пользователь нажал «Confirm»
-- **Reject** → промис реджектится — пользователь нажал «Cancel» или закрыл модалку
-
-> **Совет:** оборачивайте вызов в `try/catch`, чтобы обработать отмену:
-> ```ts
-> try {
-> 	const confirmed = await openConfirmModal({ title: '...' })
-> }
-> catch {
-> 	// пользователь отменил
-> }
-> ```
-
----
-
-## Паттерны
-
-### Wizard (пошаговые модалки)
-
-Можно вызывать `openConfirmModal` последовательно для реализации пошагового сценария:
-
-```ts
-const steps = [
-	{ title: 'Шаг 1', body: 'Начать?' },
-	{ title: 'Шаг 2', body: 'Продолжить?' },
-	{ title: 'Шаг 3', body: 'Завершить?', variant: 'danger' },
-]
-
-let current = 0
-while (current < steps.length) {
-	try {
-		const confirmed = await openConfirmModal(steps[current])
-		confirmed ? current++ : current--
-	}
-	catch {
-		break // отмена
-	}
-}
-```
-
-### Создание кастомной модалки
-
-1. Создайте компонент в `src/runtime/components/modals/_my-modal/`
-2. Внутри компонента используйте `useModal(id)` для получения `opened` и `resolve`
-3. В `index.ts` зарегистрируйте через `$modals.create()` и экспортируйте функцию-открывашку
-4. Реэкспортируйте из `src/runtime/components/modals/index.ts`
-
-### Lazy-модалки
-
-Для тяжёлых модалок используйте `createLazy`, чтобы компонент загружался только при первом открытии:
-
-```ts
-export const openHeavyModal = $modals.createLazy<HeavyProps, void>(
-	'heavy',
-	() => import('./heavy-modal.vue'),
-)
-```
-
-### Асинхронный onConfirm
-
-`ConfirmModal` поддерживает асинхронный `onConfirm` — кнопка показывает loading-состояние до завершения:
-
-```ts
-await openConfirmModal({
-	title: 'Сохранить?',
-	onConfirm: async () => {
-		await api.save(data)
-	},
-})
-```

package/dist/runtime/composals/use-modal/index.d.ts

@@ -1,2 +0,0 @@
-export { $modals } from './modal-manager.js';
-export * from './use-modal.js';

package/dist/runtime/composals/use-modal/index.js

@@ -1,2 +0,0 @@
-export { $modals } from "./modal-manager.js";
-export * from "./use-modal.js";