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> <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)"> <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
<li <li
:id="getOptionId(processedOption)" :id="getOptionId(processedOption)"
@ -45,6 +45,7 @@
@option-change="onOptionChange" @option-change="onOptionChange"
:pt="pt" :pt="pt"
:unstyled="unstyled" :unstyled="unstyled"
:isParentMount="mounted"
/> />
</li> </li>
</template> </template>
@ -62,6 +63,7 @@ export default {
hostName: 'CascadeSelect', hostName: 'CascadeSelect',
extends: BaseComponent, extends: BaseComponent,
emits: ['option-change'], emits: ['option-change'],
container: null,
props: { props: {
selectId: String, selectId: String,
focusedOptionId: String, focusedOptionId: String,
@ -74,12 +76,25 @@ export default {
optionGroupChildren: Array, optionGroupChildren: Array,
activeOptionPath: Array, activeOptionPath: Array,
level: Number, level: Number,
templates: null templates: null,
isParentMount: Boolean
},
data() {
return {
mounted: false
};
},
watch: {
isParentMount: {
handler(newValue) {
newValue && DomHandler.nestedPosition(this.container, this.level);
}
}
}, },
mounted() { mounted() {
if (ObjectUtils.isNotEmpty(this.parentKey)) { // entering order correction when an item is selected
this.position(); (this.isParentMount || this.level === 0) && DomHandler.nestedPosition(this.container, this.level);
} this.mounted = true;
}, },
methods: { methods: {
getOptionId(processedOption) { getOptionId(processedOption) {
@ -121,16 +136,8 @@ export default {
onOptionChange(event) { onOptionChange(event) {
this.$emit('option-change', event); this.$emit('option-change', event);
}, },
position() { containerRef(el) {
const parentItem = this.$el.parentElement; this.container = el;
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%';
}
} }
}, },
directives: { directives: {

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

@ -82,6 +82,15 @@ const css = `
left: 100%; left: 100%;
top: 0; 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; return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
}, },
onEnter() { onEnter() {
this.position(); DomHandler.nestedPosition(this.$refs.container, this.level);
},
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';
}
}, },
getMenuItemProps(processedItem, index) { getMenuItemProps(processedItem, index) {
return { return {

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

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

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

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

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

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

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

@ -41,6 +41,15 @@ const css = `
left: 100%; left: 100%;
top: 0; 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 = []) { getParents(element, parents = []) {
return element['parentNode'] === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode])); 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 getWidth(el: HTMLElement): number;
static absolutePosition(el: HTMLElement, target: HTMLElement): void; static absolutePosition(el: HTMLElement, target: HTMLElement): void;
static relativePosition(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 getParents(el: HTMLElement, parents?: any[]): any[];
static getScrollableParents(el: HTMLElement): any[]; static getScrollableParents(el: HTMLElement): any[];
static getHiddenElementOuterHeight(el: HTMLElement): number; static getHiddenElementOuterHeight(el: HTMLElement): number;