kdutify 0.16.9-rc.0

package/src/components/KDatePicker/mixins/month-table.js

@@ -0,0 +1,82 @@
+export default {
+  methods: {
+    monthWheelScroll (e) {
+      e.preventDefault()
+
+      let year = this.tableYear
+
+      if (e.deltaY < 0) year++
+      else year--
+
+      this.tableDate = this.normalizeDate(year)
+    },
+    monthClick (month) {
+      this.inputDate = this.normalizeDate(this.tableYear, month, this.day)
+      if (this.type === 'date') {
+        this.activePicker = 'DATE'
+      } else {
+        this.$nextTick(() => (this.autosave && this.save()))
+      }
+    },
+    monthGenTD (month) {
+      const date = this.normalizeDate(this.tableYear, month)
+      let monthName
+
+      if (typeof this.monthFormat === 'function') {
+        monthName = this.monthFormat(date)
+      } else if (this.supportsLocaleFormat) {
+        monthName = date.toLocaleDateString(this.locale, Object.assign(this.monthFormat, {
+          timeZone: this.timeZone
+        }))
+      } else {
+        monthName = date.getMonth() + 1
+        if (monthName < 10) {
+          monthName = `0${monthName}`
+        }
+      }
+
+      return this.$createElement('td', [
+        this.$createElement('button', {
+          'class': {
+            'btn btn--date-picker': true,
+            'btn--raised': this.monthIsActive(month),
+            'btn--flat': true,
+            'btn--active': this.monthIsActive(month),
+            'btn--outline': this.monthIsCurrent(month) && !this.monthIsActive(month),
+            'btn--disabled': this.type === 'month' && !this.isAllowed(date)
+          },
+          attrs: {
+            type: 'button'
+          },
+          domProps: {
+            innerHTML: `<span class="btn__content">${monthName}</span>`
+          },
+          on: {
+            click: () => this.monthClick(month)
+          }
+        })
+      ])
+    },
+    monthGenTBody () {
+      const children = []
+      const cols = Array(3).fill(null)
+      const rows = 12 / cols.length
+
+      for (let row = 0; row < rows; row++) {
+        children.push(this.$createElement('tr', cols.map((_, col) => {
+          return this.monthGenTD(row * cols.length + col)
+        })))
+      }
+
+      return this.$createElement('tbody', children)
+    },
+    monthIsActive (i) {
+      return this.tableYear === this.year &&
+        this.month === i
+    },
+    monthIsCurrent (i) {
+      return this.currentYear === this.tableYear &&
+        this.currentMonth === i
+    }
+  }
+}

package/src/components/KDialog/KDialog.js

@@ -0,0 +1,184 @@
+require('../../stylus/components/_dialogs.styl')
+
+// Mixins
+import Dependent from '../../mixins/dependent'
+import Detachable from '../../mixins/detachable'
+import Overlayable from '../../mixins/overlayable'
+import Stackable from '../../mixins/stackable'
+import Toggleable from '../../mixins/toggleable'
+
+// Directives
+import ClickOutside from '../../directives/click-outside'
+
+// Helpers
+import { getZIndex } from '../../util/helpers'
+
+export default {
+  name: 'k-dialog',
+
+  mixins: [Dependent, Detachable, Overlayable, Stackable, Toggleable],
+
+  directives: {
+    ClickOutside
+  },
+
+  data () {
+    return {
+      isDependent: false,
+      stackClass: 'dialog__content__active',
+      stackMinZIndex: 200
+    }
+  },
+
+  props: {
+    disabled: Boolean,
+    persistent: Boolean,
+    fullscreen: Boolean,
+    fullWidth: Boolean,
+    maxWidth: {
+      type: [String, Number],
+      default: 290
+    },
+    origin: {
+      type: String,
+      default: 'center center'
+    },
+    width: [String, Number],
+    scrollable: Boolean,
+    transition: {
+      type: [String, Boolean],
+      default: 'dialog-transition'
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        [(`dialog ${this.contentClass}`).trim()]: true,
+        'dialog--active': this.isActive,
+        'dialog--persistent': this.persistent,
+        'dialog--fullscreen': this.fullscreen,
+        'dialog--stacked-actions': this.stackedActions && !this.fullscreen,
+        'dialog--scrollable': this.scrollable
+      }
+    },
+    contentClasses () {
+      return {
+        'dialog__content': true,
+        'dialog__content__active': this.isActive
+      }
+    }
+  },
+
+  watch: {
+    isActive (val) {
+      if (val) {
+        this.show()
+      } else {
+        this.removeOverlay()
+        this.unbind()
+      }
+    }
+  },
+
+  mounted () {
+    this.isBooted = this.isActive
+    this.$kdutify.load(this.init)
+  },
+
+  beforeDestroy () {
+    if (typeof window !== 'undefined') this.unbind()
+  },
+
+  methods: {
+    closeConditional (e) {
+      // close dialog if !persistent, clicked outside and we're the topmost dialog.
+      // Since this should only be called in a capture event (bottom up), we shouldn't need to stop propagation
+      return !this.persistent && getZIndex(this.$refs.content) >= this.getMaxZIndex()
+    },
+    init () {
+      this.isActive && this.show()
+    },
+    show () {
+      !this.fullscreen && !this.hideOverlay && this.genOverlay()
+      this.fullscreen && this.hideScroll()
+      this.$refs.content.focus()
+      this.$listeners.keydown && this.bind()
+    },
+    bind () {
+      window.addEventListener('keydown', this.onKeydown)
+    },
+    unbind () {
+      window.removeEventListener('keydown', this.onKeydown)
+    },
+    onKeydown (e) {
+      this.$emit('keydown', e)
+    }
+  },
+
+  render (h) {
+    const children = []
+    const data = {
+      'class': this.classes,
+      ref: 'dialog',
+      directives: [
+        {
+          name: 'click-outside',
+          value: {
+            callback: this.closeConditional,
+            include: this.getOpenDependentElements
+          }
+        },
+        { name: 'show', value: this.isActive }
+      ],
+      on: { click: e => e.stopPropagation() }
+    }
+
+    if (!this.fullscreen) {
+      let width = this.maxWidth
+
+      if (this.width) {
+        console.log('The {width} property is being deprecated, please use {max-width}.')
+        // TODO: Deprecate
+        width = this.width
+      }
+
+      data.style = {
+        maxWidth: isNaN(width) ? width : `${width}px`
+      }
+    }
+
+    if (this.$slots.activator) {
+      children.push(h('div', {
+        'class': 'dialog__activator',
+        on: {
+          click: e => {
+            if (!this.disabled) this.isActive = !this.isActive
+          }
+        }
+      }, [this.$slots.activator]))
+    }
+
+    const dialog = h('transition', {
+      props: {
+        name: this.transition || '', // If false, show nothing
+        origin: this.origin
+      }
+    }, [h('div', data,
+      this.showLazyContent(this.$slots.default)
+    )])
+
+    children.push(h('div', {
+      'class': this.contentClasses,
+      style: { zIndex: this.activeZIndex },
+      ref: 'content'
+    }, [dialog]))
+
+    return h('div', {
+      'class': 'dialog__container',
+      style: {
+        display: !this.$slots.activator && 'none' || this.fullWidth ? 'block' : 'inline-block'
+      }
+    }, children)
+  }
+}

package/src/components/KDialog/index.js

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

package/src/components/KDivider/KDivider.js

@@ -0,0 +1,25 @@
+require('../../stylus/components/_dividers.styl')
+
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-divider',
+
+  functional: true,
+
+  mixins: [Themeable],
+
+  props: {
+    inset: Boolean
+  },
+
+  render (h, { props, data, children }) {
+    data.staticClass = (`divider ${data.staticClass || ''}`).trim()
+
+    if (props.inset) data.staticClass += ' divider--inset'
+    if (props.light) data.staticClass += ' theme--light'
+    if (props.dark) data.staticClass += ' theme--dark'
+
+    return h('hr', data)
+  }
+}

package/src/components/KDivider/index.js

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

package/src/components/KExpansionPanel/KExpansionPanel.js

@@ -0,0 +1,55 @@
+require('../../stylus/components/_expansion-panel.styl')
+
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-expansion-panel',
+
+  mixins: [Themeable],
+
+  provide () {
+    return {
+      panelClick: this.panelClick,
+      focusable: this.focusable
+    }
+  },
+
+  props: {
+    expand: Boolean,
+    focusable: Boolean,
+    inset: Boolean,
+    popout: Boolean
+  },
+
+  methods: {
+    getChildren () {
+      return this.$children.filter(c => {
+        if (!c.$options) return
+
+        return c.$options._componentTag === 'k-expansion-panel-content'
+      })
+    },
+    panelClick (uid) {
+      if (!this.expand) {
+        return this.getChildren()
+          .forEach(e => e.toggle(uid))
+      }
+
+      const panel = this.$children.find(e => e._uid === uid)
+
+      panel && panel.toggle(uid)
+    }
+  },
+
+  render (h) {
+    return h('ul', {
+      staticClass: 'expansion-panel',
+      'class': {
+        'expansion-panel--focusable': this.focusable,
+        'expansion-panel--popout': this.popout,
+        'expansion-panel--inset': this.inset,
+        ...this.themeClasses
+      }
+    }, this.$slots.default)
+  }
+}

package/src/components/KExpansionPanel/KExpansionPanelContent.js

@@ -0,0 +1,112 @@
+import { KExpandTransition } from '../transitions'
+
+import Bootable from '../../mixins/bootable'
+import Toggleable from '../../mixins/toggleable'
+
+import KIcon from '../KIcon'
+
+import Ripple from '../../directives/ripple'
+import ClickOutside from '../../directives/click-outside'
+
+export default {
+  name: 'k-expansion-panel-content',
+
+  mixins: [Bootable, Toggleable],
+
+  components: {
+    KIcon
+  },
+
+  directives: {
+    Ripple,
+    ClickOutside
+  },
+
+  inject: ['focusable', 'panelClick'],
+
+  data () {
+    return {
+      height: 'auto'
+    }
+  },
+
+  props: {
+    hideActions: Boolean,
+    ripple: Boolean
+  },
+
+  methods: {
+    genBody () {
+      return this.$createElement('div', {
+        ref: 'body',
+        class: 'expansion-panel__body',
+        directives: [
+          {
+            name: 'show',
+            value: this.isActive
+          }
+        ]
+      }, this.showLazyContent(this.$slots.default))
+    },
+    genHeader () {
+      return this.$createElement('div', {
+        staticClass: 'expansion-panel__header',
+        directives: [{
+          name: 'ripple',
+          value: this.ripple
+        }],
+        on: {
+          click: () => this.panelClick(this._uid)
+        }
+      }, [
+        this.$slots.header,
+        this.genIcon()
+      ])
+    },
+    genIcon (h) {
+      if (this.hideActions) return null
+
+      const icon = this.$slots.actions ||
+        this.$createElement('k-icon', 'keyboard_arrow_down')
+
+      return this.$createElement('div', {
+        staticClass: 'header__icon'
+      }, [icon])
+    },
+    toggle (uid) {
+      const isActive = this._uid === uid && !this.isActive
+
+      if (isActive) this.isBooted = true
+
+      // We treat bootable differently
+      // Needs time to calc height
+      this.$nextTick(() => (this.isActive = isActive))
+    }
+  },
+
+  render (h) {
+    const children = []
+
+    this.$slots.header && children.push(this.genHeader())
+    children.push(h(KExpandTransition, [this.genBody()]))
+
+    return h('li', {
+      staticClass: 'expansion-panel__container',
+      'class': {
+        'expansion-panel__container--active': this.isActive
+      },
+      attrs: {
+        tabindex: 0
+      },
+      on: {
+        keydown: e => {
+          // Ensure element is focusable and the activeElement
+          if (this.focusable &&
+            this.$el === document.activeElement &&
+            e.keyCode === 13
+          ) this.panelClick(this._uid)
+        }
+      }
+    }, children)
+  }
+}

package/src/components/KExpansionPanel/index.js

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

package/src/components/KFooter/KFooter.js

@@ -0,0 +1,67 @@
+require('../../stylus/components/_footer.styl')
+
+import Applicationable from '../../mixins/applicationable'
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-footer',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  props: {
+    absolute: Boolean,
+    fixed: Boolean
+  },
+
+  computed: {
+    paddingLeft () {
+      return this.fixed || !this.app
+        ? 0
+        : this.$kdutify.application.left
+    },
+    paddingRight () {
+      return this.fixed || !this.app
+        ? 0
+        : this.$kdutify.application.right
+    }
+  },
+
+  destroyed () {
+    if (this.app) this.$kdutify.application.bottom = 0
+  },
+
+  methods: {
+    updateApplication () {
+      if (!this.app) return
+
+      this.$kdutify.application.bottom = this.fixed
+        ? this.$el && this.$el.clientHeight
+        : 0
+    }
+  },
+
+  mounted () {
+    this.updateApplication()
+  },
+
+  render (h) {
+    this.updateApplication()
+
+    const data = {
+      staticClass: 'footer',
+      'class': this.addBackgroundColorClassChecks({
+        'footer--absolute': this.absolute,
+        'footer--fixed': this.fixed,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }),
+      style: {
+        paddingLeft: `${this.paddingLeft}px`,
+        paddingRight: `${this.paddingRight}px`
+      }
+    }
+
+    return h('footer', data, this.$slots.default)
+  }
+}

package/src/components/KFooter/index.js

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

package/src/components/KForm/KForm.js

@@ -0,0 +1,117 @@
+export default {
+  name: 'k-form',
+
+  inheritAttrs: false,
+
+  data () {
+    return {
+      inputs: [],
+      errorBag: {}
+    }
+  },
+
+  props: {
+    value: Boolean,
+    lazyValidation: Boolean
+  },
+
+  watch: {
+    errorBag: {
+      handler () {
+        const errors = Object.values(this.errorBag).includes(true)
+
+        this.$emit('input', !errors)
+
+        return !errors
+      },
+      deep: true
+    }
+  },
+
+  methods: {
+    getInputs () {
+      const results = []
+
+      const search = (children, depth = 0) => {
+        for (const child of children) {
+          if (child.errorBucket !== undefined) {
+            results.push(child)
+          } else {
+            search(child.$children, depth + 1)
+          }
+        }
+        if (depth === 0) return results
+      }
+
+      return search(this.$children)
+    },
+    watchInputs (inputs = this.getInputs()) {
+      for (const child of inputs) {
+        if (this.inputs.includes(child)) {
+          continue // We already know about this input
+        }
+
+        this.inputs.push(child)
+        this.watchChild(child)
+      }
+    },
+    watchChild (child) {
+      const watcher = (child) => {
+        child.$watch('valid', (val) => {
+          this.$set(this.errorBag, child._uid, !val)
+        }, { immediate: true })
+      }
+
+      if (!this.lazyValidation) return watcher(child)
+
+      // Only start watching inputs if we need to
+      child.$watch('shouldValidate', (val) => {
+        if (!val) return
+
+        // Only watch if we're not already doing it
+        if (this.errorBag.hasOwnProperty(child._uid)) return
+
+        watcher(child)
+      })
+    },
+    validate () {
+      const errors = this.inputs.filter(input => !input.validate(true)).length
+      return !errors
+    },
+    reset () {
+      this.inputs.forEach((input) => input.reset())
+      if (this.lazyValidation) {
+        Object.keys(this.errorBag).forEach(key => this.$delete(this.errorBag, key))
+      }
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(() => this.watchInputs())
+  },
+
+  updated () {
+    const inputs = this.getInputs()
+
+    if (inputs.length < this.inputs.length) {
+      // Something was removed, we don't want it in the errorBag any more
+      const removed = this.inputs.filter(i => !inputs.includes(i))
+
+      for (const input of removed) {
+        this.$delete(this.errorBag, input._uid)
+        this.$delete(this.inputs, this.inputs.indexOf(input))
+      }
+    }
+
+    this.watchInputs(inputs)
+  },
+
+  render (h) {
+    return h('form', {
+      attrs: this.$attrs,
+      on: {
+        submit: e => this.$emit('submit', e)
+      }
+    }, this.$slots.default)
+  }
+}

package/src/components/KForm/index.js

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

package/src/components/KGrid/KContainer.js

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