kdutify 0.16.9-rc.0

package/src/mixins/overlayable.js

@@ -0,0 +1,180 @@
+require('../stylus/components/_overlay.styl')
+
+export default {
+  data () {
+    return {
+      overlay: null,
+      overlayOffset: 0,
+      overlayTimeout: null,
+      overlayTransitionDuration: 500 + 150 // transition + delay
+    }
+  },
+
+  props: {
+    hideOverlay: Boolean
+  },
+
+  beforeDestroy () {
+    this.removeOverlay()
+  },
+
+  methods: {
+    genOverlay () {
+      // If fn is called and timeout is active
+      // or overlay already exists
+      // cancel removal of overlay and re-add active
+      if ((!this.isActive || this.hideOverlay) ||
+        (this.isActive && this.overlayTimeout) ||
+        this.overlay
+      ) {
+        clearTimeout(this.overlayTimeout)
+
+        return this.overlay &&
+          this.overlay.classList.add('overlay--active')
+      }
+
+      this.overlay = document.createElement('div')
+      this.overlay.className = 'overlay'
+
+      if (this.absolute) this.overlay.className += ' overlay--absolute'
+
+      this.hideScroll()
+
+      const parent = this.absolute
+        ? this.$el.parentNode
+        : document.querySelector('[data-app]')
+
+      parent.insertBefore(this.overlay, parent.firstChild)
+
+      this.overlay.clientHeight // Force repaint
+      requestAnimationFrame(() => {
+        this.overlay.className += ' overlay--active'
+
+        if (this.activeZIndex !== undefined) {
+          this.overlay.style.zIndex = this.activeZIndex - 1
+        }
+      })
+
+      return true
+    },
+    removeOverlay () {
+      if (!this.overlay) {
+        return this.showScroll()
+      }
+
+      this.overlay.classList.remove('overlay--active')
+
+      this.overlayTimeout = setTimeout(() => {
+        // IE11 Fix
+        try {
+          this.overlay.parentNode.removeChild(this.overlay)
+          this.overlay = null
+          this.showScroll()
+        } catch (e) {}
+
+        clearTimeout(this.overlayTimeout)
+        this.overlayTimeout = null
+      }, this.overlayTransitionDuration)
+    },
+    /**
+     * @param {Event} e
+     * @returns void
+     */
+    scrollListener (e) {
+      if (e.type === 'keydown') {
+        const up = [38, 33]
+        const down = [40, 34]
+
+        if (up.includes(e.keyCode)) {
+          e.deltaY = -1
+        } else if (down.includes(e.keyCode)) {
+          e.deltaY = 1
+        } else {
+          return
+        }
+      }
+
+      if (e.target === this.overlay ||
+        (e.type !== 'keydown' && e.target === document.body) ||
+        this.checkPath(e)) e.preventDefault()
+    },
+    hasScrollbar (el) {
+      const style = window.getComputedStyle(el)
+      return ['auto', 'scroll'].includes(style['overflow-y']) && el.scrollHeight > el.clientHeight
+    },
+    shouldScroll (el, delta) {
+      if (el.scrollTop === 0 && delta < 0) return true
+      return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0
+    },
+    isInside (el, parent) {
+      if (el === parent) {
+        return true
+      } else if (el === null || el === document.body) {
+        return false
+      } else {
+        return this.isInside(el.parentNode, parent)
+      }
+    },
+    /**
+     * @param {Event} e
+     * @returns boolean
+     */
+    checkPath (e) {
+      const path = e.path || this.composedPath(e)
+      const delta = e.deltaY || -e.wheelDelta
+
+      if (e.type === 'keydown' && path[0] === document.body) {
+        const dialog = this.$refs.dialog
+        const selected = window.getSelection().anchorNode
+        if (this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
+          return this.shouldScroll(dialog, delta)
+        }
+        return true
+      }
+
+      for (const el of path) {
+        if ([document, document.documentElement, this.$refs.content].includes(el)) return true
+        if (this.hasScrollbar(el)) return this.shouldScroll(el, delta)
+      }
+
+      return true
+    },
+    /**
+     * Polyfill for Event.prototype.composedPath
+     * @param {Event} e
+     * @returns Element[]
+     */
+    composedPath (e) {
+      if (e.composedPath) return e.composedPath()
+
+      const path = []
+      let el = e.target
+
+      while (el) {
+        path.push(el)
+
+        if (el.tagName === 'HTML') {
+          path.push(document)
+          path.push(window)
+
+          return path
+        }
+
+        el = el.parentElement
+      }
+    },
+    hideScroll () {
+      if (this.$kdutify.breakpoint.mdAndDown) {
+        document.documentElement.classList.add('overflow-y-hidden')
+      } else {
+        window.addEventListener('wheel', this.scrollListener)
+        window.addEventListener('keydown', this.scrollListener)
+      }
+    },
+    showScroll () {
+      document.documentElement.classList.remove('overflow-y-hidden')
+      window.removeEventListener('wheel', this.scrollListener)
+      window.removeEventListener('keydown', this.scrollListener)
+    }
+  }
+}

