kdutify 0.16.9-rc.0

package/src/components/KToolbar/KToolbar.js

@@ -0,0 +1,206 @@
+require('../../stylus/components/_toolbar.styl')
+
+import Applicationable from '../../mixins/applicationable'
+import Colorable from '../../mixins/colorable'
+import Themeable from '../../mixins/themeable'
+
+export default {
+  name: 'k-toolbar',
+
+  mixins: [Applicationable, Colorable, Themeable],
+
+  data: () => ({
+    heights: {
+      mobileLandscape: 48,
+      mobile: 56,
+      desktop: 64,
+      dense: 48
+    },
+    denseHeight: 48,
+    defaultHeight: 56,
+    prominentHeight: 64,
+    isExtended: false,
+    isScrollingProxy: false,
+    marginTop: 0,
+    previousScroll: null,
+    target: null
+  }),
+
+  props: {
+    absolute: Boolean,
+    card: Boolean,
+    clippedLeft: Boolean,
+    clippedRight: Boolean,
+    dense: Boolean,
+    extended: Boolean,
+    fixed: Boolean,
+    flat: Boolean,
+    floating: Boolean,
+    height: [Number, String],
+    manualScroll: {
+      type: Boolean,
+      default: null
+    },
+    prominent: Boolean,
+    scrollOffScreen: Boolean,
+    scrollTarget: String,
+    scrollThreshold: {
+      type: Number,
+      default: 100
+    }
+  },
+
+  computed: {
+    computedHeight () {
+      if (this.height) return parseInt(this.height)
+      if (this.dense) return this.heights.dense
+      if (this.prominent ||
+        this.$kdutify.breakpoint.mdAndUp
+      ) return this.heights.desktop
+      if (this.$kdutify.breakpoint.width >
+        this.$kdutify.breakpoint.height
+      ) return this.mobileLandscape
+
+      return this.heights.mobile
+    },
+    computedMarginTop () {
+      return this.marginTop + this.$kdutify.application.bar
+    },
+    classes () {
+      return this.addBackgroundColorClassChecks({
+        'toolbar': true,
+        'elevation-0': this.flat,
+        'toolbar--absolute': this.absolute,
+        'toolbar--card': this.card,
+        'toolbar--clipped': this.clippedLeft || this.clippedRight,
+        'toolbar--dense': this.dense,
+        'toolbar--fixed': this.fixed,
+        'toolbar--floating': this.floating,
+        'toolbar--prominent': this.prominent,
+        'toolbar--extended': this.isExtended,
+        'theme--dark': this.dark,
+        'theme--light': this.light
+      })
+    },
+    isScrolling: {
+      get () {
+        return this.manualScroll != null
+          ? this.manualScroll
+          : this.isScrollingProxy
+      },
+      set (val) {
+        this.isScrollingProxy = val
+      }
+    },
+    paddingLeft () {
+      if (!this.app || this.clippedLeft) return 0
+
+      return this.$kdutify.application.left
+    },
+    paddingRight () {
+      if (!this.app || this.clippedRight) return 0
+
+      return this.$kdutify.application.right
+    },
+    styles () {
+      return this.app && {
+        marginTop: `${this.computedMarginTop}px`,
+        paddingLeft: `${this.paddingLeft}px`,
+        paddingRight: `${this.paddingRight}px`
+      }
+    }
+  },
+
+  watch: {
+    isScrolling (val) {
+      this.whenScrolled(val)
+    }
+  },
+
+  mounted () {
+    this.whenScrolled(this.isScrolling)
+  },
+
+  destroyed () {
+    if (this.app) this.$kdutify.application.top = 0
+  },
+
+  methods: {
+    onScroll () {
+      if (typeof window === 'undefined') return
+
+      if (!this.target) {
+        this.target = this.scrollTarget
+          ? document.querySelector(this.scrollTarget)
+          : window
+      }
+
+      const currentScroll = this.scrollTarget
+        ? this.target.scrollTop
+        : this.target.pageYOffset || document.documentElement.scrollTop
+
+      if (currentScroll < this.scrollThreshold) return
+
+      if (this.previousScroll === null) {
+        this.previousScroll = currentScroll
+      }
+
+      this.isScrollingProxy = this.previousScroll < currentScroll
+
+      this.previousScroll = currentScroll
+    },
+    updateApplication () {
+      if (!this.app) return
+
+      this.$kdutify.application.top = !this.fixed && !this.absolute
+        ? 0
+        : this.isExtended && !this.isScrolling
+          ? this.computedHeight * 2
+          : this.computedHeight
+    },
+    whenScrolled (val) {
+      this.marginTop = val
+        ? -this.$refs.content.clientHeight - 6
+        : 0
+
+      this.updateApplication()
+    }
+  },
+
+  render (h) {
+    this.isExtended = this.extended || !!this.$slots.extension
+    this.updateApplication()
+
+    const children = []
+    const data = {
+      'class': this.classes,
+      style: this.styles,
+      on: this.$listeners
+    }
+
+    if (this.scrollOffScreen) {
+      data.directives = [{
+        name: 'scroll',
+        value: {
+          callback: this.onScroll,
+          target: this.scrollTarget
+        }
+      }]
+    }
+
+    children.push(h('div', {
+      staticClass: 'toolbar__content',
+      style: { height: `${this.computedHeight}px` },
+      ref: 'content'
+    }, this.$slots.default))
+
+    if (this.isExtended) {
+      children.push(h('div', {
+        staticClass: 'toolbar__extension',
+        style: { height: `${this.computedHeight}px` }
+      }, this.$slots.extension))
+    }
+
+    return h('nav', data, children)
+  }
+}

