@saasmakers/ui 1.4.30 → 1.4.32

package/app/components/fields/FieldSelect.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
+import type { FieldInput } from '#components'
 import { vOnClickOutside } from '@vueuse/components'
-import { refDebounced } from '@vueuse/core'
 import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
@@ -41,11 +41,16 @@ const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
 
 const opened = ref(false)
 const searchRaw = ref('')
-const searchQuery = refDebounced(searchRaw, 250)
 
-const searchInput = ref<{
-  focus: () => void
-}>()
+const searchInput = ref<InstanceType<typeof FieldInput>>()
+
+const computedColumns = computed(() => {
+  if (props.columns.length > 0) {
+    return props.columns
+  }
+
+  return [{ options: computedOptions.value }]
+})
 
 const computedOptions = computed(() => {
   const options: FieldSelectOption[] = []
@@ -67,33 +72,22 @@ const computedOptions = computed(() => {
   return options
 })
 
-const computedColumns = computed(() => {
-  if (props.columns.length > 0) {
-    return props.columns
-  }
-
-  return [{ options: computedOptions.value }]
-})
-
-const selectedOption = computed(() => {
-  return computedOptions.value.find((option) => {
-    return option.value === modelValue.value
-  })
+const searchQueryCleaned = computed(() => {
+  return normalizeText(searchRaw.value.trim())
 })
 
 const filteredColumns = computed(() => {
-  const searchQueryCleaned = normalizeText(searchQuery.value.trim())
-
-  if (!props.searchable || !searchQueryCleaned) {
+  if (!props.searchable || !searchQueryCleaned.value) {
     return computedColumns.value
   }
 
   return computedColumns.value
     .map(column => ({
       ...column,
-      options: column.options.filter(option =>
-        normalizeText(option.text).includes(searchQueryCleaned),
-      ),
+      options: column.options.filter((option) => {
+        return normalizeText(option.text).includes(searchQueryCleaned.value)
+          || normalizeText(option.value).includes(searchQueryCleaned.value)
+      }),
     }))
     .filter(column => column.options.length > 0)
 })
@@ -102,6 +96,16 @@ const hasFilteredResults = computed(() => {
   return filteredColumns.value.some(column => column.options.length > 0)
 })
 
+const selectedOption = computed(() => {
+  return computedOptions.value.find((option) => {
+    return option.value === modelValue.value
+  })
+})
+
+const showNoResults = computed(() => {
+  return props.searchable && !!searchQueryCleaned.value && !hasFilteredResults.value
+})
+
 watch(opened, (isOpened) => {
   if (isOpened && props.searchable) {
     nextTick(() => {
@@ -168,6 +172,12 @@ function onOptionKeyDown(event: KeyboardEvent) {
   }
 }
 
+function onSearchKeyup(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    reset()
+  }
+}
+
 function reset() {
   opened.value = false
   searchRaw.value = ''
@@ -296,16 +306,18 @@ function selectOption(event: MouseEvent, value: string) {
               <FieldInput
                 ref="searchInput"
                 v-model="searchRaw"
+                :autocomplete="false"
+                background="white"
                 border="none"
                 class="px-3"
                 :placeholder="searchPlaceholder || t('search')"
-                size="sm"
-                type="search"
+                :size="size"
+                @keyup="onSearchKeyup"
               />
             </div>
 
             <div
-              v-if="searchable && !hasFilteredResults"
+              v-if="showNoResults"
               class="px-3 py-2 text-center text-gray-600 dark:text-gray-400"
             >
               {{ t('noResults') }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "1.4.30",
+  "version": "1.4.32",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",