kdutify 0.16.9-rc.0

package/es5/mixins/bootable.js

@@ -0,0 +1,31 @@
+/**
+ * Bootable
+ * @mixin
+ *
+ * Used to add lazy content functionality to components
+ * Looks for change in "isActive" to automatically boot
+ * Otherwise can be set manually
+ */
+export default {
+  data: function data() {
+    return {
+      isBooted: false
+    };
+  },
+
+  props: {
+    lazy: Boolean
+  },
+
+  watch: {
+    isActive: function isActive() {
+      this.isBooted = true;
+    }
+  },
+
+  methods: {
+    showLazyContent: function showLazyContent(content) {
+      return this.isBooted || !this.lazy ? content : null;
+    }
+  }
+};

package/es5/mixins/button-group.js

@@ -0,0 +1,82 @@
+export default {
+  data: function data() {
+    return {
+      buttons: [],
+      listeners: []
+    };
+  },
+
+
+  methods: {
+    getValue: function getValue(i) {
+      if (this.buttons[i].value != null) {
+        return this.buttons[i].value;
+      }
+
+      // Fix for testing, this should always be false in the browser
+      if (this.buttons[i].$el.value != null && this.buttons[i].$el.value !== '') {
+        return this.buttons[i].$el.value;
+      }
+
+      return i;
+    },
+    update: function update() {
+      var _this = this;
+
+      var selected = [];
+
+      this.buttons.forEach(function (button, i) {
+        var elm = button.$el;
+
+        // Fix for testing, dataset does not exist on elm?
+        if (!elm.dataset) elm.dataset = {};
+
+        elm.removeAttribute('data-only-child');
+
+        if (_this.isSelected(i)) {
+          elm.setAttribute('data-selected', true);
+
+          if (!elm.classList.contains('btn--router')) {
+            elm.classList.add('btn--active');
+          }
+
+          selected.push(i);
+        } else {
+          elm.removeAttribute('data-selected');
+
+          if (!elm.classList.contains('btn--router')) {
+            elm.classList.remove('btn--active');
+          }
+        }
+
+        elm.dataset.index = i;
+      });
+
+      if (selected.length === 1) {
+        this.buttons[selected[0]].$el.setAttribute('data-only-child', true);
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    var _this2 = this;
+
+    this.$kdutify.load(function () {
+      _this2.buttons = _this2.$children;
+
+      _this2.buttons.forEach(function (button, i) {
+        _this2.listeners.push(_this2.updateValue.bind(_this2, i));
+        button.$on('click', _this2.listeners[i]);
+      });
+
+      _this2.update();
+    });
+  },
+  beforeDestroy: function beforeDestroy() {
+    var _this3 = this;
+
+    this.buttons.forEach(function (button, i) {
+      button.$off('click', _this3.listeners[i]);
+    });
+  }
+};

package/es5/mixins/colorable.js

@@ -0,0 +1,24 @@
+export default {
+  props: {
+    color: String
+  },
+  methods: {
+    addBackgroundColorClassChecks: function addBackgroundColorClassChecks(classes) {
+      var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'color';
+
+      if (this[prop]) {
+        classes[this[prop]] = true;
+      }
+      return classes;
+    },
+    addTextColorClassChecks: function addTextColorClassChecks(classes) {
+      var prop = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'color';
+
+      var parts = this[prop] ? this[prop].trim().split(' ') : [''];
+      var color = parts[0] + '--text';
+      if (parts.length > 1) color += ' text--' + parts[1];
+      classes[color] = !!this[prop];
+      return classes;
+    }
+  }
+};

package/es5/mixins/contextualable.js

@@ -0,0 +1,10 @@
+export default {
+  props: {
+    primary: Boolean,
+    secondary: Boolean,
+    success: Boolean,
+    info: Boolean,
+    warning: Boolean,
+    error: Boolean
+  }
+};

package/es5/mixins/delayable.js

@@ -0,0 +1,57 @@
+/**
+ * Delayable
+ *
+ * @mixin
+ *
+ * Changes the open or close
+ * delay time for elements
+ */
+export default {
+  data: function data() {
+    return {
+      openTimeout: null,
+      closeTimeout: null
+    };
+  },
+
+  props: {
+    openDelay: {
+      type: [Number, String],
+      default: 0
+    },
+    closeDelay: {
+      type: [Number, String],
+      default: 200
+    }
+  },
+
+  methods: {
+    /**
+     * Clear any pending delay
+     * timers from executing
+     *
+     * @return {void}
+     */
+    clearDelay: function clearDelay() {
+      clearTimeout(this.openTimeout);
+      clearTimeout(this.closeTimeout);
+    },
+
+    /**
+     * Runs callback after
+     * a specified delay
+     *
+     * @param  {String}   type
+     * @param  {Function} cb
+     *
+     * @return {void}
+     */
+    runDelay: function runDelay(type, cb) {
+      this.clearDelay();
+
+      var delay = parseInt(this[type + "Delay"], 10);
+
+      this[type + "Timeout"] = setTimeout(cb, delay);
+    }
+  }
+};

package/es5/mixins/dependent.js

@@ -0,0 +1,121 @@
+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); } }
+
+function searchChildren(children) {
+  var results = [];
+  var _iteratorNormalCompletion = true;
+  var _didIteratorError = false;
+  var _iteratorError = undefined;
+
+  try {
+    for (var _iterator = children[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+      var child = _step.value;
+
+      if (child.isActive && child.isDependent) {
+        results.push(child);
+      } else {
+        results.push.apply(results, _toConsumableArray(searchChildren(child.$children)));
+      }
+    }
+  } catch (err) {
+    _didIteratorError = true;
+    _iteratorError = err;
+  } finally {
+    try {
+      if (!_iteratorNormalCompletion && _iterator.return) {
+        _iterator.return();
+      }
+    } finally {
+      if (_didIteratorError) {
+        throw _iteratorError;
+      }
+    }
+  }
+
+  return results;
+}
+
+export default {
+  data: function data() {
+    return {
+      closeDependents: true,
+      isDependent: true
+    };
+  },
+
+
+  methods: {
+    getOpenDependents: function getOpenDependents() {
+      if (this.closeDependents) return searchChildren(this.$children);
+
+      return [];
+    },
+    getOpenDependentElements: function getOpenDependentElements() {
+      var result = [];
+
+      var _iteratorNormalCompletion2 = true;
+      var _didIteratorError2 = false;
+      var _iteratorError2 = undefined;
+
+      try {
+        for (var _iterator2 = this.getOpenDependents()[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var dependent = _step2.value;
+
+          result.push.apply(result, _toConsumableArray(dependent.getClickableDependentElements()));
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2.return) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
+
+      return result;
+    },
+    getClickableDependentElements: function getClickableDependentElements() {
+      var result = [this.$el];
+      if (this.$refs.content) result.push(this.$refs.content);
+      result.push.apply(result, _toConsumableArray(this.getOpenDependentElements()));
+
+      return result;
+    }
+  },
+
+  watch: {
+    isActive: function isActive(val) {
+      if (val) return;
+
+      var _iteratorNormalCompletion3 = true;
+      var _didIteratorError3 = false;
+      var _iteratorError3 = undefined;
+
+      try {
+        for (var _iterator3 = this.getOpenDependents()[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+          var dependent = _step3.value;
+
+          dependent.isActive = false;
+        }
+      } catch (err) {
+        _didIteratorError3 = true;
+        _iteratorError3 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion3 && _iterator3.return) {
+            _iterator3.return();
+          }
+        } finally {
+          if (_didIteratorError3) {
+            throw _iteratorError3;
+          }
+        }
+      }
+    }
+  }
+};

package/es5/mixins/detachable.js

@@ -0,0 +1,41 @@
+import Bootable from './bootable';
+
+export default {
+  mixins: [Bootable],
+
+  props: {
+    contentClass: {
+      default: ''
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.load(this.initDetach);
+  },
+  beforeDestroy: function beforeDestroy() {
+    if (!this.$refs.content) return;
+
+    // IE11 Fix
+    try {
+      this.$refs.content.parentNode.removeChild(this.$refs.content);
+    } catch (e) {}
+  },
+
+
+  methods: {
+    initDetach: function initDetach() {
+      if (this._isDestroyed) return;
+
+      var app = document.querySelector('[data-app]');
+
+      if (!app) {
+        return console.warn('Application is missing <k-app> component.');
+      }
+
+      // If child has already been removed, bail
+      if (!this.$refs.content) return;
+
+      app.insertBefore(this.$refs.content, app.firstChild);
+    }
+  }
+};

package/es5/mixins/filterable.js

@@ -0,0 +1,8 @@
+export default {
+  props: {
+    noDataText: {
+      type: String,
+      default: 'No data available'
+    }
+  }
+};

package/es5/mixins/input.js

@@ -0,0 +1,219 @@
+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; }
+
+import Loadable from './loadable';
+import Themeable from './themeable';
+import Validatable from './validatable';
+import KIcon from '../components/KIcon';
+
+export default {
+  components: {
+    KIcon: KIcon
+  },
+
+  mixins: [Loadable, Themeable, Validatable],
+
+  data: function data() {
+    return {
+      isFocused: false,
+      tabFocused: false,
+      internalTabIndex: null,
+      lazyValue: this.value
+    };
+  },
+
+
+  props: {
+    appendIcon: String,
+    appendIconCb: Function,
+    disabled: Boolean,
+    hint: String,
+    hideDetails: Boolean,
+    label: String,
+    persistentHint: Boolean,
+    placeholder: String,
+    prependIcon: String,
+    prependIconCb: Function,
+    readonly: Boolean,
+    required: Boolean,
+    tabindex: {
+      default: 0
+    },
+    toggleKeys: {
+      type: Array,
+      default: function _default() {
+        return [13, 32];
+      }
+    },
+    value: {
+      required: false
+    }
+  },
+
+  computed: {
+    inputGroupClasses: function inputGroupClasses() {
+      return Object.assign({
+        'input-group': true,
+        'input-group--async-loading': this.loading !== false,
+        'input-group--focused': this.isFocused,
+        'input-group--dirty': this.isDirty,
+        'input-group--tab-focused': this.tabFocused,
+        'input-group--disabled': this.disabled,
+        'input-group--error': this.hasError,
+        'input-group--append-icon': this.appendIcon,
+        'input-group--prepend-icon': this.prependIcon,
+        'input-group--required': this.required,
+        'input-group--hide-details': this.hideDetails,
+        'input-group--placeholder': !!this.placeholder,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }, this.classes);
+    },
+    isDirty: function isDirty() {
+      return !!this.inputValue;
+    }
+  },
+
+  methods: {
+    groupFocus: function groupFocus(e) {},
+    groupBlur: function groupBlur(e) {
+      this.tabFocused = false;
+    },
+    genLabel: function genLabel() {
+      return this.$createElement('label', {
+        attrs: {
+          for: this.$attrs.id
+        }
+      }, this.$slots.label || this.label);
+    },
+    genMessages: function genMessages() {
+      var _this = this;
+
+      var messages = [];
+
+      if ((this.hint && this.isFocused || this.hint && this.persistentHint) && this.validations.length === 0) {
+        messages = [this.genHint()];
+      } else if (this.validations.length) {
+        messages = this.validations.map(function (v) {
+          return _this.genError(v);
+        });
+      }
+
+      return this.$createElement('transition-group', {
+        'class': 'input-group__messages',
+        props: {
+          tag: 'div',
+          name: 'slide-y-transition'
+        }
+      }, messages);
+    },
+    genHint: function genHint() {
+      return this.$createElement('div', {
+        'class': 'input-group__hint',
+        key: this.hint,
+        domProps: { innerHTML: this.hint }
+      });
+    },
+    genError: function genError(error) {
+      return this.$createElement('div', {
+        'class': 'input-group__error',
+        key: error
+      }, error);
+    },
+    genIcon: function genIcon(type) {
+      var _class;
+
+      var defaultCallback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+      var shouldClear = type === 'append' && this.clearable && this.isDirty;
+      var icon = shouldClear ? 'clear' : this[type + 'Icon'];
+      var callback = shouldClear ? this.clearableCallback : this[type + 'IconCb'] || defaultCallback;
+
+      return this.$createElement('k-icon', {
+        attrs: {
+          'aria-hidden': true
+        },
+        'class': (_class = {}, _defineProperty(_class, 'input-group__' + type + '-icon', true), _defineProperty(_class, 'input-group__icon-cb', !!callback), _defineProperty(_class, 'input-group__icon-clearable', shouldClear), _class),
+        props: {
+          disabled: this.disabled
+        },
+        on: {
+          click: function click(e) {
+            if (!callback) return;
+
+            e.stopPropagation();
+            callback();
+          }
+        }
+      }, icon);
+    },
+    genInputGroup: function genInputGroup(input) {
+      var _this2 = this;
+
+      var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var defaultAppendCallback = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+
+      var children = [];
+      var wrapperChildren = [];
+      var detailsChildren = [];
+
+      data = Object.assign({}, {
+        'class': this.inputGroupClasses,
+        attrs: {
+          tabindex: this.disabled ? -1 : this.internalTabIndex || this.tabindex
+        },
+        on: {
+          focus: this.groupFocus,
+          blur: this.groupBlur,
+          click: function click() {
+            return _this2.tabFocused = false;
+          },
+          keyup: function keyup(e) {
+            if ([9, 16].includes(e.keyCode)) {
+              _this2.tabFocused = true;
+            }
+          },
+          keydown: function keydown(e) {
+            if (!_this2.toggle) return;
+
+            if (_this2.toggleKeys.includes(e.keyCode)) {
+              e.preventDefault();
+              _this2.toggle();
+            }
+          }
+        }
+      }, data);
+
+      if (this.$slots.label || this.label) {
+        children.push(this.genLabel());
+      }
+
+      wrapperChildren.push(input);
+
+      if (this.prependIcon) {
+        wrapperChildren.unshift(this.genIcon('prepend'));
+      }
+
+      if (this.appendIcon || this.clearable) {
+        wrapperChildren.push(this.genIcon('append', defaultAppendCallback));
+      }
+
+      var progress = this.genProgress();
+      progress && detailsChildren.push(progress);
+
+      children.push(this.$createElement('div', {
+        'class': 'input-group__input'
+      }, wrapperChildren));
+      detailsChildren.push(this.genMessages());
+
+      if (this.counter) {
+        detailsChildren.push(this.genCounter());
+      }
+
+      children.push(this.$createElement('div', {
+        'class': 'input-group__details'
+      }, detailsChildren));
+
+      return this.$createElement('div', data, children);
+    }
+  }
+};

package/es5/mixins/loadable.js

@@ -0,0 +1,31 @@
+/**
+ * Loadable
+ *
+ * @mixin
+ *
+ * Used to add linear progress bar to components
+ * Can use a default bar with a specific color
+ * or designate a custom progress linear bar
+ */
+export default {
+  props: {
+    loading: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+
+  methods: {
+    genProgress: function genProgress() {
+      if (this.loading === false) return null;
+
+      return this.$slots.progress || this.$createElement('k-progress-linear', {
+        props: {
+          color: this.loading === true || this.loading === '' ? this.color || 'primary' : this.loading,
+          height: 2,
+          indeterminate: true
+        }
+      });
+    }
+  }
+};