kdutify 0.16.9-rc.0 → 2.6.1

package/src/components/KBreadcrumbs/KBreadcrumbs.js

@@ -1,35 +0,0 @@
-require('../../stylus/components/_breadcrumbs.styl')
-
-export default {
-  name: 'k-breadcrumbs',
-
-  provide () {
-    return {
-      divider: this.divider
-    }
-  },
-
-  props: {
-    divider: {
-      type: String,
-      default: '/'
-    },
-    icons: Boolean
-  },
-
-  computed: {
-    classes () {
-      return {
-        'breadcrumbs': true,
-        'breadcrumbs--with-icons': this.icons
-      }
-    }
-  },
-
-  render (h) {
-    return h('ul', {
-      'class': this.classes,
-      props: { items: this.items }
-    }, this.$slots.default)
-  }
-}

package/src/components/KBreadcrumbs/KBreadcrumbsItem.js

@@ -1,38 +0,0 @@
-import Routable from '../../mixins/routable'
-
-export default {
-  name: 'k-breadcrumbs-item',
-
-  mixins: [Routable],
-
-  inject: ['divider'],
-
-  props: {
-    activeClass: {
-      type: String,
-      default: 'breadcrumbs__item--disabled'
-    }
-  },
-
-  computed: {
-    classes () {
-      const classes = {
-        'breadcrumbs__item': true
-      }
-
-      classes[this.activeClass] = this.disabled
-
-      return classes
-    }
-  },
-
-  render (h) {
-    const { tag, data } = this.generateRouteLink()
-
-    return h('li', {
-      attrs: { 'data-divider': this.divider }
-    }, [
-      h(tag, data, this.$slots.default)
-    ])
-  }
-}

package/src/components/KBreadcrumbs/index.js

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

package/src/components/KBtn/KBtn.js

@@ -1,163 +0,0 @@
-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

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

package/src/components/KBtnToggle/KBtnToggle.js

@@ -1,92 +0,0 @@
-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

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

package/src/components/KCard/KCard.js

@@ -1,61 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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
-    ])
-  }
-}