115 lines
4.0 KiB
Vue
115 lines
4.0 KiB
Vue
<template>
|
|
<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" />
|
|
<span v-if="columnProp('footer')" :class="cx('columnFooter')" v-bind="getColumnPT('columnFooter')">{{ columnProp('footer') }}</span>
|
|
</td>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseComponent from '@primevue/core/basecomponent';
|
|
import { getVNodeProp } from '@primevue/core/utils';
|
|
import { getNextElementSibling, getOuterWidth, getPreviousElementSibling } from '@primeuix/utils/dom';
|
|
import { mergeProps } from 'vue';
|
|
|
|
export default {
|
|
name: 'FooterCell',
|
|
hostName: 'DataTable',
|
|
extends: BaseComponent,
|
|
props: {
|
|
column: {
|
|
type: Object,
|
|
default: null
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: null
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
styleObject: {}
|
|
};
|
|
},
|
|
mounted() {
|
|
if (this.columnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
},
|
|
updated() {
|
|
if (this.columnProp('frozen')) {
|
|
this.updateStickyPosition();
|
|
}
|
|
},
|
|
methods: {
|
|
columnProp(prop) {
|
|
return getVNodeProp(this.column, prop);
|
|
},
|
|
getColumnPT(key) {
|
|
const columnMetaData = {
|
|
props: this.column.props,
|
|
parent: {
|
|
instance: this,
|
|
props: this.$props,
|
|
state: this.$data
|
|
},
|
|
context: {
|
|
index: this.index,
|
|
size: this.$parentInstance?.$parentInstance?.size,
|
|
showGridlines: this.$parentInstance?.$parentInstance?.showGridlines || false
|
|
}
|
|
};
|
|
|
|
return mergeProps(this.ptm(`column.${key}`, { column: columnMetaData }), this.ptm(`column.${key}`, columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
|
|
},
|
|
getColumnProp() {
|
|
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
|
|
},
|
|
updateStickyPosition() {
|
|
if (this.columnProp('frozen')) {
|
|
let align = this.columnProp('alignFrozen');
|
|
let isRTL = this.$parentInstance.$parentInstance.isRTL;
|
|
|
|
if (align === 'right') {
|
|
let pos = 0;
|
|
let next = getNextElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
|
|
|
if (next) {
|
|
pos = getOuterWidth(next) + parseFloat(next.style.right || 0);
|
|
}
|
|
|
|
if (isRTL) {
|
|
this.styleObject.left = pos + 'px';
|
|
} else {
|
|
this.styleObject.right = pos + 'px';
|
|
}
|
|
} else {
|
|
let pos = 0;
|
|
let prev = getPreviousElementSibling(this.$el, '[data-p-frozen-column="true"]');
|
|
|
|
if (prev) {
|
|
pos = getOuterWidth(prev) + parseFloat(prev.style.left || 0);
|
|
}
|
|
|
|
if (isRTL) {
|
|
this.styleObject.right = pos + 'px';
|
|
} else {
|
|
this.styleObject.left = pos + 'px';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
containerClass() {
|
|
return [this.columnProp('footerClass'), this.columnProp('class'), this.cx('footerCell')];
|
|
},
|
|
containerStyle() {
|
|
let bodyStyle = this.columnProp('footerStyle');
|
|
let columnStyle = this.columnProp('style');
|
|
|
|
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
|
|
}
|
|
}
|
|
};
|
|
</script>
|