@progress/kendo-vue-data-tools 5.3.0-dev.202409130647 → 5.3.0-develop.1

package/drag/CommonDragLogic.mjs

@@ -0,0 +1,84 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { getIndex as h } from "../utils/main.mjs";
+import { canUseDOM as a } from "@progress/kendo-vue-common";
+class c {
+  constructor(r, i, l) {
+    this.reorderable = !1, this.groupable = !1, this.dropElementClue = null, this.dragElementClue = null, this.startColumn = -1, this.startGroup = -1, this.currentColumn = -1, this.currentGroup = -1, this.groupPanelDivElement = null, this.refGroupPanelDiv = (t) => {
+      this.groupPanelDivElement = t.children ? t.children[0] : t;
+    }, this.refDropElementClue = (t) => {
+      this.dropElementClue = t, this.dropElementClue && a && document.body.appendChild(this.dropElementClue.$el);
+    }, this.refDragElementClue = (t) => {
+      this.dragElementClue = t, this.dragElementClue && a && document.body.appendChild(this.dragElementClue.$el);
+    }, this.pressHandler = (t, e) => {
+      t.isTouch || t.originalEvent.preventDefault();
+      const s = this.getColumnIndex(t, e);
+      if (this.startGroup = this.getGroupIndex(t), s >= 0) {
+        const n = this.columns[s];
+        (n.reorderable && this.reorderable || n.groupable && this.groupable) && (this.startColumn = s);
+      }
+    }, this.dragHandler = (t, e) => {
+      if (t.isTouch || t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), this.startColumn === -1 && this.startGroup === -1)
+        return;
+      this.currentColumn = this.getColumnIndex(t, e);
+      const s = this.groupPanelDivElement && this.groupPanelDivElement.children;
+      this.currentGroup = this.isTargetGroupingContainer(t) ? s && s.length ? s.length - 1 : 0 : this.getGroupIndex(t);
+      const n = !this.isValid();
+      n && (this.currentColumn = -1, this.currentGroup = -1);
+      const u = this.currentColumn >= 0 ? e.children[this.columns[this.currentColumn].index] : this.isTargetGroupingContainer(t) ? t.originalEvent.target : this.groupPanelDivElement && this.groupPanelDivElement.children[this.currentGroup];
+      this.updateDragElementClue(t, e, u, n), this.updateDropElementClue(t, e, u, n);
+    }, this.releaseHandler = (t) => {
+      const e = this.startColumn, s = this.currentColumn, n = this.startGroup, u = this.currentGroup;
+      this.dropElementClue && (this.dropElementClue.visible = !1), this.dragElementClue && (this.dragElementClue.visible = !1);
+      const o = this.isValid();
+      this.startColumn = this.startGroup = this.currentColumn = this.currentGroup = -1, o && (e >= 0 && s >= 0 ? this.columnReorder(e, s, t.originalEvent) : n >= 0 && u >= 0 ? this.groupReorder(n, u, t.originalEvent) : e >= 0 && u >= 0 && this.columnToGroup(e, u, t.originalEvent));
+    }, this.columnReorder = r, this.groupReorder = i, this.columnToGroup = l;
+  }
+  getColumnIndex(r, i) {
+    if (!i || i.parentElement === this.groupPanelDivElement)
+      return -1;
+    const l = h(r, i);
+    if (l === -1)
+      return -1;
+    for (let t = 0; t < i.parentNode.children.length; t++)
+      if (i.parentNode.children[t] === i)
+        return this.columns.findIndex((e) => e.index === l && e.depth === t);
+    return -1;
+  }
+  isTargetGroupingContainer(r) {
+    return r.originalEvent.target.className.indexOf("k-grouping-drop-container") !== -1;
+  }
+  getGroupIndex(r) {
+    return h(r, this.groupPanelDivElement);
+  }
+  isValid() {
+    return this.startGroup >= 0 ? this.currentGroup >= 0 && this.currentGroup !== this.startGroup : this.startColumn === -1 ? !1 : this.currentGroup >= 0 ? this.columns[this.startColumn].groupable === !0 && this.groupable === !0 : this.reorderable === !0 && this.currentColumn >= 0 && this.currentColumn !== this.startColumn && this.columns[this.startColumn].reorderable === !0 && this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
+  }
+  updateDragElementClue(r, i, l, t) {
+    if (!this.dragElementClue)
+      return;
+    const e = this.startColumn >= 0 ? i.children[this.columns[this.startColumn].index].innerText : i.innerText;
+    this.dragElementClue.visible = !0, this.dragElementClue.top = r.pageY + 10, this.dragElementClue.left = r.pageX, this.dragElementClue.innerText = e, this.dragElementClue.status = t || !l ? "cancel" : "plus";
+  }
+  updateDropElementClue(r, i, l, t) {
+    if (!this.dropElementClue)
+      return;
+    if (t || !l) {
+      this.dropElementClue.visible = !1;
+      return;
+    }
+    const e = l.getBoundingClientRect(), n = (l.closest(".k-grouping-header") || l).getBoundingClientRect();
+    let u = e.left + r.pageX - r.clientX - 6;
+    !this.isTargetGroupingContainer(r) && (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) && (u += e.width);
+    const o = n.top + r.pageY - r.clientY;
+    this.dropElementClue.visible = !0, this.dropElementClue.top = o, this.dropElementClue.left = u, this.dropElementClue.height = this.currentColumn >= 0 ? i.clientHeight : n.height;
+  }
+}
+export {
+  c as CommonDragLogic
+};

