Merge branch 'feat/whatsapp-call-meta-bridge' into feat/whatsapp-call-ui

2026-05-07 19:57:42 +07:00
parent 801e1e8ec5 12f29d0916
commit 3f65838155
34 changed files with 1063 additions and 1171 deletions
@@ -201,7 +201,7 @@ onMounted(() => {
          v-if="openAgentsList && hasAgentList"
          :menu-items="agentList"
          show-search
-          class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-60"
+          class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-60"
          @action="handleArticleAction"
        />
      </OnClickOutside>
@@ -233,7 +233,7 @@ onMounted(() => {
          v-if="openCategoryList && hasCategoryMenuItems"
          :menu-items="categoryList"
          show-search
-          class="w-48 mt-2 z-[100] overflow-y-auto left-0 top-full max-h-60"
+          class="w-48 mt-2 z-[100] left-0 top-full max-h-60"
          @action="handleArticleAction"
        />
      </OnClickOutside>
@@ -159,7 +159,7 @@ const handleTabChange = value => {
              v-if="isLocaleMenuOpen"
              :menu-items="localeMenuItems"
              show-search
-              class="left-0 w-40 max-w-[300px] mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-40 max-w-[300px] mt-2 xl:right-0 top-full max-h-60"
              @action="handleLocaleAction"
            />
          </OnClickOutside>
@@ -180,7 +180,7 @@ const handleTabChange = value => {
              v-if="isCategoryMenuOpen"
              :menu-items="categoryMenuItems"
              show-search
-              class="left-0 w-48 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+              class="left-0 w-48 mt-2 xl:right-0 top-full max-h-60"
              @action="handleCategoryAction"
            />
          </OnClickOutside>
@@ -296,7 +296,7 @@ watch(
            :selected-count-label="selectedCountLabel"
            class="py-2 ltr:!pr-3 rtl:!pl-3 justify-between"
          >
-            <template #secondary-actions>
+            <template #secondaryActions>
              <Button
                sm
                ghost
@@ -142,7 +142,7 @@ const handleBreadcrumbClick = () => {
            v-if="isLocaleMenuOpen"
            :menu-items="localeMenuItems"
            show-search
-            class="left-0 w-40 mt-2 overflow-y-auto xl:right-0 top-full max-h-60"
+            class="left-0 w-40 mt-2 xl:right-0 top-full max-h-60"
            @action="handleLocaleAction"
          />
        </OnClickOutside>
@@ -90,7 +90,7 @@ const targetInboxLabel = computed(() => {
      <DropdownMenu
        v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
        :menu-items="contactableInboxesList"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 max-h-56 w-fit max-w-sm dark:!outline-n-slate-5"
        @action="emit('handleInboxAction', $event)"
      />
    </div>
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, useSlots } from 'vue';
+import { computed } from 'vue';
 import Checkbox from 'dashboard/components-next/checkbox/Checkbox.vue';
 import Button from 'dashboard/components-next/button/Button.vue';

@@ -47,9 +47,6 @@ const allSelected = computed(
    selectedVisibleCount.value === visibleItemCount.value
 );

-const slots = useSlots();
-const hasSecondaryActions = computed(() => Boolean(slots['secondary-actions']));
-
 const bulkCheckboxState = computed({
  get: () => allSelected.value,
  set: shouldSelectAll => {
@@ -95,10 +92,12 @@ const bulkCheckboxState = computed({
        <span class="text-sm text-n-slate-10 truncate tabular-nums">
          {{ selectedCountLabel }}
        </span>
+        <div v-if="$slots.primaryActions" class="h-4 w-px bg-n-strong" />
+        <slot v-if="$slots.primaryActions" name="primaryActions" />
      </div>
      <div class="flex items-center gap-3">
-        <slot v-if="hasSecondaryActions" name="secondary-actions" />
-        <div v-if="hasSecondaryActions" class="h-4 w-px bg-n-strong" />
+        <slot v-if="$slots.secondaryActions" name="secondaryActions" />
+        <div v-if="$slots.secondaryActions" class="h-4 w-px bg-n-strong" />
        <div class="flex items-center gap-3">
          <slot name="actions" :selected-count="selectedCount">
            <Button
@@ -10,9 +10,6 @@ const props = defineProps({
  menuItems: {
    type: Array,
    default: () => [],
-    validator: value => {
-      return value.every(item => item.action && item.value && item.label);
-    },
  },
  menuSections: {
    type: Array,
@@ -22,6 +19,10 @@ const props = defineProps({
    type: Number,
    default: 20,
  },
+  roundedThumbnail: {
+    type: Boolean,
+    default: true,
+  },
  showSearch: {
    type: Boolean,
    default: false,
@@ -42,9 +43,17 @@ const props = defineProps({
    type: Boolean,
    default: false,
  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  emptyStateMessage: {
+    type: String,
+    default: 'DROPDOWN_MENU.EMPTY_STATE',
+  },
 });

-const emit = defineEmits(['action', 'search']);
+const emit = defineEmits(['action', 'search', 'empty']);

 const { t } = useI18n();

@@ -96,9 +105,13 @@ const filteredMenuSections = computed(() => {
 });

 const handleSearchInput = event => {
-  if (props.disableLocalFiltering) {
-    emit('search', event.target.value);
-  }
+  emit('search', event.target.value);
+
+  const isEmpty = hasSections.value
+    ? filteredMenuSections.value.length === 0
+    : filteredMenuItems.value.length === 0;
+
+  if (isEmpty) emit('empty');
 };

 const handleAction = item => {
@@ -123,57 +136,104 @@ onMounted(() => {

 <template>
  <div
-    class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 gap-2 flex flex-col min-w-[136px] shadow-lg pb-2 px-2"
-    :class="{
-      'pt-2': !showSearch,
-    }"
+    class="bg-n-alpha-3 backdrop-blur-[100px] border-0 outline outline-1 outline-n-container absolute rounded-xl z-50 flex flex-col min-w-[136px] shadow-lg pt-2 overflow-hidden"
  >
-    <div
-      v-if="showSearch"
-      class="sticky top-0 bg-n-alpha-3 backdrop-blur-sm pt-2 z-20"
-    >
-      <div 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="reset-base w-full h-8 py-2 pl-10 pr-2 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-          @input="handleSearchInput"
-        />
-      </div>
+    <div v-if="showSearch" class="relative shrink-0 px-2 mb-2">
+      <span
+        class="absolute i-lucide-search size-3.5 top-2 ltr:left-5 rtl:right-5"
+      />
+      <input
+        ref="searchInput"
+        v-model="searchQuery"
+        type="search"
+        :placeholder="
+          searchPlaceholder || t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')
+        "
+        class="reset-base w-full h-8 py-2 ltr:pl-10 ltr:pr-2 rtl:pl-2 rtl:pr-10 text-sm focus:outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        @input="handleSearchInput"
+      />
    </div>
-    <template v-if="hasSections">
-      <div
-        v-for="(section, sectionIndex) in filteredMenuSections"
-        :key="section.title || sectionIndex"
-        class="flex flex-col gap-1"
-      >
-        <p
-          v-if="section.title"
-          class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky z-10 bg-n-alpha-3 backdrop-blur-sm"
-          :class="showSearch ? 'top-10' : 'top-0'"
-        >
-          {{ section.title }}
-        </p>
+    <div class="flex flex-col gap-2 overflow-y-auto min-h-0 px-2 pb-2">
+      <template v-if="hasSections">
        <div
-          v-if="section.isLoading"
-          class="flex items-center justify-center py-2"
+          v-for="(section, sectionIndex) in filteredMenuSections"
+          :key="section.title || sectionIndex"
+          class="flex flex-col gap-1"
        >
+          <p
+            v-if="section.title"
+            class="px-2 py-2 text-xs mb-0 font-medium text-n-slate-11 uppercase tracking-wide sticky top-0 z-10 bg-n-alpha-3 backdrop-blur-sm"
+          >
+            {{ section.title }}
+          </p>
+          <div
+            v-if="section.isLoading"
+            class="flex items-center justify-center py-2"
+          >
+            <Spinner :size="24" />
+          </div>
+          <div
+            v-else-if="!section.items.length && section.emptyState"
+            class="text-sm text-n-slate-11 px-2 py-1.5"
+          >
+            {{ section.emptyState }}
+          </div>
+          <button
+            v-for="(item, itemIndex) in section.items"
+            :key="item.value || itemIndex"
+            type="button"
+            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="{
+              'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
+              'text-n-ruby-11': item.action === 'delete',
+              'text-n-slate-12': item.action !== 'delete',
+            }"
+            :disabled="item.disabled"
+            @click="handleAction(item)"
+          >
+            <slot name="thumbnail" :item="item">
+              <Avatar
+                v-if="item.thumbnail"
+                :name="item.thumbnail.name"
+                :src="item.thumbnail.src"
+                :size="thumbnailSize"
+                :rounded-full="roundedThumbnail"
+              />
+            </slot>
+            <slot name="icon" :item="item">
+              <Icon
+                v-if="item.icon"
+                :icon="item.icon"
+                class="flex-shrink-0 size-3.5"
+              />
+            </slot>
+            <span v-if="item.emoji" class="flex-shrink-0">{{
+              item.emoji
+            }}</span>
+            <slot name="label" :item="item">
+              <span
+                v-if="item.label"
+                class="min-w-0 text-sm font-420 truncate"
+                :class="labelClass"
+              >
+                {{ item.label }}
+              </span>
+            </slot>
+            <slot name="trailing-icon" :item="item" />
+          </button>
+          <div
+            v-if="sectionIndex < filteredMenuSections.length - 1"
+            class="h-px bg-n-alpha-2 mx-2 my-1"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <div v-if="isLoading" class="flex items-center justify-center py-2">
          <Spinner :size="24" />
        </div>
-        <div
-          v-else-if="!section.items.length && section.emptyState"
-          class="text-sm text-n-slate-11 px-2 py-1.5"
-        >
-          {{ section.emptyState }}
-        </div>
        <button
-          v-for="(item, itemIndex) in section.items"
-          :key="item.value || itemIndex"
+          v-for="(item, index) in filteredMenuItems"
+          :key="index"
          type="button"
          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="{
@@ -190,77 +250,44 @@ onMounted(() => {
              :name="item.thumbnail.name"
              :src="item.thumbnail.src"
              :size="thumbnailSize"
-              rounded-full
+              :rounded-full="roundedThumbnail"
+            />
+          </slot>
+          <slot name="icon" :item="item">
+            <Icon
+              v-if="item.icon"
+              :icon="item.icon"
+              class="flex-shrink-0 size-3.5"
            />
          </slot>
-          <Icon
-            v-if="item.icon"
-            :icon="item.icon"
-            class="flex-shrink-0 size-3.5"
-          />
          <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-          <span
-            v-if="item.label"
-            class="min-w-0 text-sm truncate"
-            :class="labelClass"
-          >
-            {{ item.label }}
-          </span>
+          <slot name="label" :item="item">
+            <span
+              v-if="item.label"
+              class="min-w-0 text-sm font-420 truncate"
+              :class="labelClass"
+            >
+              {{ item.label }}
+            </span>
+          </slot>
+          <slot name="trailing-icon" :item="item" />
        </button>
-        <div
-          v-if="sectionIndex < filteredMenuSections.length - 1"
-          class="h-px bg-n-alpha-2 mx-2 my-1"
-        />
-      </div>
-    </template>
-    <template v-else>
-      <button
-        v-for="(item, index) in filteredMenuItems"
-        :key="index"
-        type="button"
-        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="{
-          'bg-n-alpha-1 dark:bg-n-solid-active': item.isSelected,
-          'text-n-ruby-11': item.action === 'delete',
-          'text-n-slate-12': item.action !== 'delete',
-        }"
-        :disabled="item.disabled"
-        @click="handleAction(item)"
+      </template>
+      <div
+        v-if="shouldShowEmptyState"
+        class="text-sm text-n-slate-11 px-2 py-1.5"
      >
-        <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 size-3.5"
-        />
-        <span v-if="item.emoji" class="flex-shrink-0">{{ item.emoji }}</span>
-        <span
-          v-if="item.label"
-          class="min-w-0 text-sm truncate"
-          :class="labelClass"
-        >
-          {{ item.label }}
-        </span>
-      </button>
-    </template>
-    <div
-      v-if="shouldShowEmptyState"
-      class="text-sm text-n-slate-11 px-2 py-1.5"
-    >
-      {{
-        isSearching
-          ? t('DROPDOWN_MENU.SEARCHING')
-          : t('DROPDOWN_MENU.EMPTY_STATE')
-      }}
+        {{
+          isSearching
+            ? t('DROPDOWN_MENU.SEARCHING')
+            : searchQuery
+              ? t('DROPDOWN_MENU.EMPTY_STATE')
+              : t(emptyStateMessage)
+        }}
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="shrink-0">
+      <slot name="footer" />
    </div>
-    <slot name="footer" />
  </div>
 </template>
@@ -35,7 +35,7 @@ const showDropdown = ref(false);
      v-on-clickaway="() => (showDropdown = false)"
      :menu-items="labelMenuItems"
      show-search
-      class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+      class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-52"
      @action="emit('updateLabel', $event)"
    >
      <template #thumbnail="{ item }">
@@ -209,7 +209,7 @@ watch(
        v-if="showDropdown"
        :menu-items="filteredCountries"
        show-search
-        class="z-[100] w-48 mt-2 overflow-y-auto ltr:left-0 rtl:right-0 top-full max-h-52"
+        class="z-[100] w-48 mt-2 ltr:left-0 rtl:right-0 top-full max-h-52"
        @action="onSelectCountry"
      />
    </div>
@@ -247,7 +247,7 @@ const handleBlur = e => emit('blur', e);
        v-if="showDropdownMenu"
        :menu-items="filteredMenuItems"
        :is-searching="isLoading"
-        class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
+        class="ltr:left-0 rtl:right-0 z-[100] top-8 max-h-56 w-[inherit] max-w-md dark:!outline-n-slate-5"
        @action="handleDropdownAction"
      />
    </div>