vuetify 2.7.0 → 2.7.2

package/src/components/VList/VListItem.ts

@@ -12,7 +12,7 @@ import { factory as ToggleableFactory } from '../../mixins/toggleable'
 import Ripple from '../../directives/ripple'
 
 // Utilities
-import { keyCodes } from './../../util/helpers'
+import { getSlot, keyCodes } from './../../util/helpers'
 import { ExtractVue } from './../../util/mixins'
 import { removed } from '../../util/console'
 
@@ -183,12 +183,10 @@ export default baseMixins.extend<options>().extend({
       delete data.nativeOn
     }
 
-    const children = this.$scopedSlots.default
-      ? this.$scopedSlots.default({
-        active: this.isActive,
-        toggle: this.toggle,
-      })
-      : this.$slots.default
+    const children = getSlot(this, 'default', {
+      active: this.isActive,
+      toggle: this.toggle,
+    })
 
     return h(tag, this.isActive ? this.setTextColor(this.color, data) : data, children)
   },

package/src/components/VMain/VMain.ts

@@ -3,6 +3,7 @@ import './VMain.sass'
 
 // Mixins
 import SSRBootable from '../../mixins/ssr-bootable'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -44,7 +45,7 @@ export default SSRBootable.extend({
       h(
         'div',
         { staticClass: 'v-main__wrap' },
-        this.$slots.default
+        getSlot(this),
       ),
     ])
   },

package/src/components/VNavigationDrawer/VNavigationDrawer.ts

