@dialpad/dialtone/dist/vue3/components/skeleton/skeleton.vue.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"skeleton.vue.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":["DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph","_createElementBlock","_openBlock","_createBlock","_mergeProps"],"mappings":"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"}