@progress/kendo-vue-data-tools 3.5.1 → 3.5.2-dev.202209020458

package/dist/es/columnmenu/ColumnMenuFilter.js

@@ -0,0 +1,1079 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+};
+
+var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}; // @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 { templateRendering, hasListener, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { isCompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { ColumnMenuItem } from './ColumnMenuItem';
+import { ColumnMenuItemGroup } from './ColumnMenuItemGroup';
+import { ColumnMenuItemContent } from './ColumnMenuItemContent';
+import { Button } from '@progress/kendo-vue-buttons';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { operatorMap, getDefaultOperator, filterLogicList, defaultHideSecondFilter, booleanFilterValues, getFilterType, operators } from '../filterCommon';
+import { messages, columnMenuFilterClearButton, columnMenuFilterSubmitButton, columnMenuFilterTitle } from '../messages/main';
+import { ColumnMenuFilterCell } from './ColumnMenuFilterCell';
+import { ColumnMenuFilterOperators } from './ColumnMenuFilterOperators';
+import { DropDownList } from '@progress/kendo-vue-dropdowns';
+/**
+ * @hidden
+ */
+
+export var rootFilterOrDefault = function rootFilterOrDefault(rootFilter) {
+  return rootFilter || {
+    filters: [],
+    logic: 'and'
+  };
+}; // tslint:disable:max-line-length
+
+/**
+ * Can be used to check if filtering is applied to a specific field ([see example]({% slug column_menu_grid %}#toc-styling-the-column-menu-icon)). Useful for creating active filter indicators.
+ */
+// tslint:enable:max-line-length
+
+export var filterGroupByField = function filterGroupByField(field, filter) {
+  var rootFilter = rootFilterOrDefault(filter);
+  var compositeFilters = rootFilter.filters.filter(function (f) {
+    if (isCompositeFilterDescriptor(f)) {
+      return f.filters && f.filters.length && f.filters.length <= 2 && !f.filters.find(function (nf) {
+        return isCompositeFilterDescriptor(nf) || nf.field !== field;
+      });
+    }
+
+    return false;
+  });
+  return compositeFilters[0] || null;
+};
+/**
+ * @hidden
+ */
+
+var ColumnMenuFilterVue2 = {
+  name: 'KendoColumnMenuFilter',
+  props: {
+    column: Object,
+    filter: Object,
+    expanded: {
+      type: Boolean,
+      default: undefined
+    },
+    filterable: Boolean,
+    filterOperators: {
+      type: Object,
+      default: function _default() {
+        return operators;
+      }
+    },
+    hideSecondFilter: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    filterUI: [String, Function, Object]
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  data: function data() {
+    return {
+      currentExpanded: false,
+      filterGroup: null
+    };
+  },
+  created: function created() {
+    var _this = this;
+
+    var filterGroup;
+
+    if (this.$props.column && this.$props.column.field) {
+      var filterType = getFilterType(this.$props.column.filter);
+      var defaultOperator = getDefaultOperator(this.$props.filterOperators, filterType);
+      filterGroup = filterGroupByField(this.$props.column.field, this.$props.filter);
+      filterGroup = filterGroup ? __assign(__assign({}, filterGroup), {
+        filters: filterGroup.filters.map(function (f) {
+          return __assign({}, f);
+        })
+      }) : {
+        logic: 'and',
+        filters: [{
+          field: this.$props.column.field,
+          operator: defaultOperator
+        }, {
+          field: this.$props.column.field,
+          operator: defaultOperator
+        }]
+      };
+
+      if (filterGroup.filters.filter(function (x) {
+        return x.field === _this.$props.column.field;
+      }).length === 1) {
+        filterGroup.filters.splice(1, 0, {
+          field: this.$props.column.field,
+          operator: defaultOperator
+        });
+      }
+    }
+
+    this.currentExpanded = this.$props.expanded || false;
+    this.filterGroup = filterGroup;
+  },
+  methods: {
+    removeGroup: function removeGroup(group, rootFilter) {
+      var filters = __spreadArray([], rootFilter.filters, true);
+
+      var groupIndex = filters.findIndex(function (f) {
+        return f === group;
+      });
+
+      if (groupIndex > -1) {
+        filters.splice(groupIndex, 1);
+      }
+
+      return __assign(__assign({}, rootFilter), {
+        filters: filters
+      });
+    },
+    insertGroup: function insertGroup(group, rootFilter) {
+      return __assign(__assign({}, rootFilter), {
+        filters: __spreadArray([group], rootFilter.filters, true)
+      });
+    },
+    isControlled: function isControlled() {
+      return this.$props.expanded !== undefined;
+    },
+    onFilterExpand: function onFilterExpand() {
+      var isControlled = this.isControlled();
+      var nextValue = !(isControlled ? this.$props.expanded : this.currentExpanded);
+      this.$emit('expandchange', nextValue);
+
+      if (!isControlled) {
+        this.currentExpanded = nextValue;
+      }
+    },
+    filterChangeHandler: function filterChangeHandler(e, filterIndex) {
+      this.filterChange(filterIndex || 0, e);
+    },
+    firstFilterChange: function firstFilterChange(e) {
+      this.filterChange(0, e);
+    },
+    secondFilterChange: function secondFilterChange(e) {
+      this.filterChange(1, e);
+    },
+    filterChange: function filterChange(filterIndex, e) {
+      var filters = this.filterGroup.filters.map(function (f, i) {
+        if (i === filterIndex) {
+          return __assign(__assign({}, f), {
+            value: e.value,
+            operator: e.operator
+          });
+        }
+
+        return f;
+      });
+      this.filterGroup = __assign(__assign({}, this.filterGroup), {
+        filters: filters
+      });
+    },
+    logicChange: function logicChange(e) {
+      this.filterGroup = __assign(__assign({}, this.filterGroup), {
+        logic: e.target.value.operator
+      });
+    },
+    clear: function clear(e) {
+      e.preventDefault();
+
+      if (!hasListener.call(this, 'filterchange')) {
+        return;
+      }
+
+      var field = this.$props.column.field;
+      var rootFilter = rootFilterOrDefault(this.$props.filter);
+      var filterGroup = filterGroupByField(field, this.$props.filter);
+      var rootFilters = rootFilter.filters.filter(function (f) {
+        return f !== filterGroup;
+      });
+
+      if (!rootFilters.length) {
+        this.$emit('filterchange', null, {
+          event: e,
+          field: this.$props.column.field
+        });
+      } else {
+        this.$emit('filterchange', __assign(__assign({}, rootFilter), {
+          filters: rootFilters
+        }), {
+          event: e,
+          field: this.$props.column.field
+        });
+      }
+
+      this.$emit('closemenu');
+    },
+    currentFilterGroup: function currentFilterGroup() {
+      return __assign(__assign({}, this.filterGroup), {
+        filters: this.filterGroup.filters.filter(function (nf) {
+          return nf.value !== undefined && nf.value !== null && nf.value !== '' || nf.value === null && nf.operator;
+        })
+      });
+    },
+    submit: function submit(e) {
+      e.preventDefault();
+
+      if (!hasListener.call(this, 'filterchange')) {
+        return;
+      }
+
+      var field = this.$props.column.field;
+      var rootFilter = rootFilterOrDefault(this.$props.filter);
+      var filterGroup = filterGroupByField(field, this.$props.filter);
+      var currentFilterGroup = this.currentFilterGroup();
+      var updatedFilter = null;
+
+      if (filterGroup && currentFilterGroup.filters.length > 0) {
+        var rootFilters = rootFilter.filters.map(function (f) {
+          if (f === filterGroup) {
+            return currentFilterGroup;
+          }
+
+          return f;
+        });
+        updatedFilter = __assign(__assign({}, rootFilter), {
+          filters: rootFilters
+        });
+      } else if (currentFilterGroup.filters.length === 0) {
+        var rootFilters = rootFilter.filters.filter(function (f) {
+          return f !== filterGroup;
+        });
+
+        if (rootFilters.length) {
+          updatedFilter = __assign(__assign({}, rootFilter), {
+            filters: rootFilters
+          });
+        }
+      } else {
+        updatedFilter = __assign(__assign({}, rootFilter), {
+          filters: __spreadArray(__spreadArray([], rootFilter.filters, true), [currentFilterGroup], false)
+        });
+      }
+
+      this.$emit('filterchange', updatedFilter, {
+        event: e,
+        field: this.$props.column.field
+      });
+      this.$emit('closemenu');
+    },
+    handleFocus: function handleFocus(e) {
+      this.$emit('filterfocus', e);
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var _a = this.$props,
+        column = _a.column,
+        filterUI = _a.filterUI,
+        hideSecondFilter = _a.hideSecondFilter,
+        filterOperators = _a.filterOperators;
+
+    if (!column || !column.field) {
+      return h("div");
+    }
+
+    var filterType = column.filter || 'text';
+    var currentHideSecondFilter = hideSecondFilter !== undefined ? hideSecondFilter : defaultHideSecondFilter[filterType];
+    var localizationService = provideLocalizationService(this);
+    var filters = this.filterGroup.filters;
+    var currentOperators = operatorMap(filterOperators[filterType], localizationService);
+    var booleanValues = operatorMap(booleanFilterValues, localizationService);
+    var firstFilterCellProps = {
+      field: column.field,
+      value: filters[0].value,
+      operator: filters[0].operator,
+      operators: currentOperators,
+      booleanValues: booleanValues,
+      filterType: filterType
+    };
+    var secondFilterCellProps = {
+      field: column.field,
+      value: filters[1].value,
+      operator: filters[1].operator,
+      operators: currentOperators,
+      booleanValues: booleanValues,
+      filterType: filterType
+    };
+    var filterLogic = this.filterGroup.logic;
+    var logicData = operatorMap(filterLogicList, localizationService);
+    var logicProps = {
+      value: logicData.find(function (item) {
+        return item.operator === (filterLogic === null ? '' : filterLogic);
+      }),
+      data: logicData
+    };
+    var isFilterValid = this.currentFilterGroup().filters.length !== 0;
+    var expandState = this.isControlled() ? this.$props.expanded : this.currentExpanded;
+    var firstField = firstFilterCellProps.field,
+        firstValue = firstFilterCellProps.value,
+        firstOperator = firstFilterCellProps.operator,
+        firstBooleanValues = firstFilterCellProps.booleanValues,
+        firstFilterType = firstFilterCellProps.filterType,
+        secondField = secondFilterCellProps.field,
+        secondValue = secondFilterCellProps.value,
+        secondOperator = secondFilterCellProps.operator,
+        secondBooleanValues = secondFilterCellProps.booleanValues,
+        secondFilterType = secondFilterCellProps.filterType;
+    var filterUIRender = filterUI && templateRendering.call(this, filterUI, getListeners.call(this));
+    var render = getTemplate.call(this, {
+      h: h,
+      template: filterUIRender,
+      defaultRendering: undefined,
+      additionalProps: this.$props,
+      additionalListeners: {
+        change: this.filterChangeHandler,
+        logicchange: this.logicChange
+      }
+    });
+    return (// @ts-ignore function children
+      h(ColumnMenuItemGroup, this.v3 ? function () {
+        return [// @ts-ignore
+        h(ColumnMenuItem, {
+          title: localizationService.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]),
+          attrs: _this2.v3 ? undefined : {
+            title: localizationService.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]),
+            iconClass: 'k-i-filter'
+          },
+          iconClass: 'k-i-filter',
+          onMenuitemclick: _this2.onFilterExpand,
+          on: _this2.v3 ? undefined : {
+            "menuitemclick": _this2.onFilterExpand
+          }
+        }), // @ts-ignore function children
+        h(ColumnMenuItemContent, {
+          show: !!expandState,
+          attrs: _this2.v3 ? undefined : {
+            show: !!expandState
+          }
+        }, _this2.v3 ? function () {
+          return [h("div", {
+            "class": 'kendo-grid-filter-menu-container'
+          }, [h("form", {
+            "class": 'k-filter-menu k-group k-reset k-border-up',
+            onSubmit: _this2.submit,
+            on: _this2.v3 ? undefined : {
+              "submit": _this2.submit,
+              "reset": _this2.clear
+            },
+            onReset: _this2.clear
+          }, [h("div", {
+            "class": 'k-filter-menu-container'
+          }, [// @ts-ignore
+          !filterUI && [h(ColumnMenuFilterOperators, {
+            operator: firstOperator,
+            attrs: _this2.v3 ? undefined : {
+              operator: firstOperator,
+              filterType: firstFilterType,
+              operators: currentOperators
+            },
+            filterType: firstFilterType,
+            onChange: function onChange(e) {
+              _this.filterChangeHandler(e, 0);
+            },
+            on: _this2.v3 ? undefined : {
+              "change": function onChange(e) {
+                _this.filterChangeHandler(e, 0);
+              }
+            },
+            operators: currentOperators
+          }), h(ColumnMenuFilterCell, {
+            field: firstField,
+            attrs: _this2.v3 ? undefined : {
+              field: firstField,
+              value: firstValue,
+              operator: firstOperator,
+              booleanValues: firstBooleanValues,
+              filterType: firstFilterType,
+              operators: currentOperators
+            },
+            value: firstValue,
+            operator: firstOperator,
+            booleanValues: firstBooleanValues,
+            filterType: firstFilterType,
+            onFiltercellfocus: _this2.handleFocus,
+            on: _this2.v3 ? undefined : {
+              "filtercellfocus": _this2.handleFocus,
+              "change": function change(e) {
+                _this.filterChangeHandler(e, 0);
+              }
+            },
+            onChange: function change(e) {
+              _this.filterChangeHandler(e, 0);
+            },
+            operators: currentOperators
+          })], !hideSecondFilter && !filterUI && [// @ts-ignore
+          h(DropDownList, {
+            onChange: _this2.logicChange,
+            on: _this2.v3 ? undefined : {
+              "change": _this2.logicChange
+            },
+            "class": "k-filter-and",
+            "data-items": logicProps.data,
+            attrs: _this2.v3 ? undefined : {
+              "data-items": logicProps.data,
+              value: logicProps.value,
+              textField: "text"
+            },
+            value: logicProps.value,
+            textField: "text"
+          }), // @ts-ignore
+          h(ColumnMenuFilterOperators, {
+            operator: secondOperator,
+            attrs: _this2.v3 ? undefined : {
+              operator: secondOperator,
+              filterType: secondFilterType,
+              operators: currentOperators
+            },
+            filterType: secondFilterType,
+            onChange: function onChange(e) {
+              _this.filterChangeHandler(e, 1);
+            },
+            on: _this2.v3 ? undefined : {
+              "change": function onChange(e) {
+                _this.filterChangeHandler(e, 1);
+              }
+            },
+            operators: currentOperators
+          }), // @ts-ignore
+          h(ColumnMenuFilterCell, {
+            field: secondField,
+            attrs: _this2.v3 ? undefined : {
+              field: secondField,
+              value: secondValue,
+              operator: secondOperator,
+              booleanValues: secondBooleanValues,
+              filterType: secondFilterType,
+              operators: currentOperators
+            },
+            value: secondValue,
+            operator: secondOperator,
+            booleanValues: secondBooleanValues,
+            filterType: secondFilterType,
+            onFiltercellfocus: _this2.handleFocus,
+            on: _this2.v3 ? undefined : {
+              "filtercellfocus": _this2.handleFocus,
+              "change": function change(e) {
+                _this.filterChangeHandler(e, 1);
+              }
+            },
+            onChange: function change(e) {
+              _this.filterChangeHandler(e, 1);
+            },
+            operators: currentOperators
+          })], filterUI && render, h("div", {
+            "class": 'k-columnmenu-actions'
+          }, [// @ts-ignore function children
+          h(Button, {
+            type: 'reset',
+            attrs: _this2.v3 ? undefined : {
+              type: 'reset'
+            }
+          }, _this2.v3 ? function () {
+            return [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])];
+          } : [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])]), // @ts-ignore function children
+          h(Button, {
+            themeColor: 'primary',
+            attrs: _this2.v3 ? undefined : {
+              themeColor: 'primary',
+              disabled: !isFilterValid
+            },
+            disabled: !isFilterValid
+          }, _this2.v3 ? function () {
+            return [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])];
+          } : [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])])])])])])];
+        } : [h("div", {
+          "class": 'kendo-grid-filter-menu-container'
+        }, [h("form", {
+          "class": 'k-filter-menu k-group k-reset k-border-up',
+          onSubmit: _this2.submit,
+          on: _this2.v3 ? undefined : {
+            "submit": _this2.submit,
+            "reset": _this2.clear
+          },
+          onReset: _this2.clear
+        }, [h("div", {
+          "class": 'k-filter-menu-container'
+        }, [!filterUI && [h(ColumnMenuFilterOperators, {
+          operator: firstOperator,
+          attrs: _this2.v3 ? undefined : {
+            operator: firstOperator,
+            filterType: firstFilterType,
+            operators: currentOperators
+          },
+          filterType: firstFilterType,
+          onChange: function onChange(e) {
+            _this.filterChangeHandler(e, 0);
+          },
+          on: _this2.v3 ? undefined : {
+            "change": function onChange(e) {
+              _this.filterChangeHandler(e, 0);
+            }
+          },
+          operators: currentOperators
+        }), h(ColumnMenuFilterCell, {
+          field: firstField,
+          attrs: _this2.v3 ? undefined : {
+            field: firstField,
+            value: firstValue,
+            operator: firstOperator,
+            booleanValues: firstBooleanValues,
+            filterType: firstFilterType,
+            operators: currentOperators
+          },
+          value: firstValue,
+          operator: firstOperator,
+          booleanValues: firstBooleanValues,
+          filterType: firstFilterType,
+          onFiltercellfocus: _this2.handleFocus,
+          on: _this2.v3 ? undefined : {
+            "filtercellfocus": _this2.handleFocus,
+            "change": function change(e) {
+              _this.filterChangeHandler(e, 0);
+            }
+          },
+          onChange: function change(e) {
+            _this.filterChangeHandler(e, 0);
+          },
+          operators: currentOperators
+        })], !hideSecondFilter && !filterUI && [h(DropDownList, {
+          onChange: _this2.logicChange,
+          on: _this2.v3 ? undefined : {
+            "change": _this2.logicChange
+          },
+          "class": "k-filter-and",
+          "data-items": logicProps.data,
+          attrs: _this2.v3 ? undefined : {
+            "data-items": logicProps.data,
+            value: logicProps.value,
+            textField: "text"
+          },
+          value: logicProps.value,
+          textField: "text"
+        }), h(ColumnMenuFilterOperators, {
+          operator: secondOperator,
+          attrs: _this2.v3 ? undefined : {
+            operator: secondOperator,
+            filterType: secondFilterType,
+            operators: currentOperators
+          },
+          filterType: secondFilterType,
+          onChange: function onChange(e) {
+            _this.filterChangeHandler(e, 1);
+          },
+          on: _this2.v3 ? undefined : {
+            "change": function onChange(e) {
+              _this.filterChangeHandler(e, 1);
+            }
+          },
+          operators: currentOperators
+        }), h(ColumnMenuFilterCell, {
+          field: secondField,
+          attrs: _this2.v3 ? undefined : {
+            field: secondField,
+            value: secondValue,
+            operator: secondOperator,
+            booleanValues: secondBooleanValues,
+            filterType: secondFilterType,
+            operators: currentOperators
+          },
+          value: secondValue,
+          operator: secondOperator,
+          booleanValues: secondBooleanValues,
+          filterType: secondFilterType,
+          onFiltercellfocus: _this2.handleFocus,
+          on: _this2.v3 ? undefined : {
+            "filtercellfocus": _this2.handleFocus,
+            "change": function change(e) {
+              _this.filterChangeHandler(e, 1);
+            }
+          },
+          onChange: function change(e) {
+            _this.filterChangeHandler(e, 1);
+          },
+          operators: currentOperators
+        })], filterUI && render, h("div", {
+          "class": 'k-columnmenu-actions'
+        }, [h(Button, {
+          type: 'reset',
+          attrs: _this2.v3 ? undefined : {
+            type: 'reset'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])];
+        } : [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])]), h(Button, {
+          themeColor: 'primary',
+          attrs: _this2.v3 ? undefined : {
+            themeColor: 'primary',
+            disabled: !isFilterValid
+          },
+          disabled: !isFilterValid
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])];
+        } : [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])])])])])])])];
+      } : [h(ColumnMenuItem, {
+        title: localizationService.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]),
+        attrs: _this2.v3 ? undefined : {
+          title: localizationService.toLanguageString(columnMenuFilterTitle, messages[columnMenuFilterTitle]),
+          iconClass: 'k-i-filter'
+        },
+        iconClass: 'k-i-filter',
+        onMenuitemclick: _this2.onFilterExpand,
+        on: _this2.v3 ? undefined : {
+          "menuitemclick": _this2.onFilterExpand
+        }
+      }), h(ColumnMenuItemContent, {
+        show: !!expandState,
+        attrs: _this2.v3 ? undefined : {
+          show: !!expandState
+        }
+      }, _this2.v3 ? function () {
+        return [h("div", {
+          "class": 'kendo-grid-filter-menu-container'
+        }, [h("form", {
+          "class": 'k-filter-menu k-group k-reset k-border-up',
+          onSubmit: _this2.submit,
+          on: _this2.v3 ? undefined : {
+            "submit": _this2.submit,
+            "reset": _this2.clear
+          },
+          onReset: _this2.clear
+        }, [h("div", {
+          "class": 'k-filter-menu-container'
+        }, [!filterUI && [h(ColumnMenuFilterOperators, {
+          operator: firstOperator,
+          attrs: _this2.v3 ? undefined : {
+            operator: firstOperator,
+            filterType: firstFilterType,
+            operators: currentOperators
+          },
+          filterType: firstFilterType,
+          onChange: function onChange(e) {
+            _this.filterChangeHandler(e, 0);
+          },
+          on: _this2.v3 ? undefined : {
+            "change": function onChange(e) {
+              _this.filterChangeHandler(e, 0);
+            }
+          },
+          operators: currentOperators
+        }), h(ColumnMenuFilterCell, {
+          field: firstField,
+          attrs: _this2.v3 ? undefined : {
+            field: firstField,
+            value: firstValue,
+            operator: firstOperator,
+            booleanValues: firstBooleanValues,
+            filterType: firstFilterType,
+            operators: currentOperators
+          },
+          value: firstValue,
+          operator: firstOperator,
+          booleanValues: firstBooleanValues,
+          filterType: firstFilterType,
+          onFiltercellfocus: _this2.handleFocus,
+          on: _this2.v3 ? undefined : {
+            "filtercellfocus": _this2.handleFocus,
+            "change": function change(e) {
+              _this.filterChangeHandler(e, 0);
+            }
+          },
+          onChange: function change(e) {
+            _this.filterChangeHandler(e, 0);
+          },
+          operators: currentOperators
+        })], !hideSecondFilter && !filterUI && [h(DropDownList, {
+          onChange: _this2.logicChange,
+          on: _this2.v3 ? undefined : {
+            "change": _this2.logicChange
+          },
+          "class": "k-filter-and",
+          "data-items": logicProps.data,
+          attrs: _this2.v3 ? undefined : {
+            "data-items": logicProps.data,
+            value: logicProps.value,
+            textField: "text"
+          },
+          value: logicProps.value,
+          textField: "text"
+        }), h(ColumnMenuFilterOperators, {
+          operator: secondOperator,
+          attrs: _this2.v3 ? undefined : {
+            operator: secondOperator,
+            filterType: secondFilterType,
+            operators: currentOperators
+          },
+          filterType: secondFilterType,
+          onChange: function onChange(e) {
+            _this.filterChangeHandler(e, 1);
+          },
+          on: _this2.v3 ? undefined : {
+            "change": function onChange(e) {
+              _this.filterChangeHandler(e, 1);
+            }
+          },
+          operators: currentOperators
+        }), h(ColumnMenuFilterCell, {
+          field: secondField,
+          attrs: _this2.v3 ? undefined : {
+            field: secondField,
+            value: secondValue,
+            operator: secondOperator,
+            booleanValues: secondBooleanValues,
+            filterType: secondFilterType,
+            operators: currentOperators
+          },
+          value: secondValue,
+          operator: secondOperator,
+          booleanValues: secondBooleanValues,
+          filterType: secondFilterType,
+          onFiltercellfocus: _this2.handleFocus,
+          on: _this2.v3 ? undefined : {
+            "filtercellfocus": _this2.handleFocus,
+            "change": function change(e) {
+              _this.filterChangeHandler(e, 1);
+            }
+          },
+          onChange: function change(e) {
+            _this.filterChangeHandler(e, 1);
+          },
+          operators: currentOperators
+        })], filterUI && render, h("div", {
+          "class": 'k-columnmenu-actions'
+        }, [h(Button, {
+          type: 'reset',
+          attrs: _this2.v3 ? undefined : {
+            type: 'reset'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])];
+        } : [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])]), h(Button, {
+          themeColor: 'primary',
+          attrs: _this2.v3 ? undefined : {
+            themeColor: 'primary',
+            disabled: !isFilterValid
+          },
+          disabled: !isFilterValid
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])];
+        } : [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])])])])])])];
+      } : [h("div", {
+        "class": 'kendo-grid-filter-menu-container'
+      }, [h("form", {
+        "class": 'k-filter-menu k-group k-reset k-border-up',
+        onSubmit: _this2.submit,
+        on: _this2.v3 ? undefined : {
+          "submit": _this2.submit,
+          "reset": _this2.clear
+        },
+        onReset: _this2.clear
+      }, [h("div", {
+        "class": 'k-filter-menu-container'
+      }, [!filterUI && [h(ColumnMenuFilterOperators, {
+        operator: firstOperator,
+        attrs: _this2.v3 ? undefined : {
+          operator: firstOperator,
+          filterType: firstFilterType,
+          operators: currentOperators
+        },
+        filterType: firstFilterType,
+        onChange: function onChange(e) {
+          _this.filterChangeHandler(e, 0);
+        },
+        on: _this2.v3 ? undefined : {
+          "change": function onChange(e) {
+            _this.filterChangeHandler(e, 0);
+          }
+        },
+        operators: currentOperators
+      }), h(ColumnMenuFilterCell, {
+        field: firstField,
+        attrs: _this2.v3 ? undefined : {
+          field: firstField,
+          value: firstValue,
+          operator: firstOperator,
+          booleanValues: firstBooleanValues,
+          filterType: firstFilterType,
+          operators: currentOperators
+        },
+        value: firstValue,
+        operator: firstOperator,
+        booleanValues: firstBooleanValues,
+        filterType: firstFilterType,
+        onFiltercellfocus: _this2.handleFocus,
+        on: _this2.v3 ? undefined : {
+          "filtercellfocus": _this2.handleFocus,
+          "change": function change(e) {
+            _this.filterChangeHandler(e, 0);
+          }
+        },
+        onChange: function change(e) {
+          _this.filterChangeHandler(e, 0);
+        },
+        operators: currentOperators
+      })], !hideSecondFilter && !filterUI && [h(DropDownList, {
+        onChange: _this2.logicChange,
+        on: _this2.v3 ? undefined : {
+          "change": _this2.logicChange
+        },
+        "class": "k-filter-and",
+        "data-items": logicProps.data,
+        attrs: _this2.v3 ? undefined : {
+          "data-items": logicProps.data,
+          value: logicProps.value,
+          textField: "text"
+        },
+        value: logicProps.value,
+        textField: "text"
+      }), h(ColumnMenuFilterOperators, {
+        operator: secondOperator,
+        attrs: _this2.v3 ? undefined : {
+          operator: secondOperator,
+          filterType: secondFilterType,
+          operators: currentOperators
+        },
+        filterType: secondFilterType,
+        onChange: function onChange(e) {
+          _this.filterChangeHandler(e, 1);
+        },
+        on: _this2.v3 ? undefined : {
+          "change": function onChange(e) {
+            _this.filterChangeHandler(e, 1);
+          }
+        },
+        operators: currentOperators
+      }), h(ColumnMenuFilterCell, {
+        field: secondField,
+        attrs: _this2.v3 ? undefined : {
+          field: secondField,
+          value: secondValue,
+          operator: secondOperator,
+          booleanValues: secondBooleanValues,
+          filterType: secondFilterType,
+          operators: currentOperators
+        },
+        value: secondValue,
+        operator: secondOperator,
+        booleanValues: secondBooleanValues,
+        filterType: secondFilterType,
+        onFiltercellfocus: _this2.handleFocus,
+        on: _this2.v3 ? undefined : {
+          "filtercellfocus": _this2.handleFocus,
+          "change": function change(e) {
+            _this.filterChangeHandler(e, 1);
+          }
+        },
+        onChange: function change(e) {
+          _this.filterChangeHandler(e, 1);
+        },
+        operators: currentOperators
+      })], filterUI && render, h("div", {
+        "class": 'k-columnmenu-actions'
+      }, [h(Button, {
+        type: 'reset',
+        attrs: _this2.v3 ? undefined : {
+          type: 'reset'
+        }
+      }, _this2.v3 ? function () {
+        return [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])];
+      } : [localizationService.toLanguageString(columnMenuFilterClearButton, messages[columnMenuFilterClearButton])]), h(Button, {
+        themeColor: 'primary',
+        attrs: _this2.v3 ? undefined : {
+          themeColor: 'primary',
+          disabled: !isFilterValid
+        },
+        disabled: !isFilterValid
+      }, _this2.v3 ? function () {
+        return [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])];
+      } : [localizationService.toLanguageString(columnMenuFilterSubmitButton, messages[columnMenuFilterSubmitButton])])])])])])])])
+    );
+  }
+};
+/**
+ * Represents the ColumnMenuFilter component.
+ *
+ * {% meta height:410 %}
+ *  ```html-preview
+ *  <div id="vueapp">
+ *     <Grid :style="{height: '280px'}"
+ *          :data-items="gridData"
+ *          :sortable="true"
+ *          :sort= "sort"
+ *          :filter="filter"
+ *          :expand-field="'Discontinued'"
+ *          @datastatechange="dataStateChange"
+ *          @expandchange="expandChange"
+ *          :columns="columns">
+ *       </Grid>
+ *  </div>
+ * ```
+ * ```js
+ * import { , ColumnMenuFilter } from '@progress/kendo-vue-grid';
+ * import { process } from '@progress/kendo-data-query';
+ *      const ColumnMenu = {
+ *        props: {
+ *            column: Object,
+ *            sortable: [Boolean, Object],
+ *            sort: {
+ *                type: Array
+ *            },
+ *            filter: Object,
+ *            filterable: Boolean
+ *        },
+ *        components: {
+ *            ColumnMenuFilter
+ *        },
+ *        template: `<div>
+ *            <ColumnMenuFilter
+ *                :column="column"
+ *                :filterable="filterable"
+ *                :filter="filter"
+ *                @closemenu ="closeMenu"
+ *                @expandchange = "expandChange"
+ *                @filterchange = "filterChange"
+ *            />
+ *        </div>`,
+ *        methods: {
+ *            expandChange () {
+ *                this.$emit('expandchange');
+ *            },
+ *            closeMenu () {
+ *                this.$emit('closemenu');
+ *            },
+ *            filterChange (newDescriptor, e) {
+ *                this.$emit('filterchange', newDescriptor, e);
+ *            }
+ *        }
+ *      };
+ *
+ *      Vue.component('Grid', Grid);
+ *      new Vue({
+ *          el: '#vueapp',
+ *          components: {
+ *
+ *          },
+ *          created: function() {
+ *             this.getData();
+ *          },
+ *          methods: {
+ *            getData: function () {
+ *                let dataState = {
+ *                    filter: this.filter,
+ *                    sort: this.sort
+ *                };
+ *                this.gridData = process([{
+ *                    "ProductID": 1,
+ *                    "ProductName": "Chai",
+ *                    "UnitsInStock": 39,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 20)
+ *                },{
+ *                    "ProductID": 2,
+ *                    "ProductName": "Chang",
+ *                    "UnitsInStock": 17,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 7, 12)
+ *                },{
+ *                    "ProductID": 3,
+ *                    "ProductName": "Aniseed Syrup",
+ *                    "UnitsInStock": 13,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 8, 26)
+ *                },{
+ *                    "ProductID": 4,
+ *                    "ProductName": "Chef Anton's Cajun Seasoning",
+ *                    "UnitsInStock": 53,
+ *                    "Discontinued": false,
+ *                    "FirstOrderedOn": new Date(1996, 9, 19)
+ *                }], dataState);
+ *            },
+ *            createAppState: function(dataState) {
+ *                this.sort = dataState.sort;
+ *                this.filter = dataState.filter;
+ *                this.getData();
+ *            },
+ *            dataStateChange: function (event) {
+ *                this.createAppState(event.data);
+ *            },
+ *            expandChange: function (event) {
+ *                 event.dataItem[event.target.$props.expandField] = event.value;
+ *                 //
+ *                 // In Vue 2 context, instead of the above line, inside the expandChange method we should have the following:
+ *                 //
+ *                 //   Vue.set(
+ *                 //     event.dataItem,
+ *                 //     event.target.$props.expandField,
+ *                 //     event.dataItem.expanded === undefined ? false : !event.dataItem.expanded
+ *                 //   );
+ *                 //
+ *            }
+ *          },
+ *          data: function () {
+ *              return {
+ *                 filter: null,
+ *                 sort: [],
+ *                  gridData: [],
+ *                  columns: [
+ *                      { field: 'ProductID'},
+ *                      { field: 'ProductName', title: 'Product Name' },
+ *                      { field: 'UnitsInStock', title: 'Units In Stock', columnMenu: ColumnMenu }
+ *                  ]
+ *              };
+ *          }
+ *       } );
+ * ```
+ *
+ * ### props <span class='code'>[ColumnMenuFilterProps]({% slug api_grid_gridcolumnmenufilterprops %})</span>
+ */
+
+var ColumnMenuFilter = ColumnMenuFilterVue2;
+export { ColumnMenuFilter, ColumnMenuFilterVue2 };