Merge v1.2.4 (#13)

* Filter comments to count actual rendered elements

* Remove unnecesary conditional

* Filter out VNodes with empty text

* fix(VImg): allow transition to be disabled

* fix(v-combobox): update onEnterDown logic

should let v-select-list handle the update if user is selecting index

fixes vuetifyjs#5008

* fix(v-slider): remove duplicate change event

onMouseUp is already triggered by v-input, our mouseUp usage is more internal for slider, just
renamed method

fixes vuetifyjs#4996

* fix(v-combobox): prevent default action

when using a combobox, enter should be treated differently and not invoke a form submit

fixes vuetifyjs#4974

* fix(VMenu): make detached provide reactive

fixes vuetifyjs#5010

* fix(VBreadcrumbs): add Themeable classes

fixes vuetifyjs#4986

* Fix vuetifyjs#3904: dividers are not shown in dynamic vertical stepper (vuetifyjs#4767)

* Fix vuetifyjs#4696: Checkbox is hard to click with ripple disabled (vuetifyjs#4776)

* test(v-stepper-ccontent): add provide

* [release] 1.2.2

* fix(v-footer): fix applicationProperty update

add new value for inset footer to applicationable

fixes vuetifyjs#4686

* [release] 1.1.16

* [release] 1.2.3

* fix(VMenu): inherit light/dark from v-app

playground: https://pastebin.com/raw/jtLrtVtP

* fix(DatePicker): Title spacing when month === August (vuetifyjs#5027)

* fix(v-autocomplete): add conditional for single-line

fixes vuetifyjs#5076

* fix(v-list-tile-action): add support for v-html

fixes vuetifyjs#5037

* feat(v-carousel): convert to ts

* refactor(v-carousel): update review items

* chore(v-carousel): update type

* refactor(v-carousel): update feedback items

* feat(filterable): convert to ts

* feat(returnable): convert to ts

* feat(components-index): convert to ts

* feat(colorable): convert to ts

* refactor(colors.d.ts): move file

* fix(translatable): partially revert 5f661a3

reverted back to original logic to correct scrolling bug

fixes vuetifyjs#4847

* [release] 1.2.4

* Fix unit tests after merging 1.2.4 by updating snapshot.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lzhoucs/vuetify",
-  "version": "1.2.3-modified.4",
+  "version": "1.2.4",
   "author": {
     "name": "John Leider",
     "email": "[email protected]"

src/components/VCarousel/VCarousel.js → src/components/VCarousel/VCarousel.ts

@@ -1,21 +1,38 @@
+// Styles
 import '../../stylus/components/_carousel.styl'
 
+// Components
 import VBtn from '../VBtn'
 import VIcon from '../VIcon'
 
+// Mixins
 import Themeable from '../../mixins/themeable'
 import { provide as RegistrableProvide } from '../../mixins/registrable'
 
+// Directives
 import Touch from '../../directives/touch'
 
-/* @vue/component */
-export default {
+// Utilities
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode } from 'vue'
+import { VNodeDirective } from 'vue/types/vnode'
+
+type CarouselItemInstance = {
+  uid: number
+  open: (uid: number, reverse: boolean) => void
+}
+
+export default mixins(
+  Themeable,
+  RegistrableProvide('carousel')
+  /* @vue/component */
+).extend({
   name: 'v-carousel',
 
   directives: { Touch },
 
-  mixins: [Themeable, RegistrableProvide('carousel')],
-
   props: {
     cycle: {
       type: Boolean,
@@ -30,7 +47,7 @@ export default {
     interval: {
       type: [Number, String],
       default: 6000,
-      validator: value => value > 0
+      validator: (value: string | number) => value > 0
     },
     nextIcon: {
       type: [Boolean, String],
@@ -45,15 +62,15 @@ export default {
 
   data () {
     return {
-      inputValue: null,
-      items: [],
-      slideTimeout: null,
+      inputValue: this.value,
+      items: [] as CarouselItemInstance[],
+      slideTimeout: undefined as number | undefined,
       reverse: false
     }
   },
 
   computed: {
-    isDark () {
+    isDark (): boolean {
       return this.dark || !this.light
     }
   },
@@ -68,9 +85,12 @@ export default {
       // Evaluates items when inputValue changes to
       // account for dynamic changing of children
 
-      const uid = (this.items[this.inputValue] || {}).uid
+      const selectedItem = this.items[this.inputValue]
+
+      if (!selectedItem) return
+
       for (let index = this.items.length; --index >= 0;) {
-        this.items[index].open(uid, this.reverse)
+        this.items[index].open(selectedItem.uid, this.reverse)
       }
 
       this.$emit('input', this.inputValue)
@@ -87,7 +107,7 @@ export default {
         this.restartTimeout()
       } else {
         clearTimeout(this.slideTimeout)
-        this.slideTimeout = null
+        this.slideTimeout = undefined
       }
     }
   },
@@ -97,14 +117,16 @@ export default {
   },
 
   methods: {
-    genDelimiters () {
+    genDelimiters (): VNode {
       return this.$createElement('div', {
         staticClass: 'v-carousel__controls'
       }, this.genItems())
     },
-    genIcon (direction, icon, fn) {
-      if (!icon) return null
-
+    genIcon (
+      direction: 'prev' | 'next',
+      icon: string,
+      fn: () => void
+    ): VNode {
       return this.$createElement('div', {
         staticClass: `v-carousel__${direction}`
       }, [
@@ -120,7 +142,28 @@ export default {
         ])
       ])
     },
-    genItems () {
+    genIcons (): VNode[] {
+      const icons = []
+
+      const prevIcon = this.$vuetify.rtl
+        ? this.nextIcon
+        : this.prevIcon
+
+      if (prevIcon && typeof prevIcon === 'string') {
+        icons.push(this.genIcon('prev', prevIcon, this.prev))
+      }
+
+      const nextIcon = this.$vuetify.rtl
+        ? this.prevIcon
+        : this.nextIcon
+
+      if (nextIcon && typeof nextIcon === 'string') {
+        icons.push(this.genIcon('next', nextIcon, this.next))
+      }
+
+      return icons
+    },
+    genItems (): VNode[] {
       return this.items.map((item, index) => {
         return this.$createElement(VBtn, {
           class: {
@@ -140,13 +183,17 @@ export default {
     },
     restartTimeout () {
       this.slideTimeout && clearTimeout(this.slideTimeout)
-      this.slideTimeout = null
+      this.slideTimeout = undefined
 
       const raf = requestAnimationFrame || setTimeout
       raf(this.startTimeout)
     },
     init () {
-      this.inputValue = this.value || 0
+      if (this.value == null) {
+        this.inputValue = 0
+      } else {
+        this.startTimeout()
+      }
     },
     next () {
       this.reverse = false
@@ -156,24 +203,34 @@ export default {
       this.reverse = true
       this.inputValue = (this.inputValue + this.items.length - 1) % this.items.length
     },
-    select (index) {
+    select (index: number) {
       this.reverse = index < this.inputValue
       this.inputValue = index
     },
     startTimeout () {
       if (!this.cycle) return
 
-      this.slideTimeout = setTimeout(() => this.next(), this.interval > 0 ? this.interval : 6000)
+      this.slideTimeout = window.setTimeout(this.next, this.interval > 0 ? this.interval : 6000)
     },
-    register (uid, open) {
+    register (uid: number, open: () => void) {
       this.items.push({ uid, open })
     },
-    unregister (uid) {
+    unregister (uid: number) {
       this.items = this.items.filter(i => i.uid !== uid)
     }
   },
 
-  render (h) {
+  render (h): VNode {
+    const children = []
+
+    if (!this.hideControls) {
+      children.push(this.genIcons())
+    }
+
+    if (!this.hideDelimiters) {
+      children.push(this.genDelimiters())
+    }
+
     return h('div', {
       staticClass: 'v-carousel',
       directives: [{
@@ -182,12 +239,7 @@ export default {
           left: this.next,
           right: this.prev
         }
-      }]
-    }, [
-      this.hideControls ? null : this.genIcon('prev', this.$vuetify.rtl ? this.nextIcon : this.prevIcon, this.prev),
-      this.hideControls ? null : this.genIcon('next', this.$vuetify.rtl ? this.prevIcon : this.nextIcon, this.next),
-      this.hideDelimiters ? null : this.genDelimiters(),
-      this.$slots.default
-    ])
+      }] as VNodeDirective[]
+    }, [children, this.$slots.default])
   }
-}
+})

src/components/VCarousel/VCarouselItem.js → src/components/VCarousel/VCarouselItem.ts

@@ -4,11 +4,17 @@ import { VImg } from '../VImg'
 // Mixins
 import { inject as RegistrableInject } from '../../mixins/registrable'
 
-/* @vue/component */
-export default {
-  name: 'v-carousel-item',
+// Utilities
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode, VNodeDirective } from 'vue'
 
-  mixins: [RegistrableInject('carousel', 'v-carousel-item', 'v-carousel')],
+export default mixins(
+  RegistrableInject('carousel', 'v-carousel-item', 'v-carousel')
+  /* @vue/component */
+).extend({
+  name: 'v-carousel-item',
 
   inheritAttrs: false,
 
@@ -31,8 +37,10 @@ export default {
   },
 
   computed: {
-    computedTransition () {
-      return (this.reverse === !this.$vuetify.rtl) ? this.reverseTransition : this.transition
+    computedTransition (): string {
+      return (this.reverse === !this.$vuetify.rtl)
+        ? this.reverseTransition
+        : this.transition
     }
   },
 
@@ -41,17 +49,17 @@ export default {
   },
 
   beforeDestroy () {
-    this.carousel.unregister(this._uid, this.open)
+    this.carousel.unregister(this._uid)
   },
 
   methods: {
-    open (id, reverse) {
+    open (id: number, reverse: boolean) {
       this.active = this._uid === id
       this.reverse = reverse
     }
   },
 
-  render (h) {
+  render (h): VNode {
     const item = h(VImg, {
       staticClass: 'v-carousel__item',
       props: {
@@ -62,9 +70,9 @@ export default {
       directives: [{
         name: 'show',
         value: this.active
-      }]
+      }] as VNodeDirective[]
     }, this.$slots.default)
 
     return h('transition', { props: { name: this.computedTransition } }, [item])
   }
-}
+})

src/components/VDialog/VDialog.js

@@ -38,6 +38,8 @@ export default {
     fullscreen: Boolean,
     fullWidth: Boolean,
     noClickAnimation: Boolean,
+    light: Boolean,
+    dark: Boolean,
     maxWidth: {
       type: [String, Number],
       default: 'none'
@@ -220,7 +222,8 @@ export default {
     }, [
       this.$createElement(ThemeProvider, {
         props: {
-          dark: this.$vuetify.dark || this.dark
+          dark: !this.light && (this.$vuetify.dark || this.dark),
+          light: !this.dark && (this.light || !this.$vuetify.dark)
         }
       }, [dialog])
     ]))

src/components/VList/VListTileAction.js

@@ -4,7 +4,7 @@ export default {
 
   functional: true,
 
-  render (h, { data, children }) {
+  render (h, { data, children = [] }) {
     data.staticClass = data.staticClass ? `v-list__tile__action ${data.staticClass}` : 'v-list__tile__action'
     const filteredChild = children.filter(VNode => {
       return VNode.isComment === false && VNode.text !== ' '

src/components/VMenu/VMenu.js

@@ -207,7 +207,8 @@ export default Vue.extend({
       this.genActivator(),
       this.$createElement(ThemeProvider, {
         props: {
-          dark: this.$vuetify.dark || this.dark
+          dark: !this.light && (this.$vuetify.dark || this.dark),
+          light: !this.dark && (this.light || !this.$vuetify.dark)
         }
       }, [this.genTransition()])
     ])

src/components/VMenu/mixins/menu-generators.js

@@ -60,7 +60,6 @@ export default {
         'class': {
           'v-menu__content--auto': this.auto,
           'menuable__content__active': this.isActive,
-          ...this.themeClasses,
           [this.contentClass.trim()]: true
         },
         style: this.styles,

src/mixins/filterable.js → src/mixins/filterable.ts

@@ -1,5 +1,7 @@
+import Vue from 'vue'
+
 /* @vue/component */
-export default {
+export default Vue.extend({
   name: 'filterable',
 
   props: {
@@ -8,4 +10,4 @@ export default {
       default: '$vuetify.noDataText'
     }
   }
-}
+})

src/mixins/menuable.js

@@ -3,7 +3,6 @@ import Vue from 'vue'
 import Positionable from './positionable'
 
 import Stackable from './stackable'
-import Themeable from './themeable'
 
 /* eslint-disable object-property-newline */
 const dimensions = {
@@ -39,8 +38,7 @@ export default Vue.extend({
 
   mixins: [
     Positionable,
-    Stackable,
-    Themeable
+    Stackable
   ],
 
   props: {
@@ -52,6 +50,8 @@ export default Vue.extend({
     },
     allowOverflow: Boolean,
     inputActivator: Boolean,
+    light: Boolean,
+    dark: Boolean,
     maxWidth: {
       type: [Number, String],
       default: 'auto'