kdutify 0.16.9-rc.0

package/src/components/KTabs/KTabsBar.js

@@ -0,0 +1,202 @@
+import KIcon from '../KIcon'
+
+import Resize from '../../directives/resize'
+import Touch from '../../directives/touch'
+
+export default {
+  name: 'k-tabs-bar',
+
+  directives: {
+    Resize,
+    Touch
+  },
+
+  provide () {
+    return {
+      addTabItem: (action, toggle, el) => {
+        this.registerTabItem(action, toggle, el)
+        this.onResize()
+      },
+      removeTabItem: (action) => {
+        this.unregisterTabItem(action)
+        this.onResize()
+      }
+    }
+  },
+
+  inject: ['isScrollable', 'isMobile', 'registerTabItem', 'unregisterTabItem'],
+
+  data () {
+    return {
+      isOverflowing: false,
+      scrollOffset: 0,
+      itemOffset: 0,
+      startX: 0
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'tabs__bar': true
+      }
+    },
+    containerClasses () {
+      return {
+        'tabs__container': true
+      }
+    },
+    wrapperClasses () {
+      return {
+        'tabs__wrapper': true,
+        'tabs__wrapper--scrollable': this.isScrollable(),
+        'tabs__wrapper--overflow': this.isOverflowing
+      }
+    },
+    containerStyles () {
+      return {
+        'transform': `translateX(${-this.scrollOffset}px)`
+      }
+    },
+    leftIconVisible () {
+      return !this.isMobile() &&
+        this.isScrollable() &&
+        this.isOverflowing &&
+        this.scrollOffset > 0
+    },
+    rightIconVisible () {
+      if (this.isMobile() ||
+        !this.isScrollable() ||
+        !this.isOverflowing) return
+
+      // Check one scroll ahead to know the width of right-most item
+      const container = this.$refs.container
+      const item = this.newOffsetRight(this.scrollOffset, this.itemOffset)
+      const itemWidth = item && container.children[item.index].clientWidth || 0
+      const scrollOffset = this.scrollOffset + container.clientWidth
+
+      return container.scrollWidth - scrollOffset > itemWidth * 0.30
+    }
+  },
+
+  methods: {
+    genContainer () {
+      return this.$createElement('ul', {
+        'class': this.containerClasses,
+        'style': this.containerStyles,
+        ref: 'container'
+      }, this.$slots.default)
+    },
+    genIcon (direction) {
+      const capitalize = direction.charAt(0).toUpperCase() + direction.slice(1)
+      return this.$createElement(KIcon, {
+        props: { [`${direction}`]: true },
+        style: { display: 'inline-flex' },
+        on: {
+          click: this[`scroll${capitalize}`]
+        }
+      }, `chevron_${direction}`)
+    },
+    genWrapper () {
+      return this.$createElement('div', {
+        class: this.wrapperClasses,
+        directives: [{
+          name: 'touch',
+          value: {
+            start: this.start,
+            move: this.move,
+            end: this.end
+          }
+        }]
+      }, [this.genContainer()])
+    },
+    start (e) {
+      this.startX = this.scrollOffset + e.touchstartX
+      this.$refs.container.style.transition = 'none'
+    },
+    move (e) {
+      const offset = this.startX - e.touchmoveX
+      this.scrollOffset = offset
+    },
+    end (e) {
+      this.onResize()
+      const container = this.$refs.container
+      const scrollWidth = container.scrollWidth - this.$el.clientWidth / 2
+      container.style.transition = null
+
+      if (this.scrollOffset < 0 || !this.isOverflowing) {
+        this.scrollOffset = 0
+      } else if (this.scrollOffset >= scrollWidth) {
+        const lastItem = container.children[container.children.length - 1]
+        this.scrollOffset = scrollWidth - lastItem.clientWidth
+      }
+    },
+    scrollLeft () {
+      const { offset, index } = this.newOffset('Left')
+      this.scrollOffset = offset
+      this.itemOffset = index
+    },
+    scrollRight () {
+      const { offset, index } = this.newOffset('Right')
+      this.scrollOffset = offset
+      this.itemOffset = index
+    },
+    onResize () {
+      if (this._isDestroyed) return
+
+      const container = this.$refs.container
+      this.isOverflowing = container.clientWidth < container.scrollWidth
+    },
+    newOffset (direction) {
+      return this[`newOffset${direction}`](this.scrollOffset, this.itemOffset)
+    },
+    newOffsetLeft (currentOffset, currentIndex) {
+      const container = this.$refs.container
+      const items = container.children
+      let offset = 0
+
+      for (let index = currentIndex - 1; index >= 0; index--) {
+        if (!items[index].classList.contains('tabs__slider')) {
+          const newOffset = offset + items[index].clientWidth
+          if (newOffset >= container.clientWidth) {
+            return { offset: currentOffset - offset, index: index + 1 }
+          }
+          offset = newOffset
+        }
+      }
+
+      return { offset: 0, index: 0 }
+    },
+    newOffsetRight (currentOffset, currentIndex) {
+      const container = this.$refs.container
+      const items = container.children
+      let offset = currentOffset
+
+      for (let index = currentIndex; index < items.length; index++) {
+        if (!items[index].classList.contains('tabs__slider')) {
+          const newOffset = offset + items[index].clientWidth
+          if (newOffset > currentOffset + container.clientWidth) {
+            return { offset, index }
+          }
+          offset = newOffset
+        }
+      }
+
+      return null
+    }
+  },
+
+  render (h) {
+    return h('div', {
+      'class': this.classes,
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    }, [
+      this.genWrapper(),
+      this.leftIconVisible ? this.genIcon('left') : null,
+      this.rightIconVisible ? this.genIcon('right') : null
+    ])
+  }
+}