@@ -385,7 +385,7 @@ export default baseMixins.extend({
     genContent () {
       return this.$createElement('div', {
         staticClass: 'v-navigation-drawer__content',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genBorder () {
       return this.$createElement('div', {

package/src/components/VOverlay/VOverlay.ts

@@ -8,6 +8,7 @@ import Toggleable from './../../mixins/toggleable'
 
 // Utilities
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -75,7 +76,7 @@ export default mixins(
     genContent () {
       return this.$createElement('div', {
         staticClass: 'v-overlay__content',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
   },
 

package/src/components/VParallax/VParallax.ts

@@ -3,10 +3,11 @@ import './VParallax.sass'
 
 // Mixins
 import Translatable from '../../mixins/translatable'
+import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode, VNodeData } from 'vue/types/vnode'
-import mixins from '../../util/mixins'
 
 const baseMixins = mixins(
   Translatable
@@ -95,7 +96,7 @@ export default baseMixins.extend<options>().extend({
 
     const content = h('div', {
       staticClass: 'v-parallax__content',
-    }, this.$slots.default)
+    }, getSlot(this))
 
     return h('div', {
       staticClass: 'v-parallax',

package/src/components/VPicker/VPicker.ts

@@ -7,7 +7,7 @@ import Elevatable from '../../mixins/elevatable'
 import Themeable from '../../mixins/themeable'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue/types'
@@ -50,14 +50,14 @@ export default mixins(
         class: {
           'v-picker__title--landscape': this.landscape,
         },
-      }), this.$slots.title)
+      }), getSlot(this, 'title'))
     },
     genBodyTransition () {
       return this.$createElement('transition', {
         props: {
           name: this.transition,
         },
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genBody () {
       return this.$createElement('div', {
@@ -79,7 +79,7 @@ export default mixins(
         class: {
           'v-picker__actions--no-title': this.noTitle,
         },
-      }, this.$slots.actions)
+      }, getSlot(this, 'actions'))
     },
   },
 

package/src/components/VProgressCircular/VProgressCircular.ts

@@ -8,7 +8,7 @@ import intersect from '../../directives/intersect'
 import Colorable from '../../mixins/colorable'
 
 // Utils
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Types
 import { VNode, VNodeChildren } from 'vue'
@@ -136,7 +136,7 @@ export default Colorable.extend({
     genInfo (): VNode {
       return this.$createElement('div', {
         staticClass: 'v-progress-circular__info',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     onObserve (entries: IntersectionObserverEntry[], observer: IntersectionObserver, isIntersecting: boolean) {
       this.isVisible = isIntersecting

package/src/components/VSelect/VSelect.ts

@@ -754,7 +754,10 @@ export default baseMixins.extend<options>().extend({
     },
     onScroll () {
       if (!this.isMenuActive) {
-        requestAnimationFrame(() => (this.getContent().scrollTop = 0))
+        requestAnimationFrame(() => {
+          const content = this.getContent()
+          if (content) content.scrollTop = 0
+        })
       } else {
         if (this.lastItem > this.computedItems.length) return
 
@@ -855,7 +858,7 @@ export default baseMixins.extend<options>().extend({
         if (this.hideSelected) {
           this.setMenuIndex(-1)
         } else {
-          const index = this.allItems.indexOf(item)
+          const index = this.computedItems.indexOf(item)
           if (~index) {
             this.$nextTick(() => this.$refs.menu.getTiles())
             setTimeout(() => this.setMenuIndex(index))

package/src/components/VSelect/VSelectList.ts

@@ -253,6 +253,11 @@ export default mixins(Colorable, Themeable).extend({
         role: 'listbox',
         tabindex: -1,
       },
+      on: {
+        mousedown: (e: Event) => {
+          e.preventDefault()
+        },
+      },
       props: { dense: this.dense },
     }, children)
   },

package/src/components/VSlideGroup/VSlideGroup.ts

@@ -20,7 +20,7 @@ import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
 import Vue, { VNode } from 'vue'
-import { composedPath } from '../../util/helpers'
+import { composedPath, getSlot } from '../../util/helpers'
 
 interface TouchEvent {
   touchstartX: number
@@ -283,7 +283,7 @@ export const BaseSlideGroup = mixins<options &
     genNext (): VNode | null {
       const slot = this.$scopedSlots.next
         ? this.$scopedSlots.next({})
-        : this.$slots.next || this.__cachedNext
+        : getSlot(this, 'next') || this.__cachedNext
 
       return this.$createElement('div', {
         staticClass: 'v-slide-group__next',
@@ -303,7 +303,7 @@ export const BaseSlideGroup = mixins<options &
         on: {
           focusin: this.onFocusin,
         },
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genData (): object {
       return {
@@ -341,7 +341,7 @@ export const BaseSlideGroup = mixins<options &
     genPrev (): VNode | null {
       const slot = this.$scopedSlots.prev
         ? this.$scopedSlots.prev({})
-        : this.$slots.prev || this.__cachedPrev
+        : getSlot(this, 'prev') || this.__cachedPrev
 
       return this.$createElement('div', {
         staticClass: 'v-slide-group__prev',

package/src/components/VSpeedDial/VSpeedDial.ts

@@ -13,6 +13,7 @@ import ClickOutside from '../../directives/click-outside'
 import mixins from '../../util/mixins'
 import { VNode, VNodeData } from 'vue'
 import { Prop } from 'vue/types/options'
+import { getSlot } from '../../util/helpers'
 
 /* @vue/component */
 export default mixins(Positionable, Toggleable, Transitionable).extend({
@@ -71,7 +72,7 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
 
     if (this.isActive) {
       let btnCount = 0
-      children = (this.$slots.default || []).map((b, i) => {
+      children = (getSlot(this) || []).map((b, i) => {
         if (b.tag && typeof b.componentOptions !== 'undefined' && (b.componentOptions.Ctor.options.name === 'v-btn' || b.componentOptions.Ctor.options.name === 'v-tooltip')) {
           btnCount++
           return h('div', {
@@ -97,6 +98,6 @@ export default mixins(Positionable, Toggleable, Transitionable).extend({
       },
     }, children)
 
-    return h('div', data, [this.$slots.activator, list])
+    return h('div', data, [getSlot(this, 'activator'), list])
   },
 })

package/src/components/VStepper/VStepper.ts

@@ -15,6 +15,7 @@ import Proxyable from '../../mixins/proxyable'
 // Utilities
 import mixins from '../../util/mixins'
 import { breaking } from '../../util/console'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -135,6 +136,6 @@ export default baseMixins.extend({
       staticClass: 'v-stepper',
       class: this.classes,
       style: this.styles,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/VStepper/VStepperContent.ts

@@ -8,7 +8,7 @@ import {
 import { inject as RegistrableInject } from '../../mixins/registrable'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 
 // Utilities
 import mixins from '../../util/mixins'
@@ -155,7 +155,7 @@ export default baseMixins.extend<options>().extend({
       }]
     }
 
-    const wrapper = h('div', wrapperData, [this.$slots.default])
+    const wrapper = h('div', wrapperData, getSlot(this))
     const content = h('div', contentData, [wrapper])
 
     return h(this.computedTransition, {

package/src/components/VStepper/VStepperStep.ts

@@ -10,7 +10,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import mixins from '../../util/mixins'
-import { keyCodes } from '../../util/helpers'
+import { getSlot, keyCodes } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -106,7 +106,7 @@ export default baseMixins.extend<options>().extend({
     genLabel () {
       return this.$createElement('div', {
         staticClass: 'v-stepper__label',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genStep () {
       const color = (!this.hasError && (this.complete || this.isActive)) ? this.color : false

package/src/components/VSubheader/VSubheader.ts

@@ -4,6 +4,7 @@ import './VSubheader.sass'
 // Mixins
 import Themeable from '../../mixins/themeable'
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -27,6 +28,6 @@ export default mixins(
       },
       attrs: this.$attrs,
       on: this.$listeners,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/VSwitch/VSwitch.ts

@@ -14,7 +14,7 @@ import { VFabTransition } from '../transitions'
 import VProgressCircular from '../VProgressCircular/VProgressCircular'
 
 // Helpers
-import { keyCodes } from '../../util/helpers'
+import { getSlot, keyCodes } from '../../util/helpers'
 
 // Types
 import { VNode, VNodeData } from 'vue'
@@ -109,7 +109,7 @@ export default Selectable.extend({
       return this.$createElement(VFabTransition, {}, [
         this.loading === false
           ? null
-          : this.$slots.progress || this.$createElement(VProgressCircular, {
+          : getSlot(this, 'progress') || this.$createElement(VProgressCircular, {
             props: {
               color: (this.loading === true || this.loading === '')
                 ? (this.color || 'primary')

package/src/components/VTabs/VTab.ts

@@ -4,7 +4,7 @@ import Routable from '../../mixins/routable'
 import Themeable from '../../mixins/themeable'
 
 // Utilities
-import { keyCodes } from './../../util/helpers'
+import { getSlot, keyCodes } from './../../util/helpers'
 import mixins from '../../util/mixins'
 import { ExtractVue } from './../../util/mixins'
 
@@ -129,6 +129,6 @@ export default baseMixins.extend<options>().extend(
       },
     }
 
-    return h(tag, data, this.$slots.default)
+    return h(tag, data, getSlot(this))
   },
 })

package/src/components/VTabs/VTabs.ts

@@ -15,7 +15,7 @@ import Themeable from '../../mixins/themeable'
 import Resize from '../../directives/resize'
 
 // Utilities
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 import { ExtractVue } from './../../util/mixins'
 import mixins from '../../util/mixins'
 
@@ -268,7 +268,7 @@ export default baseMixins.extend<options>().extend({
       let slider = null
       const item = []
       const tab = []
-      const slot = this.$slots.default || []
+      const slot = getSlot(this) || []
       const length = slot.length
 
       for (let i = 0; i < length; i++) {

package/src/components/VTabs/_variables.scss

@@ -3,7 +3,7 @@
 $tab-disabled-opacity: .5 !default;
 $tab-font-size: map-deep-get($headings, 'subtitle-2', 'size') !default;
 $tab-font-weight: map-deep-get($headings, 'subtitle-2', 'weight') !default;
-$tab-text-transform: 'uppercase' !default;
+$tab-text-transform: uppercase !default;
 $tab-line-height: normal !default;
 $tabs-bar-background-color: 'cards' !default;
 $tabs-bar-height: 48px !default;

package/src/components/VTextField/VTextField.ts

@@ -19,7 +19,7 @@ import ripple from '../../directives/ripple'
 
 // Utilities
 import { attachedRoot } from '../../util/dom'
-import { convertToUnit, keyCodes } from '../../util/helpers'
+import { convertToUnit, getSlot, keyCodes } from '../../util/helpers'
 import { breaking, consoleWarn } from '../../util/console'
 
 // Types
@@ -372,7 +372,7 @@ export default baseMixins.extend<options>().extend({
         },
       }
 
-      return this.$createElement(VLabel, data, this.$slots.label || this.label)
+      return this.$createElement(VLabel, data, getSlot(this, 'label') || this.label)
     },
     genLegend () {
       const width = !this.singleLine && (this.labelValue || this.isDirty) ? this.labelWidth : 0

package/src/components/VTimeline/VTimeline.ts

@@ -7,6 +7,7 @@ import mixins from '../../util/mixins'
 
 // Mixins
 import Themeable from '../../mixins/themeable'
+import { getSlot } from '../../util/helpers'
 
 export default mixins(
   Themeable
@@ -39,6 +40,6 @@ export default mixins(
     return h('div', {
       staticClass: 'v-timeline',
       class: this.classes,
-    }, this.$slots.default)
+    }, getSlot(this))
   },
 })

package/src/components/VTimeline/VTimelineItem.ts

@@ -9,6 +9,7 @@ import VIcon from '../VIcon'
 // Mixins
 import Themeable from '../../mixins/themeable'
 import Colorable from '../../mixins/colorable'
+import { getSlot } from '../../util/helpers'
 
 const baseMixins = mixins(
   Colorable,
@@ -52,14 +53,10 @@ export default baseMixins.extend<options>().extend({
     genBody () {
       return this.$createElement('div', {
         staticClass: 'v-timeline-item__body',
-      }, this.$slots.default)
+      }, getSlot(this))
     },
     genIcon (): VNode | VNode[] {
-      if (this.$slots.icon) {
-        return this.$slots.icon
-      }
-
-      return this.$createElement(VIcon, {
+      return getSlot(this, 'icon') || this.$createElement(VIcon, {
         props: {
           color: this.iconColor,
           dark: !this.theme.isDark,
@@ -96,7 +93,7 @@ export default baseMixins.extend<options>().extend({
     genOpposite () {
       return this.$createElement('div', {
         staticClass: 'v-timeline-item__opposite',
-      }, this.$slots.opposite)
+      }, getSlot(this, 'opposite'))
     },
   },
 

package/src/components/VWindow/VWindow.ts

@@ -13,6 +13,7 @@ import Touch from '../../directives/touch'
 import VBtn from '../VBtn'
 import VIcon from '../VIcon'
 import { BaseItemGroup } from '../VItemGroup/VItemGroup'
+import { getSlot } from '../../util/helpers'
 
 /* @vue/component */
 export default BaseItemGroup.extend({
@@ -118,7 +119,7 @@ export default BaseItemGroup.extend({
 
   methods: {
     genDefaultSlot () {
-      return this.$slots.default
+      return getSlot(this)
     },
     genContainer (): VNode {
       const children = [this.genDefaultSlot()]

package/src/components/VWindow/VWindowItem.ts

@@ -9,7 +9,7 @@ import { factory as GroupableFactory } from '../../mixins/groupable'
 import Touch from '../../directives/touch'
 
 // Utilities
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlot } from '../../util/helpers'
 import mixins, { ExtractVue } from '../../util/mixins'
 
 // Types
@@ -75,7 +75,7 @@ export default baseMixins.extend<options>().extend(
 
   methods: {
     genDefaultSlot () {
-      return this.$slots.default
+      return getSlot(this)
     },
     genWindowItem () {
       return this.$createElement('div', {

package/src/locale/fr.ts

@@ -3,7 +3,7 @@ export default {
   close: 'Fermer',
   dataIterator: {
     noResultsText: 'Aucun enregistrement correspondant trouvé',
-    loadingText: `Chargement de l'élément...`,
+    loadingText: `Chargement de l'élément…`,
   },
   dataTable: {
     itemsPerPageText: 'Lignes par page :',
@@ -71,5 +71,5 @@ export default {
       icon: 'Note de {0} sur {1}',
     },
   },
-  loading: 'Loading...',
+  loading: 'Chargement…',
 }

package/src/mixins/loadable/index.ts

@@ -1,5 +1,6 @@
 import Vue, { VNode } from 'vue'
 import VProgressLinear from '../../components/VProgressLinear'
+import { getSlot } from '../../util/helpers'
 
 interface colorable extends Vue {
   color?: string
@@ -33,7 +34,7 @@ export default Vue.extend<colorable>().extend({
     genProgress (): VNode | VNode[] | null {
       if (this.loading === false) return null
 
-      return this.$slots.progress || this.$createElement(VProgressLinear, {
+      return getSlot(this, 'progress') || this.$createElement(VProgressLinear, {
         props: {
           absolute: true,
           color: (this.loading === true || this.loading === '')

package/src/mixins/picker/index.ts

@@ -8,6 +8,7 @@ import Themeable from '../themeable'
 
 // Utils
 import mixins from '../../util/mixins'
+import { getSlot } from '../../util/helpers'
 
 // Types
 import { VNode } from 'vue'
@@ -43,7 +44,7 @@ export default mixins(
       return this.$scopedSlots.default ? this.$scopedSlots.default({
         save: (this as any).save,
         cancel: (this as any).cancel,
-      }) : this.$slots.default
+      }) : getSlot(this)
     },
     genPicker (staticClass: string) {
       const children: VNode[] = []

package/src/util/helpers.ts

@@ -409,10 +409,15 @@ export function getPrefixedScopedSlots (prefix: string, scopedSlots: any) {
 }
 
 export function getSlot (vm: Vue, name = 'default', data?: object | (() => object), optional = false) {
+  const kebabName = kebabCase(name)
   if (vm.$scopedSlots.hasOwnProperty(name)) {
     return vm.$scopedSlots[name]!(data instanceof Function ? data() : data)
+  } else if (vm.$scopedSlots.hasOwnProperty(kebabName)) {
+    return vm.$scopedSlots[kebabName]!(data instanceof Function ? data() : data)
   } else if (vm.$slots.hasOwnProperty(name) && (!data || optional)) {
     return vm.$slots[name]
+  } else if (vm.$slots.hasOwnProperty(kebabName) && (!data || optional)) {
+    return vm.$slots[kebabName]
   }
   return undefined
 }