diff --git a/src/lib/components/SpeakerList.svelte b/src/lib/components/SpeakerList.svelte index 8603370..387ed87 100644 --- a/src/lib/components/SpeakerList.svelte +++ b/src/lib/components/SpeakerList.svelte @@ -10,6 +10,7 @@ import { Dialog } from "@skeletonlabs/skeleton-svelte"; import { tick, type Snippet } from "svelte"; import { flip } from "svelte/animate"; + import { slide } from "svelte/transition"; import DelCombobox from "$lib/components/controls/DelCombobox.svelte"; import DelLabel from "$lib/components/del-label/DelLabel.svelte"; @@ -33,20 +34,26 @@ */ delegates?: Delegate[]; /** - * The controls at the bottom of the speaker list - * which handle the addition of new speakers. + * Specifies what delegates can be input in the combobox. * - * If this prop is defined, this overrides the default add delegate controls - * provided by this component. + * If not specified, this falls back to `delegates`. */ - controls?: Snippet; + comboboxDelegates?: Delegate[]; + /** - * Controls placed above the add speakers control. - * - * If `controls` is defined, neither this nor the default add speakers control - * will appear. - */ - subcontrols?: Snippet; + * If enabled, the controls at the bottom of the speakers list + * (the "add speakers", "clear speakers", and "set first/last speaker" options) + * are hidden. + */ + hideControls?: boolean; + + /** + * If provided, this displays the "set first/last speaker" option, + * which allows you to select whether this delegate is placed first or last + * in the list. + */ + proposer?: DelegateID; + /** * The title of the component, which appears at the top. * @@ -73,8 +80,9 @@ let { order = $bindable([]), delegates = [], - controls = undefined, - subcontrols = undefined, + comboboxDelegates, + hideControls = false, + proposer = undefined, title = "Speakers List", extra, onBeforeSpeakerUpdate = undefined, @@ -204,7 +212,7 @@ return true; } - export function addSpeakerFirst(key: number): boolean { + function addSpeakerFirst(key: number): boolean { if (!delegates.some(k => k.id === key)) return false; // Successful, so add speakers: @@ -214,7 +222,7 @@ return true; } - export function addSpeakerLast(key: number): boolean { + function addSpeakerLast(key: number): boolean { if (!delegates.some(k => k.id === key)) return false; // Successful, so add speakers: @@ -359,15 +367,26 @@ - {#if controls} - {@render controls()} - {:else} + {#if !hideControls}