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

Refactor #4819

pull/4823/head
tugcekucukoglu 2023-11-15 13:16:57 +03:00
parent e6b5cbd541
commit a073a6690a
3 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/lib/megamenu/BaseMegaMenu.vue
View File

@ -14,6 +14,10 @@ export default {
type: String,
default: 'horizontal'
},
breakpoint: {
type: String,
default: '960px'
},
disabled: {
type: Boolean,
default: false

10
components/lib/megamenu/MegaMenu.vue
View File

@ -55,7 +55,8 @@ export default {
focused: false,
focusedItemInfo: { index: -1, key: '', parentKey: '' },
activeItem: null,
dirty: false
dirty: false,
queryMatches: false
};
},
watch: {
@ -74,6 +75,13 @@ export default {
},
mounted() {
this.id = this.id || UniqueComponentId();
const query = matchMedia(`(max-width: ${this.breakpoint})`);
this.queryMatches = query.matches;
query.addEventListener('change', () => {
this.queryMatches = query.matches;
});
},
beforeUnmount() {
this.unbindOutsideClickListener();

42
components/lib/megamenu/style/MegaMenuStyle.js
View File

@ -111,6 +111,12 @@ const css = `
.p-megamenu-col-12 {
width: 100%;
}
.p-megamenu-mobile .p-megamenu-grid {
flex-wrap: wrap;
overflow: auto;
max-height: 90%;
}
}
`;
@ -122,6 +128,7 @@ const classes = {
root: ({ instance }) => [
'p-megamenu p-component',
{
'p-megamenu-mobile': instance.queryMatches,
'p-megamenu-horizontal': instance.horizontal,
'p-megamenu-vertical': instance.vertical
}
@ -153,26 +160,29 @@ const classes = {
let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
let columnClass;
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';
else {
switch (length) {
case 2:
columnClass = 'p-megamenu-col-6';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 3:
columnClass = 'p-megamenu-col-4';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 4:
columnClass = 'p-megamenu-col-3';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
case 6:
columnClass = 'p-megamenu-col-2';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
default:
columnClass = 'p-megamenu-col-12';
break;
}
}
return columnClass;