kdutify 0.16.9-rc.0

package/src/components/KBtn/KBtn.js

@@ -0,0 +1,163 @@
+require('../../stylus/components/_buttons.styl')
+
+import Colorable from '../../mixins/colorable'
+import Contextualable from '../../mixins/contextualable'
+import Positionable from '../../mixins/positionable'
+import Routable from '../../mixins/routable'
+import Themeable from '../../mixins/themeable'
+import { factory as ToggleableFactory } from '../../mixins/toggleable'
+
+export default {
+  name: 'k-btn',
+
+  mixins: [
+    Colorable,
+    Contextualable,
+    Routable,
+    Positionable,
+    Themeable,
+    ToggleableFactory('inputValue')
+  ],
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'btn--active'
+    },
+    block: Boolean,
+    fab: Boolean,
+    flat: Boolean,
+    icon: Boolean,
+    large: Boolean,
+    loading: Boolean,
+    outline: Boolean,
+    raised: {
+      type: Boolean,
+      default: true
+    },
+    ripple: {
+      type: [Boolean, Object],
+      default: true
+    },
+    round: Boolean,
+    small: Boolean,
+    tag: {
+      type: String,
+      default: 'button'
+    },
+    type: {
+      type: String,
+      default: 'button'
+    },
+    value: null
+  },
+
+  computed: {
+    classes () {
+      const colorBackground = !this.outline && !this.flat
+      const colorText = !this.disabled && !colorBackground
+
+      const classes = {
+        'btn': true,
+        'btn--active': this.isActive,
+        'btn--absolute': this.absolute,
+        'btn--block': this.block,
+        'btn--bottom': this.bottom,
+        'btn--disabled': this.disabled,
+        'btn--flat': this.flat,
+        'btn--floating': this.fab,
+        'btn--fixed': this.fixed,
+        'btn--hover': this.hover,
+        'btn--icon': this.icon,
+        'btn--large': this.large,
+        'btn--left': this.left,
+        'btn--loader': this.loading,
+        'btn--outline': this.outline,
+        'btn--raised': !this.flat || this.raised,
+        'btn--right': this.right,
+        'btn--round': this.round,
+        'btn--router': this.to,
+        'btn--small': this.small,
+        'btn--top': this.top,
+        ...this.themeClasses
+      }
+
+      if (!this.color) {
+        return Object.assign(classes, {
+          'primary': this.primary && colorBackground,
+          'secondary': this.secondary && colorBackground,
+          'success': this.success && colorBackground,
+          'info': this.info && colorBackground,
+          'warning': this.warning && colorBackground,
+          'error': this.error && colorBackground,
+          'primary--text': this.primary && colorText,
+          'secondary--text': this.secondary && colorText,
+          'success--text': this.success && colorText,
+          'info--text': this.info && colorText,
+          'warning--text': this.warning && colorText,
+          'error--text': this.error && colorText
+        })
+      }
+
+      return colorBackground
+        ? this.addBackgroundColorClassChecks(classes)
+        : this.addTextColorClassChecks(classes)
+    }
+  },
+
+  methods: {
+    // Prevent focus to match md spec
+    click (e) {
+      !this.fab &&
+        e.detail &&
+        this.$el.blur()
+
+      this.$emit('click', e)
+    },
+    genContent () {
+      return this.$createElement(
+        'div',
+        { 'class': 'btn__content' },
+        [this.$slots.default]
+      )
+    },
+    genLoader () {
+      const children = []
+
+      if (!this.$slots.loader) {
+        children.push(this.$createElement('k-progress-circular', {
+          props: {
+            indeterminate: true,
+            size: 26
+          }
+        }))
+      } else {
+        children.push(this.$slots.loader)
+      }
+
+      return this.$createElement('span', { 'class': 'btn__loading' }, children)
+    }
+  },
+
+  mounted () {
+    Object.keys(Contextualable.props).forEach(prop => {
+      if (this[prop]) {
+        console.warn(`Context prop '${prop}' for KBtn component has been deprecated. Use 'color' prop instead.`)
+      }
+    })
+  },
+
+  render (h) {
+    const { tag, data } = this.generateRouteLink()
+    const children = [this.genContent()]
+
+    tag === 'button' && (data.attrs.type = this.type)
+    this.loading && children.push(this.genLoader())
+
+    data.attrs.value = ['string', 'number'].includes(typeof this.value)
+      ? this.value
+      : JSON.stringify(this.value)
+
+    return h(tag, data, children)
+  }
+}

