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

Fixed #4784 - Collision Enhancements

pull/4789/head
tugcekucukoglu 2023-11-09 17:18:51 +03:00
parent a5a0ce75c8
commit cba43b310b
9 changed files with 155 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/lib/cascadeselect/CascadeSelectSub.vue
View File

@ -1,5 +1,5 @@
<template>
<ul :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
<ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
<template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li
:id="getOptionId(processedOption)"
@ -45,6 +45,7 @@
@option-change="onOptionChange"
:pt="pt"
:unstyled="unstyled"
:isParentMount="mounted"
/>
</li>
</template>
@ -62,6 +63,7 @@ export default {
hostName: 'CascadeSelect',
extends: BaseComponent,
emits: ['option-change'],
container: null,
props: {
selectId: String,
focusedOptionId: String,
@ -74,12 +76,25 @@ export default {
optionGroupChildren: Array,
activeOptionPath: Array,
level: Number,
templates: null
templates: null,
isParentMount: Boolean
},
data() {
return {
mounted: false
};
},
watch: {
isParentMount: {
handler(newValue) {
newValue && DomHandler.nestedPosition(this.container, this.level);
}
}
},
mounted() {
if (ObjectUtils.isNotEmpty(this.parentKey)) {
this.position();
}
// entering order correction when an item is selected
(this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
this.mounted = true;
},
methods: {
getOptionId(processedOption) {
@ -121,16 +136,8 @@ export default {
onOptionChange(event) {
this.$emit('option-change', event);
},
position() {
const parentItem = this.$el.parentElement;
const containerOffset = DomHandler.getOffset(parentItem);
const viewport = DomHandler.getViewport();
const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$el);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$el.style.left = '-100%';
}
containerRef(el) {
this.container = el;
}
},
directives: {

9
components/lib/cascadeselect/style/CascadeSelectStyle.js
View File

@ -82,6 +82,15 @@ const css = `
left: 100%;
top: 0;
}
.p-cascadeselect-enter-from,
.p-cascadeselect-leave-active {
opacity: 0;
}
.p-cascadeselect-enter-active {
transition: opacity 150ms;
}
}
`;

17
components/lib/contextmenu/ContextMenuSub.vue
View File

@ -169,22 +169,7 @@ export default {
return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
},
onEnter() {
this.position();
},
position() {
const parentItem = this.$refs.container.parentElement;
const containerOffset = DomHandler.getOffset(this.$refs.container.parentElement);
const viewport = DomHandler.getViewport();
const sublistWidth = this.$refs.container.offsetParent ? this.$refs.container.offsetWidth : DomHandler.getHiddenElementOuterWidth(this.$refs.container);
const itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
this.$refs.container.style.top = '0px';
if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
this.$refs.container.style.left = -1 * sublistWidth + 'px';
} else {
this.$refs.container.style.left = itemOuterWidth + 'px';
}
DomHandler.nestedPosition(this.$refs.container, this.level);
},
getMenuItemProps(processedItem, index) {
return {

3
components/lib/contextmenu/style/ContextMenuStyle.js
View File

@ -35,7 +35,8 @@ const css = `
margin-left: auto;
}
.p-contextmenu-enter-from {
.p-contextmenu-enter-from,
.p-contextmenu-leave-active {
opacity: 0;
}

7
components/lib/tieredmenu/TieredMenu.vue
View File

@ -21,6 +21,7 @@
:templates="$slots"
:activeItemPath="activeItemPath"
:level="0"
:visible="submenuVisible"
:pt="pt"
:unstyled="unstyled"
@focus="onFocus"
@ -64,6 +65,7 @@ export default {
focusedItemInfo: { index: -1, level: 0, parentKey: '' },
activeItemPath: [],
visible: !this.popup,
submenuVisible: false,
dirty: false
};
},
@ -240,7 +242,10 @@ export default {
const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
grouped && activeItemPath.push(processedItem);
if (grouped) {
activeItemPath.push(processedItem);
this.submenuVisible = true;
}
this.focusedItemInfo = { index, level, parentKey };
this.activeItemPath = activeItemPath;

138
components/lib/tieredmenu/TieredMenuSub.vue
View File

@ -1,72 +1,75 @@
<template>
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
:aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
:aria-haspopup="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<TieredMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
:style="sx('submenu', true, { processedItem })"
role="menu"
:menuId="menuId"
:focusedItemId="focusedItemId"
:items="processedItem.items"
:templates="templates"
:activeItemPath="activeItemPath"
:level="level + 1"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
/>
</li>
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
</template>
</ul>
<transition name="p-tieredmenu" @enter="onEnter" v-bind="ptm('menu.transition')">
<ul v-if="level === 0 ? true : visible" :ref="containerRef" :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
<li
v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('menuitem', { processedItem }), getItemProp(processedItem, 'class')]"
role="menuitem"
:aria-label="getItemLabel(processedItem)"
:aria-disabled="isItemDisabled(processedItem) || undefined"
:aria-expanded="isItemGroup(processedItem) ? isItemActive(processedItem) : undefined"
:aria-haspopup="isItemGroup(processedItem) && !getItemProp(processedItem, 'to') ? 'menu' : undefined"
:aria-level="level + 1"
:aria-setsize="getAriaSetSize()"
:aria-posinset="getAriaPosInset(index)"
v-bind="getPTOptions(processedItem, index, 'menuitem')"
:data-p-highlight="isItemActive(processedItem)"
:data-p-focused="isItemFocused(processedItem)"
:data-p-disabled="isItemDisabled(processedItem)"
>
<div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
<template v-if="!templates.item">
<a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
<component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" />
<span v-else-if="getItemProp(processedItem, 'icon')" :class="[cx('icon'), getItemProp(processedItem, 'icon')]" v-bind="getPTOptions(processedItem, index, 'icon')" />
<span :class="cx('label')" v-bind="getPTOptions(processedItem, index, 'label')">{{ getItemLabel(processedItem) }}</span>
<template v-if="getItemProp(processedItem, 'items')">
<component v-if="templates.submenuicon" :is="templates.submenuicon" :class="cx('submenuIcon')" :active="isItemActive(processedItem)" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
<AngleRightIcon v-else :class="cx('submenuIcon')" v-bind="getPTOptions(processedItem, index, 'submenuIcon')" />
</template>
</a>
</template>
<component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
</div>
<TieredMenuSub
v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
:id="getItemId(processedItem) + '_list'"
:style="sx('submenu', true, { processedItem })"
role="menu"
:menuId="menuId"
:focusedItemId="focusedItemId"
:items="processedItem.items"
:templates="templates"
:activeItemPath="activeItemPath"
:level="level + 1"
:visible="isItemActive(processedItem) && isItemGroup(processedItem)"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@item-mouseenter="$emit('item-mouseenter', $event)"
/>
</li>
<li
v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
:id="getItemId(processedItem)"
:style="getItemProp(processedItem, 'style')"
:class="[cx('separator'), getItemProp(processedItem, 'class')]"
role="separator"
v-bind="ptm('separator')"
></li>
</template>
</ul>
</transition>
</template>
<script>
import BaseComponent from 'primevue/basecomponent';
import AngleRightIcon from 'primevue/icons/angleright';
import Ripple from 'primevue/ripple';
import { ObjectUtils } from 'primevue/utils';
import { DomHandler, ObjectUtils } from 'primevue/utils';
import { mergeProps } from 'vue';
export default {
@ -74,6 +77,7 @@ export default {
hostName: 'TieredMenu',
extends: BaseComponent,
emits: ['item-click', 'item-mouseenter'],
container: null,
props: {
menuId: {
type: String,
@ -87,6 +91,10 @@ export default {
type: Array,
default: null
},
visible: {
type: Boolean,
default: false
},
level: {
type: Number,
default: 0
@ -143,6 +151,9 @@ export default {
isItemGroup(processedItem) {
return ObjectUtils.isNotEmpty(processedItem.items);
},
onEnter() {
DomHandler.nestedPosition(this.container, this.level);
},
onItemClick(event, processedItem) {
this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });
@ -185,6 +196,9 @@ export default {
this.getPTOptions(processedItem, index, 'submenuIcon')
)
};
},
containerRef(el) {
this.container = el;
}
},
components: {

9
components/lib/tieredmenu/style/TieredMenuStyle.js
View File

@ -41,6 +41,15 @@ const css = `
left: 100%;
top: 0;
}
.p-tieredmenu-enter-from,
.p-tieredmenu-leave-active {
opacity: 0;
}
.p-tieredmenu-enter-active {
transition: opacity 250ms;
}
}
`;

29
components/lib/utils/DomHandler.js
View File

@ -363,6 +363,35 @@ export default {
}
},
nestedPosition(element, level) {
if (element) {
const parentItem = element.parentElement;
const elementOffset = this.getOffset(parentItem);
const viewport = this.getViewport();
const sublistWidth = element.offsetParent ? element.offsetWidth : this.getHiddenElementOuterWidth(element);
const itemOuterWidth = this.getOuterWidth(parentItem.children[0]);
let left;
if (parseInt(elementOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - this.calculateScrollbarWidth()) {
if (parseInt(elementOffset.left, 10) < sublistWidth) {
// for too small screens
if (level % 2 === 1) {
left = parseInt(elementOffset.left, 10) ? '-' + parseInt(elementOffset.left, 10) + 'px' : '100%';
} else if (level % 2 === 0) {
left = viewport.width - sublistWidth - this.calculateScrollbarWidth() + 'px';
}
} else {
left = '-100%';
}
} else {
left = '100%';
}
element.style.top = '0px';
element.style.left = left;
}
},
getParents(element, parents = []) {
return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
},

1
components/lib/utils/Utils.d.ts vendored
View File

@ -34,6 +34,7 @@ export declare class DomHandler {
static getWidth(el: HTMLElement): number;
static absolutePosition(el: HTMLElement, target: HTMLElement): void;
static relativePosition(el: HTMLElement, target: HTMLElement): void;
static nestedPosition(el: HTMLElement, level: number): void;
static getParents(el: HTMLElement, parents?: any[]): any[];
static getScrollableParents(el: HTMLElement): any[];
static getHiddenElementOuterHeight(el: HTMLElement): number;