fix(v-stepper): add registrable mixin

fixes #3330

src/components/VStepper/VStepper.js

@@ -1,12 +1,18 @@
+// Styles
 import '../../stylus/components/_steppers.styl'
 
+// Mixins
+import { provide as RegistrableProvide } from '../../mixins/registrable'
 import Themeable from '../../mixins/themeable'
 
 /* @vue/component */
 export default {
   name: 'v-stepper',
 
-  mixins: [Themeable],
+  mixins: [
+    RegistrableProvide('stepper'),
+    Themeable
+  ],
 
   provide () {
     return {
@@ -59,29 +65,29 @@ export default {
       prev && (this.isBooted = true)
     },
     value () {
-      this.getSteps()
       this.$nextTick(() => (this.inputValue = this.value))
     }
   },
 
   mounted () {
-    this.getSteps()
-
     this.inputValue = this.value || this.steps[0].step || 1
   },
 
   methods: {
-    getSteps () {
-      this.steps = []
-      this.content = []
-      for (let index = 0; index < this.$children.length; index++) {
-        const child = this.$children[index]
-        if (child.$options.name === 'v-stepper-step') {
-          this.steps.push(child)
-        } else if (child.$options.name === 'v-stepper-content') {
-          child.isVertical = this.vertical
-          this.content.push(child)
-        }
+    register (item) {
+      if (item.$options.name === 'v-stepper-step') {
+        this.steps.push(item)
+      } else if (item.$options.name === 'v-stepper-content') {
+        item.isVertical = this.vertical
+        this.content.push(item)
+      }
+    },
+    unregister (item) {
+      if (item.$options.name === 'v-stepper-step') {
+        this.steps = this.steps.filter(i => i !== item)
+      } else if (item.$options.name === 'v-stepper-content') {
+        item.isVertical = this.vertical
+        this.content = this.content.filter(i => i !== item)
       }
     },
     stepClick (step) {

src/components/VStepper/VStepperContent.js

@@ -1,15 +1,23 @@
+// Components
 import {
   VTabTransition,
   VTabReverseTransition
 } from '../transitions'
 
+// Mixins
+import { inject as RegistrableInject } from '../../mixins/registrable'
+
 // Helpers
 import { convertToUnit } from '../../util/helpers'
 
 /* @vue/component */
 export default {
   name: 'v-stepper-content',
 
+  mixins: [
+    RegistrableInject('stepper', 'v-stepper-content', 'v-stepper')
+  ],
+
   inject: {
     isVerticalProvided: {
       from: 'isVertical'
@@ -80,6 +88,7 @@ export default {
       this.onTransition,
       false
     )
+    this.stepper && this.stepper.register(this)
   },
 
   beforeDestroy () {
@@ -88,6 +97,7 @@ export default {
       this.onTransition,
       false
     )
+    this.stepper && this.stepper.unregister(this)
   },
 
   methods: {

src/components/VStepper/VStepperStep.js

@@ -3,6 +3,7 @@ import VIcon from '../VIcon'
 
 // Mixins
 import Colorable from '../../mixins/colorable'
+import { inject as RegistrableInject } from '../../mixins/registrable'
 
 // Directives
 import Ripple from '../../directives/ripple'
@@ -13,7 +14,10 @@ export default {
 
   directives: { Ripple },
 
-  mixins: [Colorable],
+  mixins: [
+    Colorable,
+    RegistrableInject('stepper', 'v-stepper-step', 'v-stepper')
+  ],
 
   inject: ['stepClick'],
 
@@ -67,6 +71,14 @@ export default {
     }
   },
 
+  mounted () {
+    this.stepper && this.stepper.register(this)
+  },
+
+  beforeDestroy () {
+    this.stepper && this.stepper.unregister(this)
+  },
+
   methods: {
     click (e) {
       e.stopPropagation()

test/unit/components/VStepper/VStepperContent.spec.js

@@ -5,6 +5,8 @@ import {
 } from '@/components/transitions'
 import VStepperContent from '@/components/VStepper/VStepperContent'
 
+const tip = '[Vuetify] The v-stepper-content component must be used inside a v-stepper'
+
 test('VStepperContent.js', ({ mount }) => {
   it('should set height to auto', async () => {
     const wrapper = mount(VStepperContent, {
@@ -22,6 +24,7 @@ test('VStepperContent.js', ({ mount }) => {
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.isActive).toBe(true)
     expect(wrapper.vm.height).toBe('auto')
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should use reverse transition', () => {
@@ -37,6 +40,7 @@ test('VStepperContent.js', ({ mount }) => {
     wrapper.setData({ isReverse: true })
 
     expect(wrapper.vm.computedTransition).toBe(VTabReverseTransition)
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should accept a custom height', async () => {
@@ -83,6 +87,7 @@ test('VStepperContent.js', ({ mount }) => {
     await wrapper.vm.$nextTick()
     expect(enter.mock.calls.length).toBe(1)
     expect(leave.mock.calls.length).toBe(1)
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should toggle isActive state', () => {
@@ -107,6 +112,7 @@ test('VStepperContent.js', ({ mount }) => {
 
     expect(wrapper.vm.isActive).toBe(false)
     expect(wrapper.vm.isReverse).toBe(true)
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should set height', async () => {
@@ -136,6 +142,7 @@ test('VStepperContent.js', ({ mount }) => {
     await new Promise(resolve => setTimeout(resolve, 10))
 
     expect(wrapper.vm.height).toBe(0)
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should set height only if isActive', async () => {
@@ -161,6 +168,7 @@ test('VStepperContent.js', ({ mount }) => {
     await new Promise(resolve => setTimeout(resolve, 450))
 
     expect(wrapper.vm.height).toBe(0)
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should reset height', async () => {
@@ -195,5 +203,6 @@ test('VStepperContent.js', ({ mount }) => {
     expect(wrapper.vm.height).toBe('auto')
 
     wrapper.destroy()
+    expect(tip).toHaveBeenTipped()
   })
 })

test/unit/components/VStepper/VStepperStep.spec.js

@@ -1,6 +1,9 @@
 import { test } from '@/test'
 import VStepperStep from '@/components//VStepper/VStepperStep'
 
+const tip = '[Vuetify] The v-stepper-step component must be used inside a v-stepper'
+const warning = '[Vue warn]: Injection "stepClick" not found'
+
 test('VStepperStep.js', ({ mount }) => {
   it('should accept a custom color', async () => {
     const wrapper = mount(VStepperStep, {
@@ -12,7 +15,8 @@ test('VStepperStep.js', ({ mount }) => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect('[Vue warn]: Injection "stepClick" not found').toHaveBeenWarned()
+    expect(warning).toHaveBeenWarned()
+    expect(tip).toHaveBeenTipped()
   })
 
   it('should accept a custom css color', async () => {
@@ -25,6 +29,7 @@ test('VStepperStep.js', ({ mount }) => {
     })
 
     expect(wrapper.html()).toMatchSnapshot()
-    expect('[Vue warn]: Injection "stepClick" not found').toHaveBeenWarned()
+    expect(warning).toHaveBeenWarned()
+    expect(tip).toHaveBeenTipped()
   })
 })