Vuetify: [Bug Report] VSkeletonLoader pre-defined table-row formatting issue

[185driver]

Environment

Vuetify Version: 2.2.3
Vue Version: 2.6.11
Browsers: Chrome 80.0.3987.42
OS: Windows 10

Steps to reproduce

1. Open the codepen and note that the two tables do not share matching css in the table-row-divider area.

Expected Behavior

According to the docs, pre-defined types should match their non-pre-defined type equivalents.

Actual Behavior

They do not match, as table-tbody != table-row-divider@6 in the repro.

Reproduction Link

https://codepen.io/185driver/pen/xxbzxJL

Other comments

That they don't match becomes an issue if one wishes to use a different number of table-rows, or if the use of the dark theme is desired. Without the helper formatting of table-tbody, the css doesn't work as expected.

This is not the only pre-defined type to be unmatched to it's parts:
table-heading != heading, text
table-thead != heading@6
table-row-divider != table-row, divider
table-row != table-cell@6
table-cell != text
table-tfoot != text@2, avatar@2

So some of the table- types have sugar added, but others do not.

Related to #9194, but this issue relates to table types.

[Leespiker]

If you wanted to use a different number of table rows, you could simply override the type you want to use. For example, if you wanted to use a table with 3 rows instead of the default of 6, you could use:

<v-skeleton-loader
  loading
  type="table"
  :types="{ 'table-tbody': 'table-row-divider@3' }"
/>

This allows for the proper wrapping to happen while changing the underlying base types.