kdutify 0.16.9-rc.0

package/es5/components/KTimePicker/mixins/time-body.js

@@ -0,0 +1,207 @@
+export default {
+  data: function data() {
+    return {
+      hasChanged: false
+    };
+  },
+
+  methods: {
+    genBody: function genBody() {
+      var _this = this;
+
+      var children = [this.genHand(this.selectingHour ? 'hour' : 'minute')];
+      var data = {
+        'class': 'picker--time__clock',
+        on: {
+          mousedown: this.onMouseDown,
+          mouseup: this.onMouseUp,
+          mouseleave: function mouseleave() {
+            _this.isDragging && _this.onMouseUp();
+          },
+          touchstart: this.onMouseDown,
+          touchend: this.onMouseUp,
+          mousemove: this.onDragMove,
+          touchmove: this.onDragMove
+        },
+        key: this.selectingHour ? 'hour' : 'minute',
+        ref: 'clock'
+      };
+
+      this.selectingHour && children.push(this.genHours()) || children.push(this.genMinutes());
+
+      if (this.scrollable) {
+        data.on.wheel = function (e) {
+          e.preventDefault();
+
+          var diff = e.wheelDelta > 0 ? 1 : -1;
+          var changing = _this.selectingHour ? 'changeHour' : 'changeMinute';
+
+          _this[changing](diff);
+        };
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker__body'
+      }, [this.$createElement('transition', {
+        props: {
+          name: 'fade-transition',
+          mode: 'out-in'
+        }
+      }, [this.$createElement('div', data, children)])]);
+    },
+    genHand: function genHand(type) {
+      var scale = this.is24hrAfter12 ? 'scaleY(0.6)' : '';
+      return [this.$createElement('div', {
+        'class': 'picker--time__clock-hand ' + type,
+        style: {
+          transform: 'rotate(' + this.clockHand + 'deg) ' + scale
+        }
+      })];
+    },
+    genHours: function genHours() {
+      var hours = this.is24hr ? 24 : 12;
+      var children = [];
+      var start = 0;
+
+      if (hours === 12) {
+        hours++;
+        start = 1;
+      }
+
+      for (var i = start; i < hours; i++) {
+        children.push(this.$createElement('span', {
+          'class': {
+            'active': i === this.hour,
+            'disabled': !this.isAllowed('hour', i)
+          },
+          style: this.getTransform(i),
+          domProps: { innerHTML: '<span>' + i + '</span>' }
+        }));
+      }
+
+      return children;
+    },
+    genMinutes: function genMinutes() {
+      var children = [];
+
+      for (var i = 0; i < 60; i = i + 5) {
+        var num = i;
+
+        if (num < 10) num = '0' + num;
+        if (num === 60) num = '00';
+
+        children.push(this.$createElement('span', {
+          'class': {
+            'active': num.toString() === this.minute.toString(),
+            'disabled': !this.isAllowed('minute', i)
+          },
+          style: this.getTransform(i),
+          domProps: { innerHTML: '<span>' + num + '</span>' }
+        }));
+      }
+
+      return children;
+    },
+    getTransform: function getTransform(i) {
+      var _getPosition = this.getPosition(i),
+          x = _getPosition.x,
+          y = _getPosition.y;
+
+      return { transform: 'translate(' + x + 'px, ' + y + 'px)' };
+    },
+    getPosition: function getPosition(i) {
+      var radiusPercentage = this.selectingHour && this.is24hr && i >= 12 ? 0.5 : 0.8;
+      var r = this.radius * radiusPercentage;
+      i = this.selectingHour && this.is24hr ? i % 12 : i;
+      return {
+        x: Math.round(Math.sin(i * this.degrees) * r),
+        y: Math.round(-Math.cos(i * this.degrees) * r)
+      };
+    },
+    changeHour: function changeHour(time) {
+      var _this2 = this;
+
+      var range = this.generateRange('hour', this.hour);
+
+      time < 0 && (range = range.reverse().slice(1));
+      this.hour = range.find(function (h) {
+        return _this2.allowedHours ? _this2.isAllowed('hour', h) : true;
+      });
+
+      return true;
+    },
+    changeMinute: function changeMinute(time) {
+      var _this3 = this;
+
+      var current = Number(this.minute);
+      var range = this.generateRange('minute', current);
+
+      time < 0 && (range = range.reverse().slice(1));
+      var minute = range.find(function (m) {
+        return _this3.allowedMinutes ? _this3.isAllowed('minute', m) : true;
+      });
+
+      this.minute = minute < 10 ? '0' + minute : minute;
+
+      return true;
+    },
+    onMouseDown: function onMouseDown(e) {
+      e.preventDefault();
+
+      this.isDragging = true;
+      this.onDragMove(e);
+    },
+    onMouseUp: function onMouseUp() {
+      this.isDragging = false;
+      !this.selectingHour && this.autosave && this.save();
+      if (this.hasChanged) {
+        this.selectingHour = false;
+        this.hasChanged = false;
+      }
+    },
+    onDragMove: function onDragMove(e) {
+      e.preventDefault();
+      if (!this.isDragging && e.type !== 'click') return;
+
+      var rect = this.$refs.clock.getBoundingClientRect();
+      var center = { x: rect.width / 2, y: 0 - rect.width / 2 };
+      var clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
+      var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      var coords = {
+        y: rect.top - clientY,
+        x: clientX - rect.left
+      };
+
+      var selecting = this.selectingHour ? 'hour' : 'minute';
+      var value = Math.round(this.angle(center, coords) / this.degreesPerUnit);
+
+      if (this.selectingHour && this.is24hr) {
+        var insideClick = this.euclidean(center, coords) / this.radius < 0.65;
+        value = insideClick ? value + 12 : value;
+
+        // Necessary to fix edge case when selecting left part of 0 and 12
+        value = this.angle(center, coords) >= 345 ? (value + 12) % 24 : value;
+      }
+
+      if (this.isAllowed(selecting, value)) {
+        this[selecting] = value;
+        this.hasChanged = true;
+      }
+    },
+    euclidean: function euclidean(p0, p1) {
+      var dx = Math.abs(p1.x - p0.x);
+      var dy = Math.abs(p1.y - p0.y);
+
+      return Math.sqrt(dx * dx + dy * dy);
+    },
+    angle: function angle(center, p1) {
+      var p0 = {
+        x: center.x,
+        y: center.y + Math.sqrt(Math.abs(p1.x - center.x) * Math.abs(p1.x - center.x) + Math.abs(p1.y - center.y) * Math.abs(p1.y - center.y))
+      };
+
+      var value = 2 * Math.atan2(p1.y - p0.y, p1.x - p0.x);
+      return Math.abs(value * 180 / Math.PI);
+    }
+  }
+};

