chore(components): add more sizes to theme config

src/runtime/components/Alert.vue

@@ -81,7 +81,7 @@ const ui = computed(() => alert({
 <template>
   <Primitive :as="as" :class="ui.root({ class: props.class, multiline })">
     <slot name="leading">
-      <UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar v-if="avatar" :size="(ui.avatarSize() as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 

src/runtime/components/Breadcrumb.vue

@@ -68,7 +68,7 @@ const ui = breadcrumb()
             <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: props.ui?.link, active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
               <slot :name="item.slot || 'item'" :item="item" :index="index">
                 <slot :name="item.slot ? `${item.slot}-leading`: 'item-leading'" :item="item" :active="index === items!.length - 1" :index="index">
-                  <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
+                  <UAvatar v-if="item.avatar" :size="(ui.linkLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active: index === items!.length - 1 })" />
                   <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.linkLeadingIcon({ class: props.ui?.linkLeadingIcon, active: index === items!.length - 1 })" />
                 </slot>
 

src/runtime/components/CommandPalette.vue

@@ -232,11 +232,11 @@ const groups = computed(() => {
             >
               <slot :name="item.slot || group.slot || 'item'" :item="item" :index="index">
                 <slot :name="item.slot ? `${item.slot}-leading` : group.slot ? `${group.slot}-leading` : `item-leading`" :item="item" :index="index">
-                  <UAvatar v-if="item.avatar" size="2xs" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
+                  <UAvatar v-if="item.avatar" :size="(ui.itemLeadingAvatarSize() as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: props.ui?.itemLeadingAvatar })" />
                   <UIcon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: props.ui?.itemLeadingIcon })" />
                   <UChip
                     v-else-if="item.chip"
-                    size="md"
+                    :size="(ui.itemLeadingChipSize() as ChipProps['size'])"
                     inset
                     standalone
                     v-bind="item.chip"
@@ -257,7 +257,7 @@ const groups = computed(() => {
                 <span :class="ui.itemTrailing({ class: props.ui?.itemTrailing })">
                   <slot :name="item.slot ? `${item.slot}-trailing` : group.slot ? `${group.slot}-trailing` : `item-trailing`" :item="item" :index="index">
                     <span v-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: props.ui?.itemTrailingKbds })">
-                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" size="md" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+                      <UKbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="(ui.itemTrailingKbdsSize() as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
                     </span>
                     <UIcon v-else-if="group.highlightedIcon" :name="group.highlightedIcon" :class="ui.itemTrailingHighlightedIcon({ class: props.ui?.itemTrailingHighlightedIcon })" />
                   </slot>

src/runtime/components/NavigationMenu.vue

@@ -120,7 +120,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
               <ULinkBase v-bind="slotProps" :class="ui.link({ class: props.ui?.link, active, disabled: !!item.disabled })">
                 <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="2xs" v-bind="item.avatar" :class="ui.linkLeadingAvatar({ class: props.ui?.linkLeadingAvatar, active, disabled: !!item.disabled })" />
+                    <UAvatar v-if="item.avatar" :size="(ui.linkLeadingAvatarSize() as AvatarProps['size'])" 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 })" />
                   </slot>
 
@@ -137,7 +137,7 @@ const lists = computed(() => props.items?.length ? (Array.isArray(props.items[0]
                       <UBadge
                         v-if="item.badge"
                         color="white"
-                        size="sm"
+                        :size="(ui.linkTrailingBadgeSize() as BadgeProps['size'])"
                         v-bind="(typeof item.badge === 'string' || typeof item.badge === 'number') ? { label: item.badge } : item.badge"
                         :class="ui.linkTrailingBadge({ class: props.ui?.linkTrailingBadge })"
                       />

src/runtime/components/Separator.vue

@@ -71,7 +71,7 @@ const ui = computed(() => separator({
         <slot>
           <span v-if="label" :class="ui.label({ class: props.ui?.label })">{{ label }}</span>
           <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
-          <UAvatar v-else-if="avatar" size="2xs" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+          <UAvatar v-else-if="avatar" :size="(ui.avatarSize() as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
         </slot>
       </div>
 

src/runtime/components/Toast.vue

@@ -107,7 +107,7 @@ defineExpose({
     :style="{ '--height': height }"
   >
     <slot name="leading">
-      <UAvatar v-if="avatar" size="2xl" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
+      <UAvatar v-if="avatar" :size="(ui.avatarSize() as AvatarProps['size'])" v-bind="avatar" :class="ui.avatar({ class: props.ui?.avatar })" />
       <UIcon v-else-if="icon" :name="icon" :class="ui.icon({ class: props.ui?.icon })" />
     </slot>
 

src/runtime/components/Tooltip.vue

@@ -77,7 +77,7 @@ const ui = computed(() => tooltip({
           <span v-if="text" :class="ui.text({ class: props.ui?.text })">{{ text }}</span>
 
           <span v-if="kbds?.length" :class="ui.kbds({ class: props.ui?.kbds })">
-            <UKbd v-for="(kbd, index) in kbds" :key="index" size="sm" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+            <UKbd v-for="(kbd, index) in kbds" :key="index" :size="(ui.kbdsSize() as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 

src/theme/alert.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     description: 'text-sm',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
     close: 'p-0'
   },

src/theme/breadcrumb.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     link: 'group relative flex items-center gap-1.5 text-sm min-w-0',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
+    linkLeadingAvatarSize: '2xs',
     linkLabel: 'truncate',
     separator: 'flex',
     separatorIcon: 'shrink-0 size-5 text-gray-500 dark:text-gray-400'

src/theme/command-palette.ts

@@ -13,11 +13,14 @@ export default (options: Required<ModuleOptions>) => ({
     item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.transitions && 'transition-colors before:transition-colors'],
     itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.transitions && 'transition-colors'],
     itemLeadingAvatar: 'shrink-0',
+    itemLeadingAvatarSize: '2xs',
     itemLeadingChip: 'shrink-0 mx-1.5',
+    itemLeadingChipSize: 'md',
     itemTrailing: 'ms-auto inline-flex gap-1.5 items-center',
     itemTrailingIcon: 'shrink-0 size-5',
     itemTrailingHighlightedIcon: 'shrink-0 size-5 text-gray-400 dark:text-gray-500 hidden group-data-highlighted:inline-flex',
     itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5',
+    itemTrailingKbdsSize: 'md',
     itemLabel: 'truncate space-x-1',
     itemLabelBase: 'text-gray-900 dark:text-white [&>mark]:bg-primary-500 dark:[&>mark]:bg-primary-400 [&>mark]:text-white dark:[&>mark]:text-gray-900',
     itemLabelPrefix: 'text-gray-700 dark:text-gray-200',

src/theme/navigation-menu.ts

@@ -8,8 +8,10 @@ export default (options: Required<ModuleOptions>) => ({
     link: 'group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-md focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2 focus-visible:before:ring-primary-500 dark:focus-visible:before:ring-primary-400',
     linkLeadingIcon: 'shrink-0 size-5',
     linkLeadingAvatar: 'shrink-0',
+    linkLeadingAvatarSize: '2xs',
     linkTrailing: 'ms-auto inline-flex',
     linkTrailingBadge: 'shrink-0 rounded',
+    linkTrailingBadgeSize: 'sm',
     linkTrailingIcon: 'size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200',
     linkLabel: 'truncate',
     linkLabelExternalIcon: 'size-3 align-top text-gray-400 dark:text-gray-500',

src/theme/separator.ts

@@ -7,6 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
     container: 'font-medium text-gray-700 dark:text-gray-200 flex',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xs',
     label: 'text-sm'
   },
   variants: {

src/theme/toast.ts

@@ -8,6 +8,7 @@ export default (options: Required<ModuleOptions>) => ({
     description: 'text-sm text-gray-500 dark:text-gray-400',
     icon: 'shrink-0 size-5',
     avatar: 'shrink-0',
+    avatarSize: '2xl',
     actions: 'flex gap-1.5 shrink-0',
     progress: 'absolute inset-x-0 bottom-0 h-1 z-[-1]',
     close: 'p-0'

src/theme/tooltip.ts

@@ -3,6 +3,7 @@ export default {
     content: 'flex items-center gap-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white shadow rounded ring ring-gray-200 dark:ring-gray-800 h-6 px-2 py-1 text-xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
     arrow: 'fill-gray-200 dark:fill-gray-800',
     text: 'truncate',
-    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`
+    kbds: `hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-['·'] before:mr-0.5`,
+    kbdsSize: 'sm'
   }
 }