kdutify 0.16.9-rc.0

package/es5/components/KSlider/KSlider.js

@@ -0,0 +1,306 @@
+require('../../../src/stylus/components/_sliders.styl');
+
+import { addOnceEventListener, createRange } from '../../util/helpers';
+
+import Input from '../../mixins/input';
+
+import ClickOutside from '../../directives/click-outside';
+
+export default {
+  name: 'k-slider',
+
+  mixins: [Input],
+
+  directives: { ClickOutside: ClickOutside },
+
+  data: function data() {
+    return {
+      app: {},
+      isActive: false,
+      keyPressed: 0
+    };
+  },
+
+
+  props: {
+    color: {
+      type: String,
+      default: null
+    },
+    min: {
+      type: [Number, String],
+      default: 0
+    },
+    max: {
+      type: [Number, String],
+      default: 100
+    },
+    step: {
+      type: [Number, String],
+      default: null
+    },
+    thumbColor: {
+      type: String,
+      default: null
+    },
+    thumbLabel: Boolean,
+    value: [Number, String],
+    snap: Boolean,
+    trackColor: {
+      type: String,
+      default: null
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'input-group--slider': true,
+        'input-group--active': this.isActive,
+        'input-group--dirty': this.inputWidth > 0,
+        'input-group--disabled': this.disabled,
+        'input-group--ticks': !this.disabled && this.step
+      };
+    },
+
+    inputValue: {
+      get: function get() {
+        return this.value;
+      },
+      set: function set(val) {
+        var min = this.min,
+            max = this.max,
+            step = this.step,
+            snap = this.snap;
+
+        val = val < min && min || val > max && max || val;
+
+        // Round value to ensure the
+        // entire slider range can
+        // be selected with step
+        var value = snap ? Math.round(val / step) * step : Math.round(val);
+        this.lazyValue = value;
+
+        if (value !== this.value) {
+          this.$emit('input', value);
+        }
+      }
+    },
+    interval: function interval() {
+      return 100 / (this.max - this.min) * this.step;
+    },
+    thumbContainerClasses: function thumbContainerClasses() {
+      return {
+        'slider__thumb-container': true,
+        'slider__thumb-container--label': this.thumbLabel
+      };
+    },
+    thumbStyles: function thumbStyles() {
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        left: this.inputWidth + '%'
+      };
+    },
+    tickContainerStyles: function tickContainerStyles() {
+      return {
+        transform: 'translate3d(0, -50%, 0)'
+      };
+    },
+    trackStyles: function trackStyles() {
+      var scaleX = this.calculateScale(1 - this.inputWidth / 100);
+      var offsetX = this.thumbLabel ? 0 : !this.isActive ? 8 : 12;
+      var translateX = offsetX + 'px';
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        transform: 'scaleX(' + scaleX + ') translateX(' + translateX + ')'
+      };
+    },
+    trackFillStyles: function trackFillStyles() {
+      var inputWidth = this.inputWidth;
+      var scaleX = this.calculateScale(inputWidth / 100);
+      var translateX = inputWidth > 99 && !this.thumbLabel ? -8 + 'px' : 0;
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        transform: 'scaleX(' + scaleX + ') translateX(' + translateX + ')'
+      };
+    },
+    numTicks: function numTicks() {
+      return parseInt((this.max - this.min) / this.step);
+    },
+    inputWidth: function inputWidth() {
+      var val = this.inputValue;
+      if (this.snap) {
+        val = Math.round(val / this.step) * this.step;
+      }
+
+      val = (val - this.min) / (this.max - this.min) * 100;
+
+      return val < 0.15 ? 0 : val;
+    }
+  },
+
+  watch: {
+    isActive: function isActive(val) {
+      this.isFocused = val;
+    },
+    min: function min(val) {
+      val > this.inputValue && this.$emit('input', val);
+    },
+    max: function max(val) {
+      val < this.inputValue && this.$emit('input', val);
+    },
+    value: function value(val) {
+      this.inputValue = val;
+    }
+  },
+
+  mounted: function mounted() {
+    this.inputValue = this.value;
+
+    // Without a k-app, iOS does not work with body selectors
+    this.app = document.querySelector('[data-app]') || console.warn('The k-slider component requires the presence of k-app or a non-body wrapping element with the [data-app] attribute.');
+  },
+
+
+  methods: {
+    calculateScale: function calculateScale(scale) {
+      return this.disabled ? scale - 0.015 : scale;
+    },
+    onMouseDown: function onMouseDown(e) {
+      this.keyPressed = 2;
+      var options = { passive: true };
+      this.isActive = true;
+
+      if ('touches' in e) {
+        this.app.addEventListener('touchmove', this.onMouseMove, options);
+        addOnceEventListener(this.app, 'touchend', this.onMouseUp);
+      } else {
+        this.app.addEventListener('mousemove', this.onMouseMove, options);
+        addOnceEventListener(this.app, 'mouseup', this.onMouseUp);
+      }
+    },
+    onMouseUp: function onMouseUp() {
+      this.keyPressed = 0;
+      var options = { passive: true };
+      this.isActive = false;
+      this.app.removeEventListener('touchmove', this.onMouseMove, options);
+      this.app.removeEventListener('mousemove', this.onMouseMove, options);
+    },
+    onMouseMove: function onMouseMove(e) {
+      var _$refs$track$getBound = this.$refs.track.getBoundingClientRect(),
+          offsetLeft = _$refs$track$getBound.left,
+          trackWidth = _$refs$track$getBound.width;
+
+      var clientX = 'touches' in e ? e.touches[0].clientX : e.clientX;
+      var left = (clientX - offsetLeft) / trackWidth * 100;
+
+      if (left >= 0 && left <= 100) {
+        this.inputValue = parseInt(this.min, 10) + left / 100 * (this.max - this.min);
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === 37 || e.keyCode === 39) {
+        this.keyPressed += 1;
+
+        var direction = e.keyCode === 37 && -1 || e.keyCode === 39 && 1 || 0;
+        var multiplier = e.shiftKey && 3 || e.ctrlKey && 2 || 1;
+        var amount = this.snap && this.step || 1;
+
+        this.inputValue = this.inputValue + direction * amount * multiplier;
+      }
+    },
+    onKeyUp: function onKeyUp(e) {
+      this.keyPressed = 0;
+    },
+    sliderMove: function sliderMove(e) {
+      if (!this.isActive) {
+        this.onMouseMove(e);
+      }
+    },
+    genThumbLabel: function genThumbLabel(h) {
+      return h('k-scale-transition', {
+        props: { origin: 'bottom center' }
+      }, [h('div', {
+        'class': 'slider__thumb--label__container',
+        directives: [{
+          name: 'show',
+          value: this.isActive
+        }]
+      }, [h('div', { 'class': ['slider__thumb--label', this.thumbColor || this.color] }, [h('span', {}, parseInt(this.inputValue))])])]);
+    },
+    genThumbContainer: function genThumbContainer(h) {
+      var children = [];
+      children.push(h('div', { 'class': ['slider__thumb', this.thumbColor || this.color] }));
+
+      this.thumbLabel && children.push(this.genThumbLabel(h));
+
+      return h('div', {
+        'class': this.thumbContainerClasses,
+        style: this.thumbStyles,
+        on: {
+          touchstart: this.onMouseDown,
+          mousedown: this.onMouseDown
+        },
+        ref: 'thumb'
+      }, children);
+    },
+    genSteps: function genSteps(h) {
+      var _this = this;
+
+      var ticks = createRange(this.numTicks + 1).map(function (i) {
+        var span = h('span', {
+          class: 'slider__tick',
+          style: {
+            left: i * (100 / _this.numTicks) + '%'
+          }
+        });
+
+        return span;
+      });
+
+      return h('div', {
+        'class': 'slider__ticks-container',
+        style: this.tickContainerStyles
+      }, ticks);
+    },
+    genTrackContainer: function genTrackContainer(h) {
+      var children = [h('div', {
+        'class': ['slider__track', this.trackColor],
+        style: this.trackStyles
+      }), h('div', {
+        'class': ['slider__track-fill', this.color],
+        style: this.trackFillStyles
+      })];
+
+      return h('div', {
+        'class': 'slider__track__container',
+        ref: 'track'
+      }, children);
+    }
+  },
+
+  render: function render(h) {
+    var children = [];
+
+    children.push(this.genTrackContainer(h));
+    this.step && children.push(this.genSteps(h));
+    children.push(this.genThumbContainer(h));
+
+    var slider = h('div', { 'class': 'slider' }, children);
+
+    return this.genInputGroup([slider], {
+      attrs: {
+        role: 'slider',
+        tabindex: this.tabindex
+      },
+      on: Object.assign({}, {
+        mouseup: this.sliderMove,
+        keydown: this.onKeyDown,
+        keyup: this.onKeyUp
+      }, this.$listeners),
+      directives: [{
+        name: 'click-outside'
+      }]
+    });
+  }
+};

