2020-06-06 05:15:44 +02:00
|
|
|
<template>
|
|
|
|
<div class="ftIconButton">
|
|
|
|
<font-awesome-icon
|
|
|
|
class="iconButton"
|
|
|
|
:title="title"
|
|
|
|
:icon="icon"
|
|
|
|
:class="{
|
|
|
|
base: theme === 'base',
|
|
|
|
primary: theme === 'primary',
|
2020-06-11 02:21:31 +02:00
|
|
|
secondary: theme === 'secondary',
|
|
|
|
shadow: useShadow
|
2020-06-06 05:15:44 +02:00
|
|
|
}"
|
2020-06-23 17:47:19 +02:00
|
|
|
:style="{
|
|
|
|
padding: padding + 'px',
|
|
|
|
fontSize: size + 'px'
|
|
|
|
}"
|
2020-06-06 05:15:44 +02:00
|
|
|
@click="handleIconClick"
|
|
|
|
/>
|
|
|
|
<div
|
2020-09-21 01:15:59 +02:00
|
|
|
tabindex="-1"
|
|
|
|
:id="id"
|
2020-06-06 05:15:44 +02:00
|
|
|
class="iconDropdown"
|
|
|
|
:class="{
|
2020-06-17 05:01:13 +02:00
|
|
|
left: dropdownPositionX === 'left',
|
|
|
|
right: dropdownPositionX === 'right',
|
|
|
|
center: dropdownPositionX === 'center',
|
|
|
|
bottom: dropdownPositionY === 'bottom',
|
|
|
|
top: dropdownPositionY === 'top'
|
2020-06-06 05:15:44 +02:00
|
|
|
}"
|
|
|
|
>
|
2020-06-17 05:01:13 +02:00
|
|
|
<slot>
|
2020-06-17 09:42:26 +02:00
|
|
|
<ul
|
2020-06-17 05:01:13 +02:00
|
|
|
v-if="dropdownNames.length > 0"
|
2020-06-19 22:20:06 +02:00
|
|
|
class="list"
|
2020-06-17 05:01:13 +02:00
|
|
|
>
|
2020-06-17 09:42:26 +02:00
|
|
|
<li
|
2020-06-17 05:01:13 +02:00
|
|
|
v-for="(label, index) in dropdownNames"
|
|
|
|
:key="index"
|
2020-06-17 09:42:26 +02:00
|
|
|
class="listItem"
|
2020-06-17 05:01:13 +02:00
|
|
|
@click="handleDropdownClick(index)"
|
|
|
|
>
|
|
|
|
{{ label }}
|
2020-06-17 09:42:26 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
2020-06-17 05:01:13 +02:00
|
|
|
</slot>
|
2020-06-06 05:15:44 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script src="./ft-icon-button.js" />
|
2020-06-16 18:50:46 +02:00
|
|
|
<style scoped lang="sass" src="./ft-icon-button.sass" />
|