UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

1 lines 4.32 kB
{"version":3,"file":"skeleton-text.vue.cjs","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n <div\n v-if=\"type === 'body'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-body\"\n :class=\"[\n 'd-skeleton-text',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n <div\n v-else-if=\"type === 'heading'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-heading\"\n :class=\"[\n SKELETON_HEADING_HEIGHTS[headingHeight],\n 'd-skeleton-text--heading',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtSkeletonText',\n\n mixins: [SkeletonAnimation],\n\n props: {\n /**\n * Skeleton type\n * @values body, heading\n */\n type: {\n type: String,\n default: 'body',\n validator: type => SKELETON_TEXT_TYPES.includes(type),\n },\n\n /**\n * Heading height\n * @values sm, md, lg\n */\n headingHeight: {\n type: String,\n default: 'md',\n validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n },\n\n /**\n * Width of the skeleton\n */\n width: {\n type: String,\n default: '100%',\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: 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 * Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n\n data () {\n return {\n SKELETON_HEADING_HEIGHTS,\n };\n },\n};\n</script>\n"],"names":["SkeletonAnimation","SKELETON_TEXT_TYPES","SKELETON_HEADING_HEIGHTS","_createElementBlock","_normalizeClass","_normalizeStyle","_createCommentVNode"],"mappings":";;;;;;AA0CA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,QAAQ,CAACA,SAAAA,OAAiB;AAAA,EAE1B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,UAAQC,uCAAoB,SAAS,IAAI;AAAA,IACrD;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,mBAAiB,OAAO,KAAKC,mBAAAA,wBAAwB,EAAE,SAAS,aAAa;AAAA,IACzF;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;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,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,gCACLA,mBAAwB;AAAA;EAE3B;AACH;;SAvHU,OAAI,SAAA,2BADZC,IAgBE,mBAAA,OAAA;AAAA,IAjBJ,KAAA;AAAA,IAGI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OALLC,IAAAA,eAAA;AAAA;;;2CAK0H,OAAO;AAAA;MAAiB,OAAY;AAAA;IAQzJ,OAbLC,IAAAA,eAAA;AAAA,aAaoB,OAAK;AAAA,SAAW,KAAa;AAAA;iBAMlC,OAAI,SAAA,8BADjBF,IAiBE,mBAAA,OAAA;AAAA,IAnCJ,KAAA;AAAA,IAoBI,KAAI;AAAA,IACJ,WAAQ;AAAA,IACP,OAtBLC,IAAAA,eAAA;AAAA,MAsBoB,MAAA,yBAAyB,OAAa,aAAA;AAAA;;;2CAAwH,OAAO;AAAA;MAAiB,OAAY;AAAA;IASjN,OA/BLC,IAAAA,eAAA;AAAA,aA+BoB,OAAK;AAAA,SAAW,KAAa;AAAA;iBA/BjDC,IAAA,mBAAA,IAAA,IAAA;;;;"}