@nuxt/ui 2.12.0 → 2.12.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "configKey": "ui",
   "compatibility": {
     "nuxt": "^3.0.0-rc.8"

package/dist/module.mjs

@@ -14,7 +14,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "@nuxt/ui";
-const version = "2.12.0";
+const version = "2.12.2";
 
 function omit(object, keysToOmit) {
   const result = { ...object };

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

@@ -1,5 +1,5 @@
 <template>
-  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="attrs">
+  <ULink :type="type" :disabled="disabled || loading" :class="buttonClass" v-bind="{ ...linkProps, ...attrs }">
     <slot name="leading" :disabled="disabled" :loading="loading">
       <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="leadingIconClass" aria-hidden="true" />
     </slot>
@@ -22,7 +22,7 @@ import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig } from "../../utils";
+import { mergeConfig, nuxtLinkProps, getNuxtLinkProps } from "../../utils";
 import { useInjectButtonGroup } from "../../composables/useButtonGroup";
 import appConfig from "#build/app.config";
 import { button } from "#ui/ui.config";
@@ -34,6 +34,7 @@ export default defineComponent({
   },
   inheritAttrs: false,
   props: {
+    ...nuxtLinkProps,
     type: {
       type: String,
       default: "button"
@@ -172,6 +173,7 @@ export default defineComponent({
         props.loading && !isLeading.value && ui.value.icon.loading
       );
     });
+    const linkProps = computed(() => getNuxtLinkProps(props));
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
@@ -183,7 +185,8 @@ export default defineComponent({
       leadingIconName,
       trailingIconName,
       leadingIconClass,
-      trailingIconClass
+      trailingIconClass,
+      linkProps
     };
   }
 });

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

@@ -80,6 +80,58 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
+    to: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: PropType<string | null>;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
 }, {
     ui: import("vue").ComputedRef<any>;
     attrs: import("vue").ComputedRef<Pick<{
@@ -93,6 +145,7 @@ declare const _default: import("vue").DefineComponent<{
     trailingIconName: import("vue").ComputedRef<string | undefined>;
     leadingIconClass: import("vue").ComputedRef<string>;
     trailingIconClass: import("vue").ComputedRef<string>;
+    linkProps: import("vue").ComputedRef<{}>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     type: {
         type: StringConstructor;
@@ -173,6 +226,58 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<any>;
         default: () => {};
     };
+    to: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: PropType<string | null>;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
 }>>, {
     size: ButtonSize;
     ui: any;
@@ -181,6 +286,7 @@ declare const _default: import("vue").DefineComponent<{
     color: any;
     type: string;
     leading: boolean;
+    replace: boolean;
     class: any;
     label: string;
     loading: boolean;
@@ -193,5 +299,17 @@ declare const _default: import("vue").DefineComponent<{
     trailingIcon: string;
     trailing: boolean;
     square: boolean;
+    to: import("vue-router").RouteLocationRaw;
+    href: import("vue-router").RouteLocationRaw;
+    target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
+    rel: string | null;
+    noRel: boolean;
+    prefetch: boolean;
+    noPrefetch: boolean;
+    activeClass: string;
+    exactActiveClass: string;
+    prefetchedClass: string;
+    ariaCurrentValue: string;
+    external: boolean;
 }, {}>;
 export default _default;

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

@@ -23,7 +23,7 @@
 
           <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">
-              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'labelClass', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'class', 'click'])" custom>
+              <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="getNuxtLinkProps(item)" custom>
                 <HMenuItem v-slot="{ active, disabled: itemDisabled, close }" :disabled="item.disabled">
                   <component
                     :is="!!href ? 'a' : 'button'"
@@ -64,7 +64,7 @@ import UAvatar from "../elements/Avatar.vue";
 import UKbd from "../elements/Kbd.vue";
 import { useUI } from "../../composables/useUI";
 import { usePopper } from "../../composables/usePopper";
-import { mergeConfig, omit } from "../../utils";
+import { mergeConfig, getNuxtLinkProps } from "../../utils";
 import appConfig from "#build/app.config";
 import { dropdown } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.dropdown, dropdown);
@@ -233,7 +233,7 @@ export default defineComponent({
       onMouseOver,
       onMouseLeave,
       onClick,
-      omit,
+      getNuxtLinkProps,
       twMerge,
       twJoin,
       NuxtLink

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

@@ -1,6 +1,5 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import { omit } from '../../utils';
 import type { DropdownItem, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     items: {
@@ -77,7 +76,7 @@ declare const _default: import("vue").DefineComponent<{
         close: any;
         isExternal: any;
     }) => void;
-    omit: typeof omit;
+    getNuxtLinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
     NuxtLink: string | import("vue").ConcreteComponent<{}, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;

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

@@ -2,6 +2,7 @@
   <component
     :is="as"
     v-if="!to"
+    :type="type"
     :disabled="disabled"
     v-bind="$attrs"
     :class="active ? activeClass : inactiveClass"
@@ -32,15 +33,19 @@
 <script>
 import { isEqual } from "ohash";
 import { defineComponent } from "vue";
-import { NuxtLink } from "#components";
+import { nuxtLinkProps } from "../../utils";
 export default defineComponent({
   inheritAttrs: false,
   props: {
-    ...NuxtLink.props,
+    ...nuxtLinkProps,
     as: {
       type: String,
       default: "button"
     },
+    type: {
+      type: String,
+      default: "button"
+    },
     disabled: {
       type: Boolean,
       default: null

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

@@ -1,9 +1,199 @@
-declare const _default: import("vue").DefineComponent<any, {
+declare const _default: import("vue").DefineComponent<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exactQuery: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exactHash: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inactiveClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: import("vue").PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: import("vue").PropType<string | null>;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+}, {
     resolveLinkClass: (route: any, $route: any, { isActive, isExactActive }: {
         isActive: boolean;
         isExactActive: boolean;
-    }) => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<any>, {} | {
-    [x: string]: any;
+    }) => string | undefined;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    as: {
+        type: StringConstructor;
+        default: string;
+    };
+    type: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    active: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    exact: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exactQuery: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    exactHash: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inactiveClass: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    to: {
+        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    href: {
+        readonly type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    target: {
+        readonly type: import("vue").PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    rel: {
+        readonly type: import("vue").PropType<string | null>;
+        readonly default: undefined;
+    };
+    noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+}>>, {
+    type: string;
+    replace: boolean;
+    as: string;
+    disabled: boolean;
+    to: import("vue-router").RouteLocationRaw;
+    href: import("vue-router").RouteLocationRaw;
+    target: (string & {}) | "_blank" | "_parent" | "_self" | "_top" | null;
+    rel: string | null;
+    noRel: boolean;
+    prefetch: boolean;
+    noPrefetch: boolean;
+    activeClass: string;
+    exactActiveClass: string;
+    prefetchedClass: string;
+    ariaCurrentValue: string;
+    external: boolean;
+    active: boolean;
+    exact: boolean;
+    exactQuery: boolean;
+    exactHash: boolean;
+    inactiveClass: string;
 }, {}>;
 export default _default;

package/dist/runtime/components/forms/InputMenu.vue

@@ -19,7 +19,7 @@
         :class="inputClass"
         autocomplete="off"
         v-bind="attrs"
-        :display-value="() => query ? query : ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute]"
+        :display-value="() => query ? query : label"
         @change="onChange"
       />
 
@@ -280,6 +280,14 @@ export default defineComponent({
         emit("update:query", value);
       }
     });
+    const label = computed(() => {
+      if (props.valueAttribute) {
+        const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
+        return option ? option[props.optionAttribute] : null;
+      } else {
+        return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
+      }
+    });
     const inputClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -389,6 +397,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/components/forms/InputMenu.vue.d.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { InputSize, InputVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -142,6 +142,7 @@ declare const _default: import("vue").DefineComponent<{
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    label: import("vue").ComputedRef<any>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true | undefined>;
     inputClass: import("vue").ComputedRef<string>;
@@ -157,7 +158,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: (event: any) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {

package/dist/runtime/components/forms/SelectMenu.vue

@@ -36,8 +36,7 @@
           </span>
 
           <slot name="label">
-            <span v-if="multiple && Array.isArray(modelValue) && modelValue.length" :class="uiMenu.label">{{ modelValue.length }} selected</span>
-            <span v-else-if="!multiple && modelValue" :class="uiMenu.label">{{ ['string', 'number'].includes(typeof modelValue) ? modelValue : modelValue[optionAttribute] }}</span>
+            <span v-if="label" :class="uiMenu.label">{{ label }}</span>
             <span v-else :class="uiMenu.label">{{ placeholder || '&nbsp;' }}</span>
           </slot>
 
@@ -342,6 +341,22 @@ export default defineComponent({
         emit("update:query", value);
       }
     });
+    const label = computed(() => {
+      if (props.multiple) {
+        if (Array.isArray(props.modelValue) && props.modelValue.length) {
+          return `${props.modelValue.length} selected`;
+        } else {
+          return null;
+        }
+      } else {
+        if (props.valueAttribute) {
+          const option = props.options.find((option2) => option2[props.valueAttribute] === props.modelValue);
+          return option ? option[props.optionAttribute] : null;
+        } else {
+          return ["string", "number"].includes(typeof props.modelValue) ? props.modelValue : props.modelValue[props.optionAttribute];
+        }
+      }
+    });
     const selectClass = computed(() => {
       const variant = ui.value.color?.[color.value]?.[props.variant] || ui.value.variant[props.variant];
       return twMerge(twJoin(
@@ -472,6 +487,7 @@ export default defineComponent({
       popper,
       trigger,
       container,
+      label,
       isLeading,
       isTrailing,
       // eslint-disable-next-line vue/no-dupe-keys

package/dist/runtime/components/forms/SelectMenu.vue.d.ts

@@ -2,7 +2,7 @@ import type { PropType } from 'vue';
 import type { SelectSize, SelectVariant, PopperOptions } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {
@@ -162,6 +162,7 @@ declare const _default: import("vue").DefineComponent<{
     popper: import("vue").ComputedRef<PopperOptions>;
     trigger: import("vue").Ref<import("@vueuse/core").MaybeElement>;
     container: import("vue").Ref<import("@vueuse/core").MaybeElement>;
+    label: import("vue").ComputedRef<any>;
     isLeading: import("vue").ComputedRef<string | true>;
     isTrailing: import("vue").ComputedRef<string | true | undefined>;
     selectClass: import("vue").ComputedRef<string>;
@@ -180,7 +181,7 @@ declare const _default: import("vue").DefineComponent<{
     onChange: (event: any) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "close" | "update:modelValue" | "open" | "update:query")[], "change" | "close" | "update:modelValue" | "open" | "update:query", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: string;
     };
     query: {

package/dist/runtime/components/layout/Divider.vue

@@ -68,24 +68,23 @@ export default defineComponent({
   },
   setup(props) {
     const { ui, attrs } = useUI("divider", toRef(props, "ui"), config);
-    const isHorizontal = computed(() => props.orientation === "horizontal");
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper.base,
-        isHorizontal.value ? ui.value.wrapper.horizontal : ui.value.wrapper.vertical
+        ui.value.wrapper[props.orientation]
       ), props.class);
     });
     const containerClass = computed(() => {
       return twJoin(
         ui.value.container.base,
-        isHorizontal.value ? ui.value.container.horizontal : ui.value.container.vertical
+        ui.value.container[props.orientation]
       );
     });
     const borderClass = computed(() => {
       return twJoin(
         ui.value.border.base,
-        isHorizontal.value ? ui.value.border.horizontal : ui.value.border.vertical,
-        isHorizontal.value ? ui.value.border.size.horizontal : ui.value.border.size.vertical,
+        ui.value.border[props.orientation],
+        ui.value.border.size[props.orientation],
         ui.value.border.type[props.type]
       );
     });

package/dist/runtime/components/navigation/Breadcrumb.vue

@@ -5,7 +5,7 @@
         <ULink
           as="span"
           :class="[ui.base, index === links.length - 1 ? ui.active : !!link.to ? ui.inactive : '']"
-          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass'])"
+          v-bind="getULinkProps(link)"
           :aria-current="index === links.length - 1 ? 'page' : undefined"
         >
           <slot name="icon" :link="link" :index="index" :is-active="index === links.length - 1">
@@ -38,7 +38,7 @@ import { twMerge, twJoin } from "tailwind-merge";
 import UIcon from "../elements/Icon.vue";
 import ULink from "../elements/Link.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig, omit } from "../../utils";
+import { mergeConfig, getULinkProps } from "../../utils";
 import appConfig from "#build/app.config";
 import { breadcrumb } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.breadcrumb, breadcrumb);
@@ -72,7 +72,7 @@ export default defineComponent({
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit,
+      getULinkProps,
       twMerge,
       twJoin
     };

package/dist/runtime/components/navigation/Breadcrumb.vue.d.ts

@@ -1,6 +1,5 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import { omit } from '../../utils';
 import type { BreadcrumbLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     links: {
@@ -24,7 +23,7 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    omit: typeof omit;
+    getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/runtime/components/navigation/CommandPalette.vue.d.ts

@@ -3,7 +3,7 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse';
 import type { Group, Command, Button } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: null;
     };
     by: {
@@ -112,7 +112,7 @@ declare const _default: import("vue").DefineComponent<{
     onClear: () => 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<{
     modelValue: {
-        type: (ObjectConstructor | NumberConstructor | ArrayConstructor | StringConstructor)[];
+        type: (ObjectConstructor | NumberConstructor | StringConstructor | ArrayConstructor)[];
         default: null;
     };
     by: {

package/dist/runtime/components/navigation/VerticalNavigation.vue

@@ -1,10 +1,10 @@
 <template>
   <nav :class="ui.wrapper" v-bind="attrs">
-    <ul v-for="(section, sectionIndex) of linkSections" :key="`linkSection${sectionIndex}`">
-      <li v-for="(link, index) of section" :key="`linkSection${sectionIndex}-${index}`">
+    <ul v-for="(section, sectionIndex) of sections" :key="`section${sectionIndex}`">
+      <li v-for="(link, index) of section" :key="`section${sectionIndex}-${index}`">
         <ULink
           v-slot="{ isActive }"
-          v-bind="omit(link, ['label', 'labelClass', 'icon', 'iconClass', 'avatar', 'badge', 'click'])"
+          v-bind="getULinkProps(link)"
           :class="[ui.base, ui.padding, ui.width, ui.ring, ui.rounded, ui.font, ui.size]"
           :active-class="ui.active"
           :inactive-class="ui.inactive"
@@ -40,7 +40,7 @@
           </slot>
         </ULink>
       </li>
-      <UDivider v-if="sectionIndex < linkSections.length - 1" :ui="ui.divider" />
+      <UDivider v-if="sectionIndex < sections.length - 1" :ui="ui.divider" />
     </ul>
   </nav>
 </template>
@@ -53,7 +53,7 @@ import UAvatar from "../elements/Avatar.vue";
 import ULink from "../elements/Link.vue";
 import UDivider from "../layout/Divider.vue";
 import { useUI } from "../../composables/useUI";
-import { mergeConfig, omit } from "../../utils";
+import { mergeConfig, getULinkProps } from "../../utils";
 import appConfig from "#build/app.config";
 import { verticalNavigation } from "#ui/ui.config";
 const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.verticalNavigation, verticalNavigation);
@@ -81,15 +81,13 @@ export default defineComponent({
   },
   setup(props) {
     const { ui, attrs } = useUI("verticalNavigation", toRef(props, "ui"), config, toRef(props, "class"));
-    const linkSections = computed(() => {
-      return Array.isArray(props.links[0]) ? props.links : [props.links];
-    });
+    const sections = computed(() => Array.isArray(props.links[0]) ? props.links : [props.links]);
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
       attrs,
-      omit,
-      linkSections,
+      sections,
+      getULinkProps,
       twMerge,
       twJoin
     };

package/dist/runtime/components/navigation/VerticalNavigation.vue.d.ts

@@ -1,6 +1,5 @@
 import type { PropType } from 'vue';
 import { twJoin } from 'tailwind-merge';
-import { omit } from '../../utils';
 import type { VerticalNavigationLink } from '../../types';
 declare const _default: import("vue").DefineComponent<{
     links: {
@@ -20,8 +19,8 @@ declare const _default: import("vue").DefineComponent<{
     attrs: import("vue").ComputedRef<Pick<{
         [x: string]: unknown;
     }, string>>;
-    omit: typeof omit;
-    linkSections: import("vue").ComputedRef<VerticalNavigationLink[][]>;
+    sections: import("vue").ComputedRef<VerticalNavigationLink[][]>;
+    getULinkProps: (props: any) => {};
     twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
     twJoin: typeof twJoin;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{

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

@@ -19,7 +19,7 @@
 
               <UKbd v-for="shortcut of shortcuts" :key="shortcut" size="xs">
                 {{ shortcut }}
-              </Ukbd>
+              </UKbd>
             </span>
           </div>
         </div>

package/dist/runtime/types/chip.d.ts

@@ -6,6 +6,10 @@ export type ChipColor = 'gray' | typeof colors[number]
 export type ChipPosition = keyof typeof chip.position
 
 export interface Chip {
+  size?: ChipSize
   color?: ChipColor
   position?: ChipPosition
+  text?: string
+  inset?: boolean
+  show?: boolean
 }

package/dist/runtime/types/index.d.ts

@@ -22,5 +22,6 @@ export * from './select'
 export * from './tabs'
 export * from './textarea'
 export * from './toggle'
+export * from './tooltip'
 export * from './vertical-navigation'
 export * from './utils'

package/dist/runtime/types/link.d.ts

@@ -1,6 +1,9 @@
 import type { NuxtLinkProps } from '#app'
 
 export interface Link extends NuxtLinkProps {
+  as?: string
+  type?: string
+  disabled?: boolean
   active?: boolean
   exact?: boolean
   exactQuery?: boolean

package/dist/runtime/types/tooltip.d.ts

@@ -0,0 +1,7 @@
+export interface Tooltip {
+  text?: string
+  prevent?: boolean
+  shortcuts?: string[]
+  openDelay?: number
+  closeDelay?: number
+}

package/dist/runtime/utils/index.d.ts

@@ -8,3 +8,4 @@ export declare function getSlotsChildren(slots: any): any;
  */
 export declare function looseToNumber(val: any): any;
 export * from './lodash';
+export * from './link';

package/dist/runtime/utils/index.mjs

@@ -55,3 +55,4 @@ export function looseToNumber(val) {
   return isNaN(n) ? val : n;
 }
 export * from "./lodash.mjs";
+export * from "./link.mjs";

package/dist/runtime/utils/link.d.ts

@@ -0,0 +1,58 @@
+import type { PropType } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
+export declare const nuxtLinkProps: {
+    readonly to: {
+        readonly type: PropType<RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    readonly href: {
+        readonly type: PropType<RouteLocationRaw>;
+        readonly default: undefined;
+    };
+    readonly target: {
+        readonly type: PropType<(string & {}) | "_blank" | "_parent" | "_self" | "_top" | null>;
+        readonly default: undefined;
+    };
+    readonly rel: {
+        readonly type: PropType<string | null>;
+        readonly default: undefined;
+    };
+    readonly noRel: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly prefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly noPrefetch: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly activeClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly exactActiveClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly prefetchedClass: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly replace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly ariaCurrentValue: {
+        readonly type: StringConstructor;
+        readonly default: undefined;
+    };
+    readonly external: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+};
+export declare const getNuxtLinkProps: (props: any) => {};
+export declare const getULinkProps: (props: any) => {};

package/dist/runtime/utils/link.mjs

@@ -0,0 +1,111 @@
+export const nuxtLinkProps = {
+  to: {
+    type: [String, Object],
+    default: void 0
+  },
+  href: {
+    type: [String, Object],
+    default: void 0
+  },
+  // Attributes
+  target: {
+    type: String,
+    default: void 0
+  },
+  rel: {
+    type: String,
+    default: void 0
+  },
+  noRel: {
+    type: Boolean,
+    default: void 0
+  },
+  // Prefetching
+  prefetch: {
+    type: Boolean,
+    default: void 0
+  },
+  noPrefetch: {
+    type: Boolean,
+    default: void 0
+  },
+  // Styling
+  activeClass: {
+    type: String,
+    default: void 0
+  },
+  exactActiveClass: {
+    type: String,
+    default: void 0
+  },
+  prefetchedClass: {
+    type: String,
+    default: void 0
+  },
+  // Vue Router's `<RouterLink>` additional props
+  replace: {
+    type: Boolean,
+    default: void 0
+  },
+  ariaCurrentValue: {
+    type: String,
+    default: void 0
+  },
+  // Edge cases handling
+  external: {
+    type: Boolean,
+    default: void 0
+  }
+};
+const uLinkProps = {
+  as: {
+    type: String,
+    default: "button"
+  },
+  type: {
+    type: String,
+    default: "button"
+  },
+  disabled: {
+    type: Boolean,
+    default: null
+  },
+  active: {
+    type: Boolean,
+    default: void 0
+  },
+  exact: {
+    type: Boolean,
+    default: false
+  },
+  exactQuery: {
+    type: Boolean,
+    default: false
+  },
+  exactHash: {
+    type: Boolean,
+    default: false
+  },
+  inactiveClass: {
+    type: String,
+    default: void 0
+  }
+};
+export const getNuxtLinkProps = (props) => {
+  const keys = Object.keys(nuxtLinkProps);
+  return keys.reduce((acc, key) => {
+    if (props[key] !== void 0) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};
+export const getULinkProps = (props) => {
+  const keys = [...Object.keys(nuxtLinkProps), ...Object.keys(uLinkProps)];
+  return keys.reduce((acc, key) => {
+    if (props[key] !== void 0) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuxt/ui",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "repository": "nuxt/ui",
   "homepage": "https://ui.nuxt.com",
   "license": "MIT",
@@ -34,52 +34,52 @@
   "dependencies": {
     "@egoist/tailwindcss-icons": "^1.7.2",
     "@headlessui/tailwindcss": "^0.2.0",
-    "@headlessui/vue": "^1.7.16",
+    "@headlessui/vue": "1.7.16",
     "@iconify-json/heroicons": "^1.1.19",
-    "@nuxt/kit": "^3.9.1",
+    "@nuxt/kit": "^3.9.3",
     "@nuxtjs/color-mode": "^3.3.2",
-    "@nuxtjs/tailwindcss": "^6.10.3",
+    "@nuxtjs/tailwindcss": "^6.10.4",
     "@popperjs/core": "^2.11.8",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
-    "@vueuse/core": "^10.7.1",
-    "@vueuse/integrations": "^10.7.1",
-    "@vueuse/math": "^10.7.1",
+    "@vueuse/core": "^10.7.2",
+    "@vueuse/integrations": "^10.7.2",
+    "@vueuse/math": "^10.7.2",
     "defu": "^6.1.4",
     "fuse.js": "^6.6.2",
     "nuxt-icon": "^0.6.8",
     "ohash": "^1.1.3",
-    "pathe": "^1.1.1",
-    "scule": "^1.1.1",
+    "pathe": "^1.1.2",
+    "scule": "^1.2.0",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@nuxt/eslint-config": "^0.2.0",
     "@nuxt/module-builder": "^0.5.5",
-    "@nuxt/test-utils": "^3.9.0",
+    "@nuxt/test-utils": "^3.10.0",
     "@release-it/conventional-changelog": "^8.0.1",
     "@vue/test-utils": "^2.4.3",
     "eslint": "^8.56.0",
     "happy-dom": "^12.10.3",
-    "joi": "^17.11.0",
-    "nuxt": "^3.9.1",
+    "joi": "^17.11.1",
+    "nuxt": "^3.9.3",
     "release-it": "^17.0.1",
     "typescript": "^5.3.3",
     "unbuild": "^2.0.0",
     "valibot": "^0.25.0",
-    "vitest": "^1.1.3",
+    "vitest": "^1.2.1",
     "vitest-environment-nuxt": "^1.0.0",
     "vue-tsc": "^1.8.27",
     "yup": "^1.3.3",
     "zod": "^3.22.4"
   },
   "resolutions": {
-    "@nuxt/kit": "3.9.1",
-    "@nuxt/schema": "3.9.1",
-    "vue": "3.3.13",
-    "tailwindcss": "3.4.1"
+    "@nuxt/kit": "3.9.3",
+    "@nuxt/schema": "3.9.3",
+    "tailwindcss": "3.4.1",
+    "vue": "3.3.13"
   }
 }