@nuxt/ui 2.8.1 → 2.10.0

package/dist/runtime/components/elements/Alert.vue

@@ -25,22 +25,23 @@
           <UButton v-for="(action, index) of actions" :key="index" v-bind="{ ...ui.default.actionButton, ...action }" @click.stop="action.click" />
         </div>
 
-        <UButton v-if="closeButton" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
+        <UButton v-if="closeButton" aria-label="Close" v-bind="{ ...ui.default.closeButton, ...closeButton }" @click.stop="$emit('close')" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { computed, defineComponent } from "vue";
+import { computed, toRef, 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 { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
-import { omit } from "lodash-es";
+import { alert } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.alert, alert);
 export default defineComponent({
   components: {
     UIcon,
@@ -59,7 +60,7 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.alert.default.icon
+      default: () => config.default.icon
     },
     avatar: {
       type: Object,
@@ -67,7 +68,7 @@ export default defineComponent({
     },
     closeButton: {
       type: Object,
-      default: () => appConfig.ui.alert.default.closeButton
+      default: () => config.default.closeButton
     },
     actions: {
       type: Array,
@@ -75,30 +76,33 @@ export default defineComponent({
     },
     color: {
       type: String,
-      default: () => appConfig.ui.alert.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.alert.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.alert.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.alert.variant),
-          ...Object.values(appConfig.ui.alert.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
   emits: ["close"],
-  setup(props, { attrs }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.alert));
+  setup(props) {
+    const { ui, attrs } = useUI("alert", toRef(props, "ui"), config);
     const alertClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -107,12 +111,12 @@ export default defineComponent({
         ui.value.shadow,
         ui.value.padding,
         variant?.replaceAll("{color}", props.color)
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
+      attrs,
       alertClass
     };
   }

package/dist/runtime/components/elements/Alert.vue.d.ts

@@ -1,7 +1,5 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
-import type { Avatar } from '../../types/avatar';
-import type { Button } from '../../types/button';
+import type { Avatar, Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -21,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     actions: {
         type: PropType<(Button & {
@@ -30,24 +28,28 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        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>>;
     alertClass: import("vue").ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
@@ -68,7 +70,7 @@ declare const _default: import("vue").DefineComponent<{
     };
     closeButton: {
         type: PropType<Button>;
-        default: () => any;
+        default: () => Button;
     };
     actions: {
         type: PropType<(Button & {
@@ -77,18 +79,22 @@ declare const _default: import("vue").DefineComponent<{
         default: () => never[];
     };
     color: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     variant: {
-        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;
@@ -100,8 +106,9 @@ declare const _default: import("vue").DefineComponent<{
     actions: (Button & {
         click?: Function | undefined;
     })[];
-    color: string;
-    ui: any;
-    variant: string;
+    color: any;
+    ui: Partial<any>;
+    class: any;
+    variant: any;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/Avatar.vue

@@ -20,13 +20,14 @@
 </template>
 
 <script>
-import { defineComponent, ref, computed, watch } from "vue";
+import { defineComponent, ref, computed, toRef, watch } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.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 { omit } from "lodash-es";
+import { avatar } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatar, avatar);
 export default defineComponent({
   components: {
     UIcon
@@ -47,27 +48,27 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: () => appConfig.ui.avatar.default.icon
+      default: () => config.default.icon
     },
     size: {
       type: String,
-      default: () => appConfig.ui.avatar.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.avatar.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     chipColor: {
       type: String,
-      default: () => appConfig.ui.avatar.default.chipColor,
+      default: () => config.default.chipColor,
       validator(value) {
         return ["gray", ...appConfig.ui.colors].includes(value);
       }
     },
     chipPosition: {
       type: String,
-      default: () => appConfig.ui.avatar.default.chipPosition,
+      default: () => config.default.chipPosition,
       validator(value) {
-        return Object.keys(appConfig.ui.avatar.chip.position).includes(value);
+        return Object.keys(config.chip.position).includes(value);
       }
     },
     chipText: {
@@ -78,14 +79,17 @@ export default defineComponent({
       type: String,
       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.avatar));
+  setup(props) {
+    const { ui, attrs } = useUI("avatar", toRef(props, "ui"), config);
     const url = computed(() => {
       if (typeof props.src === "boolean") {
         return null;
@@ -101,7 +105,7 @@ export default defineComponent({
         (error.value || !url.value) && ui.value.background,
         ui.value.rounded,
         ui.value.size[props.size]
-      ), attrs.class);
+      ), props.class);
     });
     const imgClass = computed(() => {
       return twMerge(twJoin(
@@ -133,7 +137,9 @@ export default defineComponent({
       error.value = true;
     }
     return {
-      attrs: omit(attrs, ["class"]),
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
       wrapperClass,
       // eslint-disable-next-line vue/no-dupe-keys
       imgClass,

package/dist/runtime/components/elements/Avatar.vue.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="lodash" />
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     src: {
@@ -18,36 +17,41 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     chipColor: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     chipPosition: {
-        type: StringConstructor;
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
         default: () => any;
         validator(value: string): boolean;
     };
     chipText: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: null;
     };
     imgClass: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, {
-    attrs: import("lodash").Omit<{
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
-    }, "class">;
+    }, string>>;
     wrapperClass: import("vue").ComputedRef<string>;
     imgClass: import("vue").ComputedRef<string>;
     iconClass: import("vue").ComputedRef<string>;
@@ -74,41 +78,46 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: StringConstructor;
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
         default: () => any;
         validator(value: string): boolean;
     };
     chipColor: {
-        type: StringConstructor;
+        type: PropType<any>;
         default: () => any;
         validator(value: string): boolean;
     };
     chipPosition: {
-        type: StringConstructor;
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
         default: () => any;
         validator(value: string): boolean;
     };
     chipText: {
-        type: (StringConstructor | NumberConstructor)[];
+        type: (NumberConstructor | StringConstructor)[];
         default: null;
     };
     imgClass: {
         type: StringConstructor;
         default: string;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
     alt: string;
     icon: string;
-    ui: any;
+    ui: Partial<any>;
+    class: any;
     src: string | boolean;
     text: string;
-    size: string;
-    chipColor: string;
-    chipPosition: string;
+    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    chipColor: any;
+    chipPosition: "top-right" | "bottom-right" | "top-left" | "bottom-left";
     chipText: string | number;
     imgClass: string;
 }, {}>;

package/dist/runtime/components/elements/AvatarGroup.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: null;
         validator(value: string): boolean;
     };
@@ -9,15 +9,19 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
 }>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
-        type: StringConstructor;
+        type: PropType<string | number | symbol>;
         default: null;
         validator(value: string): boolean;
     };
@@ -25,13 +29,18 @@ declare const _default: import("vue").DefineComponent<{
         type: NumberConstructor;
         default: null;
     };
-    ui: {
+    class: {
         type: PropType<any>;
-        default: () => {};
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
     };
 }>>, {
-    ui: any;
-    size: string;
+    ui: Partial<any>;
+    class: any;
+    size: string | number | symbol;
     max: number;
 }, {}>;
 export default _default;

package/dist/runtime/components/elements/AvatarGroup.mjs

@@ -1,10 +1,12 @@
-import { h, cloneVNode, computed, defineComponent } from "vue";
-import { omit } from "lodash-es";
+import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
-import { defuTwMerge, getSlotsChildren } from "../../utils/index.mjs";
-import Avatar from "./Avatar.vue";
-import { useAppConfig } from "#imports";
+import UAvatar from "./Avatar.vue";
+import { useUI } from "../../composables/useUI.mjs";
+import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
 import appConfig from "#build/app.config";
+import { avatar, avatarGroup } from "#ui/ui.config";
+const avatarConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatar, avatar);
+const avatarGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.avatarGroup, avatarGroup);
 export default defineComponent({
   inheritAttrs: false,
   props: {
@@ -12,21 +14,24 @@ export default defineComponent({
       type: String,
       default: null,
       validator(value) {
-        return Object.keys(appConfig.ui.avatar.size).includes(value);
+        return Object.keys(avatarConfig.size).includes(value);
       }
     },
     max: {
       type: Number,
       default: null
     },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
     ui: {
       type: Object,
-      default: () => ({})
+      default: void 0
     }
   },
-  setup(props, { attrs, slots }) {
-    const appConfig2 = useAppConfig();
-    const ui = computed(() => defuTwMerge({}, props.ui, appConfig2.ui.avatarGroup));
+  setup(props, { slots }) {
+    const { ui, attrs } = useUI("avatarGroup", toRef(props, "ui"), avatarGroupConfig, toRef(props, "class"));
     const children = computed(() => getSlotsChildren(slots));
     const max = computed(() => typeof props.max === "string" ? parseInt(props.max, 10) : props.max);
     const clones = computed(() => children.value.map((node, index) => {
@@ -40,14 +45,14 @@ export default defineComponent({
         return cloneVNode(node, vProps);
       }
       if (max.value !== void 0 && index === max.value) {
-        return h(Avatar, {
-          size: props.size || appConfig2.ui.avatar.default.size,
+        return h(UAvatar, {
+          size: props.size || avatarConfig.default.size,
           text: `+${children.value.length - max.value}`,
           class: twJoin(ui.value.ring, ui.value.margin)
         });
       }
       return null;
     }).filter(Boolean).reverse());
-    return () => h("div", { class: twMerge(ui.value.wrapper, attrs.class), ...omit(attrs, ["class"]) }, clones.value);
+    return () => h("div", { class: ui.value.wrapper, ...attrs.value }, clones.value);
   }
 });

package/dist/runtime/components/elements/Badge.vue

@@ -5,36 +5,37 @@
 </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 { defuTwMerge } from "../../utils";
-import { useAppConfig } from "#imports";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
 import appConfig from "#build/app.config";
+import { badge } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.badge, badge);
 export default defineComponent({
   inheritAttrs: false,
   props: {
     size: {
       type: String,
-      default: () => appConfig.ui.badge.default.size,
+      default: () => config.default.size,
       validator(value) {
-        return Object.keys(appConfig.ui.badge.size).includes(value);
+        return Object.keys(config.size).includes(value);
       }
     },
     color: {
       type: String,
-      default: () => appConfig.ui.badge.default.color,
+      default: () => config.default.color,
       validator(value) {
-        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value);
+        return [...appConfig.ui.colors, ...Object.keys(config.color)].includes(value);
       }
     },
     variant: {
       type: String,
-      default: () => appConfig.ui.badge.default.variant,
+      default: () => config.default.variant,
       validator(value) {
         return [
-          ...Object.keys(appConfig.ui.badge.variant),
-          ...Object.values(appConfig.ui.badge.color).flatMap((value2) => Object.keys(value2))
+          ...Object.keys(config.variant),
+          ...Object.values(config.color).flatMap((value2) => Object.keys(value2))
         ].includes(value);
       }
     },
@@ -42,14 +43,17 @@ export default defineComponent({
       type: [String, Number],
       default: null
     },
+    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.badge));
+  setup(props) {
+    const { ui, attrs } = useUI("badge", toRef(props, "ui"), config);
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -58,10 +62,10 @@ export default defineComponent({
         ui.value.rounded,
         ui.value.size[props.size],
         variant?.replaceAll("{color}", props.color)
-      ), attrs.class);
+      ), props.class);
     });
     return {
-      attrs: omit(attrs, ["class"]),
+      attrs,
       badgeClass
     };
   }