kdutify 0.16.9-rc.0

package/es5/components/KBtnToggle/KBtnToggle.js

@@ -0,0 +1,92 @@
+require('../../../src/stylus/components/_button-toggle.styl');
+
+import ButtonGroup from '../../mixins/button-group';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-btn-toggle',
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  mixins: [ButtonGroup, Themeable],
+
+  props: {
+    inputValue: {
+      required: false
+    },
+    items: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    mandatory: Boolean,
+    multiple: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'btn-toggle': true,
+        'btn-toggle--selected': this.hasValue,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      };
+    },
+    hasValue: function hasValue() {
+      return this.multiple && this.inputValue.length || !this.multiple && this.inputValue !== null && typeof this.inputValue !== 'undefined';
+    }
+  },
+
+  watch: {
+    inputValue: {
+      handler: function handler() {
+        this.update();
+      },
+
+      deep: true
+    }
+  },
+
+  methods: {
+    isSelected: function isSelected(i) {
+      var item = this.getValue(i);
+      if (!this.multiple) {
+        return this.inputValue === item;
+      }
+
+      return this.inputValue.includes(item);
+    },
+    updateValue: function updateValue(i) {
+      var item = this.getValue(i);
+      if (!this.multiple) {
+        if (this.mandatory && this.inputValue === item) return;
+        return this.$emit('change', this.inputValue === item ? null : item);
+      }
+
+      var items = this.inputValue.slice();
+
+      var index = items.indexOf(item);
+      if (index > -1) {
+        if (this.mandatory && items.length === 1) return;
+        items.length >= 1 && items.splice(index, 1);
+      } else {
+        items.push(item);
+      }
+
+      this.$emit('change', items);
+    }
+  },
+
+  mounted: function mounted() {
+    if (this.items.length > 0) {
+      console.warn('The \'items\' props has been deprecated. k-btn-toggle now has a default slot where you can place buttons.');
+    }
+  },
+  render: function render(h) {
+    return h('div', { class: this.classes }, this.$slots.default);
+  }
+};

package/es5/components/KBtnToggle/index.js

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

package/es5/components/KCard/KCard.js

@@ -0,0 +1,63 @@
+require('../../../src/stylus/components/_cards.styl');
+
+import Colorable from '../../mixins/colorable';
+import Routable from '../../mixins/routable';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-card',
+
+  mixins: [Colorable, Routable, Themeable],
+
+  props: {
+    flat: Boolean,
+    height: {
+      type: String,
+      default: 'auto'
+    },
+    hover: Boolean,
+    img: String,
+    raised: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    tile: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      return this.addBackgroundColorClassChecks({
+        'card': true,
+        'card--flat': this.flat,
+        'card--horizontal': this.horizontal,
+        'card--hover': this.hover,
+        'card--raised': this.raised,
+        'card--tile': this.tile,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      });
+    },
+    styles: function styles() {
+      var style = {
+        height: isNaN(this.height) ? this.height : this.height + 'px'
+      };
+
+      if (this.img) {
+        style.background = 'url(' + this.img + ') center center / cover no-repeat';
+      }
+
+      return style;
+    }
+  },
+
+  render: function render(h) {
+    var _generateRouteLink = this.generateRouteLink(),
+        tag = _generateRouteLink.tag,
+        data = _generateRouteLink.data;
+
+    data.style = this.styles;
+
+    return h(tag, data, this.$slots.default);
+  }
+};

package/es5/components/KCard/KCardMedia.js

@@ -0,0 +1,41 @@
+export default {
+  name: 'k-card-media',
+
+  props: {
+    contain: Boolean,
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    src: {
+      type: String
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      'class': 'card__media',
+      style: {
+        height: !isNaN(this.height) ? this.height + 'px' : this.height
+      },
+      on: this.$listeners
+    };
+
+    var children = [];
+
+    if (this.src) {
+      children.push(h('div', {
+        'class': 'card__media__background',
+        style: {
+          background: 'url(' + this.src + ') center center / ' + (this.contain ? 'contain' : 'cover') + ' no-repeat'
+        }
+      }));
+    }
+
+    children.push(h('div', {
+      'class': 'card__media__content'
+    }, this.$slots.default));
+
+    return h('div', data, children);
+  }
+};

package/es5/components/KCard/KCardTitle.js

@@ -0,0 +1,21 @@
+export default {
+  name: 'k-card-title',
+
+  functional: true,
+
+  props: {
+    primaryTitle: Boolean
+  },
+
+  render: function render(h, _ref) {
+    var data = _ref.data,
+        props = _ref.props,
+        children = _ref.children;
+
+    data.staticClass = ('card__title ' + (data.staticClass || '')).trim();
+
+    if (props.primaryTitle) data.staticClass += ' card__title--primary';
+
+    return h('div', data, children);
+  }
+};

package/es5/components/KCard/index.js

@@ -0,0 +1,19 @@
+import { createSimpleFunctional } from '../../util/helpers';
+import KCard from './KCard';
+import KCardMedia from './KCardMedia';
+import KCardTitle from './KCardTitle';
+
+export { KCard, KCardMedia, KCardTitle };
+
+KCard.install = function install(Kdu) {
+  var KCardActions = createSimpleFunctional('card__actions');
+  var KCardText = createSimpleFunctional('card__text');
+
+  Kdu.component(KCard.name, KCard);
+  Kdu.component(KCardMedia.name, KCardMedia);
+  Kdu.component(KCardTitle.name, KCardTitle);
+  Kdu.component('k-card-actions', KCardActions);
+  Kdu.component('k-card-text', KCardText);
+};
+
+export default KCard;

package/es5/components/KCarousel/KCarousel.js

