kdutify 0.16.9-rc.0

package/es5/components/KSelect/mixins/select-autocomplete.js

@@ -0,0 +1,125 @@
+/**
+ * Select autocomplete
+ *
+ * @mixin
+ *
+ * Handles logic when using the "autocomplete" prop
+ */
+export default {
+  props: {
+    filter: {
+      type: Function,
+      default: function _default(item, queryText, itemText) {
+        var hasValue = function hasValue(val) {
+          return [undefined, null].includes(val);
+        };
+
+        var text = hasValue(itemText) ? '' : itemText;
+        var query = hasValue(queryText) ? '' : queryText;
+
+        return text.toString().toLowerCase().indexOf(query.toString().toLowerCase()) > -1;
+      }
+    }
+  },
+
+  methods: {
+    genFiltered: function genFiltered(text) {
+      if (!this.isAutocomplete || !this.searchValue || this.filteredItems.length < 1) return text;
+
+      text = (text || '').toString();
+
+      var _getMaskedCharacters = this.getMaskedCharacters(text),
+          start = _getMaskedCharacters.start,
+          middle = _getMaskedCharacters.middle,
+          end = _getMaskedCharacters.end;
+
+      return '' + start + this.genHighlight(middle) + end;
+    },
+    genHighlight: function genHighlight(text) {
+      if (this.isNotFiltering) return text;
+
+      return '<span class="list__tile__mask">' + text + '</span>';
+    },
+    getMaskedCharacters: function getMaskedCharacters(text) {
+      var searchValue = (this.searchValue || '').toString().toLowerCase();
+      var index = text.toLowerCase().indexOf(searchValue);
+
+      if (index < 0) return { start: '', middle: text, end: '' };
+
+      var start = text.slice(0, index);
+      var middle = text.slice(index, index + searchValue.length);
+      var end = text.slice(index + searchValue.length);
+      return { start: start, middle: middle, end: end };
+    },
+    filterSearch: function filterSearch() {
+      var _this = this;
+
+      if (!this.isAutocomplete) return this.computedItems;
+
+      return this.computedItems.filter(function (i) {
+        return _this.filter(i, _this.searchValue, _this.getText(i));
+      });
+    },
+    onKeyDown: function onKeyDown(e) {
+      var _this2 = this;
+
+      // If enter, space, up, or down is pressed, open menu
+      if (!this.menuIsActive && [13, 32, 38, 40].includes(e.keyCode)) {
+        e.preventDefault();
+        return this.showMenuItems();
+      }
+
+      // If escape or tab with no search, blur
+      if (e.keyCode === 27 || e.keyCode === 9 && !this.searchValue) {
+        return this.blur();
+      }
+
+      // Tab shouldn't switch inputs
+      if (e.keyCode === 9) {
+        this.tags ? e.preventDefault() : this.blur();
+      }
+
+      if (!this.isAutocomplete || ![32].includes(e.keyCode) // space
+      ) this.$refs.menu.changeListIndex(e);
+
+      // Up or down
+      if ([38, 40].includes(e.keyCode)) this.selectedIndex = -1;
+
+      if (this.isAutocomplete && !this.hideSelections && !this.searchValue) this.changeSelectedIndex(e.keyCode);
+
+      if (!this.tags || !this.searchValue) return;
+
+      // Tab, enter
+      if ([9, 13].includes(e.keyCode)) {
+        var newItem = this.filteredItems.length && this.$refs.menu.listIndex >= 0 ? this.filteredItems[this.$refs.menu.listIndex] : this.searchValue;
+        this.addTag(newItem);
+      }
+
+      // Left arrow
+      if (e.keyCode === 37 && this.$refs.input.selectionStart === 0 && this.selectedItems.length) {
+        this.addTag(this.searchValue);
+        this.$nextTick(function () {
+          _this2.selectedIndex = Math.max(_this2.selectedItems.length - 2, 0);
+        });
+      }
+
+      // Right arrow
+      if (e.keyCode === 39 && this.$refs.input.selectionEnd === this.searchValue.length) {
+        this.$refs.menu.listIndex = -1;
+      }
+    },
+    addTag: function addTag(content) {
+      var _this3 = this;
+
+      if (this.selectedItems.includes(content)) {
+        this.$delete(this.selectedItems, this.selectedItems.indexOf(content));
+      } else {
+        this.selectedItems.push(content);
+      }
+      this.$nextTick(function () {
+        _this3.searchValue = null;
+        _this3.$emit('change', _this3.selectedItems);
+      });
+    }
+  }
+};

