kdutify 2.6.0 → 2.7.2

package/lib/components/KSelect/KSelect.js

@@ -1,24 +1,24 @@
 // Styles
 import "..\\..\\..\\src\\components\\KTextField\\KTextField.sass";
-import "..\\..\\..\\src\\components\\KSelect\\KSelect.sass"; // Components
-
+import "..\\..\\..\\src\\components\\KSelect\\KSelect.sass";
+// Components
 import KChip from '../KChip';
 import KMenu from '../KMenu';
-import KSelectList from './KSelectList'; // Extensions
-
+import KSelectList from './KSelectList';
+// Extensions
 import KInput from '../KInput';
-import KTextField from '../KTextField/KTextField'; // Mixins
-
+import KTextField from '../KTextField/KTextField';
+// Mixins
 import Comparable from '../../mixins/comparable';
 import Dependent from '../../mixins/dependent';
-import Filterable from '../../mixins/filterable'; // Directives
-
-import ClickOutside from '../../directives/click-outside'; // Utilities
-
+import Filterable from '../../mixins/filterable';
+// Directives
+import ClickOutside from '../../directives/click-outside';
+// Utilities
 import mergeData from '../../util/mergeData';
 import { getPropertyFromItem, getObjectValueByPath, keyCodes } from '../../util/helpers';
-import { consoleError } from '../../util/console'; // Types
-
+import { consoleError } from '../../util/console';
+// Types
 import mixins from '../../util/mixins';
 export const defaultMenuProps = {
   closeOnClick: false,
@@ -26,11 +26,10 @@ export const defaultMenuProps = {
   disableKeys: true,
   openOnClick: false,
   maxHeight: 304
-}; // Types
-
+};
+// Types
 const baseMixins = mixins(KTextField, Comparable, Dependent, Filterable);
 /* @kdujs/component */
-
 export default baseMixins.extend().extend({
   name: 'k-select',
   directives: {
@@ -81,7 +80,6 @@ export default baseMixins.extend().extend({
     returnObject: Boolean,
     smallChips: Boolean
   },
-
   data() {
     return {
       cachedItems: this.cacheItems ? this.items : [],
@@ -98,15 +96,14 @@ export default baseMixins.extend().extend({
       keyboardLookupLastTime: 0
     };
   },
-
   computed: {
     /* All items that the select has */
     allItems() {
       return this.filterDuplicates(this.cachedItems.concat(this.items));
     },
-
     classes() {
-      return { ...KTextField.options.computed.classes.call(this),
+      return {
+        ...KTextField.options.computed.classes.call(this),
         'k-select': true,
         'k-select--chips': this.hasChips,
         'k-select--chips--small': this.smallChips,
@@ -114,26 +111,21 @@ export default baseMixins.extend().extend({
         'k-select--is-multi': this.multiple
       };
     },
-
     /* Used by other components to overwrite */
     computedItems() {
       return this.allItems;
     },
-
     computedOwns() {
       return `list-${this._uid}`;
     },
-
     computedCounterValue() {
-      const value = this.multiple ? this.selectedItems : (this.getText(this.selectedItems[0]) || '').toString();
-
+      var _a;
+      const value = this.multiple ? this.selectedItems : ((_a = this.getText(this.selectedItems[0])) !== null && _a !== void 0 ? _a : '').toString();
       if (typeof this.counterValue === 'function') {
         return this.counterValue(value);
       }
-
       return value.length;
     },
-
     directives() {
       return this.isFocused ? [{
         name: 'click-outside',
@@ -144,30 +136,26 @@ export default baseMixins.extend().extend({
         }
       }] : undefined;
     },
-
     dynamicHeight() {
       return 'auto';
     },
-
     hasChips() {
       return this.chips || this.smallChips;
     },
-
     hasSlot() {
       return Boolean(this.hasChips || this.$scopedSlots.selection);
     },
-
     isDirty() {
       return this.selectedItems.length > 0;
     },
-
     listData() {
       const scopeId = this.$knode && this.$knode.context.$options._scopeId;
       const attrs = scopeId ? {
         [scopeId]: true
       } : {};
       return {
-        attrs: { ...attrs,
+        attrs: {
+          ...attrs,
           id: this.computedOwns
         },
         props: {
@@ -190,53 +178,54 @@ export default baseMixins.extend().extend({
         }
       };
     },
-
     staticList() {
       if (this.$slots['no-data'] || this.$slots['prepend-item'] || this.$slots['append-item']) {
         consoleError('assert: staticList should not be called if slots are used');
       }
-
       return this.$createElement(KSelectList, this.listData);
     },
-
     virtualizedItems() {
       return this.$_menuProps.auto ? this.computedItems : this.computedItems.slice(0, this.lastItem);
     },
-
     menuCanShow: () => true,
-
     $_menuProps() {
       let normalisedProps = typeof this.menuProps === 'string' ? this.menuProps.split(',') : this.menuProps;
-
       if (Array.isArray(normalisedProps)) {
         normalisedProps = normalisedProps.reduce((acc, p) => {
           acc[p.trim()] = true;
           return acc;
         }, {});
       }
-
-      return { ...defaultMenuProps,
+      return {
+        ...defaultMenuProps,
         eager: this.eager,
         value: this.menuCanShow && this.isMenuActive,
         nudgeBottom: normalisedProps.offsetY ? 1 : 0,
         ...normalisedProps
       };
     }
-
   },
   watch: {
     internalValue(val) {
       this.initialValue = val;
       this.setSelectedItems();
+      if (this.multiple) {
+        this.$nextTick(() => {
+          var _a;
+          (_a = this.$refs.menu) === null || _a === void 0 ? void 0 : _a.updateDimensions();
+        });
+      }
+      if (this.hideSelected) {
+        this.$nextTick(() => {
+          this.onScroll();
+        });
+      }
     },
-
     isMenuActive(val) {
       window.setTimeout(() => this.onMenuActiveChange(val));
     },
-
     items: {
       immediate: true,
-
       handler(val) {
         if (this.cacheItems) {
           // Breaks kdu-test-utils if
@@ -246,10 +235,8 @@ export default baseMixins.extend().extend({
             this.cachedItems = this.filterDuplicates(this.cachedItems.concat(val));
           });
         }
-
         this.setSelectedItems();
       }
-
     }
   },
   methods: {
@@ -261,56 +248,52 @@ export default baseMixins.extend().extend({
       this.selectedIndex = -1;
       this.setMenuIndex(-1);
     },
-
     /** @public */
     activateMenu() {
       if (!this.isInteractive || this.isMenuActive) return;
       this.isMenuActive = true;
     },
-
     clearableCallback() {
       this.setValue(this.multiple ? [] : null);
       this.setMenuIndex(-1);
       this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
       if (this.openOnClear) this.isMenuActive = true;
     },
-
     closeConditional(e) {
       if (!this.isMenuActive) return true;
-      return !this._isDestroyed && ( // Click originates from outside the menu content
+      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.getContent() || !this.getContent().contains(e.target)) &&
+      // Click originates from outside the element
       this.$el && !this.$el.contains(e.target) && e.target !== this.$el;
     },
-
     filterDuplicates(arr) {
       const uniqueValues = new Map();
-
       for (let index = 0; index < arr.length; ++index) {
-        const item = arr[index]; // Do not deduplicate headers or dividers (#12517)
-
+        const item = arr[index];
+        // Do not return null values if existant (#14421)
+        if (item == null) {
+          continue;
+        }
+        // Do not deduplicate headers or dividers (#12517)
         if (item.header || item.divider) {
           uniqueValues.set(item, item);
           continue;
         }
-
-        const val = this.getValue(item); // TODO: comparator
-
+        const val = this.getValue(item);
+        // TODO: comparator
         !uniqueValues.has(val) && uniqueValues.set(val, item);
       }
-
       return Array.from(uniqueValues.values());
     },
-
     findExistingIndex(item) {
       const itemValue = this.getValue(item);
       return (this.internalValue || []).findIndex(i => this.valueComparator(this.getValue(i), itemValue));
     },
-
     getContent() {
       return this.$refs.menu && this.$refs.menu.$refs.content;
     },
-
     genChipSelection(item, index) {
       const isDisabled = this.isDisabled || this.getDisabled(item);
       const isInteractive = !isDisabled && this.isInteractive;
@@ -336,7 +319,6 @@ export default baseMixins.extend().extend({
         key: JSON.stringify(this.getValue(item))
       }, this.getText(item));
     },
-
     genCommaSelection(item, index, last) {
       const color = index === this.selectedIndex && this.computedColor;
       const isDisabled = this.isDisabled || this.getDisabled(item);
@@ -348,28 +330,25 @@ export default baseMixins.extend().extend({
         key: JSON.stringify(this.getValue(item))
       }), `${this.getText(item)}${last ? '' : ', '}`);
     },
-
     genDefaultSlot() {
       const selections = this.genSelections();
-      const input = this.genInput(); // If the return is an empty array
+      const 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
+        selections.push(input);
+        // Otherwise push it into children
       } else {
         selections.children = selections.children || [];
         selections.children.push(input);
       }
-
       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(type, cb, extraData) {
       const icon = KInput.options.methods.genIcon.call(this, type, cb, extraData);
-
       if (type === 'append') {
         // Don't allow the dropdown icon to be focused
         icon.children[0].data = mergeData(icon.children[0].data, {
@@ -380,10 +359,8 @@ export default baseMixins.extend().extend({
           }
         });
       }
-
       return icon;
     },
-
     genInput() {
       const input = KTextField.options.methods.genInput.call(this);
       delete input.data.attrs.name;
@@ -405,7 +382,6 @@ export default baseMixins.extend().extend({
       });
       return input;
     },
-
     genHiddenInput() {
       return this.$createElement('input', {
         domProps: {
@@ -417,10 +393,10 @@ export default baseMixins.extend().extend({
         }
       });
     },
-
     genInputSlot() {
       const render = KTextField.options.methods.genInputSlot.call(this);
-      render.data.attrs = { ...render.data.attrs,
+      render.data.attrs = {
+        ...render.data.attrs,
         role: 'button',
         'aria-haspopup': 'listbox',
         'aria-expanded': String(this.isMenuActive),
@@ -428,7 +404,6 @@ export default baseMixins.extend().extend({
       };
       return render;
     },
-
     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']) {
@@ -437,33 +412,34 @@ export default baseMixins.extend().extend({
         return this.staticList;
       }
     },
-
     genListWithSlot() {
       const slots = ['prepend-item', 'no-data', 'append-item'].filter(slotName => this.$slots[slotName]).map(slotName => this.$createElement('template', {
         slot: slotName
-      }, this.$slots[slotName])); // Requires destructuring due to Kdu
+      }, this.$slots[slotName]));
+      // Requires destructuring due to Kdu
       // modifying the `on` property when passed
       // as a referenced object
-
-      return this.$createElement(KSelectList, { ...this.listData
+      return this.$createElement(KSelectList, {
+        ...this.listData
       }, slots);
     },
-
     genMenu() {
       const 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">)
+      props.activator = this.$refs['input-slot'];
+      if ('attach' in props) void 0;else 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 {
+        // Attach to root el so that
+        // menu covers prepend/append icons
+        props.attach = this.$el;
+      } else {
         props.attach = this.attach;
       }
-
       return this.$createElement(KMenu, {
         attrs: {
           role: undefined
@@ -479,12 +455,10 @@ export default baseMixins.extend().extend({
         ref: 'menu'
       }, [this.genList()]);
     },
-
     genSelections() {
       let length = this.selectedItems.length;
       const children = new Array(length);
       let genSelection;
-
       if (this.$scopedSlots.selection) {
         genSelection = this.genSlotSelection;
       } else if (this.hasChips) {
@@ -492,16 +466,13 @@ export default baseMixins.extend().extend({
       } else {
         genSelection = this.genCommaSelection;
       }
-
       while (length--) {
         children[length] = genSelection(this.selectedItems[length], length, length === children.length - 1);
       }
-
       return this.$createElement('div', {
         staticClass: 'k-select__selections'
       }, children);
     },
-
     genSlotSelection(item, index) {
       return this.$scopedSlots.selection({
         attrs: {
@@ -518,82 +489,65 @@ export default baseMixins.extend().extend({
         disabled: !this.isInteractive
       });
     },
-
     getMenuIndex() {
       return this.$refs.menu ? this.$refs.menu.listIndex : -1;
     },
-
     getDisabled(item) {
       return getPropertyFromItem(item, this.itemDisabled, false);
     },
-
     getText(item) {
       return getPropertyFromItem(item, this.itemText, item);
     },
-
     getValue(item) {
       return getPropertyFromItem(item, this.itemValue, this.getText(item));
     },
-
     onBlur(e) {
       e && this.$emit('blur', e);
     },
-
     onChipInput(item) {
-      if (this.multiple) this.selectItem(item);else this.setValue(null); // If all items have been deleted,
+      if (this.multiple) this.selectItem(item);else this.setValue(null);
+      // If all items have been deleted,
       // open `k-menu`
-
       if (this.selectedItems.length === 0) {
         this.isMenuActive = true;
       } else {
         this.isMenuActive = false;
       }
-
       this.selectedIndex = -1;
     },
-
     onClick(e) {
       if (!this.isInteractive) return;
-
       if (!this.isAppendInner(e.target)) {
         this.isMenuActive = true;
       }
-
       if (!this.isFocused) {
         this.isFocused = true;
         this.$emit('focus');
       }
-
       this.$emit('click', e);
     },
-
     onEscDown(e) {
       e.preventDefault();
-
       if (this.isMenuActive) {
         e.stopPropagation();
         this.isMenuActive = false;
       }
     },
-
     onKeyPress(e) {
-      if (this.multiple || !this.isInteractive || this.disableLookup) return;
+      if (this.multiple || !this.isInteractive || this.disableLookup || e.key.length > 1 || e.ctrlKey || e.metaKey || e.altKey) return;
       const KEYBOARD_LOOKUP_THRESHOLD = 1000; // milliseconds
-
       const now = performance.now();
-
       if (now - this.keyboardLookupLastTime > KEYBOARD_LOOKUP_THRESHOLD) {
         this.keyboardLookupPrefix = '';
       }
-
       this.keyboardLookupPrefix += e.key.toLowerCase();
       this.keyboardLookupLastTime = now;
       const index = this.allItems.findIndex(item => {
-        const text = (this.getText(item) || '').toString();
+        var _a;
+        const text = ((_a = this.getText(item)) !== null && _a !== void 0 ? _a : '').toString();
         return text.toLowerCase().startsWith(this.keyboardLookupPrefix);
       });
       const item = this.allItems[index];
-
       if (index !== -1) {
         this.lastItem = Math.max(this.lastItem, index + 5);
         this.setValue(this.returnObject ? item : this.getValue(item));
@@ -601,47 +555,43 @@ export default baseMixins.extend().extend({
         setTimeout(() => this.setMenuIndex(index));
       }
     },
-
     onKeyDown(e) {
       if (this.isReadonly && e.keyCode !== keyCodes.tab) return;
       const keyCode = e.keyCode;
       const menu = this.$refs.menu;
       this.$emit('keydown', e);
-      if (!menu) return; // If menu is active, allow default
+      if (!menu) return;
+      // If menu is active, allow default
       // listIndex change from menu
-
       if (this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end, keyCodes.enter].includes(keyCode)) {
         this.$nextTick(() => {
           menu.changeListIndex(e);
           this.$emit('update:list-index', menu.listIndex);
         });
-      } // If enter, space, open menu
-
-
-      if ([keyCodes.enter, keyCodes.space].includes(keyCode)) this.activateMenu(); // If menu is not active, up/down/home/end can do
+      }
+      // If enter, space, open menu
+      if ([keyCodes.enter, 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
-
-      if (!this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)) return this.onUpDown(e); // If escape deactivate the menu
-
-      if (keyCode === keyCodes.esc) return this.onEscDown(e); // If tab - select item or close menu
-
-      if (keyCode === keyCodes.tab) return this.onTabDown(e); // If space preventDefault
-
+      if (!this.isMenuActive && [keyCodes.up, keyCodes.down, keyCodes.home, keyCodes.end].includes(keyCode)) return this.onUpDown(e);
+      // If escape deactivate the menu
+      if (keyCode === keyCodes.esc) return this.onEscDown(e);
+      // If tab - select item or close menu
+      if (keyCode === keyCodes.tab) return this.onTabDown(e);
+      // If space preventDefault
       if (keyCode === keyCodes.space) return this.onSpaceDown(e);
     },
-
     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;
       const menu = this.$refs.menu;
-      if (!menu || !this.isDirty) return; // When menu opens, set index of first active item
-
+      if (!menu || !this.isDirty) return;
+      // When menu opens, set index of first active item
       this.$refs.menu.getTiles();
-
       for (let i = 0; i < menu.tiles.length; i++) {
         if (menu.tiles[i].getAttribute('aria-selected') === 'true') {
           this.setMenuIndex(i);
@@ -649,7 +599,6 @@ export default baseMixins.extend().extend({
         }
       }
     },
-
     onMouseUp(e) {
       // eslint-disable-next-line sonarjs/no-collapsible-if
       if (this.hasMouseDown && e.which !== 3 && this.isInteractive) {
@@ -660,33 +609,31 @@ export default baseMixins.extend().extend({
           this.$nextTick(() => this.isMenuActive = !this.isMenuActive);
         }
       }
-
       KTextField.options.methods.onMouseUp.call(this, e);
     },
-
     onScroll() {
       if (!this.isMenuActive) {
-        requestAnimationFrame(() => this.getContent().scrollTop = 0);
+        requestAnimationFrame(() => {
+          const content = this.getContent();
+          if (content) content.scrollTop = 0;
+        });
       } else {
         if (this.lastItem > this.computedItems.length) return;
         const showMoreItems = this.getContent().scrollHeight - (this.getContent().scrollTop + this.getContent().clientHeight) < 200;
-
         if (showMoreItems) {
           this.lastItem += 20;
         }
       }
     },
-
     onSpaceDown(e) {
       e.preventDefault();
     },
-
     onTabDown(e) {
       const menu = this.$refs.menu;
       if (!menu) return;
-      const activeTile = menu.activeTile; // An item that is selected by
+      const activeTile = menu.activeTile;
+      // An item that is selected by
       // menu-index should toggled
-
       if (!this.multiple && activeTile && this.isMenuActive) {
         e.preventDefault();
         e.stopPropagation();
@@ -698,45 +645,38 @@ export default baseMixins.extend().extend({
         this.blur(e);
       }
     },
-
     onUpDown(e) {
       const menu = this.$refs.menu;
       if (!menu) return;
-      e.preventDefault(); // Multiple selects do not cycle their value
+      e.preventDefault();
+      // Multiple selects do not cycle their value
       // when pressing up or down, instead activate
       // the menu
-
       if (this.multiple) return this.activateMenu();
-      const keyCode = e.keyCode; // Cycle through available values to achieve
+      const keyCode = e.keyCode;
+      // Cycle through available values to achieve
       // select native behavior
-
       menu.isBooted = true;
       window.requestAnimationFrame(() => {
         menu.getTiles();
         if (!menu.hasClickableTiles) return this.activateMenu();
-
         switch (keyCode) {
           case keyCodes.up:
             menu.prevTile();
             break;
-
           case keyCodes.down:
             menu.nextTile();
             break;
-
           case keyCodes.home:
             menu.firstTile();
             break;
-
           case keyCodes.end:
             menu.lastTile();
             break;
         }
-
         this.selectItem(this.allItems[this.getMenuIndex()]);
       });
     },
-
     selectItem(item) {
       if (!this.multiple) {
         this.setValue(this.returnObject ? item : this.getValue(item));
@@ -747,20 +687,13 @@ export default baseMixins.extend().extend({
         i !== -1 ? internalValue.splice(i, 1) : internalValue.push(item);
         this.setValue(internalValue.map(i => {
           return this.returnObject ? i : this.getValue(i);
-        })); // When selecting multiple
-        // adjust menu after each
-        // selection
-
-        this.$nextTick(() => {
-          this.$refs.menu && this.$refs.menu.updateDimensions();
-        }); // There is no item to re-highlight
+        }));
+        // There is no item to re-highlight
         // when selections are hidden
-
         if (this.hideSelected) {
           this.setMenuIndex(-1);
         } else {
-          const index = this.allItems.indexOf(item);
-
+          const index = this.computedItems.indexOf(item);
           if (~index) {
             this.$nextTick(() => this.$refs.menu.getTiles());
             setTimeout(() => this.setMenuIndex(index));
@@ -768,40 +701,32 @@ export default baseMixins.extend().extend({
         }
       }
     },
-
     setMenuIndex(index) {
       this.$refs.menu && (this.$refs.menu.listIndex = index);
     },
-
     setSelectedItems() {
       const selectedItems = [];
       const values = !this.multiple || !Array.isArray(this.internalValue) ? [this.internalValue] : this.internalValue;
-
       for (const value of values) {
         const index = this.allItems.findIndex(v => this.valueComparator(this.getValue(v), this.getValue(value)));
-
         if (index > -1) {
           selectedItems.push(this.allItems[index]);
         }
       }
-
       this.selectedItems = selectedItems;
     },
-
     setValue(value) {
       if (!this.valueComparator(value, this.internalValue)) {
         this.internalValue = value;
         this.$emit('change', value);
       }
     },
-
     isAppendInner(target) {
       // return true if append inner is present
       // and the target is itself or inside
       const appendInner = this.$refs['append-inner'];
       return appendInner && (appendInner === target || appendInner.contains(target));
     }
-
   }
 });
 //# sourceMappingURL=KSelect.js.map