kdutify 0.16.9-rc.0

package/src/components/KSlider/KSlider.js

@@ -0,0 +1,311 @@
+require('../../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 },
+
+  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 () {
+      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 () {
+        return this.value
+      },
+      set (val) {
+        const { min, max, step, snap } = this
+        val = val < min && min || val > max && max || val
+
+        // Round value to ensure the
+        // entire slider range can
+        // be selected with step
+        const value = snap ? Math.round(val / step) * step : Math.round(val)
+        this.lazyValue = value
+
+        if (value !== this.value) {
+          this.$emit('input', value)
+        }
+      }
+    },
+    interval () {
+      return 100 / (this.max - this.min) * this.step
+    },
+    thumbContainerClasses () {
+      return {
+        'slider__thumb-container': true,
+        'slider__thumb-container--label': this.thumbLabel
+      }
+    },
+    thumbStyles () {
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        left: `${this.inputWidth}%`
+      }
+    },
+    tickContainerStyles () {
+      return {
+        transform: `translate3d(0, -50%, 0)`
+      }
+    },
+    trackStyles () {
+      const scaleX = this.calculateScale(1 - (this.inputWidth / 100))
+      const offsetX = this.thumbLabel ? 0 : !this.isActive ? 8 : 12
+      const translateX = `${offsetX}px`
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        transform: `scaleX(${scaleX}) translateX(${translateX})`
+      }
+    },
+    trackFillStyles () {
+      const inputWidth = this.inputWidth
+      const scaleX = this.calculateScale(inputWidth / 100)
+      const translateX = inputWidth > 99 && !this.thumbLabel ? `${-8}px` : 0
+      return {
+        transition: this.keyPressed >= 2 ? 'none' : '',
+        transform: `scaleX(${scaleX}) translateX(${translateX})`
+      }
+    },
+    numTicks () {
+      return parseInt((this.max - this.min) / this.step)
+    },
+    inputWidth () {
+      let 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 (val) {
+      this.isFocused = val
+    },
+    min (val) {
+      val > this.inputValue && this.$emit('input', val)
+    },
+    max (val) {
+      val < this.inputValue && this.$emit('input', val)
+    },
+    value (val) {
+      this.inputValue = val
+    }
+  },
+
+  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 (scale) {
+      return this.disabled ? scale - 0.015 : scale
+    },
+    onMouseDown (e) {
+      this.keyPressed = 2
+      const 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 () {
+      this.keyPressed = 0
+      const options = { passive: true }
+      this.isActive = false
+      this.app.removeEventListener('touchmove', this.onMouseMove, options)
+      this.app.removeEventListener('mousemove', this.onMouseMove, options)
+    },
+    onMouseMove (e) {
+      const {
+        left: offsetLeft,
+        width: trackWidth
+      } = this.$refs.track.getBoundingClientRect()
+      const clientX = 'touches' in e ? e.touches[0].clientX : e.clientX
+      const left = (
+        ((clientX - offsetLeft) / trackWidth) * 100
+      )
+
+      if (left >= 0 && left <= 100) {
+        this.inputValue = parseInt(this.min, 10) + ((left / 100) * (this.max - this.min))
+      }
+    },
+    onKeyDown (e) {
+      if (e.keyCode === 37 || e.keyCode === 39) {
+        this.keyPressed += 1
+
+        const direction = e.keyCode === 37 && -1 || e.keyCode === 39 && 1 || 0
+        const multiplier = e.shiftKey && 3 || e.ctrlKey && 2 || 1
+        const amount = this.snap && this.step || 1
+
+        this.inputValue = this.inputValue + (direction * amount * multiplier)
+      }
+    },
+    onKeyUp (e) {
+      this.keyPressed = 0
+    },
+    sliderMove (e) {
+      if (!this.isActive) {
+        this.onMouseMove(e)
+      }
+    },
+    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 (h) {
+      const 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 (h) {
+      const ticks = createRange(this.numTicks + 1).map((i) => {
+        const 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 (h) {
+      const 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 (h) {
+    const children = []
+
+    children.push(this.genTrackContainer(h))
+    this.step && children.push(this.genSteps(h))
+    children.push(this.genThumbContainer(h))
+
+    const 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/src/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/src/components/KSnackbar/KSnackbar.js

@@ -0,0 +1,97 @@
+require('../../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,
+    KSlideYReverseTransition
+  },
+
+  mixins: [Colorable, Toggleable],
+
+  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 () {
+      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 () {
+      return this.top ? 'k-slide-y-transition' : 'k-slide-y-reverse-transition'
+    }
+  },
+
+  watch: {
+    isActive () {
+      this.setTimeout()
+    }
+  },
+
+  methods: {
+    setTimeout () {
+      clearTimeout(this.activeTimeout)
+
+      if (this.isActive && this.timeout) {
+        this.activeTimeout = setTimeout(() => {
+          this.isActive = false
+        }, this.timeout)
+      }
+    }
+  },
+
+  mounted () {
+    this.setTimeout()
+  },
+
+  render (h) {
+    const 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/src/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/src/components/KSpeedDial/KSpeedDial.js

@@ -0,0 +1,80 @@
+require('../../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 },
+
+  props: {
+    direction: {
+      type: String,
+      default: 'top',
+      validator: (val) => {
+        return ['top', 'right', 'bottom', 'left'].includes(val)
+      }
+    },
+    hover: Boolean,
+    transition: {
+      type: String,
+      default: 'scale-transition'
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        '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 (h) {
+    let children = []
+    const data = {
+      'class': this.classes,
+      directives: [{
+        name: 'click-outside'
+      }],
+      on: {
+        click: () => (this.isActive = !this.isActive)
+      }
+    }
+
+    if (this.hover) {
+      data.on.mouseenter = () => (this.isActive = true)
+      data.on.mouseleave = () => (this.isActive = false)
+    }
+
+    if (this.isActive) {
+      children = (this.$slots.default || []).map((b, i) => {
+        b.key = i
+
+        return b
+      })
+    }
+
+    const list = h('transition-group', {
+      'class': 'speed-dial__list',
+      props: {
+        name: this.transition,
+        tag: 'div'
+      }
+    }, children)
+
+    return h('div', data, [this.$slots.activator, list])
+  }
+}

package/src/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/src/components/KStepper/KStepper.js

@@ -0,0 +1,95 @@
+require('../../stylus/components/_steppers.styl')
+
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-stepper',
+
+  mixins: [Themeable],
+
+  provide () {
+    return {
+      stepClick: this.stepClick
+    }
+  },
+
+  data () {
+    return {
+      inputValue: null,
+      isBooted: false,
+      steps: [],
+      content: [],
+      isReverse: false
+    }
+  },
+
+  props: {
+    nonLinear: Boolean,
+    altLabels: Boolean,
+    vertical: Boolean,
+    value: [Number, String]
+  },
+
+  computed: {
+    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 (val, prev) {
+      this.isReverse = Number(val) < Number(prev)
+      this.steps.forEach(i => i.toggle(this.inputValue))
+      this.content.forEach(i => i.toggle(this.inputValue, this.isReverse))
+
+      this.$emit('input', this.inputValue)
+      prev && (this.isBooted = true)
+    },
+    value () {
+      this.getSteps()
+      this.$nextTick(() => (this.inputValue = this.value))
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(this.init)
+  },
+
+  methods: {
+    init () {
+      this.getSteps()
+
+      this.inputValue = this.value || this.steps[0].step || 1
+    },
+    getSteps () {
+      this.steps = []
+      this.content = []
+      this.$children.forEach(i => {
+        if (i.$options._componentTag === 'k-stepper-step') {
+          this.steps.push(i)
+        } else if (i.$options._componentTag === 'k-stepper-content') {
+          i.isVertical = this.vertical
+          this.content.push(i)
+        }
+      })
+    },
+    stepClick (step) {
+      this.getSteps()
+      this.$nextTick(() => (this.inputValue = step))
+    }
+  },
+
+  render (h) {
+    return h('div', {
+      'class': this.classes
+    }, this.$slots.default)
+  }
+}