zephyr/horse
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

zenno: format

Browse Source
This commit is contained in:
Branden J Brown
2026-06-16 14:20:03 -04:00
parent 1d65a0ec14
commit 67377c4690
3 changed files with 71 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zenno/src/lib/CharaPick.svelte
+27 -15
View File
@@ -22,7 +22,7 @@
let search = $state('');
const charas = $derived(characters ?? []);
const searchedCharas = $derived(stringsearch(search, charas, ({name}) => name) || charas);
const searchedCharas = $derived(stringsearch(search, charas, ({ name }) => name) || charas);
$effect(() => {
if (required && value == null && charas.length > 0) {
@@ -41,14 +41,14 @@
case 'ArrowDown': {
const opts = [...optionsContainer!.children] as HTMLElement[];
const i = opts.findIndex((n) => parseInt(n.dataset.charaId ?? '') === value?.chara_id);
const o = i != null && i >= 0 ? opts[Math.min(i+1, opts.length - 1)] : opts[0];
const o = i != null && i >= 0 ? opts[Math.min(i + 1, opts.length - 1)] : opts[0];
setByElem(o);
break;
}
case 'ArrowUp': {
const opts = [...optionsContainer!.children] as HTMLElement[];
const i = opts.findIndex((n) => parseInt(n.dataset.charaId ?? '') === value?.chara_id);
const o = i != null && i > 0 ? opts[i-1] : opts[0];
const o = i != null && i > 0 ? opts[i - 1] : opts[0];
setByElem(o);
break;
}
@@ -83,48 +83,60 @@
<div class={className} style={`anchor-name: --anchor-${id}`}>
<span
{id}
class="block h-9 content-center hover:cursor-pointer bg-mist-300 dark:bg-mist-900"
class="block h-9 content-center bg-mist-300 hover:cursor-pointer dark:bg-mist-900"
role="combobox"
aria-expanded={expanded}
aria-controls="charaOptions"
aria-haspopup="listbox"
onclick={() => popover?.togglePopover()}
{onkeydown}
tabindex="0"
>{value?.name ?? ''}</span>
tabindex="0">{value?.name ?? ''}</span
>
<div
class="absolute top-2 shadow-lg open:flex flex-col px-2 skill-tip"
class="skill-tip absolute top-2 flex-col px-2 shadow-lg open:flex"
style={`position-anchor: --anchor-${id}; position-area: bottom;`}
id="charaOptions"
role="listbox"
popover
bind:this={popover}
>
<input class="my-2 border rounded-md min-h-8 pointer-coarse:min-h-12" placeholder=" Search" role="searchbox" bind:value={search} />
<input
class="my-2 min-h-8 rounded-md border pointer-coarse:min-h-12"
placeholder=" Search"
role="searchbox"
bind:value={search}
/>
<div class="max-h-72 overflow-y-scroll" bind:this={optionsContainer}>
{#if !required}
<div
class="w-full h-8 hover:cursor-pointer hover:bg-mist-300 hover:dark:bg-mist-900 text-lg"
class="h-8 w-full text-lg hover:cursor-pointer hover:bg-mist-300 hover:dark:bg-mist-900"
role="option"
aria-selected={value == undefined}
tabindex="0"
data-chara-id=""
onmousedown={() => {value = undefined; search = ''; popover!.hidePopover()}}
onfocus={() => value = undefined}
onmousedown={() => {
value = undefined;
search = '';
popover!.hidePopover();
}}
onfocus={() => (value = undefined)}
{onkeydown}
>
<span class="italic text-sm">Reset</span>
<span class="text-sm italic">Reset</span>
</div>
{/if}
{#each searchedCharas as c (c.chara_id)}
<div
class="w-full h-8 hover:cursor-pointer hover:bg-mist-300 hover:dark:bg-mist-900 text-lg"
class="h-8 w-full text-lg hover:cursor-pointer hover:bg-mist-300 hover:dark:bg-mist-900"
role="option"
aria-selected={value?.chara_id === c.chara_id}
tabindex="0"
data-chara-id={c.chara_id}
onmousedown={() => {value = c; popover!.hidePopover()}}
onfocus={() => value = c}
onmousedown={() => {
value = c;
popover!.hidePopover();
}}
onfocus={() => (value = c)}
{onkeydown}
>
{#if option != null}