chore(components): add more sizes to theme config

2026-01-14 20:19:34 +01:00 · 2024-07-03 15:23:43 +02:00
parent 5f40773fa4
commit a4e86d6d42
14 changed files with 21 additions and 11 deletions
--- a/src/runtime/components/Alert.vue
+++ b/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>

--- a/src/runtime/components/Breadcrumb.vue
+++ b/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>

--- a/src/runtime/components/CommandPalette.vue
+++ b/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>
--- a/src/runtime/components/NavigationMenu.vue
+++ b/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 })"
                      />
--- a/src/runtime/components/Separator.vue
+++ b/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>

--- a/src/runtime/components/Toast.vue
+++ b/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>

--- a/src/runtime/components/Tooltip.vue
+++ b/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>

--- a/src/theme/alert.ts
+++ b/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'
  },
--- a/src/theme/breadcrumb.ts
+++ b/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'
--- a/src/theme/command-palette.ts
+++ b/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',
--- a/src/theme/navigation-menu.ts
+++ b/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',
--- a/src/theme/separator.ts
+++ b/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: {
--- a/src/theme/toast.ts
+++ b/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'
--- a/src/theme/tooltip.ts
+++ b/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'
  }
 }