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

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"skeleton-paragraph.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":["validator","number","_sfc_main","DtSkeletonText","min","max","row","paragraphWidth","isArrayWidth","currentWidth","isLastRow"],"mappings":"2MAyBAA,EAAAC,GAAAA,IAAA,IAAA,CAAA,OAAA,MAAA,OAAAA,CAAA,CAAA,EACAC,EAAA,CACA,KAAA,sBACA,WAAA,CACA,eAAAC,EAAAA,OACA,EAEA,MAAA,CAIA,KAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,EACA,UAAAH,CACA,EAMA,QAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,GACA,UAAAA,CACA,EAKA,SAAA,CACA,KAAA,CAAA,OAAA,MAAA,EACA,QAAA,IACA,UAAAA,CACA,EAKA,MAAA,CACA,KAAA,CAAA,OAAA,KAAA,EACA,QAAA,IACA,EAMA,YAAA,CACA,KAAA,QACA,QAAA,EACA,EAUA,OAAA,CACA,KAAA,OACA,QAAA,CACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,aAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,OACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,aAAA,CACA,OAAA,OAAA,KAAA,IAAA,CACA,CACA,EAEA,QAAA,CACA,uBAAA,CACA,MAAAI,EAAA,KAAA,IAAA,KAAA,SAAA,KAAA,QAAA,EACAC,EAAA,KAAA,IAAA,KAAA,SAAA,KAAA,QAAA,EACA,MAAA,GAAA,KAAA,MAAA,KAAA,UAAAA,EAAAD,EAAA,EAAAA,CAAA,GACA,EAEA,oBAAAE,EAAA,CACA,MAAAC,EAAA,KAAA,MACAC,EAAA,MAAA,QAAAD,CAAA,EACAE,EAAAF,GAAA,YAAAA,EAAAD,EAAA,GACAI,EAAAJ,IAAA,KAAA,KAEA,OAAA,KAAA,YACA,KAAA,sBAAA,EAGAC,GAAA,CAAAC,EACAD,EAGAA,GAAAC,GAAAC,EACAA,EAGAC,EAAA,MAAA,MACA,CACA,CACA"}