@progress/kendo-vue-grid/cells/GridFilterCell.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 v, inject as s, createVNode as i, h as b } from "vue";
import { Button as $ } from "@progress/kendo-vue-buttons";
import { filterClearButton as p, messages as c, filterChooseOperator as h } from "../messages/main.mjs";
import { DropDownList as g } from "@progress/kendo-vue-dropdowns";
import { TextBox as S, NumericTextBox as L } from "@progress/kendo-vue-inputs";
import { DatePicker as k } from "@progress/kendo-vue-dateinputs";
import { filterClearIcon as z, filterIcon as x } from "@progress/kendo-svg-icons";
import { provideLocalizationService as I } from "@progress/kendo-vue-intl";
import { cellInputChange as w, cellOperatorChange as y, cellBoolDropdownChange as D } from "../filterCommon.mjs";
import { getListeners as F, templateRendering as B, getTemplate as O } from "@progress/kendo-vue-common";
const q = /* @__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 = w(e, t, this.$props);
      this.triggerChange(o);
    },
    operatorChange(e, t) {
      const o = y(e.value.operator, t, this.$props.value);
      this.triggerChange(o);
    },
    boolDropdownChange(e, t) {
      const o = D(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 = s("kendoIntlService", {}), t = s("kendoLocalizationService", {});
    return {
      kendoIntlService: e,
      kendoLocalizationService: t
    };
  },
  render() {
    const e = I(this), {
      size: t
    } = this.$props, o = this.$props.operators.find((a) => a.operator === this.$props.operator) || null, u = function() {
      if (this.$props.filterType !== "boolean")
        return i(g, {
          onChange: this.operatorChange,
          value: o,
          size: t,
          class: "k-dropdown-operator",
          icon: "filter",
          svgIcon: x,
          iconClassName: "filter k-button-icon",
          "data-items": this.$props.operators,
          textField: "text",
          title: e.toLanguageString(h, c[h]),
          popupSettings: {
            width: "",
            anchor: ""
          },
          ariaLabel: this.ariaLabel
        }, null);
    }, d = function(a, n) {
      let l;
      switch (a) {
        case "numeric":
          return i(L, {
            size: t,
            value: n,
            onChange: (r) => {
              this.inputChange(r.value, r.event);
            },
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        case "date":
          return i(k, {
            size: t,
            value: n,
            onChange: (r) => {
              this.inputChange(r.value, r);
            },
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        case "boolean":
          return l = this.$props.booleanValues, i(g, {
            onChange: this.boolDropdownChange,
            size: t,
            value: l.find((r) => r.operator === (n !== null ? n : "")),
            "data-items": l,
            textField: "text",
            title: this.$props.title,
            ariaLabel: this.ariaLabel
          }, null);
        default:
          return i(S, {
            value: n || "",
            size: t,
            onInput: (r) => {
              this.inputChange(r.target.value, r);
            },
            title: this.$props.title,
            "aria-label": this.ariaLabel
          }, null);
      }
    }, f = i("div", {
      class: "k-filtercell",
      style: this.$attrs.style
    }, [i("div", {
      class: "k-filtercell-wrapper"
    }, [d.call(this, this.$props.filterType, this.$props.value), i("div", {
      class: "k-filtercell-operator"
    }, [u.call(this), i($, {
      type: "button",
      size: t,
      icon: "filter-clear",
      svgIcon: z,
      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(p, c[p]),
      onClick: this.clear
    }, null)])])]), m = this.$props.grid ? F.call(this.$props.grid) : null, C = B.call(this.$props.grid, this.$props.render, m);
    return O.call(this, {
      h: b,
      template: C,
      defaultRendering: f,
      additionalProps: this.$props,
      additionalListeners: {
        change: this.triggerChange
      }
    });
  }
});
export {
  q as GridFilterCell
};