kdutify 0.16.9-rc.0

package/src/components/KGrid/KContent.js

@@ -0,0 +1,29 @@
+require('../../stylus/components/_content.styl')
+
+export default {
+  name: 'k-content',
+
+  computed: {
+    styles () {
+      const {
+        bar, top, right, bottom, left
+      } = this.$kdutify.application
+
+      return {
+        paddingTop: `${top + bar}px`,
+        paddingRight: `${right}px`,
+        paddingBottom: `${bottom}px`,
+        paddingLeft: `${left}px`
+      }
+    }
+  },
+
+  render (h) {
+    const data = {
+      staticClass: 'content',
+      style: this.styles
+    }
+
+    return h('div', data, this.$slots.default)
+  }
+}

package/src/components/KGrid/KFlex.js

@@ -0,0 +1,5 @@
+require('../../stylus/components/_grid.styl')
+
+import Grid from './grid'
+
+export default Grid('flex')

package/src/components/KGrid/KLayout.js

@@ -0,0 +1,5 @@
+require('../../stylus/components/_grid.styl')
+
+import Grid from './grid'
+
+export default Grid('layout')

package/src/components/KGrid/grid.js

@@ -0,0 +1,40 @@
+export default function Grid (name) {
+  return {
+    name: `k-${name}`,
+
+    functional: true,
+
+    props: {
+      id: String,
+      tag: {
+        type: String,
+        default: 'div'
+      }
+    },
+
+    render: (h, { props, data, children }) => {
+      data.staticClass = (`${name} ${data.staticClass || ''}`).trim()
+
+      if (data.attrs) {
+        const classes = []
+
+        Object.keys(data.attrs).forEach(key => {
+          const value = data.attrs[key]
+
+          if (typeof value === 'string') classes.push(key)
+          else if (value) classes.push(key)
+        })
+
+        if (classes.length) data.staticClass += ` ${classes.join(' ')}`
+        delete data.attrs
+      }
+
+      if (props.id) {
+        data.domProps = data.domProps || {}
+        data.domProps.id = props.id
+      }
+
+      return h(props.tag, data, children)
+    }
+  }
+}

package/src/components/KGrid/index.js

@@ -0,0 +1,27 @@
+import {
+  createSimpleFunctional
+} from '../../util/helpers'
+import KContent from './KContent'
+import KContainer from './KContainer'
+import KFlex from './KFlex'
+import KLayout from './KLayout'
+
+export const KSpacer = createSimpleFunctional('spacer')
+export {
+  KContainer,
+  KContent,
+  KFlex,
+  KLayout
+}
+
+const KGrid = {}
+
+KGrid.install = function install (Kdu) {
+  Kdu.component(KContent.name, KContent)
+  Kdu.component(KContainer.name, KContainer)
+  Kdu.component(KFlex.name, KFlex)
+  Kdu.component(KLayout.name, KLayout)
+  Kdu.component(KSpacer.name, KSpacer)
+}
+
+export default KGrid

package/src/components/KIcon/KIcon.js

@@ -0,0 +1,87 @@
+require('../../stylus/components/_icons.styl')
+
+import Themeable from '../../mixins/themeable'
+import Colorable from '../../mixins/colorable'
+import Contextualable from '../../mixins/contextualable'
+
+export default {
+  name: 'k-icon',
+
+  functional: true,
+
+  mixins: [Colorable, Contextualable, Themeable],
+
+  props: {
+    disabled: Boolean,
+    large: Boolean,
+    left: Boolean,
+    medium: Boolean,
+    right: Boolean,
+    xLarge: Boolean
+  },
+
+  render (h, { props, data, children = [] }) {
+    Object.keys(Contextualable.props).forEach(prop => {
+      if (props[prop]) {
+        console.warn(`Context prop '${prop}' for KIcon component has been deprecated. Use 'color' prop instead.`)
+      }
+    })
+
+    if (props.fa || props.mdi) console.warn(`The k-icon prop 'fa' and 'mdi' will be deprecated in the next release. Use 'fa' or 'mdi' prefix in icon name instead.`)
+    let iconName = ''
+    let iconType = 'material-icons'
+
+    if (children.length) {
+      iconName = children.pop().text
+    } else if (data.domProps && data.domProps.textContent) {
+      iconName = data.domProps.textContent
+      delete data.domProps.textContent
+    } else if (data.domProps && data.domProps.innerHTML) {
+      iconName = data.domProps.innerHTML
+      delete data.domProps.innerHTML
+    }
+
+    const thirdPartyIcon = iconName.indexOf('-') > -1
+    if (thirdPartyIcon) iconType = iconName.slice(0, iconName.indexOf('-'))
+
+    // To keep things backwards compatible for now
+    iconType = props.fa ? 'fa' : props.mdi ? 'mdi' : iconType
+
+    data.staticClass = (`${iconType} icon ${data.staticClass || ''}`).trim()
+    data.attrs = data.attrs || {}
+
+    const classes = Object.assign({
+      'icon--disabled': props.disabled,
+      'icon--large': props.large,
+      'icon--left': props.left,
+      'icon--medium': props.medium,
+      'icon--right': props.right,
+      'icon--x-large': props.xLarge,
+      'theme--dark': props.dark,
+      'theme--light': props.light
+    }, props.color ? Colorable.methods.addTextColorClassChecks.call(props, {}) : {
+      'primary--text': props.primary,
+      'secondary--text': props.secondary,
+      'success--text': props.success,
+      'info--text': props.info,
+      'warning--text': props.warning,
+      'error--text': props.error
+    })
+
+    const iconClasses = Object.keys(classes).filter(k => classes[k]).join(' ')
+    iconClasses && (data.staticClass += ` ${iconClasses}`)
+
+    // To keep things backwards compatible for now
+    if (props.fa || props.mdi) {
+      const comparison = props.fa ? 'fa' : 'mdi'
+
+      if (iconName.indexOf(' ') > -1) data.staticClass += ` ${comparison}-${iconName}`
+      else data.staticClass += ` ${comparison}-${iconName.split(' ').join('-')}`
+    }
+
+    if (thirdPartyIcon) data.staticClass += ` ${iconName}`
+    !(thirdPartyIcon || props.fa || props.mdi) && children.push(iconName)
+
+    return h('i', data, children)
+  }
+}

