refactor(webui): typed Selector events

main
Tomáš Mládek 2024-04-21 21:42:15 +02:00
parent e9dd4d1383
commit 1118a5cfeb
8 changed files with 17 additions and 13 deletions

View File

@ -26,8 +26,8 @@
$: if (adding && selector) selector.focus(); $: if (adding && selector) selector.focus();
async function add(ev: CustomEvent<SelectorValue>) { async function add(ev: CustomEvent<SelectorValue | undefined>) {
if (ev.detail.t !== 'Address') { if (ev.detail?.t !== 'Address') {
return; return;
} }
dispatch('add', ev.detail.c); dispatch('add', ev.detail.c);

View File

@ -50,8 +50,8 @@
}); });
} }
async function add(ev: CustomEvent<SelectorValue>) { async function add(ev: CustomEvent<SelectorValue | undefined>) {
if (!$entity || ev.detail.t !== 'Attribute') { if (!$entity || ev.detail?.t !== 'Attribute') {
return; return;
} }

View File

@ -229,9 +229,9 @@
resizeObserver.observe(viewEl as any); resizeObserver.observe(viewEl as any);
}); });
async function onSelectorInput(ev: CustomEvent<SelectorValue>) { async function onSelectorInput(ev: CustomEvent<SelectorValue | undefined>) {
const value = ev.detail; const value = ev.detail;
if (value.t !== 'Address') return; if (value?.t !== 'Address') return;
const address = value.c; const address = value.c;
const [xValue, yValue] = selectorCoords as any; const [xValue, yValue] = selectorCoords as any;
@ -261,7 +261,7 @@
types={['Attribute', 'NewAttribute']} types={['Attribute', 'NewAttribute']}
initial={x ? { t: 'Attribute', name: x } : undefined} initial={x ? { t: 'Attribute', name: x } : undefined}
on:input={(ev) => { on:input={(ev) => {
if (ev.detail.t === 'Attribute') x = ev.detail.name; if (ev.detail?.t === 'Attribute') x = ev.detail.name;
}} }}
/> />
<div class="value"> <div class="value">
@ -277,7 +277,7 @@
types={['Attribute', 'NewAttribute']} types={['Attribute', 'NewAttribute']}
initial={y ? { t: 'Attribute', name: y } : undefined} initial={y ? { t: 'Attribute', name: y } : undefined}
on:input={(ev) => { on:input={(ev) => {
if (ev.detail.t === 'Attribute') y = ev.detail.name; if (ev.detail?.t === 'Attribute') y = ev.detail.name;
}} }}
/> />
<div class="value"> <div class="value">

View File

@ -28,7 +28,7 @@
lastSearched = lastSearched.slice(0, 10); lastSearched = lastSearched.slice(0, 10);
} }
async function onInput(event: CustomEvent<SelectorValue>) { async function onInput(event: CustomEvent<SelectorValue | undefined>) {
const value = event.detail; const value = event.detail;
if (!value) return; if (!value) return;

View File

@ -20,7 +20,7 @@
$: if (editing && selector) selector.focus(); $: if (editing && selector) selector.focus();
$: if (!focus && !hover) editing = false; $: if (!focus && !hover) editing = false;
function onInput(ev: CustomEvent<SelectorValue>) { function onInput(ev: CustomEvent<SelectorValue | undefined>) {
newValue = ev.detail; newValue = ev.detail;
selector.focus(); selector.focus();
} }

View File

@ -93,7 +93,10 @@
import debug from 'debug'; import debug from 'debug';
import Spinner from './Spinner.svelte'; import Spinner from './Spinner.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher<{
input: SelectorValue | undefined;
focus: boolean;
}>();
const dbg = debug('kestrel:Selector'); const dbg = debug('kestrel:Selector');
let selectorEl: HTMLElement; let selectorEl: HTMLElement;

View File

@ -123,7 +123,7 @@
$: if (adding && addSelector) addSelector.focus(); $: if (adding && addSelector) addSelector.focus();
function addEntity(ev: CustomEvent<SelectorValue>) { function addEntity(ev: CustomEvent<SelectorValue | undefined>) {
dbg('Adding entity', ev.detail); dbg('Adding entity', ev.detail);
const addAddress = ev.detail?.t == 'Address' ? ev.detail.c : undefined; const addAddress = ev.detail?.t == 'Address' ? ev.detail.c : undefined;
if (!addAddress) return; if (!addAddress) return;

View File

@ -364,7 +364,8 @@
<div class="cell mark-attribute"> <div class="cell mark-attribute">
<Selector <Selector
types={['Attribute', 'NewAttribute']} types={['Attribute', 'NewAttribute']}
on:input={(ev) => (newEntryAttribute = ev.detail?.name)} on:input={(ev) =>
(newEntryAttribute = ev.detail?.t === 'Attribute' ? ev.detail?.name : '')}
on:focus={(ev) => (addFocus = ev.detail)} on:focus={(ev) => (addFocus = ev.detail)}
keepFocusOnSet keepFocusOnSet
bind:this={newAttrSelector} bind:this={newAttrSelector}