Skip to content

Commit 55647e4

Browse files
angryziberangryziber
committed
update on: handlers and drop deprecated createEventDispatcher
1 parent 428d0b1 commit 55647e4

27 files changed

+56
-78
lines changed

‎ui/src/components/Link.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313
</script>
1414

15-
<a href={path(to)} on:click={clicked} {target} {...$$restProps} class={$$props.class ?? 'text-link'}>
15+
<a href={path(to)} onclick={clicked} {target} {...$$restProps} class={$$props.class ?? 'text-link'}>
1616
<slot/>
1717
<span>{label}</span>
1818
</a><slot name="suffix"/>

‎ui/src/components/Modal.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
show = false
1919
}
2020
21-
function onKeyUp(e: KeyboardEvent) {
21+
function onkeyup(e: KeyboardEvent) {
2222
if (show && e.code === 'Escape') close()
2323
}
2424
@@ -28,7 +28,7 @@
2828
})
2929
</script>
3030

31-
<svelte:window on:keyup={onKeyUp}/>
31+
<svelte:window {onkeyup}/>
3232

3333
{#if show}
3434
<div bind:this={modal} class="modal transition-opacity fixed z-40 inset-0 overflow-y-auto" transition:fade={{duration: flyParams.duration}}>

‎ui/src/components/SortableTable.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
<tr>
6969
{#each columnLabels as column, i}
7070
{#if column || column === ''}
71-
<th on:click={() => items = items && !!column ? sortBy(items, fields[i]) : items}
71+
<th onclick={() => items = items && !!column ? sortBy(items, fields[i]) : items}
7272
scope="col"
7373
class="text-muted {asc === 1 ? 'asc' : 'desc'} {rightAlignIndices.has(i) ? 'text-right' : ''}"
7474
class:sortable={!!column}

‎ui/src/components/SubNav.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="spaced">
1010
<div class="md:flex md:flex-wrap md:space-x-3">
1111
{#each Object.entries(items) as [name, value]}
12-
<a on:click={() => selected = name} class="{selected === name ? 'active' : 'inactive'} group menu-item" role="tab" tabindex="0">
12+
<a onclick={() => selected = name} class="{selected === name ? 'active' : 'inactive'} group menu-item" role="tab" tabindex="0">
1313
<span>{(labelPrefix && labelPrefix + '.') + name}</span>
1414
{#if value !== undefined}
1515
<Badge class="{selected === name ? 'bg-white': 'bg-gray-100 text-gray-600 group-hover:bg-gray-200'} ml-2 inline-block">{value}</Badge>

‎ui/src/components/Tabs.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
<div class="border-b border-gray-200 mb-8">
88
<nav class="-mb-px flex justify-end items-center space-x-8" aria-label="Tabs">
99
{#each items as item}
10-
<a on:click={() => activeTab = item} role="tab" tabindex="0"
10+
<button onclick={() => activeTab = item} role="tab"
1111
class:border-primary-500={activeTab === item}
1212
class:border-transparent={activeTab !== item}
1313
class="flex-1 text-gray-500 text-center hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
1414
{item}
15-
</a>
15+
</button>
1616
{/each}
1717
</nav>
1818
</div>

‎ui/src/forms/AmountField.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
export let label: string | undefined = undefined
66
export let value: number | string | undefined
77
export let currency = defaultCurrency
8-
9-
interface $$Events {input: FormEvent; change: FormEvent}
108
</script>
119

12-
<NumberField {label} step="any" bind:value unit={formatCurrency(currency)} {...$$restProps} on:change on:input/>
10+
<NumberField {label} step="any" bind:value unit={formatCurrency(currency)} {...$$restProps}/>

‎ui/src/forms/AutocompleteField.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
import FormField from './FormField.svelte'
33
import api from 'src/api/api'
44
import {debounce} from '../shared/debounce'
5-
import {createEventDispatcher} from 'svelte'
65
76
type T = any
87
@@ -12,6 +11,7 @@
1211
export let selected: T|undefined = undefined
1312
export let query = selected ? optionMapper(selected) : ''
1413
export let selectSingleMatch = true
14+
export let onselected: ((selected: T) => void) | undefined = undefined
1515
1616
if ($$restProps.autofocus == undefined) $$restProps.autofocus = true
1717
else if ($$restProps.autofocus == false) $$restProps.autofocus = undefined
@@ -20,13 +20,12 @@
2020
let options: string[] = []
2121
2222
export let id = apiPath.replace('/', '-')
23-
const dispatch = createEventDispatcher<{selected: T}>()
2423
2524
const request = debounce(async (q: string) => {
2625
const selectedIndex = options.indexOf(q)
2726
if (selectedIndex >= 0) {
2827
selected = matches[selectedIndex]
29-
return dispatch('selected', selected)
28+
return onselected?.(selected)
3029
}
3130
else selected = undefined
3231

‎ui/src/forms/CheckboxField.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
export let checked = false
44
55
export let id = label ? label.replace(/\./g, '-') : ''
6-
7-
interface $$Events {change: FormEvent}
86
</script>
97

108
<div class="relative flex items-start {$$props.class }">
119
<div class="flex items-center h-5">
12-
<input {id} type="checkbox" bind:checked on:change {...$$restProps}>
10+
<input {id} type="checkbox" bind:checked {...$$restProps}>
1311
</div>
1412
{#if label}
1513
<div class="ml-3 text-sm">

‎ui/src/forms/CustomAutocompleteField.svelte

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script lang="ts">
22
import FormField from 'src/forms/FormField.svelte'
3-
import {createEventDispatcher} from 'svelte'
43
54
type T = $$Generic
65
76
export let query: string = ''
87
export let options: T[] = []
98
export let optionMapper: (m: T) => string
9+
export let onselected: ((t: T) => void) | undefined = undefined
1010
1111
let selectedIndex = -1
1212
let showList = false
@@ -26,27 +26,26 @@
2626
}
2727
}
2828
29-
const dispatch = createEventDispatcher<{selected: T}>()
30-
3129
function select(result: T) {
3230
query = optionMapper(result)
3331
setTimeout(() => showList = false)
34-
dispatch('selected', result)
32+
onselected?.(result)
3533
}
3634
</script>
3735

3836
<div class="relative">
39-
<FormField type="search" bind:value={query} on:keydown={navigateList} autocomplete="off" {...$$restProps}
40-
on:input={() => showList = true} on:blur={() => showList = false}>
37+
<FormField type="search" bind:value={query} onkeydown={navigateList} autocomplete="off" {...$$restProps}
38+
oninput={() => showList = true} onblur={() => showList = false}>
4139
<svelte:fragment slot="after"><slot/></svelte:fragment>
4240
</FormField>
4341

4442
{#if showList && options.length}
4543
<div class="absolute rounded shadow bg-white overflow-hidden flex flex-col w-full mt-0 border border-gray-200 text-sm">
4644
{#each options as o, i}
4745
<div class="cursor-pointer group border-t"
48-
on:mousedown={() => select(o)}
49-
on:mouseover={() => selectedIndex = i} on:focus={() => {}}>
46+
onmousedown={() => select(o)}
47+
onmouseover={() => selectedIndex = i}
48+
>
5049
<div class="block p-2 border-transparent border-l-4"
5150
class:border-primary-600={i === selectedIndex}
5251
class:bg-gray-100={i === selectedIndex}>

‎ui/src/forms/EstonianAddressSearch.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,10 @@
6565
}
6666
</script>
6767

68-
<CustomAutocompleteField bind:query options={addresses} optionMapper={a => a.ipikkaadress} on:selected={e => select(e.detail)} {...$$restProps}>
68+
<CustomAutocompleteField bind:query options={addresses} optionMapper={a => a.ipikkaadress} onselected={e => select(e)} {...$$restProps}>
6969
{#if loading}<Spinner class="absolute w-8 h-8 p-1 right-8"/>{/if}
7070
{#if apartments}
71-
<select class="-ml-1 !rounded-l-none !w-auto !pl-2 !pr-7" on:change={e => refreshAddressWithApartment(e.currentTarget.value)} autofocus required>
71+
<select class="-ml-1 !rounded-l-none !w-auto !pl-2 !pr-7" onchange={e => refreshAddressWithApartment(e.currentTarget.value)} required>
7272
<option value="">{t.addresses.selectApartment}</option>
7373
{#each apartments as apartment}
7474
<option value={apartment.adr_id}>{apartment.tahis}</option>

‎ui/src/forms/FormField.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,11 @@
1111
export let maxlength = 100
1212
export let required = true
1313
14-
interface $$Events {input: FormEvent; change: FormEvent; focus: FormEvent; blur: FormEvent; paste: ClipboardEvent, keydown: KeyboardEvent}
15-
1614
let input: HTMLInputElement
1715
$: if (input && validator) input.setCustomValidity(validator(value as string))
1816
</script>
1917

20-
<div class="form-field {$$props.class }">
18+
<div class="form-field {$$props.class}">
2119
{#if label}
2220
<label for={id}>
2321
{label}
@@ -27,7 +25,7 @@
2725
{/if}
2826
<slot {id}>
2927
<div class="flex relative">
30-
<input {id} bind:this={input} bind:value on:input on:change on:focus on:blur on:keydown on:paste {minlength} {maxlength} {required} {...$$restProps} class="">
28+
<input {id} bind:this={input} bind:value {minlength} {maxlength} {required} {...$$restProps} class="">
3129
<slot name="after"/>
3230
</div>
3331
</slot>

‎ui/src/forms/MonthSelect.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,4 +23,4 @@
2323
}
2424
</script>
2525

26-
<SelectField options={months} bind:value={month} on:change={e => setMonth(e.currentTarget?.['value'])} {...$$restProps}/>
26+
<SelectField options={months} bind:value={month} onchange={(e: FormEvent) => setMonth(e.currentTarget?.['value'])} {...$$restProps}/>

‎ui/src/forms/MultipleSelect.svelte

+5-7
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,23 @@
33
import Badge from 'src/components/Badge.svelte'
44
import Icon from 'src/icons/Icon.svelte'
55
import PlusSelectField from './PlusSelectField.svelte'
6-
import {createEventDispatcher} from 'svelte'
76
87
export let label = ''
98
export let values: string[]
109
export let options: {[value: string|number]: string|number} | string[] | string | undefined
1110
export let disabled = false
11+
export let onchange: ((values: string[]) => void) | undefined = undefined
1212
1313
let select: HTMLSelectElement
1414
15-
const dispatch = createEventDispatcher<{change: string[]}>()
16-
1715
function remove(id: string) {
1816
values = values.filter(v => v != id)
19-
dispatch('change', values)
17+
onchange?.(values)
2018
}
2119
2220
function add() {
2321
values = [...values ?? [], select.value]
24-
dispatch('change', values)
22+
onchange?.(values)
2523
}
2624
2725
$: if (values) setTimeout(() => {if (select) select.selectedIndex = 0})
@@ -30,10 +28,10 @@
3028
<FormField {label}>
3129
<div class="flex flex-row flex-wrap items-center gap-2">
3230
{#each values ?? [] as key}
33-
<Badge>{options?.[key]} {#if !disabled}<a on:click={() => remove(key)} role="button" tabindex="0"><Icon name="x"/></a>{/if}</Badge>
31+
<Badge>{options?.[key]} {#if !disabled}<button onclick={() => remove(key)} class="ml-1"><Icon name="x"/></button>{/if}</Badge>
3432
{/each}
3533
{#if !disabled}
36-
<PlusSelectField {options} {values} bind:select on:change={add}/>
34+
<PlusSelectField {options} {values} bind:select onchange={add}/>
3735
{/if}
3836
</div>
3937
</FormField>

‎ui/src/forms/NumberField.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@
66
export let unit = ''
77
export let min = 0
88
export let maxlength = 10
9-
10-
interface $$Events {input: FormEvent; change: FormEvent}
119
</script>
1210

13-
<FormField {label} type="number" {min} {maxlength} bind:value style="padding-right: {unit.length / 2 + 1.5}em" on:input on:change {...$$restProps}>
11+
<FormField {label} type="number" {min} {maxlength} bind:value style="padding-right: {unit.length / 2 + 1.5}em" {...$$restProps}>
1412
<div slot="after" class="absolute inset-y-0 right-3 flex items-center pointer-events-none">
1513
<span class="unit text-gray-500 sm:text-sm">{unit}</span>
1614
</div>

‎ui/src/forms/PhoneField.svelte

+4-6
Original file line numberDiff line numberDiff line change
@@ -8,28 +8,26 @@
88
export let required = true
99
export let countryCode = ''
1010
11-
interface $$Events {}
12-
1311
$: areaCode = countries[countryCode as CountryCode]?.phoneAreaCode
1412
$: if (areaCode && value?.startsWith(areaCode)) value = '+' + value
1513
$: areaPrefix = areaCode ? '+' + areaCode : ''
1614
17-
async function focus(e: FormEvent) {
15+
async function onfocus(e: FormEvent) {
1816
if (!value) {
1917
value = areaPrefix
2018
setTimeout(() => e.currentTarget?.setSelectionRange(value.length, value.length))
2119
}
2220
}
2321
24-
function blur() {
22+
function onblur() {
2523
if (value == areaPrefix) value = ''
2624
}
2725
28-
function paste(e: ClipboardEvent) {
26+
function onpaste(e: ClipboardEvent) {
2927
e.preventDefault()
3028
const pasted = (e.clipboardData || e.clipboardData)?.getData('text')
3129
value = (pasted?.startsWith("+") ? '' : areaPrefix) + pasted
3230
}
3331
</script>
3432

35-
<FormField type="tel" on:paste={paste} bind:value {label} on:focus={focus} on:blur={blur} minlength={10} maxlength={15} {required} {...$$restProps}/>
33+
<FormField type="tel" {onpaste} bind:value {label} {onfocus} {onblur} minlength={10} maxlength={15} {required} {...$$restProps}/>

‎ui/src/forms/PlusSelectField.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</script>
1212

1313
{#if filteredOptions.length}
14-
<SelectField id={selectId} bind:select options={filteredOptions.toObject()} value="" emptyOption="+" on:change required={false} class={$$props.class} selectClass="plus"/>
14+
<SelectField id={selectId} bind:select options={filteredOptions.toObject()} value="" emptyOption="+" required={false} class={$$props.class} selectClass="plus" {...$$restProps}/>
1515
{/if}
1616

1717
<style lang="postcss" global>

‎ui/src/forms/RadioButton.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
{@const oid = id + slugify(option)}
2121
<div class="flex items-center">
2222
<input id={oid} type="radio" {required} bind:group={value}
23-
on:click={() => deselect(option)}
23+
onclick={() => deselect(option)}
2424
name={id} value={option}>
2525
<label for={oid}>
2626
<slot option={option}>{label}</slot>

‎ui/src/forms/SelectField.svelte

+3-4
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@
1010
export let required = true
1111
export let disabled = false
1212
export let select: HTMLSelectElement|undefined = undefined
13-
14-
interface $$Events {change: FormEvent}
13+
export let selectClass = ''
1514
1615
$: if (typeof value == 'number') value = value?.toString()
1716
@@ -23,8 +22,8 @@
2322
</script>
2423

2524
<FormField bind:id {label} {required} class={$$props.class}>
26-
<select {id} bind:this={select} class={$$props.selectClass }
27-
bind:value {required} {disabled} on:change>
25+
<select {id} bind:this={select} class={selectClass}
26+
bind:value {required} {disabled} {...$$restProps}>
2827
{#if emptyOption !== false}<option value="">{emptyOption}</option>{/if}
2928
{#each Object.entries(options) as [v, l] (v)}
3029
{#if l}<option value={v} disabled={!v?.trim()}>{l}</option>{/if}

‎ui/src/forms/TextAreaField.svelte

+1-3
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@
99
export let inBytes = false
1010
export let required = true
1111
12-
interface $$Events {input: FormEvent; change: FormEvent}
13-
1412
const encoder = new TextEncoder()
1513
1614
let textarea: HTMLTextAreaElement
@@ -31,5 +29,5 @@
3129
{value?.length ?? 0} / {maxlength}
3230
{/if}
3331
</div>
34-
<textarea {id} bind:this={textarea} bind:value on:input on:change {rows} {required} {...$$restProps}></textarea>
32+
<textarea {id} bind:this={textarea} bind:value {rows} {required} {...$$restProps}></textarea>
3533
</FormField>

‎ui/src/forms/URLField.svelte

+3-5
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,20 @@
55
export let value: string = ''
66
export let required = true
77
8-
interface $$Events {}
9-
108
const prefix = 'https://'
119
12-
async function focus(e: FormEvent) {
10+
async function onfocus(e: FormEvent) {
1311
if (!value) {
1412
value = prefix
1513
setTimeout(() => e.currentTarget?.setSelectionRange(value.length, value.length))
1614
}
1715
}
1816
19-
function blur() {
17+
function onblur() {
2018
if (value == prefix) value = ''
2119
value = value.replace(/#.*$/, '')
2220
if (value && !value.includes('://')) value = prefix + value
2321
}
2422
</script>
2523

26-
<FormField type="url" bind:value {label} on:focus={focus} on:blur={blur} maxlength={500} autocomplete="off" {required} {...$$restProps}/>
24+
<FormField type="url" bind:value {label} {onfocus} {onblur} maxlength={500} autocomplete="off" {required} {...$$restProps}/>

0 commit comments

Comments
 (0)