package/es5/components/KSlider/index.js

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

package/es5/components/KSnackbar/KSnackbar.js

@@ -0,0 +1,106 @@
+require('../../../src/stylus/components/_snackbars.styl');
+
+import { KSlideYTransition, KSlideYReverseTransition } from '../transitions';
+
+import Colorable from '../../mixins/colorable';
+import Toggleable from '../../mixins/toggleable';
+
+export default {
+  name: 'k-snackbar',
+
+  components: {
+    KSlideYTransition: KSlideYTransition,
+    KSlideYReverseTransition: KSlideYReverseTransition
+  },
+
+  mixins: [Colorable, Toggleable],
+
+  data: function data() {
+    return {
+      activeTimeout: {}
+    };
+  },
+
+
+  props: {
+    absolute: Boolean,
+    bottom: Boolean,
+    left: Boolean,
+    multiLine: Boolean,
+    right: Boolean,
+    top: Boolean,
+    // TODO: change this to closeDelay to match other API in delayable.js
+    timeout: {
+      type: Number,
+      default: 6000
+    },
+    vertical: Boolean
+  },
+
+  computed: {
+    classes: function classes() {
+      return this.addBackgroundColorClassChecks({
+        'snack--active': this.isActive,
+        'snack--absolute': this.absolute,
+        'snack--bottom': this.bottom || !this.top,
+        'snack--left': this.left,
+        'snack--multi-line': this.multiLine && !this.vertical,
+        'snack--right': this.right,
+        'snack--top': this.top,
+        'snack--vertical': this.vertical
+      });
+    },
+    computedTransition: function computedTransition() {
+      return this.top ? 'k-slide-y-transition' : 'k-slide-y-reverse-transition';
+    }
+  },
+
+  watch: {
+    isActive: function isActive() {
+      this.setTimeout();
+    }
+  },
+
+  methods: {
+    setTimeout: function (_setTimeout) {
+      function setTimeout() {
+        return _setTimeout.apply(this, arguments);
+      }
+
+      setTimeout.toString = function () {
+        return _setTimeout.toString();
+      };
+
+      return setTimeout;
+    }(function () {
+      var _this = this;
+
+      clearTimeout(this.activeTimeout);
+
+      if (this.isActive && this.timeout) {
+        this.activeTimeout = setTimeout(function () {
+          _this.isActive = false;
+        }, this.timeout);
+      }
+    })
+  },
+
+  mounted: function mounted() {
+    this.setTimeout();
+  },
+  render: function render(h) {
+    var children = [];
+
+    if (this.isActive) {
+      children.push(h('div', {
+        staticClass: 'snack__content'
+      }, this.$slots.default));
+    }
+
+    return h('div', {
+      staticClass: 'snack',
+      'class': this.classes,
+      on: this.$listeners
+    }, [h(this.computedTransition, children)]);
+  }
+};

