From 61c295f276dddcbba20b77803e811046e566f409 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 12:41:39 +0600
Subject: [PATCH 1/5] autocomplete

---
 src/assets/icons/LoadingSpinner.vue |  58 ++++++++++++
 src/components/DxhAutocomplete.vue  | 139 ++++++++++++++++++++++++++++
 src/index.ts                        |   7 +-
 3 files changed, 201 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/icons/LoadingSpinner.vue
 create mode 100644 src/components/DxhAutocomplete.vue

diff --git a/src/assets/icons/LoadingSpinner.vue b/src/assets/icons/LoadingSpinner.vue
new file mode 100644
index 0000000..3bd29c8
--- /dev/null
+++ b/src/assets/icons/LoadingSpinner.vue
@@ -0,0 +1,58 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <g class="spinner_Wezc">
+      <circle cx="12" cy="2.5" r="1.5" opacity=".14" />
+      <circle cx="16.75" cy="3.77" r="1.5" opacity=".29" />
+      <circle cx="20.23" cy="7.25" r="1.5" opacity=".43" />
+      <circle cx="21.50" cy="12.00" r="1.5" opacity=".57" />
+      <circle cx="20.23" cy="16.75" r="1.5" opacity=".71" />
+      <circle cx="16.75" cy="20.23" r="1.5" opacity=".86" />
+      <circle cx="12" cy="21.5" r="1.5" />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.spinner_Wezc {
+  transform-origin: center;
+  animation: spinner_Oiah 0.75s step-end infinite;
+}
+@keyframes spinner_Oiah {
+  8.3% {
+    transform: rotate(30deg);
+  }
+  16.6% {
+    transform: rotate(60deg);
+  }
+  25% {
+    transform: rotate(90deg);
+  }
+  33.3% {
+    transform: rotate(120deg);
+  }
+  41.6% {
+    transform: rotate(150deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  58.3% {
+    transform: rotate(210deg);
+  }
+  66.6% {
+    transform: rotate(240deg);
+  }
+  75% {
+    transform: rotate(270deg);
+  }
+  83.3% {
+    transform: rotate(300deg);
+  }
+  91.6% {
+    transform: rotate(330deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/DxhAutocomplete.vue b/src/components/DxhAutocomplete.vue
new file mode 100644
index 0000000..8ffbbad
--- /dev/null
+++ b/src/components/DxhAutocomplete.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="autocomplete">
+    <label v-if="label" class="block">{{ label }}</label>
+    <div ref="dropdown">
+      <div class="relative">
+        <input
+          v-model="inputValue"
+          @input="handleInputChange"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @keydown.enter="handleEnter"
+          :placeholder="placeholder"
+          :readonly="readonly"
+          :disabled="disabled"
+          :autofocus="autofocus"
+          class="w-full p-2 border border-gray-300"
+        />
+
+        <div
+          v-if="clearable && inputValue"
+          @click="clearInput"
+          class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        >
+          <slot name="clear-icon">
+            <svg
+              class="inline"
+              xmlns="http://www.w3.org/2000/svg"
+              height="14px"
+              viewBox="0 0 512 512"
+            >
+              <path
+                d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"
+              />
+            </svg>
+          </slot>
+        </div>
+      </div>
+
+      <div v-if="isDropdownOpen" class="p-2 border border-gray-300 shadow-md bg-white">
+        <slot name="loading" v-if="loading">
+          <div class="flex w-full justify-center items-center">
+            <Spinner />
+          </div>
+        </slot>
+        <div v-if="options.length === 0 && !loading" class="text-center">{{ notFoundContent }}</div>
+        <div v-if="options.length > 0 && !loading">
+          <div v-for="option in options" :key="getOptionKey(option)" class="cursor-pointer">
+            <button class="block" @click="selectOption(option)">
+              {{ getOptionLabel(option) }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <p v-if="hint" class="text-sm text-gray-500 mt-1">{{ hint }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineProps, defineEmits } from 'vue'
+import Spinner from '../assets/icons/LoadingSpinner.vue'
+
+interface Option {
+  id: string | number
+  label: string
+}
+
+interface Props {
+  label?: string
+  loading?: boolean
+  value?: string
+  options: Option[]
+  placeholder?: string
+  notFoundContent?: string
+  clearable?: boolean
+  hint?: string
+  disabled?: boolean
+  readonly?: boolean
+  autofocus?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits(['change', 'focus', 'blur', 'enter', 'selected'])
+
+const dropdown = ref(null)
+const isDropdownOpen = ref(false)
+const inputValue = ref<string>(props.value || '')
+
+const isClickOutside = (event: MouseEvent) => {
+  const dropdownElement: any = dropdown.value
+  if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+    isDropdownOpen.value = false
+  }
+}
+
+const handleInputChange = () => {
+  emit('change', inputValue.value)
+  isDropdownOpen.value = true
+}
+
+const handleFocus = () => {
+  emit('focus')
+}
+
+const handleBlur = () => {
+  emit('blur')
+}
+
+const handleEnter = () => {
+  emit('enter')
+}
+
+const clearInput = () => {
+  inputValue.value = ''
+}
+
+const selectOption = (option: Option) => {
+  inputValue.value = option.label
+  emit('selected', option)
+  isDropdownOpen.value = true
+}
+
+const getOptionKey = (option: Option) => {
+  return typeof option === 'object' ? option.id : option
+}
+
+const getOptionLabel = (option: Option) => {
+  return typeof option === 'object' ? option.label : option
+}
+
+onMounted(() => {
+  document.addEventListener('click', isClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', isClickOutside)
+})
+</script>
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..d317b92 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 DxhAutocomplete from './components/DxhAutocomplete.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DxhAutocomplete }

From fe5e2b417873c40ba7116eb18c142dea3f2e9b34 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 17:19:59 +0600
Subject: [PATCH 2/5] autocomplete

---
 src/components/DxhAutocomplete.vue            | 14 +++++---
 .../__tests__/DxhAutocomplete.spec.ts         | 36 +++++++++++++++++++
 2 files changed, 46 insertions(+), 4 deletions(-)
 create mode 100644 src/components/__tests__/DxhAutocomplete.spec.ts

diff --git a/src/components/DxhAutocomplete.vue b/src/components/DxhAutocomplete.vue
index 8ffbbad..7542324 100644
--- a/src/components/DxhAutocomplete.vue
+++ b/src/components/DxhAutocomplete.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="autocomplete">
-    <label v-if="label" class="block">{{ label }}</label>
+    <label v-if="label" class="block" data-test="autocomplete-label">{{ label }}</label>
     <div ref="dropdown">
       <div class="relative">
         <input
@@ -14,12 +14,14 @@
           :disabled="disabled"
           :autofocus="autofocus"
           class="w-full p-2 border border-gray-300"
+          data-test="autocomplete-input"
         />
 
         <div
           v-if="clearable && inputValue"
           @click="clearInput"
           class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
+          data-test="clear-icon"
         >
           <slot name="clear-icon">
             <svg
@@ -36,7 +38,11 @@
         </div>
       </div>
 
-      <div v-if="isDropdownOpen" class="p-2 border border-gray-300 shadow-md bg-white">
+      <div
+        v-if="isDropdownOpen"
+        class="p-2 border border-gray-300 shadow-md bg-white"
+        data-test="dropdown"
+      >
         <slot name="loading" v-if="loading">
           <div class="flex w-full justify-center items-center">
             <Spinner />
@@ -45,7 +51,7 @@
         <div v-if="options.length === 0 && !loading" class="text-center">{{ notFoundContent }}</div>
         <div v-if="options.length > 0 && !loading">
           <div v-for="option in options" :key="getOptionKey(option)" class="cursor-pointer">
-            <button class="block" @click="selectOption(option)">
+            <button class="block" @click="selectOption(option)" data-test="dropdown-option">
               {{ getOptionLabel(option) }}
             </button>
           </div>
@@ -118,7 +124,7 @@ const clearInput = () => {
 const selectOption = (option: Option) => {
   inputValue.value = option.label
   emit('selected', option)
-  isDropdownOpen.value = true
+  isDropdownOpen.value = false
 }
 
 const getOptionKey = (option: Option) => {
diff --git a/src/components/__tests__/DxhAutocomplete.spec.ts b/src/components/__tests__/DxhAutocomplete.spec.ts
new file mode 100644
index 0000000..3b224c2
--- /dev/null
+++ b/src/components/__tests__/DxhAutocomplete.spec.ts
@@ -0,0 +1,36 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DxhAutocomplete from '../DxhAutocomplete.vue'
+
+describe('DxhAutocomplete.vue', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DxhAutocomplete, {
+      props: {
+        label: 'Your Label',
+        options: [
+          { id: 1, label: 'Option 1' },
+          { id: 2, label: 'Option 2' },
+          { id: 3, label: 'Option 3' }
+        ]
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders with correct initial state', () => {
+    expect(wrapper.find('[data-test="autocomplete-label"]').exists()).toBe(true)
+    expect(wrapper.find('[data-test="autocomplete-label"]').text()).toBe('Your Label')
+  })
+
+  it('opens dropdown, selects an option, and closes dropdown', async () => {
+    await wrapper.find('[data-test="autocomplete-input"]').trigger('focus')
+    expect(wrapper.vm.isDropdownOpen).toBe(false)
+    expect(wrapper.vm.isDropdownOpen).toBe(false)
+    expect(wrapper.emitted('selected')).toBeFalsy()
+  })
+})

From 44eb6f3b44c44bfcbe3c108ece21c77dd006ebf3 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 20:08:29 +0600
Subject: [PATCH 3/5] autocomplete

---
 src/components/DxhAutocomplete.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/DxhAutocomplete.vue b/src/components/DxhAutocomplete.vue
index 7542324..275d923 100644
--- a/src/components/DxhAutocomplete.vue
+++ b/src/components/DxhAutocomplete.vue
@@ -85,7 +85,9 @@ interface Props {
   autofocus?: boolean
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  notFoundContent: 'No data found'
+})
 
 const emit = defineEmits(['change', 'focus', 'blur', 'enter', 'selected'])
 

From 9c49532e509d4c5fcda396990f39bddcc188d47c Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 12:53:55 +0600
Subject: [PATCH 4/5] autocomplete

---
 src/App.vue                        | 38 +++++++++++++++++++++++++++---
 src/components/DxhAutocomplete.vue |  4 ++--
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..ff33b48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,37 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <Autocomplete
+      v-model="selectedOption"
+      :options="autocompleteOptions"
+      label="Select an option:"
+      placeholder="Start typing..."
+      @selected="handleSelected"
+      :loading="isLoading"
+      :clearable="true"
+      hint="Type to search"
+    />
+    <div class="mt-4">
+      <p>Selected Option: {{ selectedOption }}</p>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import Autocomplete from './components/DxhAutocomplete.vue'
+
+const selectedOption = ref<string | null>(null)
+const isLoading = ref(false)
+
+const autocompleteOptions = [
+  { id: 1, label: 'Option 1' },
+  { id: 2, label: 'Option 2' },
+  { id: 3, label: 'Option 3' },
+  // Add more options as needed
+]
+
+const handleSelected = (option) => {
+  console.log('Selected:', option)
+  // Do something with the selected option
+}
+</script>
diff --git a/src/components/DxhAutocomplete.vue b/src/components/DxhAutocomplete.vue
index 275d923..f4f84d1 100644
--- a/src/components/DxhAutocomplete.vue
+++ b/src/components/DxhAutocomplete.vue
@@ -19,16 +19,16 @@
 
         <div
           v-if="clearable && inputValue"
-          @click="clearInput"
           class="absolute right-2 top-0 bottom-0 cursor-pointer flex items-center h-full"
           data-test="clear-icon"
         >
-          <slot name="clear-icon">
+          <slot name="clear" @onClick="clearInput">
             <svg
               class="inline"
               xmlns="http://www.w3.org/2000/svg"
               height="14px"
               viewBox="0 0 512 512"
+              @click="clearInput"
             >
               <path
                 d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"

From e714db0ec6ca4672c727cae82757e100077c7caf Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 18:06:18 +0600
Subject: [PATCH 5/5] autocomplete

---
 src/App.vue | 36 +-----------------------------------
 1 file changed, 1 insertion(+), 35 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index ff33b48..ef16a8e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,37 +1,3 @@
 <template>
-  <div>
-    <Autocomplete
-      v-model="selectedOption"
-      :options="autocompleteOptions"
-      label="Select an option:"
-      placeholder="Start typing..."
-      @selected="handleSelected"
-      :loading="isLoading"
-      :clearable="true"
-      hint="Type to search"
-    />
-    <div class="mt-4">
-      <p>Selected Option: {{ selectedOption }}</p>
-    </div>
-  </div>
+  <main>Vue-Tailwind</main>
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import Autocomplete from './components/DxhAutocomplete.vue'
-
-const selectedOption = ref<string | null>(null)
-const isLoading = ref(false)
-
-const autocompleteOptions = [
-  { id: 1, label: 'Option 1' },
-  { id: 2, label: 'Option 2' },
-  { id: 3, label: 'Option 3' },
-  // Add more options as needed
-]
-
-const handleSelected = (option) => {
-  console.log('Selected:', option)
-  // Do something with the selected option
-}
-</script>