@kokoccc/vuetify 1.0.1

package/src/components/VSkeletonLoader/VSkeletonLoader.ts

@@ -0,0 +1,204 @@
+import {Transition, h} from 'vue'
+// 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'
+import { PropValidator } from 'vue/types/options'
+
+export interface HTMLSkeletonLoaderElement extends HTMLElement {
+  _initialStyle?: {
+    display: string | null
+    transition: string
+  }
+}
+
+/* @vue/component */
+export default mixins(
+  Elevatable,
+  Measurable,
+  Themeable,
+).extend({
+  name: 'VSkeletonLoader',
+
+  props: {
+    boilerplate: Boolean,
+    loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$vuetify.loading',
+    },
+    tile: Boolean,
+    transition: String,
+    type: String,
+    types: {
+      type: Object,
+      default: () => ({}),
+    } as PropValidator<Record<string, string>>,
+  },
+
+  computed: {
+    attrs (): object {
+      if (!this.isLoading) return this.$attrs
+
+      return {
+        'aria-busy': !this.boilerplate ? true : undefined,
+        'aria-live': !this.boilerplate ? 'polite' : undefined,
+        'aria-label': !this.boilerplate ? this.$vuetify.lang.t(this.loadingText) : undefined,
+        role: !this.boilerplate ? 'alert' : undefined
+      }
+    },
+    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 !('default' in this.$slots) || 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 h('div', {
+        class: `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 = []
+
+      if (!this.isLoading) children.push(getSlot(this))
+      else children.push(this.genStructure())
+
+      /* istanbul ignore else */
+      if (!this.transition) return children
+
+      /* istanbul ignore next */
+      return h(Transition, {
+        name: this.transition,
+        // Only show transition when
+        // content has been loaded
+        onAfterEnter: this.resetStyles,
+        onBeforeEnter: this.onBeforeEnter,
+        onBeforeLeave: this.onBeforeLeave,
+        onLeaveCancelled: this.resetStyles
+      }, children)
+    },
+    mapBones (bones: string) {
+      // Remove spaces and return array of structures
+      return bones.replace(/\s/g, '').split(',').map(this.genStructure)
+    },
+    onBeforeEnter (el: HTMLSkeletonLoaderElement) {
+      this.resetStyles(el)
+
+      if (!this.isLoading) return
+
+      el._initialStyle = {
+        display: el.style.display,
+        transition: el.style.transition,
+      }
+
+      el.style.setProperty('transition', 'none', 'important')
+    },
+    onBeforeLeave (el: HTMLSkeletonLoaderElement) {
+      el.style.setProperty('display', 'none', 'important')
+    },
+    resetStyles (el: HTMLSkeletonLoaderElement) {
+      if (!el._initialStyle) return
+
+      el.style.display = el._initialStyle.display || ''
+      el.style.transition = el._initialStyle.transition
+
+      delete el._initialStyle
+    },
+  },
+
+  render (): VNode {
+    return h('div', {
+      class: ['v-skeleton-loader', this.classes],
+      ...this.attrs,
+      ...this.$listeners,
+      style: this.isLoading ? this.measurableStyles : undefined,
+    }, [this.genSkeleton()])
+  },
+})

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

@@ -0,0 +1,145 @@
+// Components
+import VSkeletonLoader, { HTMLSkeletonLoaderElement } from '../VSkeletonLoader'
+
+// Utilities
+import {
+  mount,
+  enableAutoUnmount,
+  VueWrapper,
+} from '@vue/test-utils'
+import { nextTick } from 'vue'
+
+describe('VSkeletonLoader.ts', () => {
+  type Instance = InstanceType<typeof VSkeletonLoader>
+  let mountFunction: (options?: any) => VueWrapper
+
+  enableAutoUnmount(afterEach)
+
+  beforeEach(() => {
+    mountFunction = (options = {}) => {
+      return mount(VSkeletonLoader, {
+        global: {
+          mocks: {
+            $vuetify: {
+              lang: {
+                t: (v: string) => v,
+              },
+            },
+          },
+        },
+        ...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({ props: { type } })
+
+      expect(iteration.html()).toMatchSnapshot()
+    }
+  })
+
+  it('should dynamically render content', async () => {
+    const wrapper = mountFunction({
+      slots: {
+        default: '<div>foobar</div>',
+      },
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+
+    await wrapper.setProps({ loading: true })
+    await nextTick()
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('should have the correct a11y attributes when loading', async () => {
+    const wrapper = mountFunction({
+      props: { 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')
+
+    await wrapper.setProps({ loading: false })
+    await nextTick()
+
+    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({
+      props: { boilerplate: true },
+    })
+
+    expect(wrapper.vm.attrs).toEqual({})
+  })
+
+  // https://github.com/vuetifyjs/vuetify/issues/9459
+  // eslint-disable-next-line max-statements
+  it('should remove transition when loading content', () => {
+    const el = document.createElement('div') as HTMLSkeletonLoaderElement
+    const wrapper = mountFunction({
+      props: { loading: true },
+    })
+
+    wrapper.vm.onBeforeEnter(el)
+
+    expect(el._initialStyle).not.toBeUndefined()
+    expect(el._initialStyle).toMatchSnapshot()
+    expect(el.style.transition).toBe('none')
+    expect(el.style.display).toBe('')
+
+    // After enter
+    wrapper.vm.resetStyles(el)
+
+    expect(el.style.transition).toBe('')
+    expect(el.style.display).toBe('')
+
+    wrapper.vm.onBeforeLeave(el)
+
+    expect(el.style.display).toBe('none')
+
+    // Existing display/transition properties
+    el.style.display = 'inline-block'
+    el.style.transition = '.3s ease'
+
+    wrapper.vm.onBeforeEnter(el)
+
+    expect(el._initialStyle).not.toBeUndefined()
+    expect(el._initialStyle).toMatchSnapshot()
+    expect(el.style.transition).toBe('none')
+    expect(el.style.display).toBe('inline-block')
+
+    // After enter
+    wrapper.vm.resetStyles(el)
+
+    expect(el.style.transition).toBe('.3s ease')
+    expect(el.style.display).toBe('inline-block')
+
+    wrapper.vm.onBeforeLeave(el)
+
+    expect(el.style.display).toBe('none')
+  })
+})