package/src/mixins/picker.js

@@ -0,0 +1,35 @@
+import Themeable from './themeable'
+
+export default {
+  mixins: [Themeable],
+
+  data () {
+    return {
+      isSaving: false
+    }
+  },
+
+  props: {
+    actions: Boolean,
+    autosave: Boolean,
+    landscape: Boolean,
+    noTitle: Boolean,
+    scrollable: Boolean,
+    value: {
+      required: true
+    },
+    light: Boolean,
+    dark: Boolean
+  },
+
+  methods: {
+    save () {},
+    cancel () {},
+    genSlot () {
+      return this.$scopedSlots.default({
+        save: this.save,
+        cancel: this.cancel
+      })
+    }
+  }
+}

package/src/mixins/positionable.js

@@ -0,0 +1,10 @@
+export default {
+  props: {
+    absolute: Boolean,
+    bottom: Boolean,
+    fixed: Boolean,
+    left: Boolean,
+    right: Boolean,
+    top: Boolean
+  }
+}

package/src/mixins/rippleable.js

@@ -0,0 +1,21 @@
+import Ripple from '../directives/ripple'
+
+/** @mixin */
+export default {
+  directives: { Ripple },
+
+  methods: {
+    genRipple () {
+      return this.$createElement('div', {
+        'class': this.rippleClasses || 'input-group--selection-controls__ripple',
+        on: Object.assign({}, {
+          click: this.toggle
+        }, this.$listeners),
+        directives: [{
+          name: 'ripple',
+          value: !this.disabled && { center: true }
+        }]
+      })
+    }
+  }
+}

package/src/mixins/routable.js

@@ -0,0 +1,66 @@
+import Ripple from '../directives/ripple'
+
+export default {
+  directives: {
+    Ripple
+  },
+
+  props: {
+    activeClass: String,
+    append: Boolean,
+    disabled: Boolean,
+    exact: Boolean,
+    href: [String, Object],
+    to: [String, Object],
+    nuxt: Boolean,
+    replace: Boolean,
+    ripple: Boolean,
+    tag: String,
+    target: String
+  },
+
+  methods: {
+    click () {},
+    generateRouteLink () {
+      let exact = this.exact
+      let tag
+
+      const data = {
+        attrs: { disabled: this.disabled },
+        class: this.classes,
+        props: {},
+        directives: [{
+          name: 'ripple',
+          value: this.ripple || false
+        }],
+        on: {
+          ...(this.$listeners || {}),
+          click: this.click
+        }
+      }
+
+      if (typeof this.exact === 'undefined') {
+        exact = this.to === '/' ||
+          (this.to === Object(this.to) && this.to.path === '/')
+      }
+
+      if (this.to) {
+        tag = this.nuxt ? 'nuxt-link' : 'router-link'
+        data.props.to = this.to
+        data.props.exact = exact
+        data.props.activeClass = this.activeClass
+        data.props.append = this.append
+        data.props.replace = this.replace
+      } else {
+        tag = this.href && 'a' || this.tag || 'a'
+
+        if (tag === 'a') {
+          data.attrs.href = this.href || 'javascript:;'
+          if (this.target) data.attrs.target = this.target
+        }
+      }
+
+      return { tag, data }
+    }
+  }
+}

package/src/mixins/selectable.js

