Fixed #4786 - DataTable/TreeTable: Frozen column improvements
parent
31e47e8668
commit
321479f131
|
@ -450,7 +450,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -459,7 +459,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
|
||||
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
|
||||
{{ columnProp('footer') }}
|
||||
</td>
|
||||
|
@ -68,7 +68,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -77,7 +77,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -270,7 +270,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -279,7 +279,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }" :data-p-frozen-column="columnProp('frozen')">
|
||||
<button v-if="columnProp('expander')" v-ripple type="button" :class="cx('rowToggler')" @click="toggle" :style="togglerStyle" tabindex="-1" v-bind="getColumnPT('rowToggler')" data-pc-group-section="rowactionbutton">
|
||||
<component v-if="column.children && column.children.rowtogglericon" :is="column.children && column.children.rowtogglericon" :node="node" :expanded="expanded" :class="cx('rowTogglerIcon')" />
|
||||
<component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
|
||||
|
@ -152,7 +152,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -161,7 +161,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
|
||||
<td :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }" :data-p-frozen-column="columnProp('frozen')">
|
||||
<component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
|
||||
{{ columnProp('footer') }}
|
||||
</td>
|
||||
|
@ -68,7 +68,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -77,7 +77,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -115,7 +115,7 @@ export default {
|
|||
|
||||
if (align === 'right') {
|
||||
let right = 0;
|
||||
let next = this.$el.nextElementSibling;
|
||||
let next = DomHandler.getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (next) {
|
||||
right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
|
||||
|
@ -124,7 +124,7 @@ export default {
|
|||
this.styleObject.right = right + 'px';
|
||||
} else {
|
||||
let left = 0;
|
||||
let prev = this.$el.previousElementSibling;
|
||||
let prev = DomHandler.getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
||||
|
||||
if (prev) {
|
||||
left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
||||
|
|
|
@ -713,6 +713,34 @@ export default {
|
|||
return nextIndex > -1 ? focusableElements[nextIndex] : null;
|
||||
},
|
||||
|
||||
getPreviousElementSibling(element, selector) {
|
||||
let previousElement = element.previousElementSibling;
|
||||
|
||||
while (previousElement) {
|
||||
if (previousElement.matches(selector)) {
|
||||
return previousElement;
|
||||
} else {
|
||||
previousElement = previousElement.previousElementSibling;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
getNextElementSibling(element, selector) {
|
||||
let nextElement = element.nextElementSibling;
|
||||
|
||||
while (nextElement) {
|
||||
if (nextElement.matches(selector)) {
|
||||
return nextElement;
|
||||
} else {
|
||||
nextElement = nextElement.nextElementSibling;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
},
|
||||
|
||||
isClickable(element) {
|
||||
if (element) {
|
||||
const targetNode = element.nodeName;
|
||||
|
|
|
@ -59,6 +59,8 @@ export declare class DomHandler {
|
|||
static getFocusableElements(el: HTMLElement, selector?: string): any[];
|
||||
static getFirstFocusableElement(el: HTMLElement, selector?: string): any;
|
||||
static getLastFocusableElement(el: HTMLElement, selector?: string): any;
|
||||
static getPreviousElementSibling(el: HTMLElement, selector?: string): any;
|
||||
static getNextElementSibling(el: HTMLElement, selector?: string): any;
|
||||
static isClickable(el: HTMLElement): boolean;
|
||||
static applyStyle(el: HTMLElement, style: any): void;
|
||||
static isIOS(): boolean;
|
||||
|
|
Loading…
Reference in New Issue