package/es5/components/KTimePicker/mixins/time-title.js

@@ -0,0 +1,55 @@
+export default {
+  methods: {
+    genTitle: function genTitle() {
+      var children = [this.genTime()];
+
+      if (this.format === 'ampm') {
+        children.push(this.genAMPM());
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker__title'
+      }, children);
+    },
+    genTime: function genTime() {
+      var _this = this;
+
+      var hour = this.hour;
+
+      if (this.is24hr && hour < 10) {
+        hour = '0' + hour;
+      }
+
+      return this.$createElement('div', {
+        'class': 'picker--time__title'
+      }, [this.$createElement('span', {
+        'class': { active: this.selectingHour },
+        on: {
+          click: function click() {
+            return _this.selectingHour = true;
+          }
+        }
+      }, hour), this.$createElement('span', {
+        'class': { active: !this.selectingHour },
+        on: {
+          click: function click() {
+            return _this.selectingHour = false;
+          }
+        }
+      }, ':' + this.minute)]);
+    },
+    genAMPM: function genAMPM() {
+      return this.$createElement('div', [this.genPeriod('am'), this.genPeriod('pm')]);
+    },
+    genPeriod: function genPeriod(period) {
+      var _this2 = this;
+
+      return this.$createElement('span', {
+        'class': { active: this.period === period },
+        on: { click: function click() {
+            return _this2.period = period;
+          } }
+      }, period.toUpperCase());
+    }
+  }
+};

