fix(v-footer): fix applicationProperty update

add new value for inset footer to applicationable

fixes #4686

src/components/VFooter/VFooter.js

@@ -11,8 +11,9 @@ export default {
   name: 'v-footer',
 
   mixins: [
-    Applicationable('footer', [
-      'height'
+    Applicationable(null, [
+      'height',
+      'inset'
     ]),
     Colorable,
     Themeable
@@ -27,6 +28,9 @@ export default {
   },
 
   computed: {
+    applicationProperty () {
+      return this.inset ? 'insetFooter' : 'footer'
+    },
     computedMarginBottom () {
       if (!this.app) return
 

src/components/VGrid/VContent.js

@@ -20,13 +20,13 @@ export default {
   computed: {
     styles () {
       const {
-        bar, top, right, footer, bottom, left
+        bar, top, right, footer, insetFooter, bottom, left
       } = this.$vuetify.application
 
       return {
         paddingTop: `${top + bar}px`,
         paddingRight: `${right}px`,
-        paddingBottom: `${footer + bottom}px`,
+        paddingBottom: `${footer + insetFooter + bottom}px`,
         paddingLeft: `${left}px`
       }
     }

src/components/VNavigationDrawer/VNavigationDrawer.js

@@ -235,9 +235,6 @@ export default {
       if (val == null) return this.init()
 
       if (val !== this.isActive) this.isActive = val
-    },
-    applicationProperty (newVal, oldVal) {
-      this.$vuetify.application.unbind(this._uid, oldVal)
     }
   },
 

src/components/Vuetify/mixins/application.ts

@@ -1,4 +1,4 @@
-export type TargetProp = 'bar' | 'bottom' | 'footer' | 'left' | 'right' | 'top'
+export type TargetProp = 'bar' | 'bottom' | 'footer' | 'insetFooter' | 'left' | 'right' | 'top'
 
 interface TargetPropValues {
   [uid: number]: number
@@ -8,13 +8,15 @@ export default {
   bar: 0,
   bottom: 0,
   footer: 0,
+  insetFooter: 0,
   left: 0,
   right: 0,
   top: 0,
   components: {
     bar: {} as TargetPropValues,
     bottom: {} as TargetPropValues,
     footer: {} as TargetPropValues,
+    insetFooter: {} as TargetPropValues,
     left: {} as TargetPropValues,
     right: {} as TargetPropValues,
     top: {} as TargetPropValues

src/mixins/applicationable.ts

@@ -26,6 +26,9 @@ export default function applicationable (value: TargetProp, events: string[] = [
         prev
           ? this.removeApplication(true)
           : this.callUpdate()
+      },
+      applicationProperty (newVal, oldVal) {
+        this.$vuetify.application.unbind(this._uid, oldVal)
       }
     },
 

test/unit/components/VFooter/VFooter.spec.js

@@ -80,6 +80,8 @@ test('VFooter.js', ({ mount, functionalContext }) => {
     wrapper.vm.$vuetify.application.bottom = 30
     await wrapper.vm.$nextTick()
     expect(wrapper.vm.$vuetify.application.bottom).toBe(30)
+    wrapper.vm.$vuetify.application.bottom = 0
+    wrapper.vm.$vuetify.application.footer = 0
   })
 
   it('should have padding left when using inset', async () => {
@@ -106,4 +108,23 @@ test('VFooter.js', ({ mount, functionalContext }) => {
 
     expect(wrapper.html()).toMatchSnapshot()
   })
+
+  it('should set conditional applicationable property', async () => {
+    const wrapper = mount(VFooter, {
+      propsData: {
+        app: true,
+        inset: true
+      }
+    })
+
+    expect(wrapper.vm.$vuetify.application.footer).toBe(0)
+    expect(wrapper.vm.$vuetify.application.insetFooter).toBe(32)
+
+    wrapper.setProps({ inset: false })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.$vuetify.application.footer).toBe(32)
+    expect(wrapper.vm.$vuetify.application.insetFooter).toBe(0)
+  })
 })

test/unit/mixins/applicationable.spec.js

@@ -45,7 +45,7 @@ test('applicationable.js', ({ mount }) => {
       render: h => h('div')
     })
 
-    expect(wrapper.vm._watchers.length).toBe(5)
+    expect(wrapper.vm._watchers.length).toBe(6)
   })
 
   it('should call to remove application on destroy', async () => {