@saasmakers/ui 1.4.33 → 1.4.35

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/app/types/global.d.ts

@@ -1,102 +1,99 @@
 import type { Directive } from 'vue'
-import type { LayerIconIcon as LayerIconIconType, LayerIconValue as LayerIconValueType } from '../composables/useLayerIcons'
-import type * as Bases from './bases'
-import type * as Fields from './fields'
 
 declare global {
   // Bases
-  type BaseAlert = Bases.BaseAlert
-  type BaseAlignment = Bases.BaseAlignment
-
-  type BaseAvatar = Bases.BaseAvatar
-  type BaseBackground = Bases.BaseBackground
-  type BaseBordered = Bases.BaseBordered
-  type BaseBorderedColor = Bases.BaseBorderedColor
-  type BaseButton = Bases.BaseButton
-  type BaseButtonRounded = Bases.BaseButtonRounded
-  type BaseButtonSize = Bases.BaseButtonSize
-  type BaseButtonType = Bases.BaseButtonType
-  type BaseCharacter = Bases.BaseCharacter
-  type BaseCharacterCharacter = Bases.BaseCharacterCharacter
-  type BaseCharacterSize = Bases.BaseCharacterSize
-  type BaseChart = Bases.BaseChart
-  type BaseChartType = Bases.BaseChartType
-  type BaseColor = Bases.BaseColor
-  type BaseDivider = Bases.BaseDivider
-  type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
-  type BaseDividerNavigateDirection = Bases.BaseDividerNavigateDirection
-  type BaseDividerSize = Bases.BaseDividerSize
-  type BaseEmoji = Bases.BaseEmoji
-  type BaseHeading = Bases.BaseHeading
-  type BaseHeadingAlignment = Bases.BaseHeadingAlignment
-  type BaseHeadingSize = Bases.BaseHeadingSize
-  type BaseHeadingTag = Bases.BaseHeadingTag
-  type BaseIcon = Bases.BaseIcon
-  type BaseMessage = Bases.BaseMessage
-  type BaseMetric = Bases.BaseMetric
-  type BaseMetricAlignment = Bases.BaseMetricAlignment
-  type BaseMetricPerformance = Bases.BaseMetricPerformance
-  type BaseMetricSize = Bases.BaseMetricSize
-  type BaseOverlay = Bases.BaseOverlay
-  type BaseOverlayOpacity = Bases.BaseOverlayOpacity
-  type BaseOverlayPosition = Bases.BaseOverlayPosition
-  type BaseParagraph = Bases.BaseParagraph
-  type BaseParagraphAlignment = Bases.BaseParagraphAlignment
-  type BaseParagraphSize = Bases.BaseParagraphSize
-  type BasePower = Bases.BasePower
-  type BasePowerPower = Bases.BasePowerPower
-  type BasePowerSize = Bases.BasePowerSize
-  type BaseQuote = Bases.BaseQuote
-  type BaseQuoteBackground = Bases.BaseQuoteBackground
-  type BaseQuoteSize = Bases.BaseQuoteSize
-  type BaseSize = Bases.BaseSize
-  type BaseSpinner = Bases.BaseSpinner
-  type BaseStatus = Bases.BaseStatus
-  type BaseTag = Bases.BaseTag
-  type BaseTags = Bases.BaseTags
-  type BaseTagSize = Bases.BaseTagSize
-  type BaseText = Bases.BaseText
-  type BaseTextText = Bases.BaseTextText
-  type BaseToast = Bases.BaseToast
-  type BaseToastAction = Bases.BaseToastAction
+  type BaseAlert = import('./bases').BaseAlert
+  type BaseAlignment = import('./bases').BaseAlignment
+  type BaseAvatar = import('./bases').BaseAvatar
+  type BaseBackground = import('./bases').BaseBackground
+  type BaseBordered = import('./bases').BaseBordered
+  type BaseBorderedColor = import('./bases').BaseBorderedColor
+  type BaseButton = import('./bases').BaseButton
+  type BaseButtonRounded = import('./bases').BaseButtonRounded
+  type BaseButtonSize = import('./bases').BaseButtonSize
+  type BaseButtonType = import('./bases').BaseButtonType
+  type BaseCharacter = import('./bases').BaseCharacter
+  type BaseCharacterCharacter = import('./bases').BaseCharacterCharacter
+  type BaseCharacterSize = import('./bases').BaseCharacterSize
+  type BaseChart = import('./bases').BaseChart
+  type BaseChartType = import('./bases').BaseChartType
+  type BaseColor = import('./bases').BaseColor
+  type BaseDivider = import('./bases').BaseDivider
+  type BaseDividerBorderStyle = import('./bases').BaseDividerBorderStyle
+  type BaseDividerNavigateDirection = import('./bases').BaseDividerNavigateDirection
+  type BaseDividerSize = import('./bases').BaseDividerSize
+  type BaseEmoji = import('./bases').BaseEmoji
+  type BaseHeading = import('./bases').BaseHeading
+  type BaseHeadingAlignment = import('./bases').BaseHeadingAlignment
+  type BaseHeadingSize = import('./bases').BaseHeadingSize
+  type BaseHeadingTag = import('./bases').BaseHeadingTag
+  type BaseIcon = import('./bases').BaseIcon
+  type BaseMessage = import('./bases').BaseMessage
+  type BaseMetric = import('./bases').BaseMetric
+  type BaseMetricAlignment = import('./bases').BaseMetricAlignment
+  type BaseMetricPerformance = import('./bases').BaseMetricPerformance
+  type BaseMetricSize = import('./bases').BaseMetricSize
+  type BaseOverlay = import('./bases').BaseOverlay
+  type BaseOverlayOpacity = import('./bases').BaseOverlayOpacity
+  type BaseOverlayPosition = import('./bases').BaseOverlayPosition
+  type BaseParagraph = import('./bases').BaseParagraph
+  type BaseParagraphAlignment = import('./bases').BaseParagraphAlignment
+  type BaseParagraphSize = import('./bases').BaseParagraphSize
+  type BasePower = import('./bases').BasePower
+  type BasePowerPower = import('./bases').BasePowerPower
+  type BasePowerSize = import('./bases').BasePowerSize
+  type BaseQuote = import('./bases').BaseQuote
+  type BaseQuoteBackground = import('./bases').BaseQuoteBackground
+  type BaseQuoteSize = import('./bases').BaseQuoteSize
+  type BaseSize = import('./bases').BaseSize
+  type BaseSpinner = import('./bases').BaseSpinner
+  type BaseStatus = import('./bases').BaseStatus
+  type BaseTag = import('./bases').BaseTag
+  type BaseTags = import('./bases').BaseTags
+  type BaseTagSize = import('./bases').BaseTagSize
+  type BaseText = import('./bases').BaseText
+  type BaseTextText = import('./bases').BaseTextText
+  type BaseToast = import('./bases').BaseToast
+  type BaseToastAction = import('./bases').BaseToastAction
 
   // Libraries
   type ChartistBarChartData = import('chartist').BarChartData
   type ChartistLineChartData = import('chartist').LineChartData
-
   type ChartistOptions = import('chartist').Options
   type ChartistPieChartData = import('chartist').PieChartData
+
   // Fields
-  type FieldAvatar = Fields.FieldAvatar
-  type FieldBackground = Fields.FieldBackground
-  type FieldCheckbox = Fields.FieldCheckbox
-  type FieldDays = Fields.FieldDays
-  type FieldEmojis = Fields.FieldEmojis
-  type FieldInput = Fields.FieldInput
-  type FieldInputAlignment = Fields.FieldInputAlignment
-  type FieldInputBorder = Fields.FieldInputBorder
-  type FieldInputType = Fields.FieldInputType
-  type FieldLabel = Fields.FieldLabel
-  type FieldMessage = Fields.FieldMessage
-  type FieldSelect = Fields.FieldSelect
-  type FieldSelectBorder = Fields.FieldSelectBorder
-  type FieldSelectColumn = Fields.FieldSelectColumn
-  type FieldSelectDirection = Fields.FieldSelectDirection
-  type FieldSelectMaxHeight = Fields.FieldSelectMaxHeight
-  type FieldSelectOption = Fields.FieldSelectOption
-  type FieldSize = Fields.FieldSize
-  type FieldStatus = Fields.FieldStatus
-  type FieldTabs = Fields.FieldTabs
-  type FieldTabsAction = Fields.FieldTabsAction
-  type FieldTabsTab = Fields.FieldTabsTab
-  type FieldTabsTheme = Fields.FieldTabsTheme
+  type FieldAvatar = import('./fields').FieldAvatar
+  type FieldBackground = import('./fields').FieldBackground
+  type FieldCheckbox = import('./fields').FieldCheckbox
+  type FieldDays = import('./fields').FieldDays
+  type FieldEmojis = import('./fields').FieldEmojis
+  type FieldInput = import('./fields').FieldInput
+  type FieldInputAlignment = import('./fields').FieldInputAlignment
+  type FieldInputBorder = import('./fields').FieldInputBorder
+  type FieldInputType = import('./fields').FieldInputType
+  type FieldLabel = import('./fields').FieldLabel
+  type FieldMessage = import('./fields').FieldMessage
+  type FieldSelect = import('./fields').FieldSelect
+  type FieldSelectBorder = import('./fields').FieldSelectBorder
+  type FieldSelectColumn = import('./fields').FieldSelectColumn
+  type FieldSelectDirection = import('./fields').FieldSelectDirection
+  type FieldSelectMaxHeight = import('./fields').FieldSelectMaxHeight
+  type FieldSelectOption = import('./fields').FieldSelectOption
+  type FieldSize = import('./fields').FieldSize
+  type FieldStatus = import('./fields').FieldStatus
+  type FieldTabs = import('./fields').FieldTabs
+  type FieldTabsAction = import('./fields').FieldTabsAction
+  type FieldTabsTab = import('./fields').FieldTabsTab
+  type FieldTabsTheme = import('./fields').FieldTabsTheme
+  type FieldTextarea = import('./fields').FieldTextarea
+  type FieldTime = import('./fields').FieldTime
 
-  type FieldTextarea = Fields.FieldTextarea
-  type FieldTime = Fields.FieldTime
   // Project
-  type LayerIconIcon = LayerIconIconType
-  type LayerIconValue = LayerIconValueType
+  type LayerIconIcon = import('../composables/useLayerIcons').LayerIconIcon
+  type LayerIconValue = import('../composables/useLayerIcons').LayerIconValue
   type Meta<T> = import('@nuxtjs/storybook').Meta<T>
+
   // Navigator
   interface Navigator {
     userAgentData?: {
@@ -108,9 +105,9 @@ declare global {
       platform?: string
     }
   }
+
   type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
   type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
-
   type VuelidateValidation = import('@vuelidate/core').BaseValidation
 }
 

package/package.json

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