refactor: #7090 for Menu
parent
cb9867c839
commit
432e1c7e87
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<Portal :appendTo="appendTo" :disabled="!popup">
|
||||
<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')">
|
||||
<slot name="start"></slot>
|
||||
</div>
|
||||
<ul
|
||||
:ref="listRef"
|
||||
:id="id + '_list'"
|
||||
:id="$id + '_list'"
|
||||
:class="cx('list')"
|
||||
role="menu"
|
||||
:tabindex="tabindex"
|
||||
|
@ -21,14 +21,14 @@
|
|||
>
|
||||
<template v-for="(item, i) of model" :key="label(item) + i.toString()">
|
||||
<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-->
|
||||
<slot :name="$slots.submenulabel ? 'submenulabel' : 'submenuheader'" :item="item">{{ label(item) }}</slot>
|
||||
</li>
|
||||
<template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
|
||||
<PVMenuitem
|
||||
v-if="visible(child) && !child.separator"
|
||||
:id="id + '_' + i + '_' + j"
|
||||
:id="$id + '_' + i + '_' + j"
|
||||
:item="child"
|
||||
:templates="$slots"
|
||||
:focusedOptionId="focusedOptionId"
|
||||
|
@ -44,7 +44,7 @@
|
|||
<PVMenuitem
|
||||
v-else
|
||||
:key="label(item) + i.toString()"
|
||||
:id="id + '_' + i"
|
||||
:id="$id + '_' + i"
|
||||
:item="item"
|
||||
:index="i"
|
||||
:templates="$slots"
|
||||
|
@ -65,9 +65,9 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { ConnectedOverlayScrollHandler, UniqueComponentId } from '@primevue/core/utils';
|
||||
import { focus, find, findSingle, addStyle, absolutePosition, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
|
||||
import { absolutePosition, addStyle, find, findSingle, focus, getOuterWidth, isTouchDevice } from '@primeuix/utils/dom';
|
||||
import { ZIndex } from '@primeuix/utils/zindex';
|
||||
import { ConnectedOverlayScrollHandler } from '@primevue/core/utils';
|
||||
import OverlayEventBus from 'primevue/overlayeventbus';
|
||||
import Portal from 'primevue/portal';
|
||||
import BaseMenu from './BaseMenu.vue';
|
||||
|
@ -80,18 +80,12 @@ export default {
|
|||
emits: ['show', 'hide', 'focus', 'blur'],
|
||||
data() {
|
||||
return {
|
||||
id: this.$attrs.id,
|
||||
overlayVisible: false,
|
||||
focused: false,
|
||||
focusedOptionIndex: -1,
|
||||
selectedOptionIndex: -1
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$attrs.id': function (newValue) {
|
||||
this.id = newValue || UniqueComponentId();
|
||||
}
|
||||
},
|
||||
target: null,
|
||||
outsideClickListener: null,
|
||||
scrollHandler: null,
|
||||
|
@ -99,8 +93,6 @@ export default {
|
|||
container: null,
|
||||
list: null,
|
||||
mounted() {
|
||||
this.id = this.id || UniqueComponentId();
|
||||
|
||||
if (!this.popup) {
|
||||
this.bindResizeListener();
|
||||
this.bindOutsideClickListener();
|
||||
|
|
Loading…
Reference in New Issue