feat(Switch): add label and description props (#60)

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

playground/pages/input.vue

@@ -6,7 +6,7 @@ const sizes = Object.keys(theme.variants.size)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 ml-[-120px]">
+    <div class="flex flex-col gap-4 ml-[-169px]">
       <UInput placeholder="Search..." autofocus />
       <UInput placeholder="Search..." color="gray" />
       <UInput placeholder="Search..." color="primary" />
@@ -20,7 +20,7 @@ const sizes = Object.keys(theme.variants.size)
       <UInput loading trailing placeholder="Search..." />
       <UInput loading trailing-icon="i-heroicons-magnifying-glass" placeholder="Search..." />
     </div>
-    <div class="flex items-center gap-4">
+    <div class="flex items-center gap-4 ml-[-76px]">
       <UInput
         v-for="size in sizes"
         :key="size"

playground/pages/switch.vue

@@ -2,40 +2,49 @@
 import theme from '#build/ui/switch'
 
 const sizes = Object.keys(theme.variants.size)
-const checked = ref(false)
 </script>
 
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col items-center gap-4">
-    <div>
+    <div class="flex flex-col gap-4 ml-[-348px]">
-      <USwitch v-model:checked="checked" />
+      <USwitch label="Normal" />
+      <USwitch label="Checked" :checked="true" />
+      <USwitch label="Default checked" default-checked />
+      <USwitch label="Required" required />
+      <USwitch label="Disabled" disabled />
     </div>
-    <div>
+    <div class="flex items-center gap-4 ml-[-150px]">
-      <USwitch v-model:checked="checked" disabled />
+      <USwitch v-for="size in sizes" :key="size" :size="(size as any)" label="Switch me" />
     </div>
-    <div class="flex items-center gap-2 ml-[-64px]">
+    <div class="flex items-center gap-4 ml-[-150px]">
-      <USwitch v-for="size in sizes" :key="size" v-model:checked="checked" :size="(size as any)" />
-    </div>
-    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
-        v-model:checked="checked"
         :size="(size as any)"
+        label="Switch me"
         unchecked-icon="i-heroicons-x-mark-20-solid"
         checked-icon="i-heroicons-check-20-solid"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-64px]">
+    <div class="flex items-center gap-4 ml-[-150px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
-        v-model:checked="checked"
         :size="(size as any)"
+        label="Switch me"
         unchecked-icon="i-heroicons-x-mark-20-solid"
         checked-icon="i-heroicons-check-20-solid"
         loading
       />
     </div>
+    <div class="flex items-center gap-4">
+      <USwitch
+        v-for="size in sizes"
+        :key="size"
+        :size="(size as any)"
+        label="Switch me"
+        description="This is a description"
+      />
+    </div>
   </div>
 </template>

playground/pages/textarea.vue

@@ -6,14 +6,12 @@ const sizes = Object.keys(theme.variants.size)
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex gap-4">
+    <div class="flex flex-col gap-4">
-      <UTextarea />
+      <UTextarea placeholder="Search..." />
-    </div>
-    <div class="flex gap-4">
-      <UTextarea placeholder="Search..." autofocus />
       <UTextarea placeholder="Search..." color="gray" />
       <UTextarea placeholder="Search..." color="primary" />
       <UTextarea placeholder="Search..." disabled />
+      <UTextarea placeholder="You can't see me" variant="none" />
     </div>
     <div class="flex items-center gap-4">
       <UTextarea
@@ -29,8 +27,5 @@ const sizes = Object.keys(theme.variants.size)
       <UTextarea autoresize />
       <UTextarea autoresize :maxrows="5" :rows="1" />
     </div>
-    <div class="flex gap-4">
-      <UTextarea variant="none" placeholder="You can't see me" />
-    </div>
   </div>
 </template>

src/runtime/components/Switch.vue

@@ -21,18 +21,25 @@ export interface SwitchProps extends Omit<SwitchRootProps, 'asChild'> {
   loadingIcon?: IconProps['name']
   checkedIcon?: IconProps['name']
   uncheckedIcon?: IconProps['name']
+  label?: string
+  description?: string
   class?: any
   ui?: Partial<typeof switchTv.slots>
 }
 
+export interface CheckboxSlots {
+  label(props: { label?: string }): any
+  description(props: { description?: string }): any
+}
+
 export interface SwitchEmits extends SwitchRootEmits {}
 </script>
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits, Label } from 'radix-vue'
 import { reactivePick } from '@vueuse/core'
-import { useAppConfig, useFormField } from '#imports'
+import { useId, useAppConfig, useFormField } from '#imports'
 
 const props = defineProps<SwitchProps>()
 const emits = defineEmits<SwitchEmits>()
@@ -40,12 +47,15 @@ const emits = defineEmits<SwitchEmits>()
 const appConfig = useAppConfig()
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultChecked', 'checked', 'required', 'value'), emits)
 
