From 5912fa27ed53240c456ac9f5e98affc0cd66277e Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 5 Dec 2023 15:45:59 +0600
Subject: [PATCH 1/3] checkbox

---
 src/components/DxhCheckbox.vue               | 38 ++++++++++++++
 src/components/__tests__/DxhCheckbox.spec.ts | 52 ++++++++++++++++++++
 src/index.ts                                 |  7 +--
 3 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhCheckbox.vue
 create mode 100644 src/components/__tests__/DxhCheckbox.spec.ts

diff --git a/src/components/DxhCheckbox.vue b/src/components/DxhCheckbox.vue
new file mode 100644
index 0000000..e8118ba
--- /dev/null
+++ b/src/components/DxhCheckbox.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center space-x-1">
+    <input
+      :id="id"
+      type="checkbox"
+      :name="name"
+      :value="value"
+      :checked="defaultChecked ? defaultChecked : checked"
+      :disabled="disabled"
+      @change="handleChange"
+    />
+    <label :for="id" v-if="label">
+      <slot name="label">{{ label }}</slot>
+    </label>
+  </div>
+  <p v-if="hint">{{ hint }}</p>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue'
+
+defineProps({
+  id: Number,
+  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>
diff --git a/src/components/__tests__/DxhCheckbox.spec.ts b/src/components/__tests__/DxhCheckbox.spec.ts
new file mode 100644
index 0000000..73dfb6b
--- /dev/null
+++ b/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('input[type="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('input[type="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)])
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..ef65273 100644
--- a/src/index.ts
+++ b/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}
\ No newline at end of file
+export default { DButton, DInput, DxhCheckbox }

From e1493ef129ef6d933e1e7b2a4d1ac1a0ba7e75b8 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 5 Dec 2023 17:09:26 +0600
Subject: [PATCH 2/3] checkbox

---
 src/components/DxhCheckbox.vue               | 2 +-
 src/components/__tests__/DxhCheckbox.spec.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DxhCheckbox.vue b/src/components/DxhCheckbox.vue
index e8118ba..0105888 100644
--- a/src/components/DxhCheckbox.vue
+++ b/src/components/DxhCheckbox.vue
@@ -20,7 +20,7 @@
 import { defineProps, defineEmits } from 'vue'
 
 defineProps({
-  id: Number,
+  id: String,
   name: String,
   value: String,
   label: String,
diff --git a/src/components/__tests__/DxhCheckbox.spec.ts b/src/components/__tests__/DxhCheckbox.spec.ts
index 73dfb6b..2dc38d5 100644
--- a/src/components/__tests__/DxhCheckbox.spec.ts
+++ b/src/components/__tests__/DxhCheckbox.spec.ts
@@ -19,7 +19,7 @@ describe('DxhCheckbox.vue', () => {
   it('renders a checkbox with provided props', () => {
     const wrapper = mount(DxhCheckbox, {
       props: {
-        id: 1,
+        id: '1',
         name: 'example',
         value: 'example-value',
         label: 'Example Label',
@@ -31,7 +31,7 @@ describe('DxhCheckbox.vue', () => {
     })
 
     expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
-    expect(wrapper.props('id')).toBe(1)
+    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')

From dae99a028bd078bff6fc4f98d9c9ea316d9d69db Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 14:36:29 +0600
Subject: [PATCH 3/3] checkbox

---
 src/App.vue                                  | 47 ++++++++++++++++++--
 src/components/DxhCheckbox.vue               | 29 ++++++------
 src/components/__tests__/DxhCheckbox.spec.ts |  4 +-
 3 files changed, 61 insertions(+), 19 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..19f5c46 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/DxhCheckbox.vue b/src/components/DxhCheckbox.vue
index 0105888..eb05a17 100644
--- a/src/components/DxhCheckbox.vue
+++ b/src/components/DxhCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center space-x-1">
+  <div class="flex items-center space-x-1" data-test="checkbox">
     <input
       :id="id"
       type="checkbox"
@@ -8,27 +8,28 @@
       :checked="defaultChecked ? defaultChecked : checked"
       :disabled="disabled"
       @change="handleChange"
+      data-test="checkbox-input"
     />
-    <label :for="id" v-if="label">
-      <slot name="label">{{ label }}</slot>
+    <label :for="id" v-if="label" data-test="checkbox-label">
+      <slot name="label" :label="label">{{ label }}</slot>
     </label>
   </div>
-  <p v-if="hint">{{ hint }}</p>
+  <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
-})
+defineProps<{
+  id: string
+  name?: string
+  value?: string
+  label?: string
+  checked: boolean
+  defaultChecked?: boolean
+  hint?: string
+  disabled?: boolean
+}>()
 
 const emit = defineEmits(['change'])
 
diff --git a/src/components/__tests__/DxhCheckbox.spec.ts b/src/components/__tests__/DxhCheckbox.spec.ts
index 2dc38d5..da7bc4a 100644
--- a/src/components/__tests__/DxhCheckbox.spec.ts
+++ b/src/components/__tests__/DxhCheckbox.spec.ts
@@ -6,7 +6,7 @@ describe('DxhCheckbox.vue', () => {
   it('renders a checkbox with default props', () => {
     const wrapper = mount(DxhCheckbox)
 
-    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="checkbox"]').exists()).toBe(true)
     expect(wrapper.props('id')).toBeUndefined()
     expect(wrapper.props('name')).toBeUndefined()
     expect(wrapper.props('value')).toBeUndefined()
@@ -30,7 +30,7 @@ describe('DxhCheckbox.vue', () => {
       }
     })
 
-    expect(wrapper.find('input[type="checkbox"]').exists()).toBe(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')