kdutify 2.6.1 → 2.7.3

package/lib/components/KDataTable/KDataTable.js

@@ -1,49 +1,61 @@
-import "..\\..\\..\\src\\components\\KDataTable\\KDataTable.sass"; // Components
-
+import "../../../src/components/KDataTable/KDataTable.sass";
+// Components
 import { KData } from '../KData';
 import { KDataFooter, KDataIterator } from '../KDataIterator';
 import KBtn from '../KBtn';
-import KDataTableHeader from './KDataTableHeader'; // import KVirtualTable from './KVirtualTable'
-
+import KDataTableHeader from './KDataTableHeader';
+// import KVirtualTable from './KVirtualTable'
 import KIcon from '../KIcon';
 import Row from './Row';
 import RowGroup from './RowGroup';
 import KSimpleCheckbox from '../KCheckbox/KSimpleCheckbox';
 import KSimpleTable from './KSimpleTable';
-import MobileRow from './MobileRow'; // Mixins
-
-import Loadable from '../../mixins/loadable'; // Directives
-
-import ripple from '../../directives/ripple'; // Helpers
-
+import MobileRow from './MobileRow';
+// Mixins
+import Loadable from '../../mixins/loadable';
+import Mouse from '../../mixins/mouse';
+// Directives
+import ripple from '../../directives/ripple';
+// Helpers
 import mixins from '../../util/mixins';
 import { deepEqual, getObjectValueByPath, getPrefixedScopedSlots, getSlot, defaultFilter, camelizeObjectKeys, getPropertyFromItem } from '../../util/helpers';
 import { breaking } from '../../util/console';
-import { mergeClasses } from '../../util/mergeData';
-
+import { mergeClasses, mergeStyles } from '../../util/mergeData';
 function filterFn(item, search, filter) {
   return header => {
     const value = getObjectValueByPath(item, header.value);
     return header.filter ? header.filter(value, search, item) : filter(value, search, item);
   };
 }
-
-function searchTableItems(items, search, headersWithCustomFilters, headersWithoutCustomFilters, customFilter) {
+function searchTableItems(items, search, headersWithCustomFilters, headersWithoutCustomFilters, customFilter, filterMode) {
   search = typeof search === 'string' ? search.trim() : null;
-  return items.filter(item => {
-    // Headers with custom filters are evaluated whether or not a search term has been provided.
-    // We need to match every filter to be included in the results.
-    const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter)); // Headers without custom filters are only filtered by the `search` property if it is defined.
-    // We only need a single column to match the search term to be included in the results.
-
-    const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter));
-    return matchesColumnFilters && matchesSearchTerm;
-  });
+  if (filterMode === 'union') {
+    // If the `search` property is empty and there are no custom filters in use, there is nothing to do.
+    if (!(search && headersWithoutCustomFilters.length) && !headersWithCustomFilters.length) return items;
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      if (headersWithCustomFilters.length && headersWithCustomFilters.every(filterFn(item, search, defaultFilter))) {
+        return true;
+      }
+      // Otherwise, the `search` property is used to filter columns without a custom filter.
+      return search && headersWithoutCustomFilters.some(filterFn(item, search, customFilter));
+    });
+  } else if (filterMode === 'intersection') {
+    return items.filter(item => {
+      // Headers with custom filters are evaluated whether or not a search term has been provided.
+      // We need to match every filter to be included in the results.
+      const matchesColumnFilters = headersWithCustomFilters.every(filterFn(item, search, defaultFilter));
+      // Headers without custom filters are only filtered by the `search` property if it is defined.
+      // We only need a single column to match the search term to be included in the results.
+      const matchesSearchTerm = !search || headersWithoutCustomFilters.some(filterFn(item, search, customFilter));
+      return matchesColumnFilters && matchesSearchTerm;
+    });
+  } else {
+    return items;
+  }
 }
 /* @kdujs/component */
