From dd951ece3bd11febca89103ceb4f61fe328cdb89 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 5 Dec 2023 17:06:28 +0600
Subject: [PATCH 1/5] radio

---
 src/components/DxhRadio.vue               | 39 ++++++++++++++++++++
 src/components/__tests__/DxhRadio.spec.ts | 45 +++++++++++++++++++++++
 src/index.ts                              |  7 ++--
 3 files changed, 88 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhRadio.vue
 create mode 100644 src/components/__tests__/DxhRadio.spec.ts

diff --git a/src/components/DxhRadio.vue b/src/components/DxhRadio.vue
new file mode 100644
index 0000000..2845ac5
--- /dev/null
+++ b/src/components/DxhRadio.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="flex items-center space-x-1">
+    <input
+      type="radio"
+      :id="id"
+      :name="name"
+      :value="value"
+      :checked="defaultChecked ? defaultChecked : checked"
+      :disabled="disabled"
+      :class="{ 'opacity-50 cursor-not-allowed': disabled }"
+      @change="handleChange"
+    />
+    <label :for="id" :class="{ 'opacity-50': disabled }" v-if="label">
+      <slot name="label">{{ label }}</slot>
+    </label>
+  </div>
+  <p v-if="hint">{{ hint }}</p>
+</template>
+
+<script setup lang="ts">
+const props = 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) => {
+  if (!props.disabled) {
+    emit('change', event)
+  }
+}
+</script>
diff --git a/src/components/__tests__/DxhRadio.spec.ts b/src/components/__tests__/DxhRadio.spec.ts
new file mode 100644
index 0000000..b2216c5
--- /dev/null
+++ b/src/components/__tests__/DxhRadio.spec.ts
@@ -0,0 +1,45 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhRadio from '../DxhRadio.vue'
+
+describe('DxhRadio.vue', () => {
+  it('renders a radio button with the correct default state', async () => {
+    const wrapper: any = mount(DxhRadio, {
+      props: {
+        id: '1',
+        name: 'radioGroup',
+        value: 'option1',
+        label: 'Option 1',
+        checked: false,
+        defaultChecked: false,
+        hint: 'Select this option',
+        disabled: false
+      }
+    })
+
+    expect(wrapper.find('input[type="radio"]').exists()).toBe(true)
+    expect(wrapper.find('input[type="radio"]').element.checked).toBe(false)
+    expect(wrapper.find('label').text()).toBe('Option 1')
+    expect(wrapper.find('p').text()).toBe('Select this option')
+  })
+
+  it('emits a change event when the radio button is clicked', async () => {
+    const wrapper: any = mount(DxhRadio, {
+      props: {
+        id: '2',
+        name: 'radioGroup',
+        value: 'option2',
+        label: 'Option 2',
+        checked: false,
+        defaultChecked: false,
+        hint: 'Select this option',
+        disabled: false
+      }
+    })
+
+    await wrapper.find('input[type="radio"]').trigger('change')
+
+    expect(wrapper.emitted()).toHaveProperty('change')
+    expect(wrapper.emitted('change')[0]).toEqual([expect.any(Object)])
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..4a1af27 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 DxhRadio from './components/DxhRadio.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhRadio }

From 125595d991195f6ff03c693bc45ca01ba5c4b151 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 23:52:39 +0600
Subject: [PATCH 2/5] radio

---
 src/App.vue                               |  2 +-
 src/components/DxhRadio.vue               |  5 +++--
 src/components/__tests__/DxhRadio.spec.ts | 10 +++++-----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..46362c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/components/DxhRadio.vue b/src/components/DxhRadio.vue
index 2845ac5..cb56b1c 100644
--- a/src/components/DxhRadio.vue
+++ b/src/components/DxhRadio.vue
@@ -8,13 +8,14 @@
       :checked="defaultChecked ? defaultChecked : checked"
       :disabled="disabled"
       :class="{ 'opacity-50 cursor-not-allowed': disabled }"
+      data-test="radio"
       @change="handleChange"
     />
-    <label :for="id" :class="{ 'opacity-50': disabled }" v-if="label">
+    <label :for="id" :class="{ 'opacity-50': disabled }" data-test="label" v-if="label">
       <slot name="label">{{ label }}</slot>
     </label>
   </div>
-  <p v-if="hint">{{ hint }}</p>
+  <p data-test="hint" v-if="hint">{{ hint }}</p>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/__tests__/DxhRadio.spec.ts b/src/components/__tests__/DxhRadio.spec.ts
index b2216c5..25c8733 100644
--- a/src/components/__tests__/DxhRadio.spec.ts
+++ b/src/components/__tests__/DxhRadio.spec.ts
@@ -17,10 +17,10 @@ describe('DxhRadio.vue', () => {
       }
     })
 
-    expect(wrapper.find('input[type="radio"]').exists()).toBe(true)
-    expect(wrapper.find('input[type="radio"]').element.checked).toBe(false)
-    expect(wrapper.find('label').text()).toBe('Option 1')
-    expect(wrapper.find('p').text()).toBe('Select this option')
+    expect(wrapper.find('[data-test="radio"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="radio"]').element.checked).toBe(false)
+    expect(wrapper.find('[data-test="label"]').text()).toBe('Option 1')
+    expect(wrapper.find('[data-test="hint"]').text()).toBe('Select this option')
   })
 
   it('emits a change event when the radio button is clicked', async () => {
@@ -37,7 +37,7 @@ describe('DxhRadio.vue', () => {
       }
     })
 
-    await wrapper.find('input[type="radio"]').trigger('change')
+    await wrapper.find('[data-test="radio"]').trigger('change')
 
     expect(wrapper.emitted()).toHaveProperty('change')
     expect(wrapper.emitted('change')[0]).toEqual([expect.any(Object)])

From 5ed3822645e56722eede7ca813d80c4cce809b4f Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Tue, 12 Dec 2023 23:53:18 +0600
Subject: [PATCH 3/5] radio

---
 src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 46362c7..a0d7a19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,4 +2,4 @@
   <main>
     Vue-Tailwind
   </main>
-</template>
\ No newline at end of file
+</template>

From b8a7035c6cd298f08d85e7270c4d5cc443d653cc Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 14:09:24 +0600
Subject: [PATCH 4/5] radio

---
 src/components/DxhRadio.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DxhRadio.vue b/src/components/DxhRadio.vue
index cb56b1c..70dbe84 100644
--- a/src/components/DxhRadio.vue
+++ b/src/components/DxhRadio.vue
@@ -11,11 +11,11 @@
       data-test="radio"
       @change="handleChange"
     />
-    <label :for="id" :class="{ 'opacity-50': disabled }" data-test="label" v-if="label">
-      <slot name="label">{{ label }}</slot>
+    <label v-if="label" :for="id" :class="{ 'opacity-50': disabled }" data-test="label">
+      <slot name="label" :label="label">{{ label }}</slot>
     </label>
   </div>
-  <p data-test="hint" v-if="hint">{{ hint }}</p>
+  <p v-if="hint" data-test="hint">{{ hint }}</p>
 </template>
 
 <script setup lang="ts">

From 20d4bcf6e0a5fe1d33586f564ddc063f2f978a47 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 14:39:29 +0600
Subject: [PATCH 5/5] radio

---
 src/App.vue                 | 48 ++++++++++++++++++++++++++++++++++---
 src/components/DxhRadio.vue | 20 ++++++++--------
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..2f96d8b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,47 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <RadioInput
+      id="radio1"
+      name="radioGroup"
+      label="radioGroup"
+      value="option1"
+      :checked="selectedOption === 'option1'"
+      :disabled="isDisabled"
+      @change="handleRadioChange"
+    >
+      <template #label="{ label }">
+        <span class="font-semibold">{{ label }}</span>
+      </template>
+    </RadioInput>
+
+    <RadioInput
+      id="radio2"
+      name="radioGroup"
+      value="option2"
+      label="option2"
+      :checked="selectedOption === 'option2'"
+      :disabled="isDisabled"
+      @change="handleRadioChange"
+    >
+      <template #label="{ label }">
+        <span>{{ label }}</span>
+      </template>
+    </RadioInput>
+
+    <p v-if="hint" data-test="hint">{{ hint }}</p>
+  </div>
 </template>
+
+<script setup lang="ts">
+import RadioInput from './components/DxhRadio.vue'
+import { ref } from 'vue'
+
+const selectedOption = ref<string | null>(null)
+const isDisabled = ref(false)
+const hint = ref('This is a hint.')
+
+const handleRadioChange = (value) => {
+  selectedOption.value = value
+  console.log('Selected Option:', value)
+}
+</script>
diff --git a/src/components/DxhRadio.vue b/src/components/DxhRadio.vue
index 70dbe84..9ad8d6f 100644
--- a/src/components/DxhRadio.vue
+++ b/src/components/DxhRadio.vue
@@ -19,16 +19,16 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  id: String,
-  name: String,
-  value: String,
-  label: String,
-  checked: Boolean,
-  defaultChecked: Boolean,
-  hint: String,
-  disabled: Boolean
-})
+const props = defineProps<{
+  id: string
+  name?: string
+  value?: string
+  label?: string
+  checked: boolean
+  defaultChecked?: boolean
+  hint?: string
+  disabled?: boolean
+}>()
 
 const emit = defineEmits(['change'])