vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

refactor: #7090 for Menu

pull/7064/merge
Mert Sincan 2025-01-14 11:11:48 +00:00
parent cb9867c839
commit 432e1c7e87
1 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/primevue/src/menu/Menu.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<Portal :appendTo="appendTo" :disabled="!popup"> <Portal :appendTo="appendTo" :disabled="!popup">
<transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')"> <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
<div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')"> <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="$id" :class="cx('root')" @click="onOverlayClick" v-bind="ptmi('root')">
<div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')"> <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
<slot name="start"></slot> <slot name="start"></slot>
</div> </div>
<ul <ul
:ref="listRef" :ref="listRef"
:id="id + '_list'" :id="$id + '_list'"
:class="cx('list')" :class="cx('list')"
role="menu" role="menu"
:tabindex="tabindex" :tabindex="tabindex"
@ -21,14 +21,14 @@
> >
<template v-for="(item, i) of model" :key="label(item) + i.toString()"> <template v-for="(item, i) of model" :key="label(item) + i.toString()">
<template v-if="item.items && visible(item) && !item.separator"> <template v-if="item.items && visible(item) && !item.separator">
<li v-if="item.items" :id="id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')"> <li v-if="item.items" :id="$id + '_' + i" :class="[cx('submenuLabel'), item.class]" role="none" v-bind="ptm('submenuLabel')">
<!--TODO: submenuheader deprecated since v4.0. Use submenulabel--> <!--TODO: submenuheader deprecated since v4.0. Use submenulabel-->
<slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot> <slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot>
</li> </li>
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j"> <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
<PVMenuitem <PVMenuitem
v-if="visible(child) && !child.separator" v-if="visible(child) && !child.separator"
:id="id + '_' + i + '_' + j" :id="$id + '_' + i + '_' + j"
:item="child" :item="child"
:templates="$slots" :templates="$slots"
:focusedOptionId="focusedOptionId" :focusedOptionId="focusedOptionId"
@ -44,7 +44,7 @@
<PVMenuitem <PVMenuitem
v-else v-else
:key="label(item) + i.toString()" :key="label(item) + i.toString()"
:id="id + '_' + i" :id="$id + '_' + i"
:item="item" :item="item"
:index="i" :index="i"
:templates="$slots" :templates="$slots"
@ -65,9 +65,9 @@
</template> </template>
<script> <script>
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils'; import { absolutePosition, addStyle, find, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
import { ZIndex } from '@primeuix/utils/zindex'; import { ZIndex } from '@primeuix/utils/zindex';
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
import OverlayEventBus from 'primevue/overlayeventbus'; import OverlayEventBus from 'primevue/overlayeventbus';
import Portal from 'primevue/portal'; import Portal from 'primevue/portal';
import BaseMenu from './BaseMenu.vue'; import BaseMenu from './BaseMenu.vue';
@ -80,18 +80,12 @@ export default {
emits: ['show', 'hide', 'focus', 'blur'], emits: ['show', 'hide', 'focus', 'blur'],
data() { data() {
return { return {
id: this.$attrs.id,
overlayVisible: false, overlayVisible: false,
focused: false, focused: false,
focusedOptionIndex: -1, focusedOptionIndex: -1,
selectedOptionIndex: -1 selectedOptionIndex: -1
}; };
}, },
watch: {
'$attrs.id': function (newValue) {
this.id = newValue || UniqueComponentId();
}
},
target: null, target: null,
outsideClickListener: null, outsideClickListener: null,
scrollHandler: null, scrollHandler: null,
@ -99,8 +93,6 @@ export default {
container: null, container: null,
list: null, list: null,
mounted() { mounted() {
this.id = this.id || UniqueComponentId();
if (!this.popup) { if (!this.popup) {
this.bindResizeListener(); this.bindResizeListener();
this.bindOutsideClickListener(); this.bindOutsideClickListener();