package/src/components/KToolbar/KToolbarSideIcon.js

@@ -0,0 +1,26 @@
+import KBtn from '../../components/KBtn'
+import KIcon from '../../components/KIcon'
+
+export default {
+  name: 'k-toolbar-side-icon',
+
+  functional: true,
+
+  render (h, { slots, listeners, props, data }) {
+    const classes = data.staticClass
+      ? `${data.staticClass} toolbar__side-icon`
+      : 'toolbar__side-icon'
+
+    const d = Object.assign(data, {
+      staticClass: classes,
+      props: Object.assign(props, {
+        icon: true
+      }),
+      on: listeners
+    })
+
+    const defaultSlot = slots().default
+
+    return h(KBtn, d, defaultSlot || [h(KIcon, 'menu')])
+  }
+}

package/src/components/KToolbar/index.js

@@ -0,0 +1,19 @@
+import {
+  createSimpleFunctional
+} from '../../util/helpers'
+
+import KToolbar from './KToolbar'
+import KToolbarSideIcon from './KToolbarSideIcon'
+
+export { KToolbar, KToolbarSideIcon }
+export const KToolbarTitle = createSimpleFunctional('toolbar__title')
+export const KToolbarItems = createSimpleFunctional('toolbar__items')
+
+KToolbar.install = function install (Kdu) {
+  Kdu.component('k-toolbar', KToolbar)
+  Kdu.component('k-toolbar-items', KToolbarItems)
+  Kdu.component('k-toolbar-title', KToolbarTitle)
+  Kdu.component('k-toolbar-side-icon', KToolbarSideIcon)
+}
+
+export default KToolbar

package/src/components/KTooltip/KTooltip.js

