@progress/kendo-vue-grid
Version:
259 lines (258 loc) • 9.48 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 { inject as j, createVNode as r, h as p, isVNode as A } from "vue";
import { Button as f } from "@progress/kendo-vue-buttons";
import { GridColumnMenuItem as O } from "./GridColumnMenuItem.mjs";
import { GridColumnMenuItemGroup as R } from "./GridColumnMenuItemGroup.mjs";
import { GridColumnMenuItemContent as V } from "./GridColumnMenuItemContent.mjs";
import { Checkbox as m } from "@progress/kendo-vue-inputs";
import { provideLocalizationService as q } from "@progress/kendo-vue-intl";
import { filterCheckAll as g, messages as d, filterTitle as x, filterSubmitButton as F, filterClearButton as k, searchPlaceholder as I } from "../messages/main.mjs";
import { filterBy as P } from "@progress/kendo-data-query";
import { templateRendering as C, getListeners as $, getTemplate as v, clone as z, Icon as G } from "@progress/kendo-vue-common";
import { getNestedValue as S } from "../utils/main.mjs";
import { filterIcon as M, searchIcon as w } from "@progress/kendo-svg-icons";
function b(e) {
return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !A(e);
}
const T = (e, t) => e.length !== t.length ? !1 : e.every((n, i) => n === t[i]), ie = {
name: "KendoGridColumnMenuCheckboxFilter",
props: {
column: Object,
filter: Object,
filterable: Boolean,
filterOperators: Object,
checkAllItem: [String, Object, Function],
item: [String, Object, Function],
expanded: {
type: Boolean,
default: void 0
},
dataItems: Array,
searchBox: {
type: Boolean,
default: !0
},
uniqueData: {
type: Boolean,
default: !0
}
},
data() {
return {
currentExpanded: !1,
currentValue: "",
currentData: void 0,
dataFromProps: void 0,
currentFilter: void 0
};
},
created() {
this.compositeFilterIndex = this.getFilterIndex(), this.currentExpanded = this.$props.expanded, this.currentData = this.parseData(this.$props.dataItems, this.$props.uniqueData) || [], this.dataFromProps = this.parseData(this.$props.dataItems, !1) || [], this.currentFilter = this.defaultFilter();
},
updated() {
const e = this.$props.column.field || "", t = this.$props.dataItems.map((n) => S(e, n));
T(t, this.dataFromProps) || (this.currentData = t, this.dataFromProps = t);
},
inject: {
kendoLocalizationService: {
default: null
}
},
setup() {
return {
kendoLocalizationService: j("kendoLocalizationService", {})
};
},
render() {
let e, t;
const {
column: n
} = this.$props;
if (!n || !n.field)
return r("div", null, null);
const i = q(this), o = this.$props.expanded !== void 0 ? this.$props.expanded : this.currentExpanded, s = [];
if (this.currentFilter) {
const l = [...this.currentFilter.filters];
this.compositeFilterIndex = l.findIndex((a) => a.filters && a.filters.length > 0 ? a.filters[0].field === n.field : !1), this.compositeFilterIndex !== -1 && l[this.compositeFilterIndex].filters.length > 0 && l[this.compositeFilterIndex].filters.forEach((a) => {
a.field === this.$props.column.field && s.push(a.value);
});
}
const c = function() {
return this.$props.searchBox && r("span", {
class: "k-list-filter"
}, [r("span", {
class: "k-textbox k-input k-input-md k-rounded-md k-input-solid"
}, [r(G, {
name: "search",
icon: w,
class: "k-input-icon"
}, null), r("input", {
ref: "searchBox",
placeholder: i.toLanguageString(I, d[I]),
class: "k-input-inner",
value: this.currentValue,
onInput: this.handleSearchChange
}, null)])]);
}, u = s.filter((l, a) => s.indexOf(l) === a), B = C.call(this, this.$props.item, $.call(this)), D = C.call(this, this.$props.checkAllItem, $.call(this)), L = r("li", {
class: "k-item"
}, [r(m, {
label: i.toLanguageString(g, d[g]),
onChange: (l) => this.handleCheckBoxChange(l, "all"),
checked: this.isAllSelected()
}, null)]), y = v.call(this, {
h: p,
template: D,
defaultRendering: L,
additionalProps: {
checked: this.isAllSelected()
},
additionalListeners: {
change: (l) => this.handleCheckBoxChange(l, "all")
}
});
return r(R, null, {
default: () => [r(O, {
title: i.toLanguageString(x, d[x]),
icon: "filter",
svgIcon: M,
onMenuitemclick: this.onFilterExpand
}, null), r(V, {
show: !!o
}, {
default: () => [r("div", {
class: "kendo-grid-filter-menu-container"
}, [r("form", {
class: "k-filter-menu k-border-up",
onSubmit: this.submit,
onReset: this.clear
}, [r("div", {
class: "k-filter-menu-container"
}, [c.call(this), r("ul", {
class: "k-reset k-multicheck-wrap"
}, [y, this.currentData.map(function(l, a) {
const E = r("li", {
class: "k-item",
key: a
}, [r(m, {
label: String(l),
onChange: (h) => this.handleCheckBoxChange(h, l),
checked: u.includes(l)
}, null)]);
return v.call(this, {
h: p,
template: B,
defaultRendering: E,
additionalProps: {
item: l,
index: a,
checked: u.includes(l)
},
additionalListeners: {
change: (h) => this.handleCheckBoxChange(h, l)
}
});
}, this)]), r("div", {
class: "k-columnmenu-actions"
}, [r(f, {
themeColor: "primary"
}, b(e = i.toLanguageString(F, d[F])) ? e : {
default: () => [e]
}), r(f, {
type: "reset"
}, b(t = i.toLanguageString(k, d[k])) ? t : {
default: () => [t]
})])])])])]
})]
});
},
methods: {
defaultFilter() {
return this.$props.filter ? z(this.$props.filter) : {
filters: [],
logic: "and"
};
},
parseData(e, t) {
const n = this.$props.column.field || "", i = e.map((o) => S(n, o));
return t ? i.filter((o, s) => i.indexOf(o) === s) : i;
},
getFilterIndex() {
const e = this.$props.column.field;
return this.defaultFilter().filters.findIndex((i) => i.filters && i.filters.length > 0 && i.filters[0].field === e);
},
onFilterExpand() {
const e = this.$props.expanded !== void 0, t = !(e ? this.$props.expanded : this.currentExpanded);
this.$emit("expandchange", t), e || (this.currentExpanded = t);
},
handleSearchChange(e) {
const t = {
logic: "and",
filters: [{
field: this.$props.column.field,
operator: "startswith",
value: e.target.value,
ignoreCase: !0
}]
};
this.currentValue = e.target.value, this.currentData = this.parseData(P(this.$props.dataItems || [], t), this.$props.uniqueData);
},
clear(e) {
e.preventDefault();
const t = this.currentFilter || null;
t !== null && t.filters.length > 0 ? (this.compositeFilterIndex >= 0 && t.filters.splice(this.compositeFilterIndex, 1), this.$emit("filterchange", t, e)) : this.$emit("filterchange", null, e), this.$emit("closemenu");
},
submit(e) {
e.preventDefault();
const t = this.currentFilter || null;
this.$emit("filterchange", t, e), this.$emit("closemenu");
},
handleCheckBoxChange(e, t) {
const n = this.$props.column.field || "", i = {
...this.currentFilter
}, o = [...this.currentFilter.filters];
let s = [];
if (this.compositeFilterIndex !== -1 && i.filters[this.compositeFilterIndex].filters && t !== "all" && (s = i.filters[this.compositeFilterIndex].filters), e.value && t === "all")
this.currentData.forEach((c) => {
s.push({
field: n,
operator: "eq",
value: c
});
});
else if (e.value)
s.push({
field: n,
operator: "eq",
value: t
});
else if (this.currentFilter) {
const c = s.findIndex((u) => u.value === t);
s.splice(c, 1);
}
i.logic = "and", this.compositeFilterIndex !== -1 ? o[this.compositeFilterIndex] = {
logic: "or",
filters: s
} : o.push({
logic: "or",
filters: s
}), (!e.value && t === "all" || s.length === 0) && o.splice(this.compositeFilterIndex, 1), i.filters = o, this.currentFilter = i;
},
isAllSelected() {
let e = !1;
if (this.currentFilter) {
const t = [...this.currentFilter.filters];
return this.compositeFilterIndex === -1 ? !1 : (e = this.currentData.every((n) => this.compositeFilterIndex !== -1 && t[this.compositeFilterIndex].filters ? t[this.compositeFilterIndex].filters.findIndex((o) => o.value === n) >= 0 : !1), e);
}
return e;
}
}
};
export {
ie as GridColumnMenuCheckboxFilter
};