@progress/kendo-vue-grid
Version:
312 lines (311 loc) • 9.91 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as K, inject as q, createVNode as o, h as A, isVNode as J } from "vue";
import { hasListener as S, templateRendering as Q, getListeners as W, getTemplate as X } from "@progress/kendo-vue-common";
import { isCompositeFilterDescriptor as L } from "@progress/kendo-data-query";
import { GridColumnMenuItem as Y } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as Z } from "./GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItemContent as ee } from "./GridColumnMenuItemContent.mjs";
import { Button as V } from "@progress/kendo-vue-buttons";
import { provideLocalizationService as te } from "@progress/kendo-vue-intl";
import { operators as re, getFilterType as ie, getDefaultOperator as le, operatorMap as h, booleanFilterValues as oe, filterLogicList as ne } from "../filterCommon.mjs";
import { filterTitle as T, messages as m, filterSubmitButton as k, filterClearButton as j } from "../messages/main.mjs";
import { GridColumnMenuFilterCell as I } from "./GridColumnMenuFilterCell.mjs";
import { ColumnMenuFilterOperators as B } from "./GridColumnMenuFilterOperators.mjs";
import { DropDownList as se } from "@progress/kendo-vue-dropdowns";
import { filterIcon as ae } from "@progress/kendo-svg-icons";
function M(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !J(e);
}
const F = (e) => e || {
filters: [],
logic: "and"
}, g = (e, r) => F(r).filters.filter((l) => L(l) ? l.filters && l.filters.length && l.filters.length <= 2 && !l.filters.find((n) => L(n) || n.field !== e) : !1)[0] || null, be = /* @__PURE__ */ K({
name: "KendoGridColumnMenuFilter",
props: {
column: Object,
filter: Object,
expanded: {
type: Boolean,
default: void 0
},
filterable: Boolean,
filterOperators: {
type: Object,
default: function() {
return re;
}
},
hideSecondFilter: {
type: [Boolean, Object],
default: function() {
}
},
filterUI: [String, Function, Object],
onFilterfocus: Function,
onFilterchange: Function,
onExpandchange: Function,
onClosemenu: Function
},
inject: {
kendoLocalizationService: {
default: null
}
},
data() {
return {
currentExpanded: !1,
filterGroup: null
};
},
created() {
let e;
if (this.$props.column && this.$props.column.field) {
const r = ie(this.$props.column.filter), t = le(this.$props.filterOperators, r);
e = g(this.$props.column.field, this.$props.filter), e = e ? {
...e,
filters: e.filters.map((i) => ({
...i
}))
} : {
logic: "and",
filters: [{
field: this.$props.column.field,
operator: t
}, {
field: this.$props.column.field,
operator: t
}]
}, e.filters.filter((i) => i.field === this.$props.column.field).length === 1 && e.filters.splice(1, 0, {
field: this.$props.column.field,
operator: t
});
}
this.currentExpanded = this.$props.expanded || !1, this.filterGroup = e;
},
methods: {
removeGroup(e, r) {
const t = [...r.filters], i = t.findIndex((l) => l === e);
return i > -1 && t.splice(i, 1), {
...r,
filters: t
};
},
insertGroup(e, r) {
return {
...r,
filters: [e, ...r.filters]
};
},
isControlled() {
return this.$props.expanded !== void 0;
},
onFilterExpand() {
const e = this.isControlled(), r = !(e ? this.$props.expanded : this.currentExpanded);
this.$emit("expandchange", r), e || (this.currentExpanded = r);
},
filterChangeHandler(e, r) {
this.filterChange(r || 0, e);
},
firstFilterChange(e) {
this.filterChange(0, e);
},
secondFilterChange(e) {
this.filterChange(1, e);
},
filterChange(e, r) {
const t = this.filterGroup.filters.map((i, l) => l === e ? {
...i,
value: r.value,
operator: r.operator
} : i);
this.filterGroup = {
...this.filterGroup,
filters: t
};
},
logicChange(e) {
this.filterGroup = {
...this.filterGroup,
logic: e.target.value.operator
};
},
clear(e) {
if (e.preventDefault(), !S.call(this, "filterchange"))
return;
const r = this.$props.column.field, t = F(this.$props.filter), i = g(r, this.$props.filter), l = t.filters.filter((n) => n !== i);
l.length ? this.$emit("filterchange", {
...t,
filters: l
}, {
event: e,
field: this.$props.column.field
}) : this.$emit("filterchange", null, {
event: e,
field: this.$props.column.field
}), this.$emit("closemenu");
},
currentFilterGroup() {
return {
...this.filterGroup,
filters: this.filterGroup.filters.filter((e) => e.value !== void 0 && e.value !== null && e.value !== "" || e.value === null && e.operator)
};
},
submit(e) {
if (e.preventDefault(), !S.call(this, "filterchange"))
return;
const r = this.$props.column.field, t = F(this.$props.filter), i = g(r, this.$props.filter), l = this.currentFilterGroup();
let n = null;
if (i && l.filters.length > 0) {
const f = t.filters.map((s) => s === i ? l : s);
n = {
...t,
filters: f
};
} else if (l.filters.length === 0) {
const f = t.filters.filter((s) => s !== i);
f.length && (n = {
...t,
filters: f
});
} else
n = {
...t,
filters: [...t.filters, l]
};
this.$emit("filterchange", n, {
event: e,
field: this.$props.column.field
}), this.$emit("closemenu");
},
handleFocus(e) {
this.$emit("filterfocus", e);
}
},
setup() {
return {
kendoLocalizationService: q("kendoLocalizationService", {})
};
},
render() {
let e, r;
const {
column: t,
filterUI: i,
hideSecondFilter: l,
filterOperators: n
} = this.$props;
if (!t || !t.field)
return o("div", null, null);
const f = t.filter || "text", s = te(this), d = this.filterGroup.filters, u = h(n[f], s), C = h(oe, s), p = {
field: t.field,
value: d[0].value,
operator: d[0].operator,
operators: u,
booleanValues: C,
filterType: f
}, c = {
field: t.field,
value: d[1].value,
operator: d[1].operator,
operators: u,
booleanValues: C,
filterType: f
}, v = this.filterGroup.logic, $ = h(ne, s), G = {
value: $.find((a) => a.operator === (v === null ? "" : v)),
data: $
}, D = this.currentFilterGroup().filters.length !== 0, E = this.isControlled() ? this.$props.expanded : this.currentExpanded, z = p.field, H = p.value, x = p.operator, P = p.booleanValues, b = p.filterType, R = c.field, U = c.value, y = c.operator, _ = c.booleanValues, O = c.filterType, w = i && Q.call(this, i, W.call(this)), N = X.call(this, {
h: A,
template: w,
defaultRendering: void 0,
additionalProps: this.$props,
additionalListeners: {
change: this.filterChangeHandler,
logicchange: this.logicChange
}
});
return o(Z, null, {
default: () => [o(Y, {
title: s.toLanguageString(T, m[T]),
icon: "filter",
svgIcon: ae,
onMenuitemclick: this.onFilterExpand
}, null), o(ee, {
show: !!E
}, {
default: () => [o("div", {
class: "kendo-grid-filter-menu-container"
}, [o("form", {
class: "k-filter-menu k-border-up",
onSubmit: this.submit,
onReset: this.clear
}, [o("div", {
class: "k-filter-menu-container"
}, [!i && [o(B, {
operator: x,
filterType: b,
onChange: (a) => {
this.filterChangeHandler(a, 0);
},
operators: u
}, null), o(I, {
field: z,
value: H,
operator: x,
booleanValues: P,
filterType: b,
onFiltercellfocus: this.handleFocus,
onChange: (a) => {
this.filterChangeHandler(a, 0);
},
operators: u
}, null)], !l && !i && [o(se, {
onChange: this.logicChange,
class: "k-filter-and",
"data-items": G.data,
value: G.value,
textField: "text"
}, null), o(B, {
operator: y,
filterType: O,
onChange: (a) => {
this.filterChangeHandler(a, 1);
},
operators: u
}, null), o(I, {
field: R,
value: U,
operator: y,
booleanValues: _,
filterType: O,
onFiltercellfocus: this.handleFocus,
onChange: (a) => {
this.filterChangeHandler(a, 1);
},
operators: u
}, null)], i && N, o("div", {
class: "k-columnmenu-actions"
}, [o(V, {
themeColor: "primary",
disabled: !D
}, M(e = s.toLanguageString(k, m[k])) ? e : {
default: () => [e]
}), o(V, {
type: "reset"
}, M(r = s.toLanguageString(j, m[j])) ? r : {
default: () => [r]
})])])])])]
})]
});
}
});
export {
be as GridColumnMenuFilter,
g as filterGroupByField,
F as rootFilterOrDefault
};