mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-07 08:02:40 +00:00
Diego ImbertandClaude Opus 4.6
5d79f33590
* Remove $$props.field usage * Rename slots to ensure no hyphen * _props * _trigger * OnSelectedIteration type correct capitalization * rename _content * Remove afterUpdate * Migrate everything to svelte 5 * array bind * Fix popover * type never * nit fixes * Fixed many trivial errors * onClick * Fix errors * use let: * nit typing * fix: wrap state_referenced_locally vars with untrack() Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com> * Add untrack import * Fix all syntax errors due to untrack migration * Fix undefined errors * Fix more undefined errors * untrack(() => initialOpen) * svelte-ignore * Fix state_descriptors_fixed error in Chart.svelte Use $state.snapshot() to pass plain copies of data/options to Chart.js instead of $state proxies. Chart.js's listenArrayEvents tries to define property descriptors on data arrays, which Svelte 5 proxies reject. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * nit typing * Merge issue * Fix "path is not set" error in resource picker / editor * Fix InputTransformForm error when rerunning some flows * fix npm run check --------- Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
85 lines
2.5 KiB
Svelte
85 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { untrack } from 'svelte'
|
|
import MenuItem from '$lib/components/meltComponents/MenuItem.svelte'
|
|
import { melt } from '@melt-ui/svelte'
|
|
import { twMerge } from 'tailwind-merge'
|
|
import { ChevronRight } from 'lucide-svelte'
|
|
import type { Item } from '$lib/utils'
|
|
import type { MenubarMenuElements, createDropdownMenu } from '@melt-ui/svelte'
|
|
import { Tooltip } from './meltComponents'
|
|
|
|
interface Props {
|
|
item: Item
|
|
builders: ReturnType<typeof createDropdownMenu>['builders']
|
|
meltItem: MenubarMenuElements['item']
|
|
}
|
|
|
|
let { item, builders, meltItem }: Props = $props()
|
|
|
|
const {
|
|
elements: { subTrigger, subMenu },
|
|
states: { subOpen }
|
|
} = untrack(() => builders).createSubmenu()
|
|
|
|
let subItems = $derived((item.submenuItems ?? []).filter((i) => !i.hide))
|
|
</script>
|
|
|
|
<button
|
|
use:melt={$subTrigger}
|
|
class={twMerge(
|
|
'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
|
|
'data-[highlighted]:bg-surface-hover',
|
|
'flex flex-row gap-2 items-center rounded-sm'
|
|
)}
|
|
>
|
|
{#if item.icon}
|
|
<item.icon size={14} color={item.iconColor} class="shrink-0" />
|
|
{/if}
|
|
<p class="truncate grow min-w-0 whitespace-nowrap text-left">
|
|
{item.displayName}
|
|
</p>
|
|
{@render item.extra?.()}
|
|
<ChevronRight size={14} class="ml-auto shrink-0 text-tertiary" />
|
|
</button>
|
|
|
|
{#if $subOpen}
|
|
<div
|
|
use:melt={$subMenu}
|
|
class="z-[6000] bg-surface-tertiary dark:border w-48 origin-top-right rounded-lg shadow-lg focus:outline-none overflow-y-auto py-1"
|
|
>
|
|
{#each subItems as subItem}
|
|
{#if subItem.separatorTop}
|
|
<div class="my-1 border-t border-border-light"></div>
|
|
{/if}
|
|
<MenuItem
|
|
onClick={(e) => subItem?.action?.(e)}
|
|
href={subItem?.href}
|
|
target={subItem?.hrefTarget}
|
|
disabled={subItem?.disabled}
|
|
class={twMerge(
|
|
'px-4 py-2 text-primary font-normal hover:bg-surface-hover cursor-pointer text-xs transition-colors w-full',
|
|
'data-[highlighted]:bg-surface-hover',
|
|
'flex flex-row gap-2 items-center rounded-sm',
|
|
subItem?.disabled && 'text-disabled cursor-not-allowed'
|
|
)}
|
|
item={meltItem}
|
|
>
|
|
{#if subItem.icon}
|
|
<subItem.icon size={14} color={subItem.iconColor} class="shrink-0" />
|
|
{/if}
|
|
<p title={subItem.displayName} class="truncate grow min-w-0 whitespace-nowrap text-left">
|
|
{subItem.displayName}
|
|
</p>
|
|
{@render subItem.extra?.()}
|
|
{#if subItem.tooltip}
|
|
<Tooltip>
|
|
{#snippet text()}
|
|
{subItem.tooltip}
|
|
{/snippet}
|
|
</Tooltip>
|
|
{/if}
|
|
</MenuItem>
|
|
{/each}
|
|
</div>
|
|
{/if}
|