feat(input-dropdown): add inline search functionality

lib/components/SDropdownSection.vue

@@ -21,6 +21,8 @@ defineProps<{
     :search="section.search"
     :selected="section.selected"
     :options="section.options"
+    :query="section.query"
+    :active="section.active"
     :on-click="section.onClick"
   />
   <SDropdownSectionDateRange

lib/components/SDropdownSectionFilter.vue

@@ -10,9 +10,11 @@ import { useTrans } from '../composables/Lang'
 import SDropdownSectionFilterItem from './SDropdownSectionFilterItem.vue'
 
 const props = defineProps<{
-  search?: boolean
+  search?: boolean | 'inline'
   selected: MaybeRef<DropdownSectionFilterSelectedValue>
   options: MaybeRef<DropdownSectionFilterOption[]>
+  query?: string
+  active?: any
   onClick?(value: any): void
 }>()
 
@@ -30,6 +32,8 @@ const { t } = useTrans({
 const input = ref<HTMLElement | null>(null)
 const query = ref('')
 
+const isInlineSearch = computed(() => props.search === 'inline')
+
 const enabledOptions = computed(() => {
   return unref(props.options).filter((o) => !o.disabled)
 })
@@ -39,20 +43,32 @@ const fuse = computed(() => {
 })
 
 const filteredOptions = computed(() => {
-  return !props.search || !query.value
-    ? unref(enabledOptions)
-    : fuse.value.search(query.value).map((r) => r.item)
+  if (isInlineSearch.value) {
+    return unref(props.options).filter((o) => !o.disabled)
+  }
+
+  if (!props.search || !query.value) {
+    return unref(enabledOptions)
+  }
+
+  return fuse.value.search(query.value).map((r) => r.item)
 })
 
 onMounted(() => {
-  input.value?.focus()
+  if (props.search === true) {
+    input.value?.focus()
+  }
 })
 
 function isActive(value: any) {
   const selected = unref(props.selected)
   return Array.isArray(selected) ? selected.includes(value) : selected === value
 }
 
+function isFocused(value: any) {
+  return props.active === value
+}
+
 function focusPrev(event: any) {
   event.target.parentNode.previousElementSibling?.firstElementChild?.focus()
 }
@@ -69,15 +85,15 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
 
 <template>
   <div class="SDropdownSectionFilter">
-    <div v-if="search" class="search">
+    <div v-if="search === true" class="search">
       <input ref="input" v-model="query" class="input" :placeholder="t.i_ph">
     </div>
 
     <ul v-if="filteredOptions.length" class="list">
       <li v-for="option in filteredOptions" :key="option.label" class="item">
         <button
           class="button"
-          :class="{ active: isActive(option.value) }"
+          :class="{ active: isActive(option.value), focused: isFocused(option.value) }"
           tabindex="0"
           @keyup.up.prevent="focusPrev"
           @keyup.down.prevent="focusNext"
@@ -152,6 +168,10 @@ function handleClick(option: DropdownSectionFilterOption, value: any) {
   &:hover {
     background-color: var(--c-bg-mute-1);
   }
+
+  &.focused {
+    background-color: var(--c-bg-mute-1);
+  }
 }
 
 .checkbox {