package/es5/components/KSelect/mixins/select-generators.js

@@ -0,0 +1,298 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+import { getObjectValueByPath } from '../../../util/helpers';
+
+/**
+ * Select generators
+ *
+ * @mixin
+ *
+ * Used for creating the DOM elements for KSelect
+ */
+export default {
+  methods: {
+    genMenu: function genMenu() {
+      var _this = this;
+
+      var offsetY = this.isAutocomplete || this.offset || this.isDropdown;
+      var nudgeTop = 0;
+
+      if (this.auto) nudgeTop = -18;else if (this.solo) nudgeTop = 0;else if (this.isDropdown) nudgeTop = 26;else if (offsetY) nudgeTop = 24;
+
+      var data = {
+        ref: 'menu',
+        props: {
+          activator: this.$el,
+          auto: this.auto,
+          closeOnClick: false,
+          closeOnContentClick: !this.isMultiple,
+          contentClass: this.computedContentClass,
+          disabled: this.disabled,
+          maxHeight: this.maxHeight,
+          nudgeTop: nudgeTop,
+          offsetY: offsetY,
+          offsetOverflow: this.isAutocomplete,
+          openOnClick: false,
+          value: this.menuIsActive && (!this.tags || this.filteredItems.length > 0) && (!this.combobox || this.filteredItems.length > 0),
+          zIndex: this.menuZIndex
+        },
+        on: {
+          input: function input(val) {
+            if (!val) {
+              _this.menuIsActive = false;
+            }
+          }
+        }
+      };
+
+      if (this.isAutocomplete) data.props.transition = '';
+
+      this.minWidth && (data.props.minWidth = this.minWidth);
+
+      return this.$createElement('k-menu', data, [this.genList()]);
+    },
+    genSelectionsAndSearch: function genSelectionsAndSearch() {
+      return this.$createElement('div', {
+        'class': 'input-group__selections',
+        style: { 'overflow': 'hidden' },
+        ref: 'activator'
+      }, [].concat(_toConsumableArray(this.genSelections()), [this.genSearch()]));
+    },
+    genSelections: function genSelections() {
+      var _this2 = this;
+
+      if (this.hideSelections) return [];
+
+      var children = [];
+      var chips = this.chips;
+      var slots = this.$scopedSlots.selection;
+      var length = this.selectedItems.length;
+      this.selectedItems.forEach(function (item, i) {
+        if (slots) {
+          children.push(_this2.genSlotSelection(item, i));
+        } else if (chips) {
+          children.push(_this2.genChipSelection(item, i));
+        } else if (_this2.segmented) {
+          children.push(_this2.genSegmentedBtn(item, i));
+        } else {
+          children.push(_this2.genCommaSelection(item, i < length - 1, i));
+        }
+      });
+
+      return children;
+    },
+    genSearch: function genSearch() {
+      var _this3 = this;
+
+      var data = {
+        staticClass: 'input-group--select__autocomplete',
+        'class': {
+          'input-group--select__autocomplete--index': this.selectedIndex > -1
+        },
+        style: {
+          flex: this.shouldBreak ? '1 0 100%' : null
+        },
+        attrs: _extends({}, this.$attrs, {
+          disabled: this.disabled || !this.isAutocomplete,
+          readonly: this.readonly,
+          tabindex: this.disabled || !this.isAutocomplete ? -1 : this.tabindex
+        }),
+        domProps: {
+          value: this.maskText(this.lazySearch || '')
+        },
+        directives: [{
+          name: 'show',
+          value: this.isAutocomplete || this.placeholder && !this.selectedItems.length
+        }],
+        ref: 'input',
+        key: 'input'
+      };
+
+      if (this.isAutocomplete) {
+        data.attrs.role = 'combobox';
+        data.domProps.autocomplete = this.browserAutocomplete;
+
+        data.on = _extends({}, this.genListeners(), {
+          input: function input(e) {
+            _this3.searchValue = _this3.unmaskText(e.target.value);
+          }
+        });
+
+        if (this.combobox) {
+          // When using the combobox
+          // update inputValue and
+          // set the menu status
+          data.on.blur = function () {
+            _this3.inputValue = _this3.lazySearch;
+          };
+        }
+
+        data.directives = data.directives.concat(this.genDirectives());
+      }
+
+      if (this.placeholder) data.domProps.placeholder = this.placeholder;
+
+      return this.$createElement('input', data);
+    },
+    genSegmentedBtn: function genSegmentedBtn(item) {
+      if (!item.text || !item.callback) {
+        console.warn('[Kdutify] Warn: When using the k-select component with \'segmented\' prop without a selection slot, items must contain both a text and callback property');
+        return null;
+      }
+
+      return this.$createElement('k-btn', {
+        props: {
+          flat: true
+        },
+        on: {
+          click: function click(e) {
+            e.stopPropagation();
+            item.callback(e);
+          }
+        }
+      }, [item.text]);
+    },
+    genSlotSelection: function genSlotSelection(item, index) {
+      return this.$scopedSlots.selection({
+        parent: this,
+        item: item,
+        index: index,
+        selected: index === this.selectedIndex,
+        disabled: this.disabled || this.readonly
+      });
+    },
+    genChipSelection: function genChipSelection(item, index) {
+      var _this4 = this;
+
+      var isDisabled = this.disabled || this.readonly;
+      var click = function click(e) {
+        if (isDisabled) return;
+
+        e.stopPropagation();
+        _this4.focus();
+        _this4.selectedIndex = index;
+      };
+
+      return this.$createElement('k-chip', {
+        staticClass: 'chip--select-multi',
+        attrs: { tabindex: '-1' },
+        props: {
+          close: !isDisabled,
+          dark: this.dark,
+          disabled: isDisabled,
+          selected: index === this.selectedIndex
+        },
+        on: {
+          click: click,
+          focus: click,
+          input: function input() {
+            return _this4.selectItem(item);
+          }
+        },
+        key: this.getValue(item)
+      }, this.getText(item));
+    },
+    genCommaSelection: function genCommaSelection(item, comma, index) {
+      return this.$createElement('div', {
+        staticClass: 'input-group__selections__comma',
+        'class': {
+          'input-group__selections__comma--active': index === this.selectedIndex
+        },
+        key: JSON.stringify(this.getValue(item)) // Item may be an object
+      }, '' + this.getText(item) + (comma ? ', ' : ''));
+    },
+    genList: function genList() {
+      var _this5 = this;
+
+      var children = this.filteredItems.map(function (o) {
+        if (o.header) return _this5.genHeader(o);
+        if (o.divider) return _this5.genDivider(o);else return _this5.genTile(o);
+      });
+
+      if (!children.length) {
+        var noData = this.$slots['no-data'];
+        if (noData) {
+          children.push(noData);
+        } else {
+          children.push(this.genTile(this.noDataText, true));
+        }
+      }
+
+      return this.$createElement('k-card', [this.$createElement('k-list', {
+        ref: 'list'
+      }, children)]);
+    },
+    genHeader: function genHeader(item) {
+      return this.$createElement('k-subheader', {
+        props: item
+      }, item.header);
+    },
+    genDivider: function genDivider(item) {
+      return this.$createElement('k-divider', {
+        props: item
+      });
+    },
+    genTile: function genTile(item, disabled) {
+      var _this6 = this;
+
+      var active = this.selectedItems.indexOf(item) !== -1;
+
+      if (typeof disabled === 'undefined') {
+        disabled = getObjectValueByPath(item, this.itemDisabled);
+      }
+
+      var data = {
+        on: {
+          click: function click(e) {
+            if (disabled) return;
+
+            _this6.selectItem(item);
+          }
+        },
+        props: {
+          avatar: item === Object(item) && this.itemAvatar in item,
+          ripple: true,
+          value: active
+        }
+      };
+
+      if (disabled) {
+        data.props.disabled = disabled;
+      }
+
+      if (this.$scopedSlots.item) {
+        return this.$createElement('k-list-tile', data, [this.$scopedSlots.item({ parent: this, item: item })]);
+      }
+
+      return this.$createElement('k-list-tile', data, [this.genAction(item, active), this.genContent(item)]);
+    },
+    genAction: function genAction(item, active) {
+      var _this7 = this;
+
+      if (!this.isMultiple) return null;
+
+      var data = {
+        staticClass: 'list__tile__action--select-multi',
+        on: {
+          click: function click(e) {
+            e.stopPropagation();
+            _this7.selectItem(item);
+          }
+        }
+      };
+
+      return this.$createElement('k-list-tile-action', data, [this.$createElement('k-checkbox', { props: { inputValue: active } })]);
+    },
+    genContent: function genContent(item) {
+      var text = this.getText(item);
+
+      return this.$createElement('k-list-tile-content', [this.$createElement('k-list-tile-title', {
+        domProps: {
+          innerHTML: this.genFiltered(text)
+        }
+      })]);
+    }
+  }
+};