kdutify 0.16.9-rc.0

package/src/components/KStepper/KStepperContent.js

@@ -0,0 +1,138 @@
+import {
+  KTabTransition,
+  KTabReverseTransition
+} from '../transitions'
+
+export default {
+  name: 'k-stepper-content',
+
+  components: {
+    KTabTransition,
+    KTabReverseTransition
+  },
+
+  data () {
+    return {
+      height: 0,
+      isActive: false,
+      isReverse: false,
+      isVertical: false
+    }
+  },
+
+  props: {
+    step: {
+      type: [Number, String],
+      required: true
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'stepper__content': true
+      }
+    },
+    computedTransition () {
+      return this.isReverse
+        ? 'k-tab-reverse-transition'
+        : 'k-tab-transition'
+    },
+    styles () {
+      if (!this.isVertical) return {}
+
+      return {
+        height: !isNaN(this.height) ? `${this.height}px` : this.height
+      }
+    },
+    wrapperClasses () {
+      return {
+        'stepper__wrapper': true
+      }
+    }
+  },
+
+  watch: {
+    isActive () {
+      if (!this.isVertical) {
+        return
+      }
+
+      if (this.isActive) {
+        this.enter()
+      } else {
+        this.leave()
+      }
+    }
+  },
+
+  mounted () {
+    this.$refs.wrapper.addEventListener(
+      'transitionend',
+      this.onTransition,
+      false
+    )
+  },
+
+  beforeDestroy () {
+    this.$refs.wrapper.removeEventListener(
+      'transitionend',
+      this.onTransition,
+      false
+    )
+  },
+
+  methods: {
+    onTransition () {
+      if (!this.isActive) return
+
+      this.height = 'auto'
+    },
+    enter () {
+      let scrollHeight = 0
+
+      // Render bug with height
+      setTimeout(() => {
+        scrollHeight = this.$refs.wrapper.scrollHeight
+      }, 0)
+
+      this.height = 0
+
+      // Give the collapsing element time to collapse
+      setTimeout(() => (this.height = (scrollHeight || 'auto')), 450)
+    },
+    leave () {
+      this.height = this.$refs.wrapper.clientHeight
+      setTimeout(() => (this.height = 0), 0)
+    },
+    toggle (step, reverse) {
+      this.isActive = step.toString() === this.step.toString()
+      this.isReverse = reverse
+    }
+  },
+
+  render (h) {
+    const contentData = {
+      'class': this.classes
+    }
+    const wrapperData = {
+      'class': this.wrapperClasses,
+      style: this.styles,
+      ref: 'wrapper'
+    }
+
+    if (!this.isVertical) {
+      contentData.directives = [{
+        name: 'show',
+        value: this.isActive
+      }]
+    }
+
+    const wrapper = h('div', wrapperData, [this.$slots.default])
+    const content = h('div', contentData, [wrapper])
+
+    return h(this.computedTransition, {
+      on: this.$listeners
+    }, [content])
+  }
+}

package/src/components/KStepper/KStepperStep.js

