fix(VDialog,VMenu,VTooltip): work around vue 2.6.4 $slots change

also added warning if #activator is used without binding (#6440)
vuetifyjs · Feb 12, 2019 · a865794 · a865794
1 parent dd4e825
commit a865794
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 6 deletions.
diff --git a/packages/vuetify/src/components/VDialog/VDialog.js b/packages/vuetify/src/components/VDialog/VDialog.js
@@ -12,8 +12,9 @@ import Toggleable from '../../mixins/toggleable'
 import ClickOutside from '../../directives/click-outside'
 
 // Helpers
-import { getZIndex, convertToUnit } from '../../util/helpers'
+import { getZIndex, convertToUnit, getSlotType } from '../../util/helpers'
 import ThemeProvider from '../../util/ThemeProvider'
+import { consoleError } from '../../util/console'
 
 /* @vue/component */
 export default {
@@ -123,6 +124,12 @@ export default {
     })
   },
 
+  mounted () {
+    if (getSlotType(this, 'activator', true) === 'v-slot') {
+      consoleError(`v-dialog's activator slot must be bound to data, try '<template #activator="data"><v-btn v-on="data.on>'`, this)
+    }
+  },
+
   beforeDestroy () {
     if (typeof window !== 'undefined') this.unbind()
   },
@@ -192,7 +199,7 @@ export default {
         }
       }
 
-      if (this.$scopedSlots.activator && this.$scopedSlots.activator.length) {
+      if (getSlotType(this, 'activator') === 'scoped') {
         const activator = this.$scopedSlots.activator({ on: listeners })
         this.activatorNode = activator
         return activator

diff --git a/packages/vuetify/src/components/VMenu/VMenu.js b/packages/vuetify/src/components/VMenu/VMenu.js
@@ -22,8 +22,9 @@ import ClickOutside from '../../directives/click-outside'
 import Resize from '../../directives/resize'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlotType } from '../../util/helpers'
 import ThemeProvider from '../../util/ThemeProvider'
+import { consoleError } from '../../util/console'
 
 /* @vue/component */
 export default Vue.extend({
@@ -170,6 +171,10 @@ export default Vue.extend({
 
   mounted () {
     this.isActive && this.activate()
+
+    if (getSlotType(this, 'activator', true) === 'v-slot') {
+      consoleError(`v-tooltip's activator slot must be bound to data, try '<template #activator="data"><v-btn v-on="data.on>'`, this)
+    }
   },
 
   methods: {

diff --git a/packages/vuetify/src/components/VMenu/mixins/menu-generators.js b/packages/vuetify/src/components/VMenu/mixins/menu-generators.js
@@ -1,3 +1,5 @@
+import { getSlotType } from '../../../util/helpers'
+
 /* @vue/component */
 export default {
   methods: {
@@ -15,7 +17,7 @@ export default {
         }
       }
 
-      if (this.$scopedSlots.activator && this.$scopedSlots.activator.length) {
+      if (getSlotType(this, 'activator') === 'scoped') {
         const activator = this.$scopedSlots.activator({ on: listeners })
         this.activatorNode = activator
         return activator

diff --git a/packages/vuetify/src/components/VTooltip/VTooltip.js b/packages/vuetify/src/components/VTooltip/VTooltip.js
@@ -9,7 +9,8 @@ import Menuable from '../../mixins/menuable'
 import Toggleable from '../../mixins/toggleable'
 
 // Helpers
-import { convertToUnit } from '../../util/helpers'
+import { convertToUnit, getSlotType } from '../../util/helpers'
+import { consoleError } from '../../util/console'
 
 /* @vue/component */
 export default {
@@ -139,6 +140,12 @@ export default {
     })
   },
 
+  mounted () {
+    if (getSlotType(this, 'activator', true) === 'v-slot') {
+      consoleError(`v-tooltip's activator slot must be bound to data, try '<template #activator="data"><v-btn v-on="data.on>'`, this)
+    }
+  },
+
   methods: {
     activate () {
       // Update coordinates and dimensions of menu
@@ -159,7 +166,7 @@ export default {
         }
       }
 
-      if (this.$scopedSlots.activator && this.$scopedSlots.activator.length) {
+      if (getSlotType(this, 'activator') === 'scoped') {
         const activator = this.$scopedSlots.activator({ on: listeners })
         this.activatorNode = activator
         return activator

diff --git a/packages/vuetify/src/util/helpers.ts b/packages/vuetify/src/util/helpers.ts
@@ -341,3 +341,15 @@ export function arrayDiff (a: any[], b: any[]): any[] {
 export function upperFirst (str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
+
+/**
+ * Returns:
+ *  - 'normal' for old style slots - `<template slot="default">`
+ *  - 'scoped' for old style scoped slots (`<template slot="default" slot-scope="data">`) or bound v-slot (`#default="data"`)
+ *  - 'v-slot' for unbound v-slot (`#default`) - only if the third param is true, otherwise counts as scoped
+ */
+export function getSlotType<T extends boolean = false> (vm: Vue, name: string, split?: T): (T extends true ? 'v-slot' : never) | 'normal' | 'scoped' | void {
+  if (split && vm.$slots[name] && vm.$scopedSlots[name] && (vm.$scopedSlots[name] as any).name) return 'v-slot' as any
+  if (vm.$slots[name] && !vm.$scopedSlots[name]) return 'normal'
+  if (vm.$scopedSlots[name]) return 'scoped'
+}