feat(VSkeletonLoader): add types prop to v-skeleton-loader

[MichaelGoff]

Description

Vuetify 2 included the prop types which allowed you to define and use your own custom skeleton types with the existing types that Vuetify provides. This prop was not present in Vuetify 3.

In the component, I merge the custom types prop into the rootTypes and set that as a computed to keep it reactive.

I opted to move the gen* functions into setup to inherit the mergedTypes computed rather than pass it around as an extra parameter. Happy to set it up as a parameter instead if desired.

I'm not sure if there's anything I need to do on the documentation. I saw that there was already a description for the types prop in api-generator/src/locale/en/VSkeletonLoader.json

Markup:

<template>
  <v-app>
    <v-container>
      <v-skeleton-loader type="divider, packageList" class="package-list-skeleton-loader" :types="types" />
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        types: {
          packageDescription: 'sentences',
          packageMetadata: 'text',
          packageText: 'packageTitle, packageDescription, packageMetadata',
          packageTitle: 'text',
          packageList: 'thumbnail, packageText, button',
          thumbnail: 'image',
        },
      }
    },
  }
</script>

<style lang="scss">
.package-list-skeleton-loader {
  & .v-skeleton-loader__thumbnail {
    width: 150px;
    height: 100px;
  }
}
.v-skeleton-loader__packageList {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 8px 16px;
  & .v-skeleton-loader__packageText {
    padding-left: 8px;
    padding-right: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;

    & .v-skeleton-loader__packageTitle {
      max-width: 50%;
    }

    & .v-skeleton-loader__packageDescription {
      padding-top: 8px;
    }

    & .v-skeleton-loader__packageMetadata {
      max-width: 25%;
      padding-top: 12px;
    }
  }
}
</style>