kdutify 0.16.9-rc.0

package/src/components/KMenu/mixins/menu-activator.js

@@ -0,0 +1,51 @@
+/**
+ * Menu activator
+ *
+ * @mixin
+ *
+ * Handles the click and hover activation
+ * Supports slotted and detached activators
+ */
+export default {
+  methods: {
+    activatorClickHandler (e) {
+      if (this.disabled) return
+      if (this.openOnClick && !this.isActive) {
+        this.getActivator().focus()
+        this.isActive = true
+        this.absoluteX = e.clientX
+        this.absoluteY = e.clientY
+      } else if (this.closeOnClick && this.isActive) {
+        this.getActivator().blur()
+        this.isActive = false
+      }
+    },
+    mouseEnterHandler (e) {
+      this.runDelay('open', () => {
+        if (this.hasJustFocused) return
+
+        this.hasJustFocused = true
+        this.isActive = true
+      })
+    },
+    mouseLeaveHandler (e) {
+      // Prevent accidental re-activation
+      this.runDelay('close', () => {
+        if (this.$refs.content.contains(e.relatedTarget)) return
+
+        requestAnimationFrame(() => {
+          this.isActive = false
+          this.callDeactivate()
+        })
+      })
+    },
+    addActivatorEvents (activator = null) {
+      if (!activator) return
+      activator.addEventListener('click', this.activatorClickHandler)
+    },
+    removeActivatorEvents (activator = null) {
+      if (!activator) return
+      activator.removeEventListener('click', this.activatorClickHandler)
+    }
+  }
+}

package/src/components/KMenu/mixins/menu-generators.js

@@ -0,0 +1,84 @@
+/**
+ * Menu generators
+ *
+ * @mixin
+ *
+ * Used for creating the DOM elements for KMenu
+ */
+export default {
+  methods: {
+    genActivator () {
+      if (!this.$slots.activator) return null
+
+      const options = {
+        staticClass: 'menu__activator',
+        'class': {
+          'menu__activator--active': this.hasJustFocused || this.isActive
+        },
+        ref: 'activator',
+        on: {}
+      }
+
+      if (this.openOnHover) {
+        options.on['mouseenter'] = this.mouseEnterHandler
+        options.on['mouseleave'] = this.mouseLeaveHandler
+      } else if (this.openOnClick) {
+        options.on['click'] = this.activatorClickHandler
+      }
+
+      return this.$createElement('div', options, this.$slots.activator)
+    },
+
+    genTransition () {
+      if (!this.transition) return this.genContent()
+
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition
+        }
+      }, [this.genContent()])
+    },
+
+    genDirectives () {
+      // Do not add click outside for hover menu
+      const directives = !this.openOnHover ? [{
+        name: 'click-outside',
+        value: {
+          callback: () => this.closeOnClick,
+          include: () => [this.$el, ...this.getOpenDependentElements()]
+        }
+      }] : []
+
+      directives.push({
+        name: 'show',
+        value: this.isContentActive
+      })
+
+      return directives
+    },
+
+    genContent () {
+      const options = {
+        'class': [
+          (`menu__content ${this.contentClass}`).trim(),
+          { 'menuable__content__active': this.isActive }
+        ],
+        style: this.styles,
+        directives: this.genDirectives(),
+        ref: 'content',
+        on: {
+          click: e => {
+            e.stopPropagation()
+            if (e.target.getAttribute('disabled')) return
+            if (this.closeOnContentClick) this.isActive = false
+          }
+        }
+      }
+
+      !this.disabled && this.openOnHover && (options.on.mouseenter = this.mouseEnterHandler)
+      this.openOnHover && (options.on.mouseleave = this.mouseLeaveHandler)
+
+      return this.$createElement('div', options, this.showLazyContent(this.$slots.default))
+    }
+  }
+}

package/src/components/KMenu/mixins/menu-keyable.js

