Checkbox

src/App.vue

@@ -1,5 +1,46 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <CheckboxInput
+      id="1"
+      name="checkboxGroup"
+      value="option1"
+      :checked="selectedOptions.includes('option1')"
+      :disabled="isDisabled"
+      @change="handleCheckboxChange"
+    >
+      <template #label="{ label }">
+        <span class="font-semibold">{{ label }}</span>
+        <span class="text-gray-500">(Option 1)</span>
+      </template>
+    </CheckboxInput>
+
+    <CheckboxInput
+      id="checkbox2"
+      name="checkboxGroup"
+      value="option2"
+      :checked="selectedOptions.includes('option2')"
+      :disabled="isDisabled"
+      @change="handleCheckboxChange"
+    >
+      <template #label="{ label }">
+        <span class="font-semibold">{{ label }}</span>
+        <span class="text-gray-500">(Option 2)</span>
+      </template>
+    </CheckboxInput>
+
+    <p v-if="hint">{{ hint }}</p>
+  </div>
 </template>
+
+<script setup lang="ts">
+import CheckboxInput from './components/DxhCheckbox.vue'
+import { ref } from 'vue'
+
+const selectedOptions = ref<string[]>([])
+const isDisabled = ref(false)
+const hint = ref('This is a hint.')
+
+const handleCheckboxChange = (value) => {
+  console.log('Selected Options:', value.target.checked)
+}
+</script>

src/components/DxhCheckbox.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex items-center space-x-1" data-test="checkbox">
+    <input
+      :id="id"
+      type="checkbox"
+      :name="name"
+      :value="value"
+      :checked="defaultChecked ? defaultChecked : checked"
+      :disabled="disabled"
+      @change="handleChange"
+      data-test="checkbox-input"
+    />
+    <label :for="id" v-if="label" data-test="checkbox-label">
+      <slot name="label" :label="label">{{ label }}</slot>
+    </label>
+  </div>
+  <p v-if="hint" data-test="checkbox-hint">{{ hint }}</p>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+
+defineProps<{
+  id: string
+  name?: string
+  value?: string
+  label?: string
+  checked: boolean
+  defaultChecked?: boolean
+  hint?: string
+  disabled?: boolean
+}>()
+
+const emit = defineEmits(['change'])
+
+const handleChange = (event: any) => {
+  emit('change', event)
+}
+</script>

src/components/__tests__/DxhCheckbox.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhCheckbox from '../DxhCheckbox.vue'
+
+describe('DxhCheckbox.vue', () => {
+  it('renders a checkbox with default props', () => {
+    const wrapper = mount(DxhCheckbox)
+
+    expect(wrapper.find('[data-test="checkbox"]').exists()).toBe(true)
+    expect(wrapper.props('id')).toBeUndefined()
+    expect(wrapper.props('name')).toBeUndefined()
+    expect(wrapper.props('value')).toBeUndefined()
+    expect(wrapper.props('label')).toBeUndefined()
+    expect(wrapper.props('checked')).toBe(false)
+    expect(wrapper.props('hint')).toBeUndefined()
+    expect(wrapper.props('disabled')).toBe(false)
+  })
+
+  it('renders a checkbox with provided props', () => {
+    const wrapper = mount(DxhCheckbox, {
+      props: {
+        id: '1',
+        name: 'example',
+        value: 'example-value',
+        label: 'Example Label',
+        checked: true,
+        defaultChecked: false,
+        hint: 'Example Hint',
+        disabled: true
+      }
+    })
+
+    expect(wrapper.find('[data-test="checkbox"]').exists()).toBe(true)
+    expect(wrapper.props('id')).toBe('1')
+    expect(wrapper.props('name')).toBe('example')
+    expect(wrapper.props('value')).toBe('example-value')
+    expect(wrapper.props('label')).toBe('Example Label')
+    expect(wrapper.props('checked')).toBe(true)
+    expect(wrapper.props('defaultChecked')).toBe(false)
+    expect(wrapper.props('hint')).toBe('Example Hint')
+    expect(wrapper.props('disabled')).toBe(true)
+  })
+
+  it('emits change event with the entire event object when checkbox is clicked', async () => {
+    const wrapper: any = mount(DxhCheckbox)
+
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+    expect(wrapper.emitted()).toHaveProperty('change')
+    expect(wrapper.emitted('change')).toHaveLength(1)
+    expect(wrapper.emitted('change')[0]).toEqual([expect.any(Object)])
+  })
+})

src/index.ts

@@ -1,4 +1,5 @@
-import DButton from "./components/DButton.vue"
-import DInput from "./components/DInput.vue"
+import DButton from './components/DButton.vue'
+import DInput from './components/DInput.vue'
+import DxhCheckbox from './components/DxhCheckbox.vue'
 
-export default {DButton, DInput}
+export default { DButton, DInput, DxhCheckbox }