Refactor #3889 - For SpeedDial
parent
5acf8779e1
commit
59c25cbdbb
|
@ -39,13 +39,13 @@ export interface SpeedDialPassThroughOptions {
|
||||||
*/
|
*/
|
||||||
icon?: SpeedDialPassThroughOptionType;
|
icon?: SpeedDialPassThroughOptionType;
|
||||||
/**
|
/**
|
||||||
* Uses to pass attributes to the list's DOM element.
|
* Uses to pass attributes to the menu's DOM element.
|
||||||
*/
|
*/
|
||||||
list?: SpeedDialPassThroughOptionType;
|
menu?: SpeedDialPassThroughOptionType;
|
||||||
/**
|
/**
|
||||||
* Uses to pass attributes to the item's DOM element.
|
* Uses to pass attributes to the menu item's DOM element.
|
||||||
*/
|
*/
|
||||||
item?: SpeedDialPassThroughOptionType;
|
menuitem?: SpeedDialPassThroughOptionType;
|
||||||
/**
|
/**
|
||||||
* Uses to pass attributes to the action's DOM element.
|
* Uses to pass attributes to the action's DOM element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -22,9 +22,18 @@
|
||||||
</template>
|
</template>
|
||||||
</SDButton>
|
</SDButton>
|
||||||
</slot>
|
</slot>
|
||||||
<ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('list')">
|
<ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
|
||||||
<template v-for="(item, index) of model" :key="index">
|
<template v-for="(item, index) of model" :key="index">
|
||||||
<li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" class="p-speeddial-item" :class="itemClass(`${id}_${index}`)" :style="getItemStyle(index)" role="menuitem" v-bind="ptm('item')">
|
<li
|
||||||
|
v-if="isItemVisible(item)"
|
||||||
|
:id="`${id}_${index}`"
|
||||||
|
:aria-controls="`${id}_item`"
|
||||||
|
class="p-speeddial-item"
|
||||||
|
:class="itemClass(`${id}_${index}`)"
|
||||||
|
:style="getItemStyle(index)"
|
||||||
|
role="menuitem"
|
||||||
|
v-bind="ptm('menuitem', { activeDescendant: focused ? focusedOptionId : undefined })"
|
||||||
|
>
|
||||||
<template v-if="!$slots.item">
|
<template v-if="!$slots.item">
|
||||||
<a
|
<a
|
||||||
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
|
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
|
||||||
|
@ -36,7 +45,7 @@
|
||||||
:target="item.target"
|
:target="item.target"
|
||||||
@click="onItemClick($event, item)"
|
@click="onItemClick($event, item)"
|
||||||
:aria-label="item.label"
|
:aria-label="item.label"
|
||||||
v-bind="ptm('action')"
|
v-bind="ptm('action', { activeDescendant: focused ? focusedOptionId : undefined })"
|
||||||
>
|
>
|
||||||
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="ptm('actionIcon')"></span>
|
<span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="ptm('actionIcon')"></span>
|
||||||
</a>
|
</a>
|
||||||
|
|
Loading…
Reference in New Issue