package/src/components/KIcon/index.js

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

package/src/components/KList/KList.js

@@ -0,0 +1,75 @@
+require('../../stylus/components/_lists.styl')
+
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-list',
+
+  provide () {
+    return {
+      listClick: this.listClick,
+      listClose: this.listClose
+    }
+  },
+
+  mixins: [Themeable],
+
+  data () {
+    return {
+      uid: null,
+      groups: []
+    }
+  },
+
+  props: {
+    dense: Boolean,
+    subheader: Boolean,
+    threeLine: Boolean,
+    twoLine: Boolean
+  },
+
+  computed: {
+    classes () {
+      return {
+        'list': true,
+        'list--two-line': this.twoLine,
+        'list--dense': this.dense,
+        'list--three-line': this.threeLine,
+        'list--subheader': this.subheader,
+        'theme--dark dark--bg': this.dark,
+        'theme--light light--bg': this.light
+      }
+    }
+  },
+
+  watch: {
+    uid () {
+      this.$children.filter(i => i.$options._componentTag === 'k-list-group').forEach(i => i.toggle(this.uid))
+    }
+  },
+
+  methods: {
+    listClick (uid, force) {
+      if (force) {
+        this.uid = uid
+      } else {
+        this.uid = this.uid === uid ? null : uid
+      }
+    },
+
+    listClose (uid) {
+      if (this.uid === uid) {
+        this.uid = null
+      }
+    }
+  },
+
+  render (h) {
+    const data = {
+      'class': this.classes,
+      attrs: { 'data-uid': this._uid }
+    }
+
+    return h('ul', data, [this.$slots.default])
+  }
+}

package/src/components/KList/KListGroup.js

@@ -0,0 +1,95 @@
+import { KExpandTransition } from '../transitions'
+
+import Bootable from '../../mixins/bootable'
+import Toggleable from '../../mixins/toggleable'
+
+export default {
+  name: 'k-list-group',
+
+  inject: ['listClick', 'listClose'],
+
+  mixins: [Bootable, Toggleable],
+
+  props: {
+    group: String,
+    noAction: Boolean
+  },
+
+  computed: {
+    classes () {
+      return {
+        'list--group__header': true,
+        'list--group__header--active': this.isActive,
+        'list--group__header--no-action': this.noAction
+      }
+    }
+  },
+
+  watch: {
+    isActive () {
+      this.isBooted = true
+
+      if (!this.isActive) {
+        this.listClose(this._uid)
+      }
+    },
+    $route (to) {
+      const isActive = this.matchRoute(to.path)
+
+      if (this.group) {
+        if (isActive && this.isActive !== isActive) {
+          this.listClick(this._uid)
+        }
+        this.isActive = isActive
+      }
+    }
+  },
+
+  mounted () {
+    this.isBooted = this.isActive
+
+    if (this.group) {
+      this.isActive = this.matchRoute(this.$route.path)
+    }
+
+    if (this.isActive) {
+      this.listClick(this._uid)
+    }
+  },
+
+  methods: {
+    click () {
+      if (!this.$refs.item.querySelector('.list__tile--disabled')) {
+        requestAnimationFrame(() => this.listClick(this._uid))
+      }
+    },
+    toggle (uid) {
+      this.isActive = this._uid === uid
+    },
+    matchRoute (to) {
+      if (!this.group) return false
+      return to.match(this.group) !== null
+    }
+  },
+
+  render (h) {
+    const group = h('ul', {
+      'class': 'list list--group',
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      ref: 'group'
+    }, this.showLazyContent(this.$slots.default))
+
+    const item = h('div', {
+      'class': this.classes,
+      on: Object.assign({}, { click: this.click }, this.$listeners),
+      ref: 'item'
+    }, [this.$slots.item])
+
+    const transition = h(KExpandTransition, [group])
+
+    return h('div', { 'class': 'list--group__container' }, [item, transition])
+  }
+}

