@nuxt/ui 2.8.0 → 2.9.0

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

@@ -1,6 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType, Ref } from 'vue';
-import type { PopperOptions } from '../../types/popper';
+import type { PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
         type: BooleanConstructor;
@@ -14,15 +13,19 @@ 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>>;
     isOpen: import("vue").WritableComputedRef<boolean>;
     wrapperClass: import("vue").ComputedRef<string>;
     container: Ref<import("@vueuse/core").MaybeElement>;
@@ -39,16 +42,21 @@ 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;
     };
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
-    ui: any;
+    ui: Partial<any>;
     popper: PopperOptions;
+    class: any;
     modelValue: boolean;
 }, {}>;
 export default _default;

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

@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <HDialog :class="wrapperClass" v-bind="attrs" @close="(e) => !preventClose && close(e)">
+    <HDialog :class="ui.wrapper" v-bind="attrs" @close="(e) => !preventClose && close(e)">
       <TransitionChild v-if="overlay" as="template" :appear="appear" v-bind="ui.overlay.transition">
         <div :class="[ui.overlay.base, ui.overlay.background]" />
       </TransitionChild>
@@ -30,12 +30,13 @@
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
-import { twMerge } from "tailwind-merge";
+import { computed, toRef, defineComponent } from "vue";
 import { Dialog as HDialog, DialogPanel as HDialogPanel, TransitionRoot, TransitionChild } from "@headlessui/vue";
-import { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { modal } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.modal, modal);
 export default defineComponent({
   components: {
     HDialog,
@@ -69,15 +70,18 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["update:modelValue", "close"],
-  setup(props, { attrs, emit }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.modal));
+  setup(props, { emit }) {
+    const { ui, attrs } = useUI("modal", toRef(props, "ui"), config, toRef(props, "class"));
     const isOpen = computed({
       get() {
         return props.modelValue;
@@ -86,7 +90,6 @@ export default defineComponent({
         emit("update:modelValue", value);
       }
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     const transitionClass = computed(() => {
       if (!props.transition) {
         return {};
@@ -100,11 +103,10 @@ export default defineComponent({
       emit("close");
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       isOpen,
-      wrapperClass,
       transitionClass,
       close
     };

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;
 }, {
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     modelValue: boolean;
     appear: boolean;
     overlay: boolean;

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

@@ -28,7 +28,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 +39,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 +72,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.notification.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object,
@@ -79,7 +80,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.notification.default.closeButton
+      default: () => config.default.closeButton
     },
     timeout: {
       type: Number,
@@ -95,20 +96,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 +121,7 @@ export default defineComponent({
         ui.value.background,
         ui.value.rounded,
         ui.value.shadow
-      ), attrs.class);
+      ), props.class);
     });
     const progressClass = computed(() => {
       return twJoin(
@@ -180,9 +184,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

@@ -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, close }" :class="ui.wrapper" v-bind="attrs" @mouseleave="onMouseLeave">
     <HPopoverButton
       ref="trigger"
       as="div"
@@ -26,14 +26,15 @@
 </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,
@@ -63,22 +64,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;
       }
@@ -89,7 +93,6 @@ export default defineComponent({
       const offsetDistance = props.popper?.offsetDistance || ui.value.popper?.offsetDistance || 8;
       return props.mode === "hover" ? { paddingTop: `${offsetDistance}px`, paddingBottom: `${offsetDistance}px` } : {};
     });
-    const wrapperClass = computed(() => twMerge(ui.value.wrapper, attrs.class));
     function onMouseOver() {
       if (props.mode !== "hover" || !popoverApi.value) {
         return;
@@ -123,14 +126,13 @@ export default defineComponent({
       }, props.closeDelay);
     }
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      popover,
+      attrs,
+      popover: popover2,
       trigger,
       container,
       containerStyle,
-      wrapperClass,
       onMouseOver,
       onMouseLeave
     };

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

@@ -1,6 +1,5 @@
-/// <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">;
@@ -23,15 +22,19 @@ 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;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
@@ -42,7 +45,6 @@ declare const _default: import("vue").DefineComponent<{
         paddingTop?: undefined;
         paddingBottom?: 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<{
@@ -67,13 +69,18 @@ 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;
     mode: "click" | "hover";
     openDelay: number;