@@ -0,0 +1,161 @@
+require('../../stylus/components/_tooltips.styl')
+
+// Mixins
+import Colorable from '../../mixins/colorable'
+import Delayable from '../../mixins/delayable'
+import Dependent from '../../mixins/dependent'
+import Detachable from '../../mixins/detachable'
+import Menuable from '../../mixins/menuable'
+import Toggleable from '../../mixins/toggleable'
+
+export default {
+  name: 'k-tooltip',
+
+  mixins: [Colorable, Delayable, Dependent, Detachable, Menuable, Toggleable],
+
+  data: () => ({
+    calculatedMinWidth: 0,
+    closeDependents: false
+  }),
+
+  props: {
+    debounce: {
+      type: [Number, String],
+      default: 0
+    },
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    tag: {
+      type: String,
+      default: 'span'
+    },
+    transition: String,
+    zIndex: {
+      default: null
+    }
+  },
+
+  computed: {
+    calculatedLeft () {
+      const { activator, content } = this.dimensions
+      let left = 0
+
+      if (this.top || this.bottom) {
+        left = (
+          activator.left +
+          (activator.width / 2) -
+          (content.width / 2)
+        )
+      } else if (this.left || this.right) {
+        left = (
+          activator.left +
+          (this.right ? activator.width : -content.width) +
+          (this.right ? 10 : -10)
+        )
+      }
+
+      return `${this.calcXOverflow(left)}px`
+    },
+    calculatedTop () {
+      const { activator, content } = this.dimensions
+      let top = 0
+
+      if (this.top || this.bottom) {
+        top = (
+          activator.top -
+          (this.top ? activator.height : -activator.height) -
+          (this.top ? 0 : -10)
+        )
+      } else if (this.left || this.right) {
+        top = (
+          activator.top +
+          (activator.height / 2) -
+          (content.height / 2)
+        )
+      }
+
+      return `${this.calcYOverflow(top + this.pageYOffset)}px`
+    },
+    classes () {
+      return {
+        'tooltip--top': this.top,
+        'tooltip--right': this.right,
+        'tooltip--bottom': this.bottom,
+        'tooltip--left': this.left
+      }
+    },
+    computedTransition () {
+      if (this.transition) return this.transition
+      if (this.top) return 'slide-y-reverse-transition'
+      if (this.right) return 'slide-x-transition'
+      if (this.bottom) return 'slide-y-transition'
+      if (this.left) return 'slide-x-reverse-transition'
+    },
+    offsetY () {
+      return this.top || this.bottom
+    },
+    offsetX () {
+      return this.left || this.right
+    },
+    styles () {
+      return {
+        left: this.calculatedLeft,
+        maxWidth: isNaN(this.maxWidth) ? this.maxWidth : `${this.maxWidth}px`,
+        opacity: this.isActive ? 0.9 : 0,
+        top: this.calculatedTop,
+        zIndex: this.zIndex || this.activeZIndex
+      }
+    }
+  },
+
+  methods: {
+    activate () {
+      // Update coordinates and dimensions of menu
+      // and its activator
+      this.updateDimensions()
+      // Start the transition
+      requestAnimationFrame(this.startTransition)
+    }
+  },
+
+  render (h) {
+    const tooltip = h('div', {
+      staticClass: 'tooltip__content',
+      'class': this.addBackgroundColorClassChecks({
+        [this.contentClass]: true,
+        'menuable__content__active': this.isActive
+      }),
+      style: this.styles,
+      attrs: this.attrs,
+      directives: [{
+        name: 'show',
+        value: this.isContentActive
+      }],
+      ref: 'content'
+    }, this.$slots.default)
+
+    return h(this.tag, {
+      staticClass: 'tooltip',
+      'class': this.classes
+    }, [
+      h('transition', {
+        props: {
+          name: this.computedTransition
+        }
+      }, [tooltip]),
+      h('span', {
+        on: {
+          mouseenter: () => {
+            this.runDelay('open', () => (this.isActive = true))
+          },
+          mouseleave: () => {
+            this.runDelay('close', () => (this.isActive = false))
+          }
+        },
+        ref: 'activator'
+      }, this.$slots.activator)
+    ])
+  }
+}

package/src/components/KTooltip/index.js

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

package/src/components/Kdutify/index.js

@@ -0,0 +1,48 @@
+import load from '../../util/load'
+
+const Kdutify = {
+  install (Kdu, opts = {}) {
+    const $kdutify = {
+      load,
+      application: {
+        bar: 0,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+      },
+      breakpoint: {},
+      touchSupport: false
+    }
+
+    Kdu.util.defineReactive({}, 'breakpoint', $kdutify)
+    Kdu.util.defineReactive({}, 'application', $kdutify)
+
+    Kdu.prototype.$kdutify = $kdutify
+
+    if (opts.transitions) {
+      Object.keys(opts.transitions).forEach(key => {
+        const t = opts.transitions[key]
+        if (t.name !== undefined && t.name.startsWith('k-')) {
+          Kdu.component(t.name, t)
+        }
+      })
+    }
+
+    if (opts.directives) {
+      Object.keys(opts.directives).forEach(key => {
+        const d = opts.directives[key]
+        Kdu.directive(d.name, d)
+      })
+    }
+
+    if (opts.components) {
+      Object.keys(opts.components).forEach(key => {
+        const c = opts.components[key]
+        Kdu.use(c)
+      })
+    }
+  }
+}
+
+export default Kdutify