package/src/components/KList/KListTile.js

@@ -0,0 +1,62 @@
+import Routable from '../../mixins/routable'
+import Toggleable from '../../mixins/toggleable'
+import Ripple from '../../directives/ripple'
+
+export default {
+  name: 'k-list-tile',
+
+  mixins: [Routable, Toggleable],
+
+  directives: {
+    Ripple
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'list__tile--active'
+    },
+    avatar: Boolean,
+    inactive: Boolean,
+    tag: String
+  },
+
+  computed: {
+    classes () {
+      return {
+        'list__tile': true,
+        'list__tile--link': this.isLink && !this.inactive,
+        'list__tile--avatar': this.avatar,
+        'list__tile--disabled': this.disabled,
+        [this.activeClass]: this.isActive
+      }
+    },
+    isLink () {
+      return this.href || this.to ||
+        (this.$listeners && (this.$listeners.click || this.$listeners['!click']))
+    }
+  },
+
+  render (h) {
+    const isRouteLink = !this.inactive && this.isLink
+    const { tag, data } = isRouteLink ? this.generateRouteLink() : {
+      tag: this.tag || 'div',
+      data: {
+        class: this.classes
+      }
+    }
+
+    data.attrs = Object.assign({}, data.attrs, this.$attrs)
+
+    return h('li', {
+      attrs: {
+        disabled: this.disabled
+      },
+      on: {
+        ...this.$listeners
+      }
+    }, [h(tag, data, this.$slots.default)])
+  }
+}

package/src/components/KList/KListTileAction.js

@@ -0,0 +1,12 @@
+export default {
+  functional: true,
+
+  name: 'k-list-tile-action',
+
+  render (h, { data, children }) {
+    data.staticClass = data.staticClass ? `list__tile__action ${data.staticClass || ''}` : 'list__tile__action'
+    if ((children || []).length > 1) data.staticClass += ' list__tile__action--stack'
+
+    return h('div', data, children)
+  }
+}

package/src/components/KList/index.js

@@ -0,0 +1,27 @@
+import { createSimpleFunctional } from '../../util/helpers'
+
+import KList from './KList'
+import KListGroup from './KListGroup'
+import KListTile from './KListTile'
+import KListTileAction from './KListTileAction'
+
+export { KList, KListGroup, KListTile, KListTileAction }
+export const KListTileActionText = createSimpleFunctional('list__tile__action-text', 'span')
+export const KListTileAvatar = createSimpleFunctional('list__tile__avatar', 'k-avatar')
+export const KListTileContent = createSimpleFunctional('list__tile__content', 'div')
+export const KListTileTitle = createSimpleFunctional('list__tile__title', 'div')
+export const KListTileSubTitle = createSimpleFunctional('list__tile__sub-title', 'div')
+
+KList.install = function install (Kdu) {
+  Kdu.component(KList.name, KList)
+  Kdu.component(KListGroup.name, KListGroup)
+  Kdu.component(KListTile.name, KListTile)
+  Kdu.component(KListTileAction.name, KListTileAction)
+  Kdu.component('k-list-tile-action-text', KListTileActionText)
+  Kdu.component('k-list-tile-avatar', KListTileAvatar)
+  Kdu.component('k-list-tile-content', KListTileContent)
+  Kdu.component('k-list-tile-sub-title', KListTileSubTitle)
+  Kdu.component('k-list-tile-title', KListTileTitle)
+}
+
+export default KList

package/src/components/KMenu/KMenu.js