package/es5/components/KToolbar/KToolbar.js

@@ -0,0 +1,193 @@
+require('../../../src/stylus/components/_toolbar.styl');
+
+import Applicationable from '../../mixins/applicationable';
+import Colorable from '../../mixins/colorable';
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-toolbar',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  data: function data() {
+    return {
+      heights: {
+        mobileLandscape: 48,
+        mobile: 56,
+        desktop: 64,
+        dense: 48
+      },
+      denseHeight: 48,
+      defaultHeight: 56,
+      prominentHeight: 64,
+      isExtended: false,
+      isScrollingProxy: false,
+      marginTop: 0,
+      previousScroll: null,
+      target: null
+    };
+  },
+
+  props: {
+    absolute: Boolean,
+    card: Boolean,
+    clippedLeft: Boolean,
+    clippedRight: Boolean,
+    dense: Boolean,
+    extended: Boolean,
+    fixed: Boolean,
+    flat: Boolean,
+    floating: Boolean,
+    height: [Number, String],
+    manualScroll: {
+      type: Boolean,
+      default: null
+    },
+    prominent: Boolean,
+    scrollOffScreen: Boolean,
+    scrollTarget: String,
+    scrollThreshold: {
+      type: Number,
+      default: 100
+    }
+  },
+
+  computed: {
+    computedHeight: function computedHeight() {
+      if (this.height) return parseInt(this.height);
+      if (this.dense) return this.heights.dense;
+      if (this.prominent || this.$kdutify.breakpoint.mdAndUp) return this.heights.desktop;
+      if (this.$kdutify.breakpoint.width > this.$kdutify.breakpoint.height) return this.mobileLandscape;
+
+      return this.heights.mobile;
+    },
+    computedMarginTop: function computedMarginTop() {
+      return this.marginTop + this.$kdutify.application.bar;
+    },
+    classes: function classes() {
+      return this.addBackgroundColorClassChecks({
+        'toolbar': true,
+        'elevation-0': this.flat,
+        'toolbar--absolute': this.absolute,
+        'toolbar--card': this.card,
+        'toolbar--clipped': this.clippedLeft || this.clippedRight,
+        'toolbar--dense': this.dense,
+        'toolbar--fixed': this.fixed,
+        'toolbar--floating': this.floating,
+        'toolbar--prominent': this.prominent,
+        'toolbar--extended': this.isExtended,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      });
+    },
+
+    isScrolling: {
+      get: function get() {
+        return this.manualScroll != null ? this.manualScroll : this.isScrollingProxy;
+      },
+      set: function set(val) {
+        this.isScrollingProxy = val;
+      }
+    },
+    paddingLeft: function paddingLeft() {
+      if (!this.app || this.clippedLeft) return 0;
+
+      return this.$kdutify.application.left;
+    },
+    paddingRight: function paddingRight() {
+      if (!this.app || this.clippedRight) return 0;
+
+      return this.$kdutify.application.right;
+    },
+    styles: function styles() {
+      return this.app && {
+        marginTop: this.computedMarginTop + 'px',
+        paddingLeft: this.paddingLeft + 'px',
+        paddingRight: this.paddingRight + 'px'
+      };
+    }
+  },
+
+  watch: {
+    isScrolling: function isScrolling(val) {
+      this.whenScrolled(val);
+    }
+  },
+
+  mounted: function mounted() {
+    this.whenScrolled(this.isScrolling);
+  },
+  destroyed: function destroyed() {
+    if (this.app) this.$kdutify.application.top = 0;
+  },
+
+
+  methods: {
+    onScroll: function onScroll() {
+      if (typeof window === 'undefined') return;
+
+      if (!this.target) {
+        this.target = this.scrollTarget ? document.querySelector(this.scrollTarget) : window;
+      }
+
+      var currentScroll = this.scrollTarget ? this.target.scrollTop : this.target.pageYOffset || document.documentElement.scrollTop;
+
+      if (currentScroll < this.scrollThreshold) return;
+
+      if (this.previousScroll === null) {
+        this.previousScroll = currentScroll;
+      }
+
+      this.isScrollingProxy = this.previousScroll < currentScroll;
+
+      this.previousScroll = currentScroll;
+    },
+    updateApplication: function updateApplication() {
+      if (!this.app) return;
+
+      this.$kdutify.application.top = !this.fixed && !this.absolute ? 0 : this.isExtended && !this.isScrolling ? this.computedHeight * 2 : this.computedHeight;
+    },
+    whenScrolled: function whenScrolled(val) {
+      this.marginTop = val ? -this.$refs.content.clientHeight - 6 : 0;
+
+      this.updateApplication();
+    }
+  },
+
+  render: function render(h) {
+    this.isExtended = this.extended || !!this.$slots.extension;
+    this.updateApplication();
+
+    var children = [];
+    var data = {
+      'class': this.classes,
+      style: this.styles,
+      on: this.$listeners
+    };
+
+    if (this.scrollOffScreen) {
+      data.directives = [{
+        name: 'scroll',
+        value: {
+          callback: this.onScroll,
+          target: this.scrollTarget
+        }
+      }];
+    }
+
+    children.push(h('div', {
+      staticClass: 'toolbar__content',
+      style: { height: this.computedHeight + 'px' },
+      ref: 'content'
+    }, this.$slots.default));
+
+    if (this.isExtended) {
+      children.push(h('div', {
+        staticClass: 'toolbar__extension',
+        style: { height: this.computedHeight + 'px' }
+      }, this.$slots.extension));
+    }
+
+    return h('nav', data, children);
+  }
+};

