Refactor #4149 - For Dock

pull/4172/head
Tuğçe Küçükoğlu 2023-07-19 15:03:52 +03:00
parent 5cf78eb31e
commit 608e222d60
2 changed files with 13 additions and 8 deletions

View File

@ -100,6 +100,10 @@ export interface DockState {
* Defines current options in Dock component.
*/
export interface DockContext {
/**
* Current index of the menuitem.
*/
index: number;
/**
* Current active state of menuitem as a boolean.
* @defaultValue false

View File

@ -25,11 +25,11 @@
:aria-disabled="disabled(processedItem)"
@click="onItemClick($event, processedItem)"
@mouseenter="onItemMouseEnter(index)"
v-bind="getPTOptions(getItemId(index), 'menuitem')"
v-bind="getPTOptions('menuitem', index)"
:data-p-focused="isItemActive(getItemId(index))"
:data-p-disabled="disabled(processedItem) || false"
>
<div :class="cx('content')" v-bind="getPTOptions(getItemId(index), 'content')">
<div :class="cx('content')" v-bind="getPTOptions('content', index)">
<template v-if="!templates['item']">
<router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
<a
@ -40,10 +40,10 @@
tabindex="-1"
aria-hidden="true"
@click="onItemActionClick($event, processedItem, navigate)"
v-bind="getPTOptions(getItemId(index), 'action')"
v-bind="getPTOptions('action', index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
@ -56,10 +56,10 @@
:target="processedItem.target"
tabindex="-1"
aria-hidden="true"
v-bind="getPTOptions(getItemId(index), 'action')"
v-bind="getPTOptions('action', index)"
>
<template v-if="!templates['icon']">
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions(getItemId(index), 'icon')"></span>
<span v-ripple :class="[cx('icon'), processedItem.icon]" v-bind="getPTOptions('icon', index)"></span>
</template>
<component v-else :is="templates['icon']" :item="processedItem" :class="cx('icon')"></component>
</a>
@ -141,10 +141,11 @@ export default {
getItemProp(processedItem, name) {
return processedItem && processedItem.item ? ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
},
getPTOptions(id, key) {
getPTOptions(key, index) {
return this.ptm(key, {
context: {
active: this.isItemActive(id)
index,
active: this.isItemActive(this.getItemId(index))
}
});
},