@nuxt/ui 2.15.1 → 2.16.0

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

@@ -116,19 +116,19 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ToggleSize;
-    ui: any;
-    id: string;
-    color: any;
-    class: any;
     name: string;
-    modelValue: boolean;
-    loading: boolean;
+    class: any;
+    color: any;
     disabled: boolean;
+    ui: any;
+    loading: boolean;
     loadingIcon: string;
+    id: string;
+    modelValue: boolean;
     onIcon: string;
     offIcon: string;
 }, {}>;

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

@@ -32,8 +32,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
     as: string;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -32,8 +32,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
     as: string;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -81,13 +81,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    orientation: "horizontal" | "vertical";
     size: DividerSize;
-    ui: any;
-    icon: string;
-    avatar: Avatar;
     type: "solid" | "dotted" | "dashed";
-    class: any;
     label: string;
+    class: any;
+    avatar: Avatar;
+    orientation: "horizontal" | "vertical";
+    ui: any;
+    icon: string;
 }, {}>;
 export default _default;

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

@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -7,6 +7,7 @@
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
           v-bind="getULinkProps(link)"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
+          @click="link.click"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
             <UIcon

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

@@ -44,8 +44,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
     divider: string;
     links: BreadcrumbLink[];
 }, {}>;

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

@@ -3,7 +3,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import type { Group, Command, Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor | NumberConstructor)[];
         default: null;
     };
     by: {
@@ -110,9 +110,9 @@ 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").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close")[], "update:modelValue" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
+        type: (StringConstructor | ObjectConstructor | ArrayConstructor | NumberConstructor)[];
         default: null;
     };
     by: {
@@ -200,16 +200,16 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    class: any;
     ui: any;
+    loading: boolean;
     icon: string;
-    closeButton: Button;
-    class: any;
-    modelValue: string | number | unknown[] | Record<string, any>;
+    loadingIcon: string;
+    modelValue: string | number | Record<string, any> | unknown[];
     by: string;
-    loading: boolean;
     emptyState: {
         icon: string;
         label: string;
@@ -217,14 +217,14 @@ declare const _default: import("vue").DefineComponent<{
     };
     multiple: boolean;
     placeholder: string;
-    loadingIcon: string;
+    closeButton: Button;
     nullable: boolean;
     selectedIcon: string;
     debounce: number;
     searchable: boolean;
-    groups: Group[];
     groupAttribute: string;
     commandAttribute: string;
+    groups: Group[];
     autoselect: boolean;
     autoclear: boolean;
     fuse: UseFuseOptions<Command>;

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

@@ -37,8 +37,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
     links: HorizontalNavigationLink[] | HorizontalNavigationLink[][];
 }, {}>;
 export default _default;

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

@@ -29,6 +29,7 @@
     <UButton
       v-for="(page, index) of displayedPages"
       :key="`${page}-${index}`"
+      :to="typeof page === 'number' ? to?.(page) : null"
       :size="size"
       :disabled="disabled"
       :label="`${page}`"
@@ -111,6 +112,10 @@ export default defineComponent({
         return Object.keys(buttonConfig.size).includes(value);
       }
     },
+    to: {
+      type: Function,
+      default: null
+    },
     activeButton: {
       type: Object,
       default: () => config.default.activeButton

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

@@ -27,6 +27,10 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): boolean;
     };
+    to: {
+        type: PropType<(page: number) => RouteLocationRaw>;
+        default: null;
+    };
     activeButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -113,6 +117,10 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
         validator(value: string): boolean;
     };
+    to: {
+        type: PropType<(page: number) => RouteLocationRaw>;
+        default: null;
+    };
     activeButton: {
         type: PropType<Button>;
         default: () => Button;
@@ -161,9 +169,10 @@ declare const _default: import("vue").DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     size: ButtonSize;
-    ui: any;
     class: any;
     disabled: boolean;
+    to: (page: number) => RouteLocationRaw;
+    ui: any;
     max: number;
     prevButton: Button;
     nextButton: Button;

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

@@ -71,12 +71,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    class: any;
     orientation: "horizontal" | "vertical";
     ui: any;
-    class: any;
     modelValue: number;
     unmount: boolean;
     items: TabItem[];

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

@@ -37,8 +37,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
     links: VerticalNavigationLink[] | VerticalNavigationLink[][];
 }, {}>;
 export default _default;

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").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close")[], "update:modelValue" | "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -52,12 +52,12 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     class: any;
     popper: PopperOptions;
