refactor(config): break ui.config.ts into separate files (#930)

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

@@ -0,0 +1,15 @@
+export default {
+  wrapper: 'relative flex items-start',
+  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',
+  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',
+  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/formGroup.ts

@@ -0,0 +1,25 @@
+export default {
+  wrapper: '',
+  label: {
+    wrapper: 'flex content-center items-center justify-between',
+    base: 'block font-medium text-gray-700 dark:text-gray-200',
+    // eslint-disable-next-line quotes
+    required: `after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-400`
+  },
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  container: 'mt-1 relative',
+  description: 'text-gray-500 dark:text-gray-400',
+  hint: 'text-gray-500 dark:text-gray-400',
+  help: 'mt-2 text-gray-500 dark:text-gray-400',
+  error: 'mt-2 text-red-500 dark:text-red-400',
+  default: {
+    size: 'sm'
+  }
+}

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

@@ -0,0 +1,104 @@
+export default {
+  wrapper: 'relative',
+  base: 'relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0',
+  rounded: 'rounded-md',
+  placeholder: 'placeholder-gray-400 dark:placeholder-gray-500',
+  size: {
+    '2xs': 'text-xs',
+    xs: 'text-xs',
+    sm: 'text-sm',
+    md: 'text-sm',
+    lg: 'text-sm',
+    xl: 'text-base'
+  },
+  gap: {
+    '2xs': 'gap-x-1',
+    xs: 'gap-x-1.5',
+    sm: 'gap-x-1.5',
+    md: 'gap-x-2',
+    lg: 'gap-x-2.5',
+    xl: 'gap-x-2.5'
+  },
+  padding: {
+    '2xs': 'px-2 py-1',
+    xs: 'px-2.5 py-1.5',
+    sm: 'px-2.5 py-1.5',
+    md: 'px-3 py-2',
+    lg: 'px-3.5 py-2.5',
+    xl: 'px-3.5 py-2.5'
+  },
+  leading: {
+    padding: {
+      '2xs': 'ps-7',
+      xs: 'ps-8',
+      sm: 'ps-9',
+      md: 'ps-10',
+      lg: 'ps-11',
+      xl: 'ps-12'
+    }
+  },
+  trailing: {
+    padding: {
+      '2xs': 'pe-7',
+      xs: 'pe-8',
+      sm: 'pe-9',
+      md: 'pe-10',
+      lg: 'pe-11',
+      xl: 'pe-12'
+    }
+  },
+  color: {
+    white: {
+      outline: 'shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    },
+    gray: {
+      outline: 'shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400'
+    }
+  },
+  variant: {
+    outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
+    none: 'bg-transparent focus:ring-0 focus:shadow-none'
+  },
+  icon: {
+    base: 'flex-shrink-0 text-gray-400 dark:text-gray-500',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    size: {
+      '2xs': 'h-4 w-4',
+      xs: 'h-4 w-4',
+      sm: 'h-5 w-5',
+      md: 'h-5 w-5',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6'
+    },
+    leading: {
+      wrapper: 'absolute inset-y-0 start-0 flex items-center',
+      pointer: 'pointer-events-none',
+      padding: {
+        '2xs': 'ps-2',
+        xs: 'ps-2.5',
+        sm: 'ps-2.5',
+        md: 'ps-3',
+        lg: 'ps-3.5',
+        xl: 'ps-3.5'
+      }
+    },
+    trailing: {
+      wrapper: 'absolute inset-y-0 end-0 flex items-center',
+      pointer: 'pointer-events-none',
+      padding: {
+        '2xs': 'pe-2',
+        xs: 'pe-2.5',
+        sm: 'pe-2.5',
+        md: 'pe-3',
+        lg: 'pe-3.5',
+        xl: 'pe-3.5'
+      }
+    }
+  },
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid'
+  }
+}

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

@@ -0,0 +1,14 @@
+export default {
+  wrapper: 'relative flex items-start',
+  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',
+  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',
+  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/radioGroup.ts

@@ -0,0 +1,7 @@
+export default {
+  wrapper: 'relative flex items-start',
+  legend: 'text-sm font-medium text-gray-700 dark:text-gray-200 mb-1',
+  default: {
+    color: 'primary'
+  }
+}

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

@@ -0,0 +1,63 @@
+export default {
+  wrapper: 'relative w-full flex items-center',
+  base: 'w-full absolute appearance-none cursor-pointer disabled:cursor-not-allowed disabled:bg-opacity-50 focus:outline-none peer group',
+  rounded: 'rounded-lg',
+  background: 'bg-transparent',
+  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',
+  progress: {
+    base: 'absolute pointer-events-none peer-disabled:bg-opacity-50',
+    rounded: 'rounded-s-lg',
+    background: 'bg-{color}-500 dark:bg-{color}-400',
+    size: {
+      '2xs': 'h-px',
+      xs: 'h-0.5',
+      sm: 'h-1',
+      md: 'h-2',
+      lg: 'h-3',
+      xl: 'h-4',
+      '2xl': 'h-5'
+    }
+  },
+  thumb: {
+    base: '[&::-webkit-slider-thumb]:relative [&::-moz-range-thumb]:relative [&::-webkit-slider-thumb]:z-[1] [&::-moz-range-thumb]:z-[1] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0',
+    color: 'text-{color}-500 dark:text-{color}-400',
+    background: '[&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:dark:bg-gray-900 [&::-moz-range-thumb]:bg-current',
+    ring: '[&::-webkit-slider-thumb]:ring-2 [&::-webkit-slider-thumb]:ring-current',
+    size: {
+      '2xs': '[&::-webkit-slider-thumb]:h-1.5 [&::-moz-range-thumb]:h-1.5 [&::-webkit-slider-thumb]:w-1.5 [&::-moz-range-thumb]:w-1.5 [&::-webkit-slider-thumb]:mt-[-2.5px] [&::-moz-range-thumb]:mt-[-2.5px]',
+      xs: '[&::-webkit-slider-thumb]:h-2 [&::-moz-range-thumb]:h-2 [&::-webkit-slider-thumb]:w-2 [&::-moz-range-thumb]:w-2 [&::-webkit-slider-thumb]:mt-[-3px] [&::-moz-range-thumb]:mt-[-3px]',
+      sm: '[&::-webkit-slider-thumb]:h-3 [&::-moz-range-thumb]:h-3 [&::-webkit-slider-thumb]:w-3 [&::-moz-range-thumb]:w-3 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      md: '[&::-webkit-slider-thumb]:h-4 [&::-moz-range-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-moz-range-thumb]:w-4 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      lg: '[&::-webkit-slider-thumb]:h-5 [&::-moz-range-thumb]:h-5 [&::-webkit-slider-thumb]:w-5 [&::-moz-range-thumb]:w-5 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      xl: '[&::-webkit-slider-thumb]:h-6 [&::-moz-range-thumb]:h-6 [&::-webkit-slider-thumb]:w-6 [&::-moz-range-thumb]:w-6 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1',
+      '2xl': '[&::-webkit-slider-thumb]:h-7 [&::-moz-range-thumb]:h-7 [&::-webkit-slider-thumb]:w-7 [&::-moz-range-thumb]:w-7 [&::-webkit-slider-thumb]:-mt-1 [&::-moz-range-thumb]:-mt-1'
+    }
+  },
+  track: {
+    base: '[&::-webkit-slider-runnable-track]:group-disabled:bg-opacity-50 [&::-moz-range-track]:group-disabled:bg-opacity-50',
+    background: '[&::-webkit-slider-runnable-track]:bg-gray-200 [&::-moz-range-track]:bg-gray-200 [&::-webkit-slider-runnable-track]:dark:bg-gray-700 [&::-moz-range-track]:dark:bg-gray-700',
+    rounded: '[&::-webkit-slider-runnable-track]:rounded-lg [&::-moz-range-track]:rounded-lg',
+    size: {
+      '2xs': '[&::-webkit-slider-runnable-track]:h-px [&::-moz-range-track]:h-px',
+      xs: '[&::-webkit-slider-runnable-track]:h-0.5 [&::-moz-range-track]:h-0.5',
+      sm: '[&::-webkit-slider-runnable-track]:h-1 [&::-moz-range-track]:h-1',
+      md: '[&::-webkit-slider-runnable-track]:h-2 [&::-moz-range-track]:h-2',
+      lg: '[&::-webkit-slider-runnable-track]:h-3 [&::-moz-range-track]:h-3',
+      xl: '[&::-webkit-slider-runnable-track]:h-4 [&::-moz-range-track]:h-4',
+      '2xl': '[&::-webkit-slider-runnable-track]:h-5 [&::-moz-range-track]:h-5'
+    }
+  },
+  size: {
+    '2xs': 'h-1.5',
+    xs: 'h-2',
+    sm: 'h-3',
+    md: 'h-4',
+    lg: 'h-5',
+    xl: 'h-6',
+    '2xl': 'h-7'
+  },
+  default: {
+    size: 'md',
+    color: 'primary'
+  }
+}

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

@@ -0,0 +1,13 @@
+import input from './input'
+
+export default {
+  ...input,
+  placeholder: 'text-gray-900 dark:text-white',
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline',
+    loadingIcon: 'i-heroicons-arrow-path-20-solid',
+    trailingIcon: 'i-heroicons-chevron-down-20-solid'
+  }
+}

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

@@ -0,0 +1,62 @@
+import _popperArrow from '../_popperArrow'
+
+export default {
+  container: 'z-20 group',
+  width: 'w-full',
+  height: 'max-h-60',
+  base: 'relative focus:outline-none overflow-y-auto scroll-py-1',
+  background: 'bg-white dark:bg-gray-800',
+  shadow: 'shadow-lg',
+  rounded: 'rounded-md',
+  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',
+  option: {
+    base: 'cursor-default select-none relative flex items-center justify-between gap-1',
+    rounded: 'rounded-md',
+    padding: 'px-2 py-1.5',
+    size: 'text-sm',
+    color: 'text-gray-900 dark:text-white',
+    container: 'flex items-center gap-2 min-w-0',
+    active: 'bg-gray-100 dark:bg-gray-900',
+    inactive: '',
+    selected: 'pe-7',
+    disabled: 'cursor-not-allowed opacity-50',
+    empty: 'text-sm text-gray-400 dark:text-gray-500 px-2 py-1.5',
+    icon: {
+      base: 'flex-shrink-0 h-4 w-4',
+      active: 'text-gray-900 dark:text-white',
+      inactive: 'text-gray-400 dark:text-gray-500'
+    },
+    selectedIcon: {
+      wrapper: 'absolute inset-y-0 end-0 flex items-center',
+      padding: 'pe-2',
+      base: 'h-4 w-4 text-gray-900 dark:text-white flex-shrink-0'
+    },
+    avatar: {
+      base: 'flex-shrink-0',
+      size: '3xs'
+    },
+    chip: {
+      base: 'flex-shrink-0 w-2 h-2 mx-1 rounded-full'
+    }
+  },
+  // Syntax for `<Transition>` component https://vuejs.org/guide/built-ins/transition.html#css-based-transitions
+  transition: {
+    leaveActiveClass: 'transition ease-in duration-100',
+    leaveFromClass: 'opacity-100',
+    leaveToClass: 'opacity-0'
+  },
+  popper: {
+    placement: 'bottom-end'
+  },
+  default: {
+    selectedIcon: 'i-heroicons-check-20-solid',
+    clearOnClose: false
+  },
+  arrow: {
+    ..._popperArrow,
+    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

@@ -0,0 +1,10 @@
+import input from './input'
+
+export default {
+  ...input,
+  default: {
+    size: 'sm',
+    color: 'white',
+    variant: 'outline'
+  }
+}

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

@@ -0,0 +1,60 @@
+export default {
+  base: 'relative inline-flex flex-shrink-0 border-2 border-transparent disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none',
+  rounded: 'rounded-full',
+  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',
+  active: 'bg-{color}-500 dark:bg-{color}-400',
+  inactive: 'bg-gray-200 dark:bg-gray-700',
+  size: {
+    '2xs': 'h-3 w-5',
+    xs: 'h-3.5 w-6',
+    sm: 'h-4 w-7',
+    md: 'h-5 w-9',
+    lg: 'h-6 w-11',
+    xl: 'h-7 w-[3.25rem]',
+    '2xl': 'h-8 w-[3.75rem]'
+  },
+  container: {
+    base: 'pointer-events-none relative inline-block rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
+    active: {
+      '2xs': 'translate-x-2 rtl:-translate-x-2',
+      xs: 'translate-x-2.5 rtl:-translate-x-2.5',
+      sm: 'translate-x-3 rtl:-translate-x-3',
+      md: 'translate-x-4 rtl:-translate-x-4',
+      lg: 'translate-x-5 rtl:-translate-x-5',
+      xl: 'translate-x-6 rtl:-translate-x-6',
+      '2xl': 'translate-x-7 rtl:-translate-x-7'
+    },
+    inactive: 'translate-x-0 rtl:-translate-x-0',
+    size: {
+      '2xs': 'h-2 w-2',
+      xs: 'h-2.5 w-2.5',
+      sm: 'h-3 w-3',
+      md: 'h-4 w-4',
+      lg: 'h-5 w-5',
+      xl: 'h-6 w-6',
+      '2xl': 'h-7 w-7'
+    }
+  },
+  icon: {
+    base: 'absolute inset-0 h-full w-full flex items-center justify-center transition-opacity',
+    active: 'opacity-100 ease-in duration-200',
+    inactive: 'opacity-0 ease-out duration-100',
+    size: {
+      '2xs': 'h-2 w-2',
+      xs: 'h-2 w-2',
+      sm: 'h-2 w-2',
+      md: 'h-3 w-3',
+      lg: 'h-4 w-4',
+      xl: 'h-5 w-5',
+      '2xl': 'h-6 w-6'
+    },
+    on: 'text-{color}-500 dark:text-{color}-400',
+    off: 'text-gray-400 dark:text-gray-500'
+  },
+  default: {
+    onIcon: null,
+    offIcon: null,
+    color: 'primary',
+    size: 'md'
+  }
+}