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. * Defines current options in Dock component.
*/ */
export interface DockContext { export interface DockContext {
/**
* Current index of the menuitem.
*/
index: number;
/** /**
* Current active state of menuitem as a boolean. * Current active state of menuitem as a boolean.
* @defaultValue false * @defaultValue false

View File

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