+    ui: any;
     modelValue: boolean;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot :appear="appear" :show="isOpen" as="template">
+  <TransitionRoot :appear="appear" :show="isOpen" as="template" @after-leave="onAfterLeave">
     <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]" />
@@ -77,7 +77,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close", "close-prevented"],
+  emits: ["update:modelValue", "close", "close-prevented", "after-leave"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -104,6 +104,9 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    const onAfterLeave = () => {
+      emit("after-leave");
+    };
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -111,6 +114,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     };
   }

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

@@ -39,8 +39,9 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
+    onAfterLeave: () => void;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close" | "close-prevented" | "after-leave")[], "update:modelValue" | "close" | "close-prevented" | "after-leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: BooleanConstructor;
         default: boolean;
@@ -74,17 +75,18 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
+    "onAfter-leave"?: ((...args: any[]) => any) | undefined;
 }, {
+    class: any;
+    transition: boolean;
     ui: 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

@@ -1,5 +1,11 @@
 <template>
-  <component :is="modalState.component" v-if="modalState" v-bind="modalState.props" v-model="isOpen" />
+  <component
+    :is="modalState.component"
+    v-if="modalState"
+    v-bind="modalState.props"
+    v-model="isOpen"
+    @after-leave="reset"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -8,5 +14,5 @@ import { useModal, modalInjectionKey } from '../../composables/useModal'
 
 const modalState = inject(modalInjectionKey)
 
-const { isOpen } = useModal()
+const { isOpen, reset } = useModal()
 </script>

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

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import { ref, computed, toRef, onMounted, onUnmounted, watchEffect, defineComponent } from "vue";
+import { ref, computed, toRef, onMounted, onUnmounted, watch, watchEffect, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
@@ -171,7 +171,10 @@ export default defineComponent({
       }
       emit("close");
     }
-    onMounted(() => {
+    function initTimer() {
+      if (timer) {
+        timer.stop();
+      }
       if (!props.timeout) {
         return;
       }
@@ -181,7 +184,9 @@ export default defineComponent({
       watchEffect(() => {
         remaining.value = timer.remaining.value;
       });
-    });
+    }
+    watch(() => props.timeout, initTimer);
+    onMounted(initTimer);
     onUnmounted(() => {
       if (timer) {
         timer.stop();

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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { Avatar, Button, NotificationAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     id: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     title: {
@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         required: true;
     };
     title: {
@@ -119,16 +119,16 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
     title: string;
-    description: string;
-    icon: string;
+    class: any;
     avatar: Avatar;
+    color: any;
+    ui: any;
+    icon: string;
+    description: string;
     closeButton: Button;
-    timeout: number;
     actions: NotificationAction[];
+    timeout: number;
     callback: Function;
-    color: any;
-    class: any;
 }, {}>;
 export default _default;

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

@@ -30,6 +30,8 @@ declare const _default: import("vue").DefineComponent<{
             ui?: any;
         };
         remove: (id: string) => void;
+        update: (id: string, notification: Partial<Notification>) => void;
+        clear: () => void;
     };
     notifications: any;
     wrapperClass: import("vue").ComputedRef<string>;
@@ -43,7 +45,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
     class: any;
+    ui: any;
 }, {}>;
 export default _default;

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

@@ -138,8 +138,8 @@ export default defineComponent({
         };
       }
     });
-    function onTouchStart() {
-      if (!popoverApi.value) {
+    function onTouchStart(event) {
+      if (!event.cancelable || !popoverApi.value) {
         return;
       }
       if (popoverApi.value.popoverState === 0) {

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

@@ -68,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
         paddingLeft: string;
         paddingRight: string;
     }>;
-    onTouchStart: () => void;
+    onTouchStart: (event: TouchEvent) => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -112,14 +112,14 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     "onUpdate:open"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
-    overlay: boolean;
     class: any;
     popper: PopperOptions;
     disabled: boolean;
+    ui: any;
     open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;
+    overlay: boolean;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <TransitionRoot as="template" :appear="appear" :show="isOpen">
+  <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
     <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" 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]" />
@@ -66,7 +66,7 @@ export default defineComponent({
       default: () => ({})
     }
   },
-  emits: ["update:modelValue", "close", "close-prevented"],
+  emits: ["update:modelValue", "close", "close-prevented", "after-leave"],
   setup(props, { emit }) {
     const { ui, attrs } = useUI("slideover", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
@@ -97,6 +97,9 @@ export default defineComponent({
       isOpen.value = value;
       emit("close");
     }
+    const onAfterLeave = () => {
+      emit("after-leave");
+    };
     provideUseId(() => useId());
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -104,6 +107,7 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      onAfterLeave,
       close
     };
   }

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     side: {
-        type: PropType<"right" | "left">;
+        type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -40,8 +40,9 @@ declare const _default: import("vue").DefineComponent<{
     }, string>>;
     isOpen: WritableComputedRef<boolean>;
     transitionClass: import("vue").ComputedRef<any>;
+    onAfterLeave: () => void;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented")[], "close" | "update:modelValue" | "close-prevented", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "close" | "close-prevented" | "after-leave")[], "update:modelValue" | "close" | "close-prevented" | "after-leave", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
         type: PropType<boolean>;
         default: boolean;
@@ -51,7 +52,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     side: {
-        type: PropType<"right" | "left">;
+        type: PropType<"left" | "right">;
         default: string;
         validator: (value: string) => boolean;
     };
@@ -76,17 +77,18 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
     "onClose-prevented"?: ((...args: any[]) => any) | undefined;
+    "onAfter-leave"?: ((...args: any[]) => any) | undefined;
 }, {
+    class: any;
+    transition: boolean;
     ui: any;
+    modelValue: boolean;
     appear: boolean;
     overlay: boolean;
-    transition: boolean;
     preventClose: boolean;
-    class: any;
-    side: "right" | "left";
-    modelValue: boolean;
+    side: "left" | "right";
 }, {}>;
 export default _default;

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

@@ -4,6 +4,7 @@
     v-if="slideoverState"
     v-bind="slideoverState.props"
     v-model="isOpen"
+    @after-leave="reset"
   />
 </template>
 
@@ -13,5 +14,5 @@ import { useSlideover, slidOverInjectionKey } from '../../composables/useSlideov
 
 const slideoverState = inject(slidOverInjectionKey)
 
-const { isOpen } = useSlideover()
+const { isOpen, reset } = useSlideover()
 </script>

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

@@ -78,10 +78,10 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
-    ui: any;
+    text: string;
     class: any;
     popper: PopperOptions;
-    text: string;
+    ui: any;
     openDelay: number;
     closeDelay: number;
     prevent: boolean;

package/dist/runtime/composables/useFormGroup.d.ts

@@ -12,7 +12,7 @@ export declare const useFormGroup: (inputProps?: InputProps, config?: any) => {
     size: import("vue").ComputedRef<any>;
     color: import("vue").ComputedRef<string | undefined>;
     emitFormBlur: () => void;
-    emitFormInput: import("@vueuse/shared").PromisifyFn<() => void>;
+    emitFormInput: import("@vueuse/core").PromisifyFn<() => void>;
     emitFormChange: () => void;
 };
 export {};

package/dist/runtime/composables/useModal.d.ts

@@ -3,10 +3,11 @@ import type { ComponentProps } from '../types/component';
 import type { Modal, ModalState } from '../types/modal';
 export declare const modalInjectionKey: InjectionKey<ShallowRef<ModalState>>;
 declare function _useModal(): {
-    isOpen: import("vue").Ref<boolean>;
     open: <T extends Component>(component: T, props?: Modal & ComponentProps<T>) => void;
-    close: () => void;
+    close: () => Promise<void>;
+    reset: () => void;
     patch: <T_1 extends Component = {}>(props: Partial<Modal & ComponentProps<T_1>>) => void;
+    isOpen: import("vue").Ref<boolean>;
 };
 export declare const useModal: typeof _useModal;
 export {};