@nuxt/ui 2.12.3 → 2.14.0

package/dist/runtime/components/layout/Divider.vue

@@ -47,6 +47,13 @@ export default defineComponent({
       type: Object,
       default: null
     },
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.border.size.horizontal).includes(value) || Object.keys(config.border.size.vertical).includes(value);
+      }
+    },
     orientation: {
       type: String,
       default: "horizontal",
@@ -84,7 +91,7 @@ export default defineComponent({
       return twJoin(
         ui.value.border.base,
         ui.value.border[props.orientation],
-        ui.value.border.size[props.orientation],
+        ui.value.border.size[props.orientation][props.size],
         ui.value.border.type[props.type]
       );
     });

package/dist/runtime/components/layout/Divider.vue.d.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar } from '../../types';
+import type { Avatar, DividerSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     label: {
         type: StringConstructor;
@@ -13,6 +13,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Avatar>;
         default: null;
     };
+    size: {
+        type: PropType<DividerSize>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
     orientation: {
         type: PropType<"horizontal" | "vertical">;
         default: string;
@@ -25,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: () => string;
+        default: () => "";
     };
     ui: {
         type: PropType<any>;
@@ -39,7 +44,7 @@ declare const _default: import("vue").DefineComponent<{
     wrapperClass: import("vue").ComputedRef<string>;
     containerClass: import("vue").ComputedRef<string>;
     borderClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: StringConstructor;
         default: null;
@@ -52,6 +57,11 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<Avatar>;
         default: null;
     };
+    size: {
+        type: PropType<DividerSize>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
     orientation: {
         type: PropType<"horizontal" | "vertical">;
         default: string;
@@ -64,7 +74,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     class: {
         type: PropType<any>;
-        default: () => string;
+        default: () => "";
     };
     ui: {
         type: PropType<any>;
@@ -72,6 +82,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     orientation: "horizontal" | "vertical";
+    size: DividerSize;
     ui: any;
     icon: string;
     avatar: Avatar;

package/dist/runtime/components/layout/Skeleton.vue.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     skeletonClass: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
         type: PropType<any>;
         default: () => string;

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
     getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<BreadcrumbLink[]>;
         default: () => never[];

package/dist/runtime/components/navigation/CommandPalette.vue

@@ -63,7 +63,7 @@
 
 <script>
 import { ref, computed, watch, toRef, onMounted, defineComponent } from "vue";
-import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions } from "@headlessui/vue";
+import { Combobox as HCombobox, ComboboxInput as HComboboxInput, ComboboxOptions as HComboboxOptions, provideUseId } from "@headlessui/vue";
 import { useDebounceFn } from "@vueuse/core";
 import { useFuse } from "@vueuse/integrations/useFuse";
 import { twJoin } from "tailwind-merge";
@@ -75,6 +75,7 @@ import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { commandPalette } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.commandPalette, commandPalette);
 export default defineComponent({
   components: {
@@ -316,6 +317,7 @@ export default defineComponent({
       comboboxApi,
       results
     });
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -110,7 +110,7 @@ declare const _default: import("vue").DefineComponent<{
     emptyState: ComputedRef<any>;
     onSelect: (option: Command | Command[]) => void;
     onClear: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: null;
@@ -200,8 +200,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
     icon: string;

package/dist/runtime/components/navigation/CommandPaletteGroup.vue

@@ -71,10 +71,11 @@
 
 <script>
 import { computed, defineComponent } from "vue";
-import { ComboboxOption as HComboboxOption } from "@headlessui/vue";
+import { ComboboxOption as HComboboxOption, provideUseId } from "@headlessui/vue";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
+import { useId } from "#imports";
 export default defineComponent({
   components: {
     HComboboxOption,
@@ -137,6 +138,7 @@ export default defineComponent({
       }
       return content;
     }
+    provideUseId(() => useId());
     return {
       label,
       highlight

package/dist/runtime/components/navigation/CommandPaletteGroup.vue.d.ts

@@ -31,7 +31,7 @@ declare const _default: import("vue").DefineComponent<{
         indices: number[][];
         value: string;
     }) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     group: {
         type: PropType<Group>;
         required: true;

package/dist/runtime/components/navigation/HorizontalNavigation.vue

@@ -0,0 +1,102 @@
+<template>
+  <nav :class="ui.wrapper" v-bind="attrs">
+    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`" :class="ui.container">
+      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`" :class="ui.inner">
+        <ULink
+          v-slot="{ isActive }"
+          v-bind="getULinkProps(link)"
+          :class="[ui.base, ui.before, ui.after]"
+          :active-class="ui.active"
+          :inactive-class="ui.inactive"
+          @click="link.click"
+          @keyup.enter="$event.target.blur()"
+        >
+          <slot name="avatar" :link="link" :is-active="isActive">
+            <UAvatar
+              v-if="link.avatar"
+              v-bind="{ size: ui.avatar.size, ...link.avatar }"
+              :class="[ui.avatar.base]"
+            />
+          </slot>
+          <slot name="icon" :link="link" :is-active="isActive">
+            <UIcon
+              v-if="link.icon"
+              :name="link.icon"
+              :class="twMerge(twJoin(ui.icon.base, isActive ? ui.icon.active : ui.icon.inactive), link.iconClass)"
+            />
+          </slot>
+          <slot :link="link" :is-active="isActive">
+            <span v-if="link.label" :class="twMerge(ui.label, link.labelClass)">
+              <span v-if="isActive" class="sr-only">
+                Current page:
+              </span>
+              {{ link.label }}
+            </span>
+          </slot>
+          <slot name="badge" :link="link" :is-active="isActive">
+            <UBadge
+              v-if="link.badge"
+              v-bind="{
+                size: ui.badge.size,
+                color: ui.badge.color,
+                variant: ui.badge.variant,
+                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
+              }"
+              :class="ui.badge.base"
+            />
+          </slot>
+        </ULink>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import { toRef, defineComponent, computed } from "vue";
+import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
+import UAvatar from "../elements/Avatar.vue";
+import UBadge from "../elements/Badge.vue";
+import ULink from "../elements/Link.vue";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig, getULinkProps } from "../../utils";
+import appConfig from "#build/app.config";
+import { horizontalNavigation } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.horizontalNavigation, horizontalNavigation);
+export default defineComponent({
+  components: {
+    UIcon,
+    UAvatar,
+    UBadge,
+    ULink
+  },
+  inheritAttrs: false,
+  props: {
+    links: {
+      type: Array,
+      default: () => []
+    },
+    class: {
+      type: [String, Object, Array],
+      default: () => ""
+    },
+    ui: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("horizontalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
+    const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      sections,
+      getULinkProps,
+      twMerge,
+      twJoin
+    };
+  }
+});
+</script>

package/dist/runtime/components/navigation/HorizontalNavigation.vue.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+import { twJoin } from 'tailwind-merge';
+import type { HorizontalNavigationLink } from '../../types';
+declare const _default: import("vue").DefineComponent<{
+    links: {
+        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
+        default: () => never[];
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    sections: import("vue").ComputedRef<HorizontalNavigationLink[][]>;
+    getULinkProps: (props: any) => {};
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
+    twJoin: typeof twJoin;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    links: {
+        type: PropType<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
+        default: () => never[];
+    };
+    class: {
+        type: PropType<any>;
+        default: () => string;
+    };
+    ui: {
+        type: PropType<any>;
+        default: () => {};
+    };
+}>>, {
+    ui: any;
+    class: any;
+    links: HorizontalNavigationLink[] | HorizontalNavigationLink[][];
+}, {}>;
+export default _default;

package/dist/runtime/components/navigation/Pagination.vue.d.ts

@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     onClickPage: (page: number | string) => void;
     onClickFirst: () => void;
     onClickLast: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         required: true;
@@ -165,6 +165,8 @@ declare const _default: import("vue").DefineComponent<{
     class: any;
     disabled: boolean;
     max: number;
+    prevButton: Button;
+    nextButton: Button;
     divider: string;
     pageCount: number;
     activeButton: Button;
@@ -173,7 +175,5 @@ declare const _default: import("vue").DefineComponent<{
     showLast: boolean;
     firstButton: Button;
     lastButton: Button;
-    prevButton: Button;
-    nextButton: Button;
 }, {}>;
 export default _default;

package/dist/runtime/components/navigation/Tabs.vue

@@ -33,13 +33,7 @@
     </HTabList>
 
     <HTabPanels :class="ui.container">
-      <HTabPanel
-        v-for="(item, index) of items"
-        :key="index"
-        v-slot="{ selected }"
-        :class="ui.base"
-        tabindex="-1"
-      >
+      <HTabPanel v-for="(item, index) of items" :key="index" v-slot="{ selected }" :class="ui.base" :unmount="unmount">
         <slot :name="item.slot || 'item'" :item="item" :index="index" :selected="selected">
           {{ item.content }}
         </slot>
@@ -50,12 +44,13 @@
 
 <script>
 import { toRef, ref, watch, onMounted, defineComponent } from "vue";
-import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel } from "@headlessui/vue";
+import { TabGroup as HTabGroup, TabList as HTabList, Tab as HTab, TabPanels as HTabPanels, TabPanel as HTabPanel, provideUseId } from "@headlessui/vue";
 import { useResizeObserver } from "@vueuse/core";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { tabs } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.tabs, tabs);
 export default defineComponent({
   components: {
@@ -84,6 +79,10 @@ export default defineComponent({
       type: Array,
       default: () => []
     },
+    unmount: {
+      type: Boolean,
+      default: false
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""
@@ -129,6 +128,7 @@ export default defineComponent({
       calcMarkerSize(selectedIndex.value);
     });
     onMounted(() => calcMarkerSize(selectedIndex.value));
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/navigation/Tabs.vue.d.ts

@@ -18,6 +18,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -36,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     markerRef: import("vue").Ref<HTMLElement | undefined>;
     selectedIndex: import("vue").Ref<number | undefined>;
     onChange: (index: number) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: NumberConstructor;
         default: undefined;
@@ -54,6 +58,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<TabItem[]>;
         default: () => never[];
     };
+    unmount: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -70,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     class: any;
     modelValue: number;
+    unmount: boolean;
     items: TabItem[];
     defaultIndex: number;
 }, {}>;

package/dist/runtime/components/navigation/VerticalNavigation.vue

@@ -34,9 +34,16 @@
             </span>
           </slot>
           <slot name="badge" :link="link" :is-active="isActive">
-            <span v-if="link.badge" :class="[ui.badge.base, isActive ? ui.badge.active : ui.badge.inactive]">
-              {{ link.badge }}
-            </span>
+            <UBadge
+              v-if="link.badge"
+              v-bind="{
+                size: ui.badge.size,
+                color: ui.badge.color,
+                variant: ui.badge.variant,
+                ...((typeof link.badge === 'string' || typeof link.badge === 'number') ? { label: link.badge } : link.badge)
+              }"
+              :class="ui.badge.base"
+            />
           </slot>
         </ULink>
       </li>
@@ -50,6 +57,7 @@ import { toRef, defineComponent, computed } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
+import UBadge from "../elements/Badge.vue";
 import ULink from "../elements/Link.vue";
 import UDivider from "../layout/Divider.vue";
 import { useUI } from "../../composables/useUI";
@@ -61,6 +69,7 @@ export default defineComponent({
   components: {
     UIcon,
     UAvatar,
+    UBadge,
     ULink,
     UDivider
   },

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -23,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     links: {
         type: PropType<VerticalNavigationLink[] | VerticalNavigationLink[][]>;
         default: () => never[];

package/dist/runtime/components/overlays/ContextMenu.vue.d.ts

@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     wrapperClass: import("vue").ComputedRef<string>;
     popper: import("vue").ComputedRef<PopperOptions>;
     container: Ref<import("@vueuse/core").MaybeElement>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -52,12 +52,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    popper: PopperOptions;
     class: any;
+    popper: PopperOptions;
     modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="close">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -28,11 +28,12 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
+import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild, provideUseId } from "@headlessui/vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { modal } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.modal, modal);
 export default defineComponent({
   components: {
@@ -76,7 +77,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close"],
+  emits: ["update:modelValue", "close", "close-prevented"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -96,9 +97,14 @@ export default defineComponent({
       };
     });
     function close(value) {
+      if (props.preventClose) {
+        emit("close-prevented");
+        return;
+      }
       isOpen.value = value;
       emit("close");
     }
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/overlays/Modal.vue.d.ts

@@ -40,7 +40,7 @@ declare const _default: import("vue").DefineComponent<{
     isOpen: import("vue").WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -74,16 +74,17 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    "onClose-prevented"?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
-    transition: boolean;
-    class: any;
-    modelValue: boolean;
     appear: boolean;
     overlay: boolean;
+    transition: boolean;
     preventClose: boolean;
     fullscreen: boolean;
+    class: any;
+    modelValue: boolean;
 }, {}>;
 export default _default;

package/dist/runtime/components/overlays/Modals.client.vue

@@ -0,0 +1,12 @@
+<template>
+  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+</template>
+
+<script lang="ts" setup>
+import { inject } from 'vue'
+import { useModal, modalInjectionKey } from '../../composables/useModal'
+
+const modalState = inject(modalInjectionKey)
+
+const { isOpen } = useModal()
+</script>

package/dist/runtime/components/overlays/Notification.vue

@@ -13,7 +13,7 @@
           <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
           <div :class="ui.inner">
-            <p :class="ui.title">
+            <p v-if="(title || $slots.title)" :class="ui.title">
               <slot name="title" :title="title">
                 {{ title }}
               </slot>
@@ -68,7 +68,7 @@ export default defineComponent({
     },
     title: {
       type: String,
-      required: true
+      default: null
     },
     description: {
       type: String,