diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte index 22e1cdffe5..fef6350c45 100644 --- a/frontend/src/lib/components/common/button/Button.svelte +++ b/frontend/src/lib/components/common/button/Button.svelte @@ -34,6 +34,7 @@ export let shortCut: | { key?: string; hide?: boolean; Icon?: any; withoutModifier?: boolean } | undefined = undefined + export let dropdownDisabled: boolean = false type MenuItem = { label: string @@ -42,10 +43,25 @@ icon?: any disabled?: boolean } - export let dropdownItems: MenuItem[] | (() => MenuItem[]) | undefined = undefined + export let dropdownItems: MenuItem[] | (() => MenuItem[]) | Item[] | undefined = undefined - function computeDropdowns(menuItems: MenuItem[] | (() => MenuItem[])): Item[] { + function computeDropdowns(menuItems: MenuItem[] | (() => MenuItem[]) | Item[]): Item[] { const items = typeof menuItems === 'function' ? menuItems() : menuItems + + function isItemArray(items: any[]): items is Item[] { + return items.every( + (item) => + 'displayName' in item && + typeof item.displayName === 'string' && + (!('action' in item) || typeof item.action === 'function' || item.action === undefined) && + (!('disabled' in item) || typeof item.disabled === 'boolean') + ) + } + + if (items.length > 0 && isItemArray(items)) { + return items + } + return items.map((item) => ({ displayName: item.label, action: item.onClick ? (e) => item.onClick?.(e) : undefined, @@ -232,7 +248,11 @@ {/if} {#if dropdownItems && dropdownItems.length > 0} - +
- + {#if $$slots.dropdownIcon} + + {:else} + + {/if}