kdutify 0.16.9-rc.0

package/src/directives/click-outside.js

@@ -0,0 +1,72 @@
+function directive (e, el, binding, v) {
+  // The include element callbacks below can be expensive
+  // so we should avoid calling them when we're not active.
+  // Explicitly check for false to allow fallback compatibility
+  // with non-toggleable components
+  if (!e || v.context.isActive === false) return
+
+  // Get value passed to directive
+  const val = binding.value || (() => true)
+  // Check if callback was passed in object or as the value
+  const cb = val.callback || val
+  // Check if additional elements were passed to be included in check
+  // (click must be outside all included elements, if any)
+  const elements = (val.include || (() => []))()
+  // Add the root element for the component this directive was defined on
+  elements.push(el)
+
+  // Check if it's a click outside our elements, and then if our callback returns true.
+  // Non-toggleable components should take action in their callback and return falsy.
+  // Toggleable can return true if it wants to deactivate.
+  // Note that, because we're in the capture phase, this callback will occure before
+  // the bubbling click event on any outside elements.
+  if (!clickedInEls(e, elements) && cb(e)) {
+    // Delay setting toggleable inactive to avoid conflicting
+    // with an outside click on any activator toggling our state.
+    setTimeout(() => (v.context.isActive = false), 0)
+  }
+}
+
+function clickedInEls (e, elements) {
+  // Get position of click
+  const { clientX: x, clientY: y } = e
+  // Loop over all included elements to see if click was in any of them
+  for (const el of elements) {
+    if (clickedInEl(el, x, y)) return true
+  }
+
+  return false
+}
+
+function clickedInEl (el, x, y) {
+  // Get bounding rect for element
+  // (we're in capturing event and we want to check for multiple elements,
+  //  so can't use target.)
+  const b = el.getBoundingClientRect()
+  // Check if the click was in the element's bounding rect
+
+  return x >= b.left && x <= b.right && y >= b.top && y <= b.bottom
+}
+
+export default {
+  name: 'click-outside',
+
+  bind (el, binding, v) {
+    v.context.$kdutify.load(() => {
+      const onClick = e => directive(e, el, binding, v)
+      // iOS does not recognize click events on document
+      // or body, this is the entire purpose of the k-app
+      // component and [data-app], stop removing this
+      const app = document.querySelector('[data-app]') ||
+        document.body // This is only for unit tests
+      app.addEventListener('click', onClick, true)
+      el._clickOutside = onClick
+    })
+  },
+
+  unbind (el) {
+    const app = document.querySelector('[data-app]') ||
+      document.body // This is only for unit tests
+    app && app.removeEventListener('click', el._clickOutside, true)
+  }
+}

package/src/directives/index.js

@@ -0,0 +1,21 @@
+import ClickOutside from './click-outside'
+import Resize from './resize'
+import Ripple from './ripple'
+import Scroll from './scroll'
+import Touch from './touch'
+
+export {
+  ClickOutside,
+  Ripple,
+  Resize,
+  Scroll,
+  Touch
+}
+
+export default function install (Kdu) {
+  Kdu.directive('click-outside', ClickOutside)
+  Kdu.directive('ripple', Ripple)
+  Kdu.directive('resize', Resize)
+  Kdu.directive('scroll', Scroll)
+  Kdu.directive('touch', Touch)
+}

package/src/directives/resize.js

@@ -0,0 +1,30 @@
+function inserted (el, binding) {
+  let cb = binding.value
+  let debounce = 200
+
+  if (typeof binding.value !== 'function') {
+    cb = binding.value.value
+    debounce = binding.value.debounce
+  }
+
+  let debounceTimeout = setTimeout(cb, debounce)
+  const onResize = () => {
+    clearTimeout(debounceTimeout)
+    debounceTimeout = setTimeout(cb, debounce)
+  }
+
+  window.addEventListener('resize', onResize, { passive: true })
+  el._onResize = onResize
+
+  onResize()
+}
+
+function unbind (el, binding) {
+  window.removeEventListener('resize', el._onResize)
+}
+
+export default {
+  name: 'resize',
+  inserted,
+  unbind
+}

package/src/directives/ripple.js

