kdutify 0.16.9-rc.0

package/es5/components/KExpansionPanel/KExpansionPanelContent.js

@@ -0,0 +1,114 @@
+import { KExpandTransition } from '../transitions';
+
+import Bootable from '../../mixins/bootable';
+import Toggleable from '../../mixins/toggleable';
+
+import KIcon from '../KIcon';
+
+import Ripple from '../../directives/ripple';
+import ClickOutside from '../../directives/click-outside';
+
+export default {
+  name: 'k-expansion-panel-content',
+
+  mixins: [Bootable, Toggleable],
+
+  components: {
+    KIcon: KIcon
+  },
+
+  directives: {
+    Ripple: Ripple,
+    ClickOutside: ClickOutside
+  },
+
+  inject: ['focusable', 'panelClick'],
+
+  data: function data() {
+    return {
+      height: 'auto'
+    };
+  },
+
+
+  props: {
+    hideActions: Boolean,
+    ripple: Boolean
+  },
+
+  methods: {
+    genBody: function genBody() {
+      return this.$createElement('div', {
+        ref: 'body',
+        class: 'expansion-panel__body',
+        directives: [{
+          name: 'show',
+          value: this.isActive
+        }]
+      }, this.showLazyContent(this.$slots.default));
+    },
+    genHeader: function genHeader() {
+      var _this = this;
+
+      return this.$createElement('div', {
+        staticClass: 'expansion-panel__header',
+        directives: [{
+          name: 'ripple',
+          value: this.ripple
+        }],
+        on: {
+          click: function click() {
+            return _this.panelClick(_this._uid);
+          }
+        }
+      }, [this.$slots.header, this.genIcon()]);
+    },
+    genIcon: function genIcon(h) {
+      if (this.hideActions) return null;
+
+      var icon = this.$slots.actions || this.$createElement('k-icon', 'keyboard_arrow_down');
+
+      return this.$createElement('div', {
+        staticClass: 'header__icon'
+      }, [icon]);
+    },
+    toggle: function toggle(uid) {
+      var _this2 = this;
+
+      var isActive = this._uid === uid && !this.isActive;
+
+      if (isActive) this.isBooted = true;
+
+      // We treat bootable differently
+      // Needs time to calc height
+      this.$nextTick(function () {
+        return _this2.isActive = isActive;
+      });
+    }
+  },
+
+  render: function render(h) {
+    var _this3 = this;
+
+    var children = [];
+
+    this.$slots.header && children.push(this.genHeader());
+    children.push(h(KExpandTransition, [this.genBody()]));
+
+    return h('li', {
+      staticClass: 'expansion-panel__container',
+      'class': {
+        'expansion-panel__container--active': this.isActive
+      },
+      attrs: {
+        tabindex: 0
+      },
+      on: {
+        keydown: function keydown(e) {
+          // Ensure element is focusable and the activeElement
+          if (_this3.focusable && _this3.$el === document.activeElement && e.keyCode === 13) _this3.panelClick(_this3._uid);
+        }
+      }
+    }, children);
+  }
+};

package/es5/components/KExpansionPanel/index.js

@@ -0,0 +1,9 @@
+import KExpansionPanel from './KExpansionPanel';
+import KExpansionPanelContent from './KExpansionPanelContent';
+
+KExpansionPanel.install = function install(Kdu) {
+  Kdu.component(KExpansionPanel.name, KExpansionPanel);
+  Kdu.component(KExpansionPanelContent.name, KExpansionPanelContent);
+};
+
+export default KExpansionPanel;

package/es5/components/KFooter/KFooter.js

@@ -0,0 +1,61 @@
+require('../../../src/stylus/components/_footer.styl');
+
+import Applicationable from '../../mixins/applicationable';
+import Colorable from '../../mixins/colorable';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-footer',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  props: {
+    absolute: Boolean,
+    fixed: Boolean
+  },
+
+  computed: {
+    paddingLeft: function paddingLeft() {
+      return this.fixed || !this.app ? 0 : this.$kdutify.application.left;
+    },
+    paddingRight: function paddingRight() {
+      return this.fixed || !this.app ? 0 : this.$kdutify.application.right;
+    }
+  },
+
+  destroyed: function destroyed() {
+    if (this.app) this.$kdutify.application.bottom = 0;
+  },
+
+
+  methods: {
+    updateApplication: function updateApplication() {
+      if (!this.app) return;
+
+      this.$kdutify.application.bottom = this.fixed ? this.$el && this.$el.clientHeight : 0;
+    }
+  },
+
+  mounted: function mounted() {
+    this.updateApplication();
+  },
+  render: function render(h) {
+    this.updateApplication();
+
+    var data = {
+      staticClass: 'footer',
+      'class': this.addBackgroundColorClassChecks({
+        'footer--absolute': this.absolute,
+        'footer--fixed': this.fixed,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }),
+      style: {
+        paddingLeft: this.paddingLeft + 'px',
+        paddingRight: this.paddingRight + 'px'
+      }
+    };
+
+    return h('footer', data, this.$slots.default);
+  }
+};

