@progress/kendo-vue-grid/cells/GridFilterCell.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as v, createVNode as i, createTextVNode as b, h as S, inject as c } from "vue";
import { Button as $ } from "@progress/kendo-vue-buttons";
import { filterClearButton as h, messages as u, filterChooseOperator as g } from "../messages/main.mjs";
import { DropDownList as d } from "@progress/kendo-vue-dropdowns";
import { TextBox as L, NumericTextBox as k } from "@progress/kendo-vue-inputs";
import { DatePicker as z } from "@progress/kendo-vue-dateinputs";
import { filterClearIcon as x, filterIcon as I } from "@progress/kendo-svg-icons";
import { provideLocalizationService as w } from "@progress/kendo-vue-intl";
import { cellBoolDropdownChange as y, cellOperatorChange as D, cellInputChange as F } from "../filterCommon.mjs";
import { getTemplate as T } from "@progress/kendo-vue-common";
const K = /* @__PURE__ */ v({
  name: "KendoGridFilterCell",
  inheritAttrs: !1,
  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 = F(e, t, this.$props);
      this.triggerChange(o);
    },
    operatorChange(e, t) {
      const o = D(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 = c("kendoIntlService", {}), t = c("kendoLocalizationService", {});
    return {
      kendoIntlService: e,
      kendoLocalizationService: t
    };
  },
  render() {
    const e = w(this), {
      size: t
    } = this.$props, o = this.$props.operators.find((n) => n.operator === this.$props.operator) || null, f = function() {
      if (this.$props.filterType !== "boolean")
        return i(d, {
          onChange: this.operatorChange,
          value: o,
          size: t,
          class: "k-dropdown-operator",
          icon: "filter",
          svgIcon: I,
          iconClassName: "filter k-button-icon",
          "data-items": this.$props.operators,
          textField: "text",
          title: e.toLanguageString(g, u[g]),
          popupSettings: {
            width: "",
            anchor: ""
          },
          ariaLabel: this.ariaLabel
        }, null);
    }, m = function(n, a) {
      let l;
      switch (n) {
        case "numeric":
          return i(k, {
            size: t,
            value: a,
            onChange: (r) => {
              this.inputChange(r.value, r.event);
            },
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        case "date":
          return i(z, {
            size: t,
            value: a,
            onChange: (r) => {
              this.inputChange(r.value, r);
            },
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        case "boolean":
          return l = this.$props.booleanValues, i(d, {
            onChange: this.boolDropdownChange,
            size: t,
            value: l.find((r) => r.operator === (a !== null ? a : "")),
            "data-items": l,
            textField: "text",
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        default:
          return i(L, {
            value: a || "",
            size: t,
            onInput: (r) => {
              this.inputChange(r.target.value, r);
            },
            title: this.$props.title,
            "aria-label": this.ariaLabel
          }, null);
      }
    }, s = {
      class: "k-filtercell",
      style: this.$attrs.style
    }, p = i("div", {
      class: "k-filtercell-wrapper"
    }, [m.call(this, this.$props.filterType, this.$props.value), i("div", {
      class: "k-filtercell-operator"
    }, [f.call(this), b(" "), i($, {
      type: "button",
      size: t,
      icon: "filter-clear",
      svgIcon: x,
      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: e.toLanguageString(h, u[h]),
      onClick: this.clear
    }, null)])]), C = i("div", s, [p]);
    return T.call(this, {
      h: S,
      template: this.$props.render,
      defaultRendering: C,
      additionalProps: {
        ...this.$props,
        tdProps: s
      },
      additionalListeners: {
        change: this.triggerChange
      },
      defaultSlots: p
    });
  }
});
export {
  K as GridFilterCell
};