@nuxt/ui 2.10.0 → 2.11.0

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { Avatar, Button } from '../../types';
+import type { Avatar, Button, AlertVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     title: {
         type: StringConstructor;
@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -51,6 +51,7 @@ declare const _default: import("vue").DefineComponent<{
         [x: string]: unknown;
     }, string>>;
     alertClass: import("vue").ComputedRef<string>;
+    twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "close"[], "close", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: {
         type: StringConstructor;
@@ -84,7 +85,7 @@ declare const _default: import("vue").DefineComponent<{
         validator(value: string): boolean;
     };
     variant: {
-        type: PropType<any>;
+        type: PropType<AlertVariant>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -99,6 +100,7 @@ declare const _default: import("vue").DefineComponent<{
 }>> & {
     onClose?: ((...args: any[]) => any) | undefined;
 }, {
+    ui: Partial<any>;
     description: string;
     icon: string;
     avatar: Avatar;
@@ -107,8 +109,7 @@ declare const _default: import("vue").DefineComponent<{
         click?: Function | undefined;
     })[];
     color: any;
-    ui: Partial<any>;
     class: any;
-    variant: any;
+    variant: AlertVariant;
 }, {}>;
 export default _default;

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

@@ -1,4 +1,5 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     src: {
         type: (BooleanConstructor | StringConstructor)[];
@@ -17,7 +18,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -78,7 +79,7 @@ declare const _default: import("vue").DefineComponent<{
         default: () => any;
     };
     size: {
-        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        type: PropType<AvatarSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -110,12 +111,12 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     alt: string;
-    icon: string;
+    size: AvatarSize;
     ui: Partial<any>;
+    icon: string;
     class: any;
     src: string | boolean;
     text: 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;

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

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { AvatarSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -21,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     [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: PropType<string | number | symbol>;
+        type: PropType<AvatarSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -38,9 +39,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: AvatarSize;
     ui: Partial<any>;
     class: any;
-    size: string | number | symbol;
     max: number;
 }, {}>;
 export default _default;

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

@@ -9,6 +9,7 @@ import { computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { badge } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.badge, badge);
@@ -54,13 +55,14 @@ export default defineComponent({
   },
   setup(props) {
     const { ui, attrs } = useUI("badge", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
+        rounded.value,
+        ui.value.size[size.value],
         variant?.replaceAll("{color}", props.color)
       ), props.class);
     });

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

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
-import type { BadgeVariant } from '../../types';
+import type { BadgeSize, BadgeVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
     badgeClass: 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<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "lg">;
+        type: PropType<BadgeSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -62,11 +62,11 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
-    color: any;
+    size: BadgeSize;
     ui: Partial<any>;
+    color: any;
     class: any;
     label: string | number;
     variant: BadgeVariant;
-    size: "sm" | "md" | "xs" | "lg";
 }, {}>;
 export default _default;

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

@@ -23,6 +23,7 @@ import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
 import { mergeConfig } from "../../utils";
+import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { button } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
@@ -124,6 +125,7 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const { ui, attrs } = useUI("button", toRef(props, "ui"), config);
+    const { size, rounded } = useInjectButtonGroup({ ui, props });
     const isLeading = computed(() => {
       return props.icon && props.leading || props.icon && !props.trailing || props.loading && !props.trailing || props.leadingIcon;
     });
@@ -136,10 +138,10 @@ export default defineComponent({
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
-        ui.value.gap[props.size],
-        props.padded && ui.value[isSquare.value ? "square" : "padding"][props.size],
+        rounded.value,
+        ui.value.size[size.value],
+        ui.value.gap[size.value],
+        props.padded && ui.value[isSquare.value ? "square" : "padding"][size.value],
         variant?.replaceAll("{color}", props.color),
         props.block ? "w-full flex justify-center items-center" : "inline-flex items-center"
       ), props.class);
@@ -159,14 +161,14 @@ export default defineComponent({
     const leadingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && "animate-spin"
       );
     });
     const trailingIconClass = computed(() => {
       return twJoin(
         ui.value.icon.base,
-        ui.value.icon.size[props.size],
+        ui.value.icon.size[size.value],
         props.loading && !isLeading.value && "animate-spin"
       );
     });

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

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import type { ButtonVariant } from '../../types';
+import type { ButtonSize, ButtonVariant } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     type: {
         type: StringConstructor;
@@ -26,7 +26,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -118,7 +118,7 @@ declare const _default: import("vue").DefineComponent<{
         default: boolean;
     };
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: () => any;
         validator(value: string): boolean;
     };
@@ -173,17 +173,17 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    size: ButtonSize;
+    ui: Partial<any>;
     truncate: boolean;
     icon: string;
     color: any;
-    ui: Partial<any>;
+    type: string;
     class: any;
     label: string;
     loading: boolean;
-    type: string;
     disabled: boolean;
     variant: ButtonVariant;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
     block: boolean;
     padded: boolean;
     loadingIcon: string;

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

@@ -1,7 +1,8 @@
 import type { PropType } from 'vue';
+import type { ButtonSize } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     size: {
-        type: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -22,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     [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: PropType<"sm" | "md" | "xs" | "2xs" | "lg" | "xl">;
+        type: PropType<ButtonSize>;
         default: null;
         validator(value: string): boolean;
     };
@@ -40,9 +41,9 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    orientation: "horizontal" | "vertical";
+    size: ButtonSize;
     ui: Partial<any>;
     class: any;
-    size: "sm" | "md" | "xs" | "2xs" | "lg" | "xl";
-    orientation: "horizontal" | "vertical";
 }, {}>;
 export default _default;

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

@@ -1,12 +1,14 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from "vue";
+import { h, computed, toRef, defineComponent } from "vue";
 import { twMerge, twJoin } from "tailwind-merge";
 import { useUI } from "../../composables/useUI.mjs";
 import { mergeConfig, getSlotsChildren } from "../../utils/index.mjs";
+import { useProvideButtonGroup } from "../../composables/useButtonGroup.mjs";
 import appConfig from "#build/app.config";
 import { button, buttonGroup } from "#ui/ui.config";
 const buttonConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.button, button);
 const buttonGroupConfig = mergeConfig(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup);
 export default defineComponent({
+  name: "ButtonGroup",
   inheritAttrs: false,
   props: {
     size: {
@@ -35,36 +37,6 @@ export default defineComponent({
   setup(props, { slots }) {
     const { ui, attrs } = useUI("buttonGroup", toRef(props, "ui"), buttonGroupConfig);
     const children = computed(() => getSlotsChildren(slots));
-    const rounded = computed(() => {
-      const roundedMap = {
-        "rounded-none": { horizontal: { left: "rounded-s-none", right: "rounded-e-none" }, vertical: { top: "rounded-t-none", bottom: "rounded-b-none" } },
-        "rounded-sm": { horizontal: { left: "rounded-s-sm", right: "rounded-e-sm" }, vertical: { top: "rounded-t-sm", bottom: "rounded-b-sm" } },
-        rounded: { horizontal: { left: "rounded-s", right: "rounded-e" }, vertical: { top: "rounded-t", bottom: "rounded-b" } },
-        "rounded-md": { horizontal: { left: "rounded-s-md", right: "rounded-e-md" }, vertical: { top: "rounded-t-md", bottom: "rounded-b-md" } },
-        "rounded-lg": { horizontal: { left: "rounded-s-lg", right: "rounded-e-lg" }, vertical: { top: "rounded-t-lg", bottom: "rounded-b-lg" } },
-        "rounded-xl": { horizontal: { left: "rounded-s-xl", right: "rounded-e-xl" }, vertical: { top: "rounded-t-xl", bottom: "rounded-b-xl" } },
-        "rounded-2xl": { horizontal: { left: "rounded-s-2xl", right: "rounded-e-2xl" }, vertical: { top: "rounded-t-2xl", bottom: "rounded-b-2xl" } },
-        "rounded-3xl": { horizontal: { left: "rounded-s-3xl", right: "rounded-e-3xl" }, vertical: { top: "rounded-t-3xl", bottom: "rounded-b-3xl" } },
-        "rounded-full": { horizontal: { left: "rounded-s-full", right: "rounded-e-full" }, vertical: { top: "rounded-t-full", bottom: "rounded-b-full" } }
-      };
-      return roundedMap[ui.value.rounded][props.orientation];
-    });
-    const clones = computed(() => children.value.map((node, index) => {
-      const vProps = {};
-      if (props.size) {
-        vProps.size = props.size;
-      }
-      vProps.ui = node.props?.ui || {};
-      vProps.ui.rounded = "rounded-none";
-      vProps.ui.base = "!shadow-none";
-      if (index === 0) {
-        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`;
-      }
-      if (index === children.value.length - 1) {
-        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`;
-      }
-      return cloneVNode(node, vProps);
-    }));
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper[props.orientation],
@@ -72,6 +44,21 @@ export default defineComponent({
         ui.value.shadow
       ), props.class);
     });
-    return () => h("div", { class: wrapperClass.value, ...attrs.value }, clones.value);
+    const rounded = computed(() => {
+      const roundedMap = {
+        "rounded-none": { horizontal: { start: "rounded-s-none", end: "rounded-e-none" }, vertical: { start: "rounded-t-none", end: "rounded-b-none" } },
+        "rounded-sm": { horizontal: { start: "rounded-s-sm", end: "rounded-e-sm" }, vertical: { start: "rounded-t-sm", end: "rounded-b-sm" } },
+        rounded: { horizontal: { start: "rounded-s", end: "rounded-e" }, vertical: { start: "rounded-t", end: "rounded-b" } },
+        "rounded-md": { horizontal: { start: "rounded-s-md", end: "rounded-e-md" }, vertical: { start: "rounded-t-md", end: "rounded-b-md" } },
+        "rounded-lg": { horizontal: { start: "rounded-s-lg", end: "rounded-e-lg" }, vertical: { start: "rounded-t-lg", end: "rounded-b-lg" } },
+        "rounded-xl": { horizontal: { start: "rounded-s-xl", end: "rounded-e-xl" }, vertical: { start: "rounded-t-xl", end: "rounded-b-xl" } },
+        "rounded-2xl": { horizontal: { start: "rounded-s-2xl", end: "rounded-e-2xl" }, vertical: { start: "rounded-t-2xl", end: "rounded-b-2xl" } },
+        "rounded-3xl": { horizontal: { start: "rounded-s-3xl", end: "rounded-e-3xl" }, vertical: { start: "rounded-t-3xl", end: "rounded-b-3xl" } },
+        "rounded-full": { horizontal: { start: "rounded-s-full", end: "rounded-e-full" }, vertical: { start: "rounded-t-full", end: "rounded-b-full" } }
+      };
+      return roundedMap[ui.value.rounded][props.orientation];
+    });
+    useProvideButtonGroup({ orientation: toRef(props, "orientation"), size: toRef(props, "size"), ui, rounded });
+    return () => h("div", { class: wrapperClass.value, ...attrs.value }, children.value);
   }
 });

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

@@ -0,0 +1,85 @@
+<template>
+  <div :class="ui.wrapper" v-bind="attrs">
+    <slot />
+
+    <span v-if="show" :class="chipClass">
+      <slot name="content">
+        {{ text }}
+      </slot>
+    </span>
+  </div>
+</template>
+
+<script>
+import { defineComponent, computed, toRef } from "vue";
+import { twJoin } from "tailwind-merge";
+import { useUI } from "../../composables/useUI";
+import { mergeConfig } from "../../utils";
+import appConfig from "#build/app.config";
+import { chip } from "#ui/ui.config";
+const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.chip, chip);
+export default defineComponent({
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: () => config.default.size,
+      validator(value) {
+        return Object.keys(config.size).includes(value);
+      }
+    },
+    color: {
+      type: String,
+      default: () => config.default.color,
+      validator(value) {
+        return ["gray", ...appConfig.ui.colors].includes(value);
+      }
+    },
+    position: {
+      type: String,
+      default: () => config.default.position,
+      validator(value) {
+        return Object.keys(config.position).includes(value);
+      }
+    },
+    text: {
+      type: [String, Number],
+      default: null
+    },
+    inset: {
+      type: Boolean,
+      default: () => config.default.inset
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    class: {
+      type: [String, Object, Array],
+      default: void 0
+    },
+    ui: {
+      type: Object,
+      default: void 0
+    }
+  },
+  setup(props) {
+    const { ui, attrs } = useUI("chip", toRef(props, "ui"), config, toRef(props, "class"));
+    const chipClass = computed(() => {
+      return twJoin(
+        ui.value.base,
+        ui.value.size[props.size],
+        ui.value.position[props.position],
+        props.inset ? null : ui.value.translate[props.position],
+        ui.value.background.replaceAll("{color}", props.color)
+      );
+    });
+    return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
+      attrs,
+      chipClass
+    };
+  }
+});
+</script>

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

@@ -0,0 +1,90 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}, {
+    ui: import("vue").ComputedRef<any>;
+    attrs: import("vue").ComputedRef<Pick<{
+        [x: string]: unknown;
+    }, string>>;
+    chipClass: 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<{
+    size: {
+        type: PropType<"sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    color: {
+        type: PropType<any>;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    position: {
+        type: PropType<"top-right" | "bottom-right" | "top-left" | "bottom-left">;
+        default: () => any;
+        validator(value: string): boolean;
+    };
+    text: {
+        type: (NumberConstructor | StringConstructor)[];
+        default: null;
+    };
+    inset: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    show: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    class: {
+        type: PropType<any>;
+        default: undefined;
+    };
+    ui: {
+        type: PropType<Partial<any>>;
+        default: undefined;
+    };
+}>>, {
+    size: "sm" | "3xs" | "md" | "xs" | "2xs" | "lg" | "xl" | "2xl" | "3xl";
+    ui: Partial<any>;
+    color: any;
+    class: any;
+    text: string | number;
+    position: "top-right" | "bottom-right" | "top-left" | "bottom-left";
+    inset: boolean;
+    show: boolean;
+}, {}>;
+export default _default;

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

@@ -21,25 +21,29 @@
           <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
-              <HMenuItem v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ active, disabled: itemDisabled }" :disabled="item.disabled">
-                <component
-                  :is="!!item.to ? NuxtLink : 'button'"
-                  v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])"
-                  :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
-                  @click="item.click"
-                >
-                  <slot :name="item.slot || 'item'" :item="item">
-                    <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
-                    <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
+                <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
+                  <component
+                    :is="!!href ? 'a' : 'button'"
+                    :href="!itemDisabled ? href : undefined"
+                    :rel="rel"
+                    :target="target"
+                    :class="[ui.item.base, ui.item.padding, ui.item.size, ui.item.rounded, active ? ui.item.active : ui.item.inactive, itemDisabled && ui.item.disabled]"
+                    @click="onClick($event, item, { href, navigate, close, isExternal })"
+                  >
+                    <slot :name="item.slot || 'item'" :item="item">
+                      <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
+                      <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                    <span class="truncate">{{ item.label }}</span>
+                      <span class="truncate">{{ item.label }}</span>
 