package/es5/components/KFooter/index.js

@@ -0,0 +1,7 @@
+import KFooter from './KFooter';
+
+KFooter.install = function install(Kdu) {
+  Kdu.component(KFooter.name, KFooter);
+};
+
+export default KFooter;

package/es5/components/KForm/KForm.js

@@ -0,0 +1,203 @@
+export default {
+  name: 'k-form',
+
+  inheritAttrs: false,
+
+  data: function data() {
+    return {
+      inputs: [],
+      errorBag: {}
+    };
+  },
+
+
+  props: {
+    value: Boolean,
+    lazyValidation: Boolean
+  },
+
+  watch: {
+    errorBag: {
+      handler: function handler() {
+        var errors = Object.values(this.errorBag).includes(true);
+
+        this.$emit('input', !errors);
+
+        return !errors;
+      },
+
+      deep: true
+    }
+  },
+
+  methods: {
+    getInputs: function getInputs() {
+      var results = [];
+
+      var search = function search(children) {
+        var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+        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.errorBucket !== undefined) {
+              results.push(child);
+            } else {
+              search(child.$children, depth + 1);
+            }
+          }
+        } catch (err) {
+          _didIteratorError = true;
+          _iteratorError = err;
+        } finally {
+          try {
+            if (!_iteratorNormalCompletion && _iterator.return) {
+              _iterator.return();
+            }
+          } finally {
+            if (_didIteratorError) {
+              throw _iteratorError;
+            }
+          }
+        }
+
+        if (depth === 0) return results;
+      };
+
+      return search(this.$children);
+    },
+    watchInputs: function watchInputs() {
+      var inputs = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.getInputs();
+      var _iteratorNormalCompletion2 = true;
+      var _didIteratorError2 = false;
+      var _iteratorError2 = undefined;
+
+      try {
+        for (var _iterator2 = inputs[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
+          var child = _step2.value;
+
+          if (this.inputs.includes(child)) {
+            continue; // We already know about this input
+          }
+
+          this.inputs.push(child);
+          this.watchChild(child);
+        }
+      } catch (err) {
+        _didIteratorError2 = true;
+        _iteratorError2 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion2 && _iterator2.return) {
+            _iterator2.return();
+          }
+        } finally {
+          if (_didIteratorError2) {
+            throw _iteratorError2;
+          }
+        }
+      }
+    },
+    watchChild: function watchChild(child) {
+      var _this = this;
+
+      var watcher = function watcher(child) {
+        child.$watch('valid', function (val) {
+          _this.$set(_this.errorBag, child._uid, !val);
+        }, { immediate: true });
+      };
+
+      if (!this.lazyValidation) return watcher(child);
+
+      // Only start watching inputs if we need to
+      child.$watch('shouldValidate', function (val) {
+        if (!val) return;
+
+        // Only watch if we're not already doing it
+        if (_this.errorBag.hasOwnProperty(child._uid)) return;
+
+        watcher(child);
+      });
+    },
+    validate: function validate() {
+      var errors = this.inputs.filter(function (input) {
+        return !input.validate(true);
+      }).length;
+      return !errors;
+    },
+    reset: function reset() {
+      var _this2 = this;
+
+      this.inputs.forEach(function (input) {
+        return input.reset();
+      });
+      if (this.lazyValidation) {
+        Object.keys(this.errorBag).forEach(function (key) {
+          return _this2.$delete(_this2.errorBag, key);
+        });
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    var _this3 = this;
+
+    this.$kdutify.load(function () {
+      return _this3.watchInputs();
+    });
+  },
+  updated: function updated() {
+    var inputs = this.getInputs();
+
+    if (inputs.length < this.inputs.length) {
+      // Something was removed, we don't want it in the errorBag any more
+      var removed = this.inputs.filter(function (i) {
+        return !inputs.includes(i);
+      });
+
+      var _iteratorNormalCompletion3 = true;
+      var _didIteratorError3 = false;
+      var _iteratorError3 = undefined;
+
+      try {
+        for (var _iterator3 = removed[Symbol.iterator](), _step3; !(_iteratorNormalCompletion3 = (_step3 = _iterator3.next()).done); _iteratorNormalCompletion3 = true) {
+          var input = _step3.value;
+
+          this.$delete(this.errorBag, input._uid);
+          this.$delete(this.inputs, this.inputs.indexOf(input));
+        }
+      } catch (err) {
+        _didIteratorError3 = true;
+        _iteratorError3 = err;
+      } finally {
+        try {
+          if (!_iteratorNormalCompletion3 && _iterator3.return) {
+            _iterator3.return();
+          }
+        } finally {
+          if (_didIteratorError3) {
+            throw _iteratorError3;
+          }
+        }
+      }
+    }
+
+    this.watchInputs(inputs);
+  },
+  render: function render(h) {
+    var _this4 = this;
+
+    return h('form', {
+      attrs: this.$attrs,
+      on: {
+        submit: function submit(e) {
+          return _this4.$emit('submit', e);
+        }
+      }
+    }, this.$slots.default);
+  }
+};

