feat(v4): Add filter input components (#10493)

This PR adds three components along with stories

1. MultiSelect - This is used for filter values, allowing multiple values and folding of values where there are too many items
2. SingleSelect - This is used for filter values, allows selecting and toggling a single item
3. FilterSelect - This is used for operators and others, it allows icons and labels as well as toggling them using props. The v-model for this binds just the final value unlike the previous two components with bind the entire object.

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>

app/javascript/dashboard/components-next/dropdown-menu/base/DropdownContainer.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { useToggle } from '@vueuse/core';
+import { vOnClickOutside } from '@vueuse/components';
 import { provideDropdownContext } from './provider.js';
 
 const emit = defineEmits(['close']);
@@ -20,9 +21,9 @@ provideDropdownContext({
 </script>
 
 <template>
-  <div class="relative z-20 space-y-2">
+  <div class="relative space-y-2">
     <slot name="trigger" :is-open :toggle="() => toggle()" />
-    <div v-if="isOpen" v-on-clickaway="closeMenu" class="absolute">
+    <div v-if="isOpen" v-on-click-outside="closeMenu" class="absolute">
       <slot />
     </div>
   </div>