package/src/components/KTabs/KTabsContent.js

@@ -0,0 +1,90 @@
+import Bootable from '../../mixins/bootable'
+
+import {
+  KTabTransition,
+  KTabReverseTransition
+} from '../transitions'
+
+import Touch from '../../directives/touch'
+
+export default {
+  name: 'k-tabs-content',
+
+  mixins: [Bootable],
+
+  inject: ['registerContent', 'unregisterContent'],
+
+  components: {
+    KTabTransition,
+    KTabReverseTransition
+  },
+
+  directives: {
+    Touch
+  },
+
+  data () {
+    return {
+      isActive: false,
+      reverse: false
+    }
+  },
+
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    transition: {
+      type: [Boolean, String],
+      default: 'tab-transition'
+    },
+    reverseTransition: {
+      type: [Boolean, String],
+      default: 'tab-reverse-transition'
+    }
+  },
+
+  computed: {
+    computedTransition () {
+      return this.reverse ? this.reverseTransition : this.transition
+    }
+  },
+
+  methods: {
+    toggle (target, reverse, showTransition) {
+      this.$el.style.transition = !showTransition ? 'none' : null
+      this.reverse = reverse
+      this.isActive = this.id === target
+    }
+  },
+
+  mounted () {
+    this.registerContent(this.id, this.toggle)
+  },
+
+  beforeDestroy () {
+    this.unregisterContent(this.id)
+  },
+
+  render (h) {
+    const data = {
+      staticClass: 'tabs__content',
+      directives: [{
+        name: 'show',
+        value: this.isActive
+      }],
+      on: this.$listeners
+    }
+
+    if (this.id) data.domProps = { id: this.id }
+
+    const div = h('div', data, this.showLazyContent(this.$slots.default))
+
+    if (!this.computedTransition) return div
+
+    return h('transition', {
+      props: { name: this.computedTransition }
+    }, [div])
+  }
+}

package/src/components/KTabs/KTabsItem.js

@@ -0,0 +1,99 @@
+import Routable from '../../mixins/routable'
+
+export default {
+  name: 'k-tabs-item',
+
+  inject: ['slider', 'tabClick', 'addTabItem', 'removeTabItem'],
+
+  mixins: [Routable],
+
+  data () {
+    return {
+      isActive: false
+    }
+  },
+
+  props: {
+    activeClass: {
+      type: String,
+      default: 'tabs__item--active'
+    }
+  },
+
+  computed: {
+    classes () {
+      const classes = {
+        'tabs__item': true,
+        'tabs__item--disabled': this.disabled
+      }
+
+      classes[this.activeClass] = !this.to && this.isActive
+
+      return classes
+    },
+    action () {
+      const to = this.to || this.href
+
+      if (!to || to === Object(to)) return this._uid
+
+      return to.replace('#', '')
+    }
+  },
+
+  watch: {
+    $route () {
+      this.to && this.callSlider()
+    }
+  },
+
+  mounted () {
+    this.addTabItem(this.action, this.toggle, this.$el)
+    this.callSlider()
+  },
+
+  beforeDestroy () {
+    this.removeTabItem(this.action)
+  },
+
+  methods: {
+    callSlider () {
+      setTimeout(() => {
+        this.$el.firstChild.classList.contains('tabs__item--active') &&
+        this.slider(this.$el)
+      }, 0)
+    },
+    click (e) {
+      e.preventDefault()
+      this.$emit('click', e)
+
+      if (!this.to && !this.href) return
+
+      if (!this.to) {
+        this.tabClick(this.action)
+      }
+
+      this.callSlider()
+    },
+
+    toggle (action) {
+      this.isActive = this.action === action
+
+      this.$nextTick(() => {
+        this.isActive && this.slider(this.$el)
+      })
+    }
+  },
+
+  render (h) {
+    const link = this.generateRouteLink()
+    const { data } = link
+
+    // If disabled, use div as anchor tags do not support
+    // being disabled
+    const tag = this.disabled ? 'div' : link.tag
+
+    return h('li', {
+      'class': 'tabs__li'
+    }, [h(tag, data, this.$slots.default)])
+  }
+}

