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;

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

@ -1,5 +1,6 @@
<template>
<ul :class="level === 0 ? cx('menu') : cx('submenu')" :tabindex="tabindex" v-bind="level === 0 ? ptm('menu') : ptm('submenu')">
<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')"
@ -44,6 +45,7 @@
:templates="templates"
:activeItemPath="activeItemPath"
:level="level + 1"
:visible="isItemActive(processedItem) && isItemGroup(processedItem)"
:pt="pt"
:unstyled="unstyled"
@item-click="$emit('item-click', $event)"
@ -60,13 +62,14 @@
></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;