Package

v3.x

Description

Using Dropdown Menu for making Linear like filter component is quite doable but we need a filter input on top of each menu items.

With the slot content-top we can insert the input button inside but without scoped input, we cannot differentiate on which menu we are.

Example:

<template #content-top="">
  <UInput v-model="researchText" placeholder="Filtrer" :ui="{ base: 'rounded-none ring-0 rounded-t-md' }"
    class="filtersDropdownItem border-b border-accented">
    <template #trailing>
      <UButton color="neutral" variant="link" size="sm" icon="lucide:circle-x" aria-label="Clear input" class="pr-0"
        :class="researchText.length === 0
            ? 'text-transparent hover:text-transparent focus:text-transparent active:text-transparent'
            : ''
          " @click="researchText = ''" />
    </template>
  </UInput>
</template>

Several options to consider:

• Pass the list of items and a reactive search term which could be linked to a filter field.
• Add a prop to enable filter on top of each menu with a 'contains' strategy
  • The option could accept a number which trigger search menu when list lenght is higher than it

What do you think ?

Example: https://codesandbox.io/p/devbox/cool-hypatia-7r6y89?file=%2Fapp%2Fpages%2Findex.vue%3A292%2C16

Additional context

No response