package/src/components/KTabs/KTabsItems.js

@@ -0,0 +1,40 @@
+import Touch from '../../directives/touch'
+
+export default {
+  name: 'k-tabs-items',
+
+  directives: { Touch },
+
+  inject: ['next', 'prev'],
+
+  props: {
+    cycle: Boolean,
+    touchless: Boolean
+  },
+
+  methods: {
+    swipeLeft () {
+      this.next(this.cycle)
+    },
+    swipeRight () {
+      this.prev(this.cycle)
+    }
+  },
+
+  render (h) {
+    const data = {
+      staticClass: 'tabs__items',
+      directives: []
+    }
+
+    !this.touchless && data.directives.push({
+      name: 'touch',
+      value: {
+        left: this.swipeLeft,
+        right: this.swipeRight
+      }
+    })
+
+    return h('div', data, this.$slots.default)
+  }
+}

package/src/components/KTabs/KTabsSlider.js

@@ -0,0 +1,14 @@
+import Colorable from '../../mixins/colorable'
+
+export default {
+  name: 'k-tabs-slider',
+
+  mixins: [Colorable],
+
+  render (h) {
+    return h('li', {
+      staticClass: 'tabs__slider',
+      class: this.addBackgroundColorClassChecks({})
+    })
+  }
+}

package/src/components/KTabs/index.js

@@ -0,0 +1,17 @@
+import KTabs from './KTabs'
+import KTabsBar from './KTabsBar'
+import KTabsContent from './KTabsContent'
+import KTabsItem from './KTabsItem'
+import KTabsItems from './KTabsItems'
+import KTabsSlider from './KTabsSlider'
+
+KTabs.install = function install (Kdu) {
+  Kdu.component(KTabs.name, KTabs)
+  Kdu.component(KTabsBar.name, KTabsBar)
+  Kdu.component(KTabsContent.name, KTabsContent)
+  Kdu.component(KTabsItem.name, KTabsItem)
+  Kdu.component(KTabsItems.name, KTabsItems)
+  Kdu.component(KTabsSlider.name, KTabsSlider)
+}
+
+export default KTabs

package/src/components/KTextField/KTextField.js

