@nuxt/ui 2.13.0 → 2.14.1

package/dist/runtime/components/forms/Textarea.vue

@@ -61,6 +61,10 @@ export default defineComponent({
       type: Number,
       default: 3
     },
+    maxrows: {
+      type: Number,
+      default: 0
+    },
     autoresize: {
       type: Boolean,
       default: false
@@ -147,7 +151,7 @@ export default defineComponent({
         const { scrollHeight } = textarea2.value;
         const newRows = (scrollHeight - padding) / lineHeight;
         if (newRows > props.rows) {
-          textarea2.value.rows = newRows;
+          textarea2.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows;
         }
       }
     };

package/dist/runtime/components/forms/Textarea.vue.d.ts

@@ -29,6 +29,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    maxrows: {
+        type: NumberConstructor;
+        default: number;
+    };
     autoresize: {
         type: BooleanConstructor;
         default: boolean;
@@ -90,13 +94,13 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     textarea: import("vue").Ref<HTMLTextAreaElement | null>;
     textareaClass: import("vue").ComputedRef<string>;
     onInput: (event: Event) => void;
     onChange: (event: Event) => void;
     onBlur: (event: FocusEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "update:modelValue")[], "blur" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: (NumberConstructor | StringConstructor)[];
         default: string;
@@ -125,6 +129,10 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: number;
     };
+    maxrows: {
+        type: NumberConstructor;
+        default: number;
+    };
     autoresize: {
         type: BooleanConstructor;
         default: boolean;
@@ -189,15 +197,15 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
+    variant: TextareaVariant;
     modelValue: string | number;
     rows: number;
     disabled: boolean;
-    variant: TextareaVariant;
-    required: boolean;
     placeholder: string;
     padded: boolean;
+    required: boolean;
     autofocus: boolean;
     autofocusDelay: number;
     modelModifiers: {
@@ -205,6 +213,7 @@ declare const _default: import("vue").DefineComponent<{
         lazy?: boolean | undefined;
         number?: boolean | undefined;
     };
+    maxrows: number;
     autoresize: boolean;
     textareaClass: string;
 }, {}>;

package/dist/runtime/components/forms/Toggle.vue

@@ -20,7 +20,7 @@
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
-import { Switch as HSwitch } from "@headlessui/vue";
+import { Switch as HSwitch, provideUseId } from "@headlessui/vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
@@ -28,6 +28,7 @@ import { useFormGroup } from "../../composables/useFormGroup";
 import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
 import { toggle } from "#ui/ui.config";
+import { useId } from "#imports";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.toggle, toggle);
 export default defineComponent({
   components: {
@@ -124,6 +125,7 @@ export default defineComponent({
         color.value && ui.value.icon.off.replaceAll("{color}", color.value)
       );
     });
+    provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,

package/dist/runtime/components/forms/Toggle.vue.d.ts

@@ -49,13 +49,13 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     name: import("vue").ComputedRef<string | undefined>;
-    inputId: import("vue").Ref<string | undefined>;
+    inputId: import("vue").ComputedRef<string | undefined>;
     active: import("vue").WritableComputedRef<boolean>;
     switchClass: import("vue").ComputedRef<string>;
     containerClass: import("vue").ComputedRef<string>;
     onIconClass: import("vue").ComputedRef<string>;
     offIconClass: import("vue").ComputedRef<string>;
-}, 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<{
     id: {
         type: StringConstructor;
         default: null;
@@ -106,8 +106,8 @@ declare const _default: import("vue").DefineComponent<{
     ui: any;
     id: string;
     color: any;
-    name: string;
     class: any;
+    name: string;
     modelValue: boolean;
     disabled: boolean;
     onIcon: string;

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

@@ -7,7 +7,7 @@
     <div v-if="$slots.header" :class="[ui.header.base, ui.header.padding, ui.header.background]">
       <slot name="header" />
     </div>
-    <div :class="[ui.body.base, ui.body.padding, ui.body.background]">
+    <div v-if="$slots.default" :class="[ui.body.base, ui.body.padding, ui.body.background]">
       <slot />
     </div>
     <div v-if="$slots.footer" :class="[ui.footer.base, ui.footer.padding, ui.footer.background]">

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     cardClass: 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<{
     as: {
         type: StringConstructor;
         default: string;

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

@@ -18,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     containerClass: 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<{
     as: {
         type: StringConstructor;
         default: string;

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.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<HorizontalNavigationLink[] | HorizontalNavigationLink[][]>;
         default: () => never[];

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;

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.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

@@ -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: {
@@ -103,6 +104,7 @@ export default defineComponent({
       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-prevented")[], "close" | "update:modelValue" | "close-prevented", 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,17 +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,

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

@@ -7,7 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -66,14 +66,14 @@ declare const _default: import("vue").DefineComponent<{
     onClose: () => void;
     onAction: (action: NotificationAction) => void;
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
         type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
         type: StringConstructor;
-        required: true;
+        default: null;
     };
     description: {
         type: StringConstructor;
@@ -120,6 +120,7 @@ declare const _default: import("vue").DefineComponent<{
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
     ui: any;
+    title: string;
     description: string;
     icon: string;
     avatar: Avatar;

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

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     notifications: any;
     wrapperClass: 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;