@@ -0,0 +1,100 @@
+import KIcon from '../KIcon'
+import Ripple from '../../directives/ripple'
+
+export default {
+  name: 'k-stepper-step',
+
+  components: { KIcon },
+
+  directives: { Ripple },
+
+  inject: ['stepClick'],
+
+  data () {
+    return {
+      isActive: false,
+      isInactive: true
+    }
+  },
+
+  props: {
+    complete: Boolean,
+    completeIcon: {
+      type: String,
+      default: 'check'
+    },
+    editIcon: {
+      type: String,
+      default: 'edit'
+    },
+    errorIcon: {
+      type: String,
+      default: 'warning'
+    },
+    editable: Boolean,
+    rules: {
+      type: Array,
+      default: () => []
+    },
+    step: [Number, String]
+  },
+
+  computed: {
+    classes () {
+      return {
+        'stepper__step': true,
+        'stepper__step--active': this.isActive,
+        'stepper__step--editable': this.editable,
+        'stepper__step--inactive': this.isInactive,
+        'stepper__step--error': this.hasError,
+        'stepper__step--complete': this.complete
+      }
+    },
+    hasError () {
+      return this.rules.some(i => (i() !== true))
+    }
+  },
+
+  methods: {
+    click (e) {
+      e.stopPropagation()
+
+      if (this.editable) {
+        this.stepClick(this.step)
+      }
+    },
+    toggle (step) {
+      this.isActive = step.toString() === this.step.toString()
+      this.isInactive = Number(step) < Number(this.step)
+    }
+  },
+
+  render (h) {
+    const data = {
+      'class': this.classes,
+      directives: [{
+        name: 'ripple',
+        value: this.editable
+      }],
+      on: { click: this.click }
+    }
+    let stepContent
+
+    if (this.hasError) {
+      stepContent = [h('k-icon', {}, this.errorIcon)]
+    } else if (this.complete) {
+      if (this.editable) {
+        stepContent = [h('k-icon', {}, this.editIcon)]
+      } else {
+        stepContent = [h('k-icon', {}, this.completeIcon)]
+      }
+    } else {
+      stepContent = this.step
+    }
+
+    const step = h('span', { 'class': 'stepper__step__step' }, stepContent)
+    const label = h('div', { 'class': 'stepper__label' }, this.$slots.default)
+
+    return h('div', data, [step, label])
+  }
+}

package/src/components/KStepper/index.js

@@ -0,0 +1,17 @@
+import { createSimpleFunctional } from '../../util/helpers'
+import KStepper from './KStepper'
+import KStepperStep from './KStepperStep'
+import KStepperContent from './KStepperContent'
+
+KStepper.install = function install (Kdu) {
+  const KStepperHeader = createSimpleFunctional('stepper__header')
+  const KStepperItems = createSimpleFunctional('stepper__items')
+
+  Kdu.component(KStepper.name, KStepper)
+  Kdu.component(KStepperContent.name, KStepperContent)
+  Kdu.component(KStepperStep.name, KStepperStep)
+  Kdu.component(KStepperHeader.name, KStepperHeader)
+  Kdu.component(KStepperItems.name, KStepperItems)
+}
+
+export default KStepper

package/src/components/KSubheader/KSubheader.js

@@ -0,0 +1,25 @@
+require('../../stylus/components/_subheaders.styl')
+
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-subheader',
+
+  functional: true,
+
+  mixins: [Themeable],
+
+  props: {
+    inset: Boolean
+  },
+
+  render (h, { data, children, props }) {
+    data.staticClass = (`subheader ${data.staticClass || ''}`).trim()
+
+    if (props.inset) data.staticClass += ' subheader--inset'
+    if (props.light) data.staticClass += ' theme--light'
+    if (props.dark) data.staticClass += ' theme--dark'
+
+    return h('li', data, children)
+  }
+}

package/src/components/KSubheader/index.js

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

package/src/components/KSwitch/KSwitch.js

@@ -0,0 +1,58 @@
+require('../../stylus/components/_input-groups.styl')
+require('../../stylus/components/_selection-controls.styl')
+require('../../stylus/components/_switch.styl')
+
+import Rippleable from '../../mixins/rippleable'
+import Selectable from '../../mixins/selectable'
+
+export default {
+  name: 'k-switch',
+
+  mixins: [Rippleable, Selectable],
+
+  computed: {
+    classes () {
+      const classes = {
+        'input-group--selection-controls switch': true
+      }
+
+      if (this.hasError) {
+        classes['error--text'] = true
+      } else {
+        return this.addTextColorClassChecks(classes)
+      }
+
+      return classes
+    },
+    rippleClasses () {
+      return {
+        'input-group--selection-controls__ripple': true,
+        'input-group--selection-controls__ripple--active': this.isActive
+      }
+    },
+    containerClasses () {
+      return {
+        'input-group--selection-controls__container': true,
+        'input-group--selection-controls__container--light': this.light,
+        'input-group--selection-controls__container--disabled': this.disabled
+      }
+    },
+    toggleClasses () {
+      return {
+        'input-group--selection-controls__toggle': true,
+        'input-group--selection-controls__toggle--active': this.isActive
+      }
+    }
+  },
+
+  render (h) {
+    const container = h('div', {
+      'class': this.containerClasses
+    }, [
+      h('div', { 'class': this.toggleClasses }),
+      this.genRipple()
+    ])
+
+    return this.genInputGroup([container])
+  }
+}

