@nuxt/ui 2.19.1 → 2.20.0

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

@@ -18,7 +18,7 @@ declare const config: {
         openIcon: string;
         closeIcon: string;
         class: string;
-        variant: "soft";
+        variant: string;
         truncate: boolean;
     };
 };
@@ -76,7 +76,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             openIcon: string;
             closeIcon: string;
             class: string;
-            variant: "soft";
+            variant: string;
             truncate: boolean;
         };
     }>;
@@ -179,7 +179,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onBeforeLeave: (_el: Element) => void;
     onAfterEnter: (_el: Element) => void;
     onLeave: (_el: Element, done: () => void) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "open"[], "open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open")[], "close" | "open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: PropType<AccordionItem[]>;
         default: () => any[];
@@ -215,6 +215,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => {};
     };
 }>> & Readonly<{
+    onClose?: (...args: any[]) => any;
     onOpen?: (...args: any[]) => any;
 }>, {
     class: any;
@@ -236,7 +237,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             openIcon: string;
             closeIcon: string;
             class: string;
-            variant: "soft";
+            variant: string;
             truncate: boolean;
         }, any>;
     } & {
@@ -952,23 +953,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         class: any;
         to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         disabled: boolean;
-        truncate: boolean;
-        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
-        activeClass: string;
-        exactActiveClass: string;
-        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-        replace: boolean;
-        noRel: boolean;
-        prefetch: boolean;
-        noPrefetch: boolean;
-        prefetchedClass: string;
-        external: boolean;
-        leading: boolean;
-        color: import("../../types/button").ButtonColor;
-        variant: import("../../types/button").ButtonVariant;
-        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        rel: any;
-        label: string;
         ui: {
             base?: string;
             font?: string;
@@ -1053,6 +1037,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: import("../../types/button").ButtonColor;
+        variant: import("../../types/button").ButtonVariant;
+        truncate: boolean;
+        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
+        activeClass: string;
+        exactActiveClass: string;
+        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+        replace: boolean;
+        noRel: boolean;
+        prefetch: boolean;
+        noPrefetch: boolean;
+        prefetchedClass: string;
+        external: boolean;
+        leading: boolean;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+        rel: any;
+        label: string;
         icon: string;
         block: boolean;
         square: boolean;
@@ -1130,7 +1131,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1233,7 +1234,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1326,7 +1327,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             as: string;
             active: boolean;
             exact: boolean;
-            exactQuery: boolean;
+            exactQuery: boolean | "partial";
             exactHash: boolean;
             inactiveClass: string;
             href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;

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

@@ -15,7 +15,7 @@ declare const config: {
     };
     avatar: {
         base: string;
-        size: "md";
+        size: import("../../types/avatar").AvatarSize;
     };
     color: {
         white: {
@@ -34,9 +34,9 @@ declare const config: {
         icon: any;
         closeButton: any;
         actionButton: {
-            size: "xs";
-            color: "primary";
-            variant: "link";
+            size: import("../../types/button").ButtonSize;
+            color: import("../../types/button").ButtonColor;
+            variant: import("../../types/button").ButtonVariant;
         };
     };
 };
@@ -101,7 +101,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         };
         avatar: {
             base: string;
-            size: "md";
+            size: import("../../types/avatar").AvatarSize;
         };
         color: {
             white: {
@@ -120,9 +120,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             icon: any;
             closeButton: any;
             actionButton: {
-                size: "xs";
-                color: "primary";
-                variant: "link";
+                size: import("../../types/button").ButtonSize;
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
             };
         };
     }>;
@@ -181,10 +181,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClose?: (...args: any[]) => any;
 }>, {
     class: any;
-    title: string;
-    avatar: Avatar;
-    color: AlertColor;
-    variant: AlertVariant;
     ui: {
         wrapper?: string;
         inner?: string;
@@ -200,7 +196,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }, any>;
         avatar?: DeepPartial<{
             base: string;
-            size: "md";
+            size: import("../../types/avatar").AvatarSize;
         }, any>;
         color?: DeepPartial<{
             white: {
@@ -219,9 +215,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             icon: any;
             closeButton: any;
             actionButton: {
-                size: "xs";
-                color: "primary";
-                variant: "link";
+                size: import("../../types/button").ButtonSize;
+                color: import("../../types/button").ButtonColor;
+                variant: import("../../types/button").ButtonVariant;
             };
         }, any>;
     } & {
@@ -229,6 +225,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    color: AlertColor;
+    variant: AlertVariant;
+    avatar: Avatar;
+    title: string;
     description: string;
     icon: string;
     closeButton: Button;
@@ -577,9 +577,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>> & Readonly<{}>, {
         size: import("../../types/avatar").AvatarSize;
         class: any;
-        as: string | Record<string, any>;
-        text: string;
-        alt: string;
         ui: {
             wrapper?: string;
             background?: string;
@@ -643,6 +640,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        as: string | Record<string, any>;
+        text: string;
+        alt: string;
         icon: string;
         src: string | boolean;
         chipColor: import("../../types/avatar").AvatarChipColor;
@@ -1247,23 +1247,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         class: any;
         to: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
         disabled: boolean;
-        truncate: boolean;
-        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
-        activeClass: string;
-        exactActiveClass: string;
-        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
-        replace: boolean;
-        noRel: boolean;
-        prefetch: boolean;
-        noPrefetch: boolean;
-        prefetchedClass: string;
-        external: boolean;
-        leading: boolean;
-        color: import("../../types/button").ButtonColor;
-        variant: import("../../types/button").ButtonVariant;
-        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
-        rel: any;
-        label: string;
         ui: {
             base?: string;
             font?: string;
@@ -1348,6 +1331,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         } & {
             strategy?: Strategy;
         };
+        color: import("../../types/button").ButtonColor;
+        variant: import("../../types/button").ButtonVariant;
+        truncate: boolean;
+        target: "_blank" | "_parent" | "_self" | "_top" | (string & {});
+        activeClass: string;
+        exactActiveClass: string;
+        ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+        replace: boolean;
+        noRel: boolean;
+        prefetch: boolean;
+        noPrefetch: boolean;
+        prefetchedClass: string;
+        external: boolean;
+        leading: boolean;
+        href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;
+        rel: any;
+        label: string;
         icon: string;
         block: boolean;
         square: boolean;
@@ -1425,7 +1425,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1528,7 +1528,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 default: boolean;
             };
             exactQuery: {
-                type: BooleanConstructor;
+                type: PropType<boolean | "partial">;
                 default: boolean;
             };
             exactHash: {
@@ -1621,7 +1621,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             as: string;
             active: boolean;
             exact: boolean;
-            exactQuery: boolean;
+            exactQuery: boolean | "partial";
             exactHash: boolean;
             inactiveClass: string;
             href: string | import("vue-router").RouteLocationAsRelativeGeneric | import("vue-router").RouteLocationAsPathGeneric;

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

@@ -241,9 +241,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     size: AvatarSize;
     class: any;
-    as: string | Record<string, any>;
-    text: string;
-    alt: string;
     ui: {
         wrapper?: string;
         background?: string;
@@ -307,6 +304,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
+    as: string | Record<string, any>;
+    text: string;
+    alt: string;
     icon: string;
     src: string | boolean;
     chipColor: AvatarChipColor;

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { AvatarSize, Strategy } from '../../types/index.js';
+import type { AvatarSize, DeepPartial, Strategy } from '../../types/index.js';
 declare const avatarGroupConfig: {
     wrapper: string;
     ring: string;
@@ -20,7 +20,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => "";
     };
     ui: {
-        type: PropType<Partial<typeof avatarGroupConfig> & {
+        type: PropType<DeepPartial<typeof avatarGroupConfig> & {
             strategy?: Strategy;
         }>;
         default: () => {};
@@ -42,20 +42,22 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         default: () => "";
     };
     ui: {
-        type: PropType<Partial<typeof avatarGroupConfig> & {
+        type: PropType<DeepPartial<typeof avatarGroupConfig> & {
             strategy?: Strategy;
         }>;
         default: () => {};
     };
 }>> & Readonly<{}>, {
-    size: AvatarSize;
-    ui: Partial<{
-        wrapper: string;
-        ring: string;
-        margin: string;
-    }> & {
+    ui: {
+        wrapper?: string;
+        ring?: string;
+        margin?: string;
+    } & {
+        [key: string]: any;
+    } & {
         strategy?: Strategy;
     };
+    size: AvatarSize;
     class: any;
     max: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,12 +1,25 @@
 <template>
   <span :class="badgeClass" v-bind="attrs">
-    <slot>{{ label }}</slot>
+    <slot name="leading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
+    </slot>
+
+    <slot>
+      <span v-if="label">
+        {{ label }}
+      </span>
+    </slot>
+
+    <slot name="trailing">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    </slot>
   </span>
 </template>
 
 <script>
 import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
+import UIcon from "../elements/Icon.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
@@ -14,6 +27,9 @@ 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({
+  components: {
+    UIcon
+  },
   inheritAttrs: false,
   props: {
     size: {
@@ -44,6 +60,26 @@ export default defineComponent({
       type: [String, Number],
       default: null
     },
+    icon: {
+      type: String,
+      default: null
+    },
+    leadingIcon: {
+      type: String,
+      default: null
+    },
+    trailingIcon: {
+      type: String,
+      default: null
+    },
+    trailing: {
+      type: Boolean,
+      default: false
+    },
+    leading: {
+      type: Boolean,
+      default: false
+    },
     class: {
       type: [String, Object, Array],
       default: () => ""
@@ -56,6 +92,12 @@ export default defineComponent({
   setup(props) {
     const { ui, attrs } = useUI("badge", toRef(props, "ui"), config);
     const { size, rounded } = useInjectButtonGroup({ ui, props });
+    const isLeading = computed(() => {
+      return props.icon && props.leading || props.icon && !props.trailing || !props.trailing || props.leadingIcon;
+    });
+    const isTrailing = computed(() => {
+      return props.icon && props.trailing || props.trailing || props.trailingIcon;
+    });
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -63,12 +105,37 @@ export default defineComponent({
         ui.value.font,
         rounded.value,
         ui.value.size[size.value],
+        ui.value.gap[size.value],
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });
+    const leadingIconName = computed(() => {
+      return props.leadingIcon || props.icon;
+    });
+    const trailingIconName = computed(() => {
+      return props.trailingIcon || props.icon;
+    });
+    const leadingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.size[size.value]
+      );
+    });
+    const trailingIconClass = computed(() => {
+      return twJoin(
+        ui.value.icon.base,
+        ui.value.icon.size[size.value]
+      );
+    });
     return {
       attrs,
-      badgeClass
+      isLeading,
+      isTrailing,
+      badgeClass,
+      leadingIconName,
+      trailingIconName,
+      leadingIconClass,
+      trailingIconClass
     };
   }
 });

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

@@ -10,6 +10,12 @@ declare const config: {
         md: string;
         lg: string;
     };
+    gap: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
     color: {
         white: {
             solid: string;
@@ -27,6 +33,15 @@ declare const config: {
         soft: string;
         subtle: string;
     };
+    icon: {
+        base: string;
+        size: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+        };
+    };
     default: {
         size: string;
         variant: string;
@@ -53,6 +68,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: any;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => "";
@@ -67,7 +102,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
+    isLeading: import("vue").ComputedRef<string | true>;
+    isTrailing: import("vue").ComputedRef<string | true>;
     badgeClass: import("vue").ComputedRef<string>;
+    leadingIconName: import("vue").ComputedRef<string>;
+    trailingIconName: import("vue").ComputedRef<string>;
+    leadingIconClass: import("vue").ComputedRef<string>;
+    trailingIconClass: import("vue").ComputedRef<string>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     size: {
         type: PropType<BadgeSize>;
@@ -88,6 +129,26 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: (StringConstructor | NumberConstructor)[];
         default: any;
     };
+    icon: {
+        type: StringConstructor;
+        default: any;
+    };
+    leadingIcon: {
+        type: StringConstructor;
+        default: any;
+    };
+    trailingIcon: {
+        type: StringConstructor;
+        default: any;
+    };
+    trailing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    leading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     class: {
         type: PropType<any>;
         default: () => "";
@@ -101,9 +162,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>> & Readonly<{}>, {
     size: BadgeSize;
     class: any;
-    color: BadgeColor;
-    variant: BadgeVariant;
-    label: string | number;
     ui: {
         base?: string;
         rounded?: string;
@@ -114,6 +172,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             md: string;
             lg: string;
         }, any>;
+        gap?: DeepPartial<{
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+        }, any>;
         color?: DeepPartial<{
             white: {
                 solid: string;
@@ -131,6 +195,15 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             soft: string;
             subtle: string;
         }, any>;
+        icon?: DeepPartial<{
+            base: string;
+            size: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+            };
+        }, any>;
         default?: DeepPartial<{
             size: string;
             variant: string;
@@ -141,5 +214,59 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     } & {
         strategy?: Strategy;
     };
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    color: BadgeColor;
+    variant: BadgeVariant;
+    leading: boolean;
+    label: string | number;
+    icon: string;
+    leadingIcon: string;
+    trailingIcon: string;
+    trailing: boolean;
+}, {}, {
+    UIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        mode: {
+            type: PropType<"svg" | "css">;
+            required: false;
+            default: any;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            required: false;
+            default: any;
+        };
+        customize: {
+            type: FunctionConstructor;
+            required: false;
+            default: any;
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        mode: {
+            type: PropType<"svg" | "css">;
+            required: false;
+            default: any;
+        };
+        size: {
+            type: (StringConstructor | NumberConstructor)[];
+            required: false;
+            default: any;
+        };
+        customize: {
+            type: FunctionConstructor;
+            required: false;
+            default: any;
+        };
+    }>> & Readonly<{}>, {
+        mode: "svg" | "css";
+        size: string | number;
+        customize: Function;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;