nuance-ui 0.1.51 → 0.1.53

package/dist/module.json

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

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -1,5 +1,5 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition/index.js';
 import type { DialogModel } from '../model.js';
@@ -25,6 +25,8 @@ export interface DialogRootProps extends BoxProps {
     /** Passes a class to root element */
     rootClass?: string;
     transition?: TransitionName;
+    /** Portal target to render element @default 'body' */
+    portalTarget?: string | RendererElement | null;
 }
 type __VLS_Props = DialogRootProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -6,8 +6,9 @@ import Box from "../../box.vue";
 import NTransition from "../../transition/transition.vue";
 import { useProvideDialogState } from "../lib";
 import css from "./dialog.module.css";
+defineOptions({ inheritAttrs: false });
 const {
-  withinPortal = true,
+  withinPortal = false,
   closeOnClickOutside = true,
   mod,
   xOffset,
@@ -18,7 +19,8 @@ const {
   shadow,
   rootClass,
   transition = "fade-down",
-  withoutOverlay = false
+  withoutOverlay = false,
+  portalTarget = "body"
 } = defineProps({
   closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
@@ -31,6 +33,7 @@ const {
   padding: { type: [String, Number], required: false },
   rootClass: { type: String, 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 }
 });
@@ -43,7 +46,10 @@ function overlayClick(event) {
 }
 function open(dialog) {
   emit("open");
-  dialog?.showModal();
+  if (withoutOverlay)
+    dialog?.show();
+  else
+    dialog?.showModal();
 }
 const dialogRef = shallowRef(null);
 if (closeOnClickOutside) {
@@ -56,7 +62,7 @@ watch(opened, (isOpen) => {
   if (isOpen)
     open(dialog);
   else
-    dialog?.close();
+    dialog.close();
 }, { flush: "post" });
 onMounted(() => {
   if (!opened.value)
@@ -74,7 +80,7 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Teleport :disabled='!withinPortal' to='body'>
+	<Teleport :disabled='!withinPortal' :to='portalTarget'>
 		<Box
 			is='dialog'
 			ref='dialogRef'
@@ -83,7 +89,7 @@ const style = computed(() => ({
 			:style
 			@click='overlayClick'
 			@close='$emit("close")'
-			@cancel.prevent='() => closeOnClickOutside && (opened = false)'
+			@cancel.prevent='opened = false'
 		>
 			<NTransition :name='transition'>
 				<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -1,5 +1,5 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
-import type { CSSProperties } from 'vue';
+import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
 import type { TransitionName } from '../../transition/index.js';
 import type { DialogModel } from '../model.js';
@@ -25,6 +25,8 @@ export interface DialogRootProps extends BoxProps {
     /** Passes a class to root element */
     rootClass?: string;
     transition?: TransitionName;
+    /** Portal target to render element @default 'body' */
+    portalTarget?: string | RendererElement | null;
 }
 type __VLS_Props = DialogRootProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/dialog/ui/dialog.module.css

@@ -1 +1 @@
-.root{--dialog-size-xs:rem(320px);--dialog-size-sm:rem(380px);--dialog-size-md:rem(440px);--dialog-size-lg:rem(620px);--dialog-size-xl:rem(780px);--dialog-size:var(--dialog-size-md);--dialog-y-offset:0;--dialog-x-offset:0;--dialog-shadow:var(--shadow-md);--dialog-radius:var(--radius-default);--overlay-bg:rgba(0,0,0,.4);--overlay-filter:blur(.1rem);background:none;border:none;box-shadow:var(--dialog-shadow);display:grid;left:var(--dialog-x-offset);max-height:100%;max-width:100%;min-height:0;opacity:0;overflow:hidden;padding:0;top:var(--dialog-y-offset);transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease;width:var(--dialog-size)}.root::backdrop{backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));opacity:0;transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease}.root[open]{opacity:1}@starting-style{.root[open]{opacity:0}}.root[open]::backdrop{opacity:1}@starting-style{.root[open]::backdrop{opacity:0}}.root:not([open]){opacity:0;pointer-events:none}.root:not([open])::backdrop{opacity:0}.root[data-without-overlay]::backdrop{display:none}.content{background-color:var(--color-body);border-radius:var(--dialog-radius);color:var(--color-text);height:100%;min-height:0;padding:var(--spacing-sm);width:100%}.header{align-items:center;display:flex;justify-content:space-between}.title{font-weight:400}
+.root{--dialog-size-xs:rem(320px);--dialog-size-sm:rem(380px);--dialog-size-md:rem(440px);--dialog-size-lg:rem(620px);--dialog-size-xl:rem(780px);--dialog-size:var(--dialog-size-md);--dialog-y-offset:0;--dialog-x-offset:0;--dialog-shadow:var(--shadow-md);--dialog-radius:var(--radius-default);--overlay-bg:rgba(0,0,0,.4);--overlay-filter:blur(.1rem);background:none;border:none;box-shadow:var(--dialog-shadow);display:grid;left:var(--dialog-x-offset);max-height:100%;max-width:100%;min-height:0;opacity:0;overflow:hidden;padding:0;top:var(--dialog-y-offset);transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease;width:var(--dialog-size);z-index:2}.root::backdrop{backdrop-filter:var(--overlay-filter);background:var(--overlay-bg,rgba(0,0,0,.6));opacity:0;transition:opacity .3s ease,overlay allow-discrete .3s ease,display allow-discrete .3s ease}.root[open]{opacity:1}@starting-style{.root[open]{opacity:0}}.root[open]::backdrop{opacity:1}@starting-style{.root[open]::backdrop{opacity:0}}.root:not([open]){opacity:0;pointer-events:none}.root:not([open])::backdrop{opacity:0}.root[data-without-overlay]::backdrop{display:none}.content{background-color:var(--color-body);border-radius:var(--dialog-radius);color:var(--color-text);height:100%;min-height:0;padding:var(--spacing-sm);width:100%}.header{align-items:center;display:flex;justify-content:space-between}.title{font-weight:400}

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

@@ -1,5 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'transition'>;
+type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass' | 'transition'>;
 export interface DrawerRootProps extends OmittedDialogRootProps {
     /** Side of the screen on which drawer will be opened @default `'left'` */
     position?: 'bottom' | 'left' | 'right' | 'top';

package/dist/runtime/components/drawer/drawer-root.vue

@@ -4,12 +4,14 @@ import DialogRoot from "../dialog/ui/dialog-root.vue";
 import css from "./drawer.module.css";
 const {
   position = "left",
-  withoutOverlay = true,
+  withoutOverlay = false,
+  withinPortal = false,
+  closeOnClickOutside = true,
   mod,
-  withinPortal = true,
   ...rest
 } = defineProps({
   position: { type: String, required: false },
+  closeOnClickOutside: { type: Boolean, required: false },
   withinPortal: { type: Boolean, required: false },
   withoutOverlay: { type: Boolean, required: false },
   yOffset: { type: void 0, required: false },
@@ -18,6 +20,7 @@ const {
   size: { type: String, required: false },
   shadow: { type: String, required: false },
   padding: { type: [String, Number], required: false },
+  portalTarget: { type: [String, Object, null], required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
@@ -45,6 +48,7 @@ const transition = computed(() => {
 		:class='css.content'
 		:within-portal
 		:without-overlay
+		:close-on-click-outside
 		:transition
 		v-bind='rest'
 		@open='$emit("open")'

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

@@ -1,5 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'transition'>;
+type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass' | 'transition'>;
 export interface DrawerRootProps extends OmittedDialogRootProps {
     /** Side of the screen on which drawer will be opened @default `'left'` */
     position?: 'bottom' | 'left' | 'right' | 'top';

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

@@ -1,5 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'withoutOverlay'>;
+type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
 export interface ModalRootProps extends OmittedDialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;

package/dist/runtime/components/modal/modal-root.vue

@@ -5,12 +5,16 @@ const {
   centered,
   fullScreen,
   mod,
-  withinPortal = true,
+  withoutOverlay = false,
+  withinPortal = false,
+  closeOnClickOutside = true,
   ...rest
 } = defineProps({
   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 },
@@ -18,6 +22,7 @@ const {
   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 }
 });
@@ -31,6 +36,8 @@ const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 		:mod='[{ centered, "full-screen": fullScreen }, mod]'
 		:root-class='css.root'
 		:within-portal
+		:close-on-click-outside
+		:without-overlay
 		v-bind='rest'
 		@open='$emit("open")'
 		@close='$emit("close")'

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

@@ -1,5 +1,5 @@
 import type { DialogModel, DialogRootProps } from '../dialog/index.js';
-type OmittedDialogRootProps = Omit<DialogRootProps, 'modal' | 'closeOnClickOutside' | 'rootClass' | 'withoutOverlay'>;
+type OmittedDialogRootProps = Omit<DialogRootProps, 'rootClass'>;
 export interface ModalRootProps extends OmittedDialogRootProps {
     /** If set, the modal is centered vertically @default `false` */
     centered?: boolean;

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

@@ -15,6 +15,7 @@ const {
   confirmProps,
   onConfirm,
   onCancel,
+  closeOnClickOutside = true,
   ...rest
 } = defineProps({
   title: { type: String, required: true },
@@ -27,7 +28,9 @@ const {
   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 },
@@ -35,6 +38,7 @@ const {
   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 }
 });
@@ -56,7 +60,7 @@ async function hanleConfirm() {
 </script>
 
 <template>
-	<ModalRoot v-model:open='opened' v-bind='rest' size='sm'>
+	<ModalRoot v-model:open='opened' v-bind='rest' :close-on-click-outside size='sm'>
 		<ModalHeader>
 			<Title order='4'>
 				{{ title }}

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

@@ -1,13 +1,12 @@
 <script setup>
 import { $modals } from "@nui/composals";
-const activeModals = $modals.modals;
 </script>
 
 <template>
 	<div id='nui-modals-root'>
 		<component
 			:is='entry.component'
-			v-for='[id, entry] in activeModals'
+			v-for='[id, entry] in $modals.modals'
 			:key='id'
 			v-bind='entry.props'
 		/>

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

@@ -35,7 +35,7 @@ export declare class ModalManager {
     /** 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").ShallowRef<Map<string, ModalState<object, unknown, unknown>>, Map<string, ModalState<object, unknown, unknown>>>;
+    get modals(): import("vue").Reactive<Map<string, ModalState<object, unknown, unknown>>>;
     /**
      * Registers a modal component and returns a typed function to open it.
      */
@@ -64,7 +64,7 @@ export declare class ModalManager {
      * @param id     — modal identifier
      * @param result — value the promise resolves with
      */
-    hide(id: string, result?: any): void;
+    resolve(id: string, result?: any): void;
     /**
      * Closes the modal and rejects its promise with the given reason.
      *
@@ -77,7 +77,7 @@ export declare class ModalManager {
      *
      * Used inside a modal component (via {@link useModal}).
      */
-    state<Props extends object = object, Resolve = unknown, Reject = unknown>(id: string): import("vue").ComputedRef<ModalState<Props, Resolve, Reject>>;
+    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/modal-manager.js

@@ -1,8 +1,8 @@
-import { computed, nextTick, shallowRef, triggerRef } from "vue";
+import { markRaw, reactive } from "vue";
 export class ModalManager {
   static #instance = null;
   /** Reactive map of active modals */
-  #modals = shallowRef(/* @__PURE__ */ new Map());
+  #modals = reactive(/* @__PURE__ */ new Map());
   /** Eagerly registered components (id → Component) */
   #registered = /* @__PURE__ */ new Map();
   /** Lazily registered loaders (id → loader) */
@@ -46,8 +46,8 @@ export class ModalManager {
    * @param id     — modal identifier
    * @param result — value the promise resolves with
    */
-  hide(id, result) {
-    this.#hide(id, result);
+  resolve(id, result) {
+    this.#resolve(id, result);
   }
   /**
    * Closes the modal and rejects its promise with the given reason.
@@ -64,7 +64,7 @@ export class ModalManager {
    * Used inside a modal component (via {@link useModal}).
    */
   state(id) {
-    return computed(() => this.#modals.value.get(id));
+    return this.#modals.get(id);
   }
   // ── Private implementation ──
   async #show(id, props = {}) {
@@ -80,7 +80,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.value.get(id);
+    const existing = this.#modals.get(id);
     return new Promise((resolve, reject) => {
       if (existing) {
         existing.props = props;
@@ -88,47 +88,30 @@ export class ModalManager {
         existing.resolve = resolve;
         existing.reject = reject;
       } else {
-        this.#modals.value.set(id, {
+        this.#modals.set(id, {
           id,
-          component,
+          component: markRaw(component),
           props,
           opened: true,
           resolve,
           reject
         });
       }
-      triggerRef(this.#modals);
     });
   }
-  #hide(id, result) {
-    const modal = this.#modals.value.get(id);
+  #resolve(id, result) {
+    const modal = this.#modals.get(id);
     if (!modal)
       return;
     modal.opened = false;
     modal.resolve?.(result);
-    triggerRef(this.#modals);
-    nextTick(() => {
-      const current = this.#modals.value.get(id);
-      if (current && !current.opened) {
-        this.#modals.value.delete(id);
-        triggerRef(this.#modals);
-      }
-    });
   }
   #reject(id, reason) {
-    const modal = this.#modals.value.get(id);
+    const modal = this.#modals.get(id);
     if (!modal)
       return;
     modal.opened = false;
     modal.reject?.(reason);
-    triggerRef(this.#modals);
-    nextTick(() => {
-      const current = this.#modals.value.get(id);
-      if (current && !current.opened) {
-        this.#modals.value.delete(id);
-        triggerRef(this.#modals);
-      }
-    });
   }
 }
 export const $modals = ModalManager.instance;

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

@@ -24,4 +24,5 @@ id: string): {
     opened: import("vue").WritableComputedRef<boolean, boolean>;
     /** closes the modal and resolves the promise */
     resolve: (reason: Resolve) => void;
+    reject: () => void;
 };

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

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

package/package.json

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