feat(Radio/Checkbox/Toggle)!: handle color prop for form elements (#323)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/colors.ts

@@ -103,6 +103,47 @@ const safelistByComponent = {
     pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
     variants: ['focus']
   }],
+  radio: (colorsAsRegex) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark:focus-visible']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    variants: ['focus-visible']
+  }],
+  checkbox: (colorsAsRegex) => [{
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark:focus-visible']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    variants: ['focus-visible']
+  }],
+  toggle: (colorsAsRegex) => [{
+    pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`bg-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-400`),
+    variants: ['dark']
+  }, {
+    pattern: new RegExp(`text-(${colorsAsRegex})-500`)
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-400`),
+    variants: ['dark:focus-visible']
+  }, {
+    pattern: new RegExp(`ring-(${colorsAsRegex})-500`),
+    variants: ['focus-visible']
+  }],
   range: (colorsAsRegex) => [{
     pattern: new RegExp(`bg-(${colorsAsRegex})-400`),
     variants: ['dark']
@@ -144,7 +185,7 @@ const colorsAsRegex = (colors: string[]): string => colors.join('|')
 export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[]
 
 export const generateSafelist = (colors: string[]) => {
-  const safelist = ['avatar', 'badge', 'button', 'input', 'range', 'notification'].flatMap(component => safelistByComponent[component](colorsAsRegex(colors)))
+  const safelist = Object.keys(safelistByComponent).flatMap(component => safelistByComponent[component](colorsAsRegex(colors)))
 
   return [
     ...safelist,

src/runtime/app.config.ts

@@ -473,24 +473,40 @@ const selectMenu = {
 
 const radio = {
   wrapper: 'relative flex items-start',
-  base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  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: 'font-medium text-gray-700 dark:text-gray-200',
   required: 'text-red-500 dark:text-red-400',
-  help: 'text-gray-500 dark:text-gray-400'
+  help: 'text-gray-500 dark:text-gray-400',
+  default: {
+    color: 'primary'
+  }
 }
 
 const checkbox = {
   wrapper: 'relative flex items-start',
-  base: 'h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent',
+  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: 'font-medium text-gray-700 dark:text-gray-200',
   required: 'text-red-500 dark:text-red-400',
-  help: 'text-gray-500 dark:text-gray-400'
+  help: 'text-gray-500 dark:text-gray-400',
+  default: {
+    color: 'primary'
+  }
 }
 
 const toggle = {
-  base: 'relative inline-flex flex-shrink-0 h-5 w-9 border-2 border-transparent rounded-full cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900',
-  active: 'bg-primary-500 dark:bg-primary-400',
+  base: 'relative inline-flex h-5 w-9 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',
   container: {
     base: 'pointer-events-none relative inline-block h-4 w-4 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200',
@@ -501,12 +517,13 @@ const toggle = {
     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',
-    on: 'h-3 w-3 text-primary-500 dark:text-primary-400',
+    on: 'h-3 w-3 text-{color}-500 dark:text-{color}-400',
     off: 'h-3 w-3 text-gray-400 dark:text-gray-500'
   },
   default: {
     onIcon: null,
-    offIcon: null
+    offIcon: null,
+    color: 'primary'
   }
 }
 

src/runtime/components/forms/Checkbox.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center h-5">
       <input
         :id="name"
-        v-model="isChecked"
+        v-model="toggle"
         :name="name"
         :required="required"
         :value="value"
@@ -12,10 +12,8 @@
         :indeterminate="indeterminate"
         type="checkbox"
         class="form-checkbox"
-        :class="[ui.base, ui.rounded]"
+        :class="inputClass"
         v-bind="$attrs"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
       >
     </div>
     <div v-if="label || $slots.label" class="ml-3 text-sm">
@@ -34,6 +32,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -80,19 +79,26 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    color: {
+      type: String,
+      default: () => appConfig.ui.checkbox.default.color,
+      validator (value: string) {
+        return appConfig.ui.colors.includes(value)
+      }
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.checkbox>>,
       default: () => appConfig.ui.checkbox
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue'],
   setup (props, { emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
     const ui = computed<Partial<typeof appConfig.ui.checkbox>>(() => defu({}, props.ui, appConfig.ui.checkbox))
 
-    const isChecked = computed({
+    const toggle = computed({
       get () {
         return props.modelValue
       },
@@ -101,10 +107,22 @@ export default defineComponent({
       }
     })
 
+    const inputClass = computed(() => {
+      return classNames(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.background,
+        ui.value.border,
+        ui.value.ring.replaceAll('{color}', props.color),
+        ui.value.color.replaceAll('{color}', props.color)
+      )
+    })
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      isChecked
+      toggle,
+      inputClass
     }
   }
 })

src/runtime/components/forms/Input.vue

@@ -13,8 +13,6 @@
       :class="inputClass"
       v-bind="$attrs"
       @input="onInput"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
     >
     <slot />
 
@@ -140,7 +138,7 @@ export default defineComponent({
       default: () => appConfig.ui.input
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue'],
   setup (props, { emit, slots }) {
     // TODO: Remove
     const appConfig = useAppConfig()

src/runtime/components/forms/Radio.vue

@@ -3,17 +3,15 @@
     <div class="flex items-center h-5">
       <input
         :id="`${name}-${value}`"
-        v-model="isChecked"
+        v-model="pick"
         :name="name"
         :required="required"
         :value="value"
         :disabled="disabled"
         type="radio"
         class="form-radio"
-        :class="[ui.base]"
+        :class="inputClass"
         v-bind="$attrs"
-        @focus="$emit('focus', $event)"
-        @blur="$emit('blur', $event)"
       >
     </div>
     <div v-if="label || $slots.label" class="ml-3 text-sm">
@@ -32,6 +30,7 @@
 import { computed, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { defu } from 'defu'
+import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -70,19 +69,26 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    color: {
+      type: String,
+      default: () => appConfig.ui.radio.default.color,
+      validator (value: string) {
+        return appConfig.ui.colors.includes(value)
+      }
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.radio>>,
       default: () => appConfig.ui.radio
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue'],
   setup (props, { emit }) {
     // TODO: Remove
     const appConfig = useAppConfig()
 
     const ui = computed<Partial<typeof appConfig.ui.radio>>(() => defu({}, props.ui, appConfig.ui.radio))
 
-    const isChecked = computed({
+    const pick = computed({
       get () {
         return props.modelValue
       },
@@ -91,10 +97,21 @@ export default defineComponent({
       }
     })
 
+    const inputClass = computed(() => {
+      return classNames(
+        ui.value.base,
+        ui.value.background,
+        ui.value.border,
+        ui.value.ring.replaceAll('{color}', props.color),
+        ui.value.color.replaceAll('{color}', props.color)
+      )
+    })
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      isChecked
+      pick,
+      inputClass
     }
   }
 })

src/runtime/components/forms/Select.vue

@@ -165,7 +165,7 @@ export default defineComponent({
       default: () => appConfig.ui.select
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue'],
   setup (props, { emit, slots }) {
     // TODO: Remove
     const appConfig = useAppConfig()

src/runtime/components/forms/Textarea.vue

@@ -13,8 +13,6 @@
       :class="textareaClass"
       v-bind="$attrs"
       @input="onInput"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
     />
   </div>
 </template>
@@ -103,7 +101,7 @@ export default defineComponent({
       default: () => appConfig.ui.textarea
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue'],
   setup (props, { emit }) {
     const textarea = ref<HTMLTextAreaElement | null>(null)
 

src/runtime/components/forms/Toggle.vue

@@ -3,14 +3,14 @@
     v-model="active"
     :name="name"
     :disabled="disabled"
-    :class="[active ? ui.active : ui.inactive, ui.base]"
+    :class="switchClass"
   >
     <span :class="[active ? ui.container.active : ui.container.inactive, ui.container.base]">
       <span v-if="onIcon" :class="[active ? ui.icon.active : ui.icon.inactive, ui.icon.base]" aria-hidden="true">
-        <UIcon :name="onIcon" :class="ui.icon.on" />
+        <UIcon :name="onIcon" :class="onIconClass" />
       </span>
       <span v-if="offIcon" :class="[active ? ui.icon.inactive : ui.icon.active, ui.icon.base]" aria-hidden="true">
-        <UIcon :name="offIcon" :class="ui.icon.off" />
+        <UIcon :name="offIcon" :class="offIconClass" />
       </span>
     </span>
   </Switch>
@@ -22,6 +22,7 @@ import type { PropType } from 'vue'
 import { defu } from 'defu'
 import { Switch } from '@headlessui/vue'
 import UIcon from '../elements/Icon.vue'
+import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error
@@ -56,6 +57,13 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.toggle.default.offIcon
     },
+    color: {
+      type: String,
+      default: () => appConfig.ui.toggle.default.color,
+      validator (value: string) {
+        return appConfig.ui.colors.includes(value)
+      }
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.toggle>>,
       default: () => appConfig.ui.toggle
@@ -77,10 +85,34 @@ export default defineComponent({
       }
     })
 
+    const switchClass = computed(()=>{
+      return classNames(
+        ui.value.base,
+        ui.value.rounded,
+        ui.value.ring.replaceAll('{color}', props.color),
+        (active.value ? ui.value.active : ui.value.inactive).replaceAll('{color}', props.color)
+      )
+    })
+
+    const onIconClass = computed(()=>{
+      return classNames(
+        ui.value.icon.on.replaceAll('{color}', props.color)
+      )
+    })
+
+    const offIconClass = computed(()=>{
+      return classNames(
+        ui.value.icon.off.replaceAll('{color}', props.color)
+      )
+    })
+
     return {
       // eslint-disable-next-line vue/no-dupe-keys
       ui,
-      active
+      active,
+      switchClass,
+      onIconClass,
+      offIconClass
     }
   }
 })

src/runtime/components/navigation/CommandPalette.vue

@@ -78,8 +78,8 @@ import type { Group, Command } from '../../types/command-palette'
 import UIcon from '../elements/Icon.vue'
 import UButton from '../elements/Button.vue'
 import type { Button } from '../../types/button'
-import { classNames } from '../../utils'
 import CommandPaletteGroup from './CommandPaletteGroup.vue'
+import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'
 // TODO: Remove
 // @ts-expect-error