mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-20 08:01:35 +00:00
Ruben Fiszel
64 lines
1.6 KiB
Svelte
64 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { MoreVertical } from 'lucide-svelte'
|
|
import Menu from './common/menu/MenuV2.svelte'
|
|
import { MenuItem } from '@rgossiaux/svelte-headlessui'
|
|
import { twMerge } from 'tailwind-merge'
|
|
|
|
type Item = {
|
|
displayName: string
|
|
action?: (e: CustomEvent<any>) => void
|
|
icon?: any
|
|
href?: string
|
|
disabled?: boolean
|
|
type?: 'action' | 'delete'
|
|
hide?: boolean | undefined
|
|
}
|
|
|
|
export let items: Item[] | (() => Item[]) = []
|
|
export let justifyEnd: boolean = true
|
|
|
|
function computeItems(): Item[] {
|
|
if (typeof items === 'function') {
|
|
return (items() ?? []).filter((item) => !item.hide)
|
|
} else {
|
|
return items.filter((item) => !item.hide)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Menu placement="bottom-end" {justifyEnd} on:close on:open>
|
|
<div slot="trigger">
|
|
{#if $$slots.buttonReplacement}
|
|
<slot name="buttonReplacement" />
|
|
{:else}
|
|
<MoreVertical
|
|
size={16}
|
|
class="w-8 h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
|
|
/>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
{#each computeItems() ?? [] as item}
|
|
<MenuItem
|
|
on:click={(e) => item?.action?.(e)}
|
|
href={item?.href}
|
|
disabled={item?.disabled}
|
|
class={twMerge(
|
|
'px-4 py-2 text-primary hover:bg-surface-hover hover:text-primary cursor-pointer text-xs transition-all',
|
|
'flex flex-row gap-2 items-center',
|
|
item?.disabled && 'text-gray-400 cursor-not-allowed',
|
|
item?.type === 'delete' &&
|
|
!item?.disabled &&
|
|
'text-red-500 hover:bg-red-100 hover:text-red-500'
|
|
)}
|
|
>
|
|
{#if item.icon}
|
|
<svelte:component this={item.icon} size={14} />
|
|
{/if}
|
|
{item.displayName}
|
|
</MenuItem>
|
|
{/each}
|
|
</div>
|
|
</Menu>
|