component(
@click="onClick"
@dblclick="onDoubleClick"
@mousedown="onMouseDown"
@mouseenter="onMouseEnter"
@mouseleave="onMouseLeave"
@mousemove="onMouseMove"
@mouseout="onMouseOut"
@mouseover="onMouseOver"
@mouseup="onMouseUp"
:class=`[
"gb-base-button",
"gb-base-button--" + color,
"gb-base-button--" + size,
"gb-base-button--" + computedTheme,
{
"gb-base-button--circular": circular,
"gb-base-button--disabled": disabled || loading,
"gb-base-button--full-width": fullWidth,
"gb-base-button--link": link,
"gb-base-button--loading": loading,
"gb-base-button--reverse": reverse,
"gb-base-button--rounded": rounded,
"gb-base-button--uppercase": uppercase
}
]`
:disabled="disabled"
:is="href ? 'a' : 'button'"
:href="href"
:type="href ? null : type"
)
span.gb-base-button__focuser
span.gb-base-button__inner
base-icon(
v-if="leftIcon"
:color="leftIconColor"
:name="leftIcon"
:outlined="leftIconOutlined"
:size="computedIconSize"
class="gb-base-button__left-icon"
)
span(
v-if="$slots.default && $slots.default[0].text.trim() && !circular"
class="gb-base-button__label"
)
template(
v-if="confirming"
) Click to confirm
slot(
v-else
)
base-icon(
v-if="computedRightIcon"
:color="rightIconColor"
:name="computedRightIcon"
:outlined="rightIconOutlined"
:size="computedIconSize"
class="gb-base-button__right-icon"
)
base-spinner(
v-if="loading"
:color="computedSpinnerColor"
:theme="theme"
class="gb-base-button__spinner"
size="mini"
)
transition(
v-if="list && listOpened && !loading"
enter-active-class="animated fade-in"
leave-active-class="animated fade-out"
)
.gb-base-button__list
span(
v-for="item in list"
@click="onItemClick(item.id, $event)"
:key="item.id"
class="gb-base-button__item"
) {{ item.label }}