303 lines
8.8 KiB
Vue
303 lines
8.8 KiB
Vue
<script setup>
|
|
import { ref, computed, onMounted } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import Icon from 'dashboard/components-next/icon/Icon.vue';
|
|
import EmojiIcon from 'dashboard/components-next/emoji-icon-picker/EmojiIcon.vue';
|
|
import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
|
|
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
|
|
|
|
const props = defineProps({
|
|
menuItems: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
menuSections: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
thumbnailSize: {
|
|
type: Number,
|
|
default: 20,
|
|
},
|
|
roundedThumbnail: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showSearch: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
searchPlaceholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
isSearching: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
labelClass: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disableLocalFiltering: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isLoading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
emptyStateMessage: {
|
|
type: String,
|
|
default: 'DROPDOWN_MENU.EMPTY_STATE',
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['action', 'search', 'empty']);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const searchInput = ref(null);
|
|
const searchQuery = ref('');
|
|
|
|
const hasSections = computed(() => props.menuSections.length > 0);
|
|
|
|
const flattenedMenuItems = computed(() => {
|
|
if (!hasSections.value) {
|
|
return props.menuItems;
|
|
}
|
|
|
|
return props.menuSections.flatMap(section => section.items || []);
|
|
});
|
|
|
|
const filteredMenuItems = computed(() => {
|
|
if (props.disableLocalFiltering) return props.menuItems;
|
|
if (!searchQuery.value) return flattenedMenuItems.value;
|
|
|
|
return flattenedMenuItems.value.filter(item =>
|
|
item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
|
|
);
|
|
});
|
|
|
|
const filteredMenuSections = computed(() => {
|
|
if (!hasSections.value) {
|
|
return [];
|
|
}
|
|
|
|
if (props.disableLocalFiltering || !searchQuery.value) {
|
|
return props.menuSections;
|
|
}
|
|
|
|
const query = searchQuery.value.toLowerCase();
|
|
|
|
return props.menuSections
|
|
.map(section => {
|
|
const filteredItems = (section.items || []).filter(item =>
|
|
item.label.toLowerCase().includes(query)
|
|
);
|
|
|
|
return {
|
|
...section,
|
|
items: filteredItems,
|
|
};
|
|
})
|
|
.filter(section => section.items.length > 0);
|
|
});
|
|
|
|
const handleSearchInput = event => {
|
|
emit('search', event.target.value);
|
|
|
|
const isEmpty = hasSections.value
|
|
? filteredMenuSections.value.length === 0
|
|
: filteredMenuItems.value.length === 0;
|
|
|
|
if (isEmpty) emit('empty');
|
|
};
|
|
|
|
const handleAction = item => {
|
|
const { action, value, ...rest } = item;
|
|
emit('action', { action, value, ...rest });
|
|
};
|
|
|
|
const shouldShowEmptyState = computed(() => {
|
|
if (hasSections.value) {
|
|
return filteredMenuSections.value.length === 0;
|
|
}
|
|
|
|
return filteredMenuItems.value.length === 0;
|
|
});
|
|
|
|
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 flex flex-col min-w-[136px] shadow-lg pt-2 overflow-hidden"
|
|
>
|
|
<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>
|
|
<div class="flex flex-col gap-2 overflow-y-auto min-h-0 px-2 pb-2">
|
|
<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 top-0 z-10 bg-n-alpha-3 backdrop-blur-sm truncate min-w-0"
|
|
>
|
|
{{ 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>
|
|
<EmojiIcon
|
|
v-if="item.emoji"
|
|
:value="item.emoji"
|
|
:color="item.iconColor"
|
|
class="flex-shrink-0 size-4"
|
|
/>
|
|
<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>
|
|
<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)"
|
|
>
|
|
<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>
|
|
<EmojiIcon
|
|
v-if="item.emoji"
|
|
:value="item.emoji"
|
|
:color="item.iconColor"
|
|
class="flex-shrink-0 size-4"
|
|
/>
|
|
<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>
|
|
</template>
|
|
<div
|
|
v-if="shouldShowEmptyState"
|
|
class="text-sm text-n-slate-11 px-2 py-1.5"
|
|
>
|
|
{{
|
|
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>
|
|
</div>
|
|
</template>
|