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

Refactor #3965 - Update for unstyled check and data-* attributes

pull/3984/head^2
Tuğçe Küçükoğlu 2023-06-09 15:44:26 +03:00
parent 66b08abf06
commit 350d5c21a7
10 changed files with 64 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/blockui/BlockUI.vue
View File

@ -65,7 +65,7 @@ export default {
if (this.fullScreen) {
if (!this.isUnstyled) {
document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
} else {
this.$refs.container.removeChild(this.mask);

8
components/lib/colorpicker/ColorPicker.vue
View File

@ -444,7 +444,8 @@ export default {
this.colorDragging = true;
this.pickColor(event);
DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
this.$el.setAttribute('p-colorpicker-dragging', 'true');
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
event.preventDefault();
},
onDrag(event) {
@ -461,7 +462,8 @@ export default {
onDragEnd() {
this.colorDragging = false;
this.hueDragging = false;
DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
this.$el.setAttribute('p-colorpicker-dragging', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$el, 'p-colorpicker-dragging');
this.unbindDragListeners();
},
onHueMousedown(event) {
@ -479,7 +481,7 @@ export default {
this.hueDragging = true;
this.pickHue(event);
DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
},
isInputClicked(event) {
return this.$refs.input && this.$refs.input.isSameNode(event.target);

3
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -183,7 +183,8 @@ export default {
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
this.container.setAttribute('data-p-confirm-popup-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-confirm-popup-flipped');
}
},
bindOutsideClickListener() {

40
components/lib/datatable/DataTable.vue
View File

@ -1201,7 +1201,8 @@ export default {
onColumnResize(event) {
let containerLeft = DomHandler.getOffset(this.$el).left;
DomHandler.addClass(this.$el, 'p-unselectable-text');
this.$el.setAttribute('data-p-unselectable-text', 'true');
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-unselectable-text');
this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
this.$refs.resizeHelper.style.top = 0 + 'px';
this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
@ -1250,7 +1251,8 @@ export default {
this.$refs.resizeHelper.style.display = 'none';
this.resizeColumn = null;
DomHandler.removeClass(this.$el, 'p-unselectable-text');
this.$el.setAttribute('data-p-unselectable-text', 'true');
!this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text');
this.unbindColumnResizeEvents();
@ -1455,17 +1457,30 @@ export default {
let prevRowElement = rowElement.previousElementSibling;
if (pageY < rowMidY) {
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
this.droppedRowIndex = index;
if (prevRowElement) DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!this.isUnstyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else {
if (prevRowElement) DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
else DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
}
} else {
if (prevRowElement) {
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
} else {
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
}
this.droppedRowIndex = index + 1;
DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
!this.isUnstyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
}
event.preventDefault();
@ -1476,11 +1491,14 @@ export default {
let prevRowElement = rowElement.previousElementSibling;
if (prevRowElement) {
DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
}
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
!this.isUnstyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
},
onRowDragEnd(event) {
this.rowDragging = false;

3
components/lib/galleria/Galleria.vue
View File

@ -35,6 +35,7 @@ export default {
},
beforeUnmount() {
if (this.fullScreen) {
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
@ -51,6 +52,7 @@ export default {
},
onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
document.body.setAttribute('data-p-overflow-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
this.focus();
},
@ -60,6 +62,7 @@ export default {
onAfterLeave(el) {
ZIndexUtils.clear(el);
this.containerVisible = false;
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
},
onActiveItemChange(index) {

3
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -178,6 +178,7 @@ export default {
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
document.body.setAttribute('data-p-items-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
}
@ -214,6 +215,7 @@ export default {
}
if (this.$refs.itemsContainer) {
document.body.setAttribute('data-p-items-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
@ -378,6 +380,7 @@ export default {
},
onTransitionEnd() {
if (this.$refs.itemsContainer) {
document.body.setAttribute('data-p-items-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = '';
}

1
components/lib/overlaypanel/OverlayPanel.vue
View File

@ -155,6 +155,7 @@ export default {
this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-overlaypanel-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped');
}
},

11
components/lib/scrollpanel/ScrollPanel.vue
View File

@ -117,15 +117,19 @@ export default {
this.frame = this.requestAnimationFrame(() => {
if (this.scrollXRatio >= 1) {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
} else {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
}
if (this.scrollYRatio >= 1) {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
} else {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
}
@ -135,7 +139,9 @@ export default {
this.isYBarClicked = true;
this.$refs.yBar.focus();
this.lastPageY = e.pageY;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
@ -145,7 +151,9 @@ export default {
this.isXBarClicked = true;
this.$refs.xBar.focus();
this.lastPageX = e.pageX;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners();
@ -274,8 +282,11 @@ export default {
}
},
onDocumentMouseUp() {
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed');
this.$refs.xBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-grabbed');
document.body.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
this.unbindDocumentMouseListeners();

8
components/lib/sidebar/Sidebar.vue
View File

@ -78,7 +78,7 @@ export default {
},
onBeforeLeave() {
if (this.modal) {
DomHandler.addClass(this.mask, 'p-component-overlay-leave');
!this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}
},
onLeave() {
@ -121,14 +121,16 @@ export default {
}
if (this.blockScroll) {
DomHandler.addClass(document.body, 'p-overflow-hidden');
document.body.setAttribute('data-p-overflow-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
}
},
disableDocumentSettings() {
this.unbindOutsideClickListener();
if (this.blockScroll) {
DomHandler.removeClass(document.body, 'p-overflow-hidden');
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
}
},
onKeydown(event) {

6
components/lib/treetable/TreeTable.vue
View File

@ -602,7 +602,8 @@ export default {
onColumnResize(event) {
let containerLeft = DomHandler.getOffset(this.$el).left;
DomHandler.addClass(this.$el, 'p-unselectable-text');
this.$el.setAttribute('data-p-unselectable-text', 'true');
!this.isUnstyled && DomHandler.addClass(this.$el, 'p-unselectable-text');
this.$refs.resizeHelper.style.height = this.$el.offsetHeight + 'px';
this.$refs.resizeHelper.style.top = 0 + 'px';
this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + 'px';
@ -646,7 +647,8 @@ export default {
this.$refs.resizeHelper.style.display = 'none';
this.resizeColumn = null;
DomHandler.removeClass(this.$el, 'p-unselectable-text');
this.$el.setAttribute('data-p-unselectable-text', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$el, 'p-unselectable-text');
this.unbindColumnResizeEvents();
},