You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
57 lines
1.7 KiB
57 lines
1.7 KiB
<script lang="ts">
|
|
/**
|
|
* Reusable segmented control for the palabras panel — a single-select
|
|
* `ToggleGroup` with the demo's appearance (`outline` + `attached`, `xs`).
|
|
* Each option renders as an ICON (icon-only, the label becomes the accessible
|
|
* name + tooltip) when it carries an `icon`, otherwise as its text label.
|
|
*
|
|
* Every `pills` field routes through here (alignment with icons, fit with
|
|
* text, …). Palabras-scoped on purpose: it bundles panel-specific defaults,
|
|
* it is NOT a new framework primitive — the framework `ToggleGroup` stays
|
|
* untouched and we just compose it.
|
|
*/
|
|
import { ToggleGroup } from '$uix/eidos/components/toggle-group';
|
|
import type { PalabrasFieldOption } from './types';
|
|
|
|
let {
|
|
value,
|
|
options,
|
|
disabled = false,
|
|
ariaLabel,
|
|
onValueChange
|
|
}: {
|
|
/** Currently selected option value (stringified). */
|
|
value: string | undefined;
|
|
readonly options: readonly PalabrasFieldOption[];
|
|
disabled?: boolean;
|
|
ariaLabel?: string;
|
|
/** Fired with the picked option's stringified value, or `undefined` when the
|
|
* active item is re-clicked (deselected) — lets the field clear / restore. */
|
|
onValueChange: (value: string | undefined) => void;
|
|
} = $props();
|
|
</script>
|
|
|
|
<ToggleGroup
|
|
type="single"
|
|
variant="solid"
|
|
color="primary"
|
|
size="xs"
|
|
attached
|
|
{disabled}
|
|
aria-label={ariaLabel}
|
|
value={value == null ? [] : [value]}
|
|
onValueChange={(v) => onValueChange(v[0])}
|
|
>
|
|
{#each options as opt (opt.value)}
|
|
{@const Icon = opt.icon}
|
|
<ToggleGroup.Item
|
|
value={String(opt.value)}
|
|
iconOnly={!!Icon}
|
|
aria-label={opt.label}
|
|
title={opt.label}
|
|
>
|
|
{#if Icon}<Icon />{:else}{opt.label}{/if}
|
|
</ToggleGroup.Item>
|
|
{/each}
|
|
</ToggleGroup>
|