feat(Checkbox): new component (#67)

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

playground/app.vue

@@ -13,6 +13,7 @@ const components = [
   'badge',
   'button',
   'card',
+  'checkbox',
   'chip',
   'collapsible',
   'form',

playground/components/FormNestedExample.vue

@@ -47,8 +47,7 @@ function onError (event: any) {
     </UFormField>
 
     <div>
-      <input id="check" v-model="checked" type="checkbox" name="check" @change="state.nested = {}">
-      <label for="check"> Check me </label>
+      <UCheckbox v-model="checked" name="check" label="Check me" @change="state.nested = {}" />
     </div>
 
     <UForm v-if="checked && state.nested" :state="state.nested" :schema="nestedSchema">

playground/pages/badge.vue

@@ -26,7 +26,7 @@ const sizes = Object.keys(theme.variants.size)
     <div class="flex items-center gap-2">
       <UBadge label="Badge" color="black" />
     </div>
-    <div class="flex items-center gap-2 -ml-[56px]">
+    <div class="flex items-center gap-2 ml-[-56px]">
       <UBadge v-for="size in sizes" :key="size" label="Badge" :size="(size as any)" />
     </div>
   </div>

playground/pages/button.vue

@@ -59,13 +59,13 @@ const sizes = Object.keys(theme.variants.size)
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" />
       <UButton icon="i-heroicons-rocket-launch" label="Button" color="black" variant="link" />
     </div>
-    <div class="flex items-center gap-2 -ml-[129px]">
+    <div class="flex items-center gap-2 ml-[-129px]">
       <UButton v-for="size in sizes" :key="size" label="Button" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-2 -ml-[171px]">
+    <div class="flex items-center gap-2 ml-[-171px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" label="Button" :size="(size as any)" />
     </div>
-    <div class="flex items-center gap-2 -ml-[159px]">
+    <div class="flex items-center gap-2 ml-[-159px]">
       <UButton
         v-for="size in sizes"
         :key="size"
@@ -75,7 +75,7 @@ const sizes = Object.keys(theme.variants.size)
         :size="(size as any)"
       />
     </div>
-    <div class="flex items-center gap-2 -ml-[67px]">
+    <div class="flex items-center gap-2 ml-[-67px]">
       <UButton v-for="size in sizes" :key="size" icon="i-heroicons-rocket-launch" :size="(size as any)" />
     </div>
     <div class="flex items-center gap-2">

playground/pages/checkbox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import theme from '#build/ui/checkbox'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 ml-[-272px]">
+      <UCheckbox label="Normal" />
+      <UCheckbox label="Checked" :model-value="true" />
+      <UCheckbox label="Indeterminate" indeterminate />
+      <UCheckbox label="Default checked" default-checked />
+      <UCheckbox label="Required" required />
+      <UCheckbox label="Disabled" disabled />
+      <UCheckbox label="Custom icon" color="red" icon="i-heroicons-heart-solid" :model-value="true" />
+    </div>
+    <div class="flex items-center gap-4 ml-[-156px]">
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" :size="(size as any)" />
+    </div>
+    <div class="flex items-center gap-4">
+      <UCheckbox v-for="size in sizes" :key="size" label="Check me" description="This is a description" :size="(size as any)" />
+    </div>
+  </div>
+</template>

playground/pages/chip.vue

@@ -29,7 +29,7 @@ const items = [{
       </UChip>
     </div>
 
-    <div class="flex items-center gap-2 -ml-[84px]">
+    <div class="flex items-center gap-2 ml-[-84px]">
       <UChip v-for="size in sizes" :key="size" :size="(size as any)" inset text="1">
         <UAvatar src="https://avatars.githubusercontent.com/u/739984?v=4" :size="(size as any)" />
       </UChip>

playground/pages/form-field.vue

@@ -13,7 +13,7 @@ const feedbacks = [
 
 <template>
   <div class="flex flex-col items-center gap-4">
-    <div class="flex flex-col gap-4 -ml-[258px]">
+    <div class="flex flex-col gap-4 ml-[-258px]">
       <div v-for="(feedback, count) in feedbacks" :key="count" class="flex items-center">
         <UFormField v-bind="feedback" label="Email" name="email">
           <UInput placeholder="john@lennon.com" />
@@ -32,5 +32,18 @@ const feedbacks = [
         <UInput placeholder="john@lennon.com" />
       </UFormField>
     </div>
+
+    <div class="flex items-center gap-4">
+      <UFormField
+        v-for="size in sizes"
+        :key="size"
+        :size="(size as any)"
+        label="Email"
+        description="This is a description"
+        name="email"
+      >
+        <UInput placeholder="john@lennon.com" />
+      </UFormField>
+    </div>
   </div>
 </template>

playground/pages/form.vue

@@ -5,15 +5,17 @@ import type { Form, FormSubmitEvent } from '#ui/types/form'
 type User = {
   email: string
   password: string
+  tos: boolean
 }
 
-const state = ref<User>({ email: '', password: '' })
-const state2 = ref<User>({ email: '', password: '' })
-const state3 = ref<User>({ email: '', password: '' })
+const state = reactive<Partial<User>>({})
+const state2 = reactive<Partial<User>>({})
+const state3 = reactive<Partial<User>>({})
 
 const schema = z.object({
   email: z.string().email(),
-  password: z.string().min(8)
+  password: z.string().min(8),
+  tos: z.literal(true)
 })
 
 const disabledForm = ref<Form<User>>()
@@ -40,6 +42,10 @@ function onSubmit (event: FormSubmitEvent<User>) {
           <UInput v-model="state.password" type="password" />
         </UFormField>
 
+        <UFormField name="tos">
+          <UCheckbox v-model="state.tos" label="I accept the terms and conditions" />
+        </UFormField>
+
         <div>
           <UButton color="gray" type="submit">
             Submit
@@ -95,6 +101,10 @@ function onSubmit (event: FormSubmitEvent<User>) {
           <UInput v-model="state3.password" type="password" />
         </UFormField>
 
+        <UFormField name="tos">
+          <UCheckbox v-model="state3.tos" label="I accept the terms and conditions" />
+        </UFormField>
+
         <div>
           <UButton color="gray" type="submit" :disabled="disabledForm?.disabled">
             Submit

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-[258px]">
+    <div class="flex flex-col gap-4 ml-[-120px]">
       <UInput placeholder="Search..." autofocus />
       <UInput placeholder="Search..." color="gray" />
       <UInput placeholder="Search..." color="primary" />

playground/pages/switch.vue

@@ -13,10 +13,10 @@ const checked = ref(false)
     <div>
       <USwitch v-model:checked="checked" disabled />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <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)" />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch
         v-for="size in sizes"
         :key="size"
@@ -26,7 +26,7 @@ const checked = ref(false)
         checked-icon="i-heroicons-check-20-solid"
       />
     </div>
-    <div class="flex items-center gap-2 ml-[-36px]">
+    <div class="flex items-center gap-2 ml-[-64px]">
       <USwitch
         v-for="size in sizes"
         :key="size"

playground/pages/tooltip.vue

@@ -4,7 +4,7 @@
       <UAvatar text="T" />
     </UTooltip>
 
-    <div class="flex items-center gap-2 -ml-[20px]">
+    <div class="flex items-center gap-2 ml-[-20px]">
       <UTooltip text="Left" :shortcuts="['⌘', 'L']" :content="{ side: 'left' }" arrow>
         <UAvatar text="L" />
       </UTooltip>