@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 6.44 kB
Source Map (JSON)
{"version":3,"file":"skeleton.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <div\n aria-busy=\"true\"\n role=\"status\"\n :aria-label=\"ariaLabel\"\n >\n <dt-skeleton-list-item\n v-if=\"listItemOption\"\n v-bind=\"listItemOption === true ? {} : listItemOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-shape\n v-else-if=\"shapeOption\"\n v-bind=\"shapeOption === true ? {} : shapeOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-paragraph\n v-else-if=\"paragraphOption\"\n v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-text\n v-else\n v-bind=\"textOption || {}\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/**\n * Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n */\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtSkeleton',\n components: {\n DtSkeletonText,\n DtSkeletonShape,\n DtSkeletonListItem,\n DtSkeletonParagraph,\n },\n\n props: {\n /**\n * Set this prop to have the skeleton render as multiple lines of text.\n * Set only one option prop at a time.\n */\n paragraphOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /**\n * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n * Set only one option prop at a time.\n */\n listItemOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /**\n * Set this prop to have the skeleton render as a single line of text.\n * Set only one option prop at a time.\n */\n textOption: {\n type: Object,\n default: null,\n },\n\n /**\n * Set this prop to have the skeleton render as a specific shape.\n * Set only one option prop at a time.\n */\n shapeOption: {\n type: [Object, Boolean],\n default: null,\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 * Descriptive label for the content.\n */\n ariaLabel: {\n type: String,\n default: '',\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 computed: {\n validationOptions () {\n return {\n paragraphOption: this.paragraphOption,\n listItemOption: this.listItemOption,\n textOption: this.textOption,\n shapeOption: this.shapeOption,\n };\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n handler: 'validator',\n },\n },\n\n methods: {\n validator () {\n const filtered = Object.entries(this.validationOptions)\n .filter(([, option]) => option);\n if (filtered.length >= 2) {\n const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' | ')} options at the same time`;\n console.error(errorMessage);\n }\n },\n },\n};\n</script>\n"],"names":["_sfc_main","DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","filtered","option","errorMessage","key","_hoisted_1","_createElementBlock","$props","_openBlock","_createBlock","_component_dt_skeleton_list_item","_mergeProps","_component_dt_skeleton_shape","_component_dt_skeleton_paragraph","_component_dt_skeleton_text"],"mappings":"gXAiDA,MAAKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,aACN,WAAY,CACV,eAAAC,EAAAA,QACA,gBAAAC,EAAAA,QACA,mBAAAC,EAAAA,QACA,oBAAAC,EAAAA,SAGF,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,eAAgB,CACd,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAOX,WAAY,CACV,KAAM,OACN,QAAS,MAOX,YAAa,CACX,KAAM,CAAC,OAAQ,OAAO,EACtB,QAAS,MAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAOX,QAAS,CACP,KAAM,QACN,QAAS,IAWX,OAAQ,CACN,KAAM,OACN,QAAS,IAIb,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YAEtB,GAGF,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,cAIb,QAAS,CACP,WAAa,CACX,MAAMC,EAAW,OAAO,QAAQ,KAAK,iBAAiB,EACnD,OAAO,CAAC,CAAA,CAAGC,CAAM,IAAMA,CAAM,EAChC,GAAID,EAAS,QAAU,EAAG,CACxB,MAAME,EAAe,mBAAmBF,EAAS,IAAI,CAAC,CAACG,CAAG,IAAMA,CAAG,EAAE,KAAK,KAAK,CAAC,4BAChF,QAAQ,MAAMD,CAAY,CAC5B,CACF,EAEJ,EAnKAE,EAAA,CAAA,YAAA,oOACEC,EAAAA,mBAiCM,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAYC,EAAA,YAGLA,EAAA,gBADRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EANFC,EAAAA,WAME,CAZN,IAAA,GAQcJ,EAAA,uBAA+BA,EAAA,eAAc,CACpD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,aADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEG,EANFD,EAAAA,WAME,CAnBN,IAAA,GAecJ,EAAA,oBAA4BA,EAAA,YAAW,CAC9C,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,6DAGEA,EAAA,iBADbC,EAAAA,UAAA,EAAAC,EAAAA,YAMEI,EANFF,EAAAA,WAME,CA1BN,IAAA,GAsBcJ,EAAA,wBAAgCA,EAAA,gBAAe,CACtD,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,8DAEXC,EAAAA,YAAAC,EAAAA,YAMEK,EANFH,aAME,CAjCN,IAAA,GA6BcJ,EAAA,YAAU,GAAA,CACjB,qBAAoBA,EAAA,kBACpB,QAASA,EAAA,QACT,OAAQA,EAAA,4DAhCf,EAAA,EAAAF,CAAA"}