@@ -0,0 +1,120 @@
+function style (el, value) {
+  [
+    'transform',
+    'webkitTransform'
+  ].forEach(i => {
+    el.style[i] = value
+  })
+}
+
+const RippleDataAttribute = 'data-ripple'
+
+const ripple = {
+  show: (e, el, { value = {} }) => {
+    if (el.getAttribute(RippleDataAttribute) !== 'true') {
+      return
+    }
+
+    var container = document.createElement('span')
+    var animation = document.createElement('span')
+
+    container.appendChild(animation)
+    container.className = 'ripple__container'
+
+    if (value.class) {
+      container.className += ` ${value.class}`
+    }
+
+    const size = el.clientWidth > el.clientHeight
+      ? el.clientWidth
+      : el.clientHeight
+    animation.className = 'ripple__animation'
+    animation.style.width = `${size * (value.center ? 1 : 2)}px`
+    animation.style.height = animation.style.width
+
+    el.appendChild(container)
+    const computed = window.getComputedStyle(el)
+    if (computed.position !== 'absolute' && computed.position !== 'fixed') el.style.position = 'relative'
+
+    const offset = el.getBoundingClientRect()
+    const x = value.center ? '50%' : `${e.clientX - offset.left}px`
+    const y = value.center ? '50%' : `${e.clientY - offset.top}px`
+
+    animation.classList.add('ripple__animation--enter')
+    animation.classList.add('ripple__animation--visible')
+    style(animation, `translate(-50%, -50%) translate(${x}, ${y}) scale3d(0.01,0.01,0.01)`)
+    animation.dataset.activated = Date.now()
+
+    setTimeout(() => {
+      animation.classList.remove('ripple__animation--enter')
+      style(animation, `translate(-50%, -50%) translate(${x}, ${y})  scale3d(0.99,0.99,0.99)`)
+    }, 0)
+  },
+
+  hide: (el) => {
+    if (el.getAttribute(RippleDataAttribute) !== 'true') {
+      return
+    }
+
+    const ripples = el.getElementsByClassName('ripple__animation')
+
+    if (ripples.length === 0) return
+    const animation = ripples[ripples.length - 1]
+    const diff = Date.now() - Number(animation.dataset.activated)
+    let delay = 400 - diff
+
+    delay = delay < 0 ? 0 : delay
+
+    setTimeout(() => {
+      animation.classList.remove('ripple__animation--visible')
+
+      setTimeout(() => {
+        // Need to figure out a new way to do this
+        try {
+          if (ripples.length < 1) el.style.position = null
+          animation.parentNode && el.removeChild(animation.parentNode)
+        } catch (e) {}
+      }, 300)
+    }, delay)
+  }
+}
+
+function directive (el, binding) {
+  el.setAttribute(RippleDataAttribute, !!binding.value)
+
+  if ('ontouchstart' in window) {
+    el.addEventListener('touchend', () => ripple.hide(el), false)
+    el.addEventListener('touchcancel', () => ripple.hide(el), false)
+  }
+
+  el.addEventListener('mousedown', e => ripple.show(e, el, binding), false)
+  el.addEventListener('mouseup', () => ripple.hide(el), false)
+  el.addEventListener('mouseleave', () => ripple.hide(el), false)
+  // Anchor tags can be dragged, causes other hides to fail - #1537
+  el.addEventListener('dragstart', () => ripple.hide(el), false)
+}
+
+function unbind (el, binding) {
+  el.removeEventListener('touchstart', e => ripple.show(e, el, binding), false)
+  el.removeEventListener('mousedown', e => ripple.show(e, el, binding), false)
+  el.removeEventListener('touchend', () => ripple.hide(el), false)
+  el.removeEventListener('touchcancel', () => ripple.hide(el), false)
+  el.removeEventListener('mouseup', () => ripple.hide(el), false)
+  el.removeEventListener('mouseleave', () => ripple.hide(el), false)
+  el.removeEventListener('dragstart', () => ripple.hide(el), false)
+}
+
+function update (el, binding) {
+  if (binding.value === binding.oldValue) {
+    return
+  }
+
+  el.setAttribute(RippleDataAttribute, !!binding.value)
+}
+
+export default {
+  name: 'ripple',
+  bind: directive,
+  unbind: unbind,
+  update: update
+}

package/src/directives/scroll.js

@@ -0,0 +1,31 @@
+function inserted (el, binding) {
+  const callback = typeof binding.value === 'function'
+    ? binding.value
+    : binding.value.callback
+  const options = binding.value.options || { passive: true }
+  let target = binding.value.target || window
+  if (target === 'undefined') return
+
+  if (target !== window) {
+    target = document.querySelector(target)
+  }
+
+  target.addEventListener('scroll', callback, options)
+
+  el._onScroll = {
+    target,
+    options
+  }
+}
+
+function unbind (el, binding) {
+  const { target, options } = el._onScroll
+
+  target.removeEventListener('scroll', binding.callback, options)
+}
+
+export default {
+  name: 'scroll',
+  inserted,
+  unbind
+}

package/src/directives/touch.js

