@nuxt/ui 3.1.1 → 3.1.2

package/dist/runtime/components/InputNumber.vue.d.ts

@@ -33,6 +33,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @IconifyIcon
      */
     incrementIcon?: string;
+    /** Disable the increment button. */
+    incrementDisabled?: boolean;
     /**
      * Configure the decrement button. The `color` and `size` are inherited.
      * @defaultValue { variant: 'link' }
@@ -44,6 +46,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
      * @IconifyIcon
      */
     decrementIcon?: string;
+    /** Disable the decrement button. */
+    decrementDisabled?: boolean;
     autofocus?: boolean;
     autofocusDelay?: number;
     /**
@@ -76,6 +80,43 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
+        } & {
+            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;
@@ -125,6 +166,43 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<InputNumbe
         };
         $refs: {
             [x: string]: unknown;
+        } & {
+            primitiveElement: import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import("vue").ExtractPropTypes<{
+                asChild: {
+                    type: BooleanConstructor;
+                    default: boolean;
+                };
+                as: {
+                    type: import("vue").PropType<import("reka-ui").AsTag | import("vue").Component>;
+                    default: string;
+                };
+            }>> & Readonly<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+                [key: string]: any;
+            }>, {}, {}, {}, {
+                asChild: boolean;
+                as: import("reka-ui").AsTag | import("vue").Component;
+            }> | null;
         };
         $slots: Readonly<{
             [name: string]: import("vue").Slot<any> | undefined;

package/dist/runtime/components/Link.vue

@@ -5,11 +5,12 @@ import theme from "#build/ui/link";
 <script setup>
 import { computed } from "vue";
 import { defu } from "defu";
-import { isEqual, diff } from "ohash/utils";
+import { isEqual } from "ohash/utils";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useRoute, useAppConfig } from "#imports";
 import { tv } from "../utils/tv";
+import { isPartiallyEqual } from "../utils/link";
 import ULinkBase from "./LinkBase.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -43,7 +44,7 @@ const props = defineProps({
 defineSlots();
 const route = useRoute();
 const appConfig = useAppConfig();
-const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "raw", "class"));
+const nuxtLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
 const ui = computed(() => tv({
   extend: tv(theme),
   ...defu({
@@ -55,17 +56,7 @@ const ui = computed(() => tv({
     }
   }, appConfig.ui?.link || {})
 }));
-function isPartiallyEqual(item1, item2) {
-  const diffedKeys = diff(item1, item2).reduce((filtered, q) => {
-    if (q.type === "added") {
-      filtered.add(q.key);
-    }
-    return filtered;
-  }, /* @__PURE__ */ new Set());
-  const item1Filtered = Object.fromEntries(Object.entries(item1).filter(([key]) => !diffedKeys.has(key)));
-  const item2Filtered = Object.fromEntries(Object.entries(item2).filter(([key]) => !diffedKeys.has(key)));
-  return isEqual(item1Filtered, item2Filtered);
-}
+const to = computed(() => props.to ?? props.href);
 function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
   if (props.active !== void 0) {
     return props.active;
@@ -96,7 +87,7 @@ function resolveLinkClass({ route: route2, isActive, isExactActive }) {
 </script>
 
 <template>
-  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" custom>
+  <NuxtLink v-slot="{ href, navigate, route: linkRoute, rel, target, isExternal, isActive, isExactActive }" v-bind="nuxtLinkProps" :to="to" custom>
     <template v-if="custom">
       <slot
         v-bind="{

package/dist/runtime/components/NavigationMenu.vue

@@ -16,6 +16,7 @@ import UAvatar from "./Avatar.vue";
 import UIcon from "./Icon.vue";
 import UBadge from "./Badge.vue";
 import UCollapsible from "./Collapsible.vue";
+import UTooltip from "./Tooltip.vue";
 const props = defineProps({
   as: { type: null, required: false },
   trailingIcon: { type: String, required: false },
@@ -84,34 +85,34 @@ const lists = computed(
   <DefineLinkTemplate v-slot="{ item, active, index }">
     <slot :name="item.slot || 'item'" :item="item" :index="index">
       <slot :name="item.slot ? `${item.slot}-leading` : 'item-leading'" :item="item" :active="active" :index="index">
-        <UAvatar v-if="item.avatar" :size="props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
-        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active, disabled: !!item.disabled })" />
+        <UAvatar v-if="item.avatar" :size="item.ui?.linkLeadingAvatarSize || props.ui?.linkLeadingAvatarSize || ui.linkLeadingAvatarSize()" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: [props.ui?.linkLeadingAvatar, item.ui?.linkLeadingAvatar], active, disabled: !!item.disabled })" />
+        <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: [props.ui?.linkLeadingIcon, item.ui?.linkLeadingIcon], active, disabled: !!item.disabled })" />
       </slot>
 
       <span
         v-if="(!collapsed || orientation !== 'vertical') && (get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label'])"