package/es5/components/KToolbar/KToolbarSideIcon.js

@@ -0,0 +1,29 @@
+import KBtn from '../../components/KBtn';
+import KIcon from '../../components/KIcon';
+
+export default {
+  name: 'k-toolbar-side-icon',
+
+  functional: true,
+
+  render: function render(h, _ref) {
+    var slots = _ref.slots,
+        listeners = _ref.listeners,
+        props = _ref.props,
+        data = _ref.data;
+
+    var classes = data.staticClass ? data.staticClass + ' toolbar__side-icon' : 'toolbar__side-icon';
+
+    var d = Object.assign(data, {
+      staticClass: classes,
+      props: Object.assign(props, {
+        icon: true
+      }),
+      on: listeners
+    });
+
+    var defaultSlot = slots().default;
+
+    return h(KBtn, d, defaultSlot || [h(KIcon, 'menu')]);
+  }
+};

package/es5/components/KToolbar/index.js

@@ -0,0 +1,17 @@
+import { createSimpleFunctional } from '../../util/helpers';
+
+import KToolbar from './KToolbar';
+import KToolbarSideIcon from './KToolbarSideIcon';
+
+export { KToolbar, KToolbarSideIcon };
+export var KToolbarTitle = createSimpleFunctional('toolbar__title');
+export var KToolbarItems = createSimpleFunctional('toolbar__items');
+
+KToolbar.install = function install(Kdu) {
+  Kdu.component('k-toolbar', KToolbar);
+  Kdu.component('k-toolbar-items', KToolbarItems);
+  Kdu.component('k-toolbar-title', KToolbarTitle);
+  Kdu.component('k-toolbar-side-icon', KToolbarSideIcon);
+};
+
+export default KToolbar;

package/es5/components/KTooltip/KTooltip.js

