Remove props property in favor of $$restProps

This commit is contained in:
Henrik Giesel 2021-04-08 18:57:20 +02:00
parent f88b9d64d3
commit 4c273caedb
10 changed files with 18 additions and 27 deletions

View file

@ -4,7 +4,6 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
function extendClassName(className: string): string {
return `dropdown-menu bg-transparent border-0 ${className}`;
@ -13,4 +12,4 @@
export let buttons: DynamicSvelteComponent[];
</script>
<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
<ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />

View file

@ -3,7 +3,6 @@
export let id;
export let className = "";
export let props: Record<string, string> = {};
export let buttons: DynamicSvelteComponent[];
</script>
@ -50,7 +49,7 @@
}
</style>
<ul {id} class={className} {...props}>
<ul {id} class={className} {...$$restProps}>
{#each buttons as button}
<li>
<svelte:component this={button.component} {...button} />

View file

@ -1,7 +1,6 @@
<script lang="typescript">
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
export let onChange: (event: Event) => void;
@ -46,8 +45,8 @@
tabindex="-1"
{id}
class={className}
{...props}
title={tooltip}
{...$$restProps}
on:mousedown|preventDefault>
<span> <input type="color" on:change={onChange} /> </span>
</button>

View file

@ -38,7 +38,6 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
export let icon;
@ -62,6 +61,6 @@
}
</script>
<SquareButton {id} {className} {props} {tooltip} {active} {onClick} on:mount>
<SquareButton {id} {className} {tooltip} {active} {onClick} {...$$restProps} on:mount>
{@html icon}
</SquareButton>

View file

@ -1,7 +1,6 @@
<script lang="typescript">
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
export let onClick: (event: MouseEvent) => void;
@ -12,8 +11,8 @@
<button
{id}
class={`dropdown-item ${className}`}
{...props}
title={tooltip}
{...$$restProps}
on:click={onClick}
on:mousedown|preventDefault>
<span class="float-start">{label}</span>

View file

@ -3,13 +3,12 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
export let icon = "";
export let onClick: (event: MouseEvent) => void;
</script>
<SquareButton {id} {className} {props} {tooltip} {onClick} on:mount>
<SquareButton {id} {className} {tooltip} {onClick} {...$$restProps} on:mount>
{@html icon}
</SquareButton>

View file

@ -4,7 +4,6 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let label: string;
export let tooltip: string;
@ -57,9 +56,9 @@
disabled={_disabled}
{id}
class={extendClassName(className)}
{...props}
title={tooltip}
{...$$restProps}
on:click={onClick}
on:mousedown|preventDefault
title={tooltip}>
on:mousedown|preventDefault>
{label}
</button>

View file

@ -11,7 +11,6 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
function extendClassName(classes: string) {
@ -59,8 +58,8 @@
disabled={_disabled}
{id}
class={extendClassName(className)}
{...props}
title={tooltip}>
title={tooltip}
{...$$restProps}>
{#each options as option}
<SelectOption {...option} />
{/each}

View file

@ -5,7 +5,6 @@
export let id = "";
export let className = "";
export let props: Record<string, string> = {};
export let tooltip: string;
export let onClick: (event: MouseEvent) => void;
@ -85,11 +84,11 @@
bind:this={buttonRef}
{id}
class={className}
{...props}
title={tooltip}
class:active
tabindex="-1"
disabled={_disabled}
{...$$restProps}
on:click={onClick}
on:mousedown|preventDefault>
<span class="p-1"><slot /></span>

View file

@ -4,14 +4,14 @@
export let button: DynamicSvelteComponent;
export let menuId: string;
function extend({ className, props, ...rest }: DynamicSvelteComponent): DynamicSvelteComponent {
function extend({
className,
...rest
}: DynamicSvelteComponent): DynamicSvelteComponent {
return {
className: `${className} dropdown-toggle`,
props: {
"data-bs-toggle": "dropdown",
"aria-expanded": "false",
...props,
},
"data-bs-toggle": "dropdown",
"aria-expanded": "false",
...rest,
};
}