diff --git a/apps/www/package.json b/apps/www/package.json index f942afbf..8a435bf4 100644 --- a/apps/www/package.json +++ b/apps/www/package.json @@ -31,6 +31,7 @@ "embla-carousel": "8.0.0-rc19", "embla-carousel-autoplay": "8.0.0-rc19", "embla-carousel-vue": "8.0.0-rc19", + "fuse.js": "^7.0.0", "lucide-vue-next": "^0.276.0", "radix-vue": "^1.3.0", "tailwindcss-animate": "^1.0.7", diff --git a/apps/www/src/content/docs/components/command.md b/apps/www/src/content/docs/components/command.md index 77ac9045..8c1694c0 100644 --- a/apps/www/src/content/docs/components/command.md +++ b/apps/www/src/content/docs/components/command.md @@ -137,7 +137,106 @@ watch(CmdJ, (v) => { ``` +### Dialog with custom filter (Fuse.js) + + +For this Demo we will use the [useFuse](https://vueuse.org/integrations/useFuse/) integration. Don't forget to install `fuse.js` and `@vueuse/integrations`: + +```bash + pnpm install fuse.js @vueuse/integrations +``` + +Code Example: +```vue + + + +``` ### Combobox -You can use the `` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information. \ No newline at end of file +You can use the `` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information. diff --git a/apps/www/src/lib/registry/default/example/CommandDialogUseFuseDemo.vue b/apps/www/src/lib/registry/default/example/CommandDialogUseFuseDemo.vue new file mode 100644 index 00000000..54061a40 --- /dev/null +++ b/apps/www/src/lib/registry/default/example/CommandDialogUseFuseDemo.vue @@ -0,0 +1,87 @@ + + + diff --git a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue index b7556374..a8d40efb 100644 --- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue +++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue @@ -1,4 +1,5 @@