@@ -0,0 +1,156 @@
+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; }
+
+require('../../../src/stylus/components/_tooltips.styl');
+
+// Mixins
+import Colorable from '../../mixins/colorable';
+import Delayable from '../../mixins/delayable';
+import Dependent from '../../mixins/dependent';
+import Detachable from '../../mixins/detachable';
+import Menuable from '../../mixins/menuable';
+import Toggleable from '../../mixins/toggleable';
+
+export default {
+  name: 'k-tooltip',
+
+  mixins: [Colorable, Delayable, Dependent, Detachable, Menuable, Toggleable],
+
+  data: function data() {
+    return {
+      calculatedMinWidth: 0,
+      closeDependents: false
+    };
+  },
+
+  props: {
+    debounce: {
+      type: [Number, String],
+      default: 0
+    },
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    transition: String,
+    zIndex: {
+      default: null
+    }
+  },
+
+  computed: {
+    calculatedLeft: function calculatedLeft() {
+      var _dimensions = this.dimensions,
+          activator = _dimensions.activator,
+          content = _dimensions.content;
+
+      var left = 0;
+
+      if (this.top || this.bottom) {
+        left = activator.left + activator.width / 2 - content.width / 2;
+      } else if (this.left || this.right) {
+        left = activator.left + (this.right ? activator.width : -content.width) + (this.right ? 10 : -10);
+      }
+
+      return this.calcXOverflow(left) + 'px';
+    },
+    calculatedTop: function calculatedTop() {
+      var _dimensions2 = this.dimensions,
+          activator = _dimensions2.activator,
+          content = _dimensions2.content;
+
+      var top = 0;
+
+      if (this.top || this.bottom) {
+        top = activator.top - (this.top ? activator.height : -activator.height) - (this.top ? 0 : -10);
+      } else if (this.left || this.right) {
+        top = activator.top + activator.height / 2 - content.height / 2;
+      }
+
+      return this.calcYOverflow(top + this.pageYOffset) + 'px';
+    },
+    classes: function classes() {
+      return {
+        'tooltip--top': this.top,
+        'tooltip--right': this.right,
+        'tooltip--bottom': this.bottom,
+        'tooltip--left': this.left
+      };
+    },
+    computedTransition: function computedTransition() {
+      if (this.transition) return this.transition;
+      if (this.top) return 'slide-y-reverse-transition';
+      if (this.right) return 'slide-x-transition';
+      if (this.bottom) return 'slide-y-transition';
+      if (this.left) return 'slide-x-reverse-transition';
+    },
+    offsetY: function offsetY() {
+      return this.top || this.bottom;
+    },
+    offsetX: function offsetX() {
+      return this.left || this.right;
+    },
+    styles: function styles() {
+      return {
+        left: this.calculatedLeft,
+        maxWidth: isNaN(this.maxWidth) ? this.maxWidth : this.maxWidth + 'px',
+        opacity: this.isActive ? 0.9 : 0,
+        top: this.calculatedTop,
+        zIndex: this.zIndex || this.activeZIndex
+      };
+    }
+  },
+
+  methods: {
+    activate: function activate() {
+      // Update coordinates and dimensions of menu
+      // and its activator
+      this.updateDimensions();
+      // Start the transition
+      requestAnimationFrame(this.startTransition);
+    }
+  },
+
+  render: function render(h) {
+    var _addBackgroundColorCl,
+        _this = this;
+
+    var tooltip = h('div', {
+      staticClass: 'tooltip__content',
+      'class': this.addBackgroundColorClassChecks((_addBackgroundColorCl = {}, _defineProperty(_addBackgroundColorCl, this.contentClass, true), _defineProperty(_addBackgroundColorCl, 'menuable__content__active', this.isActive), _addBackgroundColorCl)),
+      style: this.styles,
+      attrs: this.attrs,
+      directives: [{
+        name: 'show',
+        value: this.isContentActive
+      }],
+      ref: 'content'
+    }, this.$slots.default);
+
+    return h(this.tag, {
+      staticClass: 'tooltip',
+      'class': this.classes
+    }, [h('transition', {
+      props: {
+        name: this.computedTransition
+      }
+    }, [tooltip]), h('span', {
+      on: {
+        mouseenter: function mouseenter() {
+          _this.runDelay('open', function () {
+            return _this.isActive = true;
+          });
+        },
+        mouseleave: function mouseleave() {
+          _this.runDelay('close', function () {
+            return _this.isActive = false;
+          });
+        }
+      },
+      ref: 'activator'
+    }, this.$slots.activator)]);
+  }
+};

package/es5/components/KTooltip/index.js

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