Optimize components

- Use class attribute over className
- Code cleaning
This commit is contained in:
2020-02-26 15:49:56 +01:00
parent b084629b37
commit afb087408c
8 changed files with 18 additions and 72 deletions

View File

@@ -1,20 +1,19 @@
<script>
export let href = '#'
export let type = 'a'
export let className = 'button'
export let text = ''
const hasSlot = arguments[1].$$slots !== undefined
</script>
{#if type === 'button'}
<button class={className} class:button-icon={hasSlot} data-text={text} on:click>
<button class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
<slot></slot>
<span>{text}</span>
</button>
{:else}
<a {href} class={className} class:button-icon={hasSlot} data-text={text} on:click>
<a {href} class={$$props.class ? $$props.class : 'button'} class:button-icon={hasSlot} data-text={text} on:click>
<slot></slot>
<span>{text}</span>
</a>

View File

@@ -1,11 +1,10 @@
<script>
export let direction = 'left'
export let color = '#fff'
export let className
export let hidden = undefined
</script>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={className} aria-hidden={hidden}>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 20 20" fill={color} class={$$props.class} aria-hidden={hidden}>
{#if direction === 'left'}
<path d="M.26 10.85l-.06-.11-.08-.15-.05-.16-.04-.13a1.5 1.5 0 010-.6c0-.05.03-.09.04-.13l.05-.16.08-.15.06-.1c.06-.1.13-.17.2-.25L9.2.45c.61-.6 1.61-.6 2.23 0 .62.6.62 1.57 0 2.17L5.4 8.47h13.02c.87 0 1.58.68 1.58 1.53s-.7 1.53-1.58 1.53H5.4l6.03 5.85c.62.6.62 1.57 0 2.17-.3.3-.71.45-1.12.45-.4 0-.8-.15-1.11-.45L.46 11.08a1.5 1.5 0 01-.2-.23"/>
{:else if direction === 'right'}

View File

@@ -1,10 +1,9 @@
<script>
export let width = 18
export let color = '#fff'
export let className
export let hidden = undefined
</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={className} aria-hidden={hidden}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17" {width} fill={color} class={$$props.class} aria-hidden={hidden}>
<path fill-rule="nonzero" d="M16.63.37c.47.47.5 1.2.09 1.7l-.09.1-6.32 6.33 6.32 6.32a1.28 1.28 0 01-1.7 1.9l-.1-.09-6.33-6.32-6.32 6.32a1.28 1.28 0 01-1.9-1.7l.09-.1L6.69 8.5.37 2.18a1.28 1.28 0 011.7-1.9l.1.09L8.5 6.69 14.82.37c.5-.5 1.31-.5 1.81 0z"/>
</svg>