@progress/kendo-vue-grid 3.5.0 → 3.5.1-dev.202208100944

package/dist/esm/cells/GridEditCell.js

@@ -0,0 +1,312 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { getNestedValue } from './../utils.js';
+import { guid, getTemplate, noop } from '@progress/kendo-vue-common';
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { KEYBOARD_NAV_DATA_ID, KEYBOARD_NAV_DATA_LEVEL } from '@progress/kendo-vue-data-tools';
+/**
+ * @hidden
+ */
+
+var GridEditCellVue2 = {
+  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]
+  },
+  // @ts-ignore
+  emits: {
+    change: null,
+    cellkeydown: null,
+    edit: null,
+    add: null,
+    cancel: null,
+    save: null,
+    remove: null
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    },
+    getKeyboardNavigationAttributes: {
+      default: noop
+    }
+  },
+  data: function data() {
+    return {
+      inputId: guid()
+    };
+  },
+  methods: {
+    triggerKeydown: function triggerKeydown(e) {
+      this.$emit('cellkeydown', {
+        event: e,
+        dataItem: this.$props.dataItem,
+        field: this.$props.field
+      });
+    },
+    triggerEdit: function triggerEdit(dataItem) {
+      this.$emit('edit', dataItem);
+    },
+    triggerAdd: function triggerAdd(dataItem) {
+      this.$emit('add', dataItem);
+    },
+    triggerCancel: function triggerCancel(dataItem) {
+      this.$emit('cancel', dataItem);
+    },
+    triggerSave: function triggerSave(dataItem) {
+      this.$emit('save', dataItem);
+    },
+    triggerRemove: function triggerRemove(dataItem) {
+      this.$emit('remove', dataItem);
+    },
+    changeHandler: function changeHandler(event, value) {
+      if (!value) {
+        if (event.target.type === 'checkbox') {
+          value = event.target.checked;
+        } else {
+          value = event.target.valueAsDate ? event.target.valueAsDate : event.target.value;
+        }
+      }
+
+      this.$emit('change', {
+        dataItem: this.$props.dataItem,
+        field: this.$props.field,
+        event: event,
+        value: value
+      });
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var data = getNestedValue(this.$props.field, this.$props.dataItem);
+    var navAttrs = this.getKeyboardNavigationAttributes(this.$props.id);
+    var defaultRendering = null;
+
+    switch (this.$props.editor) {
+      case 'numeric':
+        defaultRendering = h("td", {
+          onKeydown: this.triggerKeydown,
+          on: this.v3 ? undefined : {
+            "keydown": this.triggerKeydown
+          },
+          colspan: this.$props.colSpan,
+          attrs: this.v3 ? undefined : {
+            colspan: this.$props.colSpan,
+            role: 'gridcell',
+            "aria-colindex": this.$props.ariaColumnIndex,
+            "aria-selected": this.$props.isSelected,
+            "data-grid-col-index": this.$props.columnIndex,
+            tabindex: navAttrs.tabIndex,
+            "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+            "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+          },
+          "class": this.$props.className,
+          role: 'gridcell',
+          "aria-colindex": this.$props.ariaColumnIndex,
+          "aria-selected": this.$props.isSelected,
+          "data-grid-col-index": this.$props.columnIndex,
+          tabindex: navAttrs.tabIndex,
+          "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+          "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+        }, [// @ts-ignore
+        h(NumericTextBox, {
+          style: {
+            width: '100%'
+          },
+          value: data === undefined ? null : data,
+          attrs: this.v3 ? undefined : {
+            value: data === undefined ? null : data
+          },
+          onChange: this.changeHandler,
+          on: this.v3 ? undefined : {
+            "change": this.changeHandler
+          }
+        })]);
+        break;
+
+      case 'date':
+        defaultRendering = h("td", {
+          onKeydown: this.triggerKeydown,
+          on: this.v3 ? undefined : {
+            "keydown": this.triggerKeydown
+          },
+          colspan: this.$props.colSpan,
+          attrs: this.v3 ? undefined : {
+            colspan: this.$props.colSpan,
+            role: 'gridcell',
+            "aria-colindex": this.$props.ariaColumnIndex,
+            "aria-selected": this.$props.isSelected,
+            "data-grid-col-index": this.$props.columnIndex,
+            tabindex: navAttrs.tabIndex,
+            "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+            "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+          },
+          "class": this.$props.className,
+          role: 'gridcell',
+          "aria-colindex": this.$props.ariaColumnIndex,
+          "aria-selected": this.$props.isSelected,
+          "data-grid-col-index": this.$props.columnIndex,
+          tabindex: navAttrs.tabIndex,
+          "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+          "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+        }, [// @ts-ignore
+        h(DatePicker, {
+          style: {
+            width: '100%'
+          },
+          value: data,
+          attrs: this.v3 ? undefined : {
+            value: data
+          },
+          onChange: this.changeHandler,
+          on: this.v3 ? undefined : {
+            "change": this.changeHandler
+          }
+        })]);
+        break;
+
+      case 'boolean':
+        defaultRendering = h("td", {
+          onKeydown: this.triggerKeydown,
+          on: this.v3 ? undefined : {
+            "keydown": this.triggerKeydown
+          },
+          colspan: this.$props.colSpan,
+          attrs: this.v3 ? undefined : {
+            colspan: this.$props.colSpan,
+            role: 'gridcell',
+            "aria-colindex": this.$props.ariaColumnIndex,
+            "aria-selected": this.$props.isSelected,
+            "data-grid-col-index": this.$props.columnIndex,
+            tabindex: navAttrs.tabIndex,
+            "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+            "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+          },
+          "class": this.$props.className,
+          role: 'gridcell',
+          "aria-colindex": this.$props.ariaColumnIndex,
+          "aria-selected": this.$props.isSelected,
+          "data-grid-col-index": this.$props.columnIndex,
+          tabindex: navAttrs.tabIndex,
+          "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+          "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+        }, [h("input", {
+          checked: this.v3 ? data || false : null,
+          domProps: this.v3 ? undefined : {
+            "checked": data || false
+          },
+          id: this.inputId,
+          attrs: this.v3 ? undefined : {
+            id: this.inputId,
+            type: "checkbox"
+          },
+          type: "checkbox",
+          "class": "k-checkbox k-checkbox-md k-rounded-md",
+          onChange: this.changeHandler,
+          on: this.v3 ? undefined : {
+            "change": this.changeHandler
+          }
+        }), h("label", {
+          "class": "k-checkbox-label",
+          "for": this.inputId,
+          attrs: this.v3 ? undefined : {
+            "for": this.inputId
+          }
+        })]);
+        break;
+
+      default:
+        defaultRendering = h("td", {
+          onKeydown: this.triggerKeydown,
+          on: this.v3 ? undefined : {
+            "keydown": this.triggerKeydown
+          },
+          colspan: this.$props.colSpan,
+          attrs: this.v3 ? undefined : {
+            colspan: this.$props.colSpan,
+            role: 'gridcell',
+            "aria-colindex": this.$props.ariaColumnIndex,
+            "aria-selected": this.$props.isSelected,
+            "data-grid-col-index": this.$props.columnIndex,
+            tabindex: navAttrs.tabIndex,
+            "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+            "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+          },
+          "class": this.$props.className,
+          role: 'gridcell',
+          "aria-colindex": this.$props.ariaColumnIndex,
+          "aria-selected": this.$props.isSelected,
+          "data-grid-col-index": this.$props.columnIndex,
+          tabindex: navAttrs.tabIndex,
+          "data-keyboardnavlevel": navAttrs[KEYBOARD_NAV_DATA_LEVEL],
+          "data-keyboardnavid": navAttrs[KEYBOARD_NAV_DATA_ID]
+        }, [h("span", {
+          "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+        }, [h("input", {
+          style: {
+            width: '100%'
+          },
+          "class": "k-input-inner",
+          value: this.v3 ? data !== null && data !== void 0 ? data : '' : null,
+          domProps: this.v3 ? undefined : {
+            "value": data !== null && data !== void 0 ? data : ''
+          },
+          onChange: this.changeHandler,
+          on: this.v3 ? undefined : {
+            "change": this.changeHandler
+          }
+        })])]);
+    }
+
+    return getTemplate.call(this, {
+      h: h,
+      template: this.$props.render,
+      defaultRendering: defaultRendering,
+      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
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridEditCell = GridEditCellVue2;
+export { GridEditCell, GridEditCellVue2 };

package/dist/esm/cells/GridFilterCell.d.ts

@@ -0,0 +1,26 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { GridFilterCellProps } from '../interfaces/GridFilterCellProps';
+/**
+ * @hidden
+ */
+export interface GridFilterCellMethods extends Vue2type {
+    triggerClick: () => void;
+    inputChange: (value: any, e: any) => void;
+    operatorChange: (operatorValue: any, e: any) => void;
+    boolDropdownChange: (value: any, e: any) => void;
+    clear: (e: any) => void;
+    triggerChange: (filter: any) => void;
+}
+/**
+ * @hidden
+ */
+declare let GridFilterCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridFilterCellMethods>, {}, RecordPropsDefinition<GridFilterCellProps>>;
+/**
+ * @hidden
+ */
+declare const GridFilterCell: DefineComponent<GridFilterCellProps, any, {}, {}, GridFilterCellMethods, {}, {}, {}, string, GridFilterCellProps, GridFilterCellProps, {}>;
+export { GridFilterCell, GridFilterCellVue2 };

package/dist/esm/cells/GridFilterCell.js

@@ -0,0 +1,259 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var inject = allVue.inject;
+import { Button } from '@progress/kendo-vue-buttons';
+import { messages, filterClearButton, filterChooseOperator } from '../messages.js';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+import { NumericTextBox } from '@progress/kendo-vue-inputs';
+import { DatePicker } from '@progress/kendo-vue-dateinputs';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { cellBoolDropdownChange, cellInputChange, cellOperatorChange } from '../filterCommon.js';
+import { templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var GridFilterCellVue2 = {
+  name: 'KendoGridFilterCell',
+  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]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    },
+    kendoIntlService: {
+      default: null
+    }
+  },
+  methods: {
+    inputChange: function inputChange(value, e) {
+      var filter = cellInputChange(value, e, this.$props);
+      this.triggerChange(filter);
+    },
+    operatorChange: function operatorChange(operatorValue, e) {
+      var filter = cellOperatorChange(operatorValue.value.operator, e, this.$props.value);
+      this.triggerChange(filter);
+    },
+    boolDropdownChange: function boolDropdownChange(value, e) {
+      var filter = cellBoolDropdownChange(value.value.operator, e);
+      this.triggerChange(filter);
+    },
+    clear: function clear(e) {
+      e.preventDefault();
+      this.triggerChange({
+        value: '',
+        operator: '',
+        event: e
+      });
+    },
+    triggerChange: function triggerChange(filter) {
+      filter.field = this.$props.field;
+      this.$emit('change', filter);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoIntlService = inject('kendoIntlService', {});
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoIntlService: kendoIntlService,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this = this;
+
+    var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var selectedOperator = this.$props.operators.find(function (item) {
+      return item.operator === _this.$props.operator;
+    }) || null;
+
+    var renderOperatorEditor = function renderOperatorEditor() {
+      if (this.$props.filterType === 'boolean') {
+        return;
+      }
+
+      return (// @ts-ignore
+        h(DropDownList, {
+          onChange: this.operatorChange,
+          on: this.v3 ? undefined : {
+            "change": this.operatorChange
+          },
+          value: selectedOperator,
+          attrs: this.v3 ? undefined : {
+            value: selectedOperator,
+            iconClassName: "k-i-filter k-icon",
+            "data-items": this.$props.operators,
+            textField: "text",
+            title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
+            popupSettings: {
+              width: ''
+            }
+          },
+          "class": "k-dropdown-operator",
+          iconClassName: "k-i-filter k-icon",
+          "data-items": this.$props.operators,
+          textField: "text",
+          title: localizationService.toLanguageString(filterChooseOperator, messages[filterChooseOperator]),
+          popupSettings: {
+            width: ''
+          }
+        })
+      );
+    };
+
+    var filterComponent = function filterComponent(filterType, value) {
+      var _this = this;
+
+      switch (filterType) {
+        case 'numeric':
+          return (// @ts-ignore
+            h(NumericTextBox, {
+              value: value,
+              attrs: this.v3 ? undefined : {
+                value: value,
+                title: this.$props.title
+              },
+              onChange: function onChange(e) {
+                _this.inputChange(e.value, e.event);
+              },
+              on: this.v3 ? undefined : {
+                "change": function onChange(e) {
+                  _this.inputChange(e.value, e.event);
+                }
+              },
+              title: this.$props.title
+            })
+          );
+
+        case 'date':
+          return (// @ts-ignore
+            h(DatePicker, {
+              value: value,
+              attrs: this.v3 ? undefined : {
+                value: value,
+                title: this.$props.title
+              },
+              onChange: function onChange(e) {
+                _this.inputChange(e.value, e);
+              },
+              on: this.v3 ? undefined : {
+                "change": function onChange(e) {
+                  _this.inputChange(e.value, e);
+                }
+              },
+              title: this.$props.title
+            })
+          );
+
+        case 'boolean':
+          var booleanValues = this.$props.booleanValues;
+          return (// @ts-ignore
+            h(DropDownList, {
+              onChange: this.boolDropdownChange,
+              on: this.v3 ? undefined : {
+                "change": this.boolDropdownChange
+              },
+              value: booleanValues.find(function (item) {
+                return item.operator === (value || '');
+              }),
+              attrs: this.v3 ? undefined : {
+                value: booleanValues.find(function (item) {
+                  return item.operator === (value || '');
+                }),
+                "data-items": booleanValues,
+                textField: "text",
+                title: this.$props.title
+              },
+              "data-items": booleanValues,
+              textField: "text",
+              title: this.$props.title
+            })
+          );
+
+        default:
+          return h("span", {
+            "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+          }, [h("input", {
+            "class": "k-input-inner",
+            value: this.v3 ? value || '' : null,
+            domProps: this.v3 ? undefined : {
+              "value": value || ''
+            },
+            onInput: function onInput(e) {
+              _this.inputChange(e.target.value, e);
+            },
+            on: this.v3 ? undefined : {
+              "input": function onInput(e) {
+                _this.inputChange(e.target.value, e);
+              }
+            },
+            title: this.$props.title,
+            attrs: this.v3 ? undefined : {
+              title: this.$props.title
+            }
+          })]);
+      }
+    };
+
+    var defaultRendering = h("div", {
+      "class": "k-filtercell"
+    }, [h("div", {
+      "class": "k-filtercell-wrapper"
+    }, [filterComponent.call(this, this.$props.filterType, this.$props.value), renderOperatorEditor.call(this), // @ts-ignore function children 
+    h(Button, {
+      type: "button",
+      attrs: this.v3 ? undefined : {
+        type: "button",
+        icon: 'filter-clear',
+        title: localizationService.toLanguageString(filterClearButton, messages[filterClearButton])
+      },
+      icon: 'filter-clear',
+      "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: localizationService.toLanguageString(filterClearButton, messages[filterClearButton]),
+      onClick: this.clear,
+      on: this.v3 ? undefined : {
+        "click": this.clear
+      }
+    })])]);
+    var gridListeners = this.$props.grid ? getListeners.call(this.$props.grid) : null;
+    var cellRenderFunction = templateRendering.call(this.$props.grid, this.$props.render, gridListeners);
+    return getTemplate.call(this, {
+      h: h,
+      template: cellRenderFunction,
+      defaultRendering: defaultRendering,
+      additionalProps: this.$props,
+      additionalListeners: {
+        change: this.triggerChange
+      }
+    });
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridFilterCell = GridFilterCellVue2;
+export { GridFilterCell, GridFilterCellVue2 };

package/dist/esm/cells/GridGroupCell.d.ts

@@ -0,0 +1,23 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+import { GridCellProps } from '../interfaces/GridCellProps';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+/**
+ * @hidden
+ */
+export interface GridGroupCellMethods extends Vue2type {
+    triggerKeydown: (e: any, expanded: boolean | undefined) => void;
+    clickHandler: (e: any, dataItem: any, expanded: boolean | undefined) => void;
+    getKeyboardNavigationAttributes: (id: string) => any;
+}
+/**
+ * @hidden
+ */
+declare let GridGroupCellVue2: ComponentOptions<Vue2type, DefaultData<{}>, DefaultMethods<GridGroupCellMethods>, {}, RecordPropsDefinition<GridCellProps>>;
+/**
+ * @hidden
+ */
+declare const GridGroupCell: DefineComponent<GridCellProps, any, {}, {}, GridGroupCellMethods, {}, {}, {}, string, GridCellProps, GridCellProps, {}>;
+export { GridGroupCell, GridGroupCellVue2 };