make it better

Author: Pachara

components/Hero/CarBox.vue

@@ -7,11 +7,9 @@
         <div class="col-12 bg-light p-2">
           <div class="row">
             <div class="col-6">
-              <span style="padding-left:2px;"><i class="bi bi-geo-alt-fill"></i> รับรถที่จังหวัด</span>
-              <div class="border rounded-3 p-2 bg-dark text-primary" style="margin-top:2px;">
-                นครศรีธรรมราช
-              </div>
-            </div>
+            <span style="padding-left:2px;" ><i class="bi bi-geo-alt-fill"></i> รับรถที่จังหวัด</span>
+            <ProvinceSelect v-model="selectedProvince" :options="provinces"  style="margin-top:2px;" />
+          </div>
             <div class="col-3">
               <span style="padding-left:2px;"><i class="bi bi-calendar3"></i> รับรถ</span>
               <div class="border rounded-3 p-2 bg-dark text-primary" style="margin-top:2px;">14 ม.ย.</div>
@@ -64,6 +62,12 @@
   </template>
 
   <script setup>
+  const provinces = [
+  'กรุงเทพมหานคร', 'เชียงใหม่', 'ขอนแก่น', 'ชลบุรี', 'ภูเก็ต',
+  'นครราชสีมา', 'นครศรีธรรมราช', 'อุบลราชธานี', 'สงขลา', 'สุราษฎร์ธานี'
+]
+
+const selectedProvince = ref('นครศรีธรรมราช')
   </script>
 
   <style scoped>

components/ProvinceSelect.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="position-relative">
+      <div
+        class="form-control bg-dark text-primary border rounded-3 d-flex justify-content-between align-items-center"
+        @click="toggleDropdown"
+        style="cursor: pointer;"
+      >
+        {{ selected || 'เลือกจังหวัด' }}
+        <i class="bi" :class="dropdownOpen ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
+      </div>
+  
+      <div
+        v-if="dropdownOpen"
+        class="position-absolute w-100 z-10 bg-white border rounded-3 mt-1 shadow-sm"
+        style="max-height: 200px; overflow-y: auto;"
+      >
+        <input
+          v-model="search"
+          type="text"
+          class="form-control border-0 border-bottom rounded-0"
+          placeholder="ค้นหา..."
+          @click.stop
+        />
+  
+        <div
+          v-for="province in filtered"
+          :key="province"
+          :class="[
+            'px-3 py-2 dropdown-item bg-white hover-bg d-flex justify-between align-items-center',
+            province === selected ? 'fw-bold text-primary' : ''
+          ]"
+          style="cursor: pointer;"
+          @mousedown.prevent="select(province)"
+        >
+          <span>{{ province }}</span>
+          <i v-if="province === selected" class="bi bi-check2-circle ms-auto"></i>
+        </div>
+  
+        <div v-if="!filtered.length" class="text-muted text-center py-2">
+          ไม่พบจังหวัด
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  
+  const props = defineProps({
+    modelValue: String,
+    options: {
+      type: Array,
+      default: () => []
+    }
+  })
+  const emit = defineEmits(['update:modelValue'])
+  
+  const search = ref('')
+  const selected = computed(() => props.modelValue)
+  const dropdownOpen = ref(false)
+  
+  const filtered = computed(() =>
+    props.options.filter(p =>
+      p.toLowerCase().includes(search.value.toLowerCase())
+    )
+  )
+  
+  const toggleDropdown = () => {
+    dropdownOpen.value = !dropdownOpen.value
+  }
+  
+  const select = (province) => {
+    emit('update:modelValue', province)
+    search.value = ''
+    dropdownOpen.value = false
+  }
+  
+  const handleClickOutside = (e) => {
+    if (!e.target.closest('.position-relative')) {
+      dropdownOpen.value = false
+    }
+  }
+  onMounted(() => {
+    window.addEventListener('click', handleClickOutside)
+  })
+  onUnmounted(() => {
+    window.removeEventListener('click', handleClickOutside)
+  })
+  </script>
+  
+  <style scoped>
+  .hover-bg:hover {
+    background-color: #333 !important;
+    color: #F16E00 !important;
+    font-weight:bold
+  }
+  </style>
+  

package.json

@@ -18,21 +18,21 @@
     "@splidejs/splide-extension-auto-scroll": "^0.5.3",
     "add": "^2.0.6",
     "boosted": "5.3.3",
-    "bootstrap-icons": "^1.11.3",
+    "bootstrap-icons": "^1.13.1",
     "google-fonts": "^1.0.0",
-    "gsap": "^3.12.5",
+    "gsap": "^3.13.0",
     "lottie-web": "^5.12.2",
     "module": "^1.2.5",
-    "nuxi": "^3.12.0",
-    "nuxt": "^3.12.3",
-    "nuxt-delay-hydration": "^1.3.5",
+    "nuxi": "^3.25.1",
+    "nuxt": "^3.17.3",
+    "nuxt-delay-hydration": "^1.3.8",
     "sass-loader": "^10.5.2",
-    "vite": "^5.3.4",
-    "vite-plugin-vue-inspector": "^5.1.2",
+    "vite": "^5.4.19",
+    "vite-plugin-vue-inspector": "^5.3.1",
     "vue": "latest",
     "vue3-marquee-slider": "^1.0.5"
   },
   "devDependencies": {
-    "sass": "^1.77.8"
+    "sass": "^1.88.0"
   }
 }

pages/test.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { ref, computed } from 'vue'
+
+const search = ref('')
+const suggestions = ['apple', 'banana', 'cherry', 'apricot']
+const filtered = computed(() =>
+  search.value
+    ? suggestions.filter(item => item.toLowerCase().includes(search.value.toLowerCase()))
+    : []
+)
+
+const selectSuggestion = (item) => {
+  search.value = item
+}
+</script>
+
+<template>
+  <div class="position-relative">
+    <input
+      v-model="search"
+      type="text"
+      class="form-control"
+      placeholder="Search..."
+    />
+
+    <ul v-if="filtered.length" class="list-group position-absolute w-100 z-10">
+      <li
+        v-for="item in filtered"
+        :key="item"
+        class="list-group-item list-group-item-action"
+        @click="selectSuggestion(item)"
+      >
+        {{ item }}
+      </li>
+    </ul>
+  </div>
+</template>