@nuxt/ui 2.15.2 → 2.17.0

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

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { TextareaSize, TextareaVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     id: {
@@ -102,7 +102,7 @@ declare const _default: import("vue").DefineComponent<{
     onBlur: (event: FocusEvent) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "update:modelValue")[], "blur" | "change" | "update:modelValue", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (NumberConstructor | StringConstructor)[];
+        type: (StringConstructor | NumberConstructor)[];
         default: string;
     };
     id: {
@@ -189,24 +189,24 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-    onChange?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
+    onChange?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    resize: boolean;
     size: TextareaSize;
+    name: string;
+    required: boolean;
+    class: any;
+    resize: boolean;
+    color: any;
+    variant: TextareaVariant;
+    disabled: boolean;
     ui: any;
+    padded: boolean;
     id: string;
-    color: any;
-    class: any;
-    name: string;
     modelValue: string | number;
-    variant: TextareaVariant;
     rows: number;
-    disabled: boolean;
     placeholder: string;
-    padded: boolean;
-    required: boolean;
     autofocus: boolean;
     autofocusDelay: number;
     modelModifiers: {

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

@@ -5,8 +5,9 @@
         <ULink
           as="span"
           :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"
+          v-bind="getULinkProps(link)"
+          @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

@@ -283,7 +283,11 @@ export default defineComponent({
         (props.loading || isLoading.value) && props.loadingIcon && ui.value.input.icon.loading
       );
     });
-    const emptyState = computed(() => ({ ...ui.value.default.emptyState, ...props.emptyState }));
+    const emptyState = computed(() => {
+      if (props.emptyState === null)
+        return null;
+      return { ...ui.value.default.emptyState, ...props.emptyState };
+    });
     function activateFirstOption() {
       setTimeout(() => {
         comboboxInput.value?.$el.dispatchEvent(new KeyboardEvent("keydown", { key: "PageUp" }));

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

@@ -32,7 +32,7 @@
       </HTab>
     </HTabList>
 
-    <HTabPanels :class="ui.container">
+    <HTabPanels v-if="content" :class="ui.container">
       <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 }}
@@ -83,6 +83,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    content: {
+      type: Boolean,
+      default: true
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""

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

@@ -22,6 +22,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    content: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -62,6 +66,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    content: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => string;
@@ -71,12 +79,13 @@ 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;
+    content: boolean;
     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.d.ts

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<{
     transitionClass: import("vue").ComputedRef<any>;
     onAfterLeave: () => void;
     close: (value: boolean) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue" | "close-prevented" | "after-leave")[], "close" | "update:modelValue" | "close-prevented" | "after-leave", 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;
@@ -75,18 +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/Notification.vue

@@ -18,11 +18,11 @@
                 {{ title }}
               </slot>
             </p>
-            <p v-if="(description || $slots.description)" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
+            <div v-if="(description || $slots.description)" :class="twMerge(ui.description, !(title && $slots.title) && 'mt-0 leading-5')">
               <slot name="description" :description="description">
                 {{ description }}
               </slot>
-            </p>
+            </div>
 
             <div v-if="(description || $slots.description) && actions.length" :class="ui.actions">
               <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...(ui.default.actionButton || {}), ...action }" @click.stop="onAction(action)" />
@@ -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";
@@ -124,7 +124,8 @@ export default defineComponent({
         ui.value.wrapper,
         ui.value.background?.replaceAll("{color}", props.color),
         ui.value.rounded,
-        ui.value.shadow
+        ui.value.shadow,
+        ui.value.ring?.replaceAll("{color}", props.color)
       ), props.class);
     });
     const progressClass = computed(() => {
@@ -171,7 +172,10 @@ export default defineComponent({
       }
       emit("close");
     }
-    onMounted(() => {
+    function initTimer() {
+      if (timer) {
+        timer.stop();
+      }
       if (!props.timeout) {
         return;
       }
@@ -181,7 +185,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.d.ts

@@ -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,12 +1,12 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen" @after-leave="onAfterLeave">
-    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }]" v-bind="attrs" @close="close">
+    <HDialog :class="[ui.wrapper, { 'justify-end': side === 'right' }, { 'items-end': side === 'bottom' }]" 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>
 
       <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-        <HDialogPanel :class="[ui.base, ui.width, ui.background, ui.ring, ui.padding]">
+        <HDialogPanel :class="[ui.base, sideType === 'horizontal' ? [ui.width, 'h-full'] : [ui.height, 'w-full'], ui.background, ui.ring, ui.padding]">
           <slot />
         </HDialogPanel>
       </TransitionChild>
@@ -43,7 +43,7 @@ export default defineComponent({
     side: {
       type: String,
       default: "right",
-      validator: (value) => ["left", "right"].includes(value)
+      validator: (value) => ["left", "right", "top", "bottom"].includes(value)
     },
     overlay: {
       type: Boolean,
@@ -81,14 +81,50 @@ export default defineComponent({
       if (!props.transition) {
         return {};
       }
+      let enterFrom, leaveTo;
+      switch (props.side) {
+        case "left":
+          enterFrom = ui.value.translate.left;
+          leaveTo = ui.value.translate.left;
+          break;
+        case "right":
+          enterFrom = ui.value.translate.right;
+          leaveTo = ui.value.translate.right;
+          break;
+        case "top":
+          enterFrom = ui.value.translate.top;
+          leaveTo = ui.value.translate.top;
+          break;
+        case "bottom":
+          enterFrom = ui.value.translate.bottom;
+          leaveTo = ui.value.translate.bottom;
+          break;
+        default:
+          enterFrom = ui.value.translate.right;
+          leaveTo = ui.value.translate.right;
+      }
       return {
         ...ui.value.transition,
-        enterFrom: props.side === "left" ? ui.value.translate.left : ui.value.translate.right,
+        enterFrom,
         enterTo: ui.value.translate.base,
         leaveFrom: ui.value.translate.base,
-        leaveTo: props.side === "left" ? ui.value.translate.left : ui.value.translate.right
+        leaveTo
       };
     });
+    const sideType = computed(() => {
+      switch (props.side) {
+        case "left":
+          return "horizontal";
+        case "right":
+          return "horizontal";
+        case "top":
+          return "vertical";
+        case "bottom":
+          return "vertical";
+        default:
+          return "right";
+      }
+    });
     function close(value) {
       if (props.preventClose) {
         emit("close-prevented");
@@ -107,9 +143,10 @@ export default defineComponent({
       attrs,
       isOpen,
       transitionClass,
+      sideType,
       onAfterLeave,
       close
     };
   }
 });
-</script>
+</script>