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; 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.
*/ */

View File

@ -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>