-        :class="ui.linkLabel({ class: props.ui?.linkLabel })"
+        :class="ui.linkLabel({ class: [props.ui?.linkLabel, item.ui?.linkLabel] })"
       >
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
           {{ get(item, props.labelKey) }}
         </slot>
 
-        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: props.ui?.linkLabelExternalIcon, active })" />
+        <UIcon v-if="item.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.linkLabelExternalIcon({ class: [props.ui?.linkLabelExternalIcon, item.ui?.linkLabelExternalIcon], active })" />
       </span>
 
-      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="ui.linkTrailing({ class: props.ui?.linkTrailing })">
+      <span v-if="(!collapsed || orientation !== 'vertical') && (item.badge || orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length || item.trailingIcon || !!slots[item.slot ? `${item.slot}-trailing` : 'item-trailing'])" :class="ui.linkTrailing({ class: [props.ui?.linkTrailing, item.ui?.linkTrailing] })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <UBadge
             v-if="item.badge"
             color="neutral"
             variant="outline"
-            :size="props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
+            :size="item.ui?.linkTrailingBadgeSize || props.ui?.linkTrailingBadgeSize || ui.linkTrailingBadgeSize()"
             v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
-            :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
+            :class="ui.linkTrailingBadge({ class: [props.ui?.linkTrailingBadge, item.ui?.linkTrailingBadge] })"
           />
 
-          <UIcon v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
-          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: props.ui?.linkTrailingIcon, active })" />
+          <UIcon v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) || orientation === 'vertical' && item.children?.length && item.collapsible !== false" :name="item.trailingIcon || trailingIcon || appConfig.ui.icons.chevronDown" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
+          <UIcon v-else-if="item.trailingIcon" :name="item.trailingIcon" :class="ui.linkTrailingIcon({ class: [props.ui?.linkTrailingIcon, item.ui?.linkTrailingIcon], active })" />
         </slot>
       </span>
     </slot>
@@ -119,17 +120,18 @@ const lists = computed(
 
   <DefineItemTemplate v-slot="{ item, index, level = 0 }">
     <component
-      :is="orientation === 'vertical' && item.children?.length && !collapsed ? UCollapsible : NavigationMenuItem"
+      :is="orientation === 'vertical' && item.children?.length ? UCollapsible : NavigationMenuItem"
       as="li"
-      :value="item.value || String(index)"
+      :value="item.value || `item-${index}`"
       :default-open="item.defaultOpen"
-      :unmount-on-hide="orientation === 'vertical' && item.children?.length && !collapsed ? unmountOnHide : void 0"
+      :disabled="orientation === 'vertical' && item.children?.length ? item.collapsible === false : void 0"
+      :unmount-on-hide="orientation === 'vertical' && item.children?.length ? unmountOnHide : void 0"
       :open="item.open"
     >
-      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
+      <div v-if="orientation === 'vertical' && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
         <ReuseLinkTemplate :item="item" :index="index" />
       </div>
-      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && !collapsed ? {} : pickLinkProps(item)" custom>
+      <ULink v-else-if="item.type !== 'label'" v-slot="{ active, ...slotProps }" v-bind="orientation === 'vertical' && item.children?.length && item.collapsible !== false ? {} : pickLinkProps(item)" custom>
         <component
           :is="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content']) ? NavigationMenuTrigger : NavigationMenuLink"
           as-child
@@ -137,27 +139,32 @@ const lists = computed(
           :disabled="item.disabled"
           @select="item.onSelect"
         >
-          <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+          <UTooltip v-if="!!item.tooltip" :content="{ side: 'right' }" v-bind="item.tooltip">
+            <ULinkBase v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
+              <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
+            </ULinkBase>
+          </UTooltip>
+          <ULinkBase v-else v-bind="slotProps" :class="ui.link({ class: [props.ui?.link, item.ui?.link, item.class], active: active || item.active, disabled: !!item.disabled, level: orientation === 'horizontal' || level > 0 })">
             <ReuseLinkTemplate :item="item" :active="active || item.active" :index="index" />
           </ULinkBase>
         </component>
 
-        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: props.ui?.content })">
+        <NavigationMenuContent v-if="orientation === 'horizontal' && (item.children?.length || !!slots[item.slot ? `${item.slot}-content` : 'item-content'])" v-bind="contentProps" :class="ui.content({ class: [props.ui?.content, item.ui?.content] })">
           <slot :name="item.slot ? `${item.slot}-content` : 'item-content'" :item="item" :active="active" :index="index">
