@progress/kendo-vue-data-tools
Version:
155 lines (154 loc) • 4.2 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 f, createVNode as e, isVNode as g } from "vue";
import { Toolbar as b, ButtonGroup as h, Button as n } from "@progress/kendo-vue-buttons";
import { provideLocalizationService as m } from "@progress/kendo-vue-intl";
import { stringOperator as v } from "./operators.mjs";
import { filterAndLogic as s, messages as l, filterOrLogic as a, filterAddExpression as p, filterAddGroup as c, filterClose as u } from "../messages/main.mjs";
import { filterAddExpressionIcon as L, filterAddGroupIcon as k, xIcon as y } from "@progress/kendo-svg-icons";
function d(t) {
return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !g(t);
}
const O = /* @__PURE__ */ f({
name: "KendoFilterGroup",
emits: {
change: null,
remove: null
},
props: {
filter: {
type: Object,
required: !0
},
fields: {
type: Array,
required: !0
},
defaultGroupFilter: {
type: Object,
required: !0
},
ariaLabel: {
type: String,
default: void 0
}
},
inject: {
kendoLocalizationService: {
default: null
}
},
render() {
let t, o;
const {
filter: r
} = this.$props, i = m(this);
return e("div", {
class: "k-filter-toolbar"
}, [e(b, {
overflow: "none",
keyboardNavigation: !1,
"aria-label": this.$props.ariaLabel
}, {
default: () => [e(h, {
class: "k-toolbar-button-group"
}, {
default: () => [e(n, {
togglable: !0,
onClick: this.onLogicAnd,
class: "k-toolbar-button",
selected: r.logic === "and",
type: "button"
}, d(t = i.toLanguageString(s, l[s])) ? t : {
default: () => [t]
}), e(n, {
togglable: !0,
onClick: this.onLogicOr,
class: "k-toolbar-button",
selected: r.logic === "or",
type: "button"
}, d(o = i.toLanguageString(a, l[a])) ? o : {
default: () => [o]
})]
}), e(n, {
title: i.toLanguageString(p, l[p]),
icon: "filter-add-expression",
svgIcon: L,
type: "button",
class: "k-toolbar-button",
onClick: this.onAddExpression
}, null), e(n, {
title: i.toLanguageString(c, l[c]),
icon: "filter-add-group",
svgIcon: k,
type: "button",
class: "k-toolbar-button",
onClick: this.onAddGroup
}, null), e(n, {
title: i.toLanguageString(u, l[u]),
icon: "x",
svgIcon: y,
fillMode: "flat",
type: "button",
class: "k-toolbar-button",
onClick: this.onGroupRemove
}, null)]
})]);
},
methods: {
onGroupRemove() {
this.$emit("remove", {
filter: this.$props.filter
});
},
onAddExpression() {
const t = this.$props.filter, o = this.$props.fields[0], r = {
field: o.name,
operator: o.operators[0].operator
};
r.value = v(r.operator) ? "" : null, this.$emit("change", {
nextFilter: {
...t,
filters: [...t.filters, r]
},
prevFilter: t
});
},
onAddGroup() {
const t = this.$props.filter;
this.$emit("change", {
nextFilter: {
...t,
filters: [...t.filters, {
...this.$props.defaultGroupFilter
}]
},
prevFilter: t
});
},
onLogicAnd() {
this.changeLogic("and");
},
onLogicOr() {
this.changeLogic("or");
},
changeLogic(t) {
const o = this.$props.filter;
o.logic !== t && this.$emit("change", {
nextFilter: {
...o,
logic: t
},
prevFilter: o
});
}
}
});
export {
O as GroupToolbar
};