fix(components): move remaining classes to config (#1039)

src/runtime/components/elements/Alert.vue

@@ -4,7 +4,7 @@
       <UIcon v-if="icon" :name="icon" :class="ui.icon.base" />
       <UAvatar v-if="avatar" v-bind="{ size: ui.avatar.size, ...avatar }" :class="ui.avatar.base" />
 
-      <div class="w-0 flex-1">
+      <div :class="ui.inner">
         <p :class="ui.title">
           <slot name="title" :title="title">
             {{ title }}

src/runtime/components/elements/AvatarGroup.ts

@@ -32,7 +32,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof avatarGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof avatarGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },

src/runtime/components/elements/Button.vue

@@ -5,7 +5,7 @@
     </slot>
 
     <slot>
-      <span v-if="label" :class="[truncate ? 'text-left break-all line-clamp-1' : '']">
+      <span v-if="label" :class="[truncate ? ui.truncate : '']">
         {{ label }}
       </span>
     </slot>
@@ -154,7 +154,7 @@ export default defineComponent({
         ui.value.gap[size.value],
         props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
         variant?.replaceAll('{color}', props.color),
-        props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
+        props.block ? ui.value.block : ui.value.inline
       ), props.class)
     })
 
@@ -178,7 +178,7 @@ export default defineComponent({
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && 'animate-spin'
+        props.loading && ui.value.icon.loading
       )
     })
 
@@ -186,11 +186,13 @@ export default defineComponent({
       return twJoin(
         ui.value.icon.base,
         ui.value.icon.size[size.value],
-        props.loading && !isLeading.value && 'animate-spin'
+        props.loading && !isLeading.value && ui.value.icon.loading
       )
     })
 
     return {
+      // eslint-disable-next-line vue/no-dupe-keys
+      ui,
       attrs,
       isLeading,
       isTrailing,

src/runtime/components/elements/ButtonGroup.ts

@@ -35,7 +35,7 @@ export default defineComponent({
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof buttonGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof buttonGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -52,20 +52,7 @@ export default defineComponent({
       ), props.class)
     })
 
-    const rounded = computed(() => {
-      const roundedMap = {
-        'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
-        'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
-        rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
-        'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
-        'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
-        'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
-        'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
-        'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
-        'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
-      }
-      return roundedMap[ui.value.rounded][props.orientation]
-    })
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded][props.orientation])
 
     useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })
 

src/runtime/components/elements/Dropdown.vue

@@ -4,7 +4,7 @@
       ref="trigger"
       as="div"
       :disabled="disabled"
-      class="inline-flex w-full"
+      :class="ui.trigger"
       role="button"
       @mouseover="onMouseOver"
     >
@@ -18,7 +18,7 @@
     <div v-if="open && items.length" ref="container" :class="[ui.container, ui.width]" :style="containerStyle" @mouseover="onMouseOver">
       <Transition appear v-bind="ui.transition">
         <div>
-          <div v-if="popper.arrow" data-popper-arrow :class="['invisible before:visible before:block before:rotate-45 before:z-[-1]', Object.values(ui.arrow)]" />
+          <div v-if="popper.arrow" data-popper-arrow :class="Object.values(ui.arrow)" />
           <HMenuItems :class="[ui.base, ui.divide, ui.ring, ui.rounded, ui.shadow, ui.background, ui.height]" static>
             <div v-for="(subItems, index) of items" :key="index" :class="ui.padding">
               <NuxtLink v-for="(item, subIndex) of subItems" :key="subIndex" v-slot="{ href, target, rel, navigate, isExternal }" v-bind="omit(item, ['label', 'slot', 'icon', 'iconClass', 'avatar', 'shortcuts', 'disabled', 'click'])" custom>
@@ -35,7 +35,7 @@
                       <UIcon v-if="item.icon" :name="item.icon" :class="[ui.item.icon.base, active ? ui.item.icon.active : ui.item.icon.inactive, item.iconClass]" />
                       <UAvatar v-else-if="item.avatar" v-bind="{ size: ui.item.avatar.size, ...item.avatar }" :class="ui.item.avatar.base" />
 
-                      <span class="truncate">{{ item.label }}</span>
+                      <span :class="ui.item.label">{{ item.label }}</span>
 
                       <span v-if="item.shortcuts?.length" :class="ui.item.shortcuts">
                         <UKbd v-for="shortcut of item.shortcuts" :key="shortcut">{{ shortcut }}</UKbd>

src/runtime/components/elements/MeterGroup.ts

@@ -44,14 +44,14 @@ export default defineComponent({
     },
     icon: {
       type: String,
-      default: 'i-heroicons-minus'
+      default: () => meterGroupConfig.default.icon
     },
     class: {
       type: [String, Object, Array] as PropType<any>,
       default: () => ''
     },
     ui: {
-      type: Object as PropType<Partial<typeof meterGroupConfig & { strategy?: Strategy }>>,
+      type: Object as PropType<Partial<typeof meterGroupConfig> & { strategy?: Strategy }>,
       default: () => ({})
     }
   },
@@ -70,21 +70,7 @@ export default defineComponent({
 
     const children = computed(() => getSlotsChildren(slots))
 
-    const rounded = computed(() => {
-      const roundedMap = {
-        'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
-        'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
-        rounded: { left: 'rounded-s', right: 'rounded-e' },
-        'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
-        'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
-        'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
-        'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
-        'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
-        'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
-      }
-
-      return roundedMap[ui.value.rounded]
-    })
+    const rounded = computed(() => ui.value.orientation[ui.value.rounded])
 
     function clampPercent (value: number, min: number, max: number): number {
       if (min == max) {
@@ -198,7 +184,7 @@ export default defineComponent({
         vNodeSlots[0] = slots.indicator({ percent: percent.value })
       }
 
-      vNodeSlots[2] = h('ol', { class: 'list-disc list-inside' }, labels.value.map((label, key) => {
+      vNodeSlots[2] = h('ol', { class: ui.value.list }, labels.value.map((label, key) => {
         const labelClass = computed(() => {
           return twJoin(
             uiMeter.value.label.base,