package/drag/DragClue.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),s=require("@progress/kendo-vue-common"),t=require("@progress/kendo-svg-icons"),n=e.defineComponent({data(){return{visible:!1,top:0,left:0,innerText:"",status:"cancel"}},render(){return this.visible&&e.createVNode("div",{class:"k-header k-drag-clue",style:{display:"block",position:"absolute",zIndex:2e4,padding:"8px 12px",top:this.top+"px",left:this.left+"px"}},[e.createVNode(s.Icon,{name:this.status,class:"k-drag-status",icon:this.status==="cancel"?t.cancelIcon:t.plusIcon},null),this.innerText])}});exports.DragClue=n;

package/drag/DragClue.mjs

@@ -0,0 +1,41 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as e, createVNode as t } from "vue";
+import { Icon as s } from "@progress/kendo-vue-common";
+import { cancelIcon as n, plusIcon as i } from "@progress/kendo-svg-icons";
+const r = /* @__PURE__ */ e({
+  data() {
+    return {
+      visible: !1,
+      top: 0,
+      left: 0,
+      innerText: "",
+      status: "cancel"
+    };
+  },
+  render() {
+    return this.visible && t("div", {
+      class: "k-header k-drag-clue",
+      style: {
+        display: "block",
+        position: "absolute",
+        zIndex: 2e4,
+        padding: "8px 12px",
+        top: this.top + "px",
+        left: this.left + "px"
+      }
+    }, [t(s, {
+      name: this.status,
+      class: "k-drag-status",
+      icon: this.status === "cancel" ? n : i
+    }, null), this.innerText]);
+  }
+});
+export {
+  r as DragClue
+};

package/drag/DropClue.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=e.defineComponent({data(){return{height:0,visible:!1,left:0,top:0}},render(){return this.visible&&e.createVNode("div",{class:"k-grouping-dropclue",style:{zIndex:1e4,display:"block",top:this.top+"px",left:this.left+"px",height:this.height+"px"}},null)}});exports.DropClue=t;

package/drag/DropClue.mjs

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as e, createVNode as t } from "vue";
+const l = /* @__PURE__ */ e({
+  data() {
+    return {
+      height: 0,
+      visible: !1,
+      left: 0,
+      top: 0
+    };
+  },
+  render() {
+    return this.visible && t("div", {
+      class: "k-grouping-dropclue",
+      style: {
+        zIndex: 1e4,
+        display: "block",
+        top: this.top + "px",
+        left: this.left + "px",
+        height: this.height + "px"
+      }
+    }, null);
+  }
+});
+export {
+  l as DropClue
+};

