kdutify 0.16.9-rc.0

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

@@ -0,0 +1,99 @@
+require('../../stylus/components/_parallax.styl')
+
+import Translatable from '../../mixins/translatable'
+
+export default {
+  name: 'k-parallax',
+
+  mixins: [Translatable],
+
+  data () {
+    return {
+      isBooted: false
+    }
+  },
+
+  props: {
+    alt: String,
+    height: {
+      type: [String, Number],
+      default: 500
+    },
+    jumbotron: Boolean,
+    src: String
+  },
+
+  computed: {
+    styles () {
+      return {
+        display: 'block',
+        opacity: this.isBooted ? 1 : 0,
+        transform: `translate3d(-50%, ${this.jumbotron ? 0 : this.parallax + 'px'}, 0)`
+      }
+    }
+  },
+
+  watch: {
+    parallax () {
+      this.isBooted = true
+    }
+  },
+
+  methods: {
+    init () {
+      if (!this.$refs.img) return
+
+      if (this.$refs.img.complete) {
+        this.translate()
+        this.listeners()
+      } else {
+        this.$refs.img.addEventListener('load', () => {
+          this.translate()
+          this.listeners()
+        }, false)
+      }
+    },
+    objHeight () {
+      return this.$refs.img.naturalHeight
+    },
+    elOffsetTop () {
+      return this.$el.offsetTop
+    }
+  },
+
+  render (h) {
+    const 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
+
+    const container = h('div', {
+      staticClass: 'parallax__image-container'
+    }, [
+      h('img', imgData)
+    ])
+
+    const 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/src/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

package/src/components/KProgressCircular/KProgressCircular.js

@@ -0,0 +1,160 @@
+require('../../stylus/components/_progress-circular.styl')
+
+import Colorable from '../../mixins/colorable'
+
+export default {
+  name: 'k-progress-circular',
+
+  mixins: [Colorable],
+
+  props: {
+    button: Boolean,
+
+    fill: {
+      type: String,
+      default () { return this.indeterminate ? 'none' : 'transparent' }
+    },
+
+    indeterminate: Boolean,
+
+    rotate: {
+      type: Number,
+      default: 0
+    },
+
+    size: {
+      type: [Number, String],
+      default: 32
+    },
+
+    width: {
+      type: Number,
+      default: 4
+    },
+
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  computed: {
+    calculatedSize () {
+      let size = Number(this.size)
+
+      if (this.button) {
+        size += 8
+      }
+
+      return size
+    },
+
+    circumference () {
+      return 2 * Math.PI * this.radius
+    },
+
+    classes () {
+      return this.addTextColorClassChecks({
+        'progress-circular': true,
+        'progress-circular--indeterminate': this.indeterminate,
+        'progress-circular--button': this.button
+      })
+    },
+
+    cxy () {
+      return this.indeterminate && !this.button ? 50 : this.calculatedSize / 2
+    },
+
+    normalizedValue () {
+      if (this.value < 0) {
+        return 0
+      }
+
+      if (this.value > 100) {
+        return 100
+      }
+
+      return this.value
+    },
+
+    radius () {
+      return this.indeterminate &&
+        !this.button
+        ? 20
+        : (this.calculatedSize - this.width) / 2
+    },
+
+    strokeDashArray () {
+      return Math.round(this.circumference * 1000) / 1000
+    },
+
+    strokeDashOffset () {
+      return ((100 - this.normalizedValue) / 100) * this.circumference + 'px'
+    },
+
+    styles () {
+      return {
+        height: `${this.calculatedSize}px`,
+        width: `${this.calculatedSize}px`
+      }
+    },
+
+    svgSize () {
+      return this.indeterminate ? false : this.calculatedSize
+    },
+
+    svgStyles () {
+      return {
+        transform: `rotate(${this.rotate}deg)`
+      }
+    },
+
+    viewBox () {
+      return this.indeterminate ? '25 25 50 50' : false
+    }
+  },
+
+  methods: {
+    genCircle (h, name, offset) {
+      return h('circle', {
+        class: `progress-circular__${name}`,
+        attrs: {
+          fill: 'transparent',
+          cx: this.cxy,
+          cy: this.cxy,
+          r: this.radius,
+          'stroke-width': this.width,
+          'stroke-dasharray': this.strokeDashArray,
+          'stroke-dashoffset': offset
+        }
+      })
+    },
+    genSvg (h) {
+      const children = [
+        !this.indeterminate && this.genCircle(h, 'underlay', 0),
+        this.genCircle(h, 'overlay', this.strokeDashOffset)
+      ]
+
+      return h('svg', {
+        style: this.svgStyles,
+        attrs: {
+          xmlns: 'http://www.w3.org/2000/svg',
+          height: this.svgSize,
+          width: this.svgSize,
+          viewBox: this.viewBox
+        }
+      }, children)
+    }
+  },
+
+  render (h) {
+    const info = h('div', { class: 'progress-circular__info' }, [this.$slots.default])
+    const svg = this.genSvg(h)
+
+    return h('div', {
+      class: this.classes,
+      style: this.styles,
+      on: this.$listeners
+    }, [svg, info])
+  }
+}

package/src/components/KProgressCircular/index.js

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

package/src/components/KProgressLinear/KProgressLinear.js

@@ -0,0 +1,157 @@
+require('../../stylus/components/_progress-linear.styl')
+
+import Colorable from '../../mixins/colorable'
+
+import {
+  KFadeTransition,
+  KSlideXTransition
+} from '../transitions'
+
+export default {
+  name: 'k-progress-linear',
+
+  components: {
+    KFadeTransition,
+    KSlideXTransition
+  },
+
+  mixins: [Colorable],
+
+  props: {
+    active: {
+      type: Boolean,
+      default: true
+    },
+    backgroundColor: {
+      type: String,
+      default: null
+    },
+    backgroundOpacity: {
+      type: [Number, String],
+      default: null
+    },
+    bufferValue: {
+      type: [Number, String],
+      default: 100
+    },
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    height: {
+      type: [Number, String],
+      default: 7
+    },
+    indeterminate: Boolean,
+    query: Boolean,
+    value: {
+      type: [Number, String],
+      default: 0
+    }
+  },
+
+  computed: {
+    styles () {
+      const styles = {}
+
+      if (!this.active) {
+        styles.height = 0
+      }
+
+      if (!this.indeterminate && parseInt(this.bufferValue, 10) !== 100) {
+        styles.width = `${this.bufferValue}%`
+      }
+
+      return styles
+    },
+    effectiveWidth () {
+      if (!this.bufferValue) {
+        return 0
+      }
+
+      return this.value * 100 / this.bufferValue
+    },
+    bufferStyles () {
+      const styles = {}
+
+      if (!this.active) {
+        styles.height = 0
+      }
+
+      return styles
+    },
+    backgroundStyle () {
+      const backgroundOpacity = this.backgroundOpacity == null
+        ? (this.backgroundColor ? 1 : 0.3)
+        : parseFloat(this.backgroundOpacity)
+
+      return {
+        height: this.active ? 'auto' : 0,
+        opacity: backgroundOpacity,
+        width: `${this.bufferValue}%`
+      }
+    }
+  },
+
+  methods: {
+    genDeterminate (h) {
+      return h('div', {
+        ref: 'front',
+        staticClass: `progress-linear__bar__determinate`,
+        class: this.addBackgroundColorClassChecks({}),
+        style: {
+          width: `${this.effectiveWidth}%`
+        }
+      })
+    },
+    genBar (h, name) {
+      return h('div', {
+        staticClass: 'progress-linear__bar__indeterminate',
+        class: this.addBackgroundColorClassChecks({
+          [name]: true
+        })
+      })
+    },
+    genIndeterminate (h) {
+      return h('div', {
+        ref: 'front',
+        staticClass: 'progress-linear__bar__indeterminate',
+        class: {
+          'progress-linear__bar__indeterminate--active': this.active
+        }
+      }, [
+        this.genBar(h, 'long'),
+        this.genBar(h, 'short')
+      ])
+    }
+  },
+
+  render (h) {
+    const fade = h('k-fade-transition', [this.indeterminate && this.genIndeterminate(h)])
+    const slide = h('k-slide-x-transition', [!this.indeterminate && this.genDeterminate(h)])
+
+    const bar = h('div', {
+      staticClass: 'progress-linear__bar',
+      style: this.styles
+    }, [fade, slide])
+    const background = h('div', {
+      staticClass: 'progress-linear__background',
+      class: [this.backgroundColor || this.color],
+      style: this.backgroundStyle
+    })
+
+    return h('div', {
+      staticClass: 'progress-linear',
+      class: {
+        'progress-linear--query': this.query
+      },
+      style: {
+        height: `${this.height}px`
+      },
+      on: this.$listeners
+    }, [
+      background,
+      bar
+    ])
+  }
+}

package/src/components/KProgressLinear/index.js

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

package/src/components/KRadioGroup/KRadio.js

@@ -0,0 +1,153 @@
+import { KFadeTransition } from '../transitions'
+import KIcon from '../KIcon'
+
+import Colorable from '../../mixins/colorable'
+import Rippleable from '../../mixins/rippleable'
+import TabFocusable from '../../mixins/tab-focusable'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-radio',
+
+  inheritAttrs: false,
+
+  inject: ['isMandatory', 'name', 'registerChild', 'unregisterChild'],
+
+  components: {
+    KFadeTransition,
+    KIcon
+  },
+
+  mixins: [Colorable, Rippleable, TabFocusable, Themeable],
+
+  props: {
+    disabled: Boolean,
+    value: null,
+    label: String
+  },
+
+  data () {
+    return {
+      isActive: false
+    }
+  },
+
+  computed: {
+    classes () {
+      return this.addTextColorClassChecks({
+        'input-group': true,
+        'input-group--active': this.isActive,
+        'input-group--disabled': this.disabled,
+        'input-group--selection-controls': true,
+        'input-group--tab-focused': this.tabFocused,
+        'radio': true,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      })
+    },
+
+    icon () {
+      return this.isActive ? 'radio_button_checked' : 'radio_button_unchecked'
+    }
+  },
+
+  methods: {
+    genInput (radio) {
+      const value = ['string', 'number'].includes(typeof this.value)
+        ? this.value
+        : JSON.stringify(this.value)
+      const input = this.$createElement('input', {
+        ref: 'input',
+        style: {
+          display: 'none'
+        },
+        attrs: Object.assign({
+          name: this.name && this.name(),
+          id: this.id,
+          type: 'radio',
+          value
+        }, this.$attrs)
+      }, [value])
+
+      radio.push(input)
+
+      return this.$createElement('div', {
+        class: 'input-group__input'
+      }, radio)
+    },
+    genWrapper (radio) {
+      const children = []
+
+      children.push(this.genLabel())
+      children.push(this.genInput(radio))
+
+      return this.$createElement('div', {
+        class: this.classes,
+        attrs: {
+          role: 'radio',
+          'aria-checked': this.isActive && 'true' || 'false',
+          'aria-label': this.label
+        },
+        on: {
+          keydown: e => {
+            if ([13, 32].includes(e.keyCode)) {
+              e.preventDefault()
+              this.toggle()
+            }
+          },
+          blur: e => {
+            this.$emit('blur', e)
+            this.tabFocused = false
+          }
+        }
+      }, children)
+    },
+    genLabel () {
+      return this.$createElement('label', {
+        on: {
+          click: this.toggle
+        }
+      }, this.$slots.label || this.label)
+    },
+    toggle () {
+      const mandatory = this.isMandatory &&
+        this.isMandatory() || false
+
+      if (!this.disabled && (!this.isActive || !mandatory)) {
+        this.$refs.input.checked = true
+        this.isActive = true
+        this.$emit('change', this.value)
+      }
+    }
+  },
+
+  created () {
+    // Semantic check to help people identify the reason for the inject error above it.
+    if (!this.$parent || !this.$parent.$knode || !this.$parent.$knode.tag ||
+      !this.$parent.$knode.tag.endsWith('k-radio-group')) {
+      console.warn('[Kdutify] Warn: The k-radio component must have an immediate parent of k-radio-group.')
+    }
+  },
+
+  mounted () {
+    this.registerChild(this)
+  },
+
+  beforeDestroy () {
+    this.unregisterChild(this)
+  },
+
+  render (h) {
+    const transition = h('k-fade-transition', {}, [
+      h('k-icon', {
+        staticClass: 'icon--selection-control',
+        'class': {
+          'icon--radio': this.isActive
+        },
+        key: this.icon
+      }, this.icon)
+    ])
+
+    return this.genWrapper([transition, this.genRipple()])
+  }
+}

package/src/components/KRadioGroup/KRadioGroup.js

@@ -0,0 +1,118 @@
+require('../../stylus/components/_input-groups.styl')
+require('../../stylus/components/_selection-controls.styl')
+require('../../stylus/components/_radio-group.styl')
+
+import Input from '../../mixins/input'
+
+export default {
+  name: 'k-radio-group',
+
+  mixins: [Input],
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  provide () {
+    return {
+      isMandatory: () => this.mandatory,
+      name: () => this.name,
+      registerChild: this.registerChild,
+      unregisterChild: this.unregisterChild
+    }
+  },
+
+  props: {
+    column: {
+      type: Boolean,
+      default: true
+    },
+    inputValue: null,
+    mandatory: {
+      type: Boolean,
+      default: true
+    },
+    name: String,
+    row: Boolean
+  },
+
+  data () {
+    return {
+      internalTabIndex: -1
+    }
+  },
+
+  watch: {
+    inputValue (val) {
+      this.getRadios().forEach((radio) => {
+        radio.isActive = val === radio.value
+      })
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'radio-group': true,
+        'radio-group--column': this.column && !this.row,
+        'radio-group--row': this.row
+      }
+    }
+  },
+
+  methods: {
+    getRadios () {
+      return this.$children
+        .filter((child) => child.$el.classList.contains('radio'))
+    },
+    toggleRadio (value) {
+      if (this.disabled) {
+        return
+      }
+
+      this.shouldValidate = true
+      this.$emit('change', value)
+      this.$nextTick(() => this.validate())
+
+      this.getRadios()
+        .filter(r => r.value !== value)
+        .forEach(r => r.isActive = false)
+    },
+    radioBlur (e) {
+      if (!e.relatedTarget || !e.relatedTarget.classList.contains('radio')) {
+        this.shouldValidate = true
+        this.$emit('blur', this.inputValue)
+      }
+    },
+    registerChild (radio) {
+      radio.isActive = this.inputValue === radio.value
+      radio.$el.tabIndex = radio.$el.tabIndex > 0 ? radio.$el.tabIndex : 0
+      radio.$on('change', this.toggleRadio)
+      radio.$on('blur', this.radioBlur)
+      radio.$on('focus', this.radioFocus)
+    },
+    unregisterChild (radio) {
+      radio.$off('change', this.toggleRadio)
+      radio.$off('blur', this.radioBlur)
+      radio.$off('focus', this.radioFocus)
+    }
+  },
+
+  mounted () {
+    this.getRadios().forEach(radio => this.registerChild(radio))
+  },
+
+  beforeDestroy () {
+    this.getRadios().forEach(radio => this.unregisterChild(radio))
+  },
+
+  render (h) {
+    const data = {
+      attrs: {
+        role: 'radiogroup'
+      }
+    }
+    return this.genInputGroup(this.$slots.default, data)
+  }
+}