feat(VDataTable): add transition to expanding rows

packages/vuetify/src/components/transitions/expand-transition.ts

@@ -11,7 +11,7 @@ interface HTMLExpandElement extends HTMLElement {
   }
 }
 
-export default function (expandedParentClass = '', x = false) {
+export function ExpandTransitionGenerator (expandedParentClass = '', x = false) {
   const sizeProperty = x ? 'width' : 'height' as 'width' | 'height'
   const offsetProperty = camelize(`offset-${sizeProperty}`) as 'offsetHeight' | 'offsetWidth'
 

packages/vuetify/src/components/transitions/index.ts

@@ -3,7 +3,7 @@ import {
   createJavascriptTransition,
 } from './createTransition'
 
-import ExpandTransitionGenerator from './expand-transition'
+import { ExpandTransitionGenerator } from './expand-transition'
 
 // Component specific transitions
 export const VFabTransition = createCssTransition('fab-transition', 'center center', 'out-in')
@@ -27,6 +27,7 @@ export const VExpandTransition = createJavascriptTransition('expand-transition',
 export const VExpandXTransition = createJavascriptTransition('expand-x-transition', ExpandTransitionGenerator('', true))
 
 export { VDialogTransition } from './dialog-transition'
+export { VTableExpandTransition } from './table-expand-transition'
 
 export type VFabTransition = InstanceType<typeof VFabTransition>
 export type VDialogBottomTransition = InstanceType<typeof VDialogBottomTransition>

packages/vuetify/src/components/transitions/table-expand-transition.ts

@@ -0,0 +1,116 @@
+import { createJavascriptTransition } from './createTransition'
+import { ExpandTransitionGenerator } from './expand-transition'
+import { getCurrentInstance, h, mergeProps, onMounted, Transition } from 'vue'
+import { defineComponent } from '@/util'
+
+const expandBase = ExpandTransitionGenerator()
+
+export const VTableExpandTransition = defineComponent({
+  name: 'VTableExpandTransition',
+
+  props: {
+    columns: {
+      type: Number,
+      required: true,
+    },
+  },
+
+  setup (props, { slots }) {
+    const vm = getCurrentInstance()!
+
+    function onEnter (el: Element, done: () => void) {
+      const tr = document.createElement('tr')
+      const td = document.createElement('td')
+      td.setAttribute('colspan', String(props.columns))
+      td.style.padding = '0'
+      td.style.height = 'auto'
+      const wrapperRoot = document.createElement('div')
+      const density = el.closest('.v-table')!.className.match(/v-table--density-([a-z]+)/)![1]
+      wrapperRoot.classList.add('v-table', `v-table--density-${density}`)
+      const wrapper = document.createElement('div')
+      wrapper.classList.add('v-table__wrapper')
+      const wrapperTable = document.createElement('table')
+      const tbody = document.createElement('tbody')
+      tr.append(td)
+      td.append(wrapperRoot)
+      wrapperRoot.append(wrapper)
+      wrapper.append(wrapperTable)
+      wrapperTable.append(tbody)
+      wrapperRoot.classList.add('expand-transition-enter-active', 'expand-transition-enter-from')
+      expandBase.onBeforeEnter(wrapperRoot)
+      el.parentNode!.insertBefore(tr, el)
+      tbody.append(el)
+      function onEnd () {
+        tr.parentNode!.insertBefore(el, tr)
+        tr.remove()
+        done()
+      }
+      wrapperRoot.addEventListener('transitionend', onEnd)
+      wrapperRoot.addEventListener('transitioncancel', onEnd)
+      requestAnimationFrame(() => {
+        wrapperRoot.classList.remove('expand-transition-enter-from')
+        wrapperRoot.classList.add('expand-transition-enter-to')
+        expandBase.onEnter(wrapperRoot)
+      })
+    }
+
+    function onLeave (el: Element, done: () => void) {
+      const tr = document.createElement('tr')
+      const td = document.createElement('td')
+      td.setAttribute('colspan', String(props.columns))
+      td.style.padding = '0'
+      td.style.height = 'auto'
+      const wrapperRoot = document.createElement('div')
+      const density = el.closest('.v-table')!.className.match(/v-table--density-([a-z]+)/)![1]
+      wrapperRoot.classList.add('v-table', `v-table--density-${density}`)
+      const wrapper = document.createElement('div')
+      wrapper.classList.add('v-table__wrapper')
+      const wrapperTable = document.createElement('table')
+      const tbody = document.createElement('tbody')
+      tr.append(td)
+      td.append(wrapperRoot)
+      wrapperRoot.append(wrapper)
+      wrapper.append(wrapperTable)
+      wrapperTable.append(tbody)
+      wrapperRoot.classList.add('expand-transition-leave-active', 'expand-transition-leave-from')
+      el.parentNode!.insertBefore(tr, el)
+      tbody.append(el)
+      function onEnd () {
+        tr.parentNode!.insertBefore(el, tr)
+        tr.remove()
+        done()
+      }
+      wrapperRoot.addEventListener('transitionend', onEnd)
+      wrapperRoot.addEventListener('transitioncancel', onEnd)
+      requestAnimationFrame(() => {
+        wrapperRoot.classList.remove('expand-transition-leave-from')
+        wrapperRoot.classList.add('expand-transition-leave-to')
+        expandBase.onLeave(wrapperRoot)
+      })
+    }
+
+    return () => (
+      h(Transition, {
+        css: false,
+        onEnter,
+        onLeave,
+      }, slots.default)
+    )
+  },
+})
+
+// export const VTableExpandTransition = createJavascriptTransition('table-expand-transition', {
+//   ...expandBase,
+//   appear: true,
+//   css: false,
+//   onEnter (el, done) {
+//     const wrapper = document.createElement('div')
+//     wrapper.style.width = '100%'
+//     el.parentNode.insertBefore(wrapper, el)
+//     wrapper.appendChild(el)
+//     expandBase.onEnter(wrapper)
+//   },
+//   onAfterEnter (el) {
+//     console.log(el)
+//   },
+// })

packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx

@@ -1,6 +1,7 @@
 // Components
 import { VDataTableGroupHeaderRow } from './VDataTableGroupHeaderRow'
 import { VDataTableRow } from './VDataTableRow'
+import { VTableExpandTransition } from '@/components/transitions'
 
 // Composables
 import { useLocale } from '@/composables/locale'
@@ -122,7 +123,9 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
                 />
               ) }
 
-              { isExpanded(item) && slots['expanded-row']?.({ item, columns: columns.value }) }
+              <VTableExpandTransition columns={ columns.value.length }>
+                { isExpanded(item) && slots['expanded-row']?.({ item, columns: columns.value }) }
+              </VTableExpandTransition>
             </>
           )
         }) }