Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687<script module lang="ts"> import { tv, type VariantProps } from "tailwind-variants";
export const dropdownItem = tv({ base: "w-full justify-start rounded-none p-xs text-left focus-visible:-outline-offset-2", variants: { danger: { false: "", true: "text-foreground-danger" } }, defaultVariants: { danger: false } });
export type DropdownItemVariants = VariantProps<typeof dropdownItem>;</script>
<script lang="ts"> import type { ResolvedPathname } from "$app/types"; import type { Component, Snippet } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; import { getContext } from "svelte"; import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
interface Props { href?: ResolvedPathname; icon?: Component<SvelteHTMLElements["svg"]>; danger?: DropdownItemVariants["danger"]; disabled?: boolean; onclick?: (event: MouseEvent) => void; /** Button hugs its children, so a two-column row needs `[&>span]:w-full` here. */ class?: string; children: Snippet; size?: ButtonVariants["size"]; "aria-label"?: string; [attr: `data-${string}`]: unknown; }
let { href, icon, danger = false, disabled = false, onclick, class: className, children, size, ...rest }: Props = $props(); const classes = $derived(dropdownItem({ danger, class: className }));
const closeDropdown = getContext<(() => void) | undefined>("dropdown-close"); const registerItem = getContext<((el: HTMLElement) => () => void) | undefined>( "dropdown-register" );
let el = $state<HTMLAnchorElement | HTMLButtonElement>();
$effect(() => { if (!el || !registerItem) return; return registerItem(el); });
const handleClick = (event: MouseEvent) => { closeDropdown?.(); onclick?.(event); };</script>
<Button {...rest} bind:ref={el} variant="ghost" {href} class={classes} {icon} role="menuitem" {disabled} tabindex={-1} onclick={handleClick} {size}> {@render children()}</Button>