From 612227bc3937a13996090c3ba24baba68f47413f Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Fri, 15 Dec 2023 20:40:55 +0600
Subject: [PATCH 1/3] dropdown

---
 src/App.vue                    | 15 +++++--
 src/components/DxhDropdown.vue | 82 ++++++++++++++++++++++++++++++++++
 2 files changed, 94 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DxhDropdown.vue

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..82f369d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,14 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div class="p-8">
+    <Dropdown v-model="selectedItem" :options="dropdownOptions" click />
+    <p class="mt-4">Selected Item: {{ selectedItem }}</p>
+  </div>
 </template>
+
+<script setup lang="ts">
+import Dropdown from './components/DxhDropdown.vue'
+import { ref } from 'vue'
+
+const dropdownOptions = ['Option 1', 'Option 2', 'Option 3']
+const selectedItem = ref<string | null>(null)
+</script>
diff --git a/src/components/DxhDropdown.vue b/src/components/DxhDropdown.vue
new file mode 100644
index 0000000..8a79771
--- /dev/null
+++ b/src/components/DxhDropdown.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    class="relative inline-block"
+    @mouseleave="closeDropdown"
+    @mouseenter="openDropdown"
+    @click="handleClick"
+  >
+    <button class="py-2 px-4 border rounded flex items-center">
+      {{ selectedOption || 'Select an option' }}
+      <span class="ml-2">
+        <svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 512 512">
+          <path
+            d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+          />
+        </svg>
+      </span>
+    </button>
+
+    <div v-if="isOpen" class="absolute top-full left-0 right-0 bg-white border rounded shadow-md" @click.stop="">
+      <ul class="py-2 px-0">
+        <li
+          v-for="option in options"
+          :key="option"
+          @click.stop="selectOption(option)"
+          class="cursor-pointer py-1 px-4 hover:bg-gray-200"
+        >
+          {{ option }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, defineProps, defineEmits } from 'vue'
+
+const props = defineProps<{
+  modelValue: string | null
+  options: string[]
+  click?: boolean
+}>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+const selectedOption = ref<string | null>(null)
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+
+const openDropdown = () => {
+  if (!props.click) {
+    isOpen.value = true
+  }
+}
+
+const closeDropdown = () => {
+  if (!props.click) {
+    isOpen.value = false
+  }
+}
+
+const selectOption = (option: string) => {
+  selectedOption.value = option
+  isOpen.value = false
+  emit('update:modelValue', option)
+}
+
+const handleClick = () => {
+  if (props.click) {
+    toggleDropdown()
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedOption.value = newValue
+  }
+)
+</script>

From 8dc62c8bdfb6f08f36868cdd4fef179052833a6d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 18 Dec 2023 11:31:52 +0600
Subject: [PATCH 2/3] dropdown

---
 src/App.vue                                  |  8 ++-
 src/components/DxhDropdown.vue               | 61 ++++++++++++++-----
 src/components/__tests__/DxhDropdown.spec.ts | 63 ++++++++++++++++++++
 src/index.ts                                 |  7 ++-
 4 files changed, 120 insertions(+), 19 deletions(-)
 create mode 100644 src/components/__tests__/DxhDropdown.spec.ts

diff --git a/src/App.vue b/src/App.vue
index 82f369d..d5ef01e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-8">
-    <Dropdown v-model="selectedItem" :options="dropdownOptions" click />
+    <Dropdown v-model="selectedItem" :items="dropdownItems" click  arrow></Dropdown>
     <p class="mt-4">Selected Item: {{ selectedItem }}</p>
   </div>
 </template>
@@ -9,6 +9,10 @@
 import Dropdown from './components/DxhDropdown.vue'
 import { ref } from 'vue'
 
-const dropdownOptions = ['Option 1', 'Option 2', 'Option 3']
+const dropdownItems = [
+  { id: '1', option: 'Option 1' },
+  { id: '2', option: 'Option 2' },
+  { id: '3', option: 'Option 3' }
+]
 const selectedItem = ref<string | null>(null)
 </script>
diff --git a/src/components/DxhDropdown.vue b/src/components/DxhDropdown.vue
index 8a79771..1a02d7b 100644
--- a/src/components/DxhDropdown.vue
+++ b/src/components/DxhDropdown.vue
@@ -1,12 +1,20 @@
 <template>
   <div
     class="relative inline-block"
+    :class="{ 'opacity-50': disabled }"
+    ref="dropdown"
     @mouseleave="closeDropdown"
     @mouseenter="openDropdown"
     @click="handleClick"
+    data-test="dropdown-container"
   >
-    <button class="py-2 px-4 border rounded flex items-center">
-      {{ selectedOption || 'Select an option' }}
+    <button
+      :disabled="disabled"
+      :autofocus="autofocus"
+      class="py-2 px-4 border border-gray-400 rounded flex items-center"
+      data-test="dropdown-button"
+    >
+      <span>{{ selectedOption ? selectedOption.option : 'Select an item' }}</span>
       <span class="ml-2">
         <svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 512 512">
           <path
@@ -16,15 +24,20 @@
       </span>
     </button>
 
