primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 216 kB
JavaScript
this.primevue = this.primevue || {};
this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus, Dropdown, Button, Ripple) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
var script = {
name: 'HeaderCheckbox',
inheritAttrs: false,
emits: ['change'],
props: {
checked: null
},
data() {
return {
focused: false
};
},
methods: {
onClick(event) {
if (!this.$attrs.disabled) {
this.focused = true;
this.$emit('change', event);
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
}
};
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createBlock("div", {
class: "p-checkbox p-component",
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
}, [
vue.createVNode("div", {
ref: "box",
class: ['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
role: "checkbox",
"aria-checked": $props.checked,
tabindex: _ctx.$attrs.disabled ? null : '0',
onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
}, [
vue.createVNode("span", {
class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
}, null, 2)
], 42, ["aria-checked", "tabindex"])
], 32))
}
script.render = render;
var script$1 = {
name: 'ColumnFilter',
emits: ['filter-change','filter-apply','operator-change','matchmode-change','constraint-add','constraint-remove','filter-clear','apply-click'],
props: {
field: {
type: String,
default: null
},
type: {
type: String,
default: 'text'
},
display: {
type: String,
default: null
},
showMenu: {
type: Boolean,
default: true
},
matchMode: {
type: String,
default: null
},
showOperator: {
type: Boolean,
default: true
},
showClearButton: {
type: Boolean,
default: true
},
showApplyButton: {
type: Boolean,
default: true
},
showMatchModes: {
type: Boolean,
default: true
},
showAddButton: {
type: Boolean,
default: true
},
matchModeOptions: {
type: Array,
default: null
},
maxConstraints: {
type: Number,
default: 2
},
filterElement: null,
filterHeaderTemplate: null,
filterFooterTemplate: null,
filterClearTemplate: null,
filterApplyTemplate: null,
filters: {
type: Object,
default: null
},
filtersStore: {
type: Object,
default: null
},
filterMenuClass: {
type: String,
default: null
},
filterMenuStyle: {
type: null,
default: null
}
},
data() {
return {
overlayVisible: false,
defaultMatchMode: null,
defaultOperator: null
}
},
overlay: null,
selfClick: false,
overlayEventListener: null,
beforeUnmount() {
if (this.overlayEventListener) {
OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
}
if (this.overlay) {
utils.ZIndexUtils.clear(this.overlay);
this.onOverlayHide();
}
},
mounted() {
if (this.filters && this.filters[this.field]) {
let fieldFilters = this.filters[this.field];
if (fieldFilters.operator) {
this.defaultMatchMode = fieldFilters.constraints[0].matchMode;
this.defaultOperator = fieldFilters.operator;
}
else {
this.defaultMatchMode = this.filters[this.field].matchMode;
}
}
},
methods: {
clearFilter() {
let _filters = {...this.filters};
if (_filters[this.field].operator) {
_filters[this.field].constraints.splice(1);
_filters[this.field].operator = this.defaultOperator;
_filters[this.field].constraints[0] = {value: null, matchMode: this.defaultMatchMode};
}
else {
_filters[this.field].value = null;
_filters[this.field].matchMode = this.defaultMatchMode;
}
this.$emit('filter-clear');
this.$emit('filter-change', _filters);
this.$emit('filter-apply');
this.hide();
},
applyFilter() {
this.$emit('apply-click', {field: this.field, constraints: this.filters[this.field]});
this.$emit('filter-apply');
this.hide();
},
hasFilter() {
if (this.filtersStore) {
let fieldFilter = this.filtersStore[this.field];
if (fieldFilter) {
if (fieldFilter.operator)
return !this.isFilterBlank(fieldFilter.constraints[0].value);
else
return !this.isFilterBlank(fieldFilter.value);
}
}
return false;
},
hasRowFilter() {
return this.filters[this.field] && !this.isFilterBlank(this.filters[this.field].value);
},
isFilterBlank(filter) {
if (filter !== null && filter !== undefined) {
if ((typeof filter === 'string' && filter.trim().length == 0) || (filter instanceof Array && filter.length == 0))
return true;
else
return false;
}
return true;
},
toggleMenu() {
this.overlayVisible = !this.overlayVisible;
},
onToggleButtonKeyDown(event) {
switch(event.key) {
case 'Escape':
case 'Tab':
this.overlayVisible = false;
break;
case 'ArrowDown':
if (this.overlayVisible) {
let focusable = utils.DomHandler.getFocusableElements(this.overlay);
if (focusable) {
focusable[0].focus();
}
event.preventDefault();
}
else if (event.altKey) {
this.overlayVisible = true;
event.preventDefault();
}
break;
}
},
onEscape() {
this.overlayVisible = false;
if (this.$refs.icon) {
this.$refs.icon.focus();
}
},
onRowMatchModeChange(matchMode) {
let _filters = {...this.filters};
_filters[this.field].matchMode = matchMode;
this.$emit('matchmode-change', {field: this.field, matchMode: matchMode});
this.$emit('filter-change', _filters);
this.$emit('filter-apply');
this.hide();
},
onRowMatchModeKeyDown(event) {
let item = event.target;
switch(event.key) {
case 'ArrowDown':
var nextItem = this.findNextItem(item);
if (nextItem) {
item.removeAttribute('tabindex');
nextItem.tabIndex = '0';
nextItem.focus();
}
event.preventDefault();
break;
case 'ArrowUp':
var prevItem = this.findPrevItem(item);
if (prevItem) {
item.removeAttribute('tabindex');
prevItem.tabIndex = '0';
prevItem.focus();
}
event.preventDefault();
break;
}
},
isRowMatchModeSelected(matchMode) {
return (this.filters[this.field]).matchMode === matchMode;
},
onOperatorChange(value) {
let _filters = {...this.filters};
_filters[this.field].operator = value;
this.$emit('filter-change', _filters);
this.$emit('operator-change', {field: this.field, operator: value});
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
onMenuMatchModeChange(value, index) {
let _filters = {...this.filters};
_filters[this.field].constraints[index].matchMode = value;
this.$emit('matchmode-change', {field: this.field, matchMode: value, index: index});
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
addConstraint() {
let _filters = {...this.filters};
let newConstraint = {value: null, matchMode: this.defaultMatchMode};
_filters[this.field].constraints.push(newConstraint);
this.$emit('constraint-add', {field: this.field, constraing: newConstraint});
this.$emit('filter-change', _filters);
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
removeConstraint(index) {
let _filters = {...this.filters};
let removedConstraint = _filters[this.field].constraints.splice(index, 1);
this.$emit('constraint-remove', {field: this.field, constraing: removedConstraint});
this.$emit('filter-change', _filters);
if (!this.showApplyButton) {
this.$emit('filter-apply');
}
},
filterCallback() {
this.$emit('filter-apply');
},
findNextItem(item) {
let nextItem = item.nextElementSibling;
if (nextItem)
return utils.DomHandler.hasClass(nextItem, 'p-column-filter-separator') ? this.findNextItem(nextItem) : nextItem;
else
return item.parentElement.firstElementChild;
},
findPrevItem(item) {
let prevItem = item.previousElementSibling;
if (prevItem)
utils.DomHandler.hasClass(prevItem, 'p-column-filter-separator') ? this.findPrevItem(prevItem) : prevItem;
else
return item.parentElement.lastElementChild;
},
hide() {
this.overlayVisible = false;
},
onContentClick() {
this.selfClick = true;
},
onOverlayEnter(el) {
if (this.filterMenuStyle) {
utils.DomHandler.applyStyle(this.overlay, this.filterMenuStyle);
}
utils.ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
utils.DomHandler.absolutePosition(this.overlay, this.$refs.icon);
this.bindOutsideClickListener();
this.bindScrollListener();
this.bindResizeListener();
this.overlayEventListener = (e) => {
if (this.overlay.contains(e.target)) {
this.selfClick = true;
}
};
OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
},
onOverlayLeave() {
this.onOverlayHide();
},
onOverlayAfterLeave(el) {
utils.ZIndexUtils.clear(el);
},
onOverlayHide() {
this.unbindOutsideClickListener();
this.unbindResizeListener();
this.unbindScrollListener();
this.overlay = null;
OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
},
overlayRef(el) {
this.overlay = el;
},
isTargetClicked(event) {
return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
},
bindOutsideClickListener() {
if (!this.outsideClickListener) {
this.outsideClickListener = (event) => {
if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
this.overlayVisible = false;
}
this.selfClick = false;
};
document.addEventListener('click', this.outsideClickListener);
}
},
unbindOutsideClickListener() {
if (this.outsideClickListener) {
document.removeEventListener('click', this.outsideClickListener);
this.outsideClickListener = null;
this.selfClick = false;
}
},
bindScrollListener() {
if (!this.scrollHandler) {
this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.$refs.icon, () => {
if (this.overlayVisible) {
this.hide();
}
});
}
this.scrollHandler.bindScrollListener();
},
unbindScrollListener() {
if (this.scrollHandler) {
this.scrollHandler.unbindScrollListener();
}
},
bindResizeListener() {
if (!this.resizeListener) {
this.resizeListener = () => {
if (this.overlayVisible) {
this.hide();
}
};
window.addEventListener('resize', this.resizeListener);
}
},
unbindResizeListener() {
if (this.resizeListener) {
window.removeEventListener('resize', this.resizeListener);
this.resizeListener = null;
}
}
},
computed: {
containerClass() {
return ['p-column-filter p-fluid', {
'p-column-filter-row': this.display === 'row',
'p-column-filter-menu': this.display === 'menu'
}];
},
overlayClass() {
return [this.filterMenuClass, {
'p-column-filter-overlay p-component p-fluid': true,
'p-column-filter-overlay-menu': this.display === 'menu',
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
'p-ripple-disabled': this.$primevue.config.ripple === false
}];
},
showMenuButton() {
return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
},
matchModes() {
return this.matchModeOptions ||
this.$primevue.config.filterMatchModeOptions[this.type].map(key => {
return {label: this.$primevue.config.locale[key], value: key}
});
},
isShowMatchModes() {
return this.type !== 'boolean' && this.showMatchModes && this.matchModes;
},
operatorOptions() {
return [
{label: this.$primevue.config.locale.matchAll, value: api.FilterOperator.AND},
{label: this.$primevue.config.locale.matchAny, value: api.FilterOperator.OR}
];
},
noFilterLabel() {
return this.$primevue.config.locale.noFilter;
},
isShowOperator() {
return this.showOperator && this.filters[this.field].operator;
},
operator() {
return this.filters[this.field].operator;
},
fieldConstraints() {
return this.filters[this.field].constraints || [this.filters[this.field]];
},
showRemoveIcon() {
return this.fieldConstraints.length > 1;
},
removeRuleButtonLabel() {
return this.$primevue.config.locale.removeRule;
},
addRuleButtonLabel() {
return this.$primevue.config.locale.addRule;
},
isShowAddConstraint() {
return this.showAddButton && this.filters[this.field].operator && (this.fieldConstraints && this.fieldConstraints.length < this.maxConstraints);
},
clearButtonLabel() {
return this.$primevue.config.locale.clear;
},
applyButtonLabel() {
return this.$primevue.config.locale.apply;
}
},
components: {
'CFDropdown': Dropdown__default['default'],
'CFButton': Button__default['default']
}
};
const _hoisted_1 = {
key: 0,
class: "p-fluid p-column-filter-element"
};
const _hoisted_2 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
const _hoisted_3 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-filter-slash" }, null, -1);
const _hoisted_4 = {
key: 0,
class: "p-column-filter-row-items"
};
const _hoisted_5 = /*#__PURE__*/vue.createVNode("li", { class: "p-column-filter-separator" }, null, -1);
const _hoisted_6 = {
key: 0,
class: "p-column-filter-operator"
};
const _hoisted_7 = { class: "p-column-filter-constraints" };
const _hoisted_8 = {
key: 1,
class: "p-column-filter-add-rule"
};
const _hoisted_9 = { class: "p-column-filter-buttonbar" };
function render$1(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CFDropdown = vue.resolveComponent("CFDropdown");
const _component_CFButton = vue.resolveComponent("CFButton");
return (vue.openBlock(), vue.createBlock("div", { class: $options.containerClass }, [
($props.display === 'row')
? (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
field: $props.field,
filterModel: $props.filters[$props.field],
filterCallback: $options.filterCallback
}, null, 8, ["field", "filterModel", "filterCallback"]))
]))
: vue.createCommentVNode("", true),
($options.showMenuButton)
? (vue.openBlock(), vue.createBlock("button", {
key: 1,
ref: "icon",
type: "button",
class: ["p-column-filter-menu-button p-link", {'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter()}],
"aria-haspopup": "true",
"aria-expanded": $data.overlayVisible,
onClick: _cache[1] || (_cache[1] = $event => ($options.toggleMenu())),
onKeydown: _cache[2] || (_cache[2] = $event => ($options.onToggleButtonKeyDown($event)))
}, [
_hoisted_2
], 42, ["aria-expanded"]))
: vue.createCommentVNode("", true),
($options.showMenuButton && $props.display === 'row')
? (vue.openBlock(), vue.createBlock("button", {
key: 2,
class: [{'p-hidden-space': !$options.hasRowFilter()}, "p-column-filter-clear-button p-link"],
type: "button",
onClick: _cache[3] || (_cache[3] = $event => ($options.clearFilter()))
}, [
_hoisted_3
], 2))
: vue.createCommentVNode("", true),
(vue.openBlock(), vue.createBlock(vue.Teleport, { to: "body" }, [
vue.createVNode(vue.Transition, {
name: "p-connected-overlay",
onEnter: $options.onOverlayEnter,
onLeave: $options.onOverlayLeave,
onAfterLeave: $options.onOverlayAfterLeave
}, {
default: vue.withCtx(() => [
($data.overlayVisible)
? (vue.openBlock(), vue.createBlock("div", {
key: 0,
ref: $options.overlayRef,
class: $options.overlayClass,
onKeydown: _cache[12] || (_cache[12] = vue.withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
}, [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterHeaderTemplate), {
field: $props.field,
filterModel: $props.filters[$props.field],
filterCallback: $options.filterCallback
}, null, 8, ["field", "filterModel", "filterCallback"])),
($props.display === 'row')
? (vue.openBlock(), vue.createBlock("ul", _hoisted_4, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.matchModes, (matchMode, i) => {
return (vue.openBlock(), vue.createBlock("li", {
class: ["p-column-filter-row-item", {'p-highlight': $options.isRowMatchModeSelected(matchMode.value)}],
key: matchMode.label,
onClick: $event => ($options.onRowMatchModeChange(matchMode.value)),
onKeydown: [
_cache[4] || (_cache[4] = $event => ($options.onRowMatchModeKeyDown($event))),
vue.withKeys(vue.withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
],
tabindex: i === 0 ? '0' : null
}, vue.toDisplayString(matchMode.label), 43, ["onClick", "onKeydown", "tabindex"]))
}), 128)),
_hoisted_5,
vue.createVNode("li", {
class: "p-column-filter-row-item",
onClick: _cache[5] || (_cache[5] = $event => ($options.clearFilter())),
onKeydown: [
_cache[6] || (_cache[6] = $event => ($options.onRowMatchModeKeyDown($event))),
_cache[7] || (_cache[7] = vue.withKeys($event => (_ctx.onRowClearItemClick()), ["enter"]))
]
}, vue.toDisplayString($options.noFilterLabel), 33)
]))
: (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 1 }, [
($options.isShowOperator)
? (vue.openBlock(), vue.createBlock("div", _hoisted_6, [
vue.createVNode(_component_CFDropdown, {
options: $options.operatorOptions,
modelValue: $options.operator,
"onUpdate:modelValue": _cache[8] || (_cache[8] = $event => ($options.onOperatorChange($event))),
class: "p-column-filter-operator-dropdown",
optionLabel: "label",
optionValue: "value"
}, null, 8, ["options", "modelValue"])
]))
: vue.createCommentVNode("", true),
vue.createVNode("div", _hoisted_7, [
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.fieldConstraints, (fieldConstraint, i) => {
return (vue.openBlock(), vue.createBlock("div", {
key: i,
class: "p-column-filter-constraint"
}, [
($options.isShowMatchModes)
? (vue.openBlock(), vue.createBlock(_component_CFDropdown, {
key: 0,
options: $options.matchModes,
modelValue: fieldConstraint.matchMode,
optionLabel: "label",
optionValue: "value",
"onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i)),
class: "p-column-filter-matchmode-dropdown"
}, null, 8, ["options", "modelValue", "onUpdate:modelValue"]))
: vue.createCommentVNode("", true),
($props.display === 'menu')
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
key: 1,
field: $props.field,
filterModel: fieldConstraint,
filterCallback: $options.filterCallback
}, null, 8, ["field", "filterModel", "filterCallback"]))
: vue.createCommentVNode("", true),
vue.createVNode("div", null, [
($options.showRemoveIcon)
? (vue.openBlock(), vue.createBlock(_component_CFButton, {
key: 0,
type: "button",
icon: "pi pi-trash",
class: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
onClick: $event => ($options.removeConstraint(i)),
label: $options.removeRuleButtonLabel
}, null, 8, ["onClick", "label"]))
: vue.createCommentVNode("", true)
])
]))
}), 128))
]),
($options.isShowAddConstraint)
? (vue.openBlock(), vue.createBlock("div", _hoisted_8, [
vue.createVNode(_component_CFButton, {
type: "button",
label: $options.addRuleButtonLabel,
icon: "pi pi-plus",
class: "p-column-filter-add-button p-button-text p-button-sm",
onClick: _cache[9] || (_cache[9] = $event => ($options.addConstraint()))
}, null, 8, ["label"])
]))
: vue.createCommentVNode("", true),
vue.createVNode("div", _hoisted_9, [
(!$props.filterClearTemplate)
? (vue.openBlock(), vue.createBlock(_component_CFButton, {
key: 0,
type: "button",
class: "p-button-outlined p-button-sm",
onClick: _cache[10] || (_cache[10] = $event => ($options.clearFilter())),
label: $options.clearButtonLabel
}, null, 8, ["label"]))
: (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearTemplate), {
key: 1,
field: $props.field,
filterModel: $props.filters[$props.field],
filterCallback: $options.clearFilter
}, null, 8, ["field", "filterModel", "filterCallback"])),
($props.showApplyButton)
? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 2 }, [
(!$props.filterApplyTemplate)
? (vue.openBlock(), vue.createBlock(_component_CFButton, {
key: 0,
type: "button",
class: "p-button-sm",
onClick: _cache[11] || (_cache[11] = $event => ($options.applyFilter())),
label: $options.applyButtonLabel
}, null, 8, ["label"]))
: (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterApplyTemplate), {
key: 1,
field: $props.field,
filterModel: $props.filters[$props.field],
filterCallback: $options.applyFilter
}, null, 8, ["field", "filterModel", "filterCallback"]))
], 64))
: vue.createCommentVNode("", true)
])
], 64)),
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterFooterTemplate), {
field: $props.field,
filterModel: $props.filters[$props.field],
filterCallback: $options.filterCallback
}, null, 8, ["field", "filterModel", "filterCallback"]))
], 34))
: vue.createCommentVNode("", true)
]),
_: 1
}, 8, ["onEnter", "onLeave", "onAfterLeave"])
]))
], 2))
}
script$1.render = render$1;
var script$2 = {
name: 'HeaderCell',
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
props: {
column: {
type: Object,
default: null
},
resizableColumns: {
type: Boolean,
default: false
},
sortMode: {
type: String,
default: 'single'
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
multiSortMeta: {
type: Array,
default: null
},
allRowsSelected: {
type: Boolean,
default: false
},
empty: {
type: Boolean,
default: false
},
filterDisplay: {
type: String,
default: null
},
filters: {
type: Object,
default: null
},
filtersStore: {
type: Object,
default: null
},
filterColumn: {
type: Boolean,
default: false
}
},
data() {
return {
styleObject: {}
}
},
mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
methods: {
columnProp(prop) {
return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
},
onClick(event) {
this.$emit('column-click', {originalEvent: event, column: this.column});
},
onKeyDown(event) {
if (event.which === 13 && event.currentTarget.nodeName === 'TH' && utils.DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
this.$emit('column-click', {originalEvent: event, column: this.column});
}
},
onMouseDown(event) {
this.$emit('column-mousedown', {originalEvent: event, column: this.column});
},
onDragStart(event) {
this.$emit('column-dragstart', event);
},
onDragOver(event) {
this.$emit('column-dragover', event);
},
onDragLeave(event) {
this.$emit('column-dragleave', event);
},
onDrop(event) {
this.$emit('column-drop', event);
},
onResizeStart(event) {
this.$emit('column-resizestart', event);
},
getMultiSortMetaIndex() {
let index = -1;
for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i];
if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
index = i;
break;
}
}
return index;
},
isMultiSorted() {
return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
},
isColumnSorted() {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right);
}
this.styleObject.right = right + 'px';
}
else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left);
}
this.styleObject.left = left + 'px';
}
let filterRow = this.$el.parentElement.nextElementSibling;
if (filterRow) {
let index = utils.DomHandler.index(this.$el);
filterRow.children[index].style.left = this.styleObject.left;
filterRow.children[index].style.right = this.styleObject.right;
}
}
},
onHeaderCheckboxChange(event) {
this.$emit('checkbox-change', event);
}
},
computed: {
containerClass() {
return [this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class'), {
'p-sortable-column': this.columnProp('sortable'),
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-filter-column': this.filterColumn,
'p-frozen-column': this.columnProp('frozen')
}];
},
containerStyle() {
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle'): this.columnProp('headerStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, headerStyle, this.styleObject]: [columnStyle, headerStyle];
},
sortableColumnIcon() {
let sorted = false;
let sortOrder = null;
if (this.sortMode === 'single') {
sorted = this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'));
sortOrder = sorted ? this.sortOrder: 0;
}
else if (this.sortMode === 'multiple') {
let metaIndex = this.getMultiSortMetaIndex();
if (metaIndex > -1) {
sorted = true;
sortOrder = this.multiSortMeta[metaIndex].order;
}
}
return [
'p-sortable-column-icon pi pi-fw', {
'pi-sort-alt': !sorted,
'pi-sort-amount-up-alt': sorted && sortOrder > 0,
'pi-sort-amount-down': sorted && sortOrder < 0
}
];
},
ariaSort() {
if (this.columnProp('sortable')) {
const sortIcon = this.sortableColumnIcon;
if (sortIcon[1]['pi-sort-amount-down'])
return 'descending';
else if (sortIcon[1]['pi-sort-amount-up-alt'])
return 'ascending';
else
return 'none';
}
else {
return null;
}
}
},
components: {
'DTHeaderCheckbox': script,
'DTColumnFilter': script$1
}
};
const _hoisted_1$1 = { class: "p-column-header-content" };
const _hoisted_2$1 = {
key: 1,
class: "p-column-title"
};
const _hoisted_3$1 = {
key: 3,
class: "p-sortable-column-badge"
};
function render$2(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DTHeaderCheckbox = vue.resolveComponent("DTHeaderCheckbox");
const _component_DTColumnFilter = vue.resolveComponent("DTColumnFilter");
return (vue.openBlock(), vue.createBlock("th", {
style: $options.containerStyle,
class: $options.containerClass,
tabindex: $options.columnProp('sortable') ? '0' : null,
role: "cell",
onClick: _cache[9] || (_cache[9] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
onMousedown: _cache[11] || (_cache[11] = (...args) => ($options.onMouseDown && $options.onMouseDown(...args))),
onDragstart: _cache[12] || (_cache[12] = (...args) => ($options.onDragStart && $options.onDragStart(...args))),
onDragover: _cache[13] || (_cache[13] = (...args) => ($options.onDragOver && $options.onDragOver(...args))),
onDragleave: _cache[14] || (_cache[14] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
onDrop: _cache[15] || (_cache[15] = (...args) => ($options.onDrop && $options.onDrop(...args))),
colspan: $options.columnProp('colspan'),
rowspan: $options.columnProp('rowspan'),
"aria-sort": $options.ariaSort
}, [
($props.resizableColumns && !$options.columnProp('frozen'))
? (vue.openBlock(), vue.createBlock("span", {
key: 0,
class: "p-column-resizer",
onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
}, null, 32))
: vue.createCommentVNode("", true),
vue.createVNode("div", _hoisted_1$1, [
($props.column.children && $props.column.children.header)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.header), {
key: 0,
column: $props.column
}, null, 8, ["column"]))
: vue.createCommentVNode("", true),
($options.columnProp('header'))
? (vue.openBlock(), vue.createBlock("span", _hoisted_2$1, vue.toDisplayString($options.columnProp('header')), 1))
: vue.createCommentVNode("", true),
($options.columnProp('sortable'))
? (vue.openBlock(), vue.createBlock("span", {
key: 2,
class: $options.sortableColumnIcon
}, null, 2))
: vue.createCommentVNode("", true),
($options.isMultiSorted())
? (vue.openBlock(), vue.createBlock("span", _hoisted_3$1, vue.toDisplayString($options.getMultiSortMetaIndex() + 1), 1))
: vue.createCommentVNode("", true),
($options.columnProp('selectionMode') ==='multiple' && $props.filterDisplay !== 'row')
? (vue.openBlock(), vue.createBlock(_component_DTHeaderCheckbox, {
key: 4,
checked: $props.allRowsSelected,
onChange: $options.onHeaderCheckboxChange,
disabled: $props.empty
}, null, 8, ["checked", "onChange", "disabled"]))
: vue.createCommentVNode("", true),
($props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter)
? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
key: 5,
field: $options.columnProp('filterField')||$options.columnProp('field'),
type: $options.columnProp('dataType'),
display: "menu",
showMenu: $options.columnProp('showFilterMenu'),
filterElement: $props.column.children && $props.column.children.filter,
filterHeaderTemplate: $props.column.children && $props.column.children.filterheader,
filterFooterTemplate: $props.column.children && $props.column.children.filterfooter,
filterClearTemplate: $props.column.children && $props.column.children.filterclear,
filterApplyTemplate: $props.column.children && $props.column.children.filterapply,
filters: $props.filters,
filtersStore: $props.filtersStore,
onFilterChange: _cache[2] || (_cache[2] = $event => (_ctx.$emit('filter-change', $event))),
onFilterApply: _cache[3] || (_cache[3] = $event => (_ctx.$emit('filter-apply'))),
filterMenuStyle: $options.columnProp('filterMenuStyle'),
filterMenuClass: $options.columnProp('filterMenuClass'),
showOperator: $options.columnProp('showFilterOperator'),
showClearButton: $options.columnProp('showClearButton'),
showApplyButton: $options.columnProp('showApplyButton'),
showMatchModes: $options.columnProp('showFilterMatchModes'),
showAddButton: $options.columnProp('showAddButton'),
matchModeOptions: $options.columnProp('filterMatchModeOptions'),
maxConstraints: $options.columnProp('maxConstraints'),
onOperatorChange: _cache[4] || (_cache[4] = $event => (_ctx.$emit('operator-change',$event))),
onMatchmodeChange: _cache[5] || (_cache[5] = $event => (_ctx.$emit('matchmode-change', $event))),
onConstraintAdd: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-add', $event))),
onConstraintRemove: _cache[7] || (_cache[7] = $event => (_ctx.$emit('constraint-remove', $event))),
onApplyClick: _cache[8] || (_cache[8] = $event => (_ctx.$emit('apply-click',$event)))
}, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
: vue.createCommentVNode("", true)
])
], 46, ["tabindex", "colspan", "rowspan", "aria-sort"]))
}
script$2.render = render$2;
var script$3 = {
name: 'TableHeader',
emits: ['column-click', 'column-mousedown', 'column-dragstart', 'column-dragover', 'column-dragleave', 'column-drop',
'column-resizestart', 'checkbox-change', 'filter-change', 'filter-apply',
'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
props: {
columnGroup: {
type: null,
default: null
},
columns: {
type: null,
default: null
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array,String],
default: null
},
resizableColumns: {
type: Boolean,
default: false
},
allRowsSelected: {
type: Boolean,
default: false
},
empty: {
type: Boolean,
default: false
},
sortMode: {
type: String,
default: 'single'
},
sortField: {
type: [String, Function],
default: null
},
sortOrder: {
type: Number,
default: null
},
multiSortMeta: {
type: Array,
default: null
},
filterDisplay: {
type: String,
default: null
},
filters: {
type: Object,
default: null
},
filtersStore: {
type: Object,
default: null
}
},
methods: {
columnProp(col, prop) {
return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;