Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104<script module lang="ts"> import type { Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements";
export interface SplitButtonOption { /** shown in the menu, where the options are read side by side and need to disambiguate */ label: string; /** shown on the button once armed; falls back to `label` when the two can be the same */ buttonLabel?: string; icon?: Component<SvelteHTMLElements["svg"]>; onclick?: () => void; danger?: boolean; }</script>
<script lang="ts"> import ChevronDown from "$icon/chevron-down"; import Button, { buttonIcon, type ButtonVariants } from "#lib/components/ui/Button.svelte"; import ButtonGroup from "#lib/components/ui/ButtonGroup.svelte"; import Dropdown, { type DropdownProps, type DropdownVariants } from "#lib/components/ui/Dropdown.svelte"; import DropdownItem from "#lib/components/ui/DropdownItem.svelte";
interface Props { options: SplitButtonOption[]; /** index of the armed option; two-way, so a caller can react to the choice */ selected?: number; variant?: ButtonVariants["variant"]; size?: ButtonVariants["size"]; align?: DropdownVariants["align"]; side?: DropdownProps["side"]; menuLabel?: string; disabled?: boolean; loading?: boolean; class?: string; testid?: string; }
let { options, selected = $bindable(0), variant = "default", size, align = "right", side, menuLabel = "More options", disabled = false, loading = false, class: className, testid }: Props = $props();
// options can be built from a filtered list, so neither an empty array nor a // stale index may reach options[selected] const current = $derived(options[Math.min(Math.max(selected, 0), options.length - 1)]);</script>
{#if current} <ButtonGroup class={className} data-testid={testid}> <Button data-testid="primaryAction" class="flex-1" {variant} {size} {disabled} {loading} icon={current.icon} onclick={current.onclick} > <span>{current.buttonLabel ?? current.label}</span> </Button> <!-- the menu stays open even when the armed option is disabled, so a caller can gate one option (a conflicting merge, say) without trapping the user --> <Dropdown variant="button" square buttonVariant={variant} {size} {align} {side} label={menuLabel} testid="options" > {#snippet trigger()} <ChevronDown class={buttonIcon({ size })} /> {/snippet} {#each options as option, index (option.label)} <DropdownItem data-testid="option" data-index={index} icon={option.icon} danger={option.danger} {size} onclick={() => (selected = index)} > {option.label} </DropdownItem> {/each} </Dropdown> </ButtonGroup>{/if}