package/filter/Expression.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),g=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-buttons"),u=require("@progress/kendo-vue-dropdowns"),h=require("@progress/kendo-vue-intl"),m=require("@progress/kendo-svg-icons"),p=require("./operators.js"),l=require("../messages/main.js"),F=require("./filters/TextFilter.js"),v=require("./filters/NumericFilter.js"),b=require("./filters/BooleanFilter.js"),x=require("./filters/DateFilter.js"),C=n.defineComponent({name:"KendoExpression",emits:{change:null,remove:null},props:{filter:{type:Object,required:!0},fields:{type:Array,required:!0}},inject:{kendoLocalizationService:{default:null}},render(){const{fields:o,filter:e}=this.$props,t=o.find(i=>i.name===e.field),r=h.provideLocalizationService(this),s=(t&&t.operators||[]).map(i=>({...i,text:r.toLanguageString(i.text,l.messages[i.text]||i.text)}));let a=null;const c=function(i,f){switch(i){case"numeric":a=n.createVNode(v.NumericFilter,{filter:e,onFilterchange:this.onInputChange},null);break;case"date":a=n.createVNode(x.DateFilter,{filter:e,onFilterchange:this.onInputChange},null);break;case"boolean":a=n.createVNode(b.BooleanFilter,{filter:e,onFilterchange:this.onInputChange},null);break;default:a=n.createVNode(F.TextFilter,{filter:e,onFilterchange:this.onInputChange},null);break}return g.getTemplate.call(this,{h:n.h,template:f,defaultRendering:a,additionalProps:{filter:e},additionalListeners:{filterchange:this.onInputChange}})};return n.createVNode("div",{class:"k-filter-toolbar"},[n.createVNode(d.Toolbar,{keyboardNavigation:!1,ariaLabel:e.ariaLabel?e.ariaLabel:void 0},{default:()=>[n.createVNode(d.ToolbarItem,{class:"k-filter-field"},{default:()=>[n.createVNode(u.DropDownList,{class:"k-filter-dropdown",dataItems:o,textField:"label",value:o.find(i=>i.name===e.field),onChange:this.onFieldChange,ariaLabel:r.toLanguageString(l.filterExpressionDropdownAriaLabel,l.messages[l.filterExpressionDropdownAriaLabel])},null)]}),n.createVNode(d.ToolbarItem,{class:"k-filter-operator"},{default:()=>[n.createVNode(u.DropDownList,{dataItems:s,textField:"text",value:s.find(i=>i.operator===e.operator),onChange:this.onOperatorChange,ariaLabel:r.toLanguageString(l.filterExpressionOperatorDropdownAriaLabel,l.messages[l.filterExpressionOperatorDropdownAriaLabel])},null)]}),n.createVNode(d.ToolbarItem,{class:"k-filter-value"},{default:()=>[t&&c.call(this,t.filter,t.filterRender)]}),n.createVNode(d.Button,{title:r.toLanguageString(l.filterClose,l.messages[l.filterClose]),icon:"x",svgIcon:m.xIcon,fillMode:"flat",type:"button",class:"k-toolbar-button",onClick:this.onFilterRemove},null)]})])},methods:{onFieldChange(o){const e=o.value.name,t=this.$props.fields.find(c=>c.name===e),r=this.$props.filter,s=t&&!t.operators.some(c=>c.operator===r.operator)?t.operators[0].operator:r.operator,a={field:e,operator:s};p.unaryOperator(s)||(a.value=p.stringOperator(s)?"":null),this.triggerOnFilterChange(r,a,o)},onOperatorChange(o){const e=o.value.operator,t=this.$props.filter;let r;if(p.unaryOperator(e)){let{value:s,...a}=t;r={...a,operator:e}}else r={...t,operator:e};this.triggerOnFilterChange(t,r,o)},onInputChange(o){const e=this.$props.filter;let t=o.nextFilter;if(p.unaryOperator(t.operator)){const r=this.$props.fields.find(s=>s.name===t.field);t={...t,operator:r&&r.operators[0].operator||t.operator}}this.triggerOnFilterChange(e,t,o)},triggerOnFilterChange(o,e,t){const r={prevFilter:o,nextFilter:e,event:t.event,target:this};this.$emit("change",r)},onFilterRemove(o){const e={filter:this.$props.filter,event:o.event,target:this};this.$emit("remove",e)}}});exports.Expression=C;

