[Feature]: Make custom filter-function for CommandDialog Component

[romanhrynevych]

Main reason of this PR is to close this issue #158 , but think that it will be helpful to add new Demo with @vueuse/useFuse filtering

Have some errors with creating new Demo, @sadeghbarati need help from you because previously I never worked with this type of projects 🙂

Link to Demo: www/src/lib/registry/default/example/CommandDialogUseFuseDemo.vue

Styling and other will fixed later, need to understand how to add a new Demo code 😁

[sadeghbarati]

I'm on it, will explain after commit

[romanhrynevych]

Thanks!

[sadeghbarati]

When you have create demos you have two options

1. update apps/www/__registry__/index.ts manually (add demos)

2. you can run pnpm build:registry when you created demos in both styles

[romanhrynevych]

Great, thanks for explanation! ❤️

Need some help with this issue, because it contains many issues inside 😁 Now I added custom filter-function props to CommandDialog.vue component, but there are some other suggestion and I don't know if we need to fix them)

1. In Issue [Feature]: Make it possible to use CommandInput with our own filtering method #158 you can see example with Algolia (API Fetch) CommandDialog, but there is some problems with dynamically change CommandItems inside CommandList, don't think that after change keyboard navigation will work at all 🙂
2. There is some bug with useFuse too, if I add custom filter that will return output with shuffled order, keyboard navigation don't work properly, for fix I added shouldSort: false to useFuse.options.fuseOptions, but think that this must be fixed too

So one bug that need to be fixed now, dynamic change of CommandItem (insert, delete) that will toggle keyboard navigation logic to refresh. I'm not familiar with radix-vue on this level, maybe someone can help here.

I will try to fix this, need some help / time 🙂

[sadeghbarati]

No need to rush 👍

There is also the same pkg for Vue called vue-command-palette which uses Fuse, you can take a look at it and see how it handles the search/sort/filtering

[sadeghbarati]

@zernonia can we remove these aggressive warnings for a11y?

Other shadcns seem not to have these logs

Image of logs

---

Also, there is something wrong with CommandDialog which not showing DialogOverlay

https://stackblitz.com/edit/5h3b5u?file=src%2FApp.vue

[maelp]

Will this be merged?

This is how I'm solving it in CommandDialog for now

const props = defineProps<
  DialogRootProps & {
    filterFunction?: (val: Array<string | any>, term: string) => Array<any>;
  }
>();
const emits = defineEmits<DialogRootEmits>();

const forwarded = useForwardPropsEmits(props, emits);
const forwardedExceptFilterFunction = computed(() => {
  const { filterFunction: _, ...rest } = forwarded.value;
  return rest;
});

[sadeghbarati]

@romanhrynevych can you check this line, it has TypeScript error

[maelp]

if it can help, for me when I do Algolia search I do the following:

• I bind the CommandDialog update:input to a method which triggers a query to algolia and get the results in a list
• I show the list (without filering, eg filtering-function = (list, term) => list

so each time I type, I let Algolia do the "filtering" in the backend and return the result, and I display them "without filtering" (from CommandDialog) so that the users sees exactly the results of algolia