feat(VNavigationDrawer): add rail prop v-model support (#16352)

resolves #16022
vuetifyjs · Jan 3, 2023 · 22f591b · 22f591b
1 parent a11e937
commit 22f591b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -41,7 +41,10 @@ export const VNavigationDrawer = defineComponent({
       default: null,
     },
     permanent: Boolean,
-    rail: Boolean,
+    rail: {
+      type: Boolean as PropType<boolean | null>,
+      default: null,
+    },
     railWidth: {
       type: [Number, String],
       default: 56,
@@ -74,9 +77,10 @@ export const VNavigationDrawer = defineComponent({
 
   emits: {
     'update:modelValue': (val: boolean) => true,
+    'update:rail': (val: boolean) => true,
   },
 
-  setup (props, { attrs, slots }) {
+  setup (props, { attrs, emit, slots }) {
     const { isRtl } = useRtl()
     const { themeClasses } = provideTheme(props)
     const { borderClasses } = useBorder(props)
@@ -106,6 +110,10 @@ export const VNavigationDrawer = defineComponent({
       location.value !== 'bottom'
     )
 
+    if (props.expandOnHover && props.rail != null) {
+      watch(isHovering, val => emit('update:rail', !val))
+    }
+
     if (!props.disableResizeWatcher) {
       watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))
     }

diff --git a/packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.cy.tsx b/packages/vuetify/src/components/VNavigationDrawer/__tests__/VNavigationDrawer.spec.cy.tsx
@@ -1,7 +1,9 @@
 /// <reference types="../../../../types/cypress" />
 
 import { VLayout } from '@/components/VLayout'
+import { VMain } from '@/components/VMain'
 import { VNavigationDrawer } from '..'
+import { ref } from 'vue'
 
 describe('VNavigationDrawer', () => {
   beforeEach(() => {
@@ -48,6 +50,31 @@ describe('VNavigationDrawer', () => {
     cy.get('.v-navigation-drawer').should('have.css', 'width', '56px')
   })
 
+  it('should change width when using bound and unbound rail and expandOnHover', () => {
+    const rail = ref(true)
+
+    cy.mount(() => (
+      <VLayout>
+        <VNavigationDrawer expand-on-hover v-model:rail={ rail.value } />
+
+        <VMain />
+      </VLayout>
+    ))
+
+    cy.get('.v-navigation-drawer').should('have.css', 'width', '56px')
+    cy.get('.v-main').should('have.css', 'padding-left', '56px')
+
+    cy.get('.v-navigation-drawer').trigger('mouseenter')
+
+    cy.get('.v-navigation-drawer').should('have.css', 'width', '256px')
+    cy.get('.v-main').should('have.css', 'padding-left', '256px')
+
+    cy.get('.v-navigation-drawer').trigger('mouseleave')
+
+    cy.get('.v-navigation-drawer').should('have.css', 'width', '56px')
+    cy.get('.v-main').should('have.css', 'padding-left', '56px')
+  })
+
   it('should hide drawer if window resizes below mobile breakpoint', () => {
     cy.mount(() => (
       <VLayout>