@@ -0,0 +1,68 @@
+/**
+ * Menu keyable
+ *
+ * @mixin
+ *
+ * Primarily used to support KSelect
+ * Handles opening and closing of KMenu from keystrokes
+ * Will conditionally highlight KListTiles for KSelect
+ */
+export default {
+  data: () => ({
+    listIndex: -1,
+    tiles: []
+  }),
+
+  watch: {
+    isActive (val) {
+      if (!val) this.listIndex = -1
+    },
+    listIndex (next, prev) {
+      // For infinite scroll and autocomplete, re-evaluate children
+      this.getTiles()
+
+      if (next in this.tiles) {
+        this.tiles[next].classList.add('list__tile--highlighted')
+        this.$refs.content.scrollTop = next * 48
+      }
+
+      prev in this.tiles &&
+        this.tiles[prev].classList.remove('list__tile--highlighted')
+    }
+  },
+
+  methods: {
+    changeListIndex (e) {
+      // Up, Down, Enter, Space
+      if ([40, 38, 13].includes(e.keyCode) ||
+        e.keyCode === 32 && !this.isActive
+      ) {
+        e.preventDefault()
+      }
+
+      // Esc, Tab
+      if ([27, 9].includes(e.keyCode)) return this.isActive = false
+      else if (!this.isActive &&
+        // Enter, Space
+        [13, 32].includes(e.keyCode) &&
+        this.openOnClick
+      ) {
+        return this.isActive = true
+      }
+
+      // Down
+      if (e.keyCode === 40 && this.listIndex < this.tiles.length - 1) {
+        this.listIndex++
+      // Up
+      } else if (e.keyCode === 38 && this.listIndex > 0) {
+        this.listIndex--
+      // Enter
+      } else if (e.keyCode === 13 && this.listIndex !== -1) {
+        this.tiles[this.listIndex].click()
+      }
+    },
+    getTiles () {
+      this.tiles = this.$refs.content.querySelectorAll('.list__tile')
+    }
+  }
+}

package/src/components/KMenu/mixins/menu-position.js

@@ -0,0 +1,72 @@
+/**
+ * Menu position
+ *
+ * @mixin
+ *
+ * Used for calculating an automatic position (used for KSelect)
+ * Will position the KMenu content properly over the KSelect
+ */
+export default {
+  methods: {
+    // Revisit this
+    calculateScroll () {
+      if (this.selectedIndex === null) return
+
+      let scrollTop = 0
+
+      if (this.selectedIndex >= this.stopIndex) {
+        scrollTop = this.$refs.content.scrollHeight
+      } else if (this.selectedIndex > this.startIndex) {
+        scrollTop = (
+          (this.selectedIndex * (this.defaultOffset * 6)) -
+          (this.defaultOffset * 7)
+        )
+      }
+
+      this.$refs.content.scrollTop = scrollTop
+    },
+    calcLeftAuto () {
+      const a = this.dimensions.activator
+
+      return parseInt(a.left - this.defaultOffset * 2)
+    },
+    calcTopAuto () {
+      if (!this.hasActivator) return this.calcTop()
+
+      const selectedIndex = Array.from(this.tiles)
+        .findIndex(n => n.classList.contains('list__tile--active'))
+
+      if (selectedIndex === -1) {
+        this.selectedIndex = null
+
+        return this.calcTop()
+      }
+
+      this.selectedIndex = selectedIndex
+      let actingIndex = selectedIndex
+
+      let offsetPadding = -(this.defaultOffset * 2)
+      // #708 Stop index should vary by tile length
+      this.stopIndex = this.tiles.length > 4
+        ? this.tiles.length - 4
+        : this.tiles.length
+
+      if (selectedIndex > this.startIndex && selectedIndex < this.stopIndex) {
+        actingIndex = 2
+        offsetPadding = (this.defaultOffset * 3)
+      } else if (selectedIndex >= this.stopIndex) {
+        offsetPadding = -(this.defaultOffset)
+        actingIndex = selectedIndex - this.stopIndex
+      }
+
+      // Is always off by 1 pixel, send help (┛ಠ_ಠ)┛彡┻━┻
+      offsetPadding--
+
+      return (
+        this.calcTop() +
+        offsetPadding -
+        (actingIndex * (this.defaultOffset * 6))
+      )
+    }
+  }
+}

package/src/components/KNavigationDrawer/KNavigationDrawer.js