package/es5/components/KForm/index.js

@@ -0,0 +1,7 @@
+import KForm from './KForm';
+
+KForm.install = function install(Kdu) {
+  Kdu.component(KForm.name, KForm);
+};
+
+export default KForm;

package/es5/components/KGrid/KContainer.js

@@ -0,0 +1,5 @@
+require('../../../src/stylus/components/_grid.styl');
+
+import Grid from './grid';
+
+export default Grid('container');

package/es5/components/KGrid/KContent.js

@@ -0,0 +1,33 @@
+require('../../../src/stylus/components/_content.styl');
+
+export default {
+  name: 'k-content',
+
+  computed: {
+    styles: function styles() {
+      var _$kdutify$application = this.$kdutify.application,
+          bar = _$kdutify$application.bar,
+          top = _$kdutify$application.top,
+          right = _$kdutify$application.right,
+          bottom = _$kdutify$application.bottom,
+          left = _$kdutify$application.left;
+
+
+      return {
+        paddingTop: top + bar + 'px',
+        paddingRight: right + 'px',
+        paddingBottom: bottom + 'px',
+        paddingLeft: left + 'px'
+      };
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      staticClass: 'content',
+      style: this.styles
+    };
+
+    return h('div', data, this.$slots.default);
+  }
+};

package/es5/components/KGrid/KFlex.js

@@ -0,0 +1,5 @@
+require('../../../src/stylus/components/_grid.styl');
+
+import Grid from './grid';
+
+export default Grid('flex');

package/es5/components/KGrid/KLayout.js

@@ -0,0 +1,5 @@
+require('../../../src/stylus/components/_grid.styl');
+
+import Grid from './grid';
+
+export default Grid('layout');

package/es5/components/KGrid/grid.js

@@ -0,0 +1,43 @@
+export default function Grid(name) {
+  return {
+    name: 'k-' + name,
+
+    functional: true,
+
+    props: {
+      id: String,
+      tag: {
+        type: String,
+        default: 'div'
+      }
+    },
+
+    render: function render(h, _ref) {
+      var props = _ref.props,
+          data = _ref.data,
+          children = _ref.children;
+
+      data.staticClass = (name + ' ' + (data.staticClass || '')).trim();
+
+      if (data.attrs) {
+        var classes = [];
+
+        Object.keys(data.attrs).forEach(function (key) {
+          var value = data.attrs[key];
+
+          if (typeof value === 'string') classes.push(key);else if (value) classes.push(key);
+        });
+
+        if (classes.length) data.staticClass += ' ' + classes.join(' ');
+        delete data.attrs;
+      }
+
+      if (props.id) {
+        data.domProps = data.domProps || {};
+        data.domProps.id = props.id;
+      }
+
+      return h(props.tag, data, children);
+    }
+  };
+}

package/es5/components/KGrid/index.js

