82 lines
1.8 KiB
HTML
82 lines
1.8 KiB
HTML
{{#if pressable}}
|
|
<button type="button"
|
|
aria-label="{{label}}"
|
|
aria-pressed="{{!!pressed}}"
|
|
class="{{computedClass}}"
|
|
disabled="{{disabled}}"
|
|
delegate-click-key="{{delegateKey}}"
|
|
delegate-keydown-key="{{delegateKey}}"
|
|
on:click
|
|
>
|
|
<svg>
|
|
<use xlink:href="{{href}}" />
|
|
</svg>
|
|
</button>
|
|
{{else}}
|
|
<button type="button"
|
|
aria-label="{{label}}"
|
|
class="{{computedClass}}"
|
|
disabled="{{disabled}}"
|
|
delegate-click-key="{{delegateKey}}"
|
|
delegate-keydown-key="{{delegateKey}}"
|
|
on:click
|
|
>
|
|
<svg>
|
|
<use xlink:href="{{href}}" />
|
|
</svg>
|
|
</button>
|
|
{{/if}}
|
|
<style>
|
|
button.icon-button {
|
|
padding: 6px 10px;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
button.icon-button svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--action-button-fill-color);
|
|
}
|
|
|
|
button.icon-button.big-icon svg {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
button.icon-button:hover svg {
|
|
fill: var(--action-button-fill-color-hover);
|
|
}
|
|
|
|
button.icon-button.not-pressable:active svg {
|
|
fill: var(--action-button-fill-color-active);
|
|
}
|
|
|
|
button.icon-button.pressed svg {
|
|
fill: var(--action-button-fill-color-pressed)
|
|
}
|
|
|
|
button.icon-button.pressed:hover svg {
|
|
fill: var(--action-button-fill-color-pressed-hover);
|
|
}
|
|
|
|
button.icon-button.pressed:active svg {
|
|
fill: var(--action-button-fill-color-pressed-active);
|
|
}
|
|
</style>
|
|
<script>
|
|
import identity from 'lodash/identity'
|
|
|
|
export default {
|
|
computed: {
|
|
computedClass: (pressable, pressed, big) => {
|
|
return [
|
|
'icon-button',
|
|
!pressable && 'not-pressable',
|
|
pressed && 'pressed',
|
|
big && 'big-icon',
|
|
].filter(identity).join(' ')
|
|
}
|
|
}
|
|
}
|
|
</script> |