-
-
-export default mixins(KDataIterator, Loadable).extend({
+export default mixins(KDataIterator, Loadable, Mouse).extend({
   name: 'k-data-table',
   directives: {
     ripple
@@ -75,16 +87,23 @@ export default mixins(KDataIterator, Loadable).extend({
       type: Function,
       default: defaultFilter
     },
+    filterMode: {
+      type: String,
+      default: 'intersection'
+    },
     itemClass: {
       type: [String, Function],
       default: () => ''
     },
+    itemStyle: {
+      type: [String, Function],
+      default: () => ''
+    },
     loaderHeight: {
       type: [Number, String],
       default: 4
     }
   },
-
   data() {
     return {
       internalGroupBy: [],
@@ -92,7 +111,6 @@ export default mixins(KDataIterator, Loadable).extend({
       widths: []
     };
   },
-
   computed: {
     computedHeaders() {
       if (!this.headers) return [];
@@ -102,76 +120,72 @@ export default mixins(KDataIterator, Loadable).extend({
         sortable: false,
         width: '1px'
       };
-
       if (this.showSelect) {
         const index = headers.findIndex(h => h.value === 'data-table-select');
-        if (index < 0) headers.unshift({ ...defaultHeader,
+        if (index < 0) headers.unshift({
+          ...defaultHeader,
           value: 'data-table-select'
-        });else headers.splice(index, 1, { ...defaultHeader,
+        });else headers.splice(index, 1, {
+          ...defaultHeader,
           ...headers[index]
         });
       }
-
       if (this.showExpand) {
         const index = headers.findIndex(h => h.value === 'data-table-expand');
-        if (index < 0) headers.unshift({ ...defaultHeader,
+        if (index < 0) headers.unshift({
+          ...defaultHeader,
           value: 'data-table-expand'
-        });else headers.splice(index, 1, { ...defaultHeader,
+        });else headers.splice(index, 1, {
+          ...defaultHeader,
           ...headers[index]
         });
       }
-
       return headers;
     },
-
     colspanAttrs() {
       return this.isMobile ? undefined : {
         colspan: this.headersLength || this.computedHeaders.length
       };
     },
-
     columnSorters() {
       return this.computedHeaders.reduce((acc, header) => {
         if (header.sort) acc[header.value] = header.sort;
         return acc;
       }, {});
     },
-
     headersWithCustomFilters() {
       return this.headers.filter(header => header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true));
     },
-
     headersWithoutCustomFilters() {
       return this.headers.filter(header => !header.filter && (!header.hasOwnProperty('filterable') || header.filterable === true));
     },
-
     sanitizedHeaderProps() {
       return camelizeObjectKeys(this.headerProps);
     },
-
     computedItemsPerPage() {
       const itemsPerPage = this.options && this.options.itemsPerPage ? this.options.itemsPerPage : this.itemsPerPage;
       const itemsPerPageOptions = this.sanitizedFooterProps.itemsPerPageOptions;
-
       if (itemsPerPageOptions && !itemsPerPageOptions.find(item => typeof item === 'number' ? item === itemsPerPage : item.value === itemsPerPage)) {
         const firstOption = itemsPerPageOptions[0];
         return typeof firstOption === 'object' ? firstOption.value : firstOption;
       }
-
       return itemsPerPage;
+    },
+    groupByText() {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = this.headers) === null || _a === void 0 ? void 0 : _a.find(header => {
+        var _a;
+        return header.value === ((_a = this.internalGroupBy) === null || _a === void 0 ? void 0 : _a[0]);
+      })) === null || _b === void 0 ? void 0 : _b.text) !== null && _c !== void 0 ? _c : '';
     }
-
   },
-
   created() {
     const breakingProps = [['sort-icon', 'header-props.sort-icon'], ['hide-headers', 'hide-default-header'], ['select-all', 'show-select']];
     /* istanbul ignore next */
-
     breakingProps.forEach(([original, replacement]) => {
       if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this);
     });
   },
-
   mounted() {
     // if ((!this.sortBy || !this.sortBy.length) && (!this.options.sortBy || !this.options.sortBy.length)) {
     //   const firstSortable = this.headers.find(h => !('sortable' in h) || !!h.sortable)
@@ -182,38 +196,45 @@ export default mixins(KDataIterator, Loadable).extend({
       this.calcWidths();
     }
   },
-
   beforeDestroy() {
     if (this.calculateWidths) {
       window.removeEventListener('resize', this.calcWidths);
     }
   },
-
   methods: {
     calcWidths() {
       this.widths = Array.from(this.$el.querySelectorAll('th')).map(e => e.clientWidth);
     },
-
     customFilterWithColumns(items, search) {
-      return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter);
+      return searchTableItems(items, search, this.headersWithCustomFilters, this.headersWithoutCustomFilters, this.customFilter, this.filterMode);
     },
-
     customSortWithHeaders(items, sortBy, sortDesc, locale) {
       return this.customSort(items, sortBy, sortDesc, locale, this.columnSorters);
     },
-
     createItemProps(item, index) {
-      const props = KDataIterator.options.methods.createItemProps.call(this, item, index);
-      return Object.assign(props, {
+      const data = {
+        ...KDataIterator.options.methods.createItemProps.call(this, item, index),
         headers: this.computedHeaders
-      });
+      };
+      return {
+        ...data,
+        attrs: {
+          class: {
+            'k-data-table__selected': data.isSelected
+          }
+        },
+        on: {
+          ...this.getDefaultMouseEventHandlers(':row', () => data, true),
+          // TODO: the first argument should be the event, and the second argument should be data,
+          // but this is a breaking change so it's for v3
+          click: event => this.$emit('click:row', item, data, event)
+        }
+      };
     },
-
     genCaption(props) {
       if (this.caption) return [this.$createElement('caption', [this.caption])];
       return getSlot(this, 'caption', props, true);
     },
-
     genColgroup(props) {
       return this.$createElement('colgroup', this.computedHeaders.map(header => {
         return this.$createElement('col', {
@@ -223,7 +244,6 @@ export default mixins(KDataIterator, Loadable).extend({
         });
       }));
     },
-
     genLoading() {
       const th = this.$createElement('th', {
         staticClass: 'column',
@@ -234,10 +254,10 @@ export default mixins(KDataIterator, Loadable).extend({
       }, [th]);
       return this.$createElement('thead', [tr]);
     },
-
     genHeaders(props) {
       const data = {
-        props: { ...this.sanitizedHeaderProps,
+        props: {
+          ...this.sanitizedHeaderProps,
           headers: this.computedHeaders,
           options: props.options,
           mobile: this.isMobile,
@@ -253,23 +273,22 @@ export default mixins(KDataIterator, Loadable).extend({
           group: props.group,
           'toggle-select-all': this.toggleSelectAll
         }
-      }; // TODO: rename to 'head'? (thead, tbody, tfoot)
-
-      const children = [getSlot(this, 'header', { ...data,
+      };
+      // TODO: rename to 'head'? (thead, tbody, tfoot)
+      const children = [getSlot(this, 'header', {
+        ...data,
         isMobile: this.isMobile
       })];
-
       if (!this.hideDefaultHeader) {
         const scopedSlots = getPrefixedScopedSlots('header.', this.$scopedSlots);
-        children.push(this.$createElement(KDataTableHeader, { ...data,
+        children.push(this.$createElement(KDataTableHeader, {
+          ...data,
           scopedSlots
         }));
       }
-
       if (this.loading) children.push(this.genLoading());
       return children;
     },
-
     genEmptyWrapper(content) {
       return this.$createElement('tr', {
         staticClass: 'k-data-table__empty-wrapper'
@@ -277,17 +296,14 @@ export default mixins(KDataIterator, Loadable).extend({
         attrs: this.colspanAttrs
       }, content)]);
     },
-
     genItems(items, props) {
       const empty = this.genEmpty(props.originalItemsLength, props.pagination.itemsLength);
       if (empty) return [empty];
       return props.groupedItems ? this.genGroupedRows(props.groupedItems, props) : this.genRows(items, props);
     },
-
     genGroupedRows(groupedItems, props) {
       return groupedItems.map(group => {
         if (!this.openCache.hasOwnProperty(group.name)) this.$set(this.openCache, group.name, true);
-
         if (this.$scopedSlots.group) {
           return this.$scopedSlots.group({
             group: group.name,
@@ -301,20 +317,16 @@ export default mixins(KDataIterator, Loadable).extend({
         }
       });
     },
-
     genDefaultGroupedRow(group, items, props) {
       const isOpen = !!this.openCache[group];
       const children = [this.$createElement('template', {
         slot: 'row.content'
       }, this.genRows(items, props))];
-
       const toggleFn = () => this.$set(this.openCache, group, !this.openCache[group]);
-
       const removeFn = () => props.updateOptions({
         groupBy: [],
         groupDesc: []
       });
-
       if (this.$scopedSlots['group.header']) {
         children.unshift(this.$createElement('template', {
           slot: 'column.header'
@@ -352,12 +364,11 @@ export default mixins(KDataIterator, Loadable).extend({
         const column = this.$createElement('td', {
           staticClass: 'text-start',
           attrs: this.colspanAttrs
-        }, [toggle, `${props.options.groupBy[0]}: ${group}`, remove]);
+        }, [toggle, `${this.groupByText}: ${group}`, remove]);
         children.unshift(this.$createElement('template', {
           slot: 'column.header'
         }, [column]));
       }
-
       if (this.$scopedSlots['group.summary']) {
         children.push(this.$createElement('template', {
           slot: 'column.summary'
@@ -371,7 +382,6 @@ export default mixins(KDataIterator, Loadable).extend({
           toggle: toggleFn
         })]));
       }
-
       return this.$createElement(RowGroup, {
         key: group,
         props: {
@@ -379,20 +389,17 @@ export default mixins(KDataIterator, Loadable).extend({
         }
       }, children);
     },
-
     genRows(items, props) {
       return this.$scopedSlots.item ? this.genScopedRows(items, props) : this.genDefaultRows(items, props);
     },
-
     genScopedRows(items, props) {
       const rows = [];
-
       for (let i = 0; i < items.length; i++) {
         const item = items[i];
-        rows.push(this.$scopedSlots.item({ ...this.createItemProps(item, i),
+        rows.push(this.$scopedSlots.item({
+          ...this.createItemProps(item, i),
           isMobile: this.isMobile
         }));
-
         if (this.isExpanded(item)) {
           rows.push(this.$scopedSlots['expanded-item']({
             headers: this.computedHeaders,
@@ -402,14 +409,11 @@ export default mixins(KDataIterator, Loadable).extend({
           }));
         }
       }
-
       return rows;
     },
-
     genDefaultRows(items, props) {
       return this.$scopedSlots['expanded-item'] ? items.map((item, index) => this.genDefaultExpandedRow(item, index)) : items.map((item, index) => this.genDefaultSimpleRow(item, index));
     },
-
     genDefaultExpandedRow(item, index) {
       const isExpanded = this.isExpanded(item);
       const classes = {
@@ -433,24 +437,22 @@ export default mixins(KDataIterator, Loadable).extend({
         slot: 'row.content'
       }, [expandedRow])]);
     },
-
     genDefaultSimpleRow(item, index, classes = {}) {
       const scopedSlots = getPrefixedScopedSlots('item.', this.$scopedSlots);
       const data = this.createItemProps(item, index);
-
       if (this.showSelect) {
         const slot = scopedSlots['data-table-select'];
-        scopedSlots['data-table-select'] = slot ? () => slot({ ...data,
+        scopedSlots['data-table-select'] = slot ? () => slot({
+          ...data,
           isMobile: this.isMobile
         }) : () => {
-          var _this$checkboxColor;
-
+          var _a;
           return this.$createElement(KSimpleCheckbox, {
             staticClass: 'k-data-table__checkbox',
             props: {
               value: data.isSelected,
               disabled: !this.isSelectable(item),
-              color: (_this$checkboxColor = this.checkboxColor) != null ? _this$checkboxColor : ''
+              color: (_a = this.checkboxColor) !== null && _a !== void 0 ? _a : ''
             },
             on: {
               input: val => data.select(val)
@@ -458,7 +460,6 @@ export default mixins(KDataIterator, Loadable).extend({
           });
         };
       }
-
       if (this.showExpand) {
         const slot = scopedSlots['data-table-expand'];
         scopedSlots['data-table-expand'] = slot ? () => slot(data) : () => this.$createElement(KIcon, {
@@ -474,12 +475,13 @@ export default mixins(KDataIterator, Loadable).extend({
           }
         }, [this.expandIcon]);
       }
-
       return this.$createElement(this.isMobile ? MobileRow : Row, {
         key: getObjectValueByPath(item, this.itemKey),
-        class: mergeClasses({ ...classes,
+        class: mergeClasses({
+          ...classes,
           'k-data-table__selected': data.isSelected
         }, getPropertyFromItem(item, this.itemClass)),
+        style: mergeStyles({}, getPropertyFromItem(item, this.itemStyle)),
         props: {
           headers: this.computedHeaders,
           hideDefaultHeader: this.hideDefaultHeader,
@@ -488,18 +490,12 @@ export default mixins(KDataIterator, Loadable).extend({
           rtl: this.$kdutify.rtl
         },
         scopedSlots,
-        on: {
-          // TODO: for click, the first argument should be the event, and the second argument should be data,
-          // but this is a breaking change so it's for v3
-          click: () => this.$emit('click:row', item, data),
-          contextmenu: event => this.$emit('contextmenu:row', event, data),
-          dblclick: event => this.$emit('dblclick:row', event, data)
-        }
+        on: data.on
       });
     },
-
     genBody(props) {
-      const data = { ...props,
+      const data = {
+        ...props,
         expand: this.expand,
         headers: this.computedHeaders,
         isExpanded: this.isExpanded,
@@ -507,20 +503,15 @@ export default mixins(KDataIterator, Loadable).extend({
         isSelected: this.isSelected,
         select: this.select
       };
-
       if (this.$scopedSlots.body) {
         return this.$scopedSlots.body(data);
       }
-
       return this.$createElement('tbody', [getSlot(this, 'body.prepend', data, true), this.genItems(props.items, props), getSlot(this, 'body.append', data, true)]);
     },
-
     genFoot(props) {
-      var _this$$scopedSlots$fo, _this$$scopedSlots;
-
-      return (_this$$scopedSlots$fo = (_this$$scopedSlots = this.$scopedSlots).foot) == null ? void 0 : _this$$scopedSlots$fo.call(_this$$scopedSlots, props);
+      var _a, _b;
+      return (_b = (_a = this.$scopedSlots).foot) === null || _b === void 0 ? void 0 : _b.call(_a, props);
     },
-
     genFooters(props) {
       const data = {
         props: {
@@ -536,22 +527,21 @@ export default mixins(KDataIterator, Loadable).extend({
         headers: this.computedHeaders
       };
       const children = [getSlot(this, 'footer', data, true)];
-
       if (!this.hideDefaultFooter) {
-        children.push(this.$createElement(KDataFooter, { ...data,
+        children.push(this.$createElement(KDataFooter, {
+          ...data,
           scopedSlots: getPrefixedScopedSlots('footer.', this.$scopedSlots)
         }));
       }
-
       return children;
     },
-
     genDefaultScopedSlot(props) {
       const simpleProps = {
         height: this.height,
         fixedHeader: this.fixedHeader,
         dense: this.dense
-      }; // if (this.virtualRows) {
+      };
+      // if (this.virtualRows) {
       //   return this.$createElement(KVirtualTable, {
       //     props: Object.assign(simpleProps, {
       //       items: props.items,
@@ -568,28 +558,27 @@ export default mixins(KDataIterator, Loadable).extend({
       //     this.proxySlot('bottom', this.genFooters(props)),
       //   ])
       // }
-
       return this.$createElement(KSimpleTable, {
         props: simpleProps,
         class: {
-          'k-data-table--mobile': this.isMobile
+          'k-data-table--mobile': this.isMobile,
+          'k-data-table--selectable': this.showSelect
         }
-      }, [this.proxySlot('top', getSlot(this, 'top', { ...props,
+      }, [this.proxySlot('top', getSlot(this, 'top', {
+        ...props,
         isMobile: this.isMobile
       }, true)), this.genCaption(props), this.genColgroup(props), this.genHeaders(props), this.genBody(props), this.genFoot(props), this.proxySlot('bottom', this.genFooters(props))]);
     },
-
     proxySlot(slot, content) {
       return this.$createElement('template', {
         slot
       }, content);
     }
-
   },
-
   render() {
     return this.$createElement(KData, {
-      props: { ...this.$props,
+      props: {
+        ...this.$props,
         customFilter: this.customFilterWithColumns,
         customSort: this.customSortWithHeaders,
         itemsPerPage: this.computedItemsPerPage
@@ -617,6 +606,5 @@ export default mixins(KDataIterator, Loadable).extend({
       }
     });
   }
-
 });
 //# sourceMappingURL=KDataTable.js.map