@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.55 kB
Source Map (JSON)
{"version":3,"file":"skeleton-list-item.vue.cjs","sources":["../../../components/skeleton/skeleton-list-item.vue"],"sourcesContent":["<template>\n <div\n data-qa=\"skeleton-list-item\"\n :class=\"[\n 'd-skeleton-list-item',\n {\n 'd-skeleton-list-item--single': paragraphs.rows === 1,\n },\n contentClass,\n ]\"\n >\n <dt-skeleton-shape\n class=\"d-skeleton-list-item__shape\"\n :size=\"shapeSize\"\n :shape=\"shape\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n :content-class=\"shapeClass\"\n />\n <div class=\"d-skeleton-list-item__paragraph-container\">\n <dt-skeleton-paragraph\n v-bind=\"paragraphs\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n </div>\n</template>\n\n<script>\nimport { SKELETON_SHAPES } from './skeleton_constants';\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtSkeletonListItem',\n\n components: {\n DtSkeletonShape,\n DtSkeletonParagraph,\n },\n\n props: {\n /**\n * Defines the shape of the skeleton, accepts circle or square.\n * @values circle, square\n */\n shape: {\n type: String,\n default: 'circle',\n validator: shape => Object.keys(SKELETON_SHAPES).includes(shape),\n },\n\n /**\n * Size of the shape\n * @values xs, sm, md, lg, xl\n */\n shapeSize: {\n type: String,\n default: 'md',\n },\n\n /**\n * Object containing quantity of paragraphs to display\n * and a randomWidth boolean.\n */\n paragraphs: {\n type: Object,\n default: () => ({ rows: 3, randomWidth: true }),\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 * 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 * 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 * Additional class name for the shape.\n */\n shapeClass: {\n type: String,\n default: '',\n },\n\n /**\n * Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n};\n</script>\n"],"names":["DtSkeletonShape","DtSkeletonParagraph","SKELETON_SHAPES","_createElementBlock","_normalizeClass","_createVNode","_createElementVNode","_mergeProps"],"mappings":";;;;;;;AAoCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,iBAAAA,cAAe;AAAA,IACf,qBAAAC,kBAAmB;AAAA,EACpB;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,WAAS,OAAO,KAAKC,mBAAAA,eAAe,EAAE,SAAS,KAAK;AAAA,IAChE;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS,OAAO,EAAE,MAAM,GAAG,aAAa,KAAG;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,SAAS;AAAA,MACP,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,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AACH;AApGS,MAAA,aAAA,EAAA,OAAM,4CAA2C;;;;0BAnBxDC,IA2BM,mBAAA,OAAA;AAAA,IA1BJ,WAAQ;AAAA,IACP,OAHLC,IAAAA,eAAA;AAAA;;QAG4F,gCAAA,OAAA,WAAW,SAAI;AAAA;MAAuB,OAAY;AAAA;;IAQ1IC,IAAAA,YAQE,8BAAA;AAAA,MAPA,OAAM;AAAA,MACL,MAAM,OAAS;AAAA,MACf,OAAO,OAAK;AAAA,MACZ,sBAAoB,OAAiB;AAAA,MACrC,SAAS,OAAO;AAAA,MAChB,QAAQ,OAAM;AAAA,MACd,iBAAe,OAAU;AAAA;IAE5BC,IAAA,mBAOM,OAPN,YAOM;AAAA,MANJD,IAAAA,YAKE,kCALFE,eACU,OAAU,YAAA;AAAA,QACjB,sBAAoB,OAAiB;AAAA,QACrC,SAAS,OAAO;AAAA,QAChB,QAAQ,OAAM;AAAA;;;;;;"}