@@ -0,0 +1,90 @@
+const touchstart = (event, wrapper) => {
+  const touch = event.changedTouches[0]
+  wrapper.touchstartX = touch.clientX
+  wrapper.touchstartY = touch.clientY
+
+  wrapper.start &&
+    wrapper.start(Object.assign(event, wrapper))
+}
+
+const touchend = (event, wrapper) => {
+  const touch = event.changedTouches[0]
+  wrapper.touchendX = touch.clientX
+  wrapper.touchendY = touch.clientY
+
+  wrapper.end &&
+    wrapper.end(Object.assign(event, wrapper))
+
+  handleGesture(wrapper)
+}
+
+const touchmove = (event, wrapper) => {
+  const touch = event.changedTouches[0]
+  wrapper.touchmoveX = touch.clientX
+  wrapper.touchmoveY = touch.clientY
+
+  wrapper.move && wrapper.move(Object.assign(event, wrapper))
+}
+
+const handleGesture = (wrapper) => {
+  const { touchstartX, touchendX, touchstartY, touchendY } = wrapper
+  const dirRatio = 0.5
+  const minDistance = 16
+  wrapper.offsetX = touchendX - touchstartX
+  wrapper.offsetY = touchendY - touchstartY
+
+  if (Math.abs(wrapper.offsetY) < dirRatio * Math.abs(wrapper.offsetX)) {
+    wrapper.left && (touchendX < touchstartX - minDistance) && wrapper.left(wrapper)
+    wrapper.right && (touchendX > touchstartX + minDistance) && wrapper.right(wrapper)
+  }
+
+  if (Math.abs(wrapper.offsetX) < dirRatio * Math.abs(wrapper.offsetY)) {
+    wrapper.up && (touchendY < touchstartY - minDistance) && wrapper.up(wrapper)
+    wrapper.down && (touchendY > touchstartY + minDistance) && wrapper.down(wrapper)
+  }
+}
+
+function inserted (el, { value }) {
+  const wrapper = {
+    touchstartX: 0,
+    touchstartY: 0,
+    touchendX: 0,
+    touchendY: 0,
+    touchmoveX: 0,
+    touchmoveY: 0,
+    offsetX: 0,
+    offsetY: 0,
+    left: value.left,
+    right: value.right,
+    up: value.up,
+    down: value.down,
+    start: value.start,
+    move: value.move,
+    end: value.end
+  }
+
+  const target = value.parent ? el.parentNode : el
+  const options = value.options || { passive: true }
+
+  // Needed to pass unit tests
+  if (!target) return
+  target.addEventListener('touchstart', e => touchstart(e, wrapper), options)
+  target.addEventListener('touchend', e => touchend(e, wrapper), options)
+  target.addEventListener('touchmove', e => touchmove(e, wrapper), options)
+}
+
+function unbind (el, { value }) {
+  const target = value.parent ? el.parentNode : el
+
+  if (!target) return
+
+  target.removeEventListener('touchstart', touchstart)
+  target.removeEventListener('touchend', touchend)
+  target.removeEventListener('touchmove', touchmove)
+}
+
+export default {
+  name: 'touch',
+  inserted,
+  unbind
+}

package/src/index.js

@@ -0,0 +1,30 @@
+require('./stylus/app.styl')
+import Semver from 'semver'
+import { devDependencies, version } from '../package.json'
+import * as components from './components'
+import * as directives from './directives'
+
+function Kdutify (Kdu) {
+  const Kdutify = components.Kdutify
+
+  Kdu.use(Kdutify, {
+    components,
+    directives
+  })
+}
+
+Kdutify.version = version
+
+function checkKduVersion () {
+  const kduDep = devDependencies.kdu
+  if (!Semver.satisfies(window.Kdu.version, kduDep)) {
+    console.warn(`Kdutify requires Kdu version ${kduDep}`)
+  }
+}
+
+if (typeof window !== 'undefined' && window.Kdu) {
+  window.Kdu.version && checkKduVersion()
+  window.Kdu.use(Kdutify)
+}
+
+export default Kdutify

package/src/mixins/applicationable.js

@@ -0,0 +1,9 @@
+export default {
+  props: {
+    app: Boolean
+  },
+
+  created () {
+    this.updateApplication()
+  }
+}

package/src/mixins/bootable.js

@@ -0,0 +1,31 @@
+/**
+ * Bootable
+ * @mixin
+ *
+ * Used to add lazy content functionality to components
+ * Looks for change in "isActive" to automatically boot
+ * Otherwise can be set manually
+ */
+export default {
+  data: () => ({
+    isBooted: false
+  }),
+
+  props: {
+    lazy: Boolean
+  },
+
+  watch: {
+    isActive () {
+      this.isBooted = true
+    }
+  },
+
+  methods: {
+    showLazyContent (content) {
+      return (this.isBooted || !this.lazy)
+        ? content
+        : null
+    }
+  }
+}

package/src/mixins/button-group.js

