/
cv-icon-button.vue
42 lines (40 loc) · 1.24 KB
/
cv-icon-button.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<template>
<button
:aria-pressed="kind === 'ghost' && selected"
class="cv-button"
:class="[
...buttonClassOpts({ iconOnly: true }),
`${carbonPrefix}--tooltip__trigger`,
`${carbonPrefix}--tooltip--a11y`,
`${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
`${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
]"
v-on="inputListeners"
type="button"
>
<span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>
<slot name="icon">
<CvSvg v-if="icon || iconHref" :svg="icon || iconHref" :class="`${carbonPrefix}--btn__icon`" />
</slot>
</button>
</template>
<script>
import buttonMixin from './button-mixin';
import { carbonPrefixMixin } from '../../mixins';
import CvSvg from '../cv-svg/_cv-svg';
export default {
name: 'CvIconButton',
mixins: [buttonMixin, carbonPrefixMixin],
components: { CvSvg },
props: {
label: { type: String, default: undefined },
selected: Boolean,
tipPosition: {
type: String,
default: 'bottom',
validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
},
tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
},
};
</script>