package/es5/components/KSnackbar/index.js

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

package/es5/components/KSpeedDial/KSpeedDial.js

@@ -0,0 +1,89 @@
+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/_speed-dial.styl');
+
+import Toggleable from '../../mixins/toggleable';
+import Positionable from '../../mixins/positionable';
+
+import ClickOutside from '../../directives/click-outside';
+
+export default {
+  name: 'k-speed-dial',
+
+  mixins: [Positionable, Toggleable],
+
+  directives: { ClickOutside: ClickOutside },
+
+  props: {
+    direction: {
+      type: String,
+      default: 'top',
+      validator: function validator(val) {
+        return ['top', 'right', 'bottom', 'left'].includes(val);
+      }
+    },
+    hover: Boolean,
+    transition: {
+      type: String,
+      default: 'scale-transition'
+    }
+  },
+
+  computed: {
+    classes: function classes() {
+      return _defineProperty({
+        'speed-dial': true,
+        'speed-dial--top': this.top,
+        'speed-dial--right': this.right,
+        'speed-dial--bottom': this.bottom,
+        'speed-dial--left': this.left,
+        'speed-dial--absolute': this.absolute,
+        'speed-dial--fixed': this.fixed
+      }, 'speed-dial--direction-' + this.direction, true);
+    }
+  },
+
+  render: function render(h) {
+    var _this = this;
+
+    var children = [];
+    var data = {
+      'class': this.classes,
+      directives: [{
+        name: 'click-outside'
+      }],
+      on: {
+        click: function click() {
+          return _this.isActive = !_this.isActive;
+        }
+      }
+    };
+
+    if (this.hover) {
+      data.on.mouseenter = function () {
+        return _this.isActive = true;
+      };
+      data.on.mouseleave = function () {
+        return _this.isActive = false;
+      };
+    }
+
+    if (this.isActive) {
+      children = (this.$slots.default || []).map(function (b, i) {
+        b.key = i;
+
+        return b;
+      });
+    }
+
+    var list = h('transition-group', {
+      'class': 'speed-dial__list',
+      props: {
+        name: this.transition,
+        tag: 'div'
+      }
+    }, children);
+
+    return h('div', data, [this.$slots.activator, list]);
+  }
+};

