@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 6.1 kB
Source Map (JSON)
{"version":3,"file":"skeleton.cjs","names":[],"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"],"mappings":"uWAiDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,aACN,WAAY,CACV,eAAA,EAAA,QACA,gBAAA,EAAA,QACA,mBAAA,EAAA,QACA,oBAAA,EAAA,QACD,CAED,MAAO,CAKL,gBAAiB,CACf,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,eAAgB,CACd,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAMD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,YAAa,CACX,KAAM,CAAC,OAAQ,QAAQ,CACvB,QAAS,KACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAUD,OAAQ,CACN,KAAM,OACN,QAAS,EACV,CACF,CAED,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,gBAAiB,KAAK,gBACtB,eAAgB,KAAK,eACrB,WAAY,KAAK,WACjB,YAAa,KAAK,YACnB,EAEJ,CAED,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAAS,YACV,CACF,CAED,QAAS,CACP,WAAa,CACX,IAAM,EAAW,OAAO,QAAQ,KAAK,kBAAiB,CACnD,QAAQ,EAAG,KAAY,EAAO,CACjC,GAAI,EAAS,QAAU,EAAG,CACxB,IAAM,EAAe,mBAAmB,EAAS,KAAK,CAAC,KAAS,EAAI,CAAC,KAAK,MAAM,CAAA,2BAChF,QAAQ,MAAM,EAAa,GAGhC,CACF,8RAjIO,MAAA,CAhCJ,YAAU,OACV,KAAK,SACJ,aAAY,EAAA,YAGL,EAAA,iBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKN,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,iBAAc,GAAA,EAAA,CAAiB,EAAA,eAAc,CACpD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,cAAW,GAAA,EAAA,CAAiB,EAAA,YAAW,CAC9C,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,6DAGE,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKX,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,kBAAe,GAAA,EAAA,CAAiB,EAAA,gBAAe,CACtD,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA,kGAQT,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAJQ,EAAA,YAAU,EAAA,CAAA,CACjB,qBAAoB,EAAA,kBACpB,QAAS,EAAA,QACT,OAAQ,EAAA"}