@@ -0,0 +1,77 @@
+export default {
+  data () {
+    return {
+      buttons: [],
+      listeners: []
+    }
+  },
+
+  methods: {
+    getValue (i) {
+      if (this.buttons[i].value != null) {
+        return this.buttons[i].value
+      }
+
+      // Fix for testing, this should always be false in the browser
+      if (this.buttons[i].$el.value != null && this.buttons[i].$el.value !== '') {
+        return this.buttons[i].$el.value
+      }
+
+      return i
+    },
+    update () {
+      const selected = []
+
+      this.buttons
+        .forEach((button, i) => {
+          const elm = button.$el
+
+          // Fix for testing, dataset does not exist on elm?
+          if (!elm.dataset) elm.dataset = {}
+
+          elm.removeAttribute('data-only-child')
+
+          if (this.isSelected(i)) {
+            elm.setAttribute('data-selected', true)
+
+            if (!elm.classList.contains('btn--router')) {
+              elm.classList.add('btn--active')
+            }
+
+            selected.push(i)
+          } else {
+            elm.removeAttribute('data-selected')
+
+            if (!elm.classList.contains('btn--router')) {
+              elm.classList.remove('btn--active')
+            }
+          }
+
+          elm.dataset.index = i
+        })
+
+      if (selected.length === 1) {
+        this.buttons[selected[0]].$el.setAttribute('data-only-child', true)
+      }
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(() => {
+      this.buttons = this.$children
+
+      this.buttons.forEach((button, i) => {
+        this.listeners.push(this.updateValue.bind(this, i))
+        button.$on('click', this.listeners[i])
+      })
+
+      this.update()
+    })
+  },
+
+  beforeDestroy () {
+    this.buttons.forEach((button, i) => {
+      button.$off('click', this.listeners[i])
+    })
+  }
+}

package/src/mixins/colorable.js

@@ -0,0 +1,20 @@
+export default {
+  props: {
+    color: String
+  },
+  methods: {
+    addBackgroundColorClassChecks (classes, prop = 'color') {
+      if (this[prop]) {
+        classes[this[prop]] = true
+      }
+      return classes
+    },
+    addTextColorClassChecks (classes, prop = 'color') {
+      const parts = this[prop] ? this[prop].trim().split(' ') : ['']
+      let color = parts[0] + '--text'
+      if (parts.length > 1) color += ' text--' + parts[1]
+      classes[color] = !!this[prop]
+      return classes
+    }
+  }
+}

package/src/mixins/contextualable.js

@@ -0,0 +1,10 @@
+export default {
+  props: {
+    primary: Boolean,
+    secondary: Boolean,
+    success: Boolean,
+    info: Boolean,
+    warning: Boolean,
+    error: Boolean
+  }
+}

package/src/mixins/delayable.js

@@ -0,0 +1,54 @@
+/**
+ * Delayable
+ *
+ * @mixin
+ *
+ * Changes the open or close
+ * delay time for elements
+ */
+export default {
+  data: () => ({
+    openTimeout: null,
+    closeTimeout: null
+  }),
+
+  props: {
+    openDelay: {
+      type: [Number, String],
+      default: 0
+    },
+    closeDelay: {
+      type: [Number, String],
+      default: 200
+    }
+  },
+
+  methods: {
+    /**
+     * Clear any pending delay
+     * timers from executing
+     *
+     * @return {void}
+     */
+    clearDelay () {
+      clearTimeout(this.openTimeout)
+      clearTimeout(this.closeTimeout)
+    },
+    /**
+     * Runs callback after
+     * a specified delay
+     *
+     * @param  {String}   type
+     * @param  {Function} cb
+     *
+     * @return {void}
+     */
+    runDelay (type, cb) {
+      this.clearDelay()
+
+      const delay = parseInt(this[`${type}Delay`], 10)
+
+      this[`${type}Timeout`] = setTimeout(cb, delay)
+    }
+  }
+}

package/src/mixins/dependent.js

@@ -0,0 +1,55 @@
+function searchChildren (children) {
+  const results = []
+  for (const child of children) {
+    if (child.isActive && child.isDependent) {
+      results.push(child)
+    } else {
+      results.push(...searchChildren(child.$children))
+    }
+  }
+
+  return results
+}
+
+export default {
+  data () {
+    return {
+      closeDependents: true,
+      isDependent: true
+    }
+  },
+
+  methods: {
+    getOpenDependents () {
+      if (this.closeDependents) return searchChildren(this.$children)
+
+      return []
+    },
+    getOpenDependentElements () {
+      const result = []
+
+      for (const dependent of this.getOpenDependents()) {
+        result.push(...dependent.getClickableDependentElements())
+      }
+
+      return result
+    },
+    getClickableDependentElements () {
+      const result = [this.$el]
+      if (this.$refs.content) result.push(this.$refs.content)
+      result.push(...this.getOpenDependentElements())
+
+      return result
+    }
+  },
+
+  watch: {
+    isActive (val) {
+      if (val) return
+
+      for (const dependent of this.getOpenDependents()) {
+        dependent.isActive = false
+      }
+    }
+  }
+}