vuetify 2.0.19 → 2.1.0

package/src/components/VSkeletonLoader/VSkeletonLoader.sass

@@ -0,0 +1,364 @@
+// Imports
+@import '../../styles/styles.sass'
+@import './_variables.scss'
+
+// Theme
++theme(v-skeleton-loader) using ($material)
+  .v-skeleton-loader__bone::after
+    background: map-get($material, 'skeleton')
+
+  .v-skeleton-loader__avatar,
+  .v-skeleton-loader__button,
+  .v-skeleton-loader__chip,
+  .v-skeleton-loader__divider,
+  .v-skeleton-loader__heading,
+  .v-skeleton-loader__image,
+  .v-skeleton-loader__text
+    background: map-get($material, 'dividers')
+
+  .v-skeleton-loader__actions,
+  .v-skeleton-loader__article,
+  .v-skeleton-loader__card-heading,
+  .v-skeleton-loader__card-text,
+  .v-skeleton-loader__date-picker,
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line,
+  .v-skeleton-loader__table-heading,
+  .v-skeleton-loader__table-thead,
+  .v-skeleton-loader__table-tbody,
+  .v-skeleton-loader__table-tfoot
+    background: map-get($material, 'cards')
+
+.v-skeleton-loader
+  border-radius: $skeleton-loader-border-radius
+  position: relative
+  vertical-align: top
+
+  &__actions
+    padding: 16px 16px 8px
+    text-align: right
+
+    .v-skeleton-loader__button
+      display: inline-block
+
+      &:first-child
+        +ltr()
+          margin-right: 12px
+
+        +rtl()
+          margin-left: 12px
+
+
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line
+    border-radius: $skeleton-loader-border-radius
+
+  .v-skeleton-loader__actions,
+  .v-skeleton-loader__article,
+  .v-skeleton-loader__card,
+  .v-skeleton-loader__card-avatar,
+  .v-skeleton-loader__card-heading,
+  .v-skeleton-loader__card-text,
+  .v-skeleton-loader__date-picker,
+  .v-skeleton-loader__date-picker-options,
+  .v-skeleton-loader__date-picker-days,
+  .v-skeleton-loader__list-item,
+  .v-skeleton-loader__list-item-avatar,
+  .v-skeleton-loader__list-item-text,
+  .v-skeleton-loader__list-item-two-line,
+  .v-skeleton-loader__list-item-avatar-two-line,
+  .v-skeleton-loader__list-item-three-line,
+  .v-skeleton-loader__list-item-avatar-three-line,
+  .v-skeleton-loader__paragraph,
+  .v-skeleton-loader__sentences,
+  .v-skeleton-loader__table,
+  .v-skeleton-loader__table-cell,
+  .v-skeleton-loader__table-heading,
+  .v-skeleton-loader__table-thead,
+  .v-skeleton-loader__table-tbody,
+  .v-skeleton-loader__table-tfoot,
+  .v-skeleton-loader__table-row,
+  .v-skeleton-loader__table-row-divider
+    &::after
+      display: none
+
+  &__article
+    .v-skeleton-loader__heading
+      +ltr()
+        margin: 16px 0 8px 16px
+
+      +rtl()
+        margin: 16px 8px 0 16px
+
+    .v-skeleton-loader__paragraph
+      padding: 16px
+
+  &__avatar
+    border-radius: 50%
+    height: 48px
+    width: 48px
+
+  &__bone
+    overflow: hidden
+    position: relative
+
+    &::after
+      animation: $skeleton-loader-loading-animation
+      content: ''
+      height: 100%
+      left: 0
+      position: absolute
+      right: 0
+      top: 0
+      transform: $skeleton-loader-loading-transform
+      z-index: 1
+
+  &__button
+    border-radius: $skeleton-loader-button-border-radius
+    height: 36px
+    width: 64px
+
+  &__card-heading
+    .v-skeleton-loader__heading
+      margin: 16px
+
+  &__card-text
+    padding: 16px
+
+  &__chip
+    border-radius: $skeleton-loader-chip-border-radius
+    height: 32px
+    width: 96px
+
+  &__date-picker
+    border-radius: $skeleton-loader-date-picker-border-radius
+
+    .v-skeleton-loader__list-item:first-child
+      .v-skeleton-loader__text
+        max-width: 88px
+        width: 20%
+
+    .v-skeleton-loader__heading
+      max-width: 256px
+      width: 40%
+
+  &__date-picker-days
+    display: flex
+    flex-wrap: wrap
+    padding: 0 12px
+    margin: 0 auto
+
+    .v-skeleton-loader__avatar
+      border-radius: $skeleton-loader-border-radius
+      flex: 1 1 auto
+      margin: 4px
+      height: 40px
+      width: 40px
+
+  &__date-picker-options
+    align-items: center
+    display: flex
+    padding: 16px
+
+    .v-skeleton-loader__avatar
+      height: 40px
+      width: 40px
+
+      &:nth-child(2)
+        margin-left: auto
+
+        +ltr()
+          margin-right: 8px
+
+        +rtl()
+          margin-left: 8px
+
+    .v-skeleton-loader__text.v-skeleton-loader__bone:first-child
+      margin-bottom: 0px
+      max-width: 50%
+      width: 456px
+
+  &__divider
+    border-radius: $skeleton-loader-divider-border-radius
+    height: 2px
+
+  &__heading
+    border-radius: $skeleton-loader-heading-border-radius
+    height: 24px
+    width: 45%
+
+  &__image
+    height: 200px
+
+    &:not(:first-child):not(:last-child)
+      border-radius: 0
+
+  &__list-item
+    height: 48px
+
+  &__list-item-three-line
+    flex-wrap: wrap
+
+    > *
+      flex: 1 0 100%
+      width: 100%
+
+  &__list-item-avatar,
+  &__list-item-avatar-two-line,
+  &__list-item-avatar-three-line
+    .v-skeleton-loader__avatar
+      height: 40px
+      width: 40px
+
+  &__list-item-avatar
+    height: 56px
+
+  &__list-item-two-line,
+  &__list-item-avatar-two-line
+    height: 72px
+
+  &__list-item-three-line,
+  &__list-item-avatar-three-line
+    height: 88px
+
+  &__list-item-avatar-three-line
+    .v-skeleton-loader__avatar
+      align-self: flex-start
+
+  &__list-item,
+  &__list-item-avatar,
+  &__list-item-two-line,
+  &__list-item-three-line,
+  &__list-item-avatar-two-line,
+  &__list-item-avatar-three-line
+    align-content: center
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+    padding: 0 16px
+
+    .v-skeleton-loader__avatar
+      +ltr()
+        margin-right: 16px
+
+      +rtl()
+        margin-left: 16px
+
+    .v-skeleton-loader__text:last-child,
+    .v-skeleton-loader__text:only-child
+      margin-bottom: 0
+
+  &__paragraph,
+  &__sentences
+    flex: 1 0 auto
+
+  &__paragraph
+    &:not(:last-child)
+      margin-bottom: 6px
+
+    .v-skeleton-loader__text:nth-child(1)
+      max-width: 100%
+
+    .v-skeleton-loader__text:nth-child(2)
+      max-width: 50%
+
+    .v-skeleton-loader__text:nth-child(3)
+      max-width: 70%
+
+  &__sentences
+    .v-skeleton-loader__text:nth-child(2)
+      max-width: 70%
+
+    &:not(:last-child)
+      margin-bottom: 6px
+
+  &__table-heading
+    align-items: center
+    display: flex
+    justify-content: space-between
+    padding: 16px
+
+    .v-skeleton-loader__heading
+      max-width: 15%
+
+    .v-skeleton-loader__text
+      max-width: 40%
+
+  &__table-thead
+    display: flex
+    justify-content: space-between
+    padding: 16px
+
+    .v-skeleton-loader__heading
+      max-width: 5%
+
+  &__table-tbody
+    padding: 16px 16px 0
+
+  &__table-tfoot
+    align-items: center
+    display: flex
+    justify-content: flex-end
+    padding: 16px
+
+    > *
+      margin-left: 8px
+
+    .v-skeleton-loader__avatar
+      height: 40px
+      width: 40px
+
+    .v-skeleton-loader__text
+      margin-bottom: 0
+
+      &:nth-child(1)
+        max-width: 128px
+
+      &:nth-child(2)
+        max-width: 64px
+
+  &__table-row
+    display: flex
+    justify-content: space-between
+
+  &__table-cell
+    align-items: center
+    display: flex
+    height: 48px
+    width: 88px
+
+    .v-skeleton-loader__text
+      margin-bottom: 0
+
+  &__text
+    border-radius: $skeleton-loader-text-border-radius
+    flex: 1 0 auto
+    height: 12px
+    margin-bottom: 6px
+
+  &--boilerplate
+    .v-skeleton-loader__bone:after
+      display: none
+
+  &--is-loading
+    overflow: hidden
+
+  &--tile
+    border-radius: 0
+
+    .v-skeleton-loader__bone
+      border-radius: 0
+
+@keyframes loading
+  100%
+    transform: translateX(100%)

package/src/components/VSkeletonLoader/VSkeletonLoader.ts

@@ -0,0 +1,179 @@
+// Styles
+import './VSkeletonLoader.sass'
+
+// Mixins
+import Elevatable from '../../mixins/elevatable'
+import Measurable from '../../mixins/measurable'
+import Themeable from '../../mixins/themeable'
+
+// Utilities
+import mixins from '../../util/mixins'
+
+// Types
+import { VNode } from 'vue'
+import { getSlot } from '../../util/helpers'
+
+/* @vue/component */
+export default mixins(
+  Elevatable,
+  Measurable,
+  Themeable,
+).extend({
+  name: 'VSkeletonLoader',
+
+  props: {
+    boilerplate: Boolean,
+    loading: Boolean,
+    tile: Boolean,
+    transition: String,
+    type: String,
+    types: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  computed: {
+    attrs (): object {
+      if (!this.isLoading) return this.$attrs
+
+      return !this.boilerplate ? {
+        'aria-busy': true,
+        'aria-live': 'polite',
+        role: 'alert',
+        ...this.$attrs,
+      } : {}
+    },
+    classes (): object {
+      return {
+        'v-skeleton-loader--boilerplate': this.boilerplate,
+        'v-skeleton-loader--is-loading': this.isLoading,
+        'v-skeleton-loader--tile': this.tile,
+        ...this.themeClasses,
+        ...this.elevationClasses,
+      }
+    },
+    isLoading (): boolean {
+      return Boolean(
+        !getSlot(this) ||
+        this.loading
+      )
+    },
+    rootTypes (): Record<string, string> {
+      return {
+        actions: 'button@2',
+        article: 'heading, paragraph',
+        avatar: 'avatar',
+        button: 'button',
+        card: 'image, card-heading',
+        'card-avatar': 'image, list-item-avatar',
+        'card-heading': 'heading',
+        chip: 'chip',
+        'date-picker': 'list-item, card-heading, divider, date-picker-options, date-picker-days, actions',
+        'date-picker-options': 'text, avatar@2',
+        'date-picker-days': 'avatar@28',
+        heading: 'heading',
+        image: 'image',
+        'list-item': 'text',
+        'list-item-avatar': 'avatar, text',
+        'list-item-two-line': 'sentences',
+        'list-item-avatar-two-line': 'avatar, sentences',
+        'list-item-three-line': 'paragraph',
+        'list-item-avatar-three-line': 'avatar, paragraph',
+        paragraph: 'text@3',
+        sentences: 'text@2',
+        table: 'table-heading, table-thead, table-tbody, table-tfoot',
+        'table-heading': 'heading, text',
+        'table-thead': 'heading@6',
+        'table-tbody': 'table-row-divider@6',
+        'table-row-divider': 'table-row, divider',
+        'table-row': 'table-cell@6',
+        'table-cell': 'text',
+        'table-tfoot': 'text@2, avatar@2',
+        text: 'text',
+        ...this.types,
+      }
+    },
+  },
+
+  methods: {
+    genBone (text: string, children: VNode[]) {
+      return this.$createElement('div', {
+        staticClass: `v-skeleton-loader__${text} v-skeleton-loader__bone`,
+      }, children)
+    },
+    genBones (bone: string): VNode[] {
+      // e.g. 'text@3'
+      const [type, length] = bone.split('@') as [string, number]
+      const generator = () => this.genStructure(type)
+
+      // Generate a length array based upon
+      // value after @ in the bone string
+      return Array.from({ length }).map(generator)
+    },
+    // Fix type when this is merged
+    // https://github.com/microsoft/TypeScript/pull/33050
+    genStructure (type?: string): any {
+      let children = []
+      type = type || this.type || ''
+      const bone = this.rootTypes[type] || ''
+
+      // End of recursion, do nothing
+      /* eslint-disable-next-line no-empty, brace-style */
+      if (type === bone) {}
+      // Array of values - e.g. 'heading, paragraph, text@2'
+      else if (type.indexOf(',') > -1) return this.mapBones(type)
+      // Array of values - e.g. 'paragraph@4'
+      else if (type.indexOf('@') > -1) return this.genBones(type)
+      // Array of values - e.g. 'card@2'
+      else if (bone.indexOf(',') > -1) children = this.mapBones(bone)
+      // Array of values - e.g. 'list-item@2'
+      else if (bone.indexOf('@') > -1) children = this.genBones(bone)
+      // Single value - e.g. 'card-heading'
+      else if (bone) children.push(this.genStructure(bone))
+
+      return [this.genBone(type, children)]
+    },
+    genSkeleton () {
+      const children = []
+      const slot = getSlot(this)
+
+      if (!this.isLoading) children.push(slot)
+      else children.push(this.genStructure())
+
+      /* istanbul ignore else */
+      if (!this.transition) return children
+
+      /* istanbul ignore next */
+      return this.$createElement('transition', {
+        props: {
+          name: this.transition,
+        },
+        // Only show transition when
+        // content has been loaded
+        on: {
+          enter: (el: HTMLElement) => {
+            if (this.isLoading) el.style.transition = 'none'
+          },
+          beforeLeave: (el: HTMLElement) => {
+            el.style.display = 'none'
+          },
+        },
+      }, children)
+    },
+    mapBones (bones: string) {
+      // Remove spaces and return array of structures
+      return bones.replace(/\s/g, '').split(',').map(this.genStructure)
+    },
+  },
+
+  render (h): VNode {
+    return h('div', {
+      staticClass: 'v-skeleton-loader',
+      attrs: this.attrs,
+      on: this.$listeners,
+      class: this.classes,
+      style: this.isLoading ? this.measurableStyles : undefined,
+    }, [this.genSkeleton()])
+  },
+})

package/src/components/VSkeletonLoader/__tests__/VSkeletonLoader.spec.ts

@@ -0,0 +1,84 @@
+// Components
+import VSkeletonLoader from '../VSkeletonLoader'
+
+// Utilities
+import {
+  mount,
+  MountOptions,
+  Wrapper,
+} from '@vue/test-utils'
+
+describe('VSkeletonLoader.ts', () => {
+  type Instance = InstanceType<typeof VSkeletonLoader>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VSkeletonLoader, {
+        ...options,
+      })
+    }
+  })
+
+  it('should generate an array of elements based upon @ value', () => {
+    const wrapper = mountFunction()
+
+    expect(wrapper.vm.genBones('text@4')).toHaveLength(4)
+    expect(wrapper.vm.genBones('text@2')).toHaveLength(2)
+  })
+
+  it('should generate a skeleton recursive tree', () => {
+    const wrapper = mountFunction()
+
+    for (const key in wrapper.vm.rootTypes) {
+      const type = wrapper.vm.rootTypes[key]
+
+      const iteration = mountFunction({ propsData: { type } })
+
+      expect(iteration.html()).toMatchSnapshot()
+    }
+  })
+
+  it('should dynamically render content', () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>foobar</div>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    wrapper.setProps({ loading: true })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should have the correct a11y attributes when loading', () => {
+    const wrapper = mountFunction({
+      propsData: { loading: true },
+      slots: {
+        // Add a default slot to allow
+        // toggling the loading prop
+        default: '<div>foobar</div>',
+      },
+    })
+
+    expect(wrapper.element.getAttribute('aria-busy')).toBe('true')
+    expect(wrapper.element.getAttribute('aria-live')).toBe('polite')
+    expect(wrapper.element.getAttribute('role')).toBe('alert')
+
+    wrapper.setProps({ loading: false })
+
+    expect(wrapper.element.getAttribute('aria-busy')).toBeNull()
+    expect(wrapper.element.getAttribute('aria-live')).toBeNull()
+    expect(wrapper.element.getAttribute('role')).toBeNull()
+  })
+
+  it('should not render aria attributes when using boilerplate', () => {
+    const wrapper = mountFunction({
+      propsData: { boilerplate: true },
+    })
+
+    expect(wrapper.vm.attrs).toEqual({})
+  })
+})