Fixed detail row transition.

[PrimozRome]

component to be wrapped around row tag not around
cell tag.

[miseeger]

Hi @PrimozRome, I'm currently getting into vuetable-2 to make it my standard vue-table component. I also wondered why transformation is not working and found your fix - not applied, yet but I fixed it manually with my local version of vuetable-2. The bad thing: it's still not working despite of having a transition css in the "style" of my parent component and declared this like detail-row-transition="expand". I'm not familiar yet with css transitions so I took this expand from one of your posts ;-)

[ratiw]

Already forced merge from master branch.

[PrimozRome]

@miseeger sorry I was traveling. Did you manage to get it working?

[ratiw]

I merged this PR because it is "logically" correct. I don't know if it's working properly or not.
Transition is not really my thing, so it would be great if you can help verify that it's working.

[miseeger]

@PrimozRome I have included the dev-version now, but it's still not working. Maybe I made some mistakes or missed something ... I'm still not familiar with transitions, just re-using code ;-)

Here's my code in excerpts:

<vuetable 
    ref="vuetable"
    :per-page="12"
    :api-url="apiUrl" 
    pagination-path="links.pagination" 
    :append-params="additionalParams" 
    :fields="fields" 
    :css="tableCss.table"
    noDataTemplate="Keine Daten ..."
    detail-row-component="tod-detail-row"
    detail-row-transition="expand"
    track-by="todId"
    @vuetable:loading="onLoading"
    @vuetable:loaded="onLoaded"
    @vuetable:pagination-data="onPaginationData"
    @vuetable:detail-row-clicked="onDetailRowClicked">

    <template slot="actions" scope="props">
        <div class="custom-actions">
            <button class="btn btn-default btn-xs" @click="onAction('edit-entry', props.rowData, props.rowIndex)"
                data-toggle="tooltip" data-placement="bottom" title="Eintrag/Registrierung bearbeiten">
                <i class="fa fa-users" aria-hidden="true"></i>
            </button>
            <button v-bind:class="{ disabled: props.rowData.confirmed }" class="btn btn-default btn-xs" @click="onAction('issue-confirmation', props.rowData, props.rowIndex)"
                data-toggle="tooltip" data-placement="bottom" title="Bestätigung erteilen">
                <i class="fa fa-check " aria-hidden="true"></i>
            </button>							
            <button v-bind:class="{ disabled: !props.rowData.confirmed }" class="btn btn-default btn-xs" @click="onAction('revoke-confirmation', props.rowData, props.rowIndex)"
                data-toggle="tooltip" data-placement="bottom" title="Bestätigung zurücknehmen">
                <i class="fa fa-times " aria-hidden="true"></i>
            </button>
        </div>
    </template>
</vuetable>

... and the style, included with my component:

<style>
	.expand-transition {
		transition: all .5s ease;
	}

	.expand-enter, .expand-leave {
		height: 0;
		opacity: 0;
	}
</style>

The corrected code for row transition is also present:

        <template v-if="useDetailRow">
          <transition :name="detailRowTransition">
            <tr v-if="isVisibleDetailRow(item[trackBy])"
              @click="onDetailRowClick(item, $event)"
              :class="[css.detailRowClass]"
            >
                <td :colspan="countVisibleFields">
                  <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
                </td>
            </tr>
          </transition>
        </template>

[miseeger]

Okay! Found my mistake! When using the correct transitions style it's working 🤦‍♂️ ...

<style>
    .expand-enter-active,
    .expand-leave-active {
		transition: all .5s ease;
	}

    .expand-enter,
    .expand-leave-active {
		height: 0;
		opacity: 0;
	}
</style>

[aplan-dev]

vuetable-2 master v1.7 still not updated. @ratiw Could you check?

//node_modules/vuetable-2/src/components/Vuetable.vue
....
<template v-if="useDetailRow">
          <tr v-if="isVisibleDetailRow(item[trackBy])"
            @click="onDetailRowClick(item, $event)"
            :class="[css.detailRowClass]"
          >
            <transition :name="detailRowTransition">  ---------------> still wrap around TD
              <td :colspan="countVisibleFields">
                <component :is="detailRowComponent" :row-data="item" :row-index="index"></component>
              </td>
            </transition>
          </tr>
        </template>

[ratiw]

@aplandev You are right. Guess the merge get lost somewhere as I used different machines. Will fix that when I can get my hand on it. Thanks!

[egerb]

@ratiw Just want to remind, please approve this PR bugfix, thank you

[ratiw]

@egerb It's already fixed, see here and here

[egerb]

@ratiw Oh, my apologize