Fixed #4784 - Collision Enhancements

components/lib/cascadeselect/CascadeSelectSub.vue

@@ -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)) {
+        // 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: {
         getOptionId(processedOption) {
@@ -121,16 +136,8 @@ export default {
         onOptionChange(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: {

components/lib/cascadeselect/style/CascadeSelectStyle.js

@@ -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;
+    }
 }
 `;
 

components/lib/contextmenu/ContextMenuSub.vue

@@ -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();
+            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) {
             return {

components/lib/contextmenu/style/ContextMenuStyle.js

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

components/lib/tieredmenu/TieredMenu.vue

@@ -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;

components/lib/tieredmenu/TieredMenuSub.vue

@@ -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: {

components/lib/tieredmenu/style/TieredMenuStyle.js

@@ -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;
+    }
 }
 `;
 

components/lib/utils/DomHandler.js

@@ -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]));
     },

components/lib/utils/Utils.d.ts

@@ -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;