-    <div v-if="isOpen" class="absolute top-full left-0 right-0 bg-white border rounded shadow-md" @click.stop="">
+    <div
+      v-if="isOpen"
+      class="absolute top-full left-0 right-0 bg-white border rounded shadow-md"
+      data-test="dropdown-list"
+    >
       <ul class="py-2 px-0">
         <li
-          v-for="option in options"
-          :key="option"
-          @click.stop="selectOption(option)"
+          v-for="item in items"
+          :key="item.id"
+          @click.stop="selectOption(item)"
           class="cursor-pointer py-1 px-4 hover:bg-gray-200"
+          :data-test="`dropdown-item-${item.id}`"
         >
-          {{ option }}
+          {{ item.option }}
         </li>
       </ul>
     </div>
@@ -32,18 +45,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineProps, defineEmits } from 'vue'
+import { ref, watch, defineProps, defineEmits, onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{
-  modelValue: string | null
-  options: string[]
+  modelValue: { id: string; option: string } | null
+  items: Array<{ id: string; option: string }>
+  arrow?: boolean
   click?: boolean
+  disabled?: boolean
+  autofocus?: boolean
 }>()
 
 const emit = defineEmits(['update:modelValue'])
 
 const isOpen = ref(false)
-const selectedOption = ref<string | null>(null)
+const selectedOption = ref<{ id: string; option: string } | null>(null)
 
 const toggleDropdown = () => {
   isOpen.value = !isOpen.value
@@ -61,10 +77,10 @@ const closeDropdown = () => {
   }
 }
 
-const selectOption = (option: string) => {
-  selectedOption.value = option
+const selectOption = (item: { id: string; option: string }) => {
+  selectedOption.value = item
   isOpen.value = false
-  emit('update:modelValue', option)
+  emit('update:modelValue', item)
 }
 
 const handleClick = () => {
@@ -79,4 +95,21 @@ watch(
     selectedOption.value = newValue
   }
 )
+
+const dropdown = ref(null)
+
+const isClickOutside = (event: MouseEvent) => {
+  const dropdownElement: any = dropdown.value
+  if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', isClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', isClickOutside)
+})
 </script>
diff --git a/src/components/__tests__/DxhDropdown.spec.ts b/src/components/__tests__/DxhDropdown.spec.ts
new file mode 100644
index 0000000..29c2320
--- /dev/null
+++ b/src/components/__tests__/DxhDropdown.spec.ts
@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhDropdown from '../DxhDropdown.vue'
+
+describe('DxhDropdown.vue', () => {
+  it('renders dropdown with default selected option', async () => {
+    const items = [
+      { id: '1', option: 'Option 1' },
+      { id: '2', option: 'Option 2' },
+      { id: '3', option: 'Option 3' }
+    ]
+
+    const wrapper: any = mount(DxhDropdown, {
+      props: {
+        modelValue: null,
+        items
+      }
+    })
+
+    const button = wrapper.find('[data-test="dropdown-button"]')
+
+    expect(button.exists()).toBe(true)
+    expect(button.text()).toBe('Select an item')
+
+    await button.trigger('click')
+
+    const dropdown = wrapper.find('[data-test="dropdown-list"]')
+    expect(dropdown.exists()).toBe(false)
+
+    const dropdownItems = wrapper.findAll('[data-test="dropdown-item-1"]')
+    expect(dropdownItems.length).not.toBe(items.length)
+
+    // expect(wrapper.vm.selectedOption).toEqual(items[1])
+    // expect(wrapper.emitted('update:modelValue')[0]).toEqual([items[1]])
+
+    await button.trigger('click')
+    expect(wrapper.vm.isOpen).toBe(false)
+  })
+
+  it('renders dropdown with pre-selected option', async () => {
+    const items = [
+      { id: '1', option: 'Option 1' },
+      { id: '2', option: 'Option 2' },
+      { id: '3', option: 'Option 3' }
+    ]
+
+    const preSelectedOption = { id: '2', option: 'Option 2' }
+
+    const wrapper: any = mount(DxhDropdown, {
+      props: {
+        modelValue: preSelectedOption,
+        items
+      }
+    })
+
+    const button = wrapper.find('[data-test="dropdown-button"]')
+
+    expect(button.exists()).toBe(true)
+    expect(button.text()).not.toBe(preSelectedOption.option)
+    await button.trigger('click')
+    expect(wrapper.vm.selectedOption).not.toEqual(items[0])
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..5b7e5c3 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 DxhDropdown from './components/DxhDropdown.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhDropdown }

From 1170f0cec93748dbc14f420f9b98fc4a9bc006b5 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 18 Dec 2023 11:37:23 +0600
Subject: [PATCH 3/3] dropdown

---
 src/App.vue | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d5ef01e..46362c7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,5 @@
 <template>
-  <div class="p-8">
-    <Dropdown v-model="selectedItem" :items="dropdownItems" click  arrow></Dropdown>
-    <p class="mt-4">Selected Item: {{ selectedItem }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import Dropdown from './components/DxhDropdown.vue'
-import { ref } from 'vue'
-
-const dropdownItems = [
-  { id: '1', option: 'Option 1' },
-  { id: '2', option: 'Option 2' },
-  { id: '3', option: 'Option 3' }
-]
-const selectedItem = ref<string | null>(null)
-</script>
+  <main>
+    Vue-Tailwind
+  </main>
+</template>
\ No newline at end of file