@@ -0,0 +1,267 @@
+require('../../stylus/components/_navigation-drawer.styl')
+
+import Applicationable from '../../mixins/applicationable'
+import Overlayable from '../../mixins/overlayable'
+import Themeable from '../../mixins/themeable'
+
+import ClickOutside from '../../directives/click-outside'
+import Resize from '../../directives/resize'
+import Touch from '../../directives/touch'
+
+export default {
+  name: 'k-navigation-drawer',
+
+  mixins: [Applicationable, Overlayable, Themeable],
+
+  directives: {
+    ClickOutside,
+    Resize,
+    Touch
+  },
+
+  data () {
+    return {
+      isActive: this.value,
+      isBooted: false,
+      isMobile: false,
+      touchArea: {
+        left: 0,
+        right: 0
+      }
+    }
+  },
+
+  props: {
+    absolute: Boolean,
+    clipped: Boolean,
+    disableRouteWatcher: Boolean,
+    enableResizeWatcher: Boolean,
+    height: String,
+    floating: Boolean,
+    miniVariant: Boolean,
+    miniVariantWidth: {
+      type: [Number, String],
+      default: 80
+    },
+    mobileBreakPoint: {
+      type: Number,
+      default: 1264
+    },
+    permanent: Boolean,
+    persistent: Boolean,
+    right: Boolean,
+    temporary: Boolean,
+    touchless: Boolean,
+    width: {
+      type: [Number, String],
+      default: 300
+    },
+    value: { required: false }
+  },
+
+  computed: {
+    calculatedHeight () {
+      return this.height || '100%'
+    },
+    calculatedWidth () {
+      return this.miniVariant
+        ? this.miniVariantWidth
+        : this.width
+    },
+    classes () {
+      return {
+        'navigation-drawer': true,
+        'navigation-drawer--absolute': this.absolute,
+        'navigation-drawer--clipped': this.clipped,
+        'navigation-drawer--close': !this.isBooted || !this.isActive,
+        'navigation-drawer--floating': this.floating,
+        'navigation-drawer--is-booted': this.isBooted,
+        'navigation-drawer--is-mobile': this.isMobile,
+        'navigation-drawer--mini-variant': this.miniVariant,
+        'navigation-drawer--open': this.isActive && this.isBooted,
+        'navigation-drawer--permanent': this.permanent,
+        'navigation-drawer--persistent': this.persistent,
+        'navigation-drawer--right': this.right,
+        'navigation-drawer--temporary': this.temporary,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }
+    },
+    marginTop () {
+      if (!this.app) return 0
+      let marginTop = this.$kdutify.application.bar
+
+      marginTop += this.clipped
+        ? this.$kdutify.application.top
+        : 0
+
+      return marginTop
+    },
+    maxHeight () {
+      if (!this.app) return '100%'
+
+      return this.clipped
+        ? this.$kdutify.application.top + this.$kdutify.application.bottom
+        : this.$kdutify.application.bottom
+    },
+    showOverlay () {
+      return !this.permanent &&
+        this.isActive &&
+        (this.temporary || this.isMobile)
+    },
+    styles () {
+      return {
+        height: this.calculatedHeight,
+        marginTop: `${this.marginTop}px`,
+        maxHeight: `calc(100% - ${this.maxHeight}px)`,
+        width: `${this.calculatedWidth}px`
+      }
+    }
+  },
+
+  watch: {
+    $route () {
+      if (!this.disableRouteWatcher) {
+        this.isActive = !this.closeConditional()
+      }
+    },
+    isActive (val) {
+      this.$emit('input', val)
+      this.showOverlay &&
+        val &&
+        this.genOverlay() ||
+        this.removeOverlay()
+      this.$el.scrollTop = 0
+    },
+    isMobile (val) {
+      !val && this.removeOverlay()
+    },
+    permanent (val) {
+      this.$emit('input', val)
+    },
+    value (val) {
+      if (this.permanent) return
+      if (val !== this.isActive) this.isActive = val
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(this.init)
+  },
+
+  methods: {
+    init () {
+      if (this.value != null) this.isActive = this.value
+      else if (this.permanent) this.isActive = true
+      else if (this.isMobile) this.isActive = false
+      else if (!this.value &&
+        (this.persistent || this.temporary)
+      ) this.isActive = false
+      else this.isActive = true
+
+      setTimeout(() => (this.isBooted = true), 0)
+    },
+    calculateTouchArea () {
+      if (!this.$el.parentNode) return
+      const parentRect = this.$el.parentNode.getBoundingClientRect()
+
+      this.touchArea = {
+        left: parentRect.left + 50,
+        right: parentRect.right - 50
+      }
+    },
+    checkIfMobile () {
+      this.isMobile = window.innerWidth < parseInt(this.mobileBreakPoint)
+    },
+    closeConditional () {
+      return !this.permanent && (this.temporary || this.isMobile)
+    },
+    genDirectives () {
+      const directives = [
+        {
+          name: 'click-outside',
+          value: this.closeConditional
+        },
+        {
+          name: 'resize',
+          value: this.onResize
+        }
+      ]
+
+      !this.touchless && directives.push({
+        name: 'touch',
+        value: {
+          parent: true,
+          left: this.swipeLeft,
+          right: this.swipeRight
+        }
+      })
+
+      return directives
+    },
+    onResize () {
+      if (!this.enableResizeWatcher ||
+        this.permanent ||
+        this.temporary
+      ) return
+
+      this.checkIfMobile()
+
+      this.isActive = !this.isMobile
+    },
+    swipeRight (e) {
+      if (this.isActive && !this.right) return
+      this.calculateTouchArea()
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return
+      else if (!this.right &&
+        e.touchstartX <= this.touchArea.left
+      ) this.isActive = true
+      else if (this.right && this.isActive) this.isActive = false
+    },
+    swipeLeft (e) {
+      if (this.isActive && this.right) return
+      this.calculateTouchArea()
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return
+      else if (this.right &&
+        e.touchstartX >= this.touchArea.right
+      ) this.isActive = true
+      else if (!this.right && this.isActive) this.isActive = false
+    },
+    updateApplication () {
+      if (!this.app) return
+
+      const width = !this.isActive ||
+        !this.isBooted ||
+        !this.permanent &&
+        this.$kdutify.breakpoint.width < this.mobileBreakPoint
+        ? 0
+        : this.calculatedWidth
+
+      if (this.right) {
+        this.$kdutify.application.right = width
+      } else {
+        this.$kdutify.application.left = width
+      }
+    }
+  },
+
+  render (h) {
+    this.updateApplication()
+
+    const data = {
+      'class': this.classes,
+      style: this.styles,
+      directives: this.genDirectives(),
+      on: {
+        click: () => this.$emit('update:miniVariant', false)
+      }
+    }
+
+    return h('aside', data, [
+      this.$slots.default,
+      h('div', { 'class': 'navigation-drawer__border' })
+    ])
+  }
+}

package/src/components/KNavigationDrawer/index.js

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

package/src/components/KPagination/KPagination.js

@@ -0,0 +1,168 @@
+require('../../stylus/components/_pagination.styl')
+
+import KIcon from '../KIcon'
+
+import Resize from '../../directives/resize'
+
+export default {
+  name: 'k-pagination',
+
+  directives: { Resize },
+
+  props: {
+    circle: Boolean,
+    disabled: Boolean,
+    length: {
+      type: Number,
+      default: 0,
+      validator: val => val % 1 === 0
+    },
+    totalVisible: [Number, String],
+    nextIcon: {
+      type: String,
+      default: 'chevron_right'
+    },
+    prevIcon: {
+      type: String,
+      default: 'chevron_left'
+    },
+    value: {
+      type: Number,
+      default: 0
+    }
+  },
+
+  data () {
+    return {
+      maxButtons: 0
+    }
+  },
+
+  watch: {
+    value () {
+      this.init()
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'pagination': true,
+        'pagination--circle': this.circle,
+        'pagination--disabled': this.disabled
+      }
+    },
+
+    items () {
+      const maxLength = this.totalVisible || this.maxButtons
+      if (this.length <= maxLength) {
+        return this.range(1, this.length)
+      }
+
+      const even = maxLength % 2 === 0 ? 1 : 0
+      const left = Math.floor(maxLength / 2)
+      const right = this.length - left + 1 + even
+
+      if (this.value >= left && this.value <= right) {
+        const start = this.value - left + 2
+        const end = this.value + left - 2 - even
+
+        return [1, '...', ...this.range(start, end), '...', this.length]
+      } else {
+        return [
+          ...this.range(1, left),
+          '...',
+          ...this.range(this.length - left + 1 + even, this.length)
+        ]
+      }
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load.call(this, this.init)
+  },
+
+  methods: {
+    onResize () {
+      const width = this.$el && this.$el.parentNode
+        ? this.$el.parentNode.clientWidth
+        : window.innerWidth
+
+      this.maxButtons = Math.floor((width - 96) / 42)
+    },
+    init () {
+      this.selected = null
+
+      // Change this
+      setTimeout(() => (this.selected = this.value), 100)
+    },
+    next (e) {
+      e.preventDefault()
+      this.$emit('input', this.value + 1)
+      this.$emit('next')
+    },
+    previous (e) {
+      e.preventDefault()
+      this.$emit('input', this.value - 1)
+      this.$emit('previous')
+    },
+    range (from, to) {
+      const range = []
+
+      from = from > 0 ? from : 1
+
+      for (let i = from; i <= to; i++) {
+        range.push(i)
+      }
+
+      return range
+    },
+    genIcon (h, icon, disabled, fn) {
+      return h('li', [
+        h('a', {
+          class: {
+            'pagination__navigation': true,
+            'pagination__navigation--disabled': disabled
+          },
+          attrs: { href: '#!' },
+          on: { click: fn }
+        }, [h(KIcon, [icon])])
+      ])
+    },
+    genItem (h, i) {
+      return h('a', {
+        class: {
+          'pagination__item': true,
+          'pagination__item--active': i === this.value
+        },
+        attrs: { href: '#!' },
+        on: {
+          click: (e) => {
+            e.preventDefault()
+            this.$emit('input', i)
+          }
+        }
+      }, [i])
+    },
+    genItems (h) {
+      return this.items.map((i) => {
+        return h('li', [
+          isNaN(i) && h('span', { class: 'pagination__more' }, [i]) || this.genItem(h, i)
+        ])
+      })
+    }
+  },
+
+  render (h) {
+    const children = [
+      this.genIcon(h, this.prevIcon, this.value === 1, this.previous),
+      this.genItems(h),
+      this.genIcon(h, this.nextIcon, this.value === this.length, this.next)
+    ]
+
+    return h('ul', {
+      directives: [{ name: 'resize', value: this.onResize }],
+      class: this.classes
+    }, children)
+  }
+}