kdutify 0.16.9-rc.0

package/src/mixins/detachable.js

@@ -0,0 +1,44 @@
+import Bootable from './bootable'
+
+export default {
+  mixins: [Bootable],
+
+  props: {
+    contentClass: {
+      default: ''
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(this.initDetach)
+  },
+
+  beforeDestroy () {
+    if (!this.$refs.content) return
+
+    // IE11 Fix
+    try {
+      this.$refs.content.parentNode.removeChild(this.$refs.content)
+    } catch (e) {}
+  },
+
+  methods: {
+    initDetach () {
+      if (this._isDestroyed) return
+
+      const app = document.querySelector('[data-app]')
+
+      if (!app) {
+        return console.warn('Application is missing <k-app> component.')
+      }
+
+      // If child has already been removed, bail
+      if (!this.$refs.content) return
+
+      app.insertBefore(
+        this.$refs.content,
+        app.firstChild
+      )
+    }
+  }
+}

package/src/mixins/filterable.js

@@ -0,0 +1,8 @@
+export default {
+  props: {
+    noDataText: {
+      type: String,
+      default: 'No data available'
+    }
+  }
+}

package/src/mixins/input.js

@@ -0,0 +1,220 @@
+import Loadable from './loadable'
+import Themeable from './themeable'
+import Validatable from './validatable'
+import KIcon from '../components/KIcon'
+
+export default {
+  components: {
+    KIcon
+  },
+
+  mixins: [Loadable, Themeable, Validatable],
+
+  data () {
+    return {
+      isFocused: false,
+      tabFocused: false,
+      internalTabIndex: null,
+      lazyValue: this.value
+    }
+  },
+
+  props: {
+    appendIcon: String,
+    appendIconCb: Function,
+    disabled: Boolean,
+    hint: String,
+    hideDetails: Boolean,
+    label: String,
+    persistentHint: Boolean,
+    placeholder: String,
+    prependIcon: String,
+    prependIconCb: Function,
+    readonly: Boolean,
+    required: Boolean,
+    tabindex: {
+      default: 0
+    },
+    toggleKeys: {
+      type: Array,
+      default: () => [13, 32]
+    },
+    value: {
+      required: false
+    }
+  },
+
+  computed: {
+    inputGroupClasses () {
+      return Object.assign({
+        'input-group': true,
+        'input-group--async-loading': this.loading !== false,
+        'input-group--focused': this.isFocused,
+        'input-group--dirty': this.isDirty,
+        'input-group--tab-focused': this.tabFocused,
+        'input-group--disabled': this.disabled,
+        'input-group--error': this.hasError,
+        'input-group--append-icon': this.appendIcon,
+        'input-group--prepend-icon': this.prependIcon,
+        'input-group--required': this.required,
+        'input-group--hide-details': this.hideDetails,
+        'input-group--placeholder': !!this.placeholder,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }, this.classes)
+    },
+    isDirty () {
+      return !!this.inputValue
+    }
+  },
+
+  methods: {
+    groupFocus (e) {},
+    groupBlur (e) {
+      this.tabFocused = false
+    },
+    genLabel () {
+      return this.$createElement('label', {
+        attrs: {
+          for: this.$attrs.id
+        }
+      }, this.$slots.label || this.label)
+    },
+    genMessages () {
+      let messages = []
+
+      if ((this.hint &&
+            this.isFocused ||
+            this.hint &&
+            this.persistentHint) &&
+          this.validations.length === 0
+      ) {
+        messages = [this.genHint()]
+      } else if (this.validations.length) {
+        messages = this.validations.map(v => this.genError(v))
+      }
+
+      return this.$createElement('transition-group', {
+        'class': 'input-group__messages',
+        props: {
+          tag: 'div',
+          name: 'slide-y-transition'
+        }
+      }, messages)
+    },
+    genHint () {
+      return this.$createElement('div', {
+        'class': 'input-group__hint',
+        key: this.hint,
+        domProps: { innerHTML: this.hint }
+      })
+    },
+    genError (error) {
+      return this.$createElement(
+        'div',
+        {
+          'class': 'input-group__error',
+          key: error
+        },
+        error
+      )
+    },
+    genIcon (type, defaultCallback = null) {
+      const shouldClear = type === 'append' && this.clearable && this.isDirty
+      const icon = shouldClear ? 'clear' : this[`${type}Icon`]
+      const callback = shouldClear
+        ? this.clearableCallback
+        : (this[`${type}IconCb`] || defaultCallback)
+
+      return this.$createElement('k-icon', {
+        attrs: {
+          'aria-hidden': true
+        },
+        'class': {
+          [`input-group__${type}-icon`]: true,
+          'input-group__icon-cb': !!callback,
+          'input-group__icon-clearable': shouldClear
+        },
+        props: {
+          disabled: this.disabled
+        },
+        on: {
+          click: e => {
+            if (!callback) return
+
+            e.stopPropagation()
+            callback()
+          }
+        }
+      }, icon)
+    },
+    genInputGroup (input, data = {}, defaultAppendCallback = null) {
+      const children = []
+      const wrapperChildren = []
+      const detailsChildren = []
+
+      data = Object.assign({}, {
+        'class': this.inputGroupClasses,
+        attrs: {
+          tabindex: this.disabled
+            ? -1
+            : this.internalTabIndex || this.tabindex
+        },
+        on: {
+          focus: this.groupFocus,
+          blur: this.groupBlur,
+          click: () => (this.tabFocused = false),
+          keyup: e => {
+            if ([9, 16].includes(e.keyCode)) {
+              this.tabFocused = true
+            }
+          },
+          keydown: e => {
+            if (!this.toggle) return
+
+            if (this.toggleKeys.includes(e.keyCode)) {
+              e.preventDefault()
+              this.toggle()
+            }
+          }
+        }
+      }, data)
+
+      if (this.$slots.label || this.label) {
+        children.push(this.genLabel())
+      }
+
+      wrapperChildren.push(input)
+
+      if (this.prependIcon) {
+        wrapperChildren.unshift(this.genIcon('prepend'))
+      }
+
+      if (this.appendIcon || this.clearable) {
+        wrapperChildren.push(this.genIcon('append', defaultAppendCallback))
+      }
+
+      const progress = this.genProgress()
+      progress && detailsChildren.push(progress)
+
+      children.push(
+        this.$createElement('div', {
+          'class': 'input-group__input'
+        }, wrapperChildren)
+      )
+      detailsChildren.push(this.genMessages())
+
+      if (this.counter) {
+        detailsChildren.push(this.genCounter())
+      }
+
+      children.push(
+        this.$createElement('div', {
+          'class': 'input-group__details'
+        }, detailsChildren)
+      )
+
+      return this.$createElement('div', data, children)
+    }
+  }
+}

package/src/mixins/loadable.js

@@ -0,0 +1,33 @@
+/**
+ * Loadable
+ *
+ * @mixin
+ *
+ * Used to add linear progress bar to components
+ * Can use a default bar with a specific color
+ * or designate a custom progress linear bar
+ */
+export default {
+  props: {
+    loading: {
+      type: [Boolean, String],
+      default: false
+    }
+  },
+
+  methods: {
+    genProgress () {
+      if (this.loading === false) return null
+
+      return this.$slots.progress || this.$createElement('k-progress-linear', {
+        props: {
+          color: (this.loading === true || this.loading === '')
+            ? (this.color || 'primary')
+            : this.loading,
+          height: 2,
+          indeterminate: true
+        }
+      })
+    }
+  }
+}

package/src/mixins/maskable.js

@@ -0,0 +1,117 @@
+/**
+ * Maskable
+ *
+ * @mixin
+ *
+ * Creates an input mask that is
+ * generated from a masked str
+ *
+ * Example: mask="#### #### #### ####"
+ */
+
+import {
+  isMaskDelimiter,
+  maskText,
+  unmaskText
+} from '../util/mask'
+
+export default {
+  data: () => ({
+    selection: 0,
+    preDefined: {
+      'credit-card': '#### - #### - #### - ####',
+      'date': '##/##/####',
+      'date-with-time': '##/##/#### ##:##',
+      'phone': '(###) ### - ####',
+      'social': '###-##-####',
+      'time': '##:##',
+      'time-with-seconds': '##:##:##'
+    }
+  }),
+
+  props: {
+    dontFillMaskBlanks: Boolean,
+    mask: {
+      type: [Object, String],
+      default: null
+    },
+    returnMaskedValue: Boolean
+  },
+
+  computed: {
+    masked () {
+      const preDefined = this.preDefined[this.mask]
+      const mask = preDefined || this.mask || ''
+
+      return mask.split('')
+    }
+  },
+
+  watch: {
+    /**
+     * Make sure the cursor is in the correct
+     * location when the mask changes
+     */
+    mask () {
+      if (!this.$refs.input) return
+
+      const oldText = this.$refs.input.value
+      const newText = this.maskText(this.lazyValue)
+      let position = 0
+      let selection = this.selection
+
+      for (const char of oldText.substr(0, selection)) {
+        isMaskDelimiter(char) || position++
+      }
+
+      selection = 0
+      for (const char of newText) {
+        isMaskDelimiter(char) || position--
+        selection++
+        if (position <= 0) break
+      }
+
+      this.setCaretPosition(selection)
+    }
+  },
+
+  methods: {
+    setCaretPosition (selection) {
+      this.selection = selection
+      window.setTimeout(() => {
+        this.$refs.input && this.$refs.input.setSelectionRange(this.selection, this.selection)
+      }, 0)
+    },
+    updateRange () {
+      if (!this.$refs.input) return
+
+      const newValue = this.maskText(this.lazyValue)
+      let selection = 0
+
+      this.$refs.input.value = newValue
+      for (const char of newValue) {
+        if (this.lazySelection <= 0) break
+        isMaskDelimiter(char) || this.lazySelection--
+        selection++
+      }
+
+      this.setCaretPosition(selection)
+    },
+    maskText (text) {
+      if (!this.mask) return text
+
+      return maskText(text, this.masked, this.dontFillMaskBlanks)
+    },
+    unmaskText (text) {
+      if (this.returnMaskedValue || !this.mask) return text
+
+      return unmaskText(text)
+    },
+    // When the input changes and is
+    // re-created, ensure that the
+    // caret location is correct
+    setSelectionRange () {
+      this.$nextTick(this.updateRange)
+    }
+  }
+}

package/src/mixins/menuable.js

@@ -0,0 +1,299 @@
+import Positionable from './positionable'
+
+import Stackable from './stackable'
+
+const dimensions = {
+  activator: {
+    top: 0, left: 0,
+    bottom: 0, right: 0,
+    width: 0, height: 0,
+    offsetTop: 0, scrollHeight: 0
+  },
+  content: {
+    top: 0, left: 0,
+    bottom: 0, right: 0,
+    width: 0, height: 0,
+    offsetTop: 0, scrollHeight: 0
+  },
+  hasWindow: false
+}
+
+/**
+ * Menuable
+ *
+ * @mixin
+ *
+ * Used for fixed or absolutely positioning
+ * elements within the DOM
+ * Can calculate X and Y axis overflows
+ * As well as be manually positioned
+ */
+export default {
+  mixins: [Positionable, Stackable],
+
+  data: () => ({
+    absoluteX: 0,
+    absoluteY: 0,
+    dimensions: Object.assign({}, dimensions),
+    isContentActive: false,
+    pageYOffset: 0,
+    stackClass: 'menuable__content__active',
+    stackMinZIndex: 6
+  }),
+
+  props: {
+    activator: {
+      default: null,
+      validate: val => {
+        return ['string', 'object'].includes(typeof val)
+      }
+    },
+    allowOverflow: Boolean,
+    maxWidth: {
+      type: [Number, String],
+      default: 'auto'
+    },
+    minWidth: [Number, String],
+    nudgeBottom: {
+      type: Number,
+      default: 0
+    },
+    nudgeLeft: {
+      type: Number,
+      default: 0
+    },
+    nudgeRight: {
+      type: Number,
+      default: 0
+    },
+    nudgeTop: {
+      type: Number,
+      default: 0
+    },
+    nudgeWidth: {
+      type: Number,
+      default: 0
+    },
+    offsetOverflow: Boolean,
+    positionX: {
+      type: Number,
+      default: null
+    },
+    positionY: {
+      type: Number,
+      default: null
+    },
+    zIndex: {
+      type: [Number, String],
+      default: null
+    }
+  },
+
+  computed: {
+    hasActivator () {
+      return !!this.$slots.activator || this.activator
+    }
+  },
+
+  watch: {
+    disabled (val) {
+      val && this.callDeactivate()
+    },
+    isActive (val) {
+      if (this.disabled) return
+
+      val && this.callActivate() || this.callDeactivate()
+    }
+  },
+
+  methods: {
+    absolutePosition () {
+      return {
+        offsetTop: 0,
+        scrollHeight: 0,
+        top: this.positionY || this.absoluteY,
+        bottom: this.positionY || this.absoluteY,
+        left: this.positionX || this.absoluteX,
+        right: this.positionX || this.absoluteX,
+        height: 0,
+        width: 0
+      }
+    },
+    activate () {},
+    calcLeft () {
+      const a = this.dimensions.activator
+      const c = this.dimensions.content
+      let left = this.left ? a.right - c.width : a.left
+
+      if (this.offsetX) left += this.left ? -a.width : a.width
+      if (this.nudgeLeft) left -= this.nudgeLeft
+      if (this.nudgeRight) left += this.nudgeRight
+
+      return left
+    },
+    calcTop () {
+      this.checkForWindow()
+
+      const a = this.dimensions.activator
+      const c = this.dimensions.content
+      let top = this.top ? a.bottom - c.height : a.top
+
+      if (this.offsetY) top += this.top ? -a.height : a.height
+      if (this.nudgeTop) top -= this.nudgeTop
+      if (this.nudgeBottom) top += this.nudgeBottom
+
+      return top + this.pageYOffset
+    },
+    calcXOverflow (left) {
+      const parsedMaxWidth = isNaN(parseInt(this.maxWidth))
+        ? 0
+        : parseInt(this.maxWidth)
+      const innerWidth = this.getInnerWidth()
+      const maxWidth = Math.max(
+        this.dimensions.content.width,
+        parsedMaxWidth
+      )
+      const totalWidth = left + maxWidth
+      const availableWidth = totalWidth - innerWidth
+
+      if ((!this.left || this.right) && availableWidth > 0) {
+        left = (
+          innerWidth -
+          maxWidth -
+          (innerWidth > 600 ? 30 : 12) // Account for scrollbar
+        )
+      }
+
+      if (left < 0) left = 12
+
+      return left
+    },
+    calcYOverflow (top) {
+      const documentHeight = this.getInnerHeight()
+      const toTop = this.pageYOffset + documentHeight
+      const activator = this.dimensions.activator
+      const contentHeight = this.dimensions.content.height
+      const totalHeight = top + contentHeight
+      const isOverflowing = toTop < totalHeight
+
+      // If overflowing bottom and offset
+      if (isOverflowing && this.offsetOverflow) {
+        top = this.pageYOffset + (activator.top - contentHeight)
+      // If overflowing bottom
+      } else if (isOverflowing && !this.allowOverflow) {
+        top = toTop - contentHeight - 12
+      // If overflowing top
+      } else if (top < this.pageYOffset && !this.allowOverflow) {
+        top = this.pageYOffset + 12
+      }
+
+      return top < 12 ? 12 : top
+    },
+    callActivate () {
+      this.checkForWindow()
+      if (!this.hasWindow) return
+
+      this.activate()
+    },
+    callDeactivate () {
+      this.isContentActive = false
+
+      this.deactivate()
+    },
+    checkForWindow () {
+      this.hasWindow = typeof window !== 'undefined'
+
+      if (this.hasWindow) {
+        this.pageYOffset = this.getOffsetTop()
+      }
+    },
+    deactivate () {},
+    getActivator () {
+      if (this.activator) {
+        return typeof this.activator === 'string'
+          ? document.querySelector(this.activator)
+          : this.activator
+      }
+
+      return this.$refs.activator.children
+        ? this.$refs.activator.children[0]
+        : this.$refs.activator
+    },
+    getInnerHeight () {
+      if (!this.hasWindow) return 0
+
+      return window.innerHeight ||
+        document.documentElement.clientHeight
+    },
+    getInnerWidth () {
+      if (!this.hasWindow) return 0
+
+      return window.innerWidth
+    },
+    getOffsetTop () {
+      if (!this.hasWindow) return 0
+
+      return window.pageYOffset ||
+        document.documentElement.scrollTop
+    },
+    measure (el, selector) {
+      el = selector ? el.querySelector(selector) : el
+
+      if (!el) return null
+
+      const {
+        top,
+        bottom,
+        left,
+        right,
+        height,
+        width
+      } = el.getBoundingClientRect()
+
+      return {
+        offsetTop: el.offsetTop,
+        scrollHeight: el.scrollHeight,
+        top, bottom, left, right, height, width
+      }
+    },
+    sneakPeek (cb) {
+      requestAnimationFrame(() => {
+        const el = this.$refs.content
+
+        if (this.isShown(el)) return cb()
+
+        el.style.display = 'inline-block'
+        cb()
+        el.style.display = 'none'
+      })
+    },
+    startTransition () {
+      requestAnimationFrame(() => (this.isContentActive = true))
+    },
+    isShown (el) {
+      return el.style.display !== 'none'
+    },
+    resetDimensions () {
+      this.dimensions = Object.assign({}, dimensions)
+    },
+    updateDimensions () {
+      // Ensure that overflow calculation
+      // can work properly every update
+      this.resetDimensions()
+
+      const dimensions = {}
+
+      // Activate should already be shown
+      dimensions.activator = !this.hasActivator || this.absolute
+        ? this.absolutePosition()
+        : this.measure(this.getActivator())
+
+      // Display and hide to get dimensions
+      this.sneakPeek(() => {
+        dimensions.content = this.measure(this.$refs.content)
+
+        this.dimensions = dimensions
+      })
+    }
+  }
+}