package/src/components/KSwitch/index.js

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

package/src/components/KSystemBar/KSystemBar.js

@@ -0,0 +1,54 @@
+require('../../stylus/components/_system-bars.styl')
+
+import Applicationable from '../../mixins/applicationable'
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-system-bar',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  props: {
+    lightsOut: Boolean,
+    status: Boolean,
+    window: Boolean
+  },
+
+  computed: {
+    classes () {
+      return this.addBackgroundColorClassChecks({
+        'system-bar': true,
+        'system-bar--lights-out': this.lightsOut,
+        'system-bar--status': this.status,
+        'system-bar--window': this.window,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      })
+    },
+    computedHeight () {
+      if (this.window) return 32
+
+      return 24
+    }
+  },
+
+  methods: {
+    updateApplication () {
+      if (!this.app) return
+
+      this.$kdutify.application.bar = this.computedHeight
+    }
+  },
+
+  render (h) {
+    const data = {
+      'class': this.classes,
+      style: {
+        height: `${this.computedHeight}px`
+      }
+    }
+
+    return h('div', data, this.$slots.default)
+  }
+}

package/src/components/KSystemBar/index.js

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

package/src/components/KTabs/KTabs.js

@@ -0,0 +1,240 @@
+require('../../stylus/components/_tabs.styl')
+
+import Themeable from '../../mixins/themeable'
+import Resize from '../../directives/resize'
+
+export default {
+  name: 'k-tabs',
+
+  directives: {
+    Resize
+  },
+
+  mixins: [Themeable],
+
+  provide () {
+    return {
+      registerContent: this.registerContent,
+      unregisterContent: this.unregisterContent,
+      registerTabItem: this.registerTabItem,
+      unregisterTabItem: this.unregisterTabItem,
+      next: this.next,
+      prev: this.prev,
+      slider: this.slider,
+      tabClick: this.tabClick,
+      isScrollable: () => this.scrollable,
+      isMobile: () => this.isMobile
+    }
+  },
+
+  data () {
+    return {
+      content: [],
+      tabItems: [],
+      activeIndex: null,
+      isBooted: false,
+      isMobile: false,
+      resizeTimeout: null,
+      reverse: false,
+      target: null,
+      tabsSlider: null,
+      targetEl: null,
+      tabsContainer: null,
+      transitionTime: 300
+    }
+  },
+
+  props: {
+    centered: Boolean,
+    fixed: Boolean,
+    grow: Boolean,
+    icons: Boolean,
+    mobileBreakPoint: {
+      type: [Number, String],
+      default: 1280
+    },
+    value: String,
+    scrollable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  computed: {
+    classes () {
+      return {
+        'tabs': true,
+        'tabs--centered': this.centered,
+        'tabs--fixed': this.fixed,
+        'tabs--grow': this.grow,
+        'tabs--icons': this.icons,
+        'tabs--mobile': this.isMobile,
+        'tabs--scroll-bars': this.scrollable,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      }
+    }
+  },
+
+  watch: {
+    value () {
+      this.tabClick(this.value)
+    },
+    activeIndex () {
+      this.updateTabs()
+      this.$nextTick(() => (this.isBooted = true))
+    },
+    tabItems (newItems, oldItems) {
+      // Tab item got removed
+      if (oldItems.length > newItems.length) {
+        if (!newItems.find(o => o.id === this.target)) {
+          const i = oldItems.findIndex(o => o.id === this.target)
+
+          this.$nextTick(() => {
+            this.activeIndex = this.tabItems[i > 0 ? i - 1 : 0].id
+            this.target = this.activeIndex
+          })
+        }
+      }
+      this.slider()
+    },
+    '$kdutify.application.left' () {
+      this.onContainerResize()
+    },
+    '$kdutify.application.right' () {
+      this.onContainerResize()
+    }
+  },
+
+  mounted () {
+    this.$kdutify.load(() => {
+      // // This is a workaround to detect if link is active
+      // // when being used as a router or nuxt link
+      const i = this.tabItems.findIndex(({ el }) => {
+        return el.firstChild.classList.contains('tabs__item--active')
+      })
+
+      const tab = this.value || (this.tabItems[i !== -1 ? i : 0] || {}).id
+
+      tab && this.tabClick(tab) && this.onResize()
+    })
+  },
+
+  methods: {
+    registerContent (id, toggle) {
+      this.content.push({ id, toggle })
+    },
+    registerTabItem (id, toggle, el) {
+      this.tabItems.push({ id, toggle, el })
+    },
+    unregisterContent (id) {
+      this.content = this.content.filter(o => o.id !== id)
+    },
+    unregisterTabItem (id) {
+      this.tabItems = this.tabItems.filter(o => o.id !== id)
+    },
+    next (cycle) {
+      let nextIndex = this.activeIndex + 1
+
+      if (!this.content[nextIndex]) {
+        if (!cycle) return
+        nextIndex = 0
+      }
+
+      this.tabClick(this.tabItems[nextIndex].id)
+    },
+    prev (cycle) {
+      let prevIndex = this.activeIndex - 1
+
+      if (!this.content[prevIndex]) {
+        if (!cycle) return
+        prevIndex = this.content.length - 1
+      }
+
+      this.tabClick(this.tabItems[prevIndex].id)
+    },
+    onResize () {
+      this.isMobile = window.innerWidth < this.mobileBreakPoint
+      this.slider()
+    },
+    /**
+     * When k-navigation-drawer changes the
+     * width of the container, call resize
+     * after the transition is complete
+     *
+     * @return {Void}
+     */
+    onContainerResize () {
+      clearTimeout(this.resizeTimeout)
+      this.resizeTimeout = setTimeout(this.onResize, this.transitionTime)
+    },
+    slider (el) {
+      this.tabsSlider = this.tabsSlider ||
+        this.$el.querySelector('.tabs__slider')
+
+      this.tabsContainer = this.tabsContainer ||
+        this.$el.querySelector('.tabs__container')
+
+      if (!this.tabsSlider || !this.tabsContainer) return
+
+      this.targetEl = el || this.targetEl
+
+      if (!this.targetEl) return
+
+      // Gives DOM time to paint when
+      // processing slider for
+      // dynamic tabs
+      this.$nextTick(() => {
+        // #684 Calculate width as %
+        const width = (
+          this.targetEl.scrollWidth /
+          this.tabsContainer.clientWidth *
+          100
+        )
+
+        this.tabsSlider.style.width = `${width}%`
+        this.tabsSlider.style.left = `${this.targetEl.offsetLeft}px`
+      })
+    },
+    tabClick (target) {
+      const setActiveIndex = index => {
+        if (this.activeIndex === index) {
+          // #762 update tabs display
+          // In case tabs count got changed but activeIndex didn't
+          this.updateTabs()
+        } else {
+          this.activeIndex = index
+        }
+      }
+
+      this.target = target
+
+      this.$nextTick(() => {
+        const nextIndex = this.content.findIndex(o => o.id === target)
+        this.reverse = nextIndex < this.activeIndex
+        setActiveIndex(nextIndex)
+
+        this.$emit('input', this.target)
+      })
+    },
+    updateTabs () {
+      this.content.forEach(({ toggle }) => {
+        toggle(this.target, this.reverse, this.isBooted)
+      })
+
+      this.tabItems.forEach(({ toggle }) => {
+        toggle(this.target)
+      })
+    }
+  },
+
+  render (h) {
+    return h('div', {
+      'class': this.classes,
+      directives: [{
+        name: 'resize',
+        value: this.onResize
+      }]
+    }, this.$slots.default)
+  }
+}