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

package/dist/esm/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -0,0 +1,709 @@
+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 { Button } from '@progress/kendo-vue-buttons';
+import { GridColumnMenuItem } from './GridColumnMenuItem.js';
+import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup.js';
+import { GridColumnMenuItemContent } from './GridColumnMenuItemContent.js';
+import { Checkbox } from '@progress/kendo-vue-inputs';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, filterClearButton, filterSubmitButton, filterTitle, searchPlaceholder, filterCheckAll } from '../messages.js';
+import { filterBy } from '@progress/kendo-data-query';
+import { clone, getListeners, getTemplate, templateRendering } from '@progress/kendo-vue-common';
+import { getNestedValue } from '../utils.js';
+/**
+ * @hidden
+ */
+
+var isArrayEqual = function isArrayEqual(firstArray, secondArray) {
+  if (firstArray.length !== secondArray.length) {
+    return false;
+  }
+
+  return firstArray.every(function (ex, i) {
+    return ex === secondArray[i];
+  });
+};
+/**
+ * @hidden
+ */
+
+
+var GridColumnMenuCheckboxFilterVue2 = {
+  name: 'KendoGridColumnMenuCheckboxFilter',
+  props: {
+    column: Object,
+    filter: Object,
+    filterable: Boolean,
+    filterOperators: Object,
+    checkAllItem: [String, Object, Function],
+    item: [String, Object, Function],
+    expanded: {
+      type: Boolean,
+      default: undefined
+    },
+    dataItems: Array,
+    searchBox: {
+      type: Boolean,
+      default: true
+    },
+    uniqueData: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data: function data() {
+    return {
+      currentExpanded: false,
+      currentValue: '',
+      currentData: undefined,
+      dataFromProps: undefined,
+      currentFilter: undefined
+    };
+  },
+  created: function created() {
+    this.compositeFilterIndex = this.getFilterIndex();
+    this.currentExpanded = this.$props.expanded;
+    this.currentData = this.parseData(this.$props.dataItems, this.$props.uniqueData) || [];
+    this.dataFromProps = this.parseData(this.$props.dataItems, false) || [];
+    this.currentFilter = this.defaultFilter();
+  },
+  updated: function updated() {
+    var field = this.$props.column.field || '';
+    var data = this.$props.dataItems.map(function (item) {
+      return getNestedValue(field, item);
+    });
+
+    if (!isArrayEqual(data, this.dataFromProps)) {
+      this.currentData = data;
+      this.dataFromProps = data;
+    }
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @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 column = this.$props.column;
+
+    if (!column || !column.field) {
+      return h("div");
+    }
+
+    var localizationService = provideLocalizationService(this);
+    var expandState = this.$props.expanded !== undefined ? this.$props.expanded : this.currentExpanded;
+    var filterValues = [];
+
+    if (this.currentFilter) {
+      var currentFilter = __spreadArray([], this.currentFilter.filters, true);
+
+      this.compositeFilterIndex = currentFilter.findIndex(function (filter) {
+        if (filter.filters && filter.filters.length > 0) {
+          return filter.filters[0].field === column.field;
+        }
+
+        return false;
+      });
+
+      if (this.compositeFilterIndex !== -1 && currentFilter[this.compositeFilterIndex].filters.length > 0) {
+        currentFilter[this.compositeFilterIndex].filters.forEach(function (filterItem) {
+          if (filterItem.field === _this.$props.column.field) {
+            filterValues.push(filterItem.value);
+          }
+        });
+      }
+    }
+
+    var searchBox = function searchBox() {
+      return this.$props.searchBox && h("span", {
+        "class": "k-list-filter"
+      }, [h("span", {
+        "class": "k-textbox k-input k-input-md k-rounded-md k-input-solid"
+      }, [h("span", {
+        "class": "k-input-icon k-icon k-i-search"
+      }), h("input", {
+        ref: 'searchBox',
+        placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder]),
+        attrs: this.v3 ? undefined : {
+          placeholder: localizationService.toLanguageString(searchPlaceholder, messages[searchPlaceholder])
+        },
+        "class": "k-input-inner",
+        value: this.v3 ? this.currentValue : null,
+        domProps: this.v3 ? undefined : {
+          "value": this.currentValue
+        },
+        onInput: this.handleSearchChange,
+        on: this.v3 ? undefined : {
+          "input": this.handleSearchChange
+        }
+      })])]);
+    };
+
+    var uniqueFilterValues = filterValues.filter(function (item, index) {
+      return filterValues.indexOf(item) === index;
+    });
+    var itemTemplate = templateRendering.call(this, this.$props.item, getListeners.call(this));
+    var checkAllItemTemplate = templateRendering.call(this, this.$props.checkAllItem, getListeners.call(this));
+    var defaultCheckAllRendering = h("li", {
+      "class": "k-item"
+    }, [// @ts-ignore  function children
+    h(Checkbox, {
+      label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
+      attrs: this.v3 ? undefined : {
+        label: localizationService.toLanguageString(filterCheckAll, messages[filterCheckAll]),
+        checked: this.isAllSelected()
+      },
+      onChange: function onChange(e) {
+        return _this.handleCheckBoxChange(e, 'all');
+      },
+      on: this.v3 ? undefined : {
+        "change": function onChange(e) {
+          return _this.handleCheckBoxChange(e, 'all');
+        }
+      },
+      checked: this.isAllSelected()
+    })]);
+    var checkAllItemRender = getTemplate.call(this, {
+      h: h,
+      template: checkAllItemTemplate,
+      defaultRendering: defaultCheckAllRendering,
+      additionalProps: {
+        checked: this.isAllSelected()
+      },
+      additionalListeners: {
+        change: function change(e) {
+          return _this.handleCheckBoxChange(e, 'all');
+        }
+      }
+    });
+    return (// @ts-ignore  function children
+      h(GridColumnMenuItemGroup, this.v3 ? function () {
+        return [// @ts-ignore  function children
+        h(GridColumnMenuItem, {
+          title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
+          attrs: _this2.v3 ? undefined : {
+            title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
+            iconClass: 'k-i-filter'
+          },
+          iconClass: 'k-i-filter',
+          onClick: _this2.onFilterExpand,
+          on: _this2.v3 ? undefined : {
+            "click": _this2.onFilterExpand
+          }
+        }), // @ts-ignore  function children
+        h(GridColumnMenuItemContent, {
+          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'
+          }, [searchBox.call(_this2), h("ul", {
+            "class": "k-reset k-multicheck-wrap"
+          }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
+            var _this = this;
+
+            var defaultRendering = h("li", {
+              "class": "k-item",
+              key: index
+            }, [// @ts-ignore  function children
+            h(Checkbox, {
+              label: String(item),
+              attrs: this.v3 ? undefined : {
+                label: String(item),
+                checked: uniqueFilterValues.includes(item)
+              },
+              onChange: function onChange(e) {
+                return _this.handleCheckBoxChange(e, item);
+              },
+              on: this.v3 ? undefined : {
+                "change": function onChange(e) {
+                  return _this.handleCheckBoxChange(e, item);
+                }
+              },
+              checked: uniqueFilterValues.includes(item)
+            })]);
+            var itemRender = getTemplate.call(this, {
+              h: h,
+              template: itemTemplate,
+              defaultRendering: defaultRendering,
+              additionalProps: {
+                item: item,
+                index: index,
+                checked: uniqueFilterValues.includes(item)
+              },
+              additionalListeners: {
+                change: function change(e) {
+                  return _this.handleCheckBoxChange(e, item);
+                }
+              }
+            });
+            return itemRender;
+          }, _this2)]), 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(filterClearButton, messages[filterClearButton])];
+          } : [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])]), // @ts-ignore function children
+          h(Button, {
+            themeColor: 'primary',
+            attrs: _this2.v3 ? undefined : {
+              themeColor: 'primary'
+            }
+          }, _this2.v3 ? function () {
+            return [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])];
+          } : [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])])])])])])];
+        } : [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'
+        }, [searchBox.call(_this2), h("ul", {
+          "class": "k-reset k-multicheck-wrap"
+        }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
+          var _this = this;
+
+          var defaultRendering = h("li", {
+            "class": "k-item",
+            key: index
+          }, [h(Checkbox, {
+            label: String(item),
+            attrs: this.v3 ? undefined : {
+              label: String(item),
+              checked: uniqueFilterValues.includes(item)
+            },
+            onChange: function onChange(e) {
+              return _this.handleCheckBoxChange(e, item);
+            },
+            on: this.v3 ? undefined : {
+              "change": function onChange(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            },
+            checked: uniqueFilterValues.includes(item)
+          })]);
+          var itemRender = getTemplate.call(this, {
+            h: h,
+            template: itemTemplate,
+            defaultRendering: defaultRendering,
+            additionalProps: {
+              item: item,
+              index: index,
+              checked: uniqueFilterValues.includes(item)
+            },
+            additionalListeners: {
+              change: function change(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            }
+          });
+          return itemRender;
+        }, _this2)]), h("div", {
+          "class": 'k-columnmenu-actions'
+        }, [h(Button, {
+          type: 'reset',
+          attrs: _this2.v3 ? undefined : {
+            type: 'reset'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])];
+        } : [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])]), h(Button, {
+          themeColor: 'primary',
+          attrs: _this2.v3 ? undefined : {
+            themeColor: 'primary'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])];
+        } : [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])])])])])])])];
+      } : [h(GridColumnMenuItem, {
+        title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
+        attrs: _this2.v3 ? undefined : {
+          title: localizationService.toLanguageString(filterTitle, messages[filterTitle]),
+          iconClass: 'k-i-filter'
+        },
+        iconClass: 'k-i-filter',
+        onClick: _this2.onFilterExpand,
+        on: _this2.v3 ? undefined : {
+          "click": _this2.onFilterExpand
+        }
+      }), h(GridColumnMenuItemContent, {
+        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'
+        }, [searchBox.call(_this2), h("ul", {
+          "class": "k-reset k-multicheck-wrap"
+        }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
+          var _this = this;
+
+          var defaultRendering = h("li", {
+            "class": "k-item",
+            key: index
+          }, [h(Checkbox, {
+            label: String(item),
+            attrs: this.v3 ? undefined : {
+              label: String(item),
+              checked: uniqueFilterValues.includes(item)
+            },
+            onChange: function onChange(e) {
+              return _this.handleCheckBoxChange(e, item);
+            },
+            on: this.v3 ? undefined : {
+              "change": function onChange(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            },
+            checked: uniqueFilterValues.includes(item)
+          })]);
+          var itemRender = getTemplate.call(this, {
+            h: h,
+            template: itemTemplate,
+            defaultRendering: defaultRendering,
+            additionalProps: {
+              item: item,
+              index: index,
+              checked: uniqueFilterValues.includes(item)
+            },
+            additionalListeners: {
+              change: function change(e) {
+                return _this.handleCheckBoxChange(e, item);
+              }
+            }
+          });
+          return itemRender;
+        }, _this2)]), h("div", {
+          "class": 'k-columnmenu-actions'
+        }, [h(Button, {
+          type: 'reset',
+          attrs: _this2.v3 ? undefined : {
+            type: 'reset'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])];
+        } : [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])]), h(Button, {
+          themeColor: 'primary',
+          attrs: _this2.v3 ? undefined : {
+            themeColor: 'primary'
+          }
+        }, _this2.v3 ? function () {
+          return [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])];
+        } : [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])])])])])])];
+      } : [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'
+      }, [searchBox.call(_this2), h("ul", {
+        "class": "k-reset k-multicheck-wrap"
+      }, [checkAllItemRender, _this2.currentData.map(function (item, index) {
+        var _this = this;
+
+        var defaultRendering = h("li", {
+          "class": "k-item",
+          key: index
+        }, [h(Checkbox, {
+          label: String(item),
+          attrs: this.v3 ? undefined : {
+            label: String(item),
+            checked: uniqueFilterValues.includes(item)
+          },
+          onChange: function onChange(e) {
+            return _this.handleCheckBoxChange(e, item);
+          },
+          on: this.v3 ? undefined : {
+            "change": function onChange(e) {
+              return _this.handleCheckBoxChange(e, item);
+            }
+          },
+          checked: uniqueFilterValues.includes(item)
+        })]);
+        var itemRender = getTemplate.call(this, {
+          h: h,
+          template: itemTemplate,
+          defaultRendering: defaultRendering,
+          additionalProps: {
+            item: item,
+            index: index,
+            checked: uniqueFilterValues.includes(item)
+          },
+          additionalListeners: {
+            change: function change(e) {
+              return _this.handleCheckBoxChange(e, item);
+            }
+          }
+        });
+        return itemRender;
+      }, _this2)]), h("div", {
+        "class": 'k-columnmenu-actions'
+      }, [h(Button, {
+        type: 'reset',
+        attrs: _this2.v3 ? undefined : {
+          type: 'reset'
+        }
+      }, _this2.v3 ? function () {
+        return [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])];
+      } : [localizationService.toLanguageString(filterClearButton, messages[filterClearButton])]), h(Button, {
+        themeColor: 'primary',
+        attrs: _this2.v3 ? undefined : {
+          themeColor: 'primary'
+        }
+      }, _this2.v3 ? function () {
+        return [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])];
+      } : [localizationService.toLanguageString(filterSubmitButton, messages[filterSubmitButton])])])])])])])])
+    );
+  },
+  methods: {
+    defaultFilter: function defaultFilter() {
+      if (this.$props.filter) {
+        return clone(this.$props.filter);
+      }
+
+      return {
+        filters: [],
+        logic: 'and'
+      };
+    },
+    parseData: function parseData(originalData, isUnique) {
+      var field = this.$props.column.field || '';
+      var data = originalData.map(function (item) {
+        return getNestedValue(field, item);
+      });
+
+      if (isUnique) {
+        return data.filter(function (item, index) {
+          return data.indexOf(item) === index;
+        });
+      }
+
+      return data;
+    },
+    getFilterIndex: function getFilterIndex() {
+      var field = this.$props.column.field;
+      var currentFilter = this.defaultFilter();
+      var compositeFilterIndex = currentFilter.filters.findIndex(function (filter) {
+        return filter.filters && filter.filters.length > 0 && filter.filters[0].field === field;
+      });
+      return compositeFilterIndex;
+    },
+    onFilterExpand: function onFilterExpand() {
+      var isControlled = this.$props.expanded !== undefined;
+      var nextValue = !(isControlled ? this.$props.expanded : this.currentExpanded);
+      this.$emit('expandchange', nextValue);
+
+      if (!isControlled) {
+        this.currentExpanded = nextValue;
+      }
+    },
+    handleSearchChange: function handleSearchChange(e) {
+      var filterExpression = {
+        logic: 'and',
+        filters: [{
+          field: this.$props.column.field,
+          operator: 'startswith',
+          value: e.target.value,
+          ignoreCase: true
+        }]
+      };
+      this.currentValue = e.target.value;
+      this.currentData = this.parseData(filterBy(this.$props.dataItems || [], filterExpression), this.$props.uniqueData);
+    },
+    clear: function clear(e) {
+      e.preventDefault();
+      var updatedFilter = this.currentFilter || null;
+
+      if (updatedFilter !== null && updatedFilter.filters.length > 0) {
+        if (this.compositeFilterIndex >= 0) {
+          updatedFilter.filters.splice(this.compositeFilterIndex, 1);
+        }
+
+        this.$emit('filterchange', updatedFilter, e);
+      } else {
+        this.$emit('filterchange', null, e);
+      }
+
+      this.$emit('closemenu');
+    },
+    submit: function submit(e) {
+      e.preventDefault();
+      var updatedFilter = this.currentFilter || null;
+      this.$emit('filterchange', updatedFilter, e);
+      this.$emit('closemenu');
+    },
+    handleCheckBoxChange: function handleCheckBoxChange(e, value) {
+      var field = this.$props.column.field || '';
+
+      var newFilter = __assign({}, this.currentFilter);
+
+      var filters = __spreadArray([], this.currentFilter.filters, true) || [];
+      var fieldFilters = [];
+
+      if (this.compositeFilterIndex !== -1 && newFilter.filters[this.compositeFilterIndex].filters && value !== 'all') {
+        fieldFilters = newFilter.filters[this.compositeFilterIndex].filters;
+      }
+
+      if (e.value && value === 'all') {
+        this.currentData.forEach(function (item) {
+          fieldFilters.push({
+            field: field,
+            operator: 'eq',
+            value: item
+          });
+        });
+      } else if (e.value) {
+        fieldFilters.push({
+          field: field,
+          operator: 'eq',
+          value: value
+        });
+      } else if (this.currentFilter) {
+        var index = fieldFilters.findIndex(function (filter) {
+          return filter.value === value;
+        });
+        fieldFilters.splice(index, 1);
+      }
+
+      newFilter.logic = 'and';
+
+      if (this.compositeFilterIndex !== -1) {
+        filters[this.compositeFilterIndex] = {
+          logic: 'or',
+          filters: fieldFilters
+        };
+      } else {
+        filters.push({
+          logic: 'or',
+          filters: fieldFilters
+        });
+      }
+
+      if (!e.value && value === 'all' || fieldFilters.length === 0) {
+        filters.splice(this.compositeFilterIndex, 1);
+      }
+
+      newFilter.filters = filters;
+      this.currentFilter = newFilter;
+    },
+    isAllSelected: function isAllSelected() {
+      var _this = this;
+
+      var isAllChecked = false;
+
+      if (this.currentFilter) {
+        var filters_1 = __spreadArray([], this.currentFilter.filters, true);
+
+        if (this.compositeFilterIndex === -1) {
+          return false;
+        }
+
+        isAllChecked = this.currentData.every(function (item) {
+          if (_this.compositeFilterIndex !== -1 && filters_1[_this.compositeFilterIndex].filters) {
+            var index = filters_1[_this.compositeFilterIndex].filters.findIndex(function (filter) {
+              return filter.value === item;
+            });
+
+            return index >= 0;
+          }
+
+          return false;
+        });
+        return isAllChecked;
+      }
+
+      return isAllChecked;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var GridColumnMenuCheckboxFilter = GridColumnMenuCheckboxFilterVue2;
+export { GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterVue2 };