mirror of https://github.com/FreeTubeApp/FreeTube
101 lines
3.2 KiB
Vue
101 lines
3.2 KiB
Vue
<template>
|
|
<div class="ftIconButton">
|
|
<font-awesome-icon
|
|
ref="iconButton"
|
|
class="iconButton"
|
|
:title="title"
|
|
:icon="icon"
|
|
:class="{
|
|
[theme]: true,
|
|
shadow: useShadow,
|
|
disabled
|
|
}"
|
|
:style="{
|
|
padding: padding + 'px',
|
|
fontSize: size + 'px'
|
|
}"
|
|
tabindex="0"
|
|
role="button"
|
|
:aria-expanded="dropdownShown"
|
|
@click="handleIconClick"
|
|
@mousedown="handleIconMouseDown"
|
|
@keydown.enter.prevent="handleIconClick"
|
|
@keydown.space.prevent="handleIconClick"
|
|
/>
|
|
<template
|
|
v-if="dropdownShown"
|
|
>
|
|
<ft-prompt
|
|
v-if="useModal"
|
|
:autosize="true"
|
|
:label="sanitizeForHtmlId(`iconButtonPrompt-${title}`)"
|
|
@click="dropdownShown = false"
|
|
>
|
|
<slot>
|
|
<ul
|
|
v-if="dropdownOptions.length > 0"
|
|
class="list"
|
|
role="listbox"
|
|
>
|
|
<li
|
|
v-for="(option, index) in dropdownOptions"
|
|
:id="sanitizeForHtmlId(title + '-' + index)"
|
|
:key="index"
|
|
role="option"
|
|
aria-selected="false"
|
|
tabindex="-1"
|
|
:class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
|
|
@click="handleDropdownClick({url: option.value, index: index})"
|
|
@keydown.enter="handleDropdownClick({url: option.value, index: index})"
|
|
@keydown.space="handleDropdownClick({url: option.value, index: index})"
|
|
>
|
|
{{ option.type === 'divider' ? '' : option.label }}
|
|
</li>
|
|
</ul>
|
|
</slot>
|
|
</ft-prompt>
|
|
<div
|
|
v-else
|
|
ref="dropdown"
|
|
tabindex="-1"
|
|
class="iconDropdown"
|
|
:class="{
|
|
left: dropdownPositionX === 'left',
|
|
right: dropdownPositionX === 'right',
|
|
center: dropdownPositionX === 'center',
|
|
bottom: dropdownPositionY === 'bottom',
|
|
top: dropdownPositionY === 'top'
|
|
}"
|
|
@focusout="handleDropdownFocusOut"
|
|
@keydown.esc.stop="handleDropdownEscape"
|
|
>
|
|
<slot>
|
|
<ul
|
|
v-if="dropdownOptions.length > 0"
|
|
class="list"
|
|
role="listbox"
|
|
>
|
|
<li
|
|
v-for="(option, index) in dropdownOptions"
|
|
:id="sanitizeForHtmlId(title + '-' + index)"
|
|
:key="index"
|
|
:role="option.type === 'divider' ? 'separator' : 'option'"
|
|
aria-selected="false"
|
|
:tabindex="option.type === 'divider' ? '-1' : '0'"
|
|
:class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
|
|
@click="handleDropdownClick({url: option.value, index: index}, $event)"
|
|
@keydown.enter="handleDropdownClick({url: option.value, index: index}, $event)"
|
|
@keydown.space="handleDropdownClick({url: option.value, index: index}, $event)"
|
|
>
|
|
{{ option.type === 'divider' ? '' : option.label }}
|
|
</li>
|
|
</ul>
|
|
</slot>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./ft-icon-button.js" />
|
|
<style scoped lang="scss" src="./ft-icon-button.scss" />
|