chris/calque
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

add caret to combobox

Browse source
This commit is contained in:
Chris Kruining 2025-01-07 07:31:05 +01:00
parent 1ae0e14e42
commit 7f71f83a59
No known key found for this signature in database
GPG key ID: EB894A3560CCCAD2
3 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/combobox/index.tsx
View file

@ -1,5 +1,6 @@
import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
import css from './index.module.css';
import { FaSolidAngleDown } from "solid-icons/fa";
interface ComboBoxProps<T, K extends string> {
id: string;
@ -8,6 +9,7 @@ interface ComboBoxProps<T, K extends string> {
setValue?: Setter<K>;
values: Record<K, T>;
open?: boolean;
showCaret?: boolean;
children: (key: K, value: T) => JSX.Element;
filter?: (query: string, key: K, value: T) => boolean;
}
@ -30,6 +32,8 @@ export function ComboBox<T, K extends string>(props: ComboBoxProps<T, K>) {
return entries;
});
const showCaret = createMemo(() => props.showCaret ?? true);
createEffect(() => {
props.setValue?.(() => value());
});
@ -41,6 +45,10 @@ export function ComboBox<T, K extends string>(props: ComboBoxProps<T, K>) {
return <section class={`${css.box} ${props.class}`}>
<button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
{props.children(value(), props.values[value()])}
<Show when={showCaret()}>
<FaSolidAngleDown class={css.caret} />
</Show>
</button>
<dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>