-            <ul :class="ui.childList({ class: props.ui?.childList })">
-              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: props.ui?.childItem })">
+            <ul :class="ui.childList({ class: [props.ui?.childList, item.ui?.childList] })">
+              <li v-for="(childItem, childIndex) in item.children" :key="childIndex" :class="ui.childItem({ class: [props.ui?.childItem, item.ui?.childItem] })">
                 <ULink v-slot="{ active: childActive, ...childSlotProps }" v-bind="pickLinkProps(childItem)" custom>
                   <NavigationMenuLink as-child :active="childActive" @select="childItem.onSelect">
-                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, childItem.class], active: childActive })">
-                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: props.ui?.childLinkIcon, active: childActive })" />
+                    <ULinkBase v-bind="childSlotProps" :class="ui.childLink({ class: [props.ui?.childLink, item.ui?.childLink, childItem.class], active: childActive })">
+                      <UIcon v-if="childItem.icon" :name="childItem.icon" :class="ui.childLinkIcon({ class: [props.ui?.childLinkIcon, item.ui?.childLinkIcon], active: childActive })" />
 
-                      <div :class="ui.childLinkWrapper({ class: props.ui?.childLinkWrapper })">
-                        <p :class="ui.childLinkLabel({ class: props.ui?.childLinkLabel, active: childActive })">
+                      <div :class="ui.childLinkWrapper({ class: [props.ui?.childLinkWrapper, item.ui?.childLinkWrapper] })">
+                        <p :class="ui.childLinkLabel({ class: [props.ui?.childLinkLabel, item.ui?.childLinkLabel], active: childActive })">
                           {{ get(childItem, props.labelKey) }}
 
-                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: props.ui?.childLinkLabelExternalIcon, active: childActive })" />
+                          <UIcon v-if="childItem.target === '_blank' && externalIcon !== false" :name="typeof externalIcon === 'string' ? externalIcon : appConfig.ui.icons.external" :class="ui.childLinkLabelExternalIcon({ class: [props.ui?.childLinkLabelExternalIcon, item.ui?.childLinkLabelExternalIcon], active: childActive })" />
                         </p>
-                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: props.ui?.childLinkDescription, active: childActive })">
+                        <p v-if="childItem.description" :class="ui.childLinkDescription({ class: [props.ui?.childLinkDescription, item.ui?.childLinkDescription], active: childActive })">
                           {{ childItem.description }}
                         </p>
                       </div>
