@progress/kendo-vue-data-tools/cells/FilterCell.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 k, createVNode as i, h as F, inject as p } from "vue";
import { Button as z } from "@progress/kendo-vue-buttons";
import { columnMenuFilterClearButton as g, messages as n, filterTextFilterAriaLabel as c, filterEnumFilterDropdownAriaLabel as h, filterDateFilterAriaLabel as u, filterNumericFilterAriaLabel as d, filterDropDownOperatorAriaLabel as f, columnMenuFilterChooseOperator as m } from "../messages/main.mjs";
import { DropDownList as C } from "@progress/kendo-vue-dropdowns";
import { TextBox as D, NumericTextBox as w } from "@progress/kendo-vue-inputs";
import { DatePicker as x } from "@progress/kendo-vue-dateinputs";
import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
import { cellBoolDropdownChange as y, cellOperatorChange as A, cellInputChange as O } from "../filterCommon.mjs";
import { getListeners as T, templateRendering as B, getTemplate as N } from "@progress/kendo-vue-common";
import { filterClearIcon as j, filterIcon as R } from "@progress/kendo-svg-icons";
const U = /* @__PURE__ */ k({
  name: "KendoFilterCell",
  inheritAttrs: !1,
  emits: {
    change: null
  },
  props: {
    id: String,
    grid: Object,
    field: String,
    filterType: String,
    colSpan: Number,
    title: String,
    value: [String, Number, Boolean, Date],
    operator: [String, Function],
    operators: Array,
    booleanValues: Array,
    onChange: Function,
    render: [String, Function, Object],
    ariaLabel: String,
    size: String
  },
  inject: {
    kendoLocalizationService: {
      default: null
    },
    kendoIntlService: {
      default: null
    }
  },
  methods: {
    inputChange(e, t) {
      const o = O(e, t, this.$props);
      this.triggerChange(o);
    },
    operatorChange(e, t) {
      const o = A(e.value.operator, t, this.$props.value);
      this.triggerChange(o);
    },
    boolDropdownChange(e, t) {
      const o = y(e.value.operator, t);
      this.triggerChange(o);
    },
    clear(e) {
      e.preventDefault(), this.triggerChange({
        value: "",
        operator: "",
        event: e
      });
    },
    triggerChange(e) {
      e.field = this.$props.field, this.$emit("change", e);
    }
  },
  setup() {
    const e = p("kendoIntlService", {}), t = p("kendoLocalizationService", {});
    return {
      kendoIntlService: e,
      kendoLocalizationService: t
    };
  },
  render() {
    const {
      size: e
    } = this.$props, t = I(this), o = this.$props.operators.find((l) => l.operator === this.$props.operator) || null, b = function() {
      if (this.$props.filterType !== "boolean")
        return i(C, {
          onChange: this.operatorChange,
          value: o,
          size: e,
          class: "k-dropdown-operator",
          icon: "filter",
          svgIcon: R,
          iconClassName: "k-button-icon",
          "data-items": this.$props.operators,
          textField: "text",
          title: t.toLanguageString(m, n[m]),
          popupSettings: {
            width: "",
            anchor: ""
          },
          "aria-label": this.ariaLabel || t.toLanguageString(f, n[f])
        }, null);
    }, v = function(l, a) {
      let s;
      switch (l) {
        case "numeric":
          return i(w, {
            size: e,
            value: a,
            onChange: (r) => {
              this.inputChange(r.value, r.event);
            },
            title: this.$props.title,
            "aria-label": this.ariaLabel || t.toLanguageString(d, n[d])
          }, null);
        case "date":
          return i(x, {
            size: e,
            value: a,
            onChange: (r) => {
              this.inputChange(r.value, r);
            },
            title: this.$props.title,
            "aria-label": this.ariaLabel || t.toLanguageString(u, n[u])
          }, null);
        case "boolean":
          return s = this.$props.booleanValues, i(C, {
            onChange: this.boolDropdownChange,
            size: e,
            value: s.find((r) => r.operator === (a !== null ? a : "")),
            "data-items": s,
            textField: "text",
            title: this.$props.title,
            "aria-label": this.ariaLabel || t.toLanguageString(h, n[h])
          }, null);
        default:
          return i(D, {
            size: e,
            value: a || "",
            onInput: (r) => {
              this.inputChange(r.target.value, r);
            },
            title: this.$props.title,
            "aria-label": this.ariaLabel || t.toLanguageString(c, n[c])
          }, null);
      }
    }, L = i("div", {
      class: "k-filtercell",
      style: this.$attrs.style
    }, [i("div", {
      class: "k-filtercell-wrapper"
    }, [v.call(this, this.$props.filterType, this.$props.value), i("div", {
      class: "k-filtercell-operator"
    }, [b.call(this), i(z, {
      size: e,
      type: "button",
      icon: "filter-clear",
      svgIcon: j,
      class: {
        /* button is always visible if there is either value or operator */
        "k-disabled": !(!(this.$props.value === null || this.$props.value === "") || this.$props.operator)
      },
      title: t.toLanguageString(g, n[g]),
      onClick: this.clear
    }, null)])])]), S = this.$props.grid ? T.call(this.$props.grid) : null, $ = B.call(this.$props.grid, this.$props.render, S);
    return N.call(this, {
      h: F,
      template: $,
      defaultRendering: L,
      additionalProps: this.$props,
      additionalListeners: {
        change: this.triggerChange
      }
    });
  }
});
export {
  U as FilterCell
};