package/src/components/KBtn/index.js

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

package/src/components/KBtnToggle/KBtnToggle.js

@@ -0,0 +1,92 @@
+require('../../stylus/components/_button-toggle.styl')
+
+import ButtonGroup from '../../mixins/button-group'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-btn-toggle',
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  mixins: [ButtonGroup, Themeable],
+
+  props: {
+    inputValue: {
+      required: false
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    mandatory: Boolean,
+    multiple: Boolean
+  },
+
+  computed: {
+    classes () {
+      return {
+        'btn-toggle': true,
+        'btn-toggle--selected': this.hasValue,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      }
+    },
+    hasValue () {
+      return (this.multiple && this.inputValue.length) ||
+        (!this.multiple && this.inputValue !== null &&
+          typeof this.inputValue !== 'undefined')
+    }
+  },
+
+  watch: {
+    inputValue: {
+      handler () {
+        this.update()
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    isSelected (i) {
+      const item = this.getValue(i)
+      if (!this.multiple) {
+        return this.inputValue === item
+      }
+
+      return this.inputValue.includes(item)
+    },
+    updateValue (i) {
+      const item = this.getValue(i)
+      if (!this.multiple) {
+        if (this.mandatory && this.inputValue === item) return
+        return this.$emit('change', this.inputValue === item ? null : item)
+      }
+
+      const items = this.inputValue.slice()
+
+      const index = items.indexOf(item)
+      if (index > -1) {
+        if (this.mandatory && items.length === 1) return
+        items.length >= 1 && items.splice(index, 1)
+      } else {
+        items.push(item)
+      }
+
+      this.$emit('change', items)
+    }
+  },
+
+  mounted () {
+    if (this.items.length > 0) {
+      console.warn('The \'items\' props has been deprecated. k-btn-toggle now has a default slot where you can place buttons.')
+    }
+  },
+
+  render (h) {
+    return h('div', { class: this.classes }, this.$slots.default)
+  }
+}

package/src/components/KBtnToggle/index.js

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

package/src/components/KCard/KCard.js

@@ -0,0 +1,61 @@
+require('../../stylus/components/_cards.styl')
+
+import Colorable from '../../mixins/colorable'
+import Routable from '../../mixins/routable'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-card',
+
+  mixins: [Colorable, Routable, Themeable],
+
+  props: {
+    flat: Boolean,
+    height: {
+      type: String,
+      default: 'auto'
+    },
+    hover: Boolean,
+    img: String,
+    raised: Boolean,
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    tile: Boolean
+  },
+
+  computed: {
+    classes () {
+      return this.addBackgroundColorClassChecks({
+        'card': true,
+        'card--flat': this.flat,
+        'card--horizontal': this.horizontal,
+        'card--hover': this.hover,
+        'card--raised': this.raised,
+        'card--tile': this.tile,
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      })
+    },
+    styles () {
+      const style = {
+        height: isNaN(this.height) ? this.height : `${this.height}px`
+      }
+
+      if (this.img) {
+        style.background = `url(${this.img}) center center / cover no-repeat`
+      }
+
+      return style
+    }
+  },
+
+  render (h) {
+    const { tag, data } = this.generateRouteLink()
+
+    data.style = this.styles
+
+    return h(tag, data, this.$slots.default)
+  }
+}

package/src/components/KCard/KCardMedia.js

@@ -0,0 +1,41 @@
+export default {
+  name: 'k-card-media',
+
+  props: {
+    contain: Boolean,
+    height: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    src: {
+      type: String
+    }
+  },
+
+  render (h) {
+    const data = {
+      'class': 'card__media',
+      style: {
+        height: !isNaN(this.height) ? `${this.height}px` : this.height
+      },
+      on: this.$listeners
+    }
+
+    const children = []
+
+    if (this.src) {
+      children.push(h('div', {
+        'class': 'card__media__background',
+        style: {
+          background: `url(${this.src}) center center / ${this.contain ? 'contain' : 'cover'} no-repeat`
+        }
+      }))
+    }
+
+    children.push(h('div', {
+      'class': 'card__media__content'
+    }, this.$slots.default))
+
+    return h('div', data, children)
+  }
+}

package/src/components/KCard/KCardTitle.js

@@ -0,0 +1,17 @@
+export default {
+  name: 'k-card-title',
+
+  functional: true,
+
+  props: {
+    primaryTitle: Boolean
+  },
+
+  render (h, { data, props, children }) {
+    data.staticClass = (`card__title ${data.staticClass || ''}`).trim()
+
+    if (props.primaryTitle) data.staticClass += ' card__title--primary'
+
+    return h('div', data, children)
+  }
+}

package/src/components/KCard/index.js

@@ -0,0 +1,19 @@
+import { createSimpleFunctional } from '../../util/helpers'
+import KCard from './KCard'
+import KCardMedia from './KCardMedia'
+import KCardTitle from './KCardTitle'
+
+export { KCard, KCardMedia, KCardTitle }
+
+KCard.install = function install (Kdu) {
+  const KCardActions = createSimpleFunctional('card__actions')
+  const KCardText = createSimpleFunctional('card__text')
+
+  Kdu.component(KCard.name, KCard)
+  Kdu.component(KCardMedia.name, KCardMedia)
+  Kdu.component(KCardTitle.name, KCardTitle)
+  Kdu.component('k-card-actions', KCardActions)
+  Kdu.component('k-card-text', KCardText)
+}
+
+export default KCard

package/src/components/KCarousel/KCarousel.js

@@ -0,0 +1,174 @@
+require('../../stylus/components/_carousel.styl')
+
+import KBtn from '../KBtn'
+import KIcon from '../KIcon'
+
+import Bootable from '../../mixins/bootable'
+import Themeable from '../../mixins/themeable'
+
+import Touch from '../../directives/touch'
+
+export default {
+  name: 'k-carousel',
+
+  mixins: [Bootable, Themeable],
+
+  directives: { Touch },
+
+  data () {
+    return {
+      inputValue: null,
+      items: [],
+      slideTimeout: null,
+      reverse: false
+    }
+  },
+
+  props: {
+    cycle: {
+      type: Boolean,
+      default: true
+    },
+    hideControls: Boolean,
+    icon: {
+      type: String,
+      default: 'fiber_manual_record'
+    },
+    interval: {
+      type: [Number, String],
+      default: 6000,
+      validator: value => value > 0
+    },
+    leftControlIcon: {
+      type: [Boolean, String],
+      default: 'chevron_left'
+    },
+    rightControlIcon: {
+      type: [Boolean, String],
+      default: 'chevron_right'
+    },
+    value: Number
+  },
+
+  watch: {
+    inputValue () {
+      // Evaluate items when inputValue changes to account for
+      // dynamic changing of children
+      this.items = this.$children.filter(i => {
+        return i.$el.classList && i.$el.classList.contains('carousel__item')
+      })
+
+      this.items.forEach(i => i.open(
+        this.items[this.inputValue]._uid,
+        this.reverse
+      ))
+
+      this.$emit('input', this.inputValue)
+      this.restartTimeout()
+    },
+    value (val) {
+      this.inputValue = val
+    },
+    interval () {
+      this.restartTimeout()
+    },
+    cycle (val) {
+      if (val) {
+        this.restartTimeout()
+      } else {
+        clearTimeout(this.slideTimeout)
+        this.slideTimeout = null
+      }
+    }
+  },
+
+  mounted () {
+    this.init()
+  },
+
+  methods: {
+    genControls () {
+      return this.$createElement('div', {
+        staticClass: 'carousel__controls'
+      }, this.genItems())
+    },
+    genIcon (direction, icon, fn) {
+      if (!icon) return null
+
+      return this.$createElement('div', {
+        staticClass: `carousel__${direction}`
+      }, [
+        this.$createElement(KBtn, {
+          props: {
+            icon: true,
+            dark: this.dark || !this.light,
+            light: this.light
+          },
+          on: { click: fn }
+        }, [this.$createElement(KIcon, icon)])
+      ])
+    },
+    genItems () {
+      return this.items.map((item, index) => {
+        return this.$createElement(KBtn, {
+          class: {
+            'carousel__controls__item': true,
+            'carousel__controls__item--active': index === this.inputValue
+          },
+          props: {
+            icon: true,
+            dark: this.dark || !this.light,
+            light: this.light
+          },
+          key: index,
+          on: { click: this.select.bind(this, index) }
+        }, [this.$createElement(KIcon, this.icon)])
+      })
+    },
+    restartTimeout () {
+      this.slideTimeout && clearTimeout(this.slideTimeout)
+      this.slideTimeout = null
+
+      const raf = requestAnimationFrame || setTimeout
+      raf(this.startTimeout)
+    },
+    init () {
+      this.inputValue = this.value || 0
+    },
+    next () {
+      this.reverse = false
+      this.inputValue = (this.inputValue + 1) % this.items.length
+    },
+    prev () {
+      this.reverse = true
+      this.inputValue = (this.inputValue + this.items.length - 1) % this.items.length
+    },
+    select (index) {
+      this.reverse = index < this.inputValue
+      this.inputValue = index
+    },
+    startTimeout () {
+      if (!this.cycle) return
+
+      this.slideTimeout = setTimeout(() => this.next(), this.interval > 0 ? this.interval : 6000)
+    }
+  },
+
+  render (h) {
+    return h('div', {
+      staticClass: 'carousel',
+      directives: [{
+        name: 'touch',
+        value: {
+          left: this.next,
+          right: this.prev
+        }
+      }]
+    }, [
+      this.genIcon('left', this.leftControlIcon, this.prev),
+      this.genIcon('right', this.rightControlIcon, this.next),
+      this.hideControls ? null : this.genControls(),
+      this.$slots.default
+    ])
+  }
+}

package/src/components/KCarousel/KCarouselItem.js

@@ -0,0 +1,65 @@
+export default {
+  name: 'k-carousel-item',
+
+  data () {
+    return {
+      active: false,
+      reverse: false
+    }
+  },
+
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+
+    transition: {
+      type: String,
+      default: 'tab-transition'
+    },
+
+    reverseTransition: {
+      type: String,
+      default: 'tab-reverse-transition'
+    }
+  },
+
+  computed: {
+    computedTransition () {
+      return this.reverse ? this.reverseTransition : this.transition
+    },
+
+    styles () {
+      return {
+        backgroundImage: `url(${this.src})`
+      }
+    }
+  },
+
+  methods: {
+    open (id, reverse) {
+      this.active = this._uid === id
+      this.reverse = reverse
+    }
+  },
+
+  render (h) {
+    const item = h('div', {
+      class: {
+        'carousel__item': true,
+        'reverse': this.reverse
+      },
+      style: this.styles,
+      on: this.$listeners,
+      directives: [
+        {
+          name: 'show',
+          value: this.active
+        }
+      ]
+    }, [this.$slots.default])
+
+    return h('transition', { props: { name: this.computedTransition } }, [item])
+  }
+}

package/src/components/KCarousel/index.js

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