@nuxt/ui 2.16.0 → 2.18.0

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

@@ -1,17 +1,66 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button, NotificationAction } from '../../types';
+import type { Avatar, Button, NotificationColor, NotificationAction, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    container: string;
+    inner: string;
+    title: string;
+    description: string;
+    actions: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    padding: string;
+    gap: string;
+    ring: string;
+    icon: {
+        base: string;
+        color: string;
+    };
+    avatar: {
+        base: string;
+        size: "md";
+    };
+    progress: {
+        base: string;
+        background: string;
+    };
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    default: {
+        color: string;
+        icon: any;
+        timeout: number;
+        closeButton: {
+            icon: string;
+            color: "gray";
+            variant: "link";
+            padded: boolean;
+        };
+        actionButton: {
+            size: "xs";
+            color: "white";
+        };
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     id: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     description: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     icon: {
         type: StringConstructor;
@@ -19,7 +68,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     avatar: {
         type: PropType<Avatar>;
-        default: null;
+        default: any;
     };
     closeButton: {
         type: PropType<Button>;
@@ -27,19 +76,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     actions: {
         type: PropType<NotificationAction[]>;
-        default: () => never[];
+        default: () => any[];
     };
     callback: {
         type: FunctionConstructor;
-        default: null;
+        default: any;
     };
     color: {
-        type: PropType<any>;
-        default: () => any;
+        type: PropType<NotificationColor>;
+        default: () => string;
         validator(value: string): boolean;
     };
     class: {
@@ -47,11 +96,61 @@ declare const _default: import("vue").DefineComponent<{
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        wrapper: string;
+        container: string;
+        inner: string;
+        title: string;
+        description: string;
+        actions: string;
+        background: string;
+        shadow: string;
+        rounded: string;
+        padding: string;
+        gap: string;
+        ring: string;
+        icon: {
+            base: string;
+            color: string;
+        };
+        avatar: {
+            base: string;
+            size: "md";
+        };
+        progress: {
+            base: string;
+            background: string;
+        };
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+        default: {
+            color: string;
+            icon: any;
+            timeout: number;
+            closeButton: {
+                icon: string;
+                color: "gray";
+                variant: "link";
+                padded: boolean;
+            };
+            actionButton: {
+                size: "xs";
+                color: "white";
+            };
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -68,16 +167,16 @@ 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: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     description: {
         type: StringConstructor;
-        default: null;
+        default: any;
     };
     icon: {
         type: StringConstructor;
@@ -85,7 +184,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     avatar: {
         type: PropType<Avatar>;
-        default: null;
+        default: any;
     };
     closeButton: {
         type: PropType<Button>;
@@ -93,19 +192,19 @@ declare const _default: import("vue").DefineComponent<{
     };
     timeout: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     actions: {
         type: PropType<NotificationAction[]>;
-        default: () => never[];
+        default: () => any[];
     };
     callback: {
         type: FunctionConstructor;
-        default: null;
+        default: any;
     };
     color: {
-        type: PropType<any>;
-        default: () => any;
+        type: PropType<NotificationColor>;
+        default: () => string;
         validator(value: string): boolean;
     };
     class: {
@@ -113,22 +212,24 @@ declare const _default: import("vue").DefineComponent<{
         default: () => "";
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
+    onClose?: (...args: any[]) => any;
 }, {
-    title: string;
-    class: any;
-    avatar: Avatar;
-    color: any;
-    ui: any;
+    ui: {};
+    color: NotificationColor;
     icon: string;
+    avatar: any;
+    class: any;
+    title: string;
     description: string;
     closeButton: Button;
-    actions: NotificationAction[];
     timeout: number;
+    actions: NotificationAction[];
     callback: Function;
 }, {}>;
 export default _default;

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

@@ -1,39 +1,52 @@
 import type { PropType } from 'vue';
-import type { Notification } from '../../types';
+import type { Notification, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    position: string;
+    width: string;
+    container: string;
+};
 declare const _default: import("vue").DefineComponent<{
     class: {
         type: PropType<any>;
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        wrapper: string;
+        position: string;
+        width: string;
+        container: string;
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
     toast: {
         add: (notification: Partial<Notification>) => {
             id: string;
-            title?: string | undefined;
-            description?: string | undefined;
-            icon?: string | undefined;
-            avatar?: import("../../types").Avatar | undefined;
-            closeButton?: import("../../types").Button | undefined;
-            timeout?: number | undefined;
-            actions?: import("../../types").NotificationAction[] | undefined;
-            click?: Function | undefined;
-            callback?: Function | undefined;
-            color?: any;
+            title?: string;
+            description?: string;
+            icon?: string;
+            avatar?: import("../../types").Avatar;
+            closeButton?: import("../../types").Button;
+            timeout?: number;
+            actions?: import("../../types").NotificationAction[];
+            click?: Function;
+            callback?: Function;
+            color?: import("../../types").NotificationColor;
             ui?: any;
         };
         remove: (id: string) => void;
         update: (id: string, notification: Partial<Notification>) => void;
         clear: () => void;
     };
-    notifications: any;
+    notifications: import("vue").Ref<Notification[]>;
     wrapperClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     class: {
@@ -41,11 +54,13 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>>, {
+    ui: {};
     class: any;
-    ui: any;
 }, {}>;
 export default _default;

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

@@ -181,10 +181,8 @@ export default defineComponent({
       }, props.closeDelay);
     }
     watch(() => props.open, (newValue, oldValue) => {
-      if (!popoverApi.value)
-        return;
-      if (oldValue === void 0 || newValue === oldValue)
-        return;
+      if (!popoverApi.value) return;
+      if (oldValue === void 0 || newValue === oldValue) return;
       if (newValue) {
         popoverApi.value.popoverState = 0;
       } else {
@@ -192,8 +190,7 @@ export default defineComponent({
       }
     });
     watch(() => popoverApi.value?.popoverState, (newValue, oldValue) => {
-      if (oldValue === void 0 || newValue === oldValue)
-        return;
+      if (oldValue === void 0 || newValue === oldValue) return;
       emit("update:open", newValue === 0);
     });
     provideUseId(() => useId());

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

@@ -1,5 +1,51 @@
 import type { PropType } from 'vue';
-import type { PopperOptions } from '../../types';
+import type { PopperOptions, Strategy } from '../../types.js';
+declare const config: {
+    wrapper: string;
+    container: string;
+    trigger: string;
+    width: string;
+    background: string;
+    shadow: string;
+    rounded: string;
+    ring: string;
+    base: string;
+    transition: {
+        enterActiveClass: string;
+        enterFromClass: string;
+        enterToClass: string;
+        leaveActiveClass: string;
+        leaveFromClass: string;
+        leaveToClass: string;
+    };
+    overlay: {
+        base: string;
+        background: string;
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+    };
+    popper: {
+        strategy: string;
+    };
+    default: {
+        openDelay: number;
+        closeDelay: number;
+    };
+    arrow: {
+        base: string;
+        ring: string;
+        rounded: string;
+        background: string;
+        shadow: string;
+        placement: string;
+    };
+};
 declare const _default: import("vue").DefineComponent<{
     mode: {
         type: PropType<"click" | "hover">;
@@ -8,7 +54,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     open: {
         type: BooleanConstructor;
-        default: undefined;
+        default: any;
     };
     disabled: {
         type: BooleanConstructor;
@@ -16,11 +62,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     overlay: {
         type: BooleanConstructor;
@@ -35,11 +81,58 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }, {
-    ui: import("vue").ComputedRef<any>;
+    ui: import("vue").ComputedRef<{
+        wrapper: string;
+        container: string;
+        trigger: string;
+        width: string;
+        background: string;
+        shadow: string;
+        rounded: string;
+        ring: string;
+        base: string;
+        transition: {
+            enterActiveClass: string;
+            enterFromClass: string;
+            enterToClass: string;
+            leaveActiveClass: string;
+            leaveFromClass: string;
+            leaveToClass: string;
+        };
+        overlay: {
+            base: string;
+            background: string;
+            transition: {
+                enterActiveClass: string;
+                enterFromClass: string;
+                enterToClass: string;
+                leaveActiveClass: string;
+                leaveFromClass: string;
+                leaveToClass: string;
+            };
+        };
+        popper: {
+            strategy: string;
+        };
+        default: {
+            openDelay: number;
+            closeDelay: number;
+        };
+        arrow: {
+            base: string;
+            ring: string;
+            rounded: string;
+            background: string;
+            shadow: string;
+            placement: string;
+        };
+    }>;
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
@@ -79,7 +172,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     open: {
         type: BooleanConstructor;
-        default: undefined;
+        default: any;
     };
     disabled: {
         type: BooleanConstructor;
@@ -87,11 +180,11 @@ declare const _default: import("vue").DefineComponent<{
     };
     openDelay: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     closeDelay: {
         type: NumberConstructor;
-        default: () => any;
+        default: () => number;
     };
     overlay: {
         type: BooleanConstructor;
@@ -106,20 +199,22 @@ declare const _default: import("vue").DefineComponent<{
         default: () => string;
     };
     ui: {
-        type: PropType<any>;
+        type: PropType<Partial<typeof config> & {
+            strategy?: Strategy;
+        }>;
         default: () => {};
     };
 }>> & {
-    "onUpdate:open"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:open"?: (...args: any[]) => any;
 }, {
+    ui: {};
+    disabled: boolean;
     class: any;
     popper: PopperOptions;
-    disabled: boolean;
-    ui: any;
-    open: boolean;
+    overlay: boolean;
     mode: "click" | "hover";
+    open: boolean;
     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>