@@ -0,0 +1,178 @@
+require('../../../src/stylus/components/_carousel.styl');
+
+import KBtn from '../KBtn';
+import KIcon from '../KIcon';
+
+import Bootable from '../../mixins/bootable';
+import Themeable from '../../mixins/themeable';
+
+import Touch from '../../directives/touch';
+
+export default {
+  name: 'k-carousel',
+
+  mixins: [Bootable, Themeable],
+
+  directives: { Touch: Touch },
+
+  data: function data() {
+    return {
+      inputValue: null,
+      items: [],
+      slideTimeout: null,
+      reverse: false
+    };
+  },
+
+
+  props: {
+    cycle: {
+      type: Boolean,
+      default: true
+    },
+    hideControls: Boolean,
+    icon: {
+      type: String,
+      default: 'fiber_manual_record'
+    },
+    interval: {
+      type: [Number, String],
+      default: 6000,
+      validator: function validator(value) {
+        return value > 0;
+      }
+    },
+    leftControlIcon: {
+      type: [Boolean, String],
+      default: 'chevron_left'
+    },
+    rightControlIcon: {
+      type: [Boolean, String],
+      default: 'chevron_right'
+    },
+    value: Number
+  },
+
+  watch: {
+    inputValue: function inputValue() {
+      var _this = this;
+
+      // Evaluate items when inputValue changes to account for
+      // dynamic changing of children
+      this.items = this.$children.filter(function (i) {
+        return i.$el.classList && i.$el.classList.contains('carousel__item');
+      });
+
+      this.items.forEach(function (i) {
+        return i.open(_this.items[_this.inputValue]._uid, _this.reverse);
+      });
+
+      this.$emit('input', this.inputValue);
+      this.restartTimeout();
+    },
+    value: function value(val) {
+      this.inputValue = val;
+    },
+    interval: function interval() {
+      this.restartTimeout();
+    },
+    cycle: function cycle(val) {
+      if (val) {
+        this.restartTimeout();
+      } else {
+        clearTimeout(this.slideTimeout);
+        this.slideTimeout = null;
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    this.init();
+  },
+
+
+  methods: {
+    genControls: function genControls() {
+      return this.$createElement('div', {
+        staticClass: 'carousel__controls'
+      }, this.genItems());
+    },
+    genIcon: function genIcon(direction, icon, fn) {
+      if (!icon) return null;
+
+      return this.$createElement('div', {
+        staticClass: 'carousel__' + direction
+      }, [this.$createElement(KBtn, {
+        props: {
+          icon: true,
+          dark: this.dark || !this.light,
+          light: this.light
+        },
+        on: { click: fn }
+      }, [this.$createElement(KIcon, icon)])]);
+    },
+    genItems: function genItems() {
+      var _this2 = this;
+
+      return this.items.map(function (item, index) {
+        return _this2.$createElement(KBtn, {
+          class: {
+            'carousel__controls__item': true,
+            'carousel__controls__item--active': index === _this2.inputValue
+          },
+          props: {
+            icon: true,
+            dark: _this2.dark || !_this2.light,
+            light: _this2.light
+          },
+          key: index,
+          on: { click: _this2.select.bind(_this2, index) }
+        }, [_this2.$createElement(KIcon, _this2.icon)]);
+      });
+    },
+    restartTimeout: function restartTimeout() {
+      this.slideTimeout && clearTimeout(this.slideTimeout);
+      this.slideTimeout = null;
+
+      var raf = requestAnimationFrame || setTimeout;
+      raf(this.startTimeout);
+    },
+    init: function init() {
+      this.inputValue = this.value || 0;
+    },
+    next: function next() {
+      this.reverse = false;
+      this.inputValue = (this.inputValue + 1) % this.items.length;
+    },
+    prev: function prev() {
+      this.reverse = true;
+      this.inputValue = (this.inputValue + this.items.length - 1) % this.items.length;
+    },
+    select: function select(index) {
+      this.reverse = index < this.inputValue;
+      this.inputValue = index;
+    },
+    startTimeout: function startTimeout() {
+      var _this3 = this;
+
+      if (!this.cycle) return;
+
+      this.slideTimeout = setTimeout(function () {
+        return _this3.next();
+      }, this.interval > 0 ? this.interval : 6000);
+    }
+  },
+
+  render: function render(h) {
+    return h('div', {
+      staticClass: 'carousel',
+      directives: [{
+        name: 'touch',
+        value: {
+          left: this.next,
+          right: this.prev
+        }
+      }]
+    }, [this.genIcon('left', this.leftControlIcon, this.prev), this.genIcon('right', this.rightControlIcon, this.next), this.hideControls ? null : this.genControls(), this.$slots.default]);
+  }
+};

package/es5/components/KCarousel/KCarouselItem.js

@@ -0,0 +1,63 @@
+export default {
+  name: 'k-carousel-item',
+
+  data: function data() {
+    return {
+      active: false,
+      reverse: false
+    };
+  },
+
+
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+
+    transition: {
+      type: String,
+      default: 'tab-transition'
+    },
+
+    reverseTransition: {
+      type: String,
+      default: 'tab-reverse-transition'
+    }
+  },
+
+  computed: {
+    computedTransition: function computedTransition() {
+      return this.reverse ? this.reverseTransition : this.transition;
+    },
+    styles: function styles() {
+      return {
+        backgroundImage: 'url(' + this.src + ')'
+      };
+    }
+  },
+
+  methods: {
+    open: function open(id, reverse) {
+      this.active = this._uid === id;
+      this.reverse = reverse;
+    }
+  },
+
+  render: function render(h) {
+    var item = h('div', {
+      class: {
+        'carousel__item': true,
+        'reverse': this.reverse
+      },
+      style: this.styles,
+      on: this.$listeners,
+      directives: [{
+        name: 'show',
+        value: this.active
+      }]
+    }, [this.$slots.default]);
+
+    return h('transition', { props: { name: this.computedTransition } }, [item]);
+  }
+};

package/es5/components/KCarousel/index.js

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

package/es5/components/KCheckbox/KCheckbox.js

@@ -0,0 +1,89 @@
+require('../../../src/stylus/components/_input-groups.styl');
+require('../../../src/stylus/components/_selection-controls.styl');
+
+import KIcon from '../KIcon';
+import { KFadeTransition } from '../transitions';
+import Rippleable from '../../mixins/rippleable';
+import Selectable from '../../mixins/selectable';
+
+export default {
+  name: 'k-checkbox',
+
+  components: {
+    KFadeTransition: KFadeTransition,
+    KIcon: KIcon
+  },
+
+  mixins: [Rippleable, Selectable],
+
+  data: function data() {
+    return {
+      inputIndeterminate: this.indeterminate
+    };
+  },
+
+
+  props: {
+    indeterminate: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      var classes = {
+        'checkbox': true,
+        'input-group--selection-controls': true,
+        'input-group--active': this.isActive
+      };
+
+      if (this.hasError) {
+        classes['error--text'] = true;
+      } else {
+        return this.addTextColorClassChecks(classes);
+      }
+
+      return classes;
+    },
+    icon: function icon() {
+      if (this.inputIndeterminate) {
+        return 'indeterminate_check_box';
+      } else if (this.isActive) {
+        return 'check_box';
+      } else {
+        return 'check_box_outline_blank';
+      }
+    }
+  },
+
+  methods: {
+    groupFocus: function groupFocus(e) {
+      this.isFocused = true;
+      this.$emit('focus', e);
+    },
+    groupBlur: function groupBlur(e) {
+      this.isFocused = false;
+      this.tabFocused = false;
+      this.$emit('blur', this.inputValue);
+    }
+  },
+
+  render: function render(h) {
+    var transition = h('k-fade-transition', [h('k-icon', {
+      staticClass: 'icon--selection-control',
+      'class': {
+        'icon--checkbox': this.icon === 'check_box'
+      },
+      key: this.icon
+    }, this.icon)]);
+
+    var data = {
+      attrs: {
+        tabindex: this.disabled ? -1 : this.internalTabIndex || this.tabindex,
+        role: 'checkbox',
+        'aria-checked': this.inputIndeterminate && 'mixed' || this.isActive && 'true' || 'false',
+        'aria-label': this.label
+      }
+    };
+
+    return this.genInputGroup([transition, this.genRipple()], data);
+  }
+};