-const { inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const { inputId: _inputId, emitFormChange, size, color, name, disabled } = useFormField<SwitchProps>(props)
+const inputId = _inputId.value ?? useId()
 
 const ui = computed(() => tv({ extend: switchTv, slots: props.ui })({
   color: color.value,
   size: size.value,
-  loading: props.loading
+  required: props.required,
+  loading: props.loading,
+  disabled: disabled.value || props.loading
 }))
 
 // FIXME: I think there's a race condition between this and the v-model event.
@@ -57,20 +67,36 @@ async function onChecked() {
 </script>
 
 <template>
-  <SwitchRoot
+  <div :class="ui.root({ class: props.class })">
-    :id="inputId"
+    <div :class="ui.container()">
-    :name="name"
+      <SwitchRoot
-    :disabled="disabled || loading"
+        :id="inputId"
-    v-bind="rootProps"
+        :name="name"
-    :class="ui.root({ class: props.class })"
+        :disabled="disabled || loading"
-    @update:checked="onChecked"
+        v-bind="rootProps"
-  >
+        :class="ui.base()"
-    <SwitchThumb :class="ui.thumb()">
+        @update:checked="onChecked"
-      <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />
+      >
-      <template v-else>
+        <SwitchThumb :class="ui.thumb()">
-        <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ checked: true })" />
+          <UIcon v-if="loading" :name="loadingIcon || appConfig.ui.icons.loading" :class="ui.icon({ checked: true, unchecked: true })" />
-        <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ unchecked: true })" />
+          <template v-else>
-      </template>
+            <UIcon v-if="checkedIcon" :name="checkedIcon" :class="ui.icon({ checked: true })" />
-    </SwitchThumb>
+            <UIcon v-if="uncheckedIcon" :name="uncheckedIcon" :class="ui.icon({ unchecked: true })" />
-  </SwitchRoot>
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="(label || $slots.label) || (description || $slots.description)" :class="ui.wrapper()">
+      <Label v-if="label || $slots.label" :for="inputId" :class="ui.label()">
+        <slot name="label" :label="label">
+          {{ label }}
+        </slot>
+      </Label>
+      <p v-if="description || $slots.description" :class="ui.description()">
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </p>
+    </div>
+  </div>
 </template>

src/theme/checkbox.ts

@@ -6,7 +6,7 @@ export default (config: { colors: string[] }) => ({
     wrapper: 'ms-2',
     indicator: 'flex',
     icon: 'size-full',
-    label: 'font-medium text-gray-700 dark:text-gray-200',
+    label: 'block font-medium text-gray-700 dark:text-gray-200',
     description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {

src/theme/switch.ts

@@ -1,43 +1,60 @@
 export default (config: { colors: string[] }) => ({
   slots: {
-    root: 'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 disabled:cursor-not-allowed disabled:opacity-75 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
+    root: 'relative flex items-start',
+    base: 'peer inline-flex shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
+    container: 'flex items-center',
     thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
-    icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0'
+    icon: 'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 transition-[color,opacity] duration-200 opacity-0',
+    wrapper: 'ms-2',
+    label: 'block font-medium text-gray-700 dark:text-gray-200',
+    description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {
     color: Object.fromEntries(config.colors.map((color: string) => [color, {
-      root: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
+      base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
       icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
     }])),
     size: {
       '2xs': {
-        root: 'h-3 w-5',
+        base: 'h-3 w-5',
+        container: 'h-4',
         thumb: 'size-2 data-[state=checked]:translate-x-2',
+        wrapper: 'text-xs',
         icon: 'size-1'
       },
       'xs': {
-        root: 'h-4 w-7',
+        base: 'h-4 w-7',
+        container: 'h-4',
         thumb: 'size-3 data-[state=checked]:translate-x-3',
+        wrapper: 'text-xs',
         icon: 'size-2'
       },
       'sm': {
-        root: 'h-5 w-9',
+        base: 'h-5 w-9',
+        container: 'h-5',
         thumb: 'size-4 data-[state=checked]:translate-x-4',
+        wrapper: 'text-sm',
         icon: 'size-3'
       },
       'md': {
-        root: 'h-6 w-11',
+        base: 'h-6 w-11',
+        container: 'h-5',
         thumb: 'size-5 data-[state=checked]:translate-x-5',
+        wrapper: 'text-sm',
         icon: 'size-4'
       },
       'lg': {
-        root: 'h-7 w-[52px]',
+        base: 'h-7 w-[52px]',
+        container: 'h-6',
         thumb: 'size-6 data-[state=checked]:translate-x-6',
+        wrapper: 'text-base',
         icon: 'size-5'
       },
       'xl': {
-        root: 'h-8 w-[60px]',
+        base: 'h-8 w-[60px]',
+        container: 'h-6',
         thumb: 'size-7 data-[state=checked]:translate-x-7',
+        wrapper: 'text-base',
         icon: 'size-6'
       }
     },
@@ -55,6 +72,18 @@ export default (config: { colors: string[] }) => ({
       true: {
         icon: 'animate-spin'
       }
+    },
+    required: {
+      true: {
+        label: 'after:content-[\'*\'] after:ms-0.5 after:text-red-500 dark:after:text-red-400'
+      }
+    },
+    disabled: {
+      true: {
+        base: 'cursor-not-allowed opacity-75',
+        label: 'cursor-not-allowed opacity-75',
+        description: 'cursor-not-allowed opacity-75'
+      }
     }
   },
   defaultVariants: {