@@ -0,0 +1,246 @@
+require('../../stylus/components/_input-groups.styl')
+require('../../stylus/components/_text-fields.styl')
+
+import Colorable from '../../mixins/colorable'
+import Input from '../../mixins/input'
+import Maskable from '../../mixins/maskable'
+import { isMaskDelimiter } from '../../util/mask'
+
+export default {
+  name: 'k-text-field',
+
+  mixins: [Colorable, Input, Maskable],
+
+  inheritAttrs: false,
+
+  data () {
+    return {
+      initialValue: null,
+      inputHeight: null,
+      badInput: false,
+      lazySelection: 0
+    }
+  },
+
+  props: {
+    autofocus: Boolean,
+    autoGrow: Boolean,
+    box: Boolean,
+    clearable: Boolean,
+    color: {
+      type: String,
+      default: 'primary'
+    },
+    counter: [Boolean, Number, String],
+    fullWidth: Boolean,
+    multiLine: Boolean,
+    placeholder: String,
+    prefix: String,
+    rows: {
+      default: 5
+    },
+    singleLine: Boolean,
+    solo: Boolean,
+    suffix: String,
+    textarea: Boolean,
+    type: {
+      type: String,
+      default: 'text'
+    }
+  },
+
+  computed: {
+    classes () {
+      const classes = {
+        'input-group--text-field': true,
+        'input-group--text-field-box': this.box,
+        'input-group--single-line': this.singleLine || this.solo,
+        'input-group--solo': this.solo,
+        'input-group--multi-line': this.multiLine,
+        'input-group--full-width': this.fullWidth,
+        'input-group--prefix': this.prefix,
+        'input-group--suffix': this.suffix,
+        'input-group--textarea': this.textarea
+      }
+
+      if (this.hasError) {
+        classes['error--text'] = true
+      } else {
+        return this.addTextColorClassChecks(classes)
+      }
+
+      return classes
+    },
+    count () {
+      let inputLength
+      if (this.inputValue) inputLength = this.inputValue.toString().length
+      else inputLength = 0
+
+      return `${inputLength} / ${this.counterLength}`
+    },
+    counterLength () {
+      const parsedLength = parseInt(this.counter, 10)
+      return isNaN(parsedLength) ? 25 : parsedLength
+    },
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (val) {
+        this.lazyValue = val
+        this.mask && this.setSelectionRange()
+        this.$emit('input', val)
+      }
+    },
+    isDirty () {
+      return this.lazyValue != null &&
+        this.lazyValue.toString().length > 0 ||
+        this.badInput ||
+        ['time', 'date', 'datetime-local', 'week', 'month'].includes(this.type)
+    },
+    shouldAutoGrow () {
+      return (this.multiLine || this.textarea) && this.autoGrow
+    }
+  },
+
+  watch: {
+    isFocused (val) {
+      if (val) {
+        this.initialValue = this.lazyValue
+      } else if (this.initialValue !== this.lazyValue) {
+        this.$emit('change', this.lazyValue)
+      }
+    },
+    value (val) {
+      // Value was changed externally, update lazy
+      this.lazyValue = val
+
+      !this.validateOnBlur && this.validate()
+      this.shouldAutoGrow && this.calculateInputHeight()
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(() => {
+      this.shouldAutoGrow && this.calculateInputHeight()
+      this.autofocus && this.focus()
+    })
+  },
+
+  methods: {
+    calculateInputHeight () {
+      this.inputHeight = null
+
+      this.$nextTick(() => {
+        const height = this.$refs.input
+          ? this.$refs.input.scrollHeight
+          : 0
+        const minHeight = this.rows * 24
+        const inputHeight = height < minHeight ? minHeight : height
+        this.inputHeight = inputHeight + (this.textarea ? 4 : 0)
+      })
+    },
+    onInput (e) {
+      this.resetSelections(e.target)
+      this.inputValue = this.unmaskText(e.target.value)
+      this.badInput = e.target.validity && e.target.validity.badInput
+      this.shouldAutoGrow && this.calculateInputHeight()
+    },
+    blur (e) {
+      this.isFocused = false
+
+      this.$nextTick(() => {
+        this.validate()
+      })
+      this.$emit('blur', e)
+    },
+    focus (e) {
+      if (!this.$refs.input) return
+
+      this.isFocused = true
+      if (document.activeElement !== this.$refs.input) {
+        this.$refs.input.focus()
+      }
+      this.$emit('focus', e)
+    },
+    genCounter () {
+      return this.$createElement('div', {
+        'class': {
+          'input-group__counter': true,
+          'input-group__counter--error': this.hasError
+        }
+      }, this.count)
+    },
+    genInput () {
+      const tag = this.multiLine || this.textarea ? 'textarea' : 'input'
+      const listeners = Object.assign({}, this.$listeners)
+      delete listeners['change'] // Change should not be bound externally
+
+      const data = {
+        style: {},
+        domProps: {
+          autofocus: this.autofocus,
+          disabled: this.disabled,
+          required: this.required,
+          value: this.maskText(this.lazyValue)
+        },
+        attrs: {
+          ...this.$attrs,
+          readonly: this.readonly,
+          tabindex: this.tabindex,
+          'aria-label': (!this.$attrs || !this.$attrs.id) && this.label // Label `for` will be set if we have an id
+        },
+        on: Object.assign(listeners, {
+          blur: this.blur,
+          input: this.onInput,
+          focus: this.focus
+        }),
+        ref: 'input'
+      }
+
+      if (this.shouldAutoGrow) {
+        data.style.height = this.inputHeight && `${this.inputHeight}px`
+      }
+
+      if (this.placeholder) data.domProps.placeholder = this.placeholder
+
+      if (!this.textarea && !this.multiLine) {
+        data.domProps.type = this.type
+      } else {
+        data.domProps.rows = this.rows
+      }
+
+      if (this.mask) {
+        data.attrs.maxlength = this.masked.length
+      }
+
+      const children = [this.$createElement(tag, data)]
+
+      this.prefix && children.unshift(this.genFix('prefix'))
+      this.suffix && children.push(this.genFix('suffix'))
+
+      return children
+    },
+    genFix (type) {
+      return this.$createElement('span', {
+        'class': `input-group--text-field__${type}`
+      }, this[type])
+    },
+    clearableCallback () {
+      this.inputValue = null
+      this.$nextTick(() => this.$refs.input.focus())
+    },
+    resetSelections (input) {
+      this.selection = input.selectionEnd
+      this.lazySelection = 0
+
+      for (const char of input.value.substr(0, this.selection)) {
+        isMaskDelimiter(char) || this.lazySelection++
+      }
+    }
+  },
+
+  render () {
+    return this.genInputGroup(this.genInput(), { attrs: { tabindex: false } })
+  }
+}

package/src/components/KTextField/index.js

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