@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 4.13 kB
Source Map (JSON)
{"version":3,"file":"skeleton-list-item.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":["_sfc_main","DtSkeletonShape","DtSkeletonParagraph","shape","SKELETON_SHAPES","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createVNode","_component_dt_skeleton_shape","_createElementVNode","_component_dt_skeleton_paragraph","_mergeProps"],"mappings":"2SAoCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,qBAEN,WAAY,CACV,gBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,MAAO,CACL,KAAM,OACN,QAAS,SACT,UAAWC,GAAS,OAAO,KAAKC,EAAAA,eAAe,EAAE,SAASD,CAAK,GAOjE,UAAW,CACT,KAAM,OACN,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,KAAO,CAAE,KAAM,EAAG,YAAa,EAAG,IAM7C,kBAAmB,CACjB,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,GAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAGf,EApGSE,EAAA,CAAA,MAAM,2CAA2C,6IAnBxDC,EAAAA,mBA2BM,MAAA,CA1BJ,UAAQ,qBACP,MAHLC,EAAAA,eAAA,yBAG4F,+BAAAC,EAAA,WAAW,OAAI,GAAuBA,EAAA,iBAQ9HC,EAAAA,YAQEC,EAAA,CAPA,MAAM,8BACL,KAAMF,EAAA,UACN,MAAOA,EAAA,MACP,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,OACR,gBAAeA,EAAA,6FAElBG,EAAAA,mBAOM,MAPNN,EAOM,CANJI,EAAAA,YAKEG,EALFC,aACUL,EAAA,WAAU,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA"}