@@ -170,7 +177,7 @@ const lists = computed(
         </NavigationMenuContent>
       </ULink>
 
-      <template v-if="orientation === 'vertical' && item.children?.length && !collapsed" #content>
+      <template v-if="orientation === 'vertical' && item.children?.length" #content>
         <ul :class="ui.childList({ class: props.ui?.childList })">
           <ReuseItemTemplate
             v-for="(childItem, childIndex) in item.children"
@@ -178,19 +185,19 @@ const lists = computed(
             :item="childItem"
             :index="childIndex"
             :level="level + 1"
-            :class="ui.childItem({ class: props.ui?.childItem })"
+            :class="ui.childItem({ class: [props.ui?.childItem, childItem.ui?.childItem] })"
           />
         </ul>
       </template>
     </component>
   </DefineItemTemplate>
 
-  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <NavigationMenuRoot v-bind="rootProps" :data-collapsed="collapsed" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <slot name="list-leading" />
 
     <template v-for="(list, listIndex) in lists" :key="`list-${listIndex}`">
       <NavigationMenuList :class="ui.list({ class: props.ui?.list })">
-        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: props.ui?.item })" />
+        <ReuseItemTemplate v-for="(item, index) in list" :key="`list-${listIndex}-${index}`" :item="item" :index="index" :class="ui.item({ class: [props.ui?.item, item.ui?.item] })" />
       </NavigationMenuList>
 
       <div v-if="orientation === 'vertical' && listIndex < lists.length - 1" :class="ui.separator({ class: props.ui?.separator })" />

package/dist/runtime/components/NavigationMenu.vue.d.ts

@@ -1,10 +1,10 @@
 import type { NavigationMenuRootProps, NavigationMenuRootEmits, NavigationMenuContentProps, NavigationMenuContentEmits, CollapsibleRootProps } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/ui/navigation-menu';
-import type { AvatarProps, BadgeProps, LinkProps } from '../types';
+import type { AvatarProps, BadgeProps, LinkProps, TooltipProps } from '../types';
 import type { ArrayOrNested, DynamicSlots, MergeTypes, NestedItem, EmitsToProps, ComponentConfig } from '../types/utils';
 type NavigationMenu = ComponentConfig<typeof theme, AppConfig, 'navigationMenu'>;