package/filter/Expression.mjs

@@ -0,0 +1,191 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 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 n, h as v } from "vue";
+import { getTemplate as b } from "@progress/kendo-vue-common";
+import { Toolbar as x, ToolbarItem as f, Button as C } from "@progress/kendo-vue-buttons";
+import { DropDownList as c } from "@progress/kendo-vue-dropdowns";
+import { provideLocalizationService as L } from "@progress/kendo-vue-intl";
+import { xIcon as k } from "@progress/kendo-svg-icons";
+import { unaryOperator as d, stringOperator as I } from "./operators.mjs";
+import { messages as p, filterExpressionDropdownAriaLabel as g, filterExpressionOperatorDropdownAriaLabel as h, filterClose as u } from "../messages/main.mjs";
+import { TextFilter as O } from "./filters/TextFilter.mjs";
+import { NumericFilter as $ } from "./filters/NumericFilter.mjs";
+import { BooleanFilter as E } from "./filters/BooleanFilter.mjs";
+import { DateFilter as S } from "./filters/DateFilter.mjs";
+const K = /* @__PURE__ */ F({
+  name: "KendoExpression",
+  emits: {
+    change: null,
+    remove: null
+  },
+  props: {
+    filter: {
+      type: Object,
+      required: !0
+    },
+    fields: {
+      type: Array,
+      required: !0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  render() {
+    const {
+      fields: o,
+      filter: e
+    } = this.$props, t = o.find((i) => i.name === e.field), r = L(this), l = (t && t.operators || []).map((i) => ({
+      ...i,
+      text: r.toLanguageString(i.text, p[i.text] || i.text)
+    }));
+    let a = null;
+    const s = function(i, m) {
+      switch (i) {
+        case "numeric":
+          a = n($, {
+            filter: e,
+            onFilterchange: this.onInputChange
+          }, null);
+          break;
+        case "date":
+          a = n(S, {
+            filter: e,
+            onFilterchange: this.onInputChange
+          }, null);
+          break;
+        case "boolean":
+          a = n(E, {
+            filter: e,
+            onFilterchange: this.onInputChange
+          }, null);
+          break;
+        default:
+          a = n(O, {
+            filter: e,
+            onFilterchange: this.onInputChange
+          }, null);
+          break;
+      }
+      return b.call(this, {
+        h: v,
+        template: m,
+        defaultRendering: a,
+        additionalProps: {
+          filter: e
+        },
+        additionalListeners: {
+          filterchange: this.onInputChange
+        }
+      });
+    };
+    return n("div", {
+      class: "k-filter-toolbar"
+    }, [n(x, {
+      keyboardNavigation: !1,
+      ariaLabel: e.ariaLabel ? e.ariaLabel : void 0
+    }, {
+      default: () => [n(f, {
+        class: "k-filter-field"
+      }, {
+        default: () => [n(c, {
+          class: "k-filter-dropdown",
+          dataItems: o,
+          textField: "label",
+          value: o.find((i) => i.name === e.field),
+          onChange: this.onFieldChange,
+          ariaLabel: r.toLanguageString(g, p[g])
+        }, null)]
+      }), n(f, {
+        class: "k-filter-operator"
+      }, {
+        default: () => [n(c, {
+          dataItems: l,
+          textField: "text",
+          value: l.find((i) => i.operator === e.operator),
+          onChange: this.onOperatorChange,
+          ariaLabel: r.toLanguageString(h, p[h])
+        }, null)]
+      }), n(f, {
+        class: "k-filter-value"
+      }, {
+        default: () => [t && s.call(this, t.filter, t.filterRender)]
+      }), n(C, {
+        title: r.toLanguageString(u, p[u]),
+        icon: "x",
+        svgIcon: k,
+        fillMode: "flat",
+        type: "button",
+        class: "k-toolbar-button",
+        onClick: this.onFilterRemove
+      }, null)]
+    })]);
+  },
+  methods: {
+    onFieldChange(o) {
+      const e = o.value.name, t = this.$props.fields.find((s) => s.name === e), r = this.$props.filter, l = t && !t.operators.some((s) => s.operator === r.operator) ? t.operators[0].operator : r.operator, a = {
+        field: e,
+        operator: l
+      };
+      d(l) || (a.value = I(l) ? "" : null), this.triggerOnFilterChange(r, a, o);
+    },
+    onOperatorChange(o) {
+      const e = o.value.operator, t = this.$props.filter;
+      let r;
+      if (d(e)) {
+        let {
+          value: l,
+          ...a
+        } = t;
+        r = {
+          ...a,
+          operator: e
+        };
+      } else
+        r = {
+          ...t,
+          operator: e
+        };
+      this.triggerOnFilterChange(t, r, o);
+    },
+    onInputChange(o) {
+      const e = this.$props.filter;
+      let t = o.nextFilter;
+      if (d(t.operator)) {
+        const r = this.$props.fields.find((l) => l.name === t.field);
+        t = {
+          ...t,
+          operator: r && r.operators[0].operator || t.operator
+        };
+      }
+      this.triggerOnFilterChange(e, t, o);
+    },
+    triggerOnFilterChange(o, e, t) {
+      const r = {
+        prevFilter: o,
+        nextFilter: e,
+        event: t.event,
+        target: this
+      };
+      this.$emit("change", r);
+    },
+    onFilterRemove(o) {
+      const e = {
+        filter: this.$props.filter,
+        event: o.event,
+        target: this
+      };
+      this.$emit("remove", e);
+    }
+  }
+});
+export {
+  K as Expression
+};

package/filter/Filter.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),a=require("./GroupFilters.js"),n=require("./GroupToolbar.js"),l=require("@progress/kendo-vue-common"),u=require("../package-metadata.js"),s=require("@progress/kendo-vue-intl"),o=require("../messages/main.js"),d=r.defineComponent({name:"KendoFilter",emits:{change:null,changemodel:null,"update:modelValue":null},model:{event:"changemodel"},props:{fields:{type:Array,required:!0},modelValue:{type:Object,default:void 0},value:Object,defaultGroupFilter:Object,upperToolbarAriaLabel:{type:String,default:void 0}},inject:{kendoLocalizationService:{default:null}},created(){l.validatePackage(u.packageMetadata)},computed:{computedValue(){let e;return this.$props.value!==void 0?e=this.$props.value:this.$props.modelValue!==void 0&&(e=this.$props.modelValue),e}},render(){const e=s.provideLocalizationService(this),t=this.$props.fields.map(function(i){return{...i,filterRender:l.templateRendering.call(this,i.filterRender,l.getListeners.call(this))}},this);return r.createVNode("div",{class:"k-filter"},[r.createVNode("ul",{class:"k-filter-container",role:"tree","aria-label":e.toLanguageString(o.filterAriaLabel,o.messages[o.filterAriaLabel])},[r.createVNode("li",{class:"k-filter-group-main",role:"treeitem"},[r.createVNode(n.GroupToolbar,{"aria-label":this.$props.upperToolbarAriaLabel,filter:this.computedValue,fields:t,onChange:this.onFilterChange,onRemove:this.onGroupRemove,defaultGroupFilter:this.$props.defaultGroupFilter||{logic:"and",filters:[]}},null),r.createVNode(a.GroupFilter,{filter:this.computedValue,fields:t,onChange:this.onFilterChange,onRemove:this.onGroupRemove,defaultGroupFilter:this.$props.defaultGroupFilter||{logic:"and",filters:[]}},null)])])])},methods:{onFilterChange(e){const t={filter:e.nextFilter,event:e.event,target:this};this.$emit("changemodel",e.nextFilter),this.$emit("update:modelValue",e.nextFilter),this.$emit("change",t)},onGroupRemove(e){const t={...this.computedValue,filters:[]},i={filter:t,event:e.event,target:this};this.$emit("changemodel",t),this.$emit("update:modelValue",t),this.$emit("change",i)}}});exports.Filter=d;

package/filter/Filter.mjs

@@ -0,0 +1,116 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as o, createVNode as i } from "vue";
+import { GroupFilter as a } from "./GroupFilters.mjs";
+import { GroupToolbar as n } from "./GroupToolbar.mjs";
+import { validatePackage as s, templateRendering as u, getListeners as p } from "@progress/kendo-vue-common";
+import { packageMetadata as d } from "../package-metadata.mjs";
+import { provideLocalizationService as m } from "@progress/kendo-vue-intl";
+import { filterAriaLabel as r, messages as c } from "../messages/main.mjs";
+const V = /* @__PURE__ */ o({
+  name: "KendoFilter",
+  emits: {
+    change: null,
+    changemodel: null,
+    "update:modelValue": null
+  },
+  model: {
+    event: "changemodel"
+  },
+  props: {
+    fields: {
+      type: Array,
+      required: !0
+    },
+    modelValue: {
+      type: Object,
+      default: void 0
+    },
+    value: Object,
+    defaultGroupFilter: Object,
+    upperToolbarAriaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created() {
+    s(d);
+  },
+  computed: {
+    computedValue() {
+      let e;
+      return this.$props.value !== void 0 ? e = this.$props.value : this.$props.modelValue !== void 0 && (e = this.$props.modelValue), e;
+    }
+  },
+  render() {
+    const e = m(this), t = this.$props.fields.map(function(l) {
+      return {
+        ...l,
+        filterRender: u.call(this, l.filterRender, p.call(this))
+      };
+    }, this);
+    return i("div", {
+      class: "k-filter"
+    }, [i("ul", {
+      class: "k-filter-container",
+      role: "tree",
+      "aria-label": e.toLanguageString(r, c[r])
+    }, [i("li", {
+      class: "k-filter-group-main",
+      role: "treeitem"
+    }, [i(n, {
+      "aria-label": this.$props.upperToolbarAriaLabel,
+      filter: this.computedValue,
+      fields: t,
+      onChange: this.onFilterChange,
+      onRemove: this.onGroupRemove,
+      defaultGroupFilter: this.$props.defaultGroupFilter || {
+        logic: "and",
+        filters: []
+      }
+    }, null), i(a, {
+      filter: this.computedValue,
+      fields: t,
+      onChange: this.onFilterChange,
+      onRemove: this.onGroupRemove,
+      defaultGroupFilter: this.$props.defaultGroupFilter || {
+        logic: "and",
+        filters: []
+      }
+    }, null)])])]);
+  },
+  methods: {
+    onFilterChange(e) {
+      const t = {
+        filter: e.nextFilter,
+        event: e.event,
+        target: this
+      };
+      this.$emit("changemodel", e.nextFilter), this.$emit("update:modelValue", e.nextFilter), this.$emit("change", t);
+    },
+    onGroupRemove(e) {
+      const t = {
+        ...this.computedValue,
+        filters: []
+      }, l = {
+        filter: t,
+        event: e.event,
+        target: this
+      };
+      this.$emit("changemodel", t), this.$emit("update:modelValue", t), this.$emit("change", l);
+    }
+  }
+});
+export {
+  V as Filter
+};

package/filter/GroupFilters.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),u=require("@progress/kendo-data-query"),p=require("./GroupToolbar.js"),c=require("@progress/kendo-vue-intl"),n=require("../messages/main.js"),h=require("./Expression.js"),s=o.defineComponent({name:"KendoFilterGroup",emits:{change:null,remove:null},props:{filter:{type:Object,required:!0},fields:{type:Array,required:!0},defaultGroupFilter:{type:Object,required:!0}},inject:{kendoLocalizationService:{default:null}},render(){const e=c.provideLocalizationService(this),{fields:t,filter:r,filterRender:l}=this.$props;return r.filters.length>0?o.createVNode("ul",{class:"k-filter-lines",role:"group"},[r.filters.map(function(i,a){return o.createVNode("li",{key:a,class:"k-filter-item",role:"treeitem"},[u.isCompositeFilterDescriptor(i)?[o.createVNode(p.GroupToolbar,{filter:i,fields:t,ariaLabel:e.toLanguageString(n.filterGroupFilterAriaLabel,n.messages[n.filterGroupFilterAriaLabel]),onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.$props.defaultGroupFilter},null),o.createVNode(s,{filter:i,fields:t,onChange:this.onChange,onRemove:this.onRemove,defaultGroupFilter:this.$props.defaultGroupFilter},null)]:o.createVNode(h.Expression,{filter:i,fields:t,onChange:this.onChange,onRemove:this.onRemove},null)])},this)]):null},methods:{replaceFilter(e,t){const r=this.$props.filter,l=r.filters.map(i=>i===e?t:i);return{...r,filters:l}},onChange(e){const r={nextFilter:this.replaceFilter(e.prevFilter,e.nextFilter),prevFilter:this.$props.filter,event:e.event,target:this};this.$emit("change",r)},onRemove(e){const t=this.$props.filter,r=t.filters.filter(i=>i!==e.filter),l={nextFilter:{...t,filters:r},prevFilter:t,event:e.event,target:this};this.$emit("change",l)}}});exports.GroupFilter=s;

package/filter/GroupFilters.mjs

@@ -0,0 +1,107 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { defineComponent as p, createVNode as o } from "vue";
+import { isCompositeFilterDescriptor as a } from "@progress/kendo-data-query";
+import { GroupToolbar as f } from "./GroupToolbar.mjs";
+import { provideLocalizationService as u } from "@progress/kendo-vue-intl";
+import { filterGroupFilterAriaLabel as n, messages as h } from "../messages/main.mjs";
+import { Expression as m } from "./Expression.mjs";
+const c = /* @__PURE__ */ p({
+  name: "KendoFilterGroup",
+  emits: {
+    change: null,
+    remove: null
+  },
+  props: {
+    filter: {
+      type: Object,
+      required: !0
+    },
+    fields: {
+      type: Array,
+      required: !0
+    },
+    defaultGroupFilter: {
+      type: Object,
+      required: !0
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  render() {
+    const e = u(this), {
+      fields: t,
+      filter: r,
+      filterRender: l
+    } = this.$props;
+    return r.filters.length > 0 ? o("ul", {
+      class: "k-filter-lines",
+      role: "group"
+    }, [r.filters.map(function(i, s) {
+      return o("li", {
+        key: s,
+        class: "k-filter-item",
+        role: "treeitem"
+      }, [a(i) ? [o(f, {
+        filter: i,
+        fields: t,
+        ariaLabel: e.toLanguageString(n, h[n]),
+        onChange: this.onChange,
+        onRemove: this.onRemove,
+        defaultGroupFilter: this.$props.defaultGroupFilter
+      }, null), o(c, {
+        filter: i,
+        fields: t,
+        onChange: this.onChange,
+        onRemove: this.onRemove,
+        defaultGroupFilter: this.$props.defaultGroupFilter
+      }, null)] : o(m, {
+        filter: i,
+        fields: t,
+        onChange: this.onChange,
+        onRemove: this.onRemove
+      }, null)]);
+    }, this)]) : null;
+  },
+  methods: {
+    replaceFilter(e, t) {
+      const r = this.$props.filter, l = r.filters.map((i) => i === e ? t : i);
+      return {
+        ...r,
+        filters: l
+      };
+    },
+    onChange(e) {
+      const r = {
+        nextFilter: this.replaceFilter(e.prevFilter, e.nextFilter),
+        prevFilter: this.$props.filter,
+        event: e.event,
+        target: this
+      };
+      this.$emit("change", r);
+    },
+    onRemove(e) {
+      const t = this.$props.filter, r = t.filters.filter((i) => i !== e.filter), l = {
+        nextFilter: {
+          ...t,
+          filters: r
+        },
+        prevFilter: t,
+        event: e.event,
+        target: this
+      };
+      this.$emit("change", l);
+    }
+  }
+});
+export {
+  c as GroupFilter
+};

package/filter/GroupToolbar.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),i=require("@progress/kendo-vue-buttons"),c=require("@progress/kendo-vue-intl"),u=require("./operators.js"),t=require("../messages/main.js"),s=require("@progress/kendo-svg-icons");function a(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!r.isVNode(e)}const d=r.defineComponent({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 e,o;const{filter:n}=this.$props,l=c.provideLocalizationService(this);return r.createVNode("div",{class:"k-filter-toolbar"},[r.createVNode(i.Toolbar,{keyboardNavigation:!1,"aria-label":this.$props.ariaLabel},{default:()=>[r.createVNode(i.ButtonGroup,{class:"k-toolbar-button-group"},{default:()=>[r.createVNode(i.Button,{togglable:!0,onClick:this.onLogicAnd,class:"k-toolbar-button",selected:n.logic==="and",type:"button"},a(e=l.toLanguageString(t.filterAndLogic,t.messages[t.filterAndLogic]))?e:{default:()=>[e]}),r.createVNode(i.Button,{togglable:!0,onClick:this.onLogicOr,class:"k-toolbar-button",selected:n.logic==="or",type:"button"},a(o=l.toLanguageString(t.filterOrLogic,t.messages[t.filterOrLogic]))?o:{default:()=>[o]})]}),r.createVNode(i.Button,{title:l.toLanguageString(t.filterAddExpression,t.messages[t.filterAddExpression]),icon:"filter-add-expression",svgIcon:s.filterAddExpressionIcon,type:"button",class:"k-toolbar-button",onClick:this.onAddExpression},null),r.createVNode(i.Button,{title:l.toLanguageString(t.filterAddGroup,t.messages[t.filterAddGroup]),icon:"filter-add-group",svgIcon:s.filterAddGroupIcon,type:"button",class:"k-toolbar-button",onClick:this.onAddGroup},null),r.createVNode(i.Button,{title:l.toLanguageString(t.filterClose,t.messages[t.filterClose]),icon:"x",svgIcon:s.xIcon,fillMode:"flat",type:"button",class:"k-toolbar-button",onClick:this.onGroupRemove},null)]})])},methods:{onGroupRemove(){this.$emit("remove",{filter:this.$props.filter})},onAddExpression(){const e=this.$props.filter,o=this.$props.fields[0],n={field:o.name,operator:o.operators[0].operator};n.value=u.stringOperator(n.operator)?"":null,this.$emit("change",{nextFilter:{...e,filters:[...e.filters,n]},prevFilter:e})},onAddGroup(){const e=this.$props.filter;this.$emit("change",{nextFilter:{...e,filters:[...e.filters,{...this.$props.defaultGroupFilter}]},prevFilter:e})},onLogicAnd(){this.changeLogic("and")},onLogicOr(){this.changeLogic("or")},changeLogic(e){const o=this.$props.filter;o.logic!==e&&this.$emit("change",{nextFilter:{...o,logic:e},prevFilter:o})}}});exports.GroupToolbar=d;