@nuxt/ui 2.8.1 → 2.10.0

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

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
@@ -25,17 +24,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
-    wrapperClass: import("vue").ComputedRef<string>;
     transitionClass: import("vue").ComputedRef<any>;
     close: (value: boolean) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "update:modelValue")[], "close" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -63,15 +65,20 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
-    onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onClose?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;

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

@@ -1,6 +1,12 @@
 <template>
   <Transition appear v-bind="ui.transition">
-    <div :class="wrapperClass" v-bind="attrs" @mouseover="onMouseover" @mouseleave="onMouseleave">
+    <div
+      :class="wrapperClass"
+      role="status" 
+      v-bind="attrs"
+      @mouseover="onMouseover" 
+      @mouseleave="onMouseleave"
+    >
       <div :class="[ui.container, ui.rounded, ui.ring]">
         <div :class="ui.padding">
           <div class="flex gap-3" :class="{ 'items-start': description || $slots.description, 'items-center': !description && !$slots.description }">
@@ -28,7 +34,7 @@
                 <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="onAction(action)" />
               </div>
 
-              <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
+              <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="onClose" />
             </div>
           </div>
         </div>
@@ -39,16 +45,17 @@
 </template>
 
 <script>
-import { ref, computed, onMounted, onUnmounted, watchEffect, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { ref, computed, toRef, onMounted, onUnmounted, watchEffect, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import UAvatar from "../elements/Avatar.vue";
 import UButton from "../elements/Button.vue";
+import { useUI } from "../../composables/useUI";
 import { useTimer } from "../../composables/useTimer";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { notification } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.notification, notification);
 export default defineComponent({
   components: {
     UIcon,
@@ -71,7 +78,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.notification.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object,
@@ -79,7 +86,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.notification.default.closeButton
+      default: () => config.default.closeButton
     },
     timeout: {
       type: Number,
@@ -95,20 +102,23 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: () => appConfig.ui.notification.default.color,
+      default: () => config.default.color,
       validator(value) {
         return ["gray", ...appConfig.ui.colors].includes(value);
       }
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["close"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.notification));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("notification", toRef(props, "ui"), config);
     let timer = null;
     const remaining = ref(props.timeout);
     const wrapperClass = computed(() => {
@@ -117,7 +127,7 @@ export default defineComponent({
         ui.value.background,
         ui.value.rounded,
         ui.value.shadow
-      ), attrs.class);
+      ), props.class);
     });
     const progressClass = computed(() => {
       return twJoin(
@@ -180,9 +190,9 @@ export default defineComponent({
       }
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       wrapperClass,
       progressClass,
       progressStyle,

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

@@ -1,11 +1,8 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { NotificationAction } from '../../types/notification';
-import type { Avatar } from '../../types/avatar';
-import type { Button } from '../../types/button';
+import type { Avatar, Button, NotificationAction } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     id: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
@@ -26,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     timeout: {
         type: NumberConstructor;
@@ -41,19 +38,23 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     wrapperClass: import("vue").ComputedRef<string>;
     progressClass: import("vue").ComputedRef<string>;
     progressStyle: import("vue").ComputedRef<{
@@ -66,7 +67,7 @@ declare const _default: import("vue").DefineComponent<{
     onAction: (action: NotificationAction) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     id: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         required: true;
     };
     title: {
@@ -87,7 +88,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     timeout: {
         type: NumberConstructor;
@@ -102,13 +103,17 @@ declare const _default: import("vue").DefineComponent<{
         default: null;
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
@@ -120,7 +125,8 @@ declare const _default: import("vue").DefineComponent<{
     timeout: number;
     actions: NotificationAction[];
     callback: Function;
-    color: string;
-    ui: any;
+    color: any;
+    ui: Partial<any>;
+    class: any;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <div :class="wrapperClass" v-bind="attrs">
+  <div :class="wrapperClass" role="region" v-bind="attrs">
     <div v-if="notifications.length" :class="ui.container">
       <div v-for="notification of notifications" :key="notification.id">
         <UNotification
@@ -18,42 +18,48 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UNotification from "./Notification.vue";
+import { useUI } from "../../composables/useUI";
 import { useToast } from "../../composables/useToast";
-import { defuTwMerge } from "../../utils";
-import { useState, useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
+import { useState } from "#imports";
+import appConfig from "#build/app.config";
+import { notifications } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.notifications, notifications);
 export default defineComponent({
   components: {
     UNotification
   },
   inheritAttrs: false,
   props: {
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.notifications));
+  setup(props) {
+    const { ui, attrs } = useUI("notifications", toRef(props, "ui"), config);
     const toast = useToast();
-    const notifications = useState("notifications", () => []);
+    const notifications2 = useState("notifications", () => []);
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper,
         ui.value.position,
         ui.value.width
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       toast,
-      notifications,
+      notifications: notifications2,
       wrapperClass
     };
   }

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

@@ -1,29 +1,32 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { Notification } from '../../types/notification';
+import type { Notification } from '../../types';
 declare const _default: import("vue").DefineComponent<{
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    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").Avatar | undefined;
-            closeButton?: import("../../types/button").Button | undefined;
+            avatar?: import("../../types").Avatar | undefined;
+            closeButton?: import("../../types").Button | undefined;
             timeout?: number | undefined;
-            actions?: import("../../types/notification").NotificationAction[] | undefined;
+            actions?: import("../../types").NotificationAction[] | undefined;
             click?: Function | undefined;
             callback?: Function | undefined;
-            color?: string | undefined;
+            color?: any;
             ui?: any;
         };
         remove: (id: string) => void;
@@ -31,11 +34,16 @@ 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<{
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
 }, {}>;
 export default _default;

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

@@ -1,5 +1,5 @@
 <template>
-  <HPopover ref="popover" v-slot="{ open, close }" :class="wrapperClass" v-bind="attrs" @mouseleave="onMouseLeave">
+  <HPopover ref="popover" v-slot="{ open: headlessOpen, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -8,32 +8,36 @@
       role="button"
       @mouseover="onMouseOver"
     >
-      <slot :open="open" :close="close">
+      <slot :open="(open !== undefined) ? open : headlessOpen" :close="close">
         <button :disabled="disabled">
           Open
         </button>
       </slot>
     </HPopoverButton>
 
-    <div v-if="open" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
+    <div v-if="(open !== undefined) ? open : headlessOpen" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
-        <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
-          <slot name="panel" :open="open" :close="close" />
-        </HPopoverPanel>
+        <div>
+          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <HPopoverPanel :class="[ui.base, ui.background, ui.ring, ui.rounded, ui.shadow]" static>
+            <slot name="panel" :open="(open !== undefined) ? open : headlessOpen" :close="close" />
+          </HPopoverPanel>
+        </div>
       </Transition>
     </div>
   </HPopover>
 </template>
 
 <script>
-import { computed, ref, onMounted, defineComponent } from "vue";
+import { computed, ref, toRef, onMounted, defineComponent } from "vue";
 import { defu } from "defu";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
 import { Popover as HPopover, PopoverButton as HPopoverButton, PopoverPanel as HPopoverPanel } from "@headlessui/vue";
+import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { popover } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.popover, popover);
 export default defineComponent({
   components: {
     HPopover,
@@ -47,6 +51,10 @@ export default defineComponent({
       default: "click",
       validator: (value) => ["click", "hover"].includes(value)
     },
+    open: {
+      type: Boolean,
+      default: void 0
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -63,22 +71,25 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.popover));
+  setup(props) {
+    const { ui, attrs } = useUI("popover", toRef(props, "ui"), config, toRef(props, "class"));
     const popper = computed(() => defu(props.mode === "hover" ? { offsetDistance: 0 } : {}, props.popper, ui.value.popper));
     const [trigger, container] = usePopper(popper.value);
-    const popover = ref(null);
+    const popover2 = ref(null);
     const popoverApi = ref(null);
     let openTimeout = null;
     let closeTimeout = null;
     onMounted(() => {
-      const popoverProvides = popover.value?.$.provides;
+      const popoverProvides = popover2.value?.$.provides;
       if (!popoverProvides) {
         return;
       }
@@ -87,9 +98,14 @@ export default defineComponent({
     });
     const containerStyle = computed(() => {
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
-      return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
+      const padding = `${offsetDistance}px`;
+      return props.mode === "hover" ? {
+        paddingTop: padding,
+        paddingBottom: padding,
+        paddingLeft: padding,
+        paddingRight: padding
+      } : {};
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
         return;
@@ -123,14 +139,15 @@ export default defineComponent({
       }, props.closeDelay);
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      popover,
+      attrs,
+      popover: popover2,
+      // eslint-disable-next-line vue/no-dupe-keys
+      popper,
       trigger,
       container,
       containerStyle,
-      wrapperClass,
       onMouseOver,
       onMouseLeave
     };

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

@@ -1,12 +1,15 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { PopperOptions } from '../../types/popper';
+import type { PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     mode: {
         type: PropType<"click" | "hover">;
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -23,26 +26,34 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
-        [x: string]: unknown;
-    }, "class">;
     ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
     popover: any;
+    popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     containerStyle: import("vue").ComputedRef<{
         paddingTop: string;
         paddingBottom: string;
+        paddingLeft: string;
+        paddingRight: string;
     } | {
         paddingTop?: undefined;
         paddingBottom?: undefined;
+        paddingLeft?: undefined;
+        paddingRight?: undefined;
     }>;
-    wrapperClass: import("vue").ComputedRef<string>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -51,6 +62,10 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
         validator: (value: string) => boolean;
     };
+    open: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
     disabled: {
         type: BooleanConstructor;
         default: boolean;
@@ -67,14 +82,20 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<PopperOptions>;
         default: () => {};
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
+    ui: Partial<any>;
     popper: PopperOptions;
+    class: any;
     disabled: boolean;
+    open: boolean;
     mode: "click" | "hover";
     openDelay: number;
     closeDelay: number;