@@ -0,0 +1,20 @@
+import { createSimpleFunctional } from '../../util/helpers';
+import KContent from './KContent';
+import KContainer from './KContainer';
+import KFlex from './KFlex';
+import KLayout from './KLayout';
+
+export var KSpacer = createSimpleFunctional('spacer');
+export { KContainer, KContent, KFlex, KLayout };
+
+var KGrid = {};
+
+KGrid.install = function install(Kdu) {
+  Kdu.component(KContent.name, KContent);
+  Kdu.component(KContainer.name, KContainer);
+  Kdu.component(KFlex.name, KFlex);
+  Kdu.component(KLayout.name, KLayout);
+  Kdu.component(KSpacer.name, KSpacer);
+};
+
+export default KGrid;

package/es5/components/KIcon/KIcon.js

@@ -0,0 +1,93 @@
+require('../../../src/stylus/components/_icons.styl');
+
+import Themeable from '../../mixins/themeable';
+import Colorable from '../../mixins/colorable';
+import Contextualable from '../../mixins/contextualable';
+
+export default {
+  name: 'k-icon',
+
+  functional: true,
+
+  mixins: [Colorable, Contextualable, Themeable],
+
+  props: {
+    disabled: Boolean,
+    large: Boolean,
+    left: Boolean,
+    medium: Boolean,
+    right: Boolean,
+    xLarge: Boolean
+  },
+
+  render: function render(h, _ref) {
+    var props = _ref.props,
+        data = _ref.data,
+        _ref$children = _ref.children,
+        children = _ref$children === undefined ? [] : _ref$children;
+
+    Object.keys(Contextualable.props).forEach(function (prop) {
+      if (props[prop]) {
+        console.warn('Context prop \'' + prop + '\' for KIcon component has been deprecated. Use \'color\' prop instead.');
+      }
+    });
+
+    if (props.fa || props.mdi) console.warn('The k-icon prop \'fa\' and \'mdi\' will be deprecated in the next release. Use \'fa\' or \'mdi\' prefix in icon name instead.');
+    var iconName = '';
+    var iconType = 'material-icons';
+
+    if (children.length) {
+      iconName = children.pop().text;
+    } else if (data.domProps && data.domProps.textContent) {
+      iconName = data.domProps.textContent;
+      delete data.domProps.textContent;
+    } else if (data.domProps && data.domProps.innerHTML) {
+      iconName = data.domProps.innerHTML;
+      delete data.domProps.innerHTML;
+    }
+
+    var thirdPartyIcon = iconName.indexOf('-') > -1;
+    if (thirdPartyIcon) iconType = iconName.slice(0, iconName.indexOf('-'));
+
+    // To keep things backwards compatible for now
+    iconType = props.fa ? 'fa' : props.mdi ? 'mdi' : iconType;
+
+    data.staticClass = (iconType + ' icon ' + (data.staticClass || '')).trim();
+    data.attrs = data.attrs || {};
+
+    var classes = Object.assign({
+      'icon--disabled': props.disabled,
+      'icon--large': props.large,
+      'icon--left': props.left,
+      'icon--medium': props.medium,
+      'icon--right': props.right,
+      'icon--x-large': props.xLarge,
+      'theme--dark': props.dark,
+      'theme--light': props.light
+    }, props.color ? Colorable.methods.addTextColorClassChecks.call(props, {}) : {
+      'primary--text': props.primary,
+      'secondary--text': props.secondary,
+      'success--text': props.success,
+      'info--text': props.info,
+      'warning--text': props.warning,
+      'error--text': props.error
+    });
+
+    var iconClasses = Object.keys(classes).filter(function (k) {
+      return classes[k];
+    }).join(' ');
+    iconClasses && (data.staticClass += ' ' + iconClasses);
+
+    // To keep things backwards compatible for now
+    if (props.fa || props.mdi) {
+      var comparison = props.fa ? 'fa' : 'mdi';
+
+      if (iconName.indexOf(' ') > -1) data.staticClass += ' ' + comparison + '-' + iconName;else data.staticClass += ' ' + comparison + '-' + iconName.split(' ').join('-');
+    }
+
+    if (thirdPartyIcon) data.staticClass += ' ' + iconName;
+    !(thirdPartyIcon || props.fa || props.mdi) && children.push(iconName);
+
+    return h('i', data, children);
+  }
+};

package/es5/components/KIcon/index.js

@@ -0,0 +1,7 @@
+import KIcon from './KIcon';
+
+KIcon.install = function install(Kdu) {
+  Kdu.component(KIcon.name, KIcon);
+};
+
+export default KIcon;