package/src/components/index.js

@@ -0,0 +1,45 @@
+export { default as Kdutify } from './Kdutify'
+export { default as KApp } from './KApp'
+export { default as KAlert } from './KAlert'
+export { default as KAvatar } from './KAvatar'
+export { default as KBadge } from './KBadge'
+export { default as KBottomNav } from './KBottomNav'
+export { default as KBottomSheet } from './KBottomSheet'
+export { default as KBreadcrumbs } from './KBreadcrumbs'
+export { default as KBtn } from './KBtn'
+export { default as KBtnToggle } from './KBtnToggle'
+export { default as KCard } from './KCard'
+export { default as KCarousel } from './KCarousel'
+export { default as KCheckbox } from './KCheckbox'
+export { default as KChip } from './KChip'
+export { default as KDataTable } from './KDataTable'
+export { default as KDatePicker } from './KDatePicker'
+export { default as KDialog } from './KDialog'
+export { default as KDivider } from './KDivider'
+export { default as KExpansionPanel } from './KExpansionPanel'
+export { default as KFooter } from './KFooter'
+export { default as KForm } from './KForm'
+export { default as KGrid } from './KGrid'
+export { default as KIcon } from './KIcon'
+export { default as KList } from './KList'
+export { default as KMenu } from './KMenu'
+export { default as KNavigationDrawer } from './KNavigationDrawer'
+export { default as KPagination } from './KPagination'
+export { default as KParallax } from './KParallax'
+export { default as KProgressCircular } from './KProgressCircular'
+export { default as KProgressLinear } from './KProgressLinear'
+export { default as KRadioGroup } from './KRadioGroup'
+export { default as KSelect } from './KSelect'
+export { default as KSlider } from './KSlider'
+export { default as KSnackbar } from './KSnackbar'
+export { default as KSpeedDial } from './KSpeedDial'
+export { default as KStepper } from './KStepper'
+export { default as KSubheader } from './KSubheader'
+export { default as KSwitch } from './KSwitch'
+export { default as KSystemBar } from './KSystemBar'
+export { default as KTabs } from './KTabs'
+export { default as KTextField } from './KTextField'
+export { default as KTimePicker } from './KTimePicker'
+export { default as KToolbar } from './KToolbar'
+export { default as KTooltip } from './KTooltip'
+export { default as Transitions } from './transitions'

package/src/components/transitions/expand-transition.js

@@ -0,0 +1,34 @@
+import { addOnceEventListener } from '../../util/helpers'
+
+export default {
+  enter (el, done) {
+    // Remove initial transition
+    el.style.transition = 'none'
+    addOnceEventListener(el, 'transitionend', done)
+
+    // Get height that is to be scrolled
+    el.style.overflow = 'hidden'
+    el.style.height = null
+    el.style.display = 'block'
+    const height = `${el.clientHeight}px`
+    el.style.height = 0
+    el.style.transition = null
+
+    setTimeout(() => (el.style.height = height), 100)
+  },
+
+  afterEnter (el) {
+    el.style.height = 'auto'
+    el.style.overflow = null
+  },
+
+  leave (el, done) {
+    addOnceEventListener(el, 'transitionend', done)
+
+    // Set height before we transition to 0
+    el.style.overflow = 'hidden'
+    el.style.height = `${el.clientHeight}px`
+
+    setTimeout(() => (el.style.height = 0), 100)
+  }
+}

package/src/components/transitions/index.js