@@ -0,0 +1,207 @@
+require('../../stylus/components/_menus.styl')
+
+// Mixins
+import Delayable from '../../mixins/delayable'
+import Dependent from '../../mixins/dependent'
+import Detachable from '../../mixins/detachable'
+import Menuable from '../../mixins/menuable.js'
+import Toggleable from '../../mixins/toggleable'
+
+// Component level mixins
+import Activator from './mixins/menu-activator'
+import Generators from './mixins/menu-generators'
+import Keyable from './mixins/menu-keyable'
+import Position from './mixins/menu-position'
+
+// Directives
+import ClickOutside from '../../directives/click-outside'
+import Resize from '../../directives/resize'
+
+export default {
+  name: 'k-menu',
+
+  mixins: [
+    Activator,
+    Dependent,
+    Delayable,
+    Detachable,
+    Generators,
+    Keyable,
+    Menuable,
+    Position,
+    Toggleable
+  ],
+
+  directives: {
+    ClickOutside,
+    Resize
+  },
+
+  data () {
+    return {
+      defaultOffset: 8,
+      maxHeightAutoDefault: '200px',
+      startIndex: 3,
+      stopIndex: 0,
+      hasJustFocused: false,
+      resizeTimeout: null
+    }
+  },
+
+  props: {
+    auto: Boolean,
+    closeOnClick: {
+      type: Boolean,
+      default: true
+    },
+    closeOnContentClick: {
+      type: Boolean,
+      default: true
+    },
+    disabled: Boolean,
+    fullWidth: Boolean,
+    maxHeight: { default: 'auto' },
+    offsetX: Boolean,
+    offsetY: Boolean,
+    openOnClick: {
+      type: Boolean,
+      default: true
+    },
+    openOnHover: Boolean,
+    origin: {
+      type: String,
+      default: 'top left'
+    },
+    transition: {
+      type: [Boolean, String],
+      default: 'menu-transition'
+    }
+  },
+
+  computed: {
+    calculatedLeft () {
+      let left = this.calcLeft
+      if (this.auto) left = this.calcLeftAuto
+
+      return `${this.calcXOverflow(left())}px`
+    },
+    calculatedMaxHeight () {
+      return this.auto
+        ? '200px'
+        : isNaN(this.maxHeight)
+          ? this.maxHeight
+          : `${this.maxHeight}px`
+    },
+    calculatedMaxWidth () {
+      return isNaN(this.maxWidth)
+        ? this.maxWidth
+        : `${this.maxWidth}px`
+    },
+    calculatedMinWidth () {
+      if (this.minWidth) {
+        return isNaN(this.minWidth)
+          ? this.minWidth
+          : `${this.minWidth}px`
+      }
+
+      const minWidth = (
+        this.dimensions.activator.width +
+        this.nudgeWidth +
+        (this.auto ? 16 : 0)
+      )
+
+      const calculatedMaxWidth = isNaN(parseInt(this.calculatedMaxWidth))
+        ? minWidth
+        : parseInt(this.calculatedMaxWidth)
+
+      return `${Math.min(
+        calculatedMaxWidth,
+        minWidth
+      )}px`
+    },
+    calculatedTop () {
+      const top = this.auto ? this.calcTopAuto : this.calcTop
+
+      return `${this.calcYOverflow(top())}px`
+    },
+    styles () {
+      return {
+        maxHeight: this.calculatedMaxHeight,
+        minWidth: this.calculatedMinWidth,
+        maxWidth: this.calculatedMaxWidth,
+        top: this.calculatedTop,
+        left: this.calculatedLeft,
+        transformOrigin: this.origin,
+        zIndex: this.zIndex || this.activeZIndex
+      }
+    }
+  },
+
+  watch: {
+    activator (newActivator, oldActivator) {
+      this.removeActivatorEvents(oldActivator)
+      this.addActivatorEvents(newActivator)
+    },
+    isContentActive (val) {
+      this.hasJustFocused = val
+    }
+  },
+
+  methods: {
+    activate () {
+      // This exists primarily for k-select
+      // helps determine which tiles to activate
+      this.getTiles()
+      // Update coordinates and dimensions of menu
+      // and its activator
+      this.updateDimensions()
+      // Start the transition
+      requestAnimationFrame(this.startTransition)
+      // Once transitioning, calculate scroll position
+      setTimeout(this.calculateScroll, 50)
+    },
+    onResize () {
+      if (!this.isActive) return
+
+      // Account for screen resize
+      // and orientation change
+      this.$refs.content.offsetWidth
+      this.updateDimensions()
+
+      // When resizing to a smaller width
+      // content width is evaluated before
+      // the new activator width has been
+      // set, causing it to not size properly
+      // hacky but will revisit in the future
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(this.updateDimensions, 100)
+    }
+  },
+
+  render (h) {
+    const data = {
+      staticClass: 'menu',
+      class: {
+        'menu--disabled': this.disabled
+      },
+      style: {
+        display: this.fullWidth ? 'block' : 'inline-block'
+      },
+      directives: [{
+        name: 'resize',
+        value: {
+          debounce: 500,
+          value: this.onResize
+        }
+      }],
+      on: {
+        keydown: this.changeListIndex
+      }
+    }
+
+    return h('div', data, [
+      this.genActivator(),
+      this.genTransition()
+    ])
+  }
+}

package/src/components/KMenu/index.js

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