Refactor #4149 - For Dock
parent
5cf78eb31e
commit
608e222d60
|
@ -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
|
||||||
|
|
|
@ -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))
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue