kdutify 0.16.9-rc.0

package/es5/components/KMenu/mixins/menu-position.js

@@ -0,0 +1,64 @@
+/**
+ * Menu position
+ *
+ * @mixin
+ *
+ * Used for calculating an automatic position (used for KSelect)
+ * Will position the KMenu content properly over the KSelect
+ */
+export default {
+  methods: {
+    // Revisit this
+    calculateScroll: function calculateScroll() {
+      if (this.selectedIndex === null) return;
+
+      var scrollTop = 0;
+
+      if (this.selectedIndex >= this.stopIndex) {
+        scrollTop = this.$refs.content.scrollHeight;
+      } else if (this.selectedIndex > this.startIndex) {
+        scrollTop = this.selectedIndex * (this.defaultOffset * 6) - this.defaultOffset * 7;
+      }
+
+      this.$refs.content.scrollTop = scrollTop;
+    },
+    calcLeftAuto: function calcLeftAuto() {
+      var a = this.dimensions.activator;
+
+      return parseInt(a.left - this.defaultOffset * 2);
+    },
+    calcTopAuto: function calcTopAuto() {
+      if (!this.hasActivator) return this.calcTop();
+
+      var selectedIndex = Array.from(this.tiles).findIndex(function (n) {
+        return n.classList.contains('list__tile--active');
+      });
+
+      if (selectedIndex === -1) {
+        this.selectedIndex = null;
+
+        return this.calcTop();
+      }
+
+      this.selectedIndex = selectedIndex;
+      var actingIndex = selectedIndex;
+
+      var offsetPadding = -(this.defaultOffset * 2);
+      // #708 Stop index should vary by tile length
+      this.stopIndex = this.tiles.length > 4 ? this.tiles.length - 4 : this.tiles.length;
+
+      if (selectedIndex > this.startIndex && selectedIndex < this.stopIndex) {
+        actingIndex = 2;
+        offsetPadding = this.defaultOffset * 3;
+      } else if (selectedIndex >= this.stopIndex) {
+        offsetPadding = -this.defaultOffset;
+        actingIndex = selectedIndex - this.stopIndex;
+      }
+
+      // Is always off by 1 pixel, send help (┛ಠ_ಠ)┛彡┻━┻
+      offsetPadding--;
+
+      return this.calcTop() + offsetPadding - actingIndex * (this.defaultOffset * 6);
+    }
+  }
+};

package/es5/components/KNavigationDrawer/KNavigationDrawer.js

@@ -0,0 +1,238 @@
+require('../../../src/stylus/components/_navigation-drawer.styl');
+
+import Applicationable from '../../mixins/applicationable';
+import Overlayable from '../../mixins/overlayable';
+import Themeable from '../../mixins/themeable';
+
+import ClickOutside from '../../directives/click-outside';
+import Resize from '../../directives/resize';
+import Touch from '../../directives/touch';
+
+export default {
+  name: 'k-navigation-drawer',
+
+  mixins: [Applicationable, Overlayable, Themeable],
+
+  directives: {
+    ClickOutside: ClickOutside,
+    Resize: Resize,
+    Touch: Touch
+  },
+
+  data: function data() {
+    return {
+      isActive: this.value,
+      isBooted: false,
+      isMobile: false,
+      touchArea: {
+        left: 0,
+        right: 0
+      }
+    };
+  },
+
+
+  props: {
+    absolute: Boolean,
+    clipped: Boolean,
+    disableRouteWatcher: Boolean,
+    enableResizeWatcher: Boolean,
+    height: String,
+    floating: Boolean,
+    miniVariant: Boolean,
+    miniVariantWidth: {
+      type: [Number, String],
+      default: 80
+    },
+    mobileBreakPoint: {
+      type: Number,
+      default: 1264
+    },
+    permanent: Boolean,
+    persistent: Boolean,
+    right: Boolean,
+    temporary: Boolean,
+    touchless: Boolean,
+    width: {
+      type: [Number, String],
+      default: 300
+    },
+    value: { required: false }
+  },
+
+  computed: {
+    calculatedHeight: function calculatedHeight() {
+      return this.height || '100%';
+    },
+    calculatedWidth: function calculatedWidth() {
+      return this.miniVariant ? this.miniVariantWidth : this.width;
+    },
+    classes: function classes() {
+      return {
+        'navigation-drawer': true,
+        'navigation-drawer--absolute': this.absolute,
+        'navigation-drawer--clipped': this.clipped,
+        'navigation-drawer--close': !this.isBooted || !this.isActive,
+        'navigation-drawer--floating': this.floating,
+        'navigation-drawer--is-booted': this.isBooted,
+        'navigation-drawer--is-mobile': this.isMobile,
+        'navigation-drawer--mini-variant': this.miniVariant,
+        'navigation-drawer--open': this.isActive && this.isBooted,
+        'navigation-drawer--permanent': this.permanent,
+        'navigation-drawer--persistent': this.persistent,
+        'navigation-drawer--right': this.right,
+        'navigation-drawer--temporary': this.temporary,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      };
+    },
+    marginTop: function marginTop() {
+      if (!this.app) return 0;
+      var marginTop = this.$kdutify.application.bar;
+
+      marginTop += this.clipped ? this.$kdutify.application.top : 0;
+
+      return marginTop;
+    },
+    maxHeight: function maxHeight() {
+      if (!this.app) return '100%';
+
+      return this.clipped ? this.$kdutify.application.top + this.$kdutify.application.bottom : this.$kdutify.application.bottom;
+    },
+    showOverlay: function showOverlay() {
+      return !this.permanent && this.isActive && (this.temporary || this.isMobile);
+    },
+    styles: function styles() {
+      return {
+        height: this.calculatedHeight,
+        marginTop: this.marginTop + 'px',
+        maxHeight: 'calc(100% - ' + this.maxHeight + 'px)',
+        width: this.calculatedWidth + 'px'
+      };
+    }
+  },
+
+  watch: {
+    $route: function $route() {
+      if (!this.disableRouteWatcher) {
+        this.isActive = !this.closeConditional();
+      }
+    },
+    isActive: function isActive(val) {
+      this.$emit('input', val);
+      this.showOverlay && val && this.genOverlay() || this.removeOverlay();
+      this.$el.scrollTop = 0;
+    },
+    isMobile: function isMobile(val) {
+      !val && this.removeOverlay();
+    },
+    permanent: function permanent(val) {
+      this.$emit('input', val);
+    },
+    value: function value(val) {
+      if (this.permanent) return;
+      if (val !== this.isActive) this.isActive = val;
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.load(this.init);
+  },
+
+
+  methods: {
+    init: function init() {
+      var _this = this;
+
+      if (this.value != null) this.isActive = this.value;else if (this.permanent) this.isActive = true;else if (this.isMobile) this.isActive = false;else if (!this.value && (this.persistent || this.temporary)) this.isActive = false;else this.isActive = true;
+
+      setTimeout(function () {
+        return _this.isBooted = true;
+      }, 0);
+    },
+    calculateTouchArea: function calculateTouchArea() {
+      if (!this.$el.parentNode) return;
+      var parentRect = this.$el.parentNode.getBoundingClientRect();
+
+      this.touchArea = {
+        left: parentRect.left + 50,
+        right: parentRect.right - 50
+      };
+    },
+    checkIfMobile: function checkIfMobile() {
+      this.isMobile = window.innerWidth < parseInt(this.mobileBreakPoint);
+    },
+    closeConditional: function closeConditional() {
+      return !this.permanent && (this.temporary || this.isMobile);
+    },
+    genDirectives: function genDirectives() {
+      var directives = [{
+        name: 'click-outside',
+        value: this.closeConditional
+      }, {
+        name: 'resize',
+        value: this.onResize
+      }];
+
+      !this.touchless && directives.push({
+        name: 'touch',
+        value: {
+          parent: true,
+          left: this.swipeLeft,
+          right: this.swipeRight
+        }
+      });
+
+      return directives;
+    },
+    onResize: function onResize() {
+      if (!this.enableResizeWatcher || this.permanent || this.temporary) return;
+
+      this.checkIfMobile();
+
+      this.isActive = !this.isMobile;
+    },
+    swipeRight: function swipeRight(e) {
+      if (this.isActive && !this.right) return;
+      this.calculateTouchArea();
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return;else if (!this.right && e.touchstartX <= this.touchArea.left) this.isActive = true;else if (this.right && this.isActive) this.isActive = false;
+    },
+    swipeLeft: function swipeLeft(e) {
+      if (this.isActive && this.right) return;
+      this.calculateTouchArea();
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return;else if (this.right && e.touchstartX >= this.touchArea.right) this.isActive = true;else if (!this.right && this.isActive) this.isActive = false;
+    },
+    updateApplication: function updateApplication() {
+      if (!this.app) return;
+
+      var width = !this.isActive || !this.isBooted || !this.permanent && this.$kdutify.breakpoint.width < this.mobileBreakPoint ? 0 : this.calculatedWidth;
+
+      if (this.right) {
+        this.$kdutify.application.right = width;
+      } else {
+        this.$kdutify.application.left = width;
+      }
+    }
+  },
+
+  render: function render(h) {
+    var _this2 = this;
+
+    this.updateApplication();
+
+    var data = {
+      'class': this.classes,
+      style: this.styles,
+      directives: this.genDirectives(),
+      on: {
+        click: function click() {
+          return _this2.$emit('update:miniVariant', false);
+        }
+      }
+    };
+
+    return h('aside', data, [this.$slots.default, h('div', { 'class': 'navigation-drawer__border' })]);
+  }
+};

package/es5/components/KNavigationDrawer/index.js

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

package/es5/components/KPagination/KPagination.js

@@ -0,0 +1,167 @@
+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); } }
+
+require('../../../src/stylus/components/_pagination.styl');
+
+import KIcon from '../KIcon';
+
+import Resize from '../../directives/resize';
+
+export default {
+  name: 'k-pagination',
+
+  directives: { Resize: Resize },
+
+  props: {
+    circle: Boolean,
+    disabled: Boolean,
+    length: {
+      type: Number,
+      default: 0,
+      validator: function validator(val) {
+        return val % 1 === 0;
+      }
+    },
+    totalVisible: [Number, String],
+    nextIcon: {
+      type: String,
+      default: 'chevron_right'
+    },
+    prevIcon: {
+      type: String,
+      default: 'chevron_left'
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data: function data() {
+    return {
+      maxButtons: 0
+    };
+  },
+
+
+  watch: {
+    value: function value() {
+      this.init();
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'pagination': true,
+        'pagination--circle': this.circle,
+        'pagination--disabled': this.disabled
+      };
+    },
+    items: function items() {
+      var maxLength = this.totalVisible || this.maxButtons;
+      if (this.length <= maxLength) {
+        return this.range(1, this.length);
+      }
+
+      var even = maxLength % 2 === 0 ? 1 : 0;
+      var left = Math.floor(maxLength / 2);
+      var right = this.length - left + 1 + even;
+
+      if (this.value >= left && this.value <= right) {
+        var start = this.value - left + 2;
+        var end = this.value + left - 2 - even;
+
+        return [1, '...'].concat(_toConsumableArray(this.range(start, end)), ['...', this.length]);
+      } else {
+        return [].concat(_toConsumableArray(this.range(1, left)), ['...'], _toConsumableArray(this.range(this.length - left + 1 + even, this.length)));
+      }
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.load.call(this, this.init);
+  },
+
+
+  methods: {
+    onResize: function onResize() {
+      var width = this.$el && this.$el.parentNode ? this.$el.parentNode.clientWidth : window.innerWidth;
+
+      this.maxButtons = Math.floor((width - 96) / 42);
+    },
+    init: function init() {
+      var _this = this;
+
+      this.selected = null;
+
+      // Change this
+      setTimeout(function () {
+        return _this.selected = _this.value;
+      }, 100);
+    },
+    next: function next(e) {
+      e.preventDefault();
+      this.$emit('input', this.value + 1);
+      this.$emit('next');
+    },
+    previous: function previous(e) {
+      e.preventDefault();
+      this.$emit('input', this.value - 1);
+      this.$emit('previous');
+    },
+    range: function range(from, to) {
+      var range = [];
+
+      from = from > 0 ? from : 1;
+
+      for (var i = from; i <= to; i++) {
+        range.push(i);
+      }
+
+      return range;
+    },
+    genIcon: function genIcon(h, icon, disabled, fn) {
+      return h('li', [h('a', {
+        class: {
+          'pagination__navigation': true,
+          'pagination__navigation--disabled': disabled
+        },
+        attrs: { href: '#!' },
+        on: { click: fn }
+      }, [h(KIcon, [icon])])]);
+    },
+    genItem: function genItem(h, i) {
+      var _this2 = this;
+
+      return h('a', {
+        class: {
+          'pagination__item': true,
+          'pagination__item--active': i === this.value
+        },
+        attrs: { href: '#!' },
+        on: {
+          click: function click(e) {
+            e.preventDefault();
+            _this2.$emit('input', i);
+          }
+        }
+      }, [i]);
+    },
+    genItems: function genItems(h) {
+      var _this3 = this;
+
+      return this.items.map(function (i) {
+        return h('li', [isNaN(i) && h('span', { class: 'pagination__more' }, [i]) || _this3.genItem(h, i)]);
+      });
+    }
+  },
+
+  render: function render(h) {
+    var children = [this.genIcon(h, this.prevIcon, this.value === 1, this.previous), this.genItems(h), this.genIcon(h, this.nextIcon, this.value === this.length, this.next)];
+
+    return h('ul', {
+      directives: [{ name: 'resize', value: this.onResize }],
+      class: this.classes
+    }, children);
+  }
+};

package/es5/components/KPagination/index.js

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

package/es5/components/KParallax/KParallax.js

@@ -0,0 +1,98 @@
+require('../../../src/stylus/components/_parallax.styl');
+
+import Translatable from '../../mixins/translatable';
+
+export default {
+  name: 'k-parallax',
+
+  mixins: [Translatable],
+
+  data: function data() {
+    return {
+      isBooted: false
+    };
+  },
+
+
+  props: {
+    alt: String,
+    height: {
+      type: [String, Number],
+      default: 500
+    },
+    jumbotron: Boolean,
+    src: String
+  },
+
+  computed: {
+    styles: function styles() {
+      return {
+        display: 'block',
+        opacity: this.isBooted ? 1 : 0,
+        transform: 'translate3d(-50%, ' + (this.jumbotron ? 0 : this.parallax + 'px') + ', 0)'
+      };
+    }
+  },
+
+  watch: {
+    parallax: function parallax() {
+      this.isBooted = true;
+    }
+  },
+
+  methods: {
+    init: function init() {
+      var _this = this;
+
+      if (!this.$refs.img) return;
+
+      if (this.$refs.img.complete) {
+        this.translate();
+        this.listeners();
+      } else {
+        this.$refs.img.addEventListener('load', function () {
+          _this.translate();
+          _this.listeners();
+        }, false);
+      }
+    },
+    objHeight: function objHeight() {
+      return this.$refs.img.naturalHeight;
+    },
+    elOffsetTop: function elOffsetTop() {
+      return this.$el.offsetTop;
+    }
+  },
+
+  render: function render(h) {
+    var imgData = {
+      staticClass: 'parallax__image',
+      'class': {
+        'parallax__image--jumbotron': this.jumbotron
+      },
+      style: this.styles,
+      attrs: {
+        src: this.src
+      },
+      ref: 'img'
+    };
+
+    if (this.alt) imgData.attrs.alt = this.alt;
+
+    var container = h('div', {
+      staticClass: 'parallax__image-container'
+    }, [h('img', imgData)]);
+
+    var content = h('div', {
+      staticClass: 'parallax__content'
+    }, this.$slots.default);
+
+    return h('div', {
+      staticClass: 'parallax',
+      style: {
+        height: this.jumbotron ? this.normalizedHeight : this.normalizedHeight + 'px'
+      },
+      on: this.$listeners
+    }, [container, content]);
+  }
+};

package/es5/components/KParallax/index.js

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