Refactor #4351 - For TieredMenu
parent
d8b1f2c944
commit
45cbe1da55
|
@ -20,6 +20,7 @@
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:level="0"
|
:level="0"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
|
:unstyled="unstyled"
|
||||||
@focus="onFocus"
|
@focus="onFocus"
|
||||||
@blur="onBlur"
|
@blur="onBlur"
|
||||||
@keydown="onKeyDown"
|
@keydown="onKeyDown"
|
||||||
|
@ -77,6 +78,11 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
beforeMount() {
|
||||||
|
if (!this.$slots.item) {
|
||||||
|
console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.id = this.id || UniqueComponentId();
|
this.id = this.id || UniqueComponentId();
|
||||||
},
|
},
|
||||||
|
|
|
@ -38,7 +38,7 @@
|
||||||
</template>
|
</template>
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
<component v-else :is="templates.item" :item="processedItem.item"></component>
|
<component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
|
||||||
</div>
|
</div>
|
||||||
<TieredMenuSub
|
<TieredMenuSub
|
||||||
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
|
||||||
|
@ -53,6 +53,7 @@
|
||||||
:exact="exact"
|
:exact="exact"
|
||||||
:level="level + 1"
|
:level="level + 1"
|
||||||
:pt="pt"
|
:pt="pt"
|
||||||
|
:unstyled="unstyled"
|
||||||
@item-click="$emit('item-click', $event)"
|
@item-click="$emit('item-click', $event)"
|
||||||
@item-mouseenter="$emit('item-mouseenter', $event)"
|
@item-mouseenter="$emit('item-mouseenter', $event)"
|
||||||
/>
|
/>
|
||||||
|
@ -167,6 +168,36 @@ export default {
|
||||||
},
|
},
|
||||||
getAriaPosInset(index) {
|
getAriaPosInset(index) {
|
||||||
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
|
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
|
||||||
|
},
|
||||||
|
getMenuItemProps(processedItem, index) {
|
||||||
|
return {
|
||||||
|
action: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('action'),
|
||||||
|
tabindex: -1,
|
||||||
|
'aria-hidden': true
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'action')
|
||||||
|
),
|
||||||
|
icon: mergeProps(
|
||||||
|
{
|
||||||
|
class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'icon')
|
||||||
|
),
|
||||||
|
label: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('label')
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'label')
|
||||||
|
),
|
||||||
|
submenuicon: mergeProps(
|
||||||
|
{
|
||||||
|
class: this.cx('submenuIcon')
|
||||||
|
},
|
||||||
|
this.getPTOptions(processedItem, index, 'submenuIcon')
|
||||||
|
)
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
|
Loading…
Reference in New Issue