package/es5/components/KCheckbox/index.js

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

package/es5/components/KChip/KChip.js

@@ -0,0 +1,81 @@
+require('../../../src/stylus/components/_chips.styl');
+
+import KIcon from '../KIcon';
+import Colorable from '../../mixins/colorable';
+import Themeable from '../../mixins/themeable';
+import Toggleable from '../../mixins/toggleable';
+
+export default {
+  name: 'k-chip',
+
+  components: {
+    KIcon: KIcon
+  },
+
+  mixins: [Colorable, Themeable, Toggleable],
+
+  props: {
+    close: Boolean,
+    disabled: Boolean,
+    label: Boolean,
+    outline: Boolean,
+    // Used for selects/tagging
+    selected: Boolean,
+    small: Boolean,
+    textColor: String,
+    value: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      var classes = this.addBackgroundColorClassChecks({
+        'chip': true,
+        'chip--disabled': this.disabled,
+        'chip--selected': this.selected,
+        'chip--label': this.label,
+        'chip--outline': this.outline,
+        'chip--small': this.small,
+        'chip--removable': this.close,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      });
+
+      return this.textColor || this.outline ? this.addTextColorClassChecks(classes, this.textColor ? 'textColor' : 'color') : classes;
+    }
+  },
+
+  render: function render(h) {
+    var _this = this;
+
+    var children = [this.$slots.default];
+    var data = {
+      'class': this.classes,
+      attrs: { tabindex: this.disabled ? -1 : 0 },
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      on: this.$listeners
+    };
+
+    if (this.close) {
+      var _data = {
+        staticClass: 'chip__close',
+        on: {
+          click: function click(e) {
+            e.stopPropagation();
+
+            _this.$emit('input', false);
+          }
+        }
+      };
+
+      children.push(h('div', _data, [h(KIcon, { props: { right: true } }, 'cancel')]));
+    }
+
+    return h('span', data, children);
+  }
+};

package/es5/components/KChip/index.js

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