@kokoccc/vuetify 1.0.1

package/src/components/VMessages/__tests__/__snapshots__/VMessages.spec.ts.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VMessages.ts should accept a scoped slot 1`] = `
+<div class="v-messages theme--light">
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message">
+      <div>
+        Foo
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VMessages.ts should allow HTML 1`] = `
+<div class="v-messages theme--light">
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message">
+      &lt;a href="#"&gt;a link&lt;/a&gt;
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VMessages.ts should not allow HTML 1`] = `
+<div class="v-messages theme--light">
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message">
+      &lt;a href="#"&gt;a link&lt;/a&gt;
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VMessages.ts should show messages 1`] = `
+<div class="v-messages theme--light">
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message">
+      foo
+    </div>
+    <div class="v-messages__message">
+      bar
+    </div>
+  </div>
+</div>
+`;
+
+exports[`VMessages.ts should show messages 2`] = `
+<div class="v-messages theme--light">
+  <div class="v-messages__wrapper">
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      foo
+    </div>
+    <div class="v-messages__message message-transition-leave-from message-transition-leave-active">
+      bar
+    </div>
+  </div>
+</div>
+`;

package/src/components/VMessages/_variables.scss

@@ -0,0 +1,5 @@
+@import '../../styles/styles.sass';
+
+$messages-font-size: 12px !default;
+$messages-line-height: $messages-font-size !default;
+$messages-min-height: 14px !default;

package/src/components/VMessages/index.ts

@@ -0,0 +1,4 @@
+import VMessages from './VMessages'
+
+export { VMessages }
+export default VMessages

package/src/components/VNavigationDrawer/VNavigationDrawer.sass

@@ -0,0 +1,127 @@
+@import './_variables.scss'
+
+// Theme
++theme(v-navigation-drawer) using ($material)
+  background-color: map-get($material, 'navigation-drawer')
+
+  &:not(.v-navigation-drawer--floating)
+    .v-navigation-drawer__border
+      background-color: map-get($material, 'dividers')
+
+  .v-divider
+    border-color: map-get($material, 'dividers')
+
+// Block
+.v-navigation-drawer
+  -webkit-overflow-scrolling: touch
+  display: flex
+  flex-direction: column
+  left: 0
+  max-width: 100%
+  overflow: hidden
+  pointer-events: auto
+  top: 0
+  transition-duration: 0.2s
+  transition-timing-function: map-get($transition, 'fast-out-slow-in')
+  transition-property: transform, visibility, width
+  +bootable()
+
+  &.v-navigation-drawer--right
+    &:after
+      left: 0
+      right: initial
+
+  .v-list:not(.v-select-list)
+    background: inherit
+
+// Element
+.v-navigation-drawer__border
+  position: absolute
+  right: 0
+  top: 0
+  height: 100%
+  width: $navigation-drawer-border-width
+
+.v-navigation-drawer__content
+  height: 100%
+  overflow-y: auto
+  overflow-x: hidden
+
+.v-navigation-drawer__image
+  border-radius: inherit
+  height: 100%
+  position: absolute
+  top: 0
+  bottom: 0
+  z-index: -1
+  contain: strict
+  width: 100%
+
+  .v-image
+    border-radius: inherit
+
+// Modifier
+.v-navigation-drawer--bottom.v-navigation-drawer--is-mobile
+  max-height: 50%
+  top: auto
+  bottom: 0
+  min-width: 100%
+
+.v-navigation-drawer--right
+  left: auto
+  right: 0
+
+  > .v-navigation-drawer__border
+    right: auto
+    left: 0
+
+.v-navigation-drawer--absolute
+  z-index: 1
+
+.v-navigation-drawer--fixed
+  z-index: 6
+
+.v-navigation-drawer--absolute
+  position: absolute
+
+.v-navigation-drawer--clipped:not(.v-navigation-drawer--temporary):not(.v-navigation-drawer--is-mobile)
+  z-index: 4
+
+.v-navigation-drawer--fixed
+  position: fixed
+
+.v-navigation-drawer--floating:after
+  display: none
+
+.v-navigation-drawer--mini-variant
+  overflow: hidden
+
+  .v-list-item
+    > *:first-child
+      margin-left: 0
+      margin-right: 0
+
+    > *:not(:first-child)
+      @include visually-hidden
+
+  .v-list-group--no-action .v-list-group__items,
+  .v-list-group--sub-group
+    display: none
+
+  &.v-navigation-drawer--custom-mini-variant
+    .v-list-item
+      justify-content: center
+
+.v-navigation-drawer--temporary
+  z-index: 7
+
+.v-navigation-drawer--mobile
+  z-index: 6
+
+.v-navigation-drawer--close
+  visibility: hidden
+
+.v-navigation-drawer--is-mobile,
+.v-navigation-drawer--temporary
+  &:not(.v-navigation-drawer--close)
+    +elevation($navigation-drawer-mobile-temporary-elevation)

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -0,0 +1,477 @@
+import { h, withDirectives } from 'vue'
+// Styles
+import './VNavigationDrawer.sass'
+
+// Components
+import VImg, { srcObject } from '../VImg/VImg'
+
+// Mixins
+import Applicationable from '../../mixins/applicationable'
+import Colorable from '../../mixins/colorable'
+import Dependent from '../../mixins/dependent'
+import Mobile from '../../mixins/mobile'
+import Overlayable from '../../mixins/overlayable'
+import SSRBootable from '../../mixins/ssr-bootable'
+import Themeable from '../../mixins/themeable'
+
+// Directives
+import ClickOutside from '../../directives/click-outside'
+import Resize from '../../directives/resize'
+import Touch from '../../directives/touch'
+
+// Utilities
+import { convertToUnit, getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode, VNodeDirective, PropType } from 'vue'
+import { TouchWrapper } from 'vuetify/types'
+
+const baseMixins = mixins(
+  Applicationable('left', [
+    'isActive',
+    'isMobile',
+    'miniVariant',
+    'expandOnHover',
+    'permanent',
+    'right',
+    'temporary',
+    'width',
+  ]),
+  Colorable,
+  Dependent,
+  Mobile,
+  Overlayable,
+  SSRBootable,
+  Themeable
+)
+
+/* @vue/component */
+export default baseMixins.extend({
+  name: 'v-navigation-drawer',
+
+  provide (): object {
+    return {
+      isInNav: this.$tag === 'nav',
+    }
+  },
+
+  props: {
+    bottom: Boolean,
+    clipped: Boolean,
+    disableResizeWatcher: Boolean,
+    disableRouteWatcher: Boolean,
+    expandOnHover: Boolean,
+    floating: Boolean,
+    height: {
+      type: [Number, String],
+    },
+    miniVariant: Boolean,
+    miniVariantWidth: {
+      type: [Number, String],
+      default: 56,
+    },
+    permanent: Boolean,
+    right: Boolean,
+    src: {
+      type: [String, Object] as PropType<string | srcObject>,
+      default: '',
+    },
+    stateless: Boolean,
+    tag: {
+      type: String,
+    },
+    temporary: Boolean,
+    touchless: Boolean,
+    width: {
+      type: [Number, String],
+      default: 256,
+    },
+    modelValue: null as unknown as PropType<any>,
+  },
+
+  emits: ['update:modelValue', 'transitionend', 'update:mini-variant'],
+
+  data: () => ({
+    isMouseover: false,
+    touchArea: {
+      left: 0,
+      right: 0,
+    },
+    stackMinZIndex: 6,
+  }),
+
+  computed: {
+    $tag () {
+      return this.tag || this.app ? 'nav' : 'aside'
+    },
+    $height () {
+      return this.height || (this.app ? '100vh' : '100%')
+    },
+    /**
+     * Used for setting an app value from a dynamic
+     * property. Called from applicationable.js
+     */
+    applicationProperty (): string {
+      return this.right ? 'right' : 'left'
+    },
+    classes (): object {
+      return {
+        'v-navigation-drawer': true,
+        'v-navigation-drawer--absolute': this.absolute,
+        'v-navigation-drawer--bottom': this.bottom,
+        'v-navigation-drawer--clipped': this.clipped,
+        'v-navigation-drawer--close': !this.isActive,
+        'v-navigation-drawer--fixed': !this.absolute && (this.app || this.fixed),
+        'v-navigation-drawer--floating': this.floating,
+        'v-navigation-drawer--is-mobile': this.isMobile,
+        'v-navigation-drawer--is-mouseover': this.isMouseover,
+        'v-navigation-drawer--mini-variant': this.isMiniVariant,
+        'v-navigation-drawer--custom-mini-variant': Number(this.miniVariantWidth) !== 56,
+        'v-navigation-drawer--open': this.isActive,
+        'v-navigation-drawer--open-on-hover': this.expandOnHover,
+        'v-navigation-drawer--right': this.right,
+        'v-navigation-drawer--temporary': this.temporary,
+        ...this.themeClasses,
+      }
+    },
+    computedMaxHeight (): number | null {
+      if (!this.hasApp) return null
+
+      const computedMaxHeight = (
+        this.$vuetify.application.bottom +
+        this.$vuetify.application.footer +
+        this.$vuetify.application.bar
+      )
+
+      if (!this.clipped) return computedMaxHeight
+
+      return computedMaxHeight + this.$vuetify.application.top
+    },
+    computedTop (): number {
+      if (!this.hasApp) return 0
+
+      let computedTop = this.$vuetify.application.bar
+
+      computedTop += this.clipped
+        ? this.$vuetify.application.top
+        : 0
+
+      return computedTop
+    },
+    computedTransform (): number {
+      if (this.isActive) return 0
+      if (this.isBottom) return 100
+      return this.right ? 100 : -100
+    },
+    computedWidth (): string | number {
+      return this.isMiniVariant ? this.miniVariantWidth : this.width
+    },
+    hasApp (): boolean {
+      return (
+        this.app &&
+        (!this.isMobile && !this.temporary)
+      )
+    },
+    isBottom (): boolean {
+      return this.bottom && this.isMobile
+    },
+    isMiniVariant (): boolean {
+      return (
+        !this.expandOnHover &&
+        this.miniVariant
+      ) || (
+        this.expandOnHover &&
+        !this.isMouseover
+      )
+    },
+    isMobile (): boolean {
+      return (
+        !this.stateless &&
+        !this.permanent &&
+        Mobile.computed.isMobile.call(this)
+      )
+    },
+    reactsToClick (): boolean {
+      return (
+        !this.stateless &&
+        !this.permanent &&
+        (this.isMobile || this.temporary)
+      )
+    },
+    reactsToMobile (): boolean {
+      return (
+        this.app &&
+        !this.disableResizeWatcher &&
+        !this.permanent &&
+        !this.stateless &&
+        !this.temporary
+      )
+    },
+    reactsToResize (): boolean {
+      return !this.disableResizeWatcher && !this.stateless
+    },
+    reactsToRoute (): boolean {
+      return (
+        !this.disableRouteWatcher &&
+        !this.stateless &&
+        (this.temporary || this.isMobile)
+      )
+    },
+    showOverlay (): boolean {
+      return (
+        !this.hideOverlay &&
+        this.isActive &&
+        (this.isMobile || this.temporary)
+      )
+    },
+    styles (): object {
+      const translate = this.isBottom ? 'translateY' : 'translateX'
+      return {
+        height: convertToUnit(this.$height),
+        top: !this.isBottom ? convertToUnit(this.computedTop) : 'auto',
+        maxHeight: this.computedMaxHeight != null
+          ? `calc(100% - ${convertToUnit(this.computedMaxHeight)})`
+          : undefined,
+        transform: `${translate}(${convertToUnit(this.computedTransform, '%')})`,
+        width: convertToUnit(this.computedWidth),
+      }
+    },
+  },
+
+  watch: {
+    $route: 'onRouteChange',
+    isActive (val) {
+      this.$emit('update:modelValue', val)
+    },
+    /**
+     * When mobile changes, adjust the active state
+     * only when there has been a previous value
+     */
+    isMobile (val, prev) {
+      !val &&
+        this.isActive &&
+        !this.temporary &&
+        this.removeOverlay()
+
+      if (prev == null ||
+        !this.reactsToResize ||
+        !this.reactsToMobile
+      ) return
+
+      this.isActive = !val
+    },
+    permanent (val) {
+      // If enabling prop enable the drawer
+      if (val) this.isActive = true
+    },
+    showOverlay (val) {
+      if (val) this.genOverlay()
+      else this.removeOverlay()
+    },
+    modelValue (val) {
+      if (this.permanent) return
+
+      if (val == null) {
+        this.init()
+        return
+      }
+
+      if (val !== this.isActive) this.isActive = val
+    },
+    expandOnHover: 'updateMiniVariant',
+    isMouseover (val) {
+      this.updateMiniVariant(!val)
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['value', 'modelValue'],
+      ['onInput', 'onUpdate:modelValue'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  beforeMount () {
+    this.init()
+  },
+
+  methods: {
+    calculateTouchArea () {
+      const parent = this.$el.parentNode as Element
+
+      if (!parent) return
+
+      const parentRect = parent.getBoundingClientRect()
+
+      this.touchArea = {
+        left: parentRect.left + 50,
+        right: parentRect.right - 50,
+      }
+    },
+    closeConditional () {
+      return this.isActive && !this.$.isUnmounted && this.reactsToClick
+    },
+    genAppend () {
+      return this.genPosition('append')
+    },
+    genBackground () {
+      const props = {
+        height: '100%',
+        width: '100%',
+        src: this.src,
+      }
+
+      const image = this.$slots.img
+        ? this.$slots.img(props)
+        : h(VImg, { props })
+
+      return h('div', {
+        class: 'v-navigation-drawer__image',
+      }, [image])
+    },
+    genDirectives (): VNodeDirective[] {
+      return [
+        [
+          ClickOutside,
+          {
+            handler: () => { this.isActive = false },
+            closeConditional: this.closeConditional,
+            include: this.getOpenDependentElements,
+          },
+        ],
+        [
+          Touch,
+          {
+            parent: true,
+            left: this.swipeLeft,
+            right: this.swipeRight,
+            isDirActive: !this.touchless && !this.stateless,
+          },
+        ],
+      ]
+    },
+    genListeners () {
+      const on: Record<string, (e: Event) => void> = {
+        onMouseenter: () => (this.isMouseover = true),
+        onMouseleave: () => (this.isMouseover = false),
+        onTransitionend: (e: Event) => {
+          if (e.target !== e.currentTarget) return
+          this.$emit('transitionend', e)
+
+          // IE11 does not support new Event('resize')
+          const resizeEvent = document.createEvent('UIEvents')
+          resizeEvent.initUIEvent('resize', true, false, window, 0)
+          window.dispatchEvent(resizeEvent)
+        },
+      }
+
+      if (this.miniVariant) {
+        on.onClick = () => this.$emit('update:mini-variant', false)
+      }
+
+      return on
+    },
+    genPosition (name: 'prepend' | 'append') {
+      const slot = getSlot(this, name)
+
+      if (!slot) return slot
+
+      return h('div', {
+        class: `v-navigation-drawer__${name}`,
+      }, slot)
+    },
+    genPrepend () {
+      return this.genPosition('prepend')
+    },
+    genContent () {
+      return h('div', {
+        class: 'v-navigation-drawer__content',
+      }, getSlot(this))
+    },
+    genBorder () {
+      return h('div', {
+        class: 'v-navigation-drawer__border',
+      })
+    },
+    init () {
+      if (this.permanent) {
+        this.isActive = true
+      } else if (this.stateless ||
+        this.modelValue != null
+      ) {
+        this.isActive = this.modelValue
+      } else if (!this.temporary) {
+        this.isActive = !this.isMobile
+      }
+    },
+    onRouteChange () {
+      if (this.reactsToRoute && this.closeConditional()) {
+        this.isActive = false
+      }
+    },
+    swipeLeft (e: TouchWrapper) {
+      if (this.isActive && this.right) return
+      this.calculateTouchArea()
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return
+      if (this.right &&
+        e.touchstartX >= this.touchArea.right
+      ) this.isActive = true
+      else if (!this.right && this.isActive) this.isActive = false
+    },
+    swipeRight (e: TouchWrapper) {
+      if (this.isActive && !this.right) return
+      this.calculateTouchArea()
+
+      if (Math.abs(e.touchendX - e.touchstartX) < 100) return
+      if (!this.right &&
+        e.touchstartX <= this.touchArea.left
+      ) this.isActive = true
+      else if (this.right && this.isActive) this.isActive = false
+    },
+    /**
+     * Update the application layout
+     */
+    updateApplication () {
+      if (
+        !this.isActive ||
+        this.isMobile ||
+        this.temporary ||
+        !this.$el
+      ) return 0
+
+      const width = Number(this.miniVariant ? this.miniVariantWidth : this.width)
+
+      return isNaN(width) ? this.$el.clientWidth : width
+    },
+    updateMiniVariant (val: boolean) {
+      if (this.expandOnHover && this.miniVariant !== val) this.$emit('update:mini-variant', val)
+    },
+  },
+
+  render (): VNode {
+    const children = [
+      this.genPrepend(),
+      this.genContent(),
+      this.genAppend(),
+      this.genBorder(),
+    ]
+
+    if (this.src || getSlot(this, 'img')) children.unshift(this.genBackground())
+
+    const node = h(this.$tag, this.setBackgroundColor(this.color, {
+      class: this.classes,
+      style: this.styles,
+      ...this.genListeners(),
+    }), children)
+
+    return withDirectives(node, this.genDirectives())
+  },
+})