@@ -0,0 +1,84 @@
+import Colorable from './colorable'
+import Input from './input'
+
+export default {
+  mixins: [Input, Colorable],
+
+  model: {
+    prop: 'inputValue',
+    event: 'change'
+  },
+
+  props: {
+    id: String,
+    inputValue: null,
+    falseValue: null,
+    trueValue: null
+  },
+
+  computed: {
+    isActive () {
+      if ((Array.isArray(this.inputValue))
+      ) {
+        return this.inputValue.indexOf(this.value) !== -1
+      }
+
+      if (!this.trueValue || !this.falseValue) {
+        return this.value
+          ? this.value === this.inputValue
+          : Boolean(this.inputValue)
+      }
+
+      return this.inputValue === this.trueValue
+    },
+    isDirty () {
+      return this.isActive
+    }
+  },
+
+  watch: {
+    indeterminate (val) {
+      this.inputIndeterminate = val
+    }
+  },
+
+  methods: {
+    genLabel () {
+      return this.$createElement('label', {
+        on: { click: this.toggle },
+        attrs: {
+          for: this.id
+        }
+      }, this.$slots.label || this.label)
+    },
+    toggle () {
+      if (this.disabled) {
+        return
+      }
+
+      let input = this.inputValue
+      if (Array.isArray(input)) {
+        input = input.slice()
+        const i = input.indexOf(this.value)
+
+        if (i === -1) {
+          input.push(this.value)
+        } else {
+          input.splice(i, 1)
+        }
+      } else if (this.trueValue || this.falseValue) {
+        input = input === this.trueValue ? this.falseValue : this.trueValue
+      } else if (this.value) {
+        input = this.value === this.inputValue
+          ? null
+          : this.value
+      } else {
+        input = !input
+      }
+
+      this.validate(true, input)
+
+      this.$emit('change', input)
+    }
+  }
+}

package/src/mixins/stackable.js

@@ -0,0 +1,44 @@
+import { getZIndex } from '../util/helpers'
+
+export default {
+  data () {
+    return {
+      stackBase: null,
+      stackClass: 'unpecified',
+      stackElement: null,
+      stackExclude: null,
+      stackMinZIndex: 0
+    }
+  },
+  computed: {
+    activeZIndex () {
+      const content = this.stackElement || this.$refs.content
+      // Return current zindex if not active
+      if (!this.isActive) return getZIndex(content)
+
+      // Return max current z-index (excluding self) + 2
+      // (2 to leave room for an overlay below, if needed)
+      return this.getMaxZIndex(this.stackExclude || [content]) + 2
+    }
+  },
+  methods: {
+    getMaxZIndex (exclude = []) {
+      const base = this.stackBase || this.$el
+      // Start with lowest allowed z-index or z-index of
+      // base component's element, whichever is greater
+      const zis = [this.stackMinZIndex, getZIndex(base)]
+      // Convert the NodeList to an array to
+      // prevent an Edge bug with Symbol.iterator
+      const activeElements = [...document.getElementsByClassName(this.stackClass)]
+
+      // Get z-index for all active dialogs
+      for (const activeElement of activeElements) {
+        if (!exclude.includes(activeElement)) {
+          zis.push(getZIndex(activeElement))
+        }
+      }
+
+      return Math.max(...zis)
+    }
+  }
+}

package/src/mixins/tab-focusable.js

@@ -0,0 +1,7 @@
+export default {
+  data () {
+    return {
+      tabFocused: false
+    }
+  }
+}

package/src/mixins/themeable.js

@@ -0,0 +1,15 @@
+export default {
+  props: {
+    dark: Boolean,
+    light: Boolean
+  },
+
+  computed: {
+    themeClasses () {
+      return {
+        'theme--light': this.light,
+        'theme--dark': this.dark
+      }
+    }
+  }
+}

package/src/mixins/toggleable.js

@@ -0,0 +1,28 @@
+export function factory (prop = 'value', event = 'input') {
+  return {
+    model: { prop, event },
+
+    props: {
+      [prop]: { required: false }
+    },
+
+    data () {
+      return {
+        isActive: !!this[prop]
+      }
+    },
+
+    watch: {
+      [prop] (val) {
+        this.isActive = !!val
+      },
+      isActive (val) {
+        !!val !== this[prop] && this.$emit(event, val)
+      }
+    }
+  }
+}
+
+const Toggleable = factory()
+
+export default Toggleable

package/src/mixins/transitionable.js

@@ -0,0 +1,7 @@
+export default {
+  props: {
+    mode: String,
+    origin: String,
+    transition: String
+  }
+}

package/src/mixins/translatable.js