-export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type'> {
+export interface NavigationMenuChildItem extends Omit<NavigationMenuItem, 'type' | 'ui'> {
     /** Description is only used when `orientation` is `horizontal`. */
     description?: string;
     [key: string]: any;
@@ -21,6 +21,12 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      * `{ size: 'sm', color: 'neutral', variant: 'outline' }`{lang="ts-type"}
      */
     badge?: string | number | BadgeProps;
+    /**
+     * Display a tooltip on the item.
+     * Only works when `type` is `link`.
+     * `{ content: { side: 'right' } }`{lang="ts-type"}
+     */
+    tooltip?: TooltipProps;
     /**
      * @IconifyIcon
      */
@@ -32,9 +38,21 @@ export interface NavigationMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cu
      */
     type?: 'label' | 'link';
     slot?: string;
+    /**
+     * The value of the item. Avoid using `index` as the value to prevent conflicts in horizontal orientation with Reka UI.
+     * @defaultValue `item-${index}`
+     */
     value?: string;
+    /**
+     * Make the item collapsible.
+     * Only works when `orientation` is `vertical`.
+     * @defaultValue true
+     */
+    collapsible?: boolean;
     children?: NavigationMenuChildItem[];
     onSelect?(e: Event): void;
+    class?: any;
+    ui?: Pick<NavigationMenu['slots'], 'item' | 'linkLeadingAvatarSize' | 'linkLeadingAvatar' | 'linkLeadingIcon' | 'linkLabel' | 'linkLabelExternalIcon' | 'linkTrailing' | 'linkTrailingBadgeSize' | 'linkTrailingBadge' | 'linkTrailingIcon' | 'label' | 'link' | 'content' | 'childList' | 'childItem' | 'childLink' | 'childLinkIcon' | 'childLinkWrapper' | 'childLinkLabel' | 'childLinkLabelExternalIcon' | 'childLinkDescription'>;
     [key: string]: any;
 }
 export interface NavigationMenuProps<T extends ArrayOrNested<NavigationMenuItem> = ArrayOrNested<NavigationMenuItem>> extends Pick<NavigationMenuRootProps, 'modelValue' | 'defaultValue' | 'delayDuration' | 'disableClickTrigger' | 'disableHoverTrigger' | 'skipDelayDuration' | 'disablePointerLeaveClose' | 'unmountOnHide'> {

package/dist/runtime/components/Pagination.vue

@@ -47,7 +47,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.pagination ||
 </script>
 
 <template>
-  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <PaginationRoot v-slot="{ page, pageCount }" v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <PaginationList v-slot="{ items }" :class="ui.list({ class: props.ui?.list })">
       <PaginationFirst v-if="showControls || !!slots.first" as-child :class="ui.first({ class: props.ui?.first })">
         <slot name="first">

package/dist/runtime/components/PinInput.vue

@@ -75,7 +75,7 @@ defineExpose({
     v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     :name="name"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"
     @complete="onComplete"
   >

package/dist/runtime/components/Progress.vue

@@ -109,7 +109,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.progress || {
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div v-if="!isIndeterminate && (status || !!slots.status)" :class="ui.status({ class: props.ui?.status })" :style="statusStyle">
       <slot name="status" :percent="percent">
         {{ percent }}%

package/dist/runtime/components/RadioGroup.vue

@@ -93,7 +93,7 @@ function onUpdate(value) {
     v-bind="rootProps"
     :name="name"
     :disabled="disabled"
-    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="onUpdate"
   >
     <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
@@ -103,25 +103,25 @@ function onUpdate(value) {
         </slot>
       </legend>
 
-      <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
-        <div :class="ui.container({ class: props.ui?.container })">
+      <component :is="!variant || variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: [props.ui?.item, item.ui?.item, item.class] })">
+        <div :class="ui.container({ class: [props.ui?.container, item.ui?.container] })">
           <RadioGroupItem
             :id="item.id"
             :value="item.value"
             :disabled="item.disabled"
-            :class="ui.base({ class: props.ui?.base, disabled: item.disabled })"
+            :class="ui.base({ class: [props.ui?.base, item.ui?.base], disabled: item.disabled })"
           >
-            <RadioGroupIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+            <RadioGroupIndicator :class="ui.indicator({ class: [props.ui?.indicator, item.ui?.indicator] })" />
           </RadioGroupItem>
         </div>
 
-        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: props.ui?.label })">
+        <div v-if="item.label || !!slots.label || (item.description || !!slots.description)" :class="ui.wrapper({ class: [props.ui?.wrapper, item.ui?.wrapper] })">
+          <component :is="!variant || variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
             <slot name="label" :item="item" :model-value="modelValue">
               {{ item.label }}
             </slot>
           </component>
-          <p v-if="item.description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
+          <p v-if="item.description || !!slots.description" :class="ui.description({ class: [props.ui?.description, item.ui?.description] })">
             <slot name="description" :item="item" :model-value="modelValue">
               {{ item.description }}
             </slot>

package/dist/runtime/components/RadioGroup.vue.d.ts

@@ -9,6 +9,8 @@ export type RadioGroupItem = {
     description?: string;
     disabled?: boolean;
     value?: RadioGroupValue;
+    class?: any;
+    ui?: Pick<RadioGroup['slots'], 'item' | 'container' | 'base' | 'indicator' | 'wrapper' | 'label' | 'description'>;
     [key: string]: any;
 } | RadioGroupValue;
 export interface RadioGroupProps<T extends RadioGroupItem = RadioGroupItem> extends Pick<RadioGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'> {

package/dist/runtime/components/Select.vue

@@ -118,7 +118,7 @@ function isSelectItem(item) {
     @update:model-value="onUpdate"
     @update:open="onUpdateOpen"
   >
-    <SelectTrigger :id="id" :class="ui.base({ class: [props.class, props.ui?.base] })" v-bind="{ ...$attrs, ...ariaAttrs }">
+    <SelectTrigger :id="id" :class="ui.base({ class: [props.ui?.base, props.class] })" v-bind="{ ...$attrs, ...ariaAttrs }">
       <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :model-value="modelValue" :open="open" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
@@ -132,7 +132,7 @@ function isSelectItem(item) {
             {{ displayedModelValue }}
           </span>
           <span v-else :class="ui.placeholder({ class: props.ui?.placeholder })">
-            {{ placeholder ?? '\xA0' }}
+            {{ placeholder ?? "\xA0" }}
           </span>
         </template>
       </slot>
@@ -151,44 +151,44 @@ function isSelectItem(item) {
         <SelectViewport :class="ui.viewport({ class: props.ui?.viewport })">
           <SelectGroup v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: props.ui?.group })">
             <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: props.ui?.label })">
+              <SelectLabel v-if="isSelectItem(item) && item.type === 'label'" :class="ui.label({ class: [props.ui?.label, item.ui?.label, item.class] })">
                 {{ get(item, props.labelKey) }}
               </SelectLabel>
 
-              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: props.ui?.separator })" />
+              <SelectSeparator v-else-if="isSelectItem(item) && item.type === 'separator'" :class="ui.separator({ class: [props.ui?.separator, item.ui?.separator, item.class] })" />
 
               <SelectItem
                 v-else
-                :class="ui.item({ class: props.ui?.item })"
+                :class="ui.item({ class: [props.ui?.item, isSelectItem(item) && item.ui?.item, isSelectItem(item) && item.class] })"
                 :disabled="isSelectItem(item) && item.disabled"
                 :value="isSelectItem(item) ? get(item, props.valueKey) : item"
                 @select="isSelectItem(item) && item.onSelect?.($event)"
               >
                 <slot name="item" :item="item" :index="index">
                   <slot name="item-leading" :item="item" :index="index">
-                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
-                    <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                    <UIcon v-if="isSelectItem(item) && item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: [props.ui?.itemLeadingIcon, item.ui?.itemLeadingIcon] })" />
+                    <UAvatar v-else-if="isSelectItem(item) && item.avatar" :size="item.ui?.itemLeadingAvatarSize || props.ui?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: [props.ui?.itemLeadingAvatar, item.ui?.itemLeadingAvatar] })" />
                     <UChip
                       v-else-if="isSelectItem(item) && item.chip"
-                      :size="props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
+                      :size="item.ui?.itemLeadingChipSize || props.ui?.itemLeadingChipSize || ui.itemLeadingChipSize()"
                       inset
                       standalone
                       v-bind="item.chip"
-                      :class="ui.itemLeadingChip({ class: props.ui?.itemLeadingChip })"
+                      :class="ui.itemLeadingChip({ class: [props.ui?.itemLeadingChip, item.ui?.itemLeadingChip] })"
                     />
                   </slot>
 
-                  <SelectItemText :class="ui.itemLabel({ class: props.ui?.itemLabel })">
+                  <SelectItemText :class="ui.itemLabel({ class: [props.ui?.itemLabel, isSelectItem(item) && item.ui?.itemLabel] })">
                     <slot name="item-label" :item="item" :index="index">
                       {{ isSelectItem(item) ? get(item, props.labelKey) : item }}
                     </slot>
                   </SelectItemText>
 
-                  <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
+                  <span :class="ui.itemTrailing({ class: [props.ui?.itemTrailing, isSelectItem(item) && item.ui?.itemTrailing] })">
                     <slot name="item-trailing" :item="item" :index="index" />
 
                     <SelectItemIndicator as-child>
-                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: props.ui?.itemTrailingIcon })" />
+                      <UIcon :name="selectedIcon || appConfig.ui.icons.check" :class="ui.itemTrailingIcon({ class: [props.ui?.itemTrailingIcon, isSelectItem(item) && item.ui?.itemTrailingIcon] })" />
                     </SelectItemIndicator>
                   </span>
                 </slot>

package/dist/runtime/components/Select.vue.d.ts

@@ -18,9 +18,11 @@ interface SelectItemBase {
      * @defaultValue 'item'
      */
     type?: 'label' | 'separator' | 'item';
-    value?: string | number;
+    value?: AcceptableValue | boolean;
     disabled?: boolean;
     onSelect?(e?: Event): void;
+    class?: any;
+    ui?: Pick<Select['slots'], 'label' | 'separator' | 'item' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLeadingChipSize' | 'itemLeadingChip' | 'itemLabel' | 'itemTrailing' | 'itemTrailingIcon'>;
     [key: string]: any;
 }
 export type SelectItem = SelectItemBase | AcceptableValue | boolean;