Skip to content

Commit

Permalink
refactor: Propagate native component events
Browse files Browse the repository at this point in the history
This commit propagates the native component events like click instead
of intercepting them with Svelte and re-dispatching them.
  • Loading branch information
rpf3 committed May 27, 2024
1 parent 8cad03c commit d8ee22b
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 26 deletions.
9 changes: 1 addition & 8 deletions src/lib/button/Button.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,17 @@
import type { ColorMode, FillMode, ButtonType } from '$lib/types';
import { COLOR_MODE, FILL_MODE, BUTTON_TYPE } from '$lib/types';
import { createEventDispatcher } from 'svelte';
export let type: ButtonType = BUTTON_TYPE.BUTTON;
export let color: ColorMode;
export let fill: FillMode;
export let disabled = false;
const dispatch = createEventDispatcher();
function dispatchEvent(event: Event) {
dispatch(event.type);
}
</script>

<button
{disabled}
type={type === BUTTON_TYPE.SUBMIT ? 'submit' : 'button'}
on:click={dispatchEvent}
on:click
class="w-full rounded-md border px-4 py-2 focus:outline-none"
class:bg-transparent={fill === FILL_MODE.RING}
class:bg-spek-primary-600={fill === FILL_MODE.FILL && color === COLOR_MODE.PRIMARY}
Expand Down
10 changes: 1 addition & 9 deletions src/lib/datepicker/Datepicker.svelte
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let value: string;
export let name = '';
const dispatch = createEventDispatcher();
function dispatchEvent(event: Event) {
dispatch(event.type);
}
</script>

<input
{name}
type="date"
bind:value
on:change={dispatchEvent}
on:change
class="w-full rounded border bg-spek-facade-50 p-1 text-sm outline-none outline-offset-0 focus:outline-spek-primary-400 dark:border-transparent dark:bg-spek-facade-500"
/>
10 changes: 1 addition & 9 deletions src/lib/textbox/Textbox.svelte
Original file line number Diff line number Diff line change
@@ -1,20 +1,12 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let value: string;
export let name = '';
const dispatch = createEventDispatcher();
function dispatchEvent(event: Event) {
dispatch(event.type);
}
</script>

<input
{name}
type="text"
bind:value
on:change={dispatchEvent}
on:change
class="w-full rounded border bg-spek-facade-50 p-1 text-sm outline-none outline-offset-0 focus:outline-spek-primary-400 dark:border-transparent dark:bg-spek-facade-500"
/>

0 comments on commit d8ee22b

Please sign in to comment.