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

src/runtime/ui.config/elements/alert.ts

@@ -1,5 +1,6 @@
 export default {
   wrapper: 'w-full relative overflow-hidden',
+  inner: 'w-0 flex-1',
   title: 'text-sm font-medium',
   description: 'mt-1 text-sm leading-4 opacity-90',
   actions: 'flex items-center gap-2 mt-3 flex-shrink-0',

src/runtime/ui.config/elements/button.ts

@@ -2,6 +2,9 @@ export default {
   base: 'focus:outline-none focus-visible:outline-0 disabled:cursor-not-allowed disabled:opacity-75 flex-shrink-0',
   font: 'font-medium',
   rounded: 'rounded-md',
+  truncate: 'text-left break-all line-clamp-1',
+  block: 'w-full flex justify-center items-center',
+  inline: 'inline-flex items-center',
   size: {
     '2xs': 'text-xs',
     xs: 'text-xs',
@@ -58,6 +61,7 @@ export default {
   },
   icon: {
     base: 'flex-shrink-0',
+    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
@@ -73,4 +77,4 @@ export default {
     color: 'primary',
     loadingIcon: 'i-heroicons-arrow-path-20-solid'
   }
-}
+}

src/runtime/ui.config/elements/buttonGroup.ts

@@ -4,5 +4,16 @@ export default {
     vertical: 'inline-flex flex-col -space-y-px'
   },
   rounded: 'rounded-md',
-  shadow: 'shadow-sm'
-}
+  shadow: 'shadow-sm',
+  orientation: {
+    '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' } }
+  }
+}

src/runtime/ui.config/elements/dropdown.ts

@@ -1,8 +1,9 @@
-import _popperArrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative inline-flex text-left rtl:text-right',
   container: 'z-20 group',
+  trigger: 'inline-flex w-full',
   width: 'w-48',
   height: '',
   background: 'bg-white dark:bg-gray-800',
@@ -29,6 +30,7 @@ export default {
       base: 'flex-shrink-0',
       size: '3xs' as const
     },
+    label: 'truncate',
     shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5 ms-auto'
   },
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
@@ -45,7 +47,7 @@ export default {
     strategy: 'fixed'
   },
   arrow: {
-    ..._popperArrow,
+    ...arrow,
     ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-700',
     background: 'before:bg-white dark:before:bg-gray-700'
   }

src/runtime/ui.config/elements/meterGroup.ts

@@ -5,7 +5,20 @@ export default {
   transition: 'transition-all',
   rounded: 'rounded-full',
   shadow: '',
+  list: 'list-disc list-inside',
+  orientation: {
+    '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' }
+  },
   default: {
-    size: 'md'
+    size: 'md',
+    icon: 'i-heroicons-minus-20-solid'
   }
-}
+}