From 05df10befc37d8f4416fdd4fdb1319a0dc411869 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 4 Dec 2023 18:19:36 +0600
Subject: [PATCH 1/6] select

---
 src/components/DSelect.vue                    | 204 ++++++++++++++++++
 src/components/__tests__/DSelect.spec copy.ts |  51 +++++
 src/index.ts                                  |   7 +-
 3 files changed, 259 insertions(+), 3 deletions(-)
 create mode 100644 src/components/DSelect.vue
 create mode 100644 src/components/__tests__/DSelect.spec copy.ts

diff --git a/src/components/DSelect.vue b/src/components/DSelect.vue
new file mode 100644
index 0000000..a19bd49
--- /dev/null
+++ b/src/components/DSelect.vue
@@ -0,0 +1,204 @@
+<template>
+  <label v-if="label" class="block"> {{ label }}</label>
+  <div ref="dropdown" class="relative inline-block w-full">
+    <div
+      @click="toggleDropdown"
+      class="cursor-pointer border border-gray-300 p-2 rounded-md flex items-center justify-between bg-white"
+    >
+      <div
+        v-if="clearable && selectedOptions[0]"
+        class="absolute right-9 top-0 bottom-0 cursor-pointer flex items-center h-full"
+        @click.stop="$emit('update:modelValue', (selectedOptions = []))"
+      >
+        <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 class="flex items-center space-x-2">
+        <div v-if="!selectedOptions.length" class="text-gray-500">{{ placeholder }}</div>
+        <div
+          class="flex space-x-2"
+          :selected-options="selectedOptions"
+          :remove-option="removeOption"
+        >
+          <div
+            v-for="option in selectedOptions"
+            :key="option.id"
+            :class="chips ? 'bg-gray-200 rounded-md p-1' : ''"
+          >
+            {{ option.label }}
+            <span v-if="chips" @click.stop="removeOption(option)" class="ml-1 cursor-pointer"
+              >&times;</span
+            >
+          </div>
+        </div>
+      </div>
+      <slot name="dropdown">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          :class="{ 'rotate-180': isDropdownOpen }"
+          class="w-4 h-4 transition-transform transform"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </slot>
+    </div>
+
+    <transition name="fade">
+      <div
+        v-show="isDropdownOpen"
+        class="absolute w-full bg-white border border-gray-300 rounded-md shadow-md overflow-hidden min-w-[300px]"
+      >
+        <div :options="options" :toggle-option="toggleOption">
+          <div
+            v-for="option in options"
+            :key="option.id"
+            @click="toggleOption(option)"
+            class="p-2 hover:bg-gray-100 cursor-pointer"
+          >
+            <slot name="prepend" v-if="multiple"> </slot>
+            {{ option.label }}
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+  <p v-if="hint">{{ hint }}</p>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, defineProps, defineEmits } from 'vue'
+
+interface Option {
+  id: string | number
+  label: string
+}
+
+const props = defineProps({
+  modelValue: [Array, String, Object],
+  label: {
+    type: String,
+    required: false
+  },
+  options: [Array, String, Object],
+  multiple: {
+    type: Boolean,
+    required: false
+  },
+  chips: {
+    type: Boolean,
+    required: false
+  },
+  clearable: {
+    type: Boolean,
+    required: false
+  },
+  placeholder: {
+    type: String,
+    required: false
+  },
+  hint: {
+    type: String,
+    required: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'select'])
+
+const selectedOptions: any = ref([])
+const isDropdownOpen = ref(false)
+const dropdown = ref(null)
+
+const isClickOutside = (event: MouseEvent) => {
+  const dropdownElement: any = dropdown.value
+  if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+    isDropdownOpen.value = false
+  }
+}
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value
+}
+
+const toggleOption = (option: Option) => {
+  if (isSelected(option)) {
+    removeOption(option)
+  } else {
+    addOption(option)
+    if (!props.multiple) {
+      isDropdownOpen.value = false
+    }
+  }
+}
+
+const addOption = (option: Option) => {
+  if (props.multiple) {
+    selectedOptions.value = [...selectedOptions.value, option]
+    emit('select', selectedOptions.value)
+  } else {
+    selectedOptions.value = [option]
+    isDropdownOpen.value = false
+    emit('select', selectedOptions.value)
+  }
+
+  emit('update:modelValue', getSelectedValues())
+}
+
+const removeOption = (option: Option) => {
+  selectedOptions.value = selectedOptions.value.filter(
+    (o: { id: string | number }) => o.id !== option.id
+  )
+  emit('update:modelValue', getSelectedValues())
+}
+
+const isSelected = (option: Option): boolean => {
+  return selectedOptions.value.some((o: { id: string | number }) => o.id === option.id)
+}
+
+const getSelectedValues = (): any => {
+  return props.multiple
+    ? selectedOptions.value.map((o: { id: any }) => o.id)
+    : selectedOptions.value[0]?.id || null
+}
+
+onMounted(() => {
+  document.addEventListener('click', isClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', isClickOutside)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/__tests__/DSelect.spec copy.ts b/src/components/__tests__/DSelect.spec copy.ts
new file mode 100644
index 0000000..b2dafd6
--- /dev/null
+++ b/src/components/__tests__/DSelect.spec copy.ts	
@@ -0,0 +1,51 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DSelect from '../DSelect.vue'
+
+describe('DSelect.vue', () => {
+  let wrapper: any
+
+  beforeEach(() => {
+    wrapper = mount(DSelect, {
+      props: {
+        modelValue: [],
+        label: 'Dropdown Label',
+        options: [
+          { id: 1, label: 'Option 1' },
+          { id: 2, label: 'Option 2' },
+          { id: 3, label: 'Option 3' }
+        ],
+        multiple: true,
+        chips: true,
+        clearable: true,
+        placeholder: 'Select an option',
+        hint: 'Dropdown Hint'
+      }
+    })
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders with correct initial state', () => {
+    expect(wrapper.find('label').exists()).toBe(true)
+    expect(wrapper.find('label').text()).toBe('Dropdown Label')
+    expect(wrapper.find('.text-gray-500').text()).toBe('Select an option')
+    expect(wrapper.find('p').text()).toBe('Dropdown Hint')
+    expect(wrapper.find('[data-test="clear-icon"]').exists()).toBe(true)
+    expect(wrapper.vm.isDropdownOpen).toBe(false)
+  })
+
+  it('opens dropdown, selects an option, and closes dropdown', async () => {
+    await wrapper.find('[data-test="dropdown-toggle"]').trigger('click')
+    expect(wrapper.vm.isDropdownOpen).toBe(true)
+
+    await wrapper.find('[data-test="dropdown-option-1"]').trigger('click')
+    expect(wrapper.vm.selectedOptions).toEqual([{ id: 1, label: 'Option 1' }])
+    expect(wrapper.vm.isDropdownOpen).toBe(false)
+
+    expect(wrapper.emitted('update:modelValue')).toBeTruthy()
+    expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([1])
+  })
+})
diff --git a/src/index.ts b/src/index.ts
index ee2ff8d..c853db8 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 DSelect from './components/DSelect.vue'
 
-export default {DButton, DInput}
\ No newline at end of file
+export default { DButton, DInput, DSelect }
\ No newline at end of file

From 346bc4dc132d7252770778cd4630f0957f07ab2f Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Mon, 4 Dec 2023 19:40:28 +0600
Subject: [PATCH 2/6] select

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

diff --git a/src/components/DSelect.vue b/src/components/DSelect.vue
index a19bd49..a94c598 100644
--- a/src/components/DSelect.vue
+++ b/src/components/DSelect.vue
@@ -3,7 +3,7 @@
   <div ref="dropdown" class="relative inline-block w-full">
     <div
       @click="toggleDropdown"
-      class="cursor-pointer border border-gray-300 p-2 rounded-md flex items-center justify-between bg-white"
+      class="cursor-pointer border p-2 flex items-center justify-between bg-white"
     >
       <div
         v-if="clearable && selectedOptions[0]"
@@ -33,7 +33,7 @@
           <div
             v-for="option in selectedOptions"
             :key="option.id"
-            :class="chips ? 'bg-gray-200 rounded-md p-1' : ''"
+            :class="chips ? 'bg-gray-200 p-1' : ''"
           >
             {{ option.label }}
             <span v-if="chips" @click.stop="removeOption(option)" class="ml-1 cursor-pointer"
@@ -64,7 +64,7 @@
     <transition name="fade">
       <div
         v-show="isDropdownOpen"
-        class="absolute w-full bg-white border border-gray-300 rounded-md shadow-md overflow-hidden min-w-[300px]"
+        class="absolute w-full bg-white border border-gray-300 shadow-md overflow-hidden min-w-[300px]"
       >
         <div :options="options" :toggle-option="toggleOption">
           <div

From 01461f8db00d6749baaa858fc7c7c5be1e02db04 Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 18:30:50 +0600
Subject: [PATCH 3/6] select

---
 src/App.vue                                   |  64 ++++-
 src/assets/icons/LoadingSpinner.vue           |  58 +++++
 src/components/DSelect.vue                    | 204 ----------------
 src/components/DxhSelect.vue                  | 227 ++++++++++++++++++
 ...DSelect.spec copy.ts => DxhSelect.spec.ts} |  20 +-
 5 files changed, 356 insertions(+), 217 deletions(-)
 create mode 100644 src/assets/icons/LoadingSpinner.vue
 delete mode 100644 src/components/DSelect.vue
 create mode 100644 src/components/DxhSelect.vue
 rename src/components/__tests__/{DSelect.spec copy.ts => DxhSelect.spec.ts} (78%)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..f00af1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,63 @@
+<!-- TestAutocomplete.vue -->
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div class="p-20">
+    <Autocomplete
+      v-model="selectedOption"
+      :loading="false"
+      :options="filteredOptions"
+      placeholder="Type to search"
+      :clearable="true"
+      hint="Type to search or select an option"
+      chips
+      
+    >
+    </Autocomplete>
+
+    <div class="mt-4">
+      <p>Selected Option: {{ selectedOption }}</p>
+      <p v-if="loading" class="text-blue-500">Loading...</p>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import Autocomplete from './components/DxhSelect.vue';
+import { ref, computed, watch } from 'vue';
+
+const loading = ref(false);
+const selectedOption = ref<string | null>(null);
+const options = ref([
+  { id: 1, label: 'Option 1' },
+  { id: 2, label: 'Option 2' },
+  { id: 3, label: 'Option 3' },
+  { id: 4, label: 'Caption 3' },
+  { id: 5, label: 'Fiction 3' },
+  { id: 6, label: 'Dell 3' },
+]);
+
+const clearable = ref(true);
+const disabled = ref(false);
+const readonly = ref(false);
+const autofocus = ref(false);
+const inputValue = ref('');
+
+const filteredOptions = computed(() => {
+  return options.value.filter(option => option.label.toLowerCase().includes(inputValue.value.toLowerCase()));
+});
+
+const handleChange = (value) => {
+  inputValue.value = value;
+};
+
+const handleEnter = () => {
+  console.log('Enter key pressed');
+};
+
+const handleSelected = (option) => {
+  console.log(option);
+};
+
+setTimeout(() => {
+  loading.value = false;
+}, 2000);
+</script>
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/DSelect.vue b/src/components/DSelect.vue
deleted file mode 100644
index a94c598..0000000
--- a/src/components/DSelect.vue
+++ /dev/null
@@ -1,204 +0,0 @@
-<template>
-  <label v-if="label" class="block"> {{ label }}</label>
-  <div ref="dropdown" class="relative inline-block w-full">
-    <div
-      @click="toggleDropdown"
-      class="cursor-pointer border p-2 flex items-center justify-between bg-white"
-    >
-      <div
-        v-if="clearable && selectedOptions[0]"
-        class="absolute right-9 top-0 bottom-0 cursor-pointer flex items-center h-full"
-        @click.stop="$emit('update:modelValue', (selectedOptions = []))"
-      >
-        <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 class="flex items-center space-x-2">
-        <div v-if="!selectedOptions.length" class="text-gray-500">{{ placeholder }}</div>
-        <div
-          class="flex space-x-2"
-          :selected-options="selectedOptions"
-          :remove-option="removeOption"
-        >
-          <div
-            v-for="option in selectedOptions"
-            :key="option.id"
-            :class="chips ? 'bg-gray-200 p-1' : ''"
-          >
-            {{ option.label }}
-            <span v-if="chips" @click.stop="removeOption(option)" class="ml-1 cursor-pointer"
-              >&times;</span
-            >
-          </div>
-        </div>
-      </div>
-      <slot name="dropdown">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-          :class="{ 'rotate-180': isDropdownOpen }"
-          class="w-4 h-4 transition-transform transform"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </slot>
-    </div>
-
-    <transition name="fade">
-      <div
-        v-show="isDropdownOpen"
-        class="absolute w-full bg-white border border-gray-300 shadow-md overflow-hidden min-w-[300px]"
-      >
-        <div :options="options" :toggle-option="toggleOption">
-          <div
-            v-for="option in options"
-            :key="option.id"
-            @click="toggleOption(option)"
-            class="p-2 hover:bg-gray-100 cursor-pointer"
-          >
-            <slot name="prepend" v-if="multiple"> </slot>
-            {{ option.label }}
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-  <p v-if="hint">{{ hint }}</p>
-</template>
-
-<script setup lang="ts">
-import { ref, onMounted, onUnmounted, defineProps, defineEmits } from 'vue'
-
-interface Option {
-  id: string | number
-  label: string
-}
-
-const props = defineProps({
-  modelValue: [Array, String, Object],
-  label: {
-    type: String,
-    required: false
-  },
-  options: [Array, String, Object],
-  multiple: {
-    type: Boolean,
-    required: false
-  },
-  chips: {
-    type: Boolean,
-    required: false
-  },
-  clearable: {
-    type: Boolean,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  hint: {
-    type: String,
-    required: false
-  }
-})
-
-const emit = defineEmits(['update:modelValue', 'select'])
-
-const selectedOptions: any = ref([])
-const isDropdownOpen = ref(false)
-const dropdown = ref(null)
-
-const isClickOutside = (event: MouseEvent) => {
-  const dropdownElement: any = dropdown.value
-  if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
-    isDropdownOpen.value = false
-  }
-}
-
-const toggleDropdown = () => {
-  isDropdownOpen.value = !isDropdownOpen.value
-}
-
-const toggleOption = (option: Option) => {
-  if (isSelected(option)) {
-    removeOption(option)
-  } else {
-    addOption(option)
-    if (!props.multiple) {
-      isDropdownOpen.value = false
-    }
-  }
-}
-
-const addOption = (option: Option) => {
-  if (props.multiple) {
-    selectedOptions.value = [...selectedOptions.value, option]
-    emit('select', selectedOptions.value)
-  } else {
-    selectedOptions.value = [option]
-    isDropdownOpen.value = false
-    emit('select', selectedOptions.value)
-  }
-
-  emit('update:modelValue', getSelectedValues())
-}
-
-const removeOption = (option: Option) => {
-  selectedOptions.value = selectedOptions.value.filter(
-    (o: { id: string | number }) => o.id !== option.id
-  )
-  emit('update:modelValue', getSelectedValues())
-}
-
-const isSelected = (option: Option): boolean => {
-  return selectedOptions.value.some((o: { id: string | number }) => o.id === option.id)
-}
-
-const getSelectedValues = (): any => {
-  return props.multiple
-    ? selectedOptions.value.map((o: { id: any }) => o.id)
-    : selectedOptions.value[0]?.id || null
-}
-
-onMounted(() => {
-  document.addEventListener('click', isClickOutside)
-})
-
-onUnmounted(() => {
-  document.removeEventListener('click', isClickOutside)
-})
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s;
-}
-
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.rotate-180 {
-  transform: rotate(180deg);
-}
-</style>
diff --git a/src/components/DxhSelect.vue b/src/components/DxhSelect.vue
new file mode 100644
index 0000000..86d1d8e
--- /dev/null
+++ b/src/components/DxhSelect.vue
@@ -0,0 +1,227 @@
+<template>
+  <div class="autocomplete">
+    <label v-if="label" class="block" data-test="label">{{ label }}</label>
+    <div ref="dropdown" class="relative inline-block w-full">
+      <div
+        @click="toggleDropdown"
+        class="cursor-pointer border p-2 flex items-center justify-between bg-white"
+        data-test="dropdown-toggle"
+      >
+        <div
+          v-if="clearable && selectedOptions[0]"
+          class="absolute right-9 top-0 bottom-0 cursor-pointer flex items-center h-full"
+          @click.stop="$emit('update:modelValue', (selectedOptions = []))"
+          data-test="clear-icon"
+        >
+          <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 class="flex items-center space-x-2">
+          <div v-if="!selectedOptions.length" class="text-gray-500" data-test="placeholder">
+            {{ placeholder }}
+          </div>
+          <div
+            class="flex space-x-2"
+            :selected-options="selectedOptions"
+            :remove-option="removeOption"
+          >
+            <div
+              v-for="option in selectedOptions"
+              :key="option.id"
+              :class="chips ? 'bg-gray-200 p-1' : ''"
+            >
+              {{ option.label }}
+              <span v-if="chips" @click.stop="removeOption(option)" class="ml-1 cursor-pointer"
+                >&times;</span
+              >
+            </div>
+          </div>
+        </div>
+        <slot name="dropdown">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            :class="{ 'rotate-180': isDropdownOpen }"
+            class="w-4 h-4 transition-transform transform"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </slot>
+      </div>
+
+      <transition name="fade">
+        <div
+          v-show="isDropdownOpen"
+          class="absolute w-full bg-white border border-gray-300 shadow-md overflow-hidden min-w-[300px]"
+        >
+          <slot name="loading" v-if="loading">
+            <div class="flex w-full justify-center items-center h-12" data-test="loading">
+              <Spinner />
+            </div>
+          </slot>
+          <div v-else :options="options" :toggle-option="toggleOption">
+            <div
+              v-for="option in options"
+              :key="option.id"
+              @click="toggleOption(option)"
+              class="p-2 hover:bg-gray-100 cursor-pointer"
+              :data-test="'dropdown-option-' + option.id"
+            >
+              <slot name="prepend" v-if="multiple">
+                <input
+                  type="checkbox"
+                  :checked="isSelected(option)"
+                  @click.stop="toggleOption(option)"
+                />
+              </slot>
+              {{ option.label }}
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+    <p v-if="hint" class="text-sm text-gray-500 mt-1" data-test="hint">{{ 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
+}
+
+const props = defineProps({
+  modelValue: [Array, String, Object],
+  label: {
+    type: String,
+    required: false
+  },
+  options: [Array, String, Object],
+  multiple: {
+    type: Boolean,
+    required: false
+  },
+  loading: {
+    type: Boolean,
+    required: false
+  },
+  chips: {
+    type: Boolean,
+    required: false
+  },
+  clearable: {
+    type: Boolean,
+    required: false
+  },
+  placeholder: {
+    type: String,
+    required: false
+  },
+  hint: {
+    type: String,
+    required: false
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'select'])
+
+const selectedOptions: any = ref([])
+const isDropdownOpen = ref(false)
+const dropdown = ref(null)
+
+const isClickOutside = (event: MouseEvent) => {
+  const dropdownElement: any = dropdown.value
+  if (dropdownElement && !dropdownElement.contains(event.target as Node)) {
+    isDropdownOpen.value = false
+  }
+}
+
+const toggleDropdown = () => {
+  isDropdownOpen.value = !isDropdownOpen.value
+}
+
+const toggleOption = (option: Option) => {
+  if (isSelected(option)) {
+    removeOption(option)
+  } else {
+    addOption(option)
+    if (!props.multiple) {
+      isDropdownOpen.value = false
+    }
+  }
+}
+
+const addOption = (option: Option) => {
+  if (props.multiple) {
+    selectedOptions.value = [...selectedOptions.value, option]
+    emit('select', selectedOptions.value)
+  } else {
+    selectedOptions.value = [option]
+    isDropdownOpen.value = false
+    emit('select', selectedOptions.value)
+  }
+
+  emit('update:modelValue', getSelectedValues())
+}
+
+const removeOption = (option: Option) => {
+  selectedOptions.value = selectedOptions.value.filter(
+    (o: { id: string | number }) => o.id !== option.id
+  )
+  emit('update:modelValue', getSelectedValues())
+}
+
+const isSelected = (option: Option): boolean => {
+  return selectedOptions.value.some((o: { id: string | number }) => o.id === option.id)
+}
+
+const getSelectedValues = (): any => {
+  return props.multiple
+    ? selectedOptions.value.map((o: { id: any }) => o.id)
+    : selectedOptions.value[0]?.id || null
+}
+
+onMounted(() => {
+  document.addEventListener('click', isClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', isClickOutside)
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.rotate-180 {
+  transform: rotate(180deg);
+}
+</style>
diff --git a/src/components/__tests__/DSelect.spec copy.ts b/src/components/__tests__/DxhSelect.spec.ts
similarity index 78%
rename from src/components/__tests__/DSelect.spec copy.ts
rename to src/components/__tests__/DxhSelect.spec.ts
index b2dafd6..821149f 100644
--- a/src/components/__tests__/DSelect.spec copy.ts	
+++ b/src/components/__tests__/DxhSelect.spec.ts
@@ -1,15 +1,15 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
-import DSelect from '../DSelect.vue'
+import DxhSelect from '../DxhSelect.vue'
 
-describe('DSelect.vue', () => {
-  let wrapper: any
+describe('DxhSelect.vue', () => {
+  let wrapper:any
 
   beforeEach(() => {
-    wrapper = mount(DSelect, {
+    wrapper = mount(DxhSelect, {
       props: {
         modelValue: [],
-        label: 'Dropdown Label',
+        label: 'Your Label',
         options: [
           { id: 1, label: 'Option 1' },
           { id: 2, label: 'Option 2' },
@@ -19,7 +19,7 @@ describe('DSelect.vue', () => {
         chips: true,
         clearable: true,
         placeholder: 'Select an option',
-        hint: 'Dropdown Hint'
+        hint: 'Your Hint'
       }
     })
   })
@@ -30,10 +30,10 @@ describe('DSelect.vue', () => {
 
   it('renders with correct initial state', () => {
     expect(wrapper.find('label').exists()).toBe(true)
-    expect(wrapper.find('label').text()).toBe('Dropdown Label')
+    expect(wrapper.find('label').text()).toBe('Your Label')
     expect(wrapper.find('.text-gray-500').text()).toBe('Select an option')
-    expect(wrapper.find('p').text()).toBe('Dropdown Hint')
-    expect(wrapper.find('[data-test="clear-icon"]').exists()).toBe(true)
+    expect(wrapper.find('p').text()).toBe('Your Hint')
+    expect(wrapper.find('[data-test="clear-icon"]').exists()).toBe(false)
     expect(wrapper.vm.isDropdownOpen).toBe(false)
   })
 
@@ -43,7 +43,7 @@ describe('DSelect.vue', () => {
 
     await wrapper.find('[data-test="dropdown-option-1"]').trigger('click')
     expect(wrapper.vm.selectedOptions).toEqual([{ id: 1, label: 'Option 1' }])
-    expect(wrapper.vm.isDropdownOpen).toBe(false)
+    expect(wrapper.vm.isDropdownOpen).toBe(true)
 
     expect(wrapper.emitted('update:modelValue')).toBeTruthy()
     expect(wrapper.emitted('update:modelValue')[0][0]).toEqual([1])

From fa7202c5250c5c1112cf055997791b33fd68c63d Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 18:37:02 +0600
Subject: [PATCH 4/6] select

---
 src/components/DxhSelect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/DxhSelect.vue b/src/components/DxhSelect.vue
index 86d1d8e..1484a59 100644
--- a/src/components/DxhSelect.vue
+++ b/src/components/DxhSelect.vue
@@ -111,12 +111,12 @@ interface Option {
 }
 
 const props = defineProps({
-  modelValue: [Array, String, Object],
+  modelValue: [Array, String, Object, Number],
   label: {
     type: String,
     required: false
   },
-  options: [Array, String, Object],
+  options: [Array, String, Object, Number],
   multiple: {
     type: Boolean,
     required: false

From af3e3928c501a058f4c30dd99a4c9cd4b8b4c3df Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 6 Dec 2023 18:38:08 +0600
Subject: [PATCH 5/6] select

---
 src/App.vue | 64 +++--------------------------------------------------
 1 file changed, 3 insertions(+), 61 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f00af1b..a0d7a19 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,63 +1,5 @@
-<!-- TestAutocomplete.vue -->
 <template>
-  <div class="p-20">
-    <Autocomplete
-      v-model="selectedOption"
-      :loading="false"
-      :options="filteredOptions"
-      placeholder="Type to search"
-      :clearable="true"
-      hint="Type to search or select an option"
-      chips
-      
-    >
-    </Autocomplete>
-
-    <div class="mt-4">
-      <p>Selected Option: {{ selectedOption }}</p>
-      <p v-if="loading" class="text-blue-500">Loading...</p>
-    </div>
-  </div>
+  <main>
+    Vue-Tailwind
+  </main>
 </template>
-
-<script setup lang="ts">
-import Autocomplete from './components/DxhSelect.vue';
-import { ref, computed, watch } from 'vue';
-
-const loading = ref(false);
-const selectedOption = ref<string | null>(null);
-const options = ref([
-  { id: 1, label: 'Option 1' },
-  { id: 2, label: 'Option 2' },
-  { id: 3, label: 'Option 3' },
-  { id: 4, label: 'Caption 3' },
-  { id: 5, label: 'Fiction 3' },
-  { id: 6, label: 'Dell 3' },
-]);
-
-const clearable = ref(true);
-const disabled = ref(false);
-const readonly = ref(false);
-const autofocus = ref(false);
-const inputValue = ref('');
-
-const filteredOptions = computed(() => {
-  return options.value.filter(option => option.label.toLowerCase().includes(inputValue.value.toLowerCase()));
-});
-
-const handleChange = (value) => {
-  inputValue.value = value;
-};
-
-const handleEnter = () => {
-  console.log('Enter key pressed');
-};
-
-const handleSelected = (option) => {
-  console.log(option);
-};
-
-setTimeout(() => {
-  loading.value = false;
-}, 2000);
-</script>

From a46a48682d0e2fb97f155fc7bc5a93a35614938c Mon Sep 17 00:00:00 2001
From: git-mahade <git-mahade@devxhub.com>
Date: Wed, 13 Dec 2023 15:20:06 +0600
Subject: [PATCH 6/6] select

---
 src/App.vue                  | 46 +++++++++++++++++++--
 src/components/DxhSelect.vue | 78 ++++++++++++++----------------------
 2 files changed, 72 insertions(+), 52 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a0d7a19..dc48eaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,45 @@
 <template>
-  <main>
-    Vue-Tailwind
-  </main>
+  <div>
+    <Autocomplete
+      v-model="selectedOptions"
+      :label="label"
+      :options="options"
+      :multiple="multiple"
+      :loading="loading"
+      :chips="chips"
+      :clearable="clearable"
+      :placeholder="placeholder"
+      :hint="hint"
+      @select="handleSelect"
+    >
+      <template #clear="{ onClick }">
+        <div @click="onClick">
+          cl
+        </div>
+      </template>
+    </Autocomplete>
+  </div>
 </template>
+
+<script setup lang="ts">
+import Autocomplete from './components/DxhSelect.vue'
+import { ref } from 'vue'
+
+const selectedOptions = ref([])
+const label = 'Select Options'
+const options = [
+  { id: 1, label: 'Option 1' },
+  { id: 2, label: 'Option 2' },
+  { id: 3, label: 'Option 3' }
+]
+const multiple = true
+const loading = false
+const chips = true
+const clearable = true
+const placeholder = 'Select an option'
+const hint = 'This is a hint.'
+
+const handleSelect = (value) => {
+  console.log('Selected Options:', value)
+}
+</script>
diff --git a/src/components/DxhSelect.vue b/src/components/DxhSelect.vue
index 1484a59..61f943a 100644
--- a/src/components/DxhSelect.vue
+++ b/src/components/DxhSelect.vue
@@ -10,15 +10,15 @@
         <div
           v-if="clearable && selectedOptions[0]"
           class="absolute right-9 top-0 bottom-0 cursor-pointer flex items-center h-full"
-          @click.stop="$emit('update:modelValue', (selectedOptions = []))"
           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"
@@ -47,7 +47,7 @@
             </div>
           </div>
         </div>
-        <slot name="dropdown">
+        <slot name="dropdown" :isOpen="isDropdownOpen">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
@@ -76,7 +76,7 @@
               <Spinner />
             </div>
           </slot>
-          <div v-else :options="options" :toggle-option="toggleOption">
+          <div v-else>
             <div
               v-for="option in options"
               :key="option.id"
@@ -84,13 +84,12 @@
               class="p-2 hover:bg-gray-100 cursor-pointer"
               :data-test="'dropdown-option-' + option.id"
             >
-              <slot name="prepend" v-if="multiple">
-                <input
-                  type="checkbox"
-                  :checked="isSelected(option)"
-                  @click.stop="toggleOption(option)"
-                />
-              </slot>
+              <input
+                v-if="multiple"
+                type="checkbox"
+                :checked="isSelected(option)"
+                @click.stop="toggleOption(option)"
+              />
               {{ option.label }}
             </div>
           </div>
@@ -110,38 +109,17 @@ interface Option {
   label: string
 }
 
-const props = defineProps({
-  modelValue: [Array, String, Object, Number],
-  label: {
-    type: String,
-    required: false
-  },
-  options: [Array, String, Object, Number],
-  multiple: {
-    type: Boolean,
-    required: false
-  },
-  loading: {
-    type: Boolean,
-    required: false
-  },
-  chips: {
-    type: Boolean,
-    required: false
-  },
-  clearable: {
-    type: Boolean,
-    required: false
-  },
-  placeholder: {
-    type: String,
-    required: false
-  },
-  hint: {
-    type: String,
-    required: false
-  }
-})
+const props = defineProps<{
+  modelValue: any
+  label?: string
+  options: any
+  multiple?: boolean
+  loading?: boolean
+  chips?: boolean
+  clearable?: boolean
+  placeholder?: string
+  hint?: string
+}>()
 
 const emit = defineEmits(['update:modelValue', 'select'])
 
@@ -156,11 +134,15 @@ const isClickOutside = (event: MouseEvent) => {
   }
 }
 
+const clearInput = () => {
+  emit('update:modelValue', (selectedOptions.value = []))
+}
+
 const toggleDropdown = () => {
   isDropdownOpen.value = !isDropdownOpen.value
 }
 
-const toggleOption = (option: Option) => {
+const toggleOption = (option: any) => {
   if (isSelected(option)) {
     removeOption(option)
   } else {
@@ -184,14 +166,12 @@ const addOption = (option: Option) => {
   emit('update:modelValue', getSelectedValues())
 }
 
-const removeOption = (option: Option) => {
-  selectedOptions.value = selectedOptions.value.filter(
-    (o: { id: string | number }) => o.id !== option.id
-  )
+const removeOption = (option: any) => {
+  selectedOptions.value = selectedOptions.value.filter((o: { id: number }) => o.id !== option.id)
   emit('update:modelValue', getSelectedValues())
 }
 
-const isSelected = (option: Option): boolean => {
+const isSelected = (option: any): boolean => {
   return selectedOptions.value.some((o: { id: string | number }) => o.id === option.id)
 }