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