nuance-ui 0.1.59 → 0.1.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/module.json +1 -1
- package/dist/module.mjs +0 -1
- package/dist/runtime/modals/modal-manager.d.ts +52 -44
- package/dist/runtime/modals/modal-manager.js +108 -66
- package/dist/runtime/modals/modals-provider.d.vue.ts +7 -1
- package/dist/runtime/modals/modals-provider.vue +7 -1
- package/dist/runtime/modals/modals-provider.vue.d.ts +7 -1
- package/package.json +1 -1
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -38,7 +38,6 @@ const module$1 = defineNuxtModule({
|
|
|
38
38
|
nuxt.options.alias["@nui/helpers"] = resolve("./runtime/helpers");
|
|
39
39
|
nuxt.options.alias["@nui/types"] = resolve("./runtime/types");
|
|
40
40
|
nuxt.options.alias["@nui/modals"] = resolve("./runtime/modals");
|
|
41
|
-
nuxt.options.appConfig.nui = defu(nuxt.options.appConfig.nui || {}, defaultConfig);
|
|
42
41
|
nuxt.options.postcss = nuxt.options.postcss || {};
|
|
43
42
|
nuxt.options.postcss.plugins = nuxt.options.postcss.plugins || {};
|
|
44
43
|
nuxt.options.postcss.plugins = defu(nuxt.options.postcss.plugins, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Component } from 'vue';
|
|
2
2
|
/**
|
|
3
|
-
* Reactive state of a single modal within
|
|
3
|
+
* Reactive state of a single modal within {@link ModalManager}.
|
|
4
4
|
*/
|
|
5
5
|
export interface ModalState<Props extends object = object, Resolve = unknown, Reject = unknown> {
|
|
6
6
|
/** Unique modal identifier */
|
|
@@ -16,43 +16,11 @@ export interface ModalState<Props extends object = object, Resolve = unknown, Re
|
|
|
16
16
|
/** Rejects the promise created when the modal was opened */
|
|
17
17
|
reject: (reason?: Reject) => void;
|
|
18
18
|
}
|
|
19
|
-
declare function show<T = unknown>(id: string, props?: object): Promise<T>;
|
|
20
|
-
/**
|
|
21
|
-
* Registers a modal component and returns a typed function to open it.
|
|
22
|
-
*/
|
|
23
|
-
declare function create<TProps extends object = object, TResult = void>(
|
|
24
|
-
/** unique modal identifier */
|
|
25
|
-
id: string,
|
|
26
|
-
/** Vue component for the modal */
|
|
27
|
-
component: Component): (props?: TProps) => Promise<TResult>;
|
|
28
|
-
/**
|
|
29
|
-
* Registers a lazy modal — the component is loaded on first open.
|
|
30
|
-
*/
|
|
31
|
-
declare function createLazy<TProps extends object = object, TResult = void>(
|
|
32
|
-
/** unique modal identifier */
|
|
33
|
-
id: string,
|
|
34
|
-
/** dynamic import function (`() => import('./my-modal.vue')`) */
|
|
35
|
-
loader: () => Promise<{
|
|
36
|
-
default: Component;
|
|
37
|
-
}>): (props?: Omit<TProps, 'modalId'>) => Promise<TResult>;
|
|
38
|
-
/**
|
|
39
|
-
* Closes the modal and resolves its promise with the given result.
|
|
40
|
-
*/
|
|
41
|
-
declare function resolve(id: string, result?: any): void;
|
|
42
|
-
/**
|
|
43
|
-
* Closes the modal and rejects its promise with the given reason.
|
|
44
|
-
*/
|
|
45
|
-
declare function reject(id: string, reason?: any): void;
|
|
46
|
-
/**
|
|
47
|
-
* Returns the reactive state of a specific modal.
|
|
48
|
-
* Used inside a modal component (via {@link useModal}).
|
|
49
|
-
*/
|
|
50
|
-
declare function state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): ModalState<Props, Resolve, Reject>;
|
|
51
19
|
/**
|
|
52
20
|
* Modal manager.
|
|
53
21
|
*
|
|
54
22
|
* Maintains a component registry and a reactive map of active modals.
|
|
55
|
-
* Opening a modal returns a `Promise` that resolves via `
|
|
23
|
+
* Opening a modal returns a `Promise` that resolves via `hide`
|
|
56
24
|
* or rejects via `reject` / user dismissal.
|
|
57
25
|
*
|
|
58
26
|
* @example
|
|
@@ -61,13 +29,53 @@ declare function state<Props extends object = object, Resolve = unknown, Reject
|
|
|
61
29
|
* const result = await open({ foo: 'bar' }) // result: string
|
|
62
30
|
* ```
|
|
63
31
|
*/
|
|
64
|
-
export declare
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
32
|
+
export declare class ModalManager {
|
|
33
|
+
#private;
|
|
34
|
+
/** Reactive map of active modals */
|
|
35
|
+
readonly modals: import("vue").Reactive<Map<string, ModalState<object, unknown, unknown>>>;
|
|
36
|
+
private constructor();
|
|
37
|
+
static get instance(): ModalManager;
|
|
38
|
+
/**
|
|
39
|
+
* Registers a modal component and returns a typed function to open it.
|
|
40
|
+
*/
|
|
41
|
+
create<TProps extends object = object, TResult = void>(
|
|
42
|
+
/** unique modal identifier */
|
|
43
|
+
id: string,
|
|
44
|
+
/** Vue component for the modal */
|
|
45
|
+
component: Component): (props?: TProps) => Promise<TResult>;
|
|
46
|
+
/**
|
|
47
|
+
* Registers a lazy modal — the component is loaded on first open.
|
|
48
|
+
*/
|
|
49
|
+
createLazy<TProps extends object = object, TResult = void>(
|
|
50
|
+
/** unique modal identifier */
|
|
51
|
+
id: string,
|
|
52
|
+
/** dynamic import function (`() => import('./my-modal.vue')`) */
|
|
53
|
+
loader: () => Promise<{
|
|
54
|
+
default: Component;
|
|
55
|
+
}>): (props?: Omit<TProps, 'modalId'>) => Promise<TResult>;
|
|
56
|
+
/**
|
|
57
|
+
* Opens a previously registered modal by its identifier.
|
|
58
|
+
*/
|
|
59
|
+
show<T = unknown>(id: string, props?: object): Promise<T>;
|
|
60
|
+
/**
|
|
61
|
+
* Closes the modal and resolves its promise with the given result.
|
|
62
|
+
*
|
|
63
|
+
* @param id — modal identifier
|
|
64
|
+
* @param result — value the promise resolves with
|
|
65
|
+
*/
|
|
66
|
+
resolve(id: string, result?: any): void;
|
|
67
|
+
/**
|
|
68
|
+
* Closes the modal and rejects its promise with the given reason.
|
|
69
|
+
*
|
|
70
|
+
* @param id — modal identifier
|
|
71
|
+
* @param reason — rejection reason
|
|
72
|
+
*/
|
|
73
|
+
reject(id: string, reason?: any): void;
|
|
74
|
+
/**
|
|
75
|
+
* Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
|
|
76
|
+
*
|
|
77
|
+
* Used inside a modal component (via {@link useModal}).
|
|
78
|
+
*/
|
|
79
|
+
state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): ModalState<Props, Resolve, Reject>;
|
|
80
|
+
}
|
|
81
|
+
export declare const $modals: import("vue").Raw<ModalManager>;
|
|
@@ -1,70 +1,112 @@
|
|
|
1
1
|
import { markRaw, reactive } from "vue";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
2
|
+
export class ModalManager {
|
|
3
|
+
static #instance = null;
|
|
4
|
+
/** Reactive map of active modals */
|
|
5
|
+
modals = reactive(/* @__PURE__ */ new Map());
|
|
6
|
+
/** Eagerly registered components (id → Component) */
|
|
7
|
+
#registered = /* @__PURE__ */ new Map();
|
|
8
|
+
/** Lazily registered loaders (id → loader) */
|
|
9
|
+
#lazy = /* @__PURE__ */ new Map();
|
|
10
|
+
constructor() {
|
|
11
|
+
}
|
|
12
|
+
// ── Facade ──
|
|
13
|
+
static get instance() {
|
|
14
|
+
if (!this.#instance)
|
|
15
|
+
this.#instance = new ModalManager();
|
|
16
|
+
return this.#instance;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Registers a modal component and returns a typed function to open it.
|
|
20
|
+
*/
|
|
21
|
+
create(id, component) {
|
|
22
|
+
ModalManager.instance.#registered.set(id, component);
|
|
23
|
+
return (props) => ModalManager.instance.#show(id, props ?? {});
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Registers a lazy modal — the component is loaded on first open.
|
|
27
|
+
*/
|
|
28
|
+
createLazy(id, loader) {
|
|
29
|
+
ModalManager.instance.#lazy.set(id, loader);
|
|
30
|
+
return (props) => ModalManager.instance.#show(id, props ?? {});
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Opens a previously registered modal by its identifier.
|
|
34
|
+
*/
|
|
35
|
+
async show(id, props = {}) {
|
|
36
|
+
return ModalManager.instance.#show(id, props);
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Closes the modal and resolves its promise with the given result.
|
|
40
|
+
*
|
|
41
|
+
* @param id — modal identifier
|
|
42
|
+
* @param result — value the promise resolves with
|
|
43
|
+
*/
|
|
44
|
+
resolve(id, result) {
|
|
45
|
+
ModalManager.instance.#resolve(id, result);
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Closes the modal and rejects its promise with the given reason.
|
|
49
|
+
*
|
|
50
|
+
* @param id — modal identifier
|
|
51
|
+
* @param reason — rejection reason
|
|
52
|
+
*/
|
|
53
|
+
reject(id, reason) {
|
|
54
|
+
ModalManager.instance.#reject(id, reason);
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* Returns the reactive state of a specific modal as `ComputedRef<ModalState>`.
|
|
58
|
+
*
|
|
59
|
+
* Used inside a modal component (via {@link useModal}).
|
|
60
|
+
*/
|
|
61
|
+
state(id) {
|
|
62
|
+
return ModalManager.instance.modals.get(id);
|
|
14
63
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} else {
|
|
26
|
-
modals.set(id, {
|
|
27
|
-
id,
|
|
28
|
-
component: markRaw(component),
|
|
29
|
-
props,
|
|
30
|
-
opened: true,
|
|
31
|
-
resolve: resolve2,
|
|
32
|
-
reject: reject2
|
|
33
|
-
});
|
|
64
|
+
// ── Private implementation ──
|
|
65
|
+
async #show(id, props = {}) {
|
|
66
|
+
if (!this.#registered.has(id) && this.#lazy.has(id)) {
|
|
67
|
+
const loader = this.#lazy.get(id);
|
|
68
|
+
try {
|
|
69
|
+
const loaded = await loader();
|
|
70
|
+
this.#registered.set(id, loaded.default);
|
|
71
|
+
} catch (err) {
|
|
72
|
+
return Promise.reject(err);
|
|
73
|
+
}
|
|
34
74
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
75
|
+
const component = this.#registered.get(id);
|
|
76
|
+
if (!component)
|
|
77
|
+
return Promise.reject(new Error(`Modal "${id}" is not registered`));
|
|
78
|
+
const existing = this.modals.get(id);
|
|
79
|
+
return new Promise((resolve, reject) => {
|
|
80
|
+
if (existing) {
|
|
81
|
+
existing.props = props;
|
|
82
|
+
existing.opened = true;
|
|
83
|
+
existing.resolve = resolve;
|
|
84
|
+
existing.reject = reject;
|
|
85
|
+
} else {
|
|
86
|
+
this.modals.set(id, {
|
|
87
|
+
id,
|
|
88
|
+
component: markRaw(component),
|
|
89
|
+
props,
|
|
90
|
+
opened: true,
|
|
91
|
+
resolve,
|
|
92
|
+
reject
|
|
93
|
+
});
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
#resolve(id, result) {
|
|
98
|
+
const modal = this.modals.get(id);
|
|
99
|
+
if (!modal)
|
|
100
|
+
return;
|
|
101
|
+
modal.opened = false;
|
|
102
|
+
modal.resolve?.(result);
|
|
103
|
+
}
|
|
104
|
+
#reject(id, reason) {
|
|
105
|
+
const modal = this.modals.get(id);
|
|
106
|
+
if (!modal)
|
|
107
|
+
return;
|
|
108
|
+
modal.opened = false;
|
|
109
|
+
modal.reject?.(reason);
|
|
110
|
+
}
|
|
61
111
|
}
|
|
62
|
-
export const $modals = markRaw(
|
|
63
|
-
modals,
|
|
64
|
-
create,
|
|
65
|
-
createLazy,
|
|
66
|
-
show,
|
|
67
|
-
resolve,
|
|
68
|
-
reject,
|
|
69
|
-
state
|
|
70
|
-
});
|
|
112
|
+
export const $modals = markRaw(ModalManager.instance);
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ModalManager } from './modal-manager.js';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
manager?: ModalManager;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
|
|
6
|
+
manager: import("vue").Raw<ModalManager>;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
2
8
|
declare const _default: typeof __VLS_export;
|
|
3
9
|
export default _default;
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
<script setup>
|
|
2
2
|
import { $modals } from "./modal-manager";
|
|
3
|
+
defineProps({
|
|
4
|
+
manager: { type: Object, required: false }
|
|
5
|
+
});
|
|
6
|
+
defineExpose({
|
|
7
|
+
manager: $modals
|
|
8
|
+
});
|
|
3
9
|
</script>
|
|
4
10
|
|
|
5
11
|
<template>
|
|
@@ -7,7 +13,7 @@ import { $modals } from "./modal-manager";
|
|
|
7
13
|
<div id='nui-modals-root'>
|
|
8
14
|
<component
|
|
9
15
|
:is='entry.component'
|
|
10
|
-
v-for='[id, entry] in $modals.modals'
|
|
16
|
+
v-for='[id, entry] in $props.manager?.modals ?? $modals.modals'
|
|
11
17
|
:key='id'
|
|
12
18
|
v-bind='entry.props'
|
|
13
19
|
/>
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import type { ModalManager } from './modal-manager.js';
|
|
2
|
+
type __VLS_Props = {
|
|
3
|
+
manager?: ModalManager;
|
|
4
|
+
};
|
|
5
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
|
|
6
|
+
manager: import("vue").Raw<ModalManager>;
|
|
7
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
2
8
|
declare const _default: typeof __VLS_export;
|
|
3
9
|
export default _default;
|