feat: Updates on new components (#10444)

app/javascript/dashboard/components-next/dropdown-menu/DropdownMenu.vue

@@ -1,10 +1,11 @@
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
-import Thumbnail from 'dashboard/components-next/thumbnail/Thumbnail.vue';
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
 
-defineProps({
+const props = defineProps({
   menuItems: {
     type: Array,
     required: true,
@@ -16,21 +17,61 @@ defineProps({
     type: Number,
     default: 20,
   },
+  showSearch: {
+    type: Boolean,
+    default: false,
+  },
+  searchPlaceholder: {
+    type: String,
+    default: '',
+  },
 });
 
 const emit = defineEmits(['action']);
 
-const handleAction = (action, value) => {
-  emit('action', { action, value });
+const { t } = useI18n();
+
+const searchInput = ref(null);
+const searchQuery = ref('');
+
+const filteredMenuItems = computed(() => {
+  if (!searchQuery.value) return props.menuItems;
+
+  return props.menuItems.filter(item =>
+    item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
+  );
+});
+
+const handleAction = item => {
+  const { action, value, ...rest } = item;
+  emit('action', { action, value, ...rest });
 };
+
+onMounted(() => {
+  if (searchInput.value && props.showSearch) {
+    searchInput.value.focus();
+  }
+});
 </script>
 
 <template>
   <div
     class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 py-2 px-2 gap-2 flex flex-col min-w-[136px] shadow-lg"
   >
+    <div v-if="showSearch" class="relative">
+      <span class="absolute i-lucide-search size-3.5 top-2 left-3" />
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
+        "
+        class="w-full h-8 py-2 pl-10 pr-2 text-sm border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+      />
+    </div>
     <button
-      v-for="item in menuItems"
+      v-for="item in filteredMenuItems"
       :key="item.action"
       class="inline-flex items-center justify-start w-full h-8 min-w-0 gap-2 px-2 py-1.5 transition-all duration-200 ease-in-out border-0 rounded-lg z-60 hover:bg-n-alpha-1 dark:hover:bg-n-alpha-2 disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
       :class="{
@@ -39,20 +80,29 @@ const handleAction = (action, value) => {
         'text-n-slate-12': item.action !== 'delete',
       }"
       :disabled="item.disabled"
-      @click="handleAction(item.action, item.value)"
+      @click="handleAction(item)"
+      @keydown.enter="handleAction(item)"
     >
-      <Thumbnail
-        v-if="item.thumbnail"
-        :author="item.thumbnail"
-        :name="item.thumbnail.name"
-        :size="thumbnailSize"
-        :src="item.thumbnail.src"
-      />
+      <slot name="thumbnail" :item="item">
+        <Avatar
+          v-if="item.thumbnail"
+          :name="item.thumbnail.name"
+          :src="item.thumbnail.src"
+          :size="thumbnailSize"
+          rounded-full
+        />
+      </slot>
       <Icon v-if="item.icon" :icon="item.icon" class="flex-shrink-0" />
       <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
       <span v-if="item.label" class="min-w-0 text-sm truncate">{{
         item.label
       }}</span>
     </button>
+    <div
+      v-if="filteredMenuItems.length === 0"
+      class="text-sm text-n-slate-11 px-2 py-1.5"
+    >
+      {{ t('DROPDOWN_MENU.EMPTY_STATE') }}
+    </div>
   </div>
 </template>