From 7f21cc24b2a618d6807cd89b5087c4c4fc6a576e Mon Sep 17 00:00:00 2001
From: Arpit Singh <arpitsingh@Mac.mshome.net>
Date: Sat, 27 Jul 2024 15:54:14 +0530
Subject: [PATCH] Added Combobox

---
 package.json                      |   3 +-
 src/components/smart/Combobox.vue | 187 ++++++++++++++++++++++++++++++
 src/components/smart/index.ts     |   1 +
 src/stories/Combobox.story.vue    |  11 ++
 4 files changed, 201 insertions(+), 1 deletion(-)
 create mode 100644 src/components/smart/Combobox.vue
 create mode 100644 src/stories/Combobox.story.vue

diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/smart/Combobox.vue b/src/components/smart/Combobox.vue
new file mode 100644
index 0000000..1e6c7b2
--- /dev/null
+++ b/src/components/smart/Combobox.vue
@@ -0,0 +1,187 @@
+<template>
+  <div ref="dropdownRef" class="relative">
+    <div class="flex items-center w-25 px-4 py-2 border rounded cursor-pointer" @click="toggleDropdown">
+      <span class="flex-grow">{{ selectedItem || placeholder }}</span>
+      <span class="ml-2">&#9662;</span> <!-- Arrow symbol -->
+    </div>
+    <div 
+      v-if="isOpen" 
+      class="absolute w-25 mt-1 bg-white border rounded shadow-lg"
+    >
+      <input 
+        type="text" 
+        v-model="searchTerm" 
+        @input="onSearch" 
+        :placeholder="searchPlaceholder"
+        class="w-full px-4 py-2 border-b border-gray-300 rounded-t"
+      />
+      <ul>
+        <li 
+          v-for="(item, index) in filteredItems" 
+          :key="index" 
+          @mousedown.prevent="selectItem(item)"
+          class="px-4 py-2 cursor-pointer hover:bg-gray-100"
+        >
+          {{ item }}
+        </li>
+        <li v-if="filteredItems.length === 0" class="px-4 py-2 text-gray-500">
+          No results found
+        </li>
+      </ul>
+    </div>
+    <input 
+      type="text" 
+      v-model="inputValue" 
+      @input="onInput" 
+      @focus="isOpen = true"
+      @blur="onBlur"
+      :placeholder="placeholder"
+      class="hidden"  
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
+
+interface Props {
+  items: string,
+  placeholder?: string,
+  searchPlaceholder?: string,
+  modelValue?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select an item',
+  searchPlaceholder: 'Search...',
+  modelValue: ''
+})
+
+const emits = defineEmits(['update:modelValue'])
+
+const isOpen = ref(false)
+const inputValue = ref(props.modelValue || '')
+const selectedItem = ref<string | null>(props.modelValue || null)
+const dropdownRef = ref<HTMLElement | null>(null)
+const searchTerm = ref('')
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+  if (isOpen.value) {
+    searchTerm.value = '' // Reset search term to show all items
+  }
+}
+
+const onInput = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  inputValue.value = target.value
+  emits('update:modelValue', inputValue.value)
+}
+
+const selectItem = (item: string) => {
+  inputValue.value = item
+  selectedItem.value = item
+  emits('update:modelValue', item)
+  isOpen.value = false
+}
+
+const onBlur = () => {
+  setTimeout(() => {
+    isOpen.value = false
+  }, 100)
+}
+
+// Handle clicks outside the component to close the dropdown
+const handleClickOutside = (event: MouseEvent) => {
+  if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
+    isOpen.value = false
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+
+// Watch for changes in `modelValue` and update `selectedItem`
+watch(() => props.modelValue, (newVal) => {
+  selectedItem.value = newVal
+})
+
+const filteredItems = computed(() => {
+  const itemsArray = props.items.split(',').map(item => item.trim()).filter(item => item)
+  if (searchTerm.value) {
+    return itemsArray.filter(item => item.toLowerCase().includes(searchTerm.value.toLowerCase()))
+  }
+  return itemsArray
+})
+
+const onSearch = () => {
+  // This function can be used for additional actions on search input if needed
+}
+</script>
+
+<style lang="scss" scoped>
+.relative {
+  position: relative;
+}
+.flex {
+  display: flex;
+}
+.items-center {
+  align-items: center;
+}
+.w-25 {
+  width: 25%;
+}
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+.border {
+  border-width: 1px;
+}
+.rounded {
+  border-radius: 0.25rem;
+}
+.mt-1 {
+  margin-top: 0.25rem;
+}
+.bg-white {
+  background-color: white;
+}
+.shadow-lg {
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+.absolute {
+  position: absolute;
+}
+.cursor-pointer {
+  cursor: pointer;
+}
+.hover\:bg-gray-100:hover {
+  background-color: #f7fafc;
+}
+.text-gray-500 {
+  color: #6b7280;
+}
+.ml-2 {
+  margin-left: 0.5rem;
+}
+.hidden {
+  display: none;
+}
+.w-full {
+  width: 100%;
+}
+.border-b {
+  border-bottom-width: 1px;
+}
+</style>
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 8ec827c..367d660 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,3 +25,4 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
+export { default as HoppSmartCombobox } from "./Combobox.vue"
diff --git a/src/stories/Combobox.story.vue b/src/stories/Combobox.story.vue
new file mode 100644
index 0000000..b81cab0
--- /dev/null
+++ b/src/stories/Combobox.story.vue
@@ -0,0 +1,11 @@
+<template>
+  <Story title="Combobox">
+    <Variant title="Single">
+      <HoppSmartCombobox />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartCombobox } from "../components/smart"
+</script>