kdutify 0.16.9-rc.0

package/es5/components/KTabs/KTabsBar.js

@@ -0,0 +1,205 @@
+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 KIcon from '../KIcon';
+
+import Resize from '../../directives/resize';
+import Touch from '../../directives/touch';
+
+export default {
+  name: 'k-tabs-bar',
+
+  directives: {
+    Resize: Resize,
+    Touch: Touch
+  },
+
+  provide: function provide() {
+    var _this = this;
+
+    return {
+      addTabItem: function addTabItem(action, toggle, el) {
+        _this.registerTabItem(action, toggle, el);
+        _this.onResize();
+      },
+      removeTabItem: function removeTabItem(action) {
+        _this.unregisterTabItem(action);
+        _this.onResize();
+      }
+    };
+  },
+
+
+  inject: ['isScrollable', 'isMobile', 'registerTabItem', 'unregisterTabItem'],
+
+  data: function data() {
+    return {
+      isOverflowing: false,
+      scrollOffset: 0,
+      itemOffset: 0,
+      startX: 0
+    };
+  },
+
+
+  computed: {
+    classes: function classes() {
+      return {
+        'tabs__bar': true
+      };
+    },
+    containerClasses: function containerClasses() {
+      return {
+        'tabs__container': true
+      };
+    },
+    wrapperClasses: function wrapperClasses() {
+      return {
+        'tabs__wrapper': true,
+        'tabs__wrapper--scrollable': this.isScrollable(),
+        'tabs__wrapper--overflow': this.isOverflowing
+      };
+    },
+    containerStyles: function containerStyles() {
+      return {
+        'transform': 'translateX(' + -this.scrollOffset + 'px)'
+      };
+    },
+    leftIconVisible: function leftIconVisible() {
+      return !this.isMobile() && this.isScrollable() && this.isOverflowing && this.scrollOffset > 0;
+    },
+    rightIconVisible: function rightIconVisible() {
+      if (this.isMobile() || !this.isScrollable() || !this.isOverflowing) return;
+
+      // Check one scroll ahead to know the width of right-most item
+      var container = this.$refs.container;
+      var item = this.newOffsetRight(this.scrollOffset, this.itemOffset);
+      var itemWidth = item && container.children[item.index].clientWidth || 0;
+      var scrollOffset = this.scrollOffset + container.clientWidth;
+
+      return container.scrollWidth - scrollOffset > itemWidth * 0.30;
+    }
+  },
+
+  methods: {
+    genContainer: function genContainer() {
+      return this.$createElement('ul', {
+        'class': this.containerClasses,
+        'style': this.containerStyles,
+        ref: 'container'
+      }, this.$slots.default);
+    },
+    genIcon: function genIcon(direction) {
+      var capitalize = direction.charAt(0).toUpperCase() + direction.slice(1);
+      return this.$createElement(KIcon, {
+        props: _defineProperty({}, '' + direction, true),
+        style: { display: 'inline-flex' },
+        on: {
+          click: this['scroll' + capitalize]
+        }
+      }, 'chevron_' + direction);
+    },
+    genWrapper: function genWrapper() {
+      return this.$createElement('div', {
+        class: this.wrapperClasses,
+        directives: [{
+          name: 'touch',
+          value: {
+            start: this.start,
+            move: this.move,
+            end: this.end
+          }
+        }]
+      }, [this.genContainer()]);
+    },
+    start: function start(e) {
+      this.startX = this.scrollOffset + e.touchstartX;
+      this.$refs.container.style.transition = 'none';
+    },
+    move: function move(e) {
+      var offset = this.startX - e.touchmoveX;
+      this.scrollOffset = offset;
+    },
+    end: function end(e) {
+      this.onResize();
+      var container = this.$refs.container;
+      var scrollWidth = container.scrollWidth - this.$el.clientWidth / 2;
+      container.style.transition = null;
+
+      if (this.scrollOffset < 0 || !this.isOverflowing) {
+        this.scrollOffset = 0;
+      } else if (this.scrollOffset >= scrollWidth) {
+        var lastItem = container.children[container.children.length - 1];
+        this.scrollOffset = scrollWidth - lastItem.clientWidth;
+      }
+    },
+    scrollLeft: function scrollLeft() {
+      var _newOffset = this.newOffset('Left'),
+          offset = _newOffset.offset,
+          index = _newOffset.index;
+
+      this.scrollOffset = offset;
+      this.itemOffset = index;
+    },
+    scrollRight: function scrollRight() {
+      var _newOffset2 = this.newOffset('Right'),
+          offset = _newOffset2.offset,
+          index = _newOffset2.index;
+
+      this.scrollOffset = offset;
+      this.itemOffset = index;
+    },
+    onResize: function onResize() {
+      if (this._isDestroyed) return;
+
+      var container = this.$refs.container;
+      this.isOverflowing = container.clientWidth < container.scrollWidth;
+    },
+    newOffset: function newOffset(direction) {
+      return this['newOffset' + direction](this.scrollOffset, this.itemOffset);
+    },
+    newOffsetLeft: function newOffsetLeft(currentOffset, currentIndex) {
+      var container = this.$refs.container;
+      var items = container.children;
+      var offset = 0;
+
+      for (var index = currentIndex - 1; index >= 0; index--) {
+        if (!items[index].classList.contains('tabs__slider')) {
+          var newOffset = offset + items[index].clientWidth;
+          if (newOffset >= container.clientWidth) {
+            return { offset: currentOffset - offset, index: index + 1 };
+          }
+          offset = newOffset;
+        }
+      }
+
+      return { offset: 0, index: 0 };
+    },
+    newOffsetRight: function newOffsetRight(currentOffset, currentIndex) {
+      var container = this.$refs.container;
+      var items = container.children;
+      var offset = currentOffset;
+
+      for (var index = currentIndex; index < items.length; index++) {
+        if (!items[index].classList.contains('tabs__slider')) {
+          var newOffset = offset + items[index].clientWidth;
+          if (newOffset > currentOffset + container.clientWidth) {
+            return { offset: offset, index: index };
+          }
+          offset = newOffset;
+        }
+      }
+
+      return null;
+    }
+  },
+
+  render: function render(h) {
+    return h('div', {
+      'class': this.classes,
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    }, [this.genWrapper(), this.leftIconVisible ? this.genIcon('left') : null, this.rightIconVisible ? this.genIcon('right') : null]);
+  }
+};

package/es5/components/KTabs/KTabsContent.js

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

package/es5/components/KTabs/KTabsItem.js

@@ -0,0 +1,103 @@
+import Routable from '../../mixins/routable';
+
+export default {
+  name: 'k-tabs-item',
+
+  inject: ['slider', 'tabClick', 'addTabItem', 'removeTabItem'],
+
+  mixins: [Routable],
+
+  data: function data() {
+    return {
+      isActive: false
+    };
+  },
+
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'tabs__item--active'
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      var classes = {
+        'tabs__item': true,
+        'tabs__item--disabled': this.disabled
+      };
+
+      classes[this.activeClass] = !this.to && this.isActive;
+
+      return classes;
+    },
+    action: function action() {
+      var to = this.to || this.href;
+
+      if (!to || to === Object(to)) return this._uid;
+
+      return to.replace('#', '');
+    }
+  },
+
+  watch: {
+    $route: function $route() {
+      this.to && this.callSlider();
+    }
+  },
+
+  mounted: function mounted() {
+    this.addTabItem(this.action, this.toggle, this.$el);
+    this.callSlider();
+  },
+  beforeDestroy: function beforeDestroy() {
+    this.removeTabItem(this.action);
+  },
+
+
+  methods: {
+    callSlider: function callSlider() {
+      var _this = this;
+
+      setTimeout(function () {
+        _this.$el.firstChild.classList.contains('tabs__item--active') && _this.slider(_this.$el);
+      }, 0);
+    },
+    click: function click(e) {
+      e.preventDefault();
+      this.$emit('click', e);
+
+      if (!this.to && !this.href) return;
+
+      if (!this.to) {
+        this.tabClick(this.action);
+      }
+
+      this.callSlider();
+    },
+    toggle: function toggle(action) {
+      var _this2 = this;
+
+      this.isActive = this.action === action;
+
+      this.$nextTick(function () {
+        _this2.isActive && _this2.slider(_this2.$el);
+      });
+    }
+  },
+
+  render: function render(h) {
+    var link = this.generateRouteLink();
+    var data = link.data;
+
+    // If disabled, use div as anchor tags do not support
+    // being disabled
+
+    var tag = this.disabled ? 'div' : link.tag;
+
+    return h('li', {
+      'class': 'tabs__li'
+    }, [h(tag, data, this.$slots.default)]);
+  }
+};

package/es5/components/KTabs/KTabsItems.js

@@ -0,0 +1,40 @@
+import Touch from '../../directives/touch';
+
+export default {
+  name: 'k-tabs-items',
+
+  directives: { Touch: Touch },
+
+  inject: ['next', 'prev'],
+
+  props: {
+    cycle: Boolean,
+    touchless: Boolean
+  },
+
+  methods: {
+    swipeLeft: function swipeLeft() {
+      this.next(this.cycle);
+    },
+    swipeRight: function swipeRight() {
+      this.prev(this.cycle);
+    }
+  },
+
+  render: function render(h) {
+    var data = {
+      staticClass: 'tabs__items',
+      directives: []
+    };
+
+    !this.touchless && data.directives.push({
+      name: 'touch',
+      value: {
+        left: this.swipeLeft,
+        right: this.swipeRight
+      }
+    });
+
+    return h('div', data, this.$slots.default);
+  }
+};

package/es5/components/KTabs/KTabsSlider.js

@@ -0,0 +1,14 @@
+import Colorable from '../../mixins/colorable';
+
+export default {
+  name: 'k-tabs-slider',
+
+  mixins: [Colorable],
+
+  render: function render(h) {
+    return h('li', {
+      staticClass: 'tabs__slider',
+      class: this.addBackgroundColorClassChecks({})
+    });
+  }
+};

package/es5/components/KTabs/index.js

@@ -0,0 +1,17 @@
+import KTabs from './KTabs';
+import KTabsBar from './KTabsBar';
+import KTabsContent from './KTabsContent';
+import KTabsItem from './KTabsItem';
+import KTabsItems from './KTabsItems';
+import KTabsSlider from './KTabsSlider';
+
+KTabs.install = function install(Kdu) {
+  Kdu.component(KTabs.name, KTabs);
+  Kdu.component(KTabsBar.name, KTabsBar);
+  Kdu.component(KTabsContent.name, KTabsContent);
+  Kdu.component(KTabsItem.name, KTabsItem);
+  Kdu.component(KTabsItems.name, KTabsItems);
+  Kdu.component(KTabsSlider.name, KTabsSlider);
+};
+
+export default KTabs;