@@ -0,0 +1,50 @@
+import {
+  createSimpleTransition,
+  createJavaScriptTransition
+} from '../../util/helpers'
+
+import ExpandTransitionFunctions from './expand-transition'
+import RowExpandTransitionFunctions from './row-expand-transition'
+
+// Component specific transitions
+export const KBottomSheetTranstion = createSimpleTransition('bottom-sheet-transition')
+export const KCarouselTransition = createSimpleTransition('carousel-transition')
+export const KCarouselReverseTransition = createSimpleTransition('carousel-reverse-transition')
+export const KTabTransition = createSimpleTransition('tab-transition')
+export const KTabReverseTransition = createSimpleTransition('tab-reverse-transition')
+export const KMenuTransition = createSimpleTransition('menu-transition')
+export const KFabTransition = createSimpleTransition('fab-transition', 'center center', 'out-in')
+
+// Generic transitions
+export const KDialogTransition = createSimpleTransition('dialog-transition')
+export const KDialogBottomTransition = createSimpleTransition('dialog-bottom-transition')
+export const KFadeTransition = createSimpleTransition('fade-transition')
+export const KScaleTransition = createSimpleTransition('scale-transition')
+export const KSlideXTransition = createSimpleTransition('slide-x-transition')
+export const KSlideXReverseTransition = createSimpleTransition('slide-x-reverse-transition')
+export const KSlideYTransition = createSimpleTransition('slide-y-transition')
+export const KSlideYReverseTransition = createSimpleTransition('slide-y-reverse-transition')
+
+// JavaScript transitions
+export const KExpandTransition = createJavaScriptTransition('expand-transition', ExpandTransitionFunctions)
+export const KRowExpandTransition = createJavaScriptTransition('row-expand-transition', RowExpandTransitionFunctions)
+
+export default function install (Kdu) {
+  Kdu.component('k-bottom-sheet-transition', KBottomSheetTranstion)
+  Kdu.component('k-carousel-transition', KCarouselTransition)
+  Kdu.component('k-carousel-reverse-transition', KCarouselReverseTransition)
+  Kdu.component('k-dialog-transition', KDialogTransition)
+  Kdu.component('k-dialog-bottom-transition', KDialogBottomTransition)
+  Kdu.component('k-fab-transition', KFabTransition)
+  Kdu.component('k-fade-transition', KFadeTransition)
+  Kdu.component('k-menu-transition', KMenuTransition)
+  Kdu.component('k-scale-transition', KScaleTransition)
+  Kdu.component('k-slide-x-transition', KSlideXTransition)
+  Kdu.component('k-slide-x-reverse-transition', KSlideXReverseTransition)
+  Kdu.component('k-slide-y-transition', KSlideYTransition)
+  Kdu.component('k-slide-y-reverse-transition', KSlideYReverseTransition)
+  Kdu.component('k-tab-reverse-transition', KTabReverseTransition)
+  Kdu.component('k-tab-transition', KTabTransition)
+  Kdu.component('k-expand-transition', KExpandTransition)
+  Kdu.component('k-row-expand-transition', KRowExpandTransition)
+}

package/src/components/transitions/row-expand-transition.js

@@ -0,0 +1,38 @@
+import { addOnceEventListener } from '../../util/helpers'
+
+export default {
+  enter (el, done) {
+    el.td = el.parentNode
+
+    addOnceEventListener(el, 'transitionend', done)
+
+    // Get height that is to be scrolled
+    const height = el.dataset.height || el.clientHeight
+    el.dataset.height = height
+    el.style.overflow = 'hidden'
+    el.style.height = 0
+    el.td.style['border-bottom'] = '1px solid rgba(0,0,0,0.12)'
+
+    setTimeout(() => {
+      el.dataset.height = el.style.height = `${el.scrollHeight}px`
+    }, 50)
+  },
+  afterEnter (el) {
+    el.style.overflow = null
+  },
+  leave (el, done) {
+    // Remove initial transition
+    addOnceEventListener(el, 'transitionend', done)
+
+    // Set height before we transition to 0
+    el.style.overflow = 'hidden'
+    el.style.height = `${el.dataset.height}px`
+
+    setTimeout(() => {
+      el.style.height = 0
+    }, 50)
+  },
+  afterLeave (el) {
+    el.td.style['border-bottom'] = null
+  }
+}