@@ -0,0 +1,67 @@
+export default {
+  data () {
+    return {
+      parallax: null,
+      parallaxDist: null,
+      percentScrolled: null,
+      scrollTop: null,
+      windowHeight: null,
+      windowBottom: null
+    }
+  },
+
+  computed: {
+    normalizedHeight () {
+      if (this.jumbotron) {
+        return isNaN(this.height) ? this.height : `${this.height}px`
+      }
+
+      return Number(this.height.toString().replace(/(^[0-9]*$)/, '$1'))
+    },
+
+    imgHeight () {
+      return this.objHeight()
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(this.init)
+  },
+
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.translate, false)
+    window.removeEventListener('resize', this.translate, false)
+  },
+
+  methods: {
+    listeners () {
+      window.addEventListener('scroll', this.translate, false)
+      window.addEventListener('resize', this.translate, false)
+    },
+
+    translate () {
+      this.calcDimensions()
+
+      this.percentScrolled = (
+        (this.windowBottom - this.elOffsetTop) /
+        (this.normalizedHeight + this.windowHeight)
+      )
+
+      this.parallax = Math.round(this.parallaxDist * this.percentScrolled)
+
+      if (this.translated) {
+        this.translated()
+      }
+    },
+
+    calcDimensions () {
+      const offset = this.$el.getBoundingClientRect()
+
+      this.scrollTop = window.pageYOffset
+      this.parallaxDist = this.imgHeight - this.normalizedHeight
+      this.elOffsetTop = offset.top + this.scrollTop
+      this.windowHeight = window.innerHeight
+      this.windowBottom = this.scrollTop + this.windowHeight
+    }
+  }
+}

package/src/mixins/validatable.js

@@ -0,0 +1,124 @@
+export default {
+  data () {
+    return {
+      errorBucket: [],
+      hasFocused: false,
+      hasInput: false,
+      shouldValidate: false,
+      valid: false
+    }
+  },
+
+  props: {
+    error: {
+      type: Boolean
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: () => []
+    },
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    validateOnBlur: Boolean
+  },
+
+  computed: {
+    validations () {
+      if (!Array.isArray(this.errorMessages)) {
+        return [this.errorMessages]
+      } else if (this.errorMessages.length > 0) {
+        return this.errorMessages
+      } else if (this.shouldValidate) {
+        return this.errorBucket
+      } else {
+        return []
+      }
+    },
+    hasError () {
+      return this.validations.length > 0 ||
+        this.errorMessages.length > 0 ||
+        this.error
+    }
+  },
+
+  watch: {
+    rules: {
+      handler (newVal, oldVal) {
+        // TODO: This handler seems to trigger when input changes, even though
+        // rules array stays the same? Solved it like this for now
+        if (newVal.length === oldVal.length) return
+
+        this.validate()
+      },
+      deep: true
+    },
+    inputValue (val) {
+      // If it's the first time we're setting input,
+      // mark it with hasInput
+      if (!!val && !this.hasInput) this.hasInput = true
+
+      if (this.hasInput && !this.validateOnBlur) this.shouldValidate = true
+    },
+    isFocused (val) {
+      // If we're not focused, and it's the first time
+      // we're defocusing, set shouldValidate to true
+      if (!val && !this.hasFocused) {
+        this.hasFocused = true
+        this.shouldValidate = true
+
+        this.$emit('update:error', this.errorBucket.length > 0)
+      }
+    },
+    hasError (val) {
+      if (this.shouldValidate) {
+        this.$emit('update:error', val)
+      }
+    },
+    error (val) {
+      this.shouldValidate = !!val
+    }
+  },
+
+  mounted () {
+    this.shouldValidate = !!this.error
+    this.validate()
+  },
+
+  methods: {
+    reset () {
+      // TODO: Do this another way!
+      // This is so that we can reset all types of inputs
+      this.$emit('input', this.isMultiple ? [] : null)
+      this.$emit('change', null)
+
+      this.$nextTick(() => {
+        this.shouldValidate = false
+        this.hasFocused = false
+        this.validate()
+      })
+    },
+    validate (force = false, value = this.inputValue) {
+      if (force) this.shouldValidate = true
+
+      this.errorBucket = []
+
+      this.rules.forEach(rule => {
+        const valid = typeof rule === 'function' ? rule(value) : rule
+
+        if (valid !== true && !['string', 'boolean'].includes(typeof valid)) {
+          throw new TypeError(`Rules should return a string or boolean, received '${typeof valid}' instead`)
+        }
+
+        if (valid !== true) {
+          this.errorBucket.push(valid)
+        }
+      })
+
+      this.valid = this.errorBucket.length === 0
+
+      return this.valid
+    }
+  }
+}

package/src/stylus/app.styl

@@ -0,0 +1,6 @@
+@require './settings/*'
+@require './generic/*'
+@require './elements/*'
+@require './tools/*'
+@require './trumps/*'
+@require './components/_tooltips.styl'

package/src/stylus/bootstrap.styl

@@ -0,0 +1 @@
+@import './settings/*'