@saasmakers/ui 1.4.29 → 1.4.31

package/app/components/bases/BaseDivider.stories.ts

@@ -15,9 +15,9 @@ export default {
     },
     hideNext: { control: 'boolean' },
     hidePrevious: { control: 'boolean' },
+    loading: { control: 'boolean' },
     margin: { control: 'number' },
     navigable: { control: 'boolean' },
-    loading: { control: 'boolean' },
     size: {
       control: 'select',
       options: ['sm', 'base'] satisfies BaseDividerSize[],

package/app/components/fields/FieldSelect.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { FieldInput } from '#components'
 import { vOnClickOutside } from '@vueuse/components'
 import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 
@@ -18,6 +19,8 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   padding: true,
   placeholder: '',
   required: false,
+  searchable: false,
+  searchPlaceholder: '',
   size: 'base',
   validation: undefined,
 })
@@ -30,11 +33,24 @@ const emit = defineEmits<{
 
 const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
+const { normalizeText } = useLayerUtils()
+const { t } = useI18n()
 const id = useId()
 
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
 
 const opened = ref(false)
+const searchRaw = ref('')
+
+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[] = []
@@ -56,12 +72,28 @@ const computedOptions = computed(() => {
   return options
 })
 
-const computedColumns = computed(() => {
-  if (props.columns.length > 0) {
-    return props.columns
+const searchQueryCleaned = computed(() => {
+  return normalizeText(searchRaw.value.trim())
+})
+
+const filteredColumns = computed(() => {
+  if (!props.searchable || !searchQueryCleaned.value) {
+    return computedColumns.value
   }
 
-  return [{ options: computedOptions.value }]
+  return computedColumns.value
+    .map(column => ({
+      ...column,
+      options: column.options.filter((option) => {
+        return normalizeText(option.text).includes(searchQueryCleaned.value)
+          || normalizeText(option.value).includes(searchQueryCleaned.value)
+      }),
+    }))
+    .filter(column => column.options.length > 0)
+})
+
+const hasFilteredResults = computed(() => {
+  return filteredColumns.value.some(column => column.options.length > 0)
 })
 
 const selectedOption = computed(() => {
@@ -70,6 +102,18 @@ const selectedOption = computed(() => {
   })
 })
 
+const showNoResults = computed(() => {
+  return props.searchable && !!searchQueryCleaned.value && !hasFilteredResults.value
+})
+
+watch(opened, (isOpened) => {
+  if (isOpened && props.searchable) {
+    nextTick(() => {
+      searchInput.value?.focus()
+    })
+  }
+})
+
 function onClose() {
   reset()
 }
@@ -128,8 +172,15 @@ function onOptionKeyDown(event: KeyboardEvent) {
   }
 }
 
+function onSearchKeyup(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    reset()
+  }
+}
+
 function reset() {
   opened.value = false
+  searchRaw.value = ''
 }
 
 function selectOption(event: MouseEvent, value: string) {
@@ -248,7 +299,33 @@ function selectOption(event: MouseEvent, value: string) {
             }"
           >
             <div
-              v-for="(column, columnIndex) in computedColumns"
+              v-if="searchable"
+              class="sticky top-0 z-10 border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
+              @click.stop
+            >
+              <FieldInput
+                ref="searchInput"
+                v-model="searchRaw"
+                :autocomplete="false"
+                background="white"
+                border="none"
+                class="px-3"
+                :placeholder="searchPlaceholder || t('search')"
+                :size="size"
+                type="search"
+                @keyup="onSearchKeyup"
+              />
+            </div>
+
+            <div
+              v-if="showNoResults"
+              class="px-3 py-2 text-center text-gray-600 dark:text-gray-400"
+            >
+              {{ t('noResults') }}
+            </div>
+
+            <div
+              v-for="(column, columnIndex) in filteredColumns"
               :key="columnIndex"
             >
               <BaseIcon
@@ -298,3 +375,60 @@ function selectOption(event: MouseEvent, value: string) {
     />
   </div>
 </template>
+
+<i18n lang="json">
+{
+  "de": {
+    "noResults": "Keine Ergebnisse",
+    "search": "Suchen"
+  },
+  "en": {
+    "noResults": "No results",
+    "search": "Search"
+  },
+  "es": {
+    "noResults": "Sin resultados",
+    "search": "Buscar"
+  },
+  "fr": {
+    "noResults": "Aucun résultat",
+    "search": "Rechercher"
+  },
+  "it": {
+    "noResults": "Nessun risultato",
+    "search": "Cerca"
+  },
+  "ja": {
+    "noResults": "結果がありません",
+    "search": "検索"
+  },
+  "ko": {
+    "noResults": "결과 없음",
+    "search": "검색"
+  },
+  "nl": {
+    "noResults": "Geen resultaten",
+    "search": "Zoeken"
+  },
+  "pl": {
+    "noResults": "Brak wyników",
+    "search": "Szukaj"
+  },
+  "pt": {
+    "noResults": "Sem resultados",
+    "search": "Pesquisar"
+  },
+  "pt-BR": {
+    "noResults": "Nenhum resultado",
+    "search": "Pesquisar"
+  },
+  "id": {
+    "noResults": "Tidak ada hasil",
+    "search": "Cari"
+  },
+  "vi": {
+    "noResults": "Không có kết quả",
+    "search": "Tìm kiếm"
+  }
+}
+</i18n>

package/app/types/bases.d.ts

@@ -109,9 +109,9 @@ export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
   hideNext?: boolean
   hidePrevious?: boolean
+  loading?: boolean
   margin?: number
   navigable?: boolean
-  loading?: boolean
   size?: BaseDividerSize
   title?: string
 }

package/app/types/fields.d.ts

@@ -132,6 +132,8 @@ export interface FieldSelect {
   padding?: boolean
   placeholder?: string
   required?: boolean
+  searchable?: boolean
+  searchPlaceholder?: string
   size?: FieldSize
   validation?: VuelidateValidation
 }

package/package.json

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