nuance-ui 0.1.54 → 0.1.56

package/dist/module.json

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

package/dist/module.mjs

@@ -71,7 +71,7 @@ const module$1 = defineNuxtModule({
       addImportsDir(resolve("./runtime/helpers"));
     }
     addPlugin({
-      src: resolve("./runtime/plugins/modals/plugin.client.ts"),
+      src: resolve("./runtime/plugins/modals/plugin.client"),
       mode: "client"
     });
     nuxt.options.css.push(resolve("./runtime/styles/global.css"));

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

@@ -1,7 +1,7 @@
 import type { ActionIconProps } from '../../action-icon/index.js';
-declare var __VLS_10: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/dialog/ui/dialog-close-button.vue

@@ -17,13 +17,15 @@ const close = useDialogState();
 </script>
 
 <template>
-	<ActionIcon
-		:icon
-		:variant
-		tabindex='0'
-		v-bind='props'
-		@click='close'
-	>
-		<slot />
-	</ActionIcon>
+	<ClientOnly>
+		<ActionIcon
+			:icon
+			:variant
+			tabindex='0'
+			v-bind='props'
+			@click='close'
+		>
+			<slot />
+		</ActionIcon>
+	</ClientOnly>
 </template>

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

@@ -1,7 +1,7 @@
 import type { ActionIconProps } from '../../action-icon/index.js';
-declare var __VLS_10: {};
+declare var __VLS_16: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_10) => any;
+    default?: (props: typeof __VLS_16) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ActionIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ActionIconProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,9 +1,9 @@
 import type { BoxProps } from '../../box.vue.js';
 export interface DialogHeaderProps extends BoxProps {
 }
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -8,7 +8,9 @@ const { is = "header", mod } = defineProps({
 </script>
 
 <template>
-	<Box :is :mod :class='css.header'>
-		<slot />
-	</Box>
+	<ClientOnly>
+		<Box :is :mod :class='css.header'>
+			<slot />
+		</Box>
+	</ClientOnly>
 </template>

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

@@ -1,9 +1,9 @@
 import type { BoxProps } from '../../box.vue.js';
 export interface DialogHeaderProps extends BoxProps {
 }
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DialogHeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogHeaderProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -33,9 +33,9 @@ type __VLS_ModelProps = {
     'open'?: DialogModel['open'];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_31: {};
+declare var __VLS_38: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_31) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;

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

@@ -1,7 +1,7 @@
 <script setup>
 import { getRadius, getShadow, getSize, getSpacing, rem } from "@nui/utils";
 import { onClickOutside, unrefElement } from "@vueuse/core";
-import { computed, onMounted, shallowRef, watch } from "vue";
+import { computed, shallowRef, watch } from "vue";
 import Box from "../../box.vue";
 import NTransition from "../../transition/transition.vue";
 import { useProvideDialogState } from "../lib";
@@ -55,8 +55,7 @@ const dialogRef = shallowRef(null);
 if (closeOnClickOutside) {
   onClickOutside(dialogRef, () => opened.value = false);
 }
-watch(opened, (isOpen) => {
-  const dialog = unrefElement(dialogRef);
+watch([opened, () => unrefElement(dialogRef)], ([isOpen, dialog]) => {
   if (!dialog)
     return;
   if (isOpen)
@@ -64,11 +63,6 @@ watch(opened, (isOpen) => {
   else
     dialog.close();
 }, { flush: "post" });
-onMounted(() => {
-  if (!opened.value)
-    return;
-  open(unrefElement(dialogRef));
-});
 const style = computed(() => ({
   "--dialog-size": getSize(size, "dialog-size"),
   "--dialog-radius": radius ? getRadius(radius) : void 0,
@@ -80,22 +74,24 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Teleport :disabled='!withinPortal' :to='portalTarget'>
-		<Box
-			is='dialog'
-			ref='dialogRef'
-			:class='[css.root, rootClass]'
-			:mod='[{ "without-overlay": withoutOverlay }, mod]'
-			:style
-			@click='overlayClick'
-			@close='$emit("close")'
-			@cancel.prevent='opened = false'
-		>
-			<NTransition :name='transition'>
-				<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
-					<slot />
-				</Box>
-			</NTransition>
-		</Box>
-	</Teleport>
+	<ClientOnly>
+		<Teleport :disabled='!withinPortal' :to='portalTarget'>
+			<Box
+				is='dialog'
+				ref='dialogRef'
+				:class='[css.root, rootClass]'
+				:mod='[{ "without-overlay": withoutOverlay }, mod]'
+				:style
+				@click='overlayClick'
+				@close='$emit("close")'
+				@cancel.prevent='opened = false'
+			>
+				<NTransition :name='transition'>
+					<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
+						<slot />
+					</Box>
+				</NTransition>
+			</Box>
+		</Teleport>
+	</ClientOnly>
 </template>

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

@@ -33,9 +33,9 @@ type __VLS_ModelProps = {
     'open'?: DialogModel['open'];
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_31: {};
+declare var __VLS_38: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_31) => any;
+    default?: (props: typeof __VLS_38) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;

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

@@ -1,9 +1,9 @@
 import type { TitleProps } from '../../title.vue.js';
 export interface DialogTitleProps extends TitleProps {
 }
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -20,7 +20,9 @@ const { size = "md", lh = "1", ...props } = defineProps({
 </script>
 
 <template>
-	<Title :class='css.title' :lh :size v-bind='props'>
-		<slot />
-	</Title>
+	<ClientOnly>
+		<Title :class='css.title' :lh :size v-bind='props'>
+			<slot />
+		</Title>
+	</ClientOnly>
 </template>

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

@@ -1,9 +1,9 @@
 import type { TitleProps } from '../../title.vue.js';
 export interface DialogTitleProps extends TitleProps {
 }
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<DialogTitleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogTitleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

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

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

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

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

package/package.json

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