package/es5/components/KSpeedDial/index.js

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

package/es5/components/KStepper/KStepper.js

@@ -0,0 +1,112 @@
+require('../../../src/stylus/components/_steppers.styl');
+
+import Themeable from '../../mixins/themeable';
+
+export default {
+  name: 'k-stepper',
+
+  mixins: [Themeable],
+
+  provide: function provide() {
+    return {
+      stepClick: this.stepClick
+    };
+  },
+  data: function data() {
+    return {
+      inputValue: null,
+      isBooted: false,
+      steps: [],
+      content: [],
+      isReverse: false
+    };
+  },
+
+
+  props: {
+    nonLinear: Boolean,
+    altLabels: Boolean,
+    vertical: Boolean,
+    value: [Number, String]
+  },
+
+  computed: {
+    classes: function classes() {
+      return {
+        'stepper': true,
+        'stepper--is-booted': this.isBooted,
+        'stepper--vertical': this.vertical,
+        'stepper--alt-labels': this.altLabels,
+        'stepper--non-linear': this.nonLinear,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      };
+    }
+  },
+
+  watch: {
+    inputValue: function inputValue(val, prev) {
+      var _this = this;
+
+      this.isReverse = Number(val) < Number(prev);
+      this.steps.forEach(function (i) {
+        return i.toggle(_this.inputValue);
+      });
+      this.content.forEach(function (i) {
+        return i.toggle(_this.inputValue, _this.isReverse);
+      });
+
+      this.$emit('input', this.inputValue);
+      prev && (this.isBooted = true);
+    },
+    value: function value() {
+      var _this2 = this;
+
+      this.getSteps();
+      this.$nextTick(function () {
+        return _this2.inputValue = _this2.value;
+      });
+    }
+  },
+
+  mounted: function mounted() {
+    this.$kdutify.load(this.init);
+  },
+
+
+  methods: {
+    init: function init() {
+      this.getSteps();
+
+      this.inputValue = this.value || this.steps[0].step || 1;
+    },
+    getSteps: function getSteps() {
+      var _this3 = this;
+
+      this.steps = [];
+      this.content = [];
+      this.$children.forEach(function (i) {
+        if (i.$options._componentTag === 'k-stepper-step') {
+          _this3.steps.push(i);
+        } else if (i.$options._componentTag === 'k-stepper-content') {
+          i.isVertical = _this3.vertical;
+          _this3.content.push(i);
+        }
+      });
+    },
+    stepClick: function stepClick(step) {
+      var _this4 = this;
+
+      this.getSteps();
+      this.$nextTick(function () {
+        return _this4.inputValue = step;
+      });
+    }
+  },
+
+  render: function render(h) {
+    return h('div', {
+      'class': this.classes
+    }, this.$slots.default);
+  }
+};