-                    <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
-                      <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
-                    </span>
-                  </slot>
-                </component>
-              </HMenuItem>
+                      <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
+                        <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>
+                      </span>
+                    </slot>
+                  </component>
+                </HMenuItem>
+              </NuxtLink>
             </div>
           </HMenuItems>
         </div>
@@ -160,6 +164,15 @@ export default defineComponent({
         closeTimeout = null;
       }, props.closeDelay);
     }
+    function onClick(e, item, { href, navigate, close, isExternal }) {
+      if (item.click) {
+        item.click(e);
+      }
+      if (href && !isExternal) {
+        navigate(e);
+        close();
+      }
+    }
     const NuxtLink = resolveComponent("NuxtLink");
     return {
       // eslint-disable-next-line vue/no-dupe-keys
@@ -172,6 +185,7 @@ export default defineComponent({
       containerStyle,
       onMouseOver,
       onMouseLeave,
+      onClick,
       omit,
       NuxtLink
     };

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

@@ -52,6 +52,12 @@ declare const _default: import("vue").DefineComponent<{
     }>;
     onMouseOver: () => void;
     onMouseLeave: () => void;
+    onClick: (e: any, item: any, { href, navigate, close, isExternal }: {
+        href: any;
+        navigate: any;
+        close: any;
+        isExternal: any;
+    }) => void;
     omit: typeof omit;
     NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{