@dialpad/dialtone/dist/vue3/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  compatConfig: { MODE: 3 },\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","_createElementBlock","_normalizeClass","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;;AAyBA,MAAM,YAAY,YAAU,WAAW,MAAM,CAAC,OAAO,MAAM,OAAO,MAAM,CAAC;AACzE,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,YAAY;AAAA,IACV,gBAAAA,aAAc;AAAA,EACf;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM,CAAC,QAAQ,MAAM;AAAA,MACrB,SAAS;AAAA,MACT;AAAA,IACD;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM,CAAC,QAAQ,KAAK;AAAA,MACpB,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,UAAU;AAAA,IACR,cAAe;AACb,aAAO,OAAO,KAAK,IAAI;AAAA,IACxB;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,wBAAyB;AACvB,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,YAAM,MAAM,KAAK,IAAI,KAAK,UAAU,KAAK,QAAQ;AACjD,aAAO,GAAG,KAAK,MAAM,KAAK,OAAM,KAAM,MAAM,IAAI,IAAI,GAAG;AAAA,IACxD;AAAA,IAED,oBAAqB,KAAK;AACxB,YAAM,iBAAiB,KAAK;AAC5B,YAAM,eAAe,MAAM,QAAQ,cAAc;AACjD,YAAM,eAAe,iDAAiB,MAAM;AAC5C,YAAM,YAAY,QAAQ,KAAK;AAE/B,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK;MACd;AAEA,UAAI,kBAAkB,CAAC,cAAc;AACnC,eAAO;AAAA,MACT;AAEA,UAAI,kBAAkB,gBAAgB,cAAc;AAClD,eAAO;AAAA,MACT;AAEA,aAAO,YAAY,QAAQ;AAAA,IAC5B;AAAA,EACF;AACH;;;0BA9JEC,IAkBM,mBAAA,OAAA;AAAA,IAjBH,OAFLC,IAAAA,eAAA;AAAA;MAEkD,OAAY;AAAA;IAI1D,cAAA;AAAA,IACA,WAAQ;AAAA;KAERC,cAAA,IAAA,GAAAF,IAAAA,mBASEG,IAlBN,UAAA,MAAAC,IAAAA,WAUoB,SAAW,aAV/B,CAUa,QAAG;8BADZC,IASE,YAAA,6BAAA;AAAA,QAPC,KAAK;AAAA,QACN,WAAQ;AAAA,QACP,iBAAe,OAAQ;AAAA,QACvB,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA,QACd,sBAAoB,OAAiB;AAAA,QACrC,OAAO,SAAmB,oBAAC,GAAG;AAAA;;;;;;"}