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.fullScreen) {
if (!this.isUnstyled) { if (!this.isUnstyled) {
document.body.removeChild(this.mask); document.body.removeChild(this.mask);
DomHandler.removeClass(document.body, 'p-overflow-hidden'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
} }
} else { } else {
this.$refs.container.removeChild(this.mask); this.$refs.container.removeChild(this.mask);

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

@ -444,7 +444,8 @@ export default {
this.colorDragging = true; this.colorDragging = true;
this.pickColor(event); 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(); event.preventDefault();
}, },
onDrag(event) { onDrag(event) {
@ -461,7 +462,8 @@ export default {
onDragEnd() { onDragEnd() {
this.colorDragging = false; this.colorDragging = false;
this.hueDragging = 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(); this.unbindDragListeners();
}, },
onHueMousedown(event) { onHueMousedown(event) {
@ -479,7 +481,7 @@ export default {
this.hueDragging = true; this.hueDragging = true;
this.pickHue(event); this.pickHue(event);
DomHandler.addClass(this.$el, 'p-colorpicker-dragging'); !this.isUnstyled && DomHandler.addClass(this.$el, 'p-colorpicker-dragging');
}, },
isInputClicked(event) { isInputClicked(event) {
return this.$refs.input && this.$refs.input.isSameNode(event.target); 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`); this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) { 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() { bindOutsideClickListener() {

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

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

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

@ -35,6 +35,7 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
} }
@ -51,6 +52,7 @@ export default {
}, },
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); 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.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
this.focus(); this.focus();
}, },
@ -60,6 +62,7 @@ export default {
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
this.containerVisible = false; this.containerVisible = false;
document.body.setAttribute('data-p-overflow-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
}, },
onActiveItemChange(index) { 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)`; 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) { 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.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -214,6 +215,7 @@ export default {
} }
if (this.$refs.itemsContainer) { if (this.$refs.itemsContainer) {
document.body.setAttribute('data-p-items-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); !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.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'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
@ -378,6 +380,7 @@ export default {
}, },
onTransitionEnd() { onTransitionEnd() {
if (this.$refs.itemsContainer) { if (this.$refs.itemsContainer) {
document.body.setAttribute('data-p-items-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); !this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
this.$refs.itemsContainer.style.transition = ''; 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`); this.container.style.setProperty('--overlayArrowLeft', `${arrowLeft}px`);
if (containerOffset.top < targetOffset.top) { if (containerOffset.top < targetOffset.top) {
this.container.setAttribute('data-p-overlaypanel-flipped', 'true');
!this.isUnstyled && DomHandler.addClass(this.container, 'p-overlaypanel-flipped'); !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(() => { this.frame = this.requestAnimationFrame(() => {
if (this.scrollXRatio >= 1) { if (this.scrollXRatio >= 1) {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !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;'; 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) { if (this.scrollYRatio >= 1) {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
} else { } else {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !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;'; 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.isYBarClicked = true;
this.$refs.yBar.focus(); this.$refs.yBar.focus();
this.lastPageY = e.pageY; this.lastPageY = e.pageY;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'true');
!this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); !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.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners(); this.bindDocumentMouseListeners();
@ -145,7 +151,9 @@ export default {
this.isXBarClicked = true; this.isXBarClicked = true;
this.$refs.xBar.focus(); this.$refs.xBar.focus();
this.lastPageX = e.pageX; this.lastPageX = e.pageX;
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-grabbed'); !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.isUnstyled && DomHandler.addClass(document.body, 'p-scrollpanel-grabbed');
this.bindDocumentMouseListeners(); this.bindDocumentMouseListeners();
@ -274,8 +282,11 @@ export default {
} }
}, },
onDocumentMouseUp() { onDocumentMouseUp() {
this.$refs.yBar.setAttribute('data-p-scrollpanel-grabbed', 'false');
!this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-grabbed'); !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'); !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.isUnstyled && DomHandler.removeClass(document.body, 'p-scrollpanel-grabbed');
this.unbindDocumentMouseListeners(); this.unbindDocumentMouseListeners();

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

@ -78,7 +78,7 @@ export default {
}, },
onBeforeLeave() { onBeforeLeave() {
if (this.modal) { if (this.modal) {
DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
} }
}, },
onLeave() { onLeave() {
@ -121,14 +121,16 @@ export default {
} }
if (this.blockScroll) { 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() { disableDocumentSettings() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
if (this.blockScroll) { 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) { onKeydown(event) {

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

@ -602,7 +602,8 @@ export default {
onColumnResize(event) { onColumnResize(event) {
let containerLeft = DomHandler.getOffset(this.$el).left; 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.height = this.$el.offsetHeight + 'px';
this.$refs.resizeHelper.style.top = 0 + 'px'; this.$refs.resizeHelper.style.top = 0 + 'px';
this.$refs.resizeHelper.style.left = event.pageX - containerLeft + this.$el.scrollLeft + '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.$refs.resizeHelper.style.display = 'none';
this.resizeColumn = null; 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(); this.unbindColumnResizeEvents();
}, },