kdutify 0.16.9-rc.0

package/es5/components/KStepper/KStepperContent.js

@@ -0,0 +1,134 @@
+import { KTabTransition, KTabReverseTransition } from '../transitions';
+
+export default {
+  name: 'k-stepper-content',
+
+  components: {
+    KTabTransition: KTabTransition,
+    KTabReverseTransition: KTabReverseTransition
+  },
+
+  data: function data() {
+    return {
+      height: 0,
+      isActive: false,
+      isReverse: false,
+      isVertical: false
+    };
+  },
+
+
+  props: {
+    step: {
+      type: [Number, String],
+      required: true
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'stepper__content': true
+      };
+    },
+    computedTransition: function computedTransition() {
+      return this.isReverse ? 'k-tab-reverse-transition' : 'k-tab-transition';
+    },
+    styles: function styles() {
+      if (!this.isVertical) return {};
+
+      return {
+        height: !isNaN(this.height) ? this.height + 'px' : this.height
+      };
+    },
+    wrapperClasses: function wrapperClasses() {
+      return {
+        'stepper__wrapper': true
+      };
+    }
+  },
+
+  watch: {
+    isActive: function isActive() {
+      if (!this.isVertical) {
+        return;
+      }
+
+      if (this.isActive) {
+        this.enter();
+      } else {
+        this.leave();
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    this.$refs.wrapper.addEventListener('transitionend', this.onTransition, false);
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.$refs.wrapper.removeEventListener('transitionend', this.onTransition, false);
+  },
+
+
+  methods: {
+    onTransition: function onTransition() {
+      if (!this.isActive) return;
+
+      this.height = 'auto';
+    },
+    enter: function enter() {
+      var _this = this;
+
+      var scrollHeight = 0;
+
+      // Render bug with height
+      setTimeout(function () {
+        scrollHeight = _this.$refs.wrapper.scrollHeight;
+      }, 0);
+
+      this.height = 0;
+
+      // Give the collapsing element time to collapse
+      setTimeout(function () {
+        return _this.height = scrollHeight || 'auto';
+      }, 450);
+    },
+    leave: function leave() {
+      var _this2 = this;
+
+      this.height = this.$refs.wrapper.clientHeight;
+      setTimeout(function () {
+        return _this2.height = 0;
+      }, 0);
+    },
+    toggle: function toggle(step, reverse) {
+      this.isActive = step.toString() === this.step.toString();
+      this.isReverse = reverse;
+    }
+  },
+
+  render: function render(h) {
+    var contentData = {
+      'class': this.classes
+    };
+    var wrapperData = {
+      'class': this.wrapperClasses,
+      style: this.styles,
+      ref: 'wrapper'
+    };
+
+    if (!this.isVertical) {
+      contentData.directives = [{
+        name: 'show',
+        value: this.isActive
+      }];
+    }
+
+    var wrapper = h('div', wrapperData, [this.$slots.default]);
+    var content = h('div', contentData, [wrapper]);
+
+    return h(this.computedTransition, {
+      on: this.$listeners
+    }, [content]);
+  }
+};

package/es5/components/KStepper/KStepperStep.js

@@ -0,0 +1,105 @@
+import KIcon from '../KIcon';
+import Ripple from '../../directives/ripple';
+
+export default {
+  name: 'k-stepper-step',
+
+  components: { KIcon: KIcon },
+
+  directives: { Ripple: Ripple },
+
+  inject: ['stepClick'],
+
+  data: function data() {
+    return {
+      isActive: false,
+      isInactive: true
+    };
+  },
+
+
+  props: {
+    complete: Boolean,
+    completeIcon: {
+      type: String,
+      default: 'check'
+    },
+    editIcon: {
+      type: String,
+      default: 'edit'
+    },
+    errorIcon: {
+      type: String,
+      default: 'warning'
+    },
+    editable: Boolean,
+    rules: {
+      type: Array,
+      default: function _default() {
+        return [];
+      }
+    },
+    step: [Number, String]
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'stepper__step': true,
+        'stepper__step--active': this.isActive,
+        'stepper__step--editable': this.editable,
+        'stepper__step--inactive': this.isInactive,
+        'stepper__step--error': this.hasError,
+        'stepper__step--complete': this.complete
+      };
+    },
+    hasError: function hasError() {
+      return this.rules.some(function (i) {
+        return i() !== true;
+      });
+    }
+  },
+
+  methods: {
+    click: function click(e) {
+      e.stopPropagation();
+
+      if (this.editable) {
+        this.stepClick(this.step);
+      }
+    },
+    toggle: function toggle(step) {
+      this.isActive = step.toString() === this.step.toString();
+      this.isInactive = Number(step) < Number(this.step);
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      'class': this.classes,
+      directives: [{
+        name: 'ripple',
+        value: this.editable
+      }],
+      on: { click: this.click }
+    };
+    var stepContent = void 0;
+
+    if (this.hasError) {
+      stepContent = [h('k-icon', {}, this.errorIcon)];
+    } else if (this.complete) {
+      if (this.editable) {
+        stepContent = [h('k-icon', {}, this.editIcon)];
+      } else {
+        stepContent = [h('k-icon', {}, this.completeIcon)];
+      }
+    } else {
+      stepContent = this.step;
+    }
+
+    var step = h('span', { 'class': 'stepper__step__step' }, stepContent);
+    var label = h('div', { 'class': 'stepper__label' }, this.$slots.default);
+
+    return h('div', data, [step, label]);
+  }
+};

package/es5/components/KStepper/index.js

@@ -0,0 +1,17 @@
+import { createSimpleFunctional } from '../../util/helpers';
+import KStepper from './KStepper';
+import KStepperStep from './KStepperStep';
+import KStepperContent from './KStepperContent';
+
+KStepper.install = function install(Kdu) {
+  var KStepperHeader = createSimpleFunctional('stepper__header');
+  var KStepperItems = createSimpleFunctional('stepper__items');
+
+  Kdu.component(KStepper.name, KStepper);
+  Kdu.component(KStepperContent.name, KStepperContent);
+  Kdu.component(KStepperStep.name, KStepperStep);
+  Kdu.component(KStepperHeader.name, KStepperHeader);
+  Kdu.component(KStepperItems.name, KStepperItems);
+};
+
+export default KStepper;

package/es5/components/KSubheader/KSubheader.js

@@ -0,0 +1,29 @@
+require('../../../src/stylus/components/_subheaders.styl');
+
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-subheader',
+
+  functional: true,
+
+  mixins: [Themeable],
+
+  props: {
+    inset: Boolean
+  },
+
+  render: function render(h, _ref) {
+    var data = _ref.data,
+        children = _ref.children,
+        props = _ref.props;
+
+    data.staticClass = ('subheader ' + (data.staticClass || '')).trim();
+
+    if (props.inset) data.staticClass += ' subheader--inset';
+    if (props.light) data.staticClass += ' theme--light';
+    if (props.dark) data.staticClass += ' theme--dark';
+
+    return h('li', data, children);
+  }
+};

package/es5/components/KSubheader/index.js

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

package/es5/components/KSwitch/KSwitch.js

@@ -0,0 +1,55 @@
+require('../../../src/stylus/components/_input-groups.styl');
+require('../../../src/stylus/components/_selection-controls.styl');
+require('../../../src/stylus/components/_switch.styl');
+
+import Rippleable from '../../mixins/rippleable';
+import Selectable from '../../mixins/selectable';
+
+export default {
+  name: 'k-switch',
+
+  mixins: [Rippleable, Selectable],
+
+  computed: {
+    classes: function classes() {
+      var classes = {
+        'input-group--selection-controls switch': true
+      };
+
+      if (this.hasError) {
+        classes['error--text'] = true;
+      } else {
+        return this.addTextColorClassChecks(classes);
+      }
+
+      return classes;
+    },
+    rippleClasses: function rippleClasses() {
+      return {
+        'input-group--selection-controls__ripple': true,
+        'input-group--selection-controls__ripple--active': this.isActive
+      };
+    },
+    containerClasses: function containerClasses() {
+      return {
+        'input-group--selection-controls__container': true,
+        'input-group--selection-controls__container--light': this.light,
+        'input-group--selection-controls__container--disabled': this.disabled
+      };
+    },
+    toggleClasses: function toggleClasses() {
+      return {
+        'input-group--selection-controls__toggle': true,
+        'input-group--selection-controls__toggle--active': this.isActive
+      };
+    }
+  },
+
+  render: function render(h) {
+    var container = h('div', {
+      'class': this.containerClasses
+    }, [h('div', { 'class': this.toggleClasses }), this.genRipple()]);
+
+    return this.genInputGroup([container]);
+  }
+};

package/es5/components/KSwitch/index.js

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

package/es5/components/KSystemBar/KSystemBar.js

@@ -0,0 +1,54 @@
+require('../../../src/stylus/components/_system-bars.styl');
+
+import Applicationable from '../../mixins/applicationable';
+import Colorable from '../../mixins/colorable';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-system-bar',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  props: {
+    lightsOut: Boolean,
+    status: Boolean,
+    window: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      return this.addBackgroundColorClassChecks({
+        'system-bar': true,
+        'system-bar--lights-out': this.lightsOut,
+        'system-bar--status': this.status,
+        'system-bar--window': this.window,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      });
+    },
+    computedHeight: function computedHeight() {
+      if (this.window) return 32;
+
+      return 24;
+    }
+  },
+
+  methods: {
+    updateApplication: function updateApplication() {
+      if (!this.app) return;
+
+      this.$kdutify.application.bar = this.computedHeight;
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      'class': this.classes,
+      style: {
+        height: this.computedHeight + 'px'
+      }
+    };
+
+    return h('div', data, this.$slots.default);
+  }
+};

package/es5/components/KSystemBar/index.js

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

package/es5/components/KTabs/KTabs.js

@@ -0,0 +1,272 @@
+require('../../../src/stylus/components/_tabs.styl');
+
+import Themeable from '../../mixins/themeable';
+import Resize from '../../directives/resize';
+
+export default {
+  name: 'k-tabs',
+
+  directives: {
+    Resize: Resize
+  },
+
+  mixins: [Themeable],
+
+  provide: function provide() {
+    var _this = this;
+
+    return {
+      registerContent: this.registerContent,
+      unregisterContent: this.unregisterContent,
+      registerTabItem: this.registerTabItem,
+      unregisterTabItem: this.unregisterTabItem,
+      next: this.next,
+      prev: this.prev,
+      slider: this.slider,
+      tabClick: this.tabClick,
+      isScrollable: function isScrollable() {
+        return _this.scrollable;
+      },
+      isMobile: function isMobile() {
+        return _this.isMobile;
+      }
+    };
+  },
+  data: function data() {
+    return {
+      content: [],
+      tabItems: [],
+      activeIndex: null,
+      isBooted: false,
+      isMobile: false,
+      resizeTimeout: null,
+      reverse: false,
+      target: null,
+      tabsSlider: null,
+      targetEl: null,
+      tabsContainer: null,
+      transitionTime: 300
+    };
+  },
+
+
+  props: {
+    centered: Boolean,
+    fixed: Boolean,
+    grow: Boolean,
+    icons: Boolean,
+    mobileBreakPoint: {
+      type: [Number, String],
+      default: 1280
+    },
+    value: String,
+    scrollable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'tabs': true,
+        'tabs--centered': this.centered,
+        'tabs--fixed': this.fixed,
+        'tabs--grow': this.grow,
+        'tabs--icons': this.icons,
+        'tabs--mobile': this.isMobile,
+        'tabs--scroll-bars': this.scrollable,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      };
+    }
+  },
+
+  watch: {
+    value: function value() {
+      this.tabClick(this.value);
+    },
+    activeIndex: function activeIndex() {
+      var _this2 = this;
+
+      this.updateTabs();
+      this.$nextTick(function () {
+        return _this2.isBooted = true;
+      });
+    },
+    tabItems: function tabItems(newItems, oldItems) {
+      var _this3 = this;
+
+      // Tab item got removed
+      if (oldItems.length > newItems.length) {
+        if (!newItems.find(function (o) {
+          return o.id === _this3.target;
+        })) {
+          var i = oldItems.findIndex(function (o) {
+            return o.id === _this3.target;
+          });
+
+          this.$nextTick(function () {
+            _this3.activeIndex = _this3.tabItems[i > 0 ? i - 1 : 0].id;
+            _this3.target = _this3.activeIndex;
+          });
+        }
+      }
+      this.slider();
+    },
+    '$kdutify.application.left': function $kdutifyApplicationLeft() {
+      this.onContainerResize();
+    },
+    '$kdutify.application.right': function $kdutifyApplicationRight() {
+      this.onContainerResize();
+    }
+  },
+
+  mounted: function mounted() {
+    var _this4 = this;
+
+    this.$kdutify.load(function () {
+      // // This is a workaround to detect if link is active
+      // // when being used as a router or nuxt link
+      var i = _this4.tabItems.findIndex(function (_ref) {
+        var el = _ref.el;
+
+        return el.firstChild.classList.contains('tabs__item--active');
+      });
+
+      var tab = _this4.value || (_this4.tabItems[i !== -1 ? i : 0] || {}).id;
+
+      tab && _this4.tabClick(tab) && _this4.onResize();
+    });
+  },
+
+
+  methods: {
+    registerContent: function registerContent(id, toggle) {
+      this.content.push({ id: id, toggle: toggle });
+    },
+    registerTabItem: function registerTabItem(id, toggle, el) {
+      this.tabItems.push({ id: id, toggle: toggle, el: el });
+    },
+    unregisterContent: function unregisterContent(id) {
+      this.content = this.content.filter(function (o) {
+        return o.id !== id;
+      });
+    },
+    unregisterTabItem: function unregisterTabItem(id) {
+      this.tabItems = this.tabItems.filter(function (o) {
+        return o.id !== id;
+      });
+    },
+    next: function next(cycle) {
+      var nextIndex = this.activeIndex + 1;
+
+      if (!this.content[nextIndex]) {
+        if (!cycle) return;
+        nextIndex = 0;
+      }
+
+      this.tabClick(this.tabItems[nextIndex].id);
+    },
+    prev: function prev(cycle) {
+      var prevIndex = this.activeIndex - 1;
+
+      if (!this.content[prevIndex]) {
+        if (!cycle) return;
+        prevIndex = this.content.length - 1;
+      }
+
+      this.tabClick(this.tabItems[prevIndex].id);
+    },
+    onResize: function onResize() {
+      this.isMobile = window.innerWidth < this.mobileBreakPoint;
+      this.slider();
+    },
+
+    /**
+     * When k-navigation-drawer changes the
+     * width of the container, call resize
+     * after the transition is complete
+     *
+     * @return {Void}
+     */
+    onContainerResize: function onContainerResize() {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = setTimeout(this.onResize, this.transitionTime);
+    },
+    slider: function slider(el) {
+      var _this5 = this;
+
+      this.tabsSlider = this.tabsSlider || this.$el.querySelector('.tabs__slider');
+
+      this.tabsContainer = this.tabsContainer || this.$el.querySelector('.tabs__container');
+
+      if (!this.tabsSlider || !this.tabsContainer) return;
+
+      this.targetEl = el || this.targetEl;
+
+      if (!this.targetEl) return;
+
+      // Gives DOM time to paint when
+      // processing slider for
+      // dynamic tabs
+      this.$nextTick(function () {
+        // #684 Calculate width as %
+        var width = _this5.targetEl.scrollWidth / _this5.tabsContainer.clientWidth * 100;
+
+        _this5.tabsSlider.style.width = width + '%';
+        _this5.tabsSlider.style.left = _this5.targetEl.offsetLeft + 'px';
+      });
+    },
+    tabClick: function tabClick(target) {
+      var _this6 = this;
+
+      var setActiveIndex = function setActiveIndex(index) {
+        if (_this6.activeIndex === index) {
+          // #762 update tabs display
+          // In case tabs count got changed but activeIndex didn't
+          _this6.updateTabs();
+        } else {
+          _this6.activeIndex = index;
+        }
+      };
+
+      this.target = target;
+
+      this.$nextTick(function () {
+        var nextIndex = _this6.content.findIndex(function (o) {
+          return o.id === target;
+        });
+        _this6.reverse = nextIndex < _this6.activeIndex;
+        setActiveIndex(nextIndex);
+
+        _this6.$emit('input', _this6.target);
+      });
+    },
+    updateTabs: function updateTabs() {
+      var _this7 = this;
+
+      this.content.forEach(function (_ref2) {
+        var toggle = _ref2.toggle;
+
+        toggle(_this7.target, _this7.reverse, _this7.isBooted);
+      });
+
+      this.tabItems.forEach(function (_ref3) {
+        var toggle = _ref3.toggle;
+
+        toggle(_this7.target);
+      });
+    }
+  },
+
+  render: function render(h) {
+    return h('div', {
+      'class': this.classes,
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    }, this.$slots.default);
+  }
+};