151 lines
3.9 KiB
HTML
151 lines
3.9 KiB
HTML
<button type="button"
|
|
title={label}
|
|
aria-label={label}
|
|
aria-pressed={pressable ? !!pressed : void 0}
|
|
aria-hidden={ariaHidden}
|
|
class={computedClass}
|
|
{disabled}
|
|
ref:node
|
|
>
|
|
<SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
|
|
</button>
|
|
<style>
|
|
.icon-button {
|
|
padding: 6px 10px;
|
|
background: none;
|
|
border: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
:global(.icon-button-svg) {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--action-button-fill-color);
|
|
pointer-events: none; /* hack for Edge */
|
|
}
|
|
|
|
:global(.icon-button.big-icon .icon-button-svg) {
|
|
width: 32px;
|
|
height: 32px;
|
|
}
|
|
|
|
/*
|
|
* regular styles
|
|
*/
|
|
|
|
:global(.icon-button:hover .icon-button-svg) {
|
|
fill: var(--action-button-fill-color-hover);
|
|
}
|
|
|
|
:global(.icon-button.not-pressable:active .icon-button-svg,
|
|
.icon-button.same-pressed:active .icon-button-svg) {
|
|
fill: var(--action-button-fill-color-active);
|
|
}
|
|
|
|
:global(.icon-button.pressed.not-same-pressed .icon-button-svg) {
|
|
fill: var(--action-button-fill-color-pressed);
|
|
}
|
|
|
|
:global(.icon-button.pressed.not-same-pressed:hover .icon-button-svg) {
|
|
fill: var(--action-button-fill-color-pressed-hover);
|
|
}
|
|
|
|
:global(.icon-button.pressed.not-same-pressed:active .icon-button-svg) {
|
|
fill: var(--action-button-fill-color-pressed-active);
|
|
}
|
|
|
|
/*
|
|
* muted
|
|
*/
|
|
|
|
:global(.icon-button.muted-style .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color);
|
|
}
|
|
|
|
:global(.icon-button.muted-style:hover .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color-hover);
|
|
}
|
|
|
|
:global(.icon-button.muted-style.not-pressable:active .icon-button-svg,
|
|
.icon-button.muted-style.same-pressed:active .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color-active);
|
|
}
|
|
|
|
:global(.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color-pressed);
|
|
}
|
|
|
|
:global(.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color-pressed-hover);
|
|
}
|
|
|
|
:global(.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg) {
|
|
fill: var(--action-button-deemphasized-fill-color-pressed-active);
|
|
}
|
|
|
|
</style>
|
|
<script>
|
|
import { classname } from '../_utils/classname'
|
|
import { store } from '../_store/store'
|
|
import SvgIcon from './SvgIcon.html'
|
|
|
|
export default {
|
|
oncreate () {
|
|
let { clickListener, elementId } = this.get()
|
|
if (clickListener) {
|
|
this.onClick = this.onClick.bind(this)
|
|
this.refs.node.addEventListener('click', this.onClick)
|
|
}
|
|
if (elementId) {
|
|
this.refs.node.setAttribute('id', elementId)
|
|
}
|
|
},
|
|
ondestroy () {
|
|
let { clickListener } = this.get()
|
|
if (clickListener) {
|
|
this.refs.node.removeEventListener('click', this.onClick)
|
|
}
|
|
},
|
|
data: () => ({
|
|
big: false,
|
|
muted: false,
|
|
disabled: false,
|
|
svgClassName: void 0,
|
|
elementId: void 0,
|
|
pressable: false,
|
|
pressed: false,
|
|
className: void 0,
|
|
sameColorWhenPressed: false,
|
|
ariaHidden: false,
|
|
clickListener: true
|
|
}),
|
|
store: () => store,
|
|
computed: {
|
|
computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => {
|
|
return classname(
|
|
'icon-button',
|
|
!pressable && 'not-pressable',
|
|
pressed && 'pressed',
|
|
big && 'big-icon',
|
|
muted && 'muted-style',
|
|
sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
|
|
className
|
|
)
|
|
}
|
|
},
|
|
methods: {
|
|
animate (animation) {
|
|
this.refs.svg.animate(animation)
|
|
},
|
|
onClick (e) {
|
|
this.fire('click', e)
|
|
}
|
|
},
|
|
components: {
|
|
SvgIcon
|
|
}
|
|
}
|
|
</script>
|