kdutify 0.16.9-rc.0 → 2.6.1

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

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

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

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

package/src/components/KDivider/KDivider.js

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

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

package/src/components/KExpansionPanel/KExpansionPanel.js

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

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

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

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

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

package/src/components/KForm/KForm.js

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

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

package/src/components/KGrid/KContainer.js

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