Refactor #3889 - For SpeedDial

pull/3913/head
Tuğçe Küçükoğlu 2023-04-27 10:14:34 +03:00
parent 5acf8779e1
commit 59c25cbdbb
2 changed files with 16 additions and 7 deletions

View File

@ -39,13 +39,13 @@ export interface SpeedDialPassThroughOptions {
*/
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.
*/

View File

@ -22,9 +22,18 @@
</template>
</SDButton>
</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">
<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">
<a
v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@ -36,7 +45,7 @@
:target="item.target"
@click="onItemClick($event, item)"
: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>
</a>