@dialpad/dialtone/dist/vue2/components/skeleton/skeleton-paragraph.vue.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"skeleton-paragraph.vue.cjs","sources":["../../../components/skeleton/skeleton-paragraph.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-skeleton-paragraph',\n      contentClass,\n    ]\"\n    contentClass\n    data-qa=\"skeleton-paragraph\"\n  >\n    <dt-skeleton-text\n      v-for=\"row in integerRows\"\n      :key=\"row\"\n      data-qa=\"skeleton-paragraph-row\"\n      :content-class=\"rowClass\"\n      :animate=\"animate\"\n      :offset=\"offset\"\n      :animation-duration=\"animationDuration\"\n      :width=\"getSizeParagraphRow(row)\"\n    />\n  </div>\n</template>\n\n<script>\nimport DtSkeletonText from './skeleton-text.vue';\n\nconst validator = number => number !== '' && !Number.isNaN(Number(number));\nexport default {\n  name: 'DtSkeletonParagraph',\n  components: {\n    DtSkeletonText,\n  },\n\n  props: {\n    /**\n     * Quantity of rows to display\n     */\n    rows: {\n      type: [Number, String],\n      default: 3,\n      validator,\n    },\n\n    /**\n     * This property has higher priority than \"option.animate\"\n     * @values true, false\n     */\n    animate: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Controls the min width of paragraphs\n     */\n    minWidth: {\n      type: [Number, String],\n      default: 30,\n      validator,\n    },\n\n    /**\n     * Controls the max width of paragraphs\n     */\n    maxWidth: {\n      type: [Number, String],\n      default: 100,\n      validator,\n    },\n\n    /**\n     * Controls the width of paragraphs\n     */\n    width: {\n      type: [String, Array],\n      default: null,\n    },\n\n    /**\n     * If true, row widths will be random\n     * @values true, false\n     */\n    randomWidth: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * RippleDuration controls how long the delay is for the animation of a\n     * placeholder 1000 pixels from the top of the page. Each placeholder\n     * from the top down will have a delay duration from 0 to this offset.\n     * The delay of each placeholder animation is based on how far down the page\n     * the placeholder is rendered. This is a linear relationship. The unit\n     * is milliseconds.\n     */\n    offset: {\n      type: Number,\n      default: 1,\n    },\n\n    /**\n     * Duration time of the animation (ms), set -1 for an infinite animation.\n     */\n    animationDuration: {\n      type: Number,\n      default: -1,\n    },\n\n    /**\n     * Additional class name for the content.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the row.\n     */\n    rowClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    integerRows () {\n      return Number(this.rows);\n    },\n  },\n\n  methods: {\n    randomWidthPercentage () {\n      const min = Math.min(this.minWidth, this.maxWidth);\n      const max = Math.max(this.minWidth, this.maxWidth);\n      return `${Math.round(Math.random() * (max - min)) + min}%`;\n    },\n\n    getSizeParagraphRow (row) {\n      const paragraphWidth = this.width;\n      const isArrayWidth = Array.isArray(paragraphWidth);\n      const currentWidth = paragraphWidth?.[row - 1];\n      const isLastRow = row === this.rows;\n\n      if (this.randomWidth) {\n        return this.randomWidthPercentage();\n      }\n\n      if (paragraphWidth && !isArrayWidth) {\n        return paragraphWidth;\n      }\n\n      if (paragraphWidth && isArrayWidth && currentWidth) {\n        return currentWidth;\n      }\n\n      return isLastRow ? '38%' : '100%';\n    },\n  },\n};\n</script>\n"],"names":["DtSkeletonText"],"mappings":";;;;AAyBA,MAAA,YAAA,YAAA,WAAA,MAAA,CAAA,OAAA,MAAA,OAAA,MAAA,CAAA;AACA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,gBAAAA,aAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,OAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AACA,YAAA,MAAA,KAAA,IAAA,KAAA,UAAA,KAAA,QAAA;AACA,YAAA,MAAA,KAAA,IAAA,KAAA,UAAA,KAAA,QAAA;AACA,aAAA,GAAA,KAAA,MAAA,KAAA,OAAA,KAAA,MAAA,IAAA,IAAA,GAAA;AAAA,IACA;AAAA,IAEA,oBAAA,KAAA;AACA,YAAA,iBAAA,KAAA;AACA,YAAA,eAAA,MAAA,QAAA,cAAA;AACA,YAAA,eAAA,iDAAA,MAAA;AACA,YAAA,YAAA,QAAA,KAAA;AAEA,UAAA,KAAA,aAAA;AACA,eAAA,KAAA;MACA;AAEA,UAAA,kBAAA,CAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,UAAA,kBAAA,gBAAA,cAAA;AACA,eAAA;AAAA,MACA;AAEA,aAAA,YAAA,QAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}