kdutify 0.16.9-rc.0 → 2.6.1

package/es5/components/KSelect/KSelect.js

@@ -1,635 +1,861 @@
-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; };
+"use strict";
 
-require('../../../src/stylus/components/_text-fields.styl');
-require('../../../src/stylus/components/_input-groups.styl');
-require('../../../src/stylus/components/_select.styl');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.defaultMenuProps = void 0;
 
-// Components
-import KCard from '../KCard';
-import KCheckbox from '../KCheckbox';
-import { KList, KListTile, KListTileAction, KListTileContent, KListTileTitle } from '../KList';
-import KMenu from '../KMenu';
-import KBtn from '../KBtn';
+require("..\\..\\..\\src\\components\\KTextField\\KTextField.sass");
 
-// Mixins
-import Colorable from '../../mixins/colorable';
-import Dependent from '../../mixins/dependent';
-import Filterable from '../../mixins/filterable';
-import Input from '../../mixins/input';
-import Maskable from '../../mixins/maskable';
+require("..\\..\\..\\src\\components\\KSelect\\KSelect.sass");
 
-// Component level mixins
-import Autocomplete from './mixins/select-autocomplete';
-import Generators from './mixins/select-generators';
+var _KChip = _interopRequireDefault(require("../KChip"));
 
-// Directives
-import ClickOutside from '../../directives/click-outside';
+var _KMenu = _interopRequireDefault(require("../KMenu"));
 
-// Helpers
-import { getObjectValueByPath } from '../../util/helpers';
+var _KSelectList = _interopRequireDefault(require("./KSelectList"));
 
-export default {
-  name: 'k-select',
+var _KInput = _interopRequireDefault(require("../KInput"));
 
-  inheritAttrs: false,
-
-  components: {
-    KCard: KCard,
-    KCheckbox: KCheckbox,
-    KList: KList,
-    KListTile: KListTile,
-    KListTileAction: KListTileAction,
-    KListTileContent: KListTileContent,
-    KListTileTitle: KListTileTitle,
-    KMenu: KMenu,
-    KBtn: KBtn
-  },
+var _KTextField2 = _interopRequireDefault(require("../KTextField/KTextField"));
 
-  directives: {
-    ClickOutside: ClickOutside
-  },
+var _comparable = _interopRequireDefault(require("../../mixins/comparable"));
 
-  mixins: [Autocomplete, Colorable, Dependent, Filterable, Generators, Input, Maskable],
+var _dependent = _interopRequireDefault(require("../../mixins/dependent"));
 
-  data: function data() {
-    return {
-      cachedItems: [],
-      content: {},
-      inputValue: (this.multiple || this.tags) && !this.value ? [] : this.value,
-      isBooted: false,
-      lastItem: 20,
-      lazySearch: null,
-      isActive: false,
-      menuIsActive: false,
-      searchTimeout: null,
-      selectedIndex: -1,
-      selectedItems: [],
-      shouldBreak: false
-    };
-  },
+var _filterable = _interopRequireDefault(require("../../mixins/filterable"));
+
+var _clickOutside = _interopRequireDefault(require("../../directives/click-outside"));
+
+var _mergeData = _interopRequireDefault(require("../../util/mergeData"));
+
+var _helpers = require("../../util/helpers");
+
+var _console = require("../../util/console");
+
+var _mixins = _interopRequireDefault(require("../../util/mixins"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultMenuProps = {
+  closeOnClick: false,
+  closeOnContentClick: false,
+  disableKeys: true,
+  openOnClick: false,
+  maxHeight: 304
+}; // Types
+
+exports.defaultMenuProps = defaultMenuProps;
+var baseMixins = (0, _mixins.default)(_KTextField2.default, _comparable.default, _dependent.default, _filterable.default);
+/* @kdujs/component */
+
+var _default2 = baseMixins.extend().extend({
+  name: 'k-select',
+  directives: {
+    ClickOutside: _clickOutside.default
+  },
   props: {
     appendIcon: {
       type: String,
-      default: 'arrow_drop_down'
+      default: '$dropdown'
+    },
+    attach: {
+      type: null,
+      default: false
     },
-    appendIconCb: Function,
-    auto: Boolean,
-    autocomplete: Boolean,
     cacheItems: Boolean,
     chips: Boolean,
     clearable: Boolean,
-    color: {
-      type: String,
-      default: 'primary'
-    },
-    combobox: Boolean,
-    debounceSearch: {
-      type: [Number, String],
-      default: 200
-    },
-    browserAutocomplete: {
-      type: String,
-      default: 'on'
-    },
+    deletableChips: Boolean,
+    disableLookup: Boolean,
+    eager: Boolean,
+    hideSelected: Boolean,
     items: {
       type: Array,
       default: function _default() {
         return [];
       }
     },
-    itemAvatar: {
+    itemColor: {
       type: String,
-      default: 'avatar'
+      default: 'primary'
+    },
+    itemDisabled: {
+      type: [String, Array, Function],
+      default: 'disabled'
     },
     itemText: {
-      type: String,
+      type: [String, Array, Function],
       default: 'text'
     },
     itemValue: {
-      type: String,
+      type: [String, Array, Function],
       default: 'value'
     },
-    itemDisabled: {
-      type: String,
-      default: 'disabled'
-    },
-    maxHeight: {
-      type: [Number, String],
-      default: 300
-    },
-    minWidth: {
-      type: [Boolean, Number, String],
-      default: false
+    menuProps: {
+      type: [String, Array, Object],
+      default: function _default() {
+        return defaultMenuProps;
+      }
     },
     multiple: Boolean,
-    multiLine: Boolean,
-    solo: Boolean,
-    searchInput: {
-      default: null
-    },
-    singleLine: Boolean,
-    tags: Boolean,
+    openOnClear: Boolean,
     returnObject: Boolean,
-    overflow: Boolean,
-    segmented: Boolean,
-    editable: Boolean
+    smallChips: Boolean
+  },
+  data: function data() {
+    return {
+      cachedItems: this.cacheItems ? this.items : [],
+      menuIsBooted: false,
+      isMenuActive: false,
+      lastItem: 20,
+      // As long as a value is defined, show it
+      // Otherwise, check if multiple
+      // to determine which default to provide
+      lazyValue: this.value !== undefined ? this.value : this.multiple ? [] : undefined,
+      selectedIndex: -1,
+      selectedItems: [],
+      keyboardLookupPrefix: '',
+      keyboardLookupLastTime: 0
+    };
   },
-
   computed: {
+    /* All items that the select has */
+    allItems: function allItems() {
+      return this.filterDuplicates(this.cachedItems.concat(this.items));
+    },
     classes: function classes() {
-      var classes = {
-        'input-group--text-field input-group--select': true,
-        'input-group--auto': this.auto,
-        'input-group--overflow': this.overflow,
-        'input-group--segmented': this.segmented,
-        'input-group--editable': this.editable,
-        'input-group--autocomplete': this.isAutocomplete,
-        'input-group--single-line': this.singleLine || this.isDropdown,
-        'input-group--multi-line': this.multiLine,
-        'input-group--chips': this.chips,
-        'input-group--solo': this.solo,
-        'input-group--multiple': this.multiple
-      };
-
-      if (this.hasError) {
-        classes['error--text'] = true;
-      } else {
-        return this.addTextColorClassChecks(classes);
-      }
-
-      return classes;
+      return _objectSpread(_objectSpread({}, _KTextField2.default.options.computed.classes.call(this)), {}, {
+        'k-select': true,
+        'k-select--chips': this.hasChips,
+        'k-select--chips--small': this.smallChips,
+        'k-select--is-menu-active': this.isMenuActive,
+        'k-select--is-multi': this.multiple
+      });
     },
-    computedContentClass: function computedContentClass() {
-      var children = ['menu__content--select', this.auto ? 'menu__content--auto' : '', this.isDropdown ? 'menu__content--dropdown' : '', this.isAutocomplete ? 'menu__content--autocomplete' : ''];
 
-      return children.join(' ');
-    },
+    /* Used by other components to overwrite */
     computedItems: function computedItems() {
-      return this.filterDuplicates(this.cachedItems.concat(this.items));
+      return this.allItems;
     },
+    computedOwns: function computedOwns() {
+      return "list-".concat(this._uid);
+    },
+    computedCounterValue: function computedCounterValue() {
+      var value = this.multiple ? this.selectedItems : (this.getText(this.selectedItems[0]) || '').toString();
+
+      if (typeof this.counterValue === 'function') {
+        return this.counterValue(value);
+      }
 
-    /**
-     * The range of the current input text
-     *
-     * @return {Number}
-     */
-    currentRange: function currentRange() {
-      return this.getText(this.selectedItem || '').length;
+      return value.length;
     },
-    filteredItems: function filteredItems() {
-      // If we are not actively filtering
-      // Show all available items
-      var items = this.isNotFiltering ? this.computedItems : this.filterSearch();
+    directives: function directives() {
+      var _this = this;
 
-      return !this.auto ? items.slice(0, this.lastItem) : items;
+      return this.isFocused ? [{
+        name: 'click-outside',
+        value: {
+          handler: this.blur,
+          closeConditional: this.closeConditional,
+          include: function include() {
+            return _this.getOpenDependentElements();
+          }
+        }
+      }] : undefined;
     },
-    hideSelections: function hideSelections() {
-      return this.isAutocomplete && !this.isMultiple && this.isFocused && !this.chips;
+    dynamicHeight: function dynamicHeight() {
+      return 'auto';
     },
-    isNotFiltering: function isNotFiltering() {
-      return this.isAutocomplete && this.isDirty && this.searchValue === this.getText(this.selectedItem);
+    hasChips: function hasChips() {
+      return this.chips || this.smallChips;
     },
-    isAutocomplete: function isAutocomplete() {
-      return this.autocomplete || this.editable || this.tags || this.combobox;
+    hasSlot: function hasSlot() {
+      return Boolean(this.hasChips || this.$scopedSlots.selection);
     },
     isDirty: function isDirty() {
       return this.selectedItems.length > 0;
     },
-    isDropdown: function isDropdown() {
-      return this.segmented || this.overflow || this.editable || this.solo;
-    },
-    isMultiple: function isMultiple() {
-      return this.multiple || this.tags;
+    listData: function listData() {
+      var scopeId = this.$knode && this.$knode.context.$options._scopeId;
+      var attrs = scopeId ? _defineProperty({}, scopeId, true) : {};
+      return {
+        attrs: _objectSpread(_objectSpread({}, attrs), {}, {
+          id: this.computedOwns
+        }),
+        props: {
+          action: this.multiple,
+          color: this.itemColor,
+          dense: this.dense,
+          hideSelected: this.hideSelected,
+          items: this.virtualizedItems,
+          itemDisabled: this.itemDisabled,
+          itemText: this.itemText,
+          itemValue: this.itemValue,
+          noDataText: this.$kdutify.lang.t(this.noDataText),
+          selectedItems: this.selectedItems
+        },
+        on: {
+          select: this.selectItem
+        },
+        scopedSlots: {
+          item: this.$scopedSlots.item
+        }
+      };
     },
+    staticList: function staticList() {
+      if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
+        (0, _console.consoleError)('assert: staticList should not be called if slots are used');
+      }
 
-    searchValue: {
-      get: function get() {
-        return this.lazySearch;
-      },
-      set: function set(val) {
-        var _this = this;
-
-        if (!this.isAutocomplete || this.selectedIndex > -1) return;
-
-        this.lazySearch = val;
-
-        clearTimeout(this.searchTimeout);
+      return this.$createElement(_KSelectList.default, this.listData);
+    },
+    virtualizedItems: function virtualizedItems() {
+      return this.$_menuProps.auto ? this.computedItems : this.computedItems.slice(0, this.lastItem);
+    },
+    menuCanShow: function menuCanShow() {
+      return true;
+    },
+    $_menuProps: function $_menuProps() {
+      var normalisedProps = typeof this.menuProps === 'string' ? this.menuProps.split(',') : this.menuProps;
 
-        this.searchTimeout = setTimeout(function () {
-          _this.$emit('update:searchInput', val);
-        }, this.debounceSearch);
+      if (Array.isArray(normalisedProps)) {
+        normalisedProps = normalisedProps.reduce(function (acc, p) {
+          acc[p.trim()] = true;
+          return acc;
+        }, {});
       }
+
+      return _objectSpread(_objectSpread({}, defaultMenuProps), {}, {
+        eager: this.eager,
+        value: this.menuCanShow && this.isMenuActive,
+        nudgeBottom: normalisedProps.offsetY ? 1 : 0
+      }, normalisedProps);
+    }
+  },
+  watch: {
+    internalValue: function internalValue(val) {
+      this.initialValue = val;
+      this.setSelectedItems();
     },
-    selectedItem: function selectedItem() {
+    isMenuActive: function isMenuActive(val) {
       var _this2 = this;
 
-      if (this.isMultiple) return null;
+      window.setTimeout(function () {
+        return _this2.onMenuActiveChange(val);
+      });
+    },
+    items: {
+      immediate: true,
+      handler: function handler(val) {
+        var _this3 = this;
+
+        if (this.cacheItems) {
+          // Breaks kdu-test-utils if
+          // this isn't calculated
+          // on the next tick
+          this.$nextTick(function () {
+            _this3.cachedItems = _this3.filterDuplicates(_this3.cachedItems.concat(val));
+          });
+        }
 
-      return this.selectedItems.find(function (i) {
-        return _this2.getValue(i) === _this2.getValue(_this2.inputValue);
-      }) || null;
+        this.setSelectedItems();
+      }
     }
   },
+  methods: {
+    /** @public */
+    blur: function blur(e) {
+      _KTextField2.default.options.methods.blur.call(this, e);
 
-  watch: {
-    inputValue: function inputValue(val) {
-      // Populate selected items
-      this.genSelectedItems(val);
-
-      this.$emit('input', val);
-
-      // When inputValue is changed
-      // and combobox is true set
-      // menu property to false
-      if (this.combobox) this.menuIsActive = false;
-    },
-    isActive: function isActive(val) {
-      if (!val) {
-        this.searchValue = null;
-        this.menuIsActive = false;
-        this.isFocused = false;
-        this.selectedIndex = -1;
-      } else {
-        this.searchValue = this.getText(this.selectedItem);
-      }
+      this.isMenuActive = false;
+      this.isFocused = false;
+      this.selectedIndex = -1;
+      this.setMenuIndex(-1);
+    },
 
-      // this.lastItem += !val ? 20 : 0
+    /** @public */
+    activateMenu: function activateMenu() {
+      if (!this.isInteractive || this.isMenuActive) return;
+      this.isMenuActive = true;
     },
-    isBooted: function isBooted() {
-      var _this3 = this;
+    clearableCallback: function clearableCallback() {
+      var _this4 = this;
 
+      this.setValue(this.multiple ? [] : null);
+      this.setMenuIndex(-1);
       this.$nextTick(function () {
-        if (_this3.content && _this3.content.addEventListener) {
-          _this3.content.addEventListener('scroll', _this3.onScroll, false);
-        }
+        return _this4.$refs.input && _this4.$refs.input.focus();
       });
+      if (this.openOnClear) this.isMenuActive = true;
     },
-    isFocused: function isFocused(val) {
-      var _this4 = this;
-
-      // When focusing the input
-      // re-set the caret position
-      if (this.isAutocomplete && !this.mask && !this.isMultiple && val) {
-        this.setCaretPosition(this.currentRange);
-        this.shouldBreak && this.$nextTick(function () {
-          _this4.$refs.input.scrollLeft = _this4.$refs.input.scrollWidth;
-        });
-      }
+    closeConditional: function closeConditional(e) {
+      if (!this.isMenuActive) return true;
+      return !this._isDestroyed && ( // Click originates from outside the menu content
+      // Multiple selects don't close when an item is clicked
+      !this.getContent() || !this.getContent().contains(e.target)) && // Click originates from outside the element
+      this.$el && !this.$el.contains(e.target) && e.target !== this.$el;
     },
-    items: function items(val) {
-      var _this5 = this;
+    filterDuplicates: function filterDuplicates(arr) {
+      var uniqueValues = new Map();
 
-      if (this.cacheItems) {
-        this.cachedItems = this.filterDuplicates(this.cachedItems.concat(val));
-      }
+      for (var index = 0; index < arr.length; ++index) {
+        var item = arr[index]; // Do not deduplicate headers or dividers (#12517)
 
-      this.$refs.menu.listIndex = -1;
+        if (item.header || item.divider) {
+          uniqueValues.set(item, item);
+          continue;
+        }
 
-      this.searchValue && this.$nextTick(function () {
-        _this5.$refs.menu && (_this5.$refs.menu.listIndex = 0);
-      });
+        var val = this.getValue(item); // TODO: comparator
 
-      this.genSelectedItems();
-    },
-    menuIsActive: function menuIsActive(val) {
-      if (!val) return;
+        !uniqueValues.has(val) && uniqueValues.set(val, item);
+      }
 
-      this.isBooted = true;
-      this.isActive = true;
+      return Array.from(uniqueValues.values());
     },
-    isMultiple: function isMultiple(val) {
-      this.inputValue = val ? [] : null;
+    findExistingIndex: function findExistingIndex(item) {
+      var _this5 = this;
+
+      var itemValue = this.getValue(item);
+      return (this.internalValue || []).findIndex(function (i) {
+        return _this5.valueComparator(_this5.getValue(i), itemValue);
+      });
     },
-    searchInput: function searchInput(val) {
-      this.searchValue = val;
+    getContent: function getContent() {
+      return this.$refs.menu && this.$refs.menu.$refs.content;
     },
-    searchValue: function searchValue(val) {
+    genChipSelection: function genChipSelection(item, index) {
       var _this6 = this;
 
-      // Wrap input to next line if overflowing
-      if (this.$refs.input.scrollWidth > this.$refs.input.clientWidth) {
-        this.shouldBreak = true;
-        this.$nextTick(this.$refs.menu.updateDimensions);
-      } else if (val === null) {
-        this.shouldBreak = false;
+      var isDisabled = this.isDisabled || this.getDisabled(item);
+      var isInteractive = !isDisabled && this.isInteractive;
+      return this.$createElement(_KChip.default, {
+        staticClass: 'k-chip--select',
+        attrs: {
+          tabindex: -1
+        },
+        props: {
+          close: this.deletableChips && isInteractive,
+          disabled: isDisabled,
+          inputValue: index === this.selectedIndex,
+          small: this.smallChips
+        },
+        on: {
+          click: function click(e) {
+            if (!isInteractive) return;
+            e.stopPropagation();
+            _this6.selectedIndex = index;
+          },
+          'click:close': function clickClose() {
+            return _this6.onChipInput(item);
+          }
+        },
+        key: JSON.stringify(this.getValue(item))
+      }, this.getText(item));
+    },
+    genCommaSelection: function genCommaSelection(item, index, last) {
+      var color = index === this.selectedIndex && this.computedColor;
+      var isDisabled = this.isDisabled || this.getDisabled(item);
+      return this.$createElement('div', this.setTextColor(color, {
+        staticClass: 'k-select__selection k-select__selection--comma',
+        class: {
+          'k-select__selection--disabled': isDisabled
+        },
+        key: JSON.stringify(this.getValue(item))
+      }), "".concat(this.getText(item)).concat(last ? '' : ', '));
+    },
+    genDefaultSlot: function genDefaultSlot() {
+      var selections = this.genSelections();
+      var input = this.genInput(); // If the return is an empty array
+      // push the input
+
+      if (Array.isArray(selections)) {
+        selections.push(input); // Otherwise push it into children
+      } else {
+        selections.children = selections.children || [];
+        selections.children.push(input);
       }
 
-      // Activate menu if inactive and searching
-      if (this.isActive && !this.menuIsActive && val !== this.getValue(this.selectedItem)) {
-        this.menuIsActive = true;
+      return [this.genFieldset(), this.$createElement('div', {
+        staticClass: 'k-select__slot',
+        directives: this.directives
+      }, [this.genLabel(), this.prefix ? this.genAffix('prefix') : null, selections, this.suffix ? this.genAffix('suffix') : null, this.genClearIcon(), this.genIconSlot(), this.genHiddenInput()]), this.genMenu(), this.genProgress()];
+    },
+    genIcon: function genIcon(type, cb, extraData) {
+      var icon = _KInput.default.options.methods.genIcon.call(this, type, cb, extraData);
+
+      if (type === 'append') {
+        // Don't allow the dropdown icon to be focused
+        icon.children[0].data = (0, _mergeData.default)(icon.children[0].data, {
+          attrs: {
+            tabindex: icon.children[0].componentOptions.listeners && '-1',
+            'aria-hidden': 'true',
+            'aria-label': undefined
+          }
+        });
       }
 
-      this.$refs.menu.listIndex = null;
+      return icon;
+    },
+    genInput: function genInput() {
+      var input = _KTextField2.default.options.methods.genInput.call(this);
 
-      this.$nextTick(function () {
-        _this6.$refs.menu && (_this6.$refs.menu.listIndex = val ? 0 : -1);
+      delete input.data.attrs.name;
+      input.data = (0, _mergeData.default)(input.data, {
+        domProps: {
+          value: null
+        },
+        attrs: {
+          readonly: true,
+          type: 'text',
+          'aria-readonly': String(this.isReadonly),
+          'aria-activedescendant': (0, _helpers.getObjectValueByPath)(this.$refs.menu, 'activeTile.id'),
+          autocomplete: (0, _helpers.getObjectValueByPath)(input.data, 'attrs.autocomplete', 'off'),
+          placeholder: !this.isDirty && (this.persistentPlaceholder || this.isFocused || !this.hasLabel) ? this.placeholder : undefined
+        },
+        on: {
+          keypress: this.onKeyPress
+        }
+      });
+      return input;
+    },
+    genHiddenInput: function genHiddenInput() {
+      return this.$createElement('input', {
+        domProps: {
+          value: this.lazyValue
+        },
+        attrs: {
+          type: 'hidden',
+          name: this.attrs$.name
+        }
       });
     },
-    selectedItems: function selectedItems() {
-      clearTimeout(this.searchTimeout);
+    genInputSlot: function genInputSlot() {
+      var render = _KTextField2.default.options.methods.genInputSlot.call(this);
 
-      if (this.isAutocomplete) {
-        this.$nextTick(this.$refs.menu.updateDimensions);
+      render.data.attrs = _objectSpread(_objectSpread({}, render.data.attrs), {}, {
+        role: 'button',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': String(this.isMenuActive),
+        'aria-owns': this.computedOwns
+      });
+      return render;
+    },
+    genList: function genList() {
+      // If there's no slots, we can use a cached KNode to improve performance
+      if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
+        return this.genListWithSlot();
+      } else {
+        return this.staticList;
       }
     },
-    value: function value(val) {
-      this.inputValue = val;
-      this.validate();
-    }
-  },
+    genListWithSlot: function genListWithSlot() {
+      var _this7 = this;
 
-  mounted: function mounted() {
-    // If instance is being destroyed
-    // do not run mounted functions
-    if (this._isDestroyed) return;
+      var slots = ['prepend-item', 'no-data', 'append-item'].filter(function (slotName) {
+        return _this7.$slots[slotName];
+      }).map(function (slotName) {
+        return _this7.$createElement('template', {
+          slot: slotName
+        }, _this7.$slots[slotName]);
+      }); // Requires destructuring due to Kdu
+      // modifying the `on` property when passed
+      // as a referenced object
 
-    // Evaluate the selected items immediately
-    // to avoid a unnecessary label transition
-    this.genSelectedItems();
+      return this.$createElement(_KSelectList.default, _objectSpread({}, this.listData), slots);
+    },
+    genMenu: function genMenu() {
+      var _this8 = this;
 
-    this.content = this.$refs.menu.$refs.content;
-  },
-  beforeDestroy: function beforeDestroy() {
-    if (this.isBooted) {
-      if (this.content) {
-        this.content.removeEventListener('scroll', this.onScroll, false);
+      var props = this.$_menuProps;
+      props.activator = this.$refs['input-slot']; // Attach to root el so that
+      // menu covers prepend/append icons
+
+      if ( // TODO: make this a computed property or helper or something
+      this.attach === '' || // If used as a boolean prop (<k-menu attach>)
+      this.attach === true || // If bound to a boolean (<k-menu :attach="true">)
+      this.attach === 'attach' // If bound as boolean prop in pug (k-menu(attach))
+      ) {
+          props.attach = this.$el;
+        } else {
+        props.attach = this.attach;
       }
-    }
-  },
 
+      return this.$createElement(_KMenu.default, {
+        attrs: {
+          role: undefined
+        },
+        props: props,
+        on: {
+          input: function input(val) {
+            _this8.isMenuActive = val;
+            _this8.isFocused = val;
+          },
+          scroll: this.onScroll
+        },
+        ref: 'menu'
+      }, [this.genList()]);
+    },
+    genSelections: function genSelections() {
+      var length = this.selectedItems.length;
+      var children = new Array(length);
+      var genSelection;
+
+      if (this.$scopedSlots.selection) {
+        genSelection = this.genSlotSelection;
+      } else if (this.hasChips) {
+        genSelection = this.genChipSelection;
+      } else {
+        genSelection = this.genCommaSelection;
+      }
 
-  methods: {
-    blur: function blur() {
-      var _this7 = this;
+      while (length--) {
+        children[length] = genSelection(this.selectedItems[length], length, length === children.length - 1);
+      }
 
-      this.$emit('blur');
-      if (this.isAutocomplete && this.$refs.input) this.$refs.input.blur();
-      this.$nextTick(function () {
-        return _this7.isActive = false;
-      });
+      return this.$createElement('div', {
+        staticClass: 'k-select__selections'
+      }, children);
     },
-    changeSelectedIndex: function changeSelectedIndex(keyCode) {
-      // backspace, left, right, delete
-      if (![8, 37, 39, 46].includes(keyCode)) return;
-
-      var indexes = this.selectedItems.length - 1;
-
-      if (keyCode === 37) {
-        // Left arrow
-        this.selectedIndex = this.selectedIndex === -1 ? indexes : this.selectedIndex - 1;
-      } else if (keyCode === 39) {
-        // Right arrow
-        this.selectedIndex = this.selectedIndex >= indexes ? -1 : this.selectedIndex + 1;
-      } else if (this.selectedIndex === -1) {
-        this.selectedIndex = indexes;
-        return;
-      }
+    genSlotSelection: function genSlotSelection(item, index) {
+      var _this9 = this;
 
-      // backspace/delete
-      if ([8, 46].includes(keyCode)) {
-        var newIndex = this.selectedIndex === indexes ? this.selectedIndex - 1 : this.selectedItems[this.selectedIndex + 1] ? this.selectedIndex : -1;
+      return this.$scopedSlots.selection({
+        attrs: {
+          class: 'k-chip--select'
+        },
+        parent: this,
+        item: item,
+        index: index,
+        select: function select(e) {
+          e.stopPropagation();
+          _this9.selectedIndex = index;
+        },
+        selected: index === this.selectedIndex,
+        disabled: !this.isInteractive
+      });
+    },
+    getMenuIndex: function getMenuIndex() {
+      return this.$refs.menu ? this.$refs.menu.listIndex : -1;
+    },
+    getDisabled: function getDisabled(item) {
+      return (0, _helpers.getPropertyFromItem)(item, this.itemDisabled, false);
+    },
+    getText: function getText(item) {
+      return (0, _helpers.getPropertyFromItem)(item, this.itemText, item);
+    },
+    getValue: function getValue(item) {
+      return (0, _helpers.getPropertyFromItem)(item, this.itemValue, this.getText(item));
+    },
+    onBlur: function onBlur(e) {
+      e && this.$emit('blur', e);
+    },
+    onChipInput: function onChipInput(item) {
+      if (this.multiple) this.selectItem(item);else this.setValue(null); // If all items have been deleted,
+      // open `k-menu`
 
-        this.selectItem(this.selectedItems[this.selectedIndex]);
-        this.selectedIndex = newIndex;
+      if (this.selectedItems.length === 0) {
+        this.isMenuActive = true;
+      } else {
+        this.isMenuActive = false;
       }
-    },
-    compareObjects: function compareObjects(a, b) {
-      var aProps = Object.keys(a);
-      var bProps = Object.keys(b);
 
-      if (aProps.length !== bProps.length) return false;
+      this.selectedIndex = -1;
+    },
+    onClick: function onClick(e) {
+      if (!this.isInteractive) return;
 
-      for (var i = 0, length = aProps.length; i < length; i++) {
-        var propName = aProps[i];
+      if (!this.isAppendInner(e.target)) {
+        this.isMenuActive = true;
+      }
 
-        if (a[propName] !== b[propName]) return false;
+      if (!this.isFocused) {
+        this.isFocused = true;
+        this.$emit('focus');
       }
 
-      return true;
-    },
-    filterDuplicates: function filterDuplicates(arr) {
-      var values = arr.map(this.getValue);
-      return arr.filter(function (el, i) {
-        return i === values.indexOf(values[i]);
-      });
+      this.$emit('click', e);
     },
-    focus: function focus() {
-      this.isActive = true;
-      this.isFocused = true;
+    onEscDown: function onEscDown(e) {
+      e.preventDefault();
 
-      if (this.$refs.input && this.isAutocomplete) {
-        this.$refs.input.focus();
-      } else {
-        this.$el.focus();
+      if (this.isMenuActive) {
+        e.stopPropagation();
+        this.isMenuActive = false;
       }
-
-      this.$emit('focus');
     },
-    genDirectives: function genDirectives() {
-      var _this8 = this;
+    onKeyPress: function onKeyPress(e) {
+      var _this10 = this;
 
-      return [{
-        name: 'click-outside',
-        value: function value(e) {
-          return _this8.$refs.menu && !_this8.$refs.menu.$refs.content.contains(e.target);
-        }
-      }];
-    },
-    genListeners: function genListeners() {
-      var _this9 = this;
+      if (this.multiple || !this.isInteractive || this.disableLookup) return;
+      var KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
 
-      var listeners = Object.assign({}, this.$listeners);
-      delete listeners.input;
+      var now = performance.now();
 
-      return _extends({}, listeners, {
-        click: function click() {
-          if (_this9.disabled || _this9.readonly) return;
-          _this9.showMenuItems();
-          _this9.selectedIndex = -1;
-        },
-        focus: function focus() {
-          if (_this9.disabled || _this9.readonly) return;
+      if (now - this.keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
+        this.keyboardLookupPrefix = '';
+      }
 
-          !_this9.isFocused && _this9.focus();
-        },
-        keydown: this.onKeyDown // Located in mixins/select-autocomplete.js
+      this.keyboardLookupPrefix += e.key.toLowerCase();
+      this.keyboardLookupLastTime = now;
+      var index = this.allItems.findIndex(function (item) {
+        var text = (_this10.getText(item) || '').toString();
+        return text.toLowerCase().startsWith(_this10.keyboardLookupPrefix);
       });
+      var item = this.allItems[index];
+
+      if (index !== -1) {
+        this.lastItem = Math.max(this.lastItem, index + 5);
+        this.setValue(this.returnObject ? item : this.getValue(item));
+        this.$nextTick(function () {
+          return _this10.$refs.menu.getTiles();
+        });
+        setTimeout(function () {
+          return _this10.setMenuIndex(index);
+        });
+      }
     },
-    genLabel: function genLabel() {
-      var singleLine = this.singleLine || this.isDropdown;
-      if (singleLine && this.isDirty || singleLine && this.isFocused && this.searchValue) return null;
+    onKeyDown: function onKeyDown(e) {
+      var _this11 = this;
 
-      var data = {};
+      if (this.isReadonly && e.keyCode !== _helpers.keyCodes.tab) return;
+      var keyCode = e.keyCode;
+      var menu = this.$refs.menu;
+      this.$emit('keydown', e);
+      if (!menu) return; // If menu is active, allow default
+      // listIndex change from menu
 
-      if (this.id) data.attrs = { for: this.id };
+      if (this.isMenuActive && [_helpers.keyCodes.up, _helpers.keyCodes.down, _helpers.keyCodes.home, _helpers.keyCodes.end, _helpers.keyCodes.enter].includes(keyCode)) {
+        this.$nextTick(function () {
+          menu.changeListIndex(e);
 
-      return this.$createElement('label', data, this.$slots.label || this.label);
-    },
-    getPropertyFromItem: function getPropertyFromItem(item, field) {
-      if (item !== Object(item)) return item;
+          _this11.$emit('update:list-index', menu.listIndex);
+        });
+      } // If enter, space, open menu
 
-      var value = getObjectValueByPath(item, field);
 
-      return typeof value === 'undefined' ? item : value;
-    },
-    genSelectedItems: function genSelectedItems() {
-      var _this10 = this;
+      if ([_helpers.keyCodes.enter, _helpers.keyCodes.space].includes(keyCode)) this.activateMenu(); // If menu is not active, up/down/home/end can do
+      // one of 2 things. If multiple, opens the
+      // menu, if not, will cycle through all
+      // available options
 
-      var val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.inputValue;
+      if (!this.isMenuActive && [_helpers.keyCodes.up, _helpers.keyCodes.down, _helpers.keyCodes.home, _helpers.keyCodes.end].includes(keyCode)) return this.onUpDown(e); // If escape deactivate the menu
 
-      // If we are using tags, don't filter results
-      if (this.tags) return this.selectedItems = val;
+      if (keyCode === _helpers.keyCodes.esc) return this.onEscDown(e); // If tab - select item or close menu
 
-      // Combobox is the single version
-      // of a taggable select element
-      if (this.combobox) return this.selectedItems = val ? [val] : [];
+      if (keyCode === _helpers.keyCodes.tab) return this.onTabDown(e); // If space preventDefault
 
-      var selectedItems = this.computedItems.filter(function (i) {
-        if (!_this10.isMultiple) {
-          return _this10.getValue(i) === _this10.getValue(val);
-        } else {
-          // Always return Boolean
-          return val.find(function (j) {
-            var a = _this10.getValue(j);
-            var b = _this10.getValue(i);
+      if (keyCode === _helpers.keyCodes.space) return this.onSpaceDown(e);
+    },
+    onMenuActiveChange: function onMenuActiveChange(val) {
+      // If menu is closing and mulitple
+      // or menuIndex is already set
+      // skip menu index recalculation
+      if (this.multiple && !val || this.getMenuIndex() > -1) return;
+      var menu = this.$refs.menu;
+      if (!menu || !this.isDirty) return; // When menu opens, set index of first active item
 
-            if (a !== Object(a)) return a === b;
+      this.$refs.menu.getTiles();
 
-            return _this10.compareObjects(a, b);
-          }) !== undefined;
+      for (var i = 0; i < menu.tiles.length; i++) {
+        if (menu.tiles[i].getAttribute('aria-selected') === 'true') {
+          this.setMenuIndex(i);
+          break;
         }
-      });
-
-      if (!selectedItems.length && val != null && this.tags) {
-        selectedItems = Array.isArray(val) ? val : [val];
       }
-
-      this.selectedItems = selectedItems;
-    },
-    getText: function getText(item) {
-      return this.getPropertyFromItem(item, this.itemText);
-    },
-    getValue: function getValue(item) {
-      return this.getPropertyFromItem(item, this.itemValue);
     },
-    clearableCallback: function clearableCallback() {
-      var inputValue = this.isMultiple ? [] : null;
+    onMouseUp: function onMouseUp(e) {
+      var _this12 = this;
 
-      this.inputValue = inputValue;
-      this.searchValue = null;
-      this.$emit('change', inputValue);
-      this.genSelectedItems();
-      this.showMenu();
-    },
-    showMenu: function showMenu() {
-      this.showMenuItems();
-      this.isAutocomplete && this.focus();
+      // eslint-disable-next-line sonarjs/no-collapsible-if
+      if (this.hasMouseDown && e.which !== 3 && this.isInteractive) {
+        // If append inner is present
+        // and the target is itself
+        // or inside, toggle menu
+        if (this.isAppendInner(e.target)) {
+          this.$nextTick(function () {
+            return _this12.isMenuActive = !_this12.isMenuActive;
+          });
+        }
+      }
+
+      _KTextField2.default.options.methods.onMouseUp.call(this, e);
     },
     onScroll: function onScroll() {
-      var _this11 = this;
+      var _this13 = this;
 
-      if (!this.isActive) {
+      if (!this.isMenuActive) {
         requestAnimationFrame(function () {
-          return _this11.content.scrollTop = 0;
+          return _this13.getContent().scrollTop = 0;
         });
       } else {
-        if (this.lastItem >= this.computedItems.length) return;
-
-        var showMoreItems = this.content.scrollHeight - (this.content.scrollTop + this.content.clientHeight) < 200;
+        if (this.lastItem > this.computedItems.length) return;
+        var showMoreItems = this.getContent().scrollHeight - (this.getContent().scrollTop + this.getContent().clientHeight) < 200;
 
         if (showMoreItems) {
           this.lastItem += 20;
         }
       }
     },
-    selectItem: function selectItem(item) {
-      var _this12 = this;
+    onSpaceDown: function onSpaceDown(e) {
+      e.preventDefault();
+    },
+    onTabDown: function onTabDown(e) {
+      var menu = this.$refs.menu;
+      if (!menu) return;
+      var activeTile = menu.activeTile; // An item that is selected by
+      // menu-index should toggled
 
-      if (!this.isMultiple) {
-        this.inputValue = this.returnObject ? item : this.getValue(item);
-        this.selectedItems = [item];
+      if (!this.multiple && activeTile && this.isMenuActive) {
+        e.preventDefault();
+        e.stopPropagation();
+        activeTile.click();
       } else {
-        var selectedItems = [];
-        var inputValue = this.inputValue.slice();
-        var i = this.inputValue.findIndex(function (i) {
-          var a = _this12.getValue(i);
-          var b = _this12.getValue(item);
+        // If we make it here,
+        // the user has no selected indexes
+        // and is probably tabbing out
+        this.blur(e);
+      }
+    },
+    onUpDown: function onUpDown(e) {
+      var _this14 = this;
 
-          if (a !== Object(a)) return a === b;
+      var menu = this.$refs.menu;
+      if (!menu) return;
+      e.preventDefault(); // Multiple selects do not cycle their value
+      // when pressing up or down, instead activate
+      // the menu
 
-          return _this12.compareObjects(a, b);
-        });
+      if (this.multiple) return this.activateMenu();
+      var keyCode = e.keyCode; // Cycle through available values to achieve
+      // select native behavior
 
-        i !== -1 && inputValue.splice(i, 1) || inputValue.push(item);
-        this.inputValue = inputValue.map(function (i) {
-          selectedItems.push(i);
-          return _this12.returnObject ? i : _this12.getValue(i);
-        });
+      menu.isBooted = true;
+      window.requestAnimationFrame(function () {
+        menu.getTiles();
+        if (!menu.hasClickableTiles) return _this14.activateMenu();
 
-        this.selectedItems = selectedItems;
-      }
+        switch (keyCode) {
+          case _helpers.keyCodes.up:
+            menu.prevTile();
+            break;
 
-      this.searchValue = !this.isMultiple || this.chips ? this.getText(this.selectedItem) : '';
+          case _helpers.keyCodes.down:
+            menu.nextTile();
+            break;
 
-      this.$emit('change', this.inputValue);
+          case _helpers.keyCodes.home:
+            menu.firstTile();
+            break;
 
-      // List tile will re-render, reset index to
-      // maintain highlighting
-      var savedIndex = this.$refs.menu.listIndex;
-      this.$refs.menu.listIndex = -1;
+          case _helpers.keyCodes.end:
+            menu.lastTile();
+            break;
+        }
 
-      // After selecting an item
-      // refocus the input and
-      // reset the caret pos
-      this.$nextTick(function () {
-        _this12.focus();
-        _this12.setCaretPosition(_this12.currentRange);
-        _this12.$refs.menu && (_this12.$refs.menu.listIndex = savedIndex);
+        _this14.selectItem(_this14.allItems[_this14.getMenuIndex()]);
       });
     },
-    showMenuItems: function showMenuItems() {
-      this.isActive = true;
-      this.menuIsActive = true;
-      this.chips && (this.$refs.menu.listIndex = -1);
-    }
-  },
+    selectItem: function selectItem(item) {
+      var _this15 = this;
 
-  render: function render(h) {
-    var _this13 = this;
+      if (!this.multiple) {
+        this.setValue(this.returnObject ? item : this.getValue(item));
+        this.isMenuActive = false;
+      } else {
+        var internalValue = (this.internalValue || []).slice();
+        var i = this.findExistingIndex(item);
+        i !== -1 ? internalValue.splice(i, 1) : internalValue.push(item);
+        this.setValue(internalValue.map(function (i) {
+          return _this15.returnObject ? i : _this15.getValue(i);
+        })); // When selecting multiple
+        // adjust menu after each
+        // selection
+
+        this.$nextTick(function () {
+          _this15.$refs.menu && _this15.$refs.menu.updateDimensions();
+        }); // There is no item to re-highlight
+        // when selections are hidden
+
+        if (this.hideSelected) {
+          this.setMenuIndex(-1);
+        } else {
+          var index = this.allItems.indexOf(item);
+
+          if (~index) {
+            this.$nextTick(function () {
+              return _this15.$refs.menu.getTiles();
+            });
+            setTimeout(function () {
+              return _this15.setMenuIndex(index);
+            });
+          }
+        }
+      }
+    },
+    setMenuIndex: function setMenuIndex(index) {
+      this.$refs.menu && (this.$refs.menu.listIndex = index);
+    },
+    setSelectedItems: function setSelectedItems() {
+      var _this16 = this;
 
-    var data = {
-      attrs: _extends({
-        tabindex: this.isAutocomplete || this.disabled ? -1 : this.tabindex
-      }, this.isAutocomplete ? null : this.$attrs, {
-        role: this.isAutocomplete ? null : 'combobox'
-      })
-    };
+      var selectedItems = [];
+      var values = !this.multiple || !Array.isArray(this.internalValue) ? [this.internalValue] : this.internalValue;
+
+      var _iterator = _createForOfIteratorHelper(values),
+          _step;
+
+      try {
+        var _loop = function _loop() {
+          var value = _step.value;
 
-    if (!this.isAutocomplete) {
-      data.on = this.genListeners();
-      data.directives = this.genDirectives();
-    } else {
-      data.on = {
-        click: function click() {
-          if (_this13.disabled || _this13.readonly) return;
-
-          // Workaround for clicking select
-          // when using autocomplete
-          // and click doesn't target the input
-          setTimeout(function () {
-            if (_this13.menuIsActive) return;
-
-            _this13.focus();
-            _this13.menuIsActive = true;
-          }, 100);
+          var index = _this16.allItems.findIndex(function (v) {
+            return _this16.valueComparator(_this16.getValue(v), _this16.getValue(value));
+          });
+
+          if (index > -1) {
+            selectedItems.push(_this16.allItems[index]);
+          }
+        };
+
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          _loop();
         }
-      };
-    }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
 
-    return this.genInputGroup([this.genSelectionsAndSearch(), this.genMenu()], data, function () {
-      return _this13.showMenu();
-    });
+      this.selectedItems = selectedItems;
+    },
+    setValue: function setValue(value) {
+      if (!this.valueComparator(value, this.internalValue)) {
+        this.internalValue = value;
+        this.$emit('change', value);
+      }
+    },
+    isAppendInner: function isAppendInner(target) {
+      // return true if append inner is present
+      // and the target is itself or inside
+      var appendInner = this.$refs['append-inner'];
+      return appendInner && (appendInner === target || appendInner.contains(target));
+    }
   }
-};
+});
+
+exports.default = _default2;
+//# sourceMappingURL=KSelect.js.map