kdutify 0.16.9-rc.0 → 2.6.0

package/es5/components/KMenu/mixins/menu-keyable.js

@@ -1,64 +0,0 @@
-/**
- * Menu keyable
- *
- * @mixin
- *
- * Primarily used to support KSelect
- * Handles opening and closing of KMenu from keystrokes
- * Will conditionally highlight KListTiles for KSelect
- */
-export default {
-  data: function data() {
-    return {
-      listIndex: -1,
-      tiles: []
-    };
-  },
-
-  watch: {
-    isActive: function isActive(val) {
-      if (!val) this.listIndex = -1;
-    },
-    listIndex: function listIndex(next, prev) {
-      // For infinite scroll and autocomplete, re-evaluate children
-      this.getTiles();
-
-      if (next in this.tiles) {
-        this.tiles[next].classList.add('list__tile--highlighted');
-        this.$refs.content.scrollTop = next * 48;
-      }
-
-      prev in this.tiles && this.tiles[prev].classList.remove('list__tile--highlighted');
-    }
-  },
-
-  methods: {
-    changeListIndex: function changeListIndex(e) {
-      // Up, Down, Enter, Space
-      if ([40, 38, 13].includes(e.keyCode) || e.keyCode === 32 && !this.isActive) {
-        e.preventDefault();
-      }
-
-      // Esc, Tab
-      if ([27, 9].includes(e.keyCode)) return this.isActive = false;else if (!this.isActive &&
-      // Enter, Space
-      [13, 32].includes(e.keyCode) && this.openOnClick) {
-        return this.isActive = true;
-      }
-
-      // Down
-      if (e.keyCode === 40 && this.listIndex < this.tiles.length - 1) {
-        this.listIndex++;
-        // Up
-      } else if (e.keyCode === 38 && this.listIndex > 0) {
-        this.listIndex--;
-        // Enter
-      } else if (e.keyCode === 13 && this.listIndex !== -1) {
-        this.tiles[this.listIndex].click();
-      }
-    },
-    getTiles: function getTiles() {
-      this.tiles = this.$refs.content.querySelectorAll('.list__tile');
-    }
-  }
-};

package/es5/components/KMenu/mixins/menu-position.js

@@ -1,64 +0,0 @@
-/**
- * Menu position
- *
- * @mixin
- *
- * Used for calculating an automatic position (used for KSelect)
- * Will position the KMenu content properly over the KSelect
- */
-export default {
-  methods: {
-    // Revisit this
-    calculateScroll: function calculateScroll() {
-      if (this.selectedIndex === null) return;
-
-      var scrollTop = 0;
-
-      if (this.selectedIndex >= this.stopIndex) {
-        scrollTop = this.$refs.content.scrollHeight;
-      } else if (this.selectedIndex > this.startIndex) {
-        scrollTop = this.selectedIndex * (this.defaultOffset * 6) - this.defaultOffset * 7;
-      }
-
-      this.$refs.content.scrollTop = scrollTop;
-    },
-    calcLeftAuto: function calcLeftAuto() {
-      var a = this.dimensions.activator;
-
-      return parseInt(a.left - this.defaultOffset * 2);
-    },
-    calcTopAuto: function calcTopAuto() {
-      if (!this.hasActivator) return this.calcTop();
-
-      var selectedIndex = Array.from(this.tiles).findIndex(function (n) {
-        return n.classList.contains('list__tile--active');
-      });
-
-      if (selectedIndex === -1) {
-        this.selectedIndex = null;
-
-        return this.calcTop();
-      }
-
-      this.selectedIndex = selectedIndex;
-      var actingIndex = selectedIndex;
-
-      var offsetPadding = -(this.defaultOffset * 2);
-      // #708 Stop index should vary by tile length
-      this.stopIndex = this.tiles.length > 4 ? this.tiles.length - 4 : this.tiles.length;
-
-      if (selectedIndex > this.startIndex && selectedIndex < this.stopIndex) {
-        actingIndex = 2;
-        offsetPadding = this.defaultOffset * 3;
-      } else if (selectedIndex >= this.stopIndex) {
-        offsetPadding = -this.defaultOffset;
-        actingIndex = selectedIndex - this.stopIndex;
-      }
-
-      // Is always off by 1 pixel, send help (┛ಠ_ಠ)┛彡┻━┻
-      offsetPadding--;
-
-      return this.calcTop() + offsetPadding - actingIndex * (this.defaultOffset * 6);
-    }
-  }
-};

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

@@ -1,125 +0,0 @@
-/**
- * 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

@@ -1,298 +0,0 @@
-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)
-        }
-      })]);
-    }
-  }
-};

package/es5/components/KTabs/KTabsContent.js

@@ -1,86 +0,0 @@
-import Bootable from '../../mixins/bootable';
-
-import { KTabTransition, KTabReverseTransition } from '../transitions';
-
-import Touch from '../../directives/touch';
-
-export default {
-  name: 'k-tabs-content',
-
-  mixins: [Bootable],
-
-  inject: ['registerContent', 'unregisterContent'],
-
-  components: {
-    KTabTransition: KTabTransition,
-    KTabReverseTransition: KTabReverseTransition
-  },
-
-  directives: {
-    Touch: Touch
-  },
-
-  data: function data() {
-    return {
-      isActive: false,
-      reverse: false
-    };
-  },
-
-
-  props: {
-    id: {
-      type: String,
-      required: true
-    },
-    transition: {
-      type: [Boolean, String],
-      default: 'tab-transition'
-    },
-    reverseTransition: {
-      type: [Boolean, String],
-      default: 'tab-reverse-transition'
-    }
-  },
-
-  computed: {
-    computedTransition: function computedTransition() {
-      return this.reverse ? this.reverseTransition : this.transition;
-    }
-  },
-
-  methods: {
-    toggle: function toggle(target, reverse, showTransition) {
-      this.$el.style.transition = !showTransition ? 'none' : null;
-      this.reverse = reverse;
-      this.isActive = this.id === target;
-    }
-  },
-
-  mounted: function mounted() {
-    this.registerContent(this.id, this.toggle);
-  },
-  beforeDestroy: function beforeDestroy() {
-    this.unregisterContent(this.id);
-  },
-  render: function render(h) {
-    var data = {
-      staticClass: 'tabs__content',
-      directives: [{
-        name: 'show',
-        value: this.isActive
-      }],
-      on: this.$listeners
-    };
-
-    if (this.id) data.domProps = { id: this.id };
-
-    var div = h('div', data, this.showLazyContent(this.$slots.default));
-
-    if (!this.computedTransition) return div;
-
-    return h('transition', {
-      props: { name: this.computedTransition }
-    }, [div]);
-  }
-};