@progress/kendo-vue-data-tools
Version:
307 lines (306 loc) • 9.81 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, createVNode as o, h as q, inject as A, isVNode as J } from "vue";
import { templateRendering as Q, getListeners as W, getTemplate as X, hasListener as S } from "@progress/kendo-vue-common";
import { isCompositeFilterDescriptor as L } from "@progress/kendo-data-query";
import { ColumnMenuItem as Y } from "./ColumnMenuItem.mjs";
import { ColumnMenuItemGroup as Z } from "./ColumnMenuItemGroup.mjs";
import { ColumnMenuItemContent as ee } from "./ColumnMenuItemContent.mjs";
import { Button as V } from "@progress/kendo-vue-buttons";
import { provideLocalizationService as te } from "@progress/kendo-vue-intl";
import { operators as re, operatorMap as h, booleanFilterValues as ie, filterLogicList as le, getFilterType as oe, getDefaultOperator as ne } from "../filterCommon.mjs";
import { columnMenuFilterTitle as T, messages as m, columnMenuFilterClearButton as M, columnMenuFilterSubmitButton as k } from "../messages/main.mjs";
import { ColumnMenuFilterCell as j } from "./ColumnMenuFilterCell.mjs";
import { ColumnMenuFilterOperators as I } from "./ColumnMenuFilterOperators.mjs";
import { DropDownList as se } from "@progress/kendo-vue-dropdowns";
import { filterIcon as ae } from "@progress/kendo-svg-icons";
function B(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: "KendoColumnMenuFilter",
props: {
column: Object,
filter: Object,
expanded: {
type: Boolean,
default: void 0
},
filterable: Boolean,
filterOperators: {
type: Object,
default: re
},
hideSecondFilter: {
type: [Boolean, Object],
default: void 0
},
filterUI: [String, Function, Object],
onFilterchange: Function,
onExpandchange: Function,
onFilterfocus: 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 = oe(this.$props.column.filter), t = ne(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 u = t.filters.map((s) => s === i ? l : s);
n = {
...t,
filters: u
};
} else if (l.filters.length === 0) {
const u = t.filters.filter((s) => s !== i);
u.length && (n = {
...t,
filters: u
});
} 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: A("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 u = t.filter || "text", s = te(this), c = this.filterGroup.filters, d = h(n[u], s), C = h(ie, s), f = {
field: t.field,
value: c[0].value,
operator: c[0].operator,
booleanValues: C,
filterType: u
}, p = {
field: t.field,
value: c[1].value,
operator: c[1].operator,
booleanValues: C,
filterType: u
}, v = this.filterGroup.logic, $ = h(le, s), x = {
value: $.find((a) => a.operator === (v === null ? "" : v)),
data: $
}, D = this.currentFilterGroup().filters.length !== 0, E = this.isControlled() ? this.$props.expanded : this.currentExpanded, z = f.field, H = f.value, G = f.operator, P = f.booleanValues, b = f.filterType, R = p.field, U = p.value, y = p.operator, _ = p.booleanValues, O = p.filterType, w = i && Q.call(this, i, W.call(this)), N = X.call(this, {
h: q,
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(I, {
operator: G,
filterType: b,
onChange: (a) => {
this.filterChangeHandler(a, 0);
},
operators: d
}, null), o(j, {
field: z,
value: H,
operator: G,
booleanValues: P,
filterType: b,
onFiltercellfocus: this.handleFocus,
onChange: (a) => {
this.filterChangeHandler(a, 0);
},
operators: d
}, null)], !l && !i && [o(se, {
onChange: this.logicChange,
class: "k-filter-and",
"data-items": x.data,
value: x.value,
textField: "text"
}, null), o(I, {
operator: y,
filterType: O,
onChange: (a) => {
this.filterChangeHandler(a, 1);
},
operators: d
}, null), o(j, {
field: R,
value: U,
operator: y,
booleanValues: _,
filterType: O,
onFiltercellfocus: this.handleFocus,
onChange: (a) => {
this.filterChangeHandler(a, 1);
},
operators: d
}, null)], i && N, o("div", {
class: "k-columnmenu-actions"
}, [o(V, {
type: "reset"
}, B(e = s.toLanguageString(M, m[M])) ? e : {
default: () => [e]
}), o(V, {
themeColor: "primary",
disabled: !D
}, B(r = s.toLanguageString(k, m[k])) ? r : {
default: () => [r]
})])])])])]
})]
});
}
});
export {
be as ColumnMenuFilter,
g as filterGroupByField,
F as rootFilterOrDefault
};