@saasmakers/ui 1.4.33 → 1.4.34

package/app/components/fields/FieldInput.vue

@@ -31,6 +31,7 @@ const props = withDefaults(defineProps<Omit<FieldInput, 'modelValue'>>(), {
 const emit = defineEmits<{
   blur: [event: FocusEvent]
   focus: [event: FocusEvent]
+  keydown: [event: KeyboardEvent, value: string]
   keyup: [event: KeyboardEvent, value: string ]
   submit: [event: KeyboardEvent, value: string ]
 }>()
@@ -126,6 +127,12 @@ function onFieldKeyDown(event: KeyboardEvent) {
     return event.preventDefault()
   }
 
+  emit('keydown', event, value)
+}
+
+function onFieldKeyUp(event: KeyboardEvent) {
+  const value = (event.target as HTMLInputElement).value
+
   emit('keyup', event, value)
 }
 
@@ -202,6 +209,7 @@ defineExpose({ focus })
         @focus="onFieldFocus"
         @input="onFieldInput"
         @keydown="onFieldKeyDown"
+        @keyup="onFieldKeyUp"
       >
 
       <BaseSpinner

package/app/components/fields/FieldSelect.vue

@@ -92,8 +92,10 @@ const filteredColumns = computed(() => {
     .filter(column => column.options.length > 0)
 })
 
-const hasFilteredResults = computed(() => {
-  return filteredColumns.value.some(column => column.options.length > 0)
+const firstFilteredOption = computed(() => {
+  const column = filteredColumns.value.find(column => column.options.length > 0)
+
+  return column?.options[0]
 })
 
 const selectedOption = computed(() => {
@@ -102,10 +104,6 @@ const selectedOption = computed(() => {
   })
 })
 
-const showNoResults = computed(() => {
-  return props.searchable && !!searchQueryCleaned.value && !hasFilteredResults.value
-})
-
 watch(opened, (isOpened) => {
   if (isOpened && props.searchable) {
     nextTick(() => {
@@ -172,10 +170,14 @@ function onOptionKeyDown(event: KeyboardEvent) {
   }
 }
 
-function onSearchKeyup(event: KeyboardEvent) {
+function onSearchKeydown(event: KeyboardEvent) {
   if (event.key === 'Escape') {
     reset()
   }
+  else if (event.key === 'Enter' && !props.disabled && firstFilteredOption.value) {
+    event.preventDefault()
+    onOptionClick(event as unknown as MouseEvent, firstFilteredOption.value)
+  }
 }
 
 function reset() {
@@ -312,12 +314,12 @@ function selectOption(event: MouseEvent, value: string) {
                 class="px-3"
                 :placeholder="searchPlaceholder || t('search')"
                 :size="size"
-                @keyup="onSearchKeyup"
+                @keydown="onSearchKeydown"
               />
             </div>
 
             <div
-              v-if="showNoResults"
+              v-if="searchable && searchQueryCleaned && !firstFilteredOption"
               class="flex justify-center border-b border-gray-200 p-3 dark:border-gray-800"
             >
               <BaseIcon

package/package.json

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