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

package/dist/npm/columnMenu/GridColumnMenuFilter.js

@@ -16,18 +16,14 @@ var __assign = undefined && undefined.__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var __spreadArrays = undefined && undefined.__spreadArrays || function () {
-  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
-    s += arguments[i].length;
-  }
-
-  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
-    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
-      r[k] = a[j];
+var __spreadArray = undefined && undefined.__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 r;
+  return to.concat(ar || Array.prototype.slice.call(from));
 };
 
 Object.defineProperty(exports, "__esModule", {
@@ -60,31 +56,36 @@ var filterCommon_1 = require("../filterCommon");
 
 var messages_1 = require("../messages");
 
-var GridColumnMenuFilterUI_1 = require("./GridColumnMenuFilterUI");
+var GridColumnMenuFilterCell_1 = require("./GridColumnMenuFilterCell");
+
+var GridColumnMenuFilterOperators_1 = require("./GridColumnMenuFilterOperators");
+
+var kendo_vue_dropdowns_1 = require("@progress/kendo-vue-dropdowns");
 /**
  * @hidden
  */
 
 
-exports.rootFilterOrDefault = function (rootFilter) {
+var rootFilterOrDefault = function rootFilterOrDefault(rootFilter) {
   return rootFilter || {
     filters: [],
     logic: 'and'
   };
-}; // tslint:disable:max-line-length
+};
+
+exports.rootFilterOrDefault = rootFilterOrDefault; // 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
 
-
-exports.filterGroupByField = function (field, filter) {
-  var rootFilter = exports.rootFilterOrDefault(filter);
+var filterGroupByField = function filterGroupByField(field, filter) {
+  var rootFilter = (0, exports.rootFilterOrDefault)(filter);
   var compositeFilters = rootFilter.filters.filter(function (f) {
-    if (kendo_data_query_1.isCompositeFilterDescriptor(f)) {
+    if ((0, kendo_data_query_1.isCompositeFilterDescriptor)(f)) {
       return f.filters && f.filters.length && f.filters.length <= 2 && !f.filters.find(function (nf) {
-        return kendo_data_query_1.isCompositeFilterDescriptor(nf) || nf.field !== field;
+        return (0, kendo_data_query_1.isCompositeFilterDescriptor)(nf) || nf.field !== field;
       });
     }
 
@@ -92,11 +93,12 @@ exports.filterGroupByField = function (field, filter) {
   });
   return compositeFilters[0] || null;
 };
+
+exports.filterGroupByField = filterGroupByField;
 /**
  * @hidden
  */
 
-
 var GridColumnMenuFilterVue2 = {
   name: 'KendoGridColumnMenuFilter',
   props: {
@@ -138,9 +140,9 @@ var GridColumnMenuFilterVue2 = {
     var filterGroup;
 
     if (this.$props.column && this.$props.column.field) {
-      var filterType = filterCommon_1.getFilterType(this.$props.column.filter);
-      var defaultOperator = filterCommon_1.getDefaultOperator(this.$props.filterOperators, filterType);
-      filterGroup = exports.filterGroupByField(this.$props.column.field, this.$props.filter);
+      var filterType = (0, filterCommon_1.getFilterType)(this.$props.column.filter);
+      var defaultOperator = (0, filterCommon_1.getDefaultOperator)(this.$props.filterOperators, filterType);
+      filterGroup = (0, exports.filterGroupByField)(this.$props.column.field, this.$props.filter);
       filterGroup = filterGroup ? __assign(__assign({}, filterGroup), {
         filters: filterGroup.filters.map(function (f) {
           return __assign({}, f);
@@ -171,7 +173,7 @@ var GridColumnMenuFilterVue2 = {
   },
   methods: {
     removeGroup: function removeGroup(group, rootFilter) {
-      var filters = __spreadArrays(rootFilter.filters);
+      var filters = __spreadArray([], rootFilter.filters, true);
 
       var groupIndex = filters.findIndex(function (f) {
         return f === group;
@@ -187,7 +189,7 @@ var GridColumnMenuFilterVue2 = {
     },
     insertGroup: function insertGroup(group, rootFilter) {
       return __assign(__assign({}, rootFilter), {
-        filters: __spreadArrays([group], rootFilter.filters)
+        filters: __spreadArray([group], rootFilter.filters, true)
       });
     },
     isControlled: function isControlled() {
@@ -239,8 +241,8 @@ var GridColumnMenuFilterVue2 = {
       }
 
       var field = this.$props.column.field;
-      var rootFilter = exports.rootFilterOrDefault(this.$props.filter);
-      var filterGroup = exports.filterGroupByField(field, this.$props.filter);
+      var rootFilter = (0, exports.rootFilterOrDefault)(this.$props.filter);
+      var filterGroup = (0, exports.filterGroupByField)(field, this.$props.filter);
       var rootFilters = rootFilter.filters.filter(function (f) {
         return f !== filterGroup;
       });
@@ -276,8 +278,8 @@ var GridColumnMenuFilterVue2 = {
       }
 
       var field = this.$props.column.field;
-      var rootFilter = exports.rootFilterOrDefault(this.$props.filter);
-      var filterGroup = exports.filterGroupByField(field, this.$props.filter);
+      var rootFilter = (0, exports.rootFilterOrDefault)(this.$props.filter);
+      var filterGroup = (0, exports.filterGroupByField)(field, this.$props.filter);
       var currentFilterGroup = this.currentFilterGroup();
       var updatedFilter = null;
 
@@ -304,7 +306,7 @@ var GridColumnMenuFilterVue2 = {
         }
       } else {
         updatedFilter = __assign(__assign({}, rootFilter), {
-          filters: __spreadArrays(rootFilter.filters, [currentFilterGroup])
+          filters: __spreadArray(__spreadArray([], rootFilter.filters, true), [currentFilterGroup], false)
         });
       }
 
@@ -331,6 +333,8 @@ var GridColumnMenuFilterVue2 = {
   render: function render(createElement) {
     var _this2 = this;
 
+    var _this = this;
+
     var h = gh || createElement;
     var _a = this.$props,
         column = _a.column,
@@ -344,10 +348,10 @@ var GridColumnMenuFilterVue2 = {
 
     var filterType = column.filter || 'text';
     var currentHideSecondFilter = hideSecondFilter !== undefined ? hideSecondFilter : filterCommon_1.defaultHideSecondFilter[filterType];
-    var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
+    var localizationService = (0, kendo_vue_intl_1.provideLocalizationService)(this);
     var filters = this.filterGroup.filters;
-    var currentOperators = filterCommon_1.operatorMap(filterOperators[filterType], localizationService);
-    var booleanValues = filterCommon_1.operatorMap(filterCommon_1.booleanFilterValues, localizationService);
+    var currentOperators = (0, filterCommon_1.operatorMap)(filterOperators[filterType], localizationService);
+    var booleanValues = (0, filterCommon_1.operatorMap)(filterCommon_1.booleanFilterValues, localizationService);
     var firstFilterCellProps = {
       field: column.field,
       value: filters[0].value,
@@ -365,7 +369,7 @@ var GridColumnMenuFilterVue2 = {
       filterType: filterType
     };
     var filterLogic = this.filterGroup.logic;
-    var logicData = filterCommon_1.operatorMap(filterCommon_1.filterLogicList, localizationService);
+    var logicData = (0, filterCommon_1.operatorMap)(filterCommon_1.filterLogicList, localizationService);
     var logicProps = {
       value: logicData.find(function (item) {
         return item.operator === (filterLogic === null ? '' : filterLogic);
@@ -374,6 +378,27 @@ var GridColumnMenuFilterVue2 = {
     };
     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 && kendo_vue_common_1.templateRendering.call(this, filterUI, kendo_vue_common_1.getListeners.call(this));
+    var render = kendo_vue_common_1.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(GridColumnMenuItemGroup_1.GridColumnMenuItemGroup, this.v3 ? function () {
         return [// @ts-ignore
@@ -408,32 +433,108 @@ var GridColumnMenuFilterVue2 = {
           }, [h("div", {
             "class": 'k-filter-menu-container'
           }, [// @ts-ignore
-          h(GridColumnMenuFilterUI_1.GridColumnMenuFilterUI, {
-            firstFilterProps: firstFilterCellProps,
+          !filterUI && [h(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+            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(kendo_vue_dropdowns_1.DropDownList, {
+            onChange: _this2.logicChange,
+            on: _this2.v3 ? undefined : {
+              "change": _this2.logicChange
+            },
+            "class": "k-filter-and",
+            "data-items": logicProps.data,
             attrs: _this2.v3 ? undefined : {
-              firstFilterProps: firstFilterCellProps,
-              secondFilterProps: secondFilterCellProps,
-              logicData: logicProps.data,
-              logicValue: logicProps.value,
-              hideSecondFilter: currentHideSecondFilter,
-              operators: currentOperators,
-              render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
+              "data-items": logicProps.data,
+              value: logicProps.value,
+              textField: "text"
+            },
+            value: logicProps.value,
+            textField: "text"
+          }), // @ts-ignore
+          h(GridColumnMenuFilterOperators_1.ColumnMenuFilterOperators, {
+            operator: secondOperator,
+            attrs: _this2.v3 ? undefined : {
+              operator: secondOperator,
+              filterType: secondFilterType,
+              operators: currentOperators
+            },
+            filterType: secondFilterType,
+            onChange: function onChange(e) {
+              _this.filterChangeHandler(e, 1);
             },
-            secondFilterProps: secondFilterCellProps,
-            logicData: logicProps.data,
-            logicValue: logicProps.value,
-            onFilteruifocus: _this2.handleFocus,
             on: _this2.v3 ? undefined : {
-              "filteruifocus": _this2.handleFocus,
-              "logicChange": _this2.logicChange,
-              "change": _this2.filterChangeHandler
+              "change": function onChange(e) {
+                _this.filterChangeHandler(e, 1);
+              }
             },
-            onLogicChange: _this2.logicChange,
-            onChange: _this2.filterChangeHandler,
-            hideSecondFilter: currentHideSecondFilter,
-            operators: currentOperators,
-            render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-          }), h("div", {
+            operators: currentOperators
+          }), // @ts-ignore
+          h(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+            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(kendo_vue_buttons_1.Button, {
@@ -466,32 +567,105 @@ var GridColumnMenuFilterVue2 = {
           onReset: _this2.clear
         }, [h("div", {
           "class": 'k-filter-menu-container'
-        }, [h(GridColumnMenuFilterUI_1.GridColumnMenuFilterUI, {
-          firstFilterProps: firstFilterCellProps,
+        }, [!filterUI && [h(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+          field: firstField,
           attrs: _this2.v3 ? undefined : {
-            firstFilterProps: firstFilterCellProps,
-            secondFilterProps: secondFilterCellProps,
-            logicData: logicProps.data,
-            logicValue: logicProps.value,
-            hideSecondFilter: currentHideSecondFilter,
-            operators: currentOperators,
-            render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-          },
-          secondFilterProps: secondFilterCellProps,
-          logicData: logicProps.data,
-          logicValue: logicProps.value,
-          onFilteruifocus: _this2.handleFocus,
+            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 : {
-            "filteruifocus": _this2.handleFocus,
-            "logicChange": _this2.logicChange,
-            "change": _this2.filterChangeHandler
-          },
-          onLogicChange: _this2.logicChange,
-          onChange: _this2.filterChangeHandler,
-          hideSecondFilter: currentHideSecondFilter,
-          operators: currentOperators,
-          render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-        }), h("div", {
+            "filtercellfocus": _this2.handleFocus,
+            "change": function change(e) {
+              _this.filterChangeHandler(e, 0);
+            }
+          },
+          onChange: function change(e) {
+            _this.filterChangeHandler(e, 0);
+          },
+          operators: currentOperators
+        })], !hideSecondFilter && !filterUI && [h(kendo_vue_dropdowns_1.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(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+          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(kendo_vue_buttons_1.Button, {
           type: 'reset',
@@ -539,32 +713,105 @@ var GridColumnMenuFilterVue2 = {
           onReset: _this2.clear
         }, [h("div", {
           "class": 'k-filter-menu-container'
-        }, [h(GridColumnMenuFilterUI_1.GridColumnMenuFilterUI, {
-          firstFilterProps: firstFilterCellProps,
+        }, [!filterUI && [h(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+          field: firstField,
           attrs: _this2.v3 ? undefined : {
-            firstFilterProps: firstFilterCellProps,
-            secondFilterProps: secondFilterCellProps,
-            logicData: logicProps.data,
-            logicValue: logicProps.value,
-            hideSecondFilter: currentHideSecondFilter,
-            operators: currentOperators,
-            render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-          },
-          secondFilterProps: secondFilterCellProps,
-          logicData: logicProps.data,
-          logicValue: logicProps.value,
-          onFilteruifocus: _this2.handleFocus,
+            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(kendo_vue_dropdowns_1.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(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+          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 : {
-            "filteruifocus": _this2.handleFocus,
-            "logicChange": _this2.logicChange,
-            "change": _this2.filterChangeHandler
-          },
-          onLogicChange: _this2.logicChange,
-          onChange: _this2.filterChangeHandler,
-          hideSecondFilter: currentHideSecondFilter,
-          operators: currentOperators,
-          render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-        }), h("div", {
+            "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(kendo_vue_buttons_1.Button, {
           type: 'reset',
@@ -595,32 +842,105 @@ var GridColumnMenuFilterVue2 = {
         onReset: _this2.clear
       }, [h("div", {
         "class": 'k-filter-menu-container'
-      }, [h(GridColumnMenuFilterUI_1.GridColumnMenuFilterUI, {
-        firstFilterProps: firstFilterCellProps,
+      }, [!filterUI && [h(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+        field: firstField,
         attrs: _this2.v3 ? undefined : {
-          firstFilterProps: firstFilterCellProps,
-          secondFilterProps: secondFilterCellProps,
-          logicData: logicProps.data,
-          logicValue: logicProps.value,
-          hideSecondFilter: currentHideSecondFilter,
-          operators: currentOperators,
-          render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
+          field: firstField,
+          value: firstValue,
+          operator: firstOperator,
+          booleanValues: firstBooleanValues,
+          filterType: firstFilterType,
+          operators: currentOperators
         },
-        secondFilterProps: secondFilterCellProps,
-        logicData: logicProps.data,
-        logicValue: logicProps.value,
-        onFilteruifocus: _this2.handleFocus,
+        value: firstValue,
+        operator: firstOperator,
+        booleanValues: firstBooleanValues,
+        filterType: firstFilterType,
+        onFiltercellfocus: _this2.handleFocus,
         on: _this2.v3 ? undefined : {
-          "filteruifocus": _this2.handleFocus,
-          "logicChange": _this2.logicChange,
-          "change": _this2.filterChangeHandler
+          "filtercellfocus": _this2.handleFocus,
+          "change": function change(e) {
+            _this.filterChangeHandler(e, 0);
+          }
+        },
+        onChange: function change(e) {
+          _this.filterChangeHandler(e, 0);
+        },
+        operators: currentOperators
+      })], !hideSecondFilter && !filterUI && [h(kendo_vue_dropdowns_1.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(GridColumnMenuFilterOperators_1.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(GridColumnMenuFilterCell_1.GridColumnMenuFilterCell, {
+        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);
         },
-        onLogicChange: _this2.logicChange,
-        onChange: _this2.filterChangeHandler,
-        hideSecondFilter: currentHideSecondFilter,
-        operators: currentOperators,
-        render: filterUI && kendo_vue_common_1.templateRendering.call(_this2, filterUI, kendo_vue_common_1.getListeners.call(_this2))
-      }), h("div", {
+        operators: currentOperators
+      })], filterUI && render, h("div", {
         "class": 'k-columnmenu-actions'
       }, [h(kendo_vue_buttons_1.Button, {
         type: 'reset',