@progress/kendo-vue-grid/cells/GridEditCell.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 d, inject as s, createVNode as i, h as l } from "vue";
import { getNestedValue as o } from "../utils/main.mjs";
import { noop as c, guid as p, getTemplate as h } from "@progress/kendo-vue-common";
import { NumericTextBox as g } from "@progress/kendo-vue-inputs";
import { DatePicker as u } from "@progress/kendo-vue-dateinputs";
import { KEYBOARD_NAV_DATA_LEVEL as r, KEYBOARD_NAV_DATA_ID as n } from "@progress/kendo-vue-data-tools";
const v = /* @__PURE__ */ d({
  name: "GridEditCell",
  inheritAttrs: !1,
  props: {
    id: String,
    field: String,
    dataItem: Object,
    format: String,
    type: String,
    className: String,
    colSpan: Number,
    columnIndex: Number,
    columnsCount: Number,
    rowType: String,
    level: Number,
    expanded: Boolean,
    editor: String,
    isSelected: Boolean,
    ariaColumnIndex: Number,
    render: [String, Function, Object],
    isRtl: Boolean,
    readFormat: String,
    dataIndex: Number
  },
  emits: {
    change: null,
    cellkeydown: null,
    edit: null,
    add: null,
    cancel: null,
    save: null,
    remove: null
  },
  inject: {
    kendoIntlService: {
      default: null
    },
    getKeyboardNavigationAttributes: {
      default: c
    }
  },
  computed: {
    tdClass() {
      const {
        className: e
      } = this.$props;
      return {
        "k-table-td": !0,
        [e]: e
      };
    }
  },
  data() {
    return {
      inputId: p()
    };
  },
  methods: {
    triggerKeydown(e) {
      this.$emit("cellkeydown", {
        event: e,
        dataItem: this.$props.dataItem,
        field: this.$props.field
      });
    },
    triggerEdit(e) {
      this.$emit("edit", e);
    },
    triggerAdd(e) {
      this.$emit("add", e);
    },
    triggerCancel(e) {
      this.$emit("cancel", e);
    },
    triggerSave(e) {
      this.$emit("save", e);
    },
    triggerRemove(e) {
      this.$emit("remove", e);
    },
    changeHandler(e, t) {
      t || (e.target.type === "checkbox" ? t = e.target.checked : t = e.target.valueAsDate ? e.target.valueAsDate : e.target.value), this.$emit("change", {
        dataItem: this.$props.dataItem,
        field: this.$props.field,
        event: e,
        value: t
      });
    }
  },
  setup() {
    return {
      kendoIntlService: s("kendoIntlService", {})
    };
  },
  render() {
    const e = o(this.$props.field, this.$props.dataItem), t = this.getKeyboardNavigationAttributes(this.$props.id);
    let a = null;
    switch (this.$props.editor) {
      case "numeric":
        a = i("td", {
          style: this.$attrs.style,
          onKeydown: this.triggerKeydown,
          colspan: this.$props.colSpan,
          class: this.tdClass,
          role: "gridcell",
          "aria-colindex": this.$props.ariaColumnIndex,
          "aria-selected": this.$props.isSelected,
          "data-grid-col-index": this.$props.columnIndex,
          tabindex: t.tabIndex,
          "data-keyboardnavlevel": t[r],
          "data-keyboardnavid": t[n]
        }, [i(g, {
          style: {
            width: "100%"
          },
          value: e === void 0 ? null : e,
          onChange: this.changeHandler
        }, null)]);
        break;
      case "date":
        a = i("td", {
          style: this.$attrs.style,
          onKeydown: this.triggerKeydown,
          colspan: this.$props.colSpan,
          class: this.tdClass,
          role: "gridcell",
          "aria-colindex": this.$props.ariaColumnIndex,
          "aria-selected": this.$props.isSelected,
          "data-grid-col-index": this.$props.columnIndex,
          tabindex: t.tabIndex,
          "data-keyboardnavlevel": t[r],
          "data-keyboardnavid": t[n]
        }, [i(u, {
          style: {
            width: "100%"
          },
          value: e,
          onChange: this.changeHandler
        }, null)]);
        break;
      case "boolean":
        a = i("td", {
          style: this.$attrs.style,
          onKeydown: this.triggerKeydown,
          colspan: this.$props.colSpan,
          class: this.tdClass,
          role: "gridcell",
          "aria-colindex": this.$props.ariaColumnIndex,
          "aria-selected": this.$props.isSelected,
          "data-grid-col-index": this.$props.columnIndex,
          tabindex: t.tabIndex,
          "data-keyboardnavlevel": t[r],
          "data-keyboardnavid": t[n]
        }, [i("input", {
          checked: e || !1,
          id: this.inputId,
          type: "checkbox",
          class: "k-checkbox k-checkbox-md k-rounded-md",
          onChange: this.changeHandler
        }, null), i("label", {
          class: "k-checkbox-label",
          for: this.inputId
        }, null)]);
        break;
      default:
        a = i("td", {
          style: this.$attrs.style,
          onKeydown: this.triggerKeydown,
          colspan: this.$props.colSpan,
          class: this.tdClass,
          role: "gridcell",
          "aria-colindex": this.$props.ariaColumnIndex,
          "aria-selected": this.$props.isSelected,
          "data-grid-col-index": this.$props.columnIndex,
          tabindex: t.tabIndex,
          "data-keyboardnavlevel": t[r],
          "data-keyboardnavid": t[n]
        }, [i("span", {
          class: "k-textbox k-input k-input-md k-rounded-md k-input-solid"
        }, [i("input", {
          style: {
            width: "100%"
          },
          class: "k-input-inner",
          value: e != null ? e : "",
          onChange: this.changeHandler
        }, null)])]);
    }
    return h.call(this, {
      h: l,
      template: this.$props.render,
      defaultRendering: a,
      additionalProps: this.$props,
      additionalListeners: {
        change: this.changeHandler,
        keydown: this.triggerKeydown,
        edit: this.triggerEdit,
        add: this.triggerAdd,
        cancel: this.triggerCancel,
        save: this.triggerSave,
        remove: this.triggerRemove
      }
    });
  }
});
export {
  v as GridEditCell
};