@progress/kendo-vue-data-tools/filter/Expression.mjs

TODO

/**
 * @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 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, {
      overflow: "none",
      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
};