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'
   }
-}
+}

src/runtime/ui.config/forms/checkbox.ts

@@ -1,15 +1,18 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-checkbox',
   rounded: 'rounded',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
+}

src/runtime/ui.config/forms/input.ts

@@ -1,6 +1,7 @@
 export default {
   wrapper: 'relative',
   base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+  form: 'form-input',
   rounded: 'rounded-md',
   placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
   size: {
@@ -62,6 +63,7 @@ export default {
   icon: {
     base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
     color: 'text-{color}-500 dark:text-{color}-400',
+    loading: 'animate-spin',
     size: {
       '2xs': 'h-4 w-4',
       xs: 'h-4 w-4',
@@ -101,4 +103,4 @@ export default {
     variant: 'outline',
     loadingIcon: 'i-heroicons-arrow-path-20-solid'
   }
-}
+}

src/runtime/ui.config/forms/radio.ts

@@ -1,14 +1,17 @@
 export default {
   wrapper: 'relative flex items-start',
+  container: 'flex items-center h-5',
   base: 'h-4 w-4 dark:checked:bg-current dark:checked:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  form: 'form-radio',
   color: 'text-{color}-500 dark:text-{color}-400',
   background: 'bg-white dark:bg-gray-900',
   border: 'border border-gray-300 dark:border-gray-700',
   ring: 'focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
+  inner: 'ms-3 flex flex-col',
   label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
   required: 'text-sm text-red-500 dark:text-red-400',
   help: 'text-sm text-gray-500 dark:text-gray-400',
   default: {
     color: 'primary'
   }
-}
+}

src/runtime/ui.config/forms/select.ts

@@ -2,6 +2,7 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-select',
   placeholder: 'text-gray-900 dark:text-white',
   default: {
     size: 'sm',
@@ -10,4 +11,4 @@ export default {
     loadingIcon: 'i-heroicons-arrow-path-20-solid',
     trailingIcon: 'i-heroicons-chevron-down-20-solid'
   }
-}
+}

src/runtime/ui.config/forms/selectMenu.ts

@@ -1,7 +1,9 @@
-import _popperArrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   container: 'z-20 group',
+  trigger: 'inline-flex w-full',
+  select: 'inline-flex items-center text-left cursor-default',
   width: 'w-full',
   height: 'max-h-60',
   base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
@@ -11,6 +13,8 @@ export default {
   padding: 'p-1',
   ring: 'ring-1 ring-gray-200 dark:ring-gray-700',
   input: 'block w-[calc(100%+0.5rem)] focus:ring-transparent text-sm px-3 py-1.5 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border-0 border-b border-gray-200 dark:border-gray-700 focus:border-inherit sticky -top-1 -mt-1 mb-1 -mx-1 z-10 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none',
+  required: 'absolute inset-0 w-px opacity-0 cursor-default',
+  label: 'block truncate',
   option: {
     base: 'cursor-default select-none relative flex items-center justify-between gap-1',
     rounded: 'rounded-md',
@@ -23,6 +27,7 @@ export default {
     selected: 'pe-7',
     disabled: 'cursor-not-allowed opacity-50',
     empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
+    create: 'block truncate',
     icon: {
       base: 'flex-shrink-0 h-4 w-4',
       active: 'text-gray-900 dark:text-white',
@@ -55,7 +60,7 @@ export default {
     clearOnClose: false
   },
   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/forms/textarea.ts

@@ -2,9 +2,10 @@ import input from './input'
 
 export default {
   ...input,
+  form: 'form-textarea',
   default: {
     size: 'sm',
     color: 'white',
     variant: 'outline'
   }
-}
+}

src/runtime/ui.config/layout/divider.ts

@@ -16,6 +16,11 @@ export default {
     size: {
       horizontal: 'border-t',
       vertical: 'border-s'
+    },
+    type: {
+      solid: 'border-solid',
+      dotted: 'border-dotted',
+      dashed: 'border-dashed'
     }
   },
   icon: {

src/runtime/ui.config/navigation/commandPalette.ts

@@ -9,6 +9,7 @@ export default {
     size: 'sm:text-sm',
     icon: {
       base: 'pointer-events-none absolute start-4 text-gray-400 dark:text-gray-500',
+      loading: 'animate-spin',
       size: 'h-4 w-4',
       padding: 'ps-10'
     },

src/runtime/ui.config/overlays/contextMenu.ts

@@ -1,4 +1,4 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative',
@@ -23,4 +23,4 @@ export default {
     scroll: false
   },
   arrow
-}
+}

src/runtime/ui.config/overlays/modal.ts

@@ -4,7 +4,7 @@ export default {
   container: 'flex min-h-full items-end sm:items-center justify-center text-center',
   padding: 'p-4 sm:p-0',
   margin: 'sm:my-8',
-  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
+  base: 'relative text-left rtl:text-right overflow-hidden flex flex-col',
   overlay: {
     base: 'fixed inset-0 transition-opacity',
     background: 'bg-gray-200/75 dark:bg-gray-800/75',
@@ -22,8 +22,9 @@ export default {
   ring: '',
   rounded: 'rounded-lg',
   shadow: 'shadow-xl',
-  width: 'sm:max-w-lg',
+  width: 'w-full sm:max-w-lg',
   height: '',
+  fullscreen: 'w-screen h-screen',
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'ease-out duration-300',
@@ -33,4 +34,4 @@ export default {
     leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
     leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
   }
-}
+}

src/runtime/ui.config/overlays/notification.ts

@@ -1,6 +1,7 @@
 export default {
   wrapper: 'w-full pointer-events-auto',
   container: 'relative overflow-hidden',
+  inner: 'w-0 flex-1',
   title: 'text-sm font-medium text-gray-900 dark:text-white',
   description: 'mt-1 text-sm leading-4 text-gray-500 dark:text-gray-400',
   actions: 'flex items-center gap-2 mt-3 flex-shrink-0',

src/runtime/ui.config/overlays/popover.ts

@@ -1,8 +1,9 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative',
   container: 'z-50 group',
+  trigger: 'inline-flex w-full',
   width: '',
   background: 'bg-white dark:bg-gray-900',
   shadow: 'shadow-lg',

src/runtime/ui.config/overlays/slideover.ts

@@ -20,9 +20,14 @@ export default {
   padding: '',
   shadow: 'shadow-xl',
   width: 'w-screen max-w-md',
+  translate: {
+    base: 'translate-x-0',
+    left: '-translate-x-full',
+    right: 'translate-x-full'
+  },
   // Syntax for `<TransitionRoot>` component https://headlessui.com/vue/transition#basic-example
   transition: {
     enter: 'transform transition ease-in-out duration-300',
     leave: 'transform transition ease-in-out duration-200'
   }
-}
+}

src/runtime/ui.config/overlays/tooltip.ts

@@ -1,4 +1,4 @@
-import arrow from '../_popperArrow'
+import { arrow } from '../popper'
 
 export default {
   wrapper: 'relative inline-flex',
@@ -11,6 +11,7 @@ export default {
   ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
   base: '[@media(pointer:coarse)]:hidden h-6 px-2 py-1 text-xs font-normal truncate relative',
   shortcuts: 'hidden md:inline-flex flex-shrink-0 gap-0.5',
+  middot: 'mx-1 text-gray-700 dark:text-gray-200',
   // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
   transition: {
     enterActiveClass: 'transition ease-out duration-200',
@@ -24,4 +25,4 @@ export default {
     strategy: 'fixed'
   },
   arrow
-}
+}

src/runtime/ui.config/popper.ts

@@ -1,8 +1,8 @@
-export default {
-	base: 'before:w-2 before:h-2',
+export const arrow = {
+	base: 'invisible before:visible before:block before:rotate-45 before:z-[-1] before:w-2 before:h-2',
 	ring: 'before:ring-1 before:ring-gray-200 dark:before:ring-gray-800',
 	rounded: 'before:rounded-sm',
 	background: 'before:bg-gray-200 dark:before:bg-gray-800',
 	shadow: 'before:shadow',
 	placement: 'group-data-[popper-placement*="right"]:-left-1 group-data-[popper-placement*="left"]:-right-1 group-data-[popper-placement*="top"]:-bottom-1 group-data-[popper-placement*="bottom"]:-top-1'
-}
+}