@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/skeleton.cjs

@@ -1,2 +1,636 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),m=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),k=3e6,d={circle:"d-bar-circle",square:"d-bar2"},_=["body","heading"],S={sm:"24px",md:"32px",lg:"48px"},u={sm:"d-h16",md:"d-h24",lg:"d-h32"},y={computed:{skeletonOffset(){const n=this.$refs.skeleton;if(!n)return this.offset;const{top:a,height:t}=n.getBoundingClientRect();return a+t/2},skeletonStyle(){const n={};if(this.skeletonOffset===-1||!this.animate&&this.animationDuration===-1)return n;const a=this.skeletonOffset*k/1e3,t=this.animationDuration===-1?1e3:this.animationDuration;return n.animationDelay=`${a}ms`,n.animationDuration=`${t}ms`,n}}},D={name:"DtSkeletonShape",mixins:[y],props:{shape:{type:String,default:"circle",validator:n=>Object.keys(d).includes(n)},size:{type:String,default:"md"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},contentClass:{type:[String,Object,Array],default:""}},data(){return{SKELETON_SHAPES:d}},computed:{shapeStyles(){const n=S[this.size]||this.size;return{...this.skeletonStyle,"min-width":n,"max-width":n,"min-height":n,"max-height":n}}}};function N(n,a,t,i,o,l){return e.openBlock(),e.createElementBlock("div",{ref:"skeleton","data-qa":"skeleton-shape",class:e.normalizeClass(["skeleton-placeholder",o.SKELETON_SHAPES[t.shape],{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle(l.shapeStyles)},null,6)}const h=m._(D,[["render",N]]),b={name:"DtSkeletonText",mixins:[y],props:{type:{type:String,default:"body",validator:n=>_.includes(n)},headingHeight:{type:String,default:"md",validator:n=>Object.keys(u).includes(n)},width:{type:String,default:"100%"},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!1},offset:{type:Number,default:1},contentClass:{type:String,default:""}},data(){return{SKELETON_HEADING_HEIGHTS:u}}};function B(n,a,t,i,o,l){return t.type==="body"?(e.openBlock(),e.createElementBlock("div",{key:0,ref:"skeleton","data-qa":"skeleton-text-body",class:e.normalizeClass(["d-skeleton-text","skeleton-placeholder",{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle({width:t.width,...n.skeletonStyle})},null,6)):t.type==="heading"?(e.openBlock(),e.createElementBlock("div",{key:1,ref:"skeleton","data-qa":"skeleton-text-heading",class:e.normalizeClass([o.SKELETON_HEADING_HEIGHTS[t.headingHeight],"d-skeleton-text--heading","skeleton-placeholder",{"skeleton-placeholder--animate":t.animate},t.contentClass]),style:e.normalizeStyle({width:t.width,...n.skeletonStyle})},null,6)):e.createCommentVNode("",!0)}const f=m._(b,[["render",B]]),c=n=>n!==""&&!Number.isNaN(Number(n)),x={name:"DtSkeletonParagraph",components:{DtSkeletonText:f},props:{rows:{type:[Number,String],default:3,validator:c},animate:{type:Boolean,default:!0},minWidth:{type:[Number,String],default:30,validator:c},maxWidth:{type:[Number,String],default:100,validator:c},width:{type:[String,Array],default:null},randomWidth:{type:Boolean,default:!1},offset:{type:Number,default:1},animationDuration:{type:Number,default:-1},contentClass:{type:String,default:""},rowClass:{type:String,default:""}},computed:{integerRows(){return Number(this.rows)}},methods:{randomWidthPercentage(){const n=Math.min(this.minWidth,this.maxWidth),a=Math.max(this.minWidth,this.maxWidth);return`${Math.round(Math.random()*(a-n))+n}%`},getSizeParagraphRow(n){const a=this.width,t=Array.isArray(a),i=a==null?void 0:a[n-1],o=n===this.rows;return this.randomWidth?this.randomWidthPercentage():a&&!t?a:a&&t&&i?i:o?"38%":"100%"}}};function C(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-text");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-skeleton-paragraph",t.contentClass]),contentClass:"","data-qa":"skeleton-paragraph"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.integerRows,s=>(e.openBlock(),e.createBlock(r,{key:s,"data-qa":"skeleton-paragraph-row","content-class":t.rowClass,animate:t.animate,offset:t.offset,"animation-duration":t.animationDuration,width:l.getSizeParagraphRow(s)},null,8,["content-class","animate","offset","animation-duration","width"]))),128))],2)}const p=m._(x,[["render",C]]),T={name:"DtSkeletonListItem",components:{DtSkeletonShape:h,DtSkeletonParagraph:p},props:{shape:{type:String,default:"circle",validator:n=>Object.keys(d).includes(n)},shapeSize:{type:String,default:"md"},paragraphs:{type:Object,default:()=>({rows:3,randomWidth:!0})},animationDuration:{type:Number,default:-1},animate:{type:Boolean,default:!0},offset:{type:Number,default:1},shapeClass:{type:String,default:""},contentClass:{type:String,default:""}}},v={class:"d-skeleton-list-item__paragraph-container"};function P(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-shape"),s=e.resolveComponent("dt-skeleton-paragraph");return e.openBlock(),e.createElementBlock("div",{"data-qa":"skeleton-list-item",class:e.normalizeClass(["d-skeleton-list-item",{"d-skeleton-list-item--single":t.paragraphs.rows===1},t.contentClass])},[e.createVNode(r,{class:"d-skeleton-list-item__shape",size:t.shapeSize,shape:t.shape,"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset,"content-class":t.shapeClass},null,8,["size","shape","animation-duration","animate","offset","content-class"]),e.createElementVNode("div",v,[e.createVNode(s,e.mergeProps(t.paragraphs,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])])],2)}const g=m._(T,[["render",P]]),w={name:"DtSkeleton",components:{DtSkeletonText:f,DtSkeletonShape:h,DtSkeletonListItem:g,DtSkeletonParagraph:p},props:{paragraphOption:{type:[Object,Boolean],default:null},listItemOption:{type:[Object,Boolean],default:null},textOption:{type:Object,default:null},shapeOption:{type:[Object,Boolean],default:null},animationDuration:{type:Number,default:-1},ariaLabel:{type:String,default:""},animate:{type:Boolean,default:!0},offset:{type:Number,default:1}},computed:{validationOptions(){return{paragraphOption:this.paragraphOption,listItemOption:this.listItemOption,textOption:this.textOption,shapeOption:this.shapeOption}}},watch:{$props:{immediate:!0,handler:"validator"}},methods:{validator(){const n=Object.entries(this.validationOptions).filter(([a,t])=>t);if(n.length>=2){const a=`Use only one of ${n.map(([t])=>t).join(" | ")} options at the same time`;console.error(a)}}}},I=["aria-label"];function L(n,a,t,i,o,l){const r=e.resolveComponent("dt-skeleton-list-item"),s=e.resolveComponent("dt-skeleton-shape"),O=e.resolveComponent("dt-skeleton-paragraph"),E=e.resolveComponent("dt-skeleton-text");return e.openBlock(),e.createElementBlock("div",{"aria-busy":"true",role:"status","aria-label":t.ariaLabel},[t.listItemOption?(e.openBlock(),e.createBlock(r,e.mergeProps({key:0},t.listItemOption===!0?{}:t.listItemOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):t.shapeOption?(e.openBlock(),e.createBlock(s,e.mergeProps({key:1},t.shapeOption===!0?{}:t.shapeOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):t.paragraphOption?(e.openBlock(),e.createBlock(O,e.mergeProps({key:2},t.paragraphOption===!0?{}:t.paragraphOption,{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"])):(e.openBlock(),e.createBlock(E,e.mergeProps({key:3},t.textOption||{},{"animation-duration":t.animationDuration,animate:t.animate,offset:t.offset}),null,16,["animation-duration","animate","offset"]))],8,I)}const z=m._(w,[["render",L]]);exports.DtSkeleton=z;exports.DtSkeletonListItem=g;exports.DtSkeletonParagraph=p;exports.DtSkeletonShape=h;exports.DtSkeletonText=f;exports.SKELETON_HEADING_HEIGHTS=u;exports.SKELETON_RIPPLE_DURATION=k;exports.SKELETON_SHAPES=d;exports.SKELETON_SHAPE_SIZES=S;exports.SKELETON_TEXT_TYPES=_;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const SKELETON_RIPPLE_DURATION = 3e6;
+const SKELETON_SHAPES = {
+  circle: "d-bar-circle",
+  square: "d-bar2"
+};
+const SKELETON_TEXT_TYPES = [
+  "body",
+  "heading"
+];
+const SKELETON_SHAPE_SIZES = {
+  sm: "24px",
+  md: "32px",
+  lg: "48px"
+};
+const SKELETON_HEADING_HEIGHTS = {
+  sm: "d-h16",
+  md: "d-h24",
+  lg: "d-h32"
+};
+const SkeletonAnimation = {
+  computed: {
+    skeletonOffset() {
+      const skeletonText = this.$refs.skeleton;
+      if (!skeletonText) {
+        return this.offset;
+      }
+      const { top, height } = skeletonText.getBoundingClientRect();
+      return top + height / 2;
+    },
+    skeletonStyle() {
+      const style = {};
+      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1) {
+        return style;
+      }
+      const animationDelay = this.skeletonOffset * SKELETON_RIPPLE_DURATION / 1e3;
+      const animationDuration = this.animationDuration === -1 ? 1e3 : this.animationDuration;
+      style.animationDelay = `${animationDelay}ms`;
+      style.animationDuration = `${animationDuration}ms`;
+      return style;
+    }
+  }
+};
+const _sfc_main$4 = {
+  name: "DtSkeletonShape",
+  mixins: [SkeletonAnimation],
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: [String, Object, Array],
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_SHAPES
+    };
+  },
+  computed: {
+    shapeStyles() {
+      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;
+      return {
+        ...this.skeletonStyle,
+        "min-width": size,
+        "max-width": size,
+        "min-height": size,
+        "max-height": size
+      };
+    }
+  }
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    ref: "skeleton",
+    "data-qa": "skeleton-shape",
+    class: vue.normalizeClass([
+      "skeleton-placeholder",
+      $data.SKELETON_SHAPES[$props.shape],
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
+    style: vue.normalizeStyle($options.shapeStyles)
+  }, null, 6);
+}
+const DtSkeletonShape = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
+  name: "DtSkeletonText",
+  mixins: [SkeletonAnimation],
+  props: {
+    /**
+     * Skeleton type
+     * @values body, heading
+     */
+    type: {
+      type: String,
+      default: "body",
+      validator: (type) => SKELETON_TEXT_TYPES.includes(type)
+    },
+    /**
+     * Heading height
+     * @values sm, md, lg
+     */
+    headingHeight: {
+      type: String,
+      default: "md",
+      validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
+    },
+    /**
+     * Width of the skeleton
+     */
+    width: {
+      type: String,
+      default: "100%"
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      SKELETON_HEADING_HEIGHTS
+    };
+  }
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.type === "body" ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 0,
+    ref: "skeleton",
+    "data-qa": "skeleton-text-body",
+    class: vue.normalizeClass([
+      "d-skeleton-text",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
+    style: vue.normalizeStyle({
+      width: $props.width,
+      ..._ctx.skeletonStyle
+    })
+  }, null, 6)) : $props.type === "heading" ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 1,
+    ref: "skeleton",
+    "data-qa": "skeleton-text-heading",
+    class: vue.normalizeClass([
+      $data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
+      "d-skeleton-text--heading",
+      "skeleton-placeholder",
+      {
+        "skeleton-placeholder--animate": $props.animate
+      },
+      $props.contentClass
+    ]),
+    style: vue.normalizeStyle({
+      width: $props.width,
+      ..._ctx.skeletonStyle
+    })
+  }, null, 6)) : vue.createCommentVNode("", true);
+}
+const DtSkeletonText = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
+const validator = (number) => number !== "" && !Number.isNaN(Number(number));
+const _sfc_main$2 = {
+  name: "DtSkeletonParagraph",
+  components: {
+    DtSkeletonText
+  },
+  props: {
+    /**
+     * Quantity of rows to display
+     */
+    rows: {
+      type: [Number, String],
+      default: 3,
+      validator
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Controls the min width of paragraphs
+     */
+    minWidth: {
+      type: [Number, String],
+      default: 30,
+      validator
+    },
+    /**
+     * Controls the max width of paragraphs
+     */
+    maxWidth: {
+      type: [Number, String],
+      default: 100,
+      validator
+    },
+    /**
+     * Controls the width of paragraphs
+     */
+    width: {
+      type: [String, Array],
+      default: null
+    },
+    /**
+     * If true, row widths will be random
+     * @values true, false
+     */
+    randomWidth: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the row.
+     */
+    rowClass: {
+      type: String,
+      default: ""
+    }
+  },
+  computed: {
+    integerRows() {
+      return Number(this.rows);
+    }
+  },
+  methods: {
+    randomWidthPercentage() {
+      const min = Math.min(this.minWidth, this.maxWidth);
+      const max = Math.max(this.minWidth, this.maxWidth);
+      return `${Math.round(Math.random() * (max - min)) + min}%`;
+    },
+    getSizeParagraphRow(row) {
+      const paragraphWidth = this.width;
+      const isArrayWidth = Array.isArray(paragraphWidth);
+      const currentWidth = paragraphWidth == null ? void 0 : paragraphWidth[row - 1];
+      const isLastRow = row === this.rows;
+      if (this.randomWidth) {
+        return this.randomWidthPercentage();
+      }
+      if (paragraphWidth && !isArrayWidth) {
+        return paragraphWidth;
+      }
+      if (paragraphWidth && isArrayWidth && currentWidth) {
+        return currentWidth;
+      }
+      return isLastRow ? "38%" : "100%";
+    }
+  }
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_text = vue.resolveComponent("dt-skeleton-text");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "d-skeleton-paragraph",
+      $props.contentClass
+    ]),
+    contentClass: "",
+    "data-qa": "skeleton-paragraph"
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.integerRows, (row) => {
+      return vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, {
+        key: row,
+        "data-qa": "skeleton-paragraph-row",
+        "content-class": $props.rowClass,
+        animate: $props.animate,
+        offset: $props.offset,
+        "animation-duration": $props.animationDuration,
+        width: $options.getSizeParagraphRow(row)
+      }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]);
+    }), 128))
+  ], 2);
+}
+const DtSkeletonParagraph = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
+  name: "DtSkeletonListItem",
+  components: {
+    DtSkeletonShape,
+    DtSkeletonParagraph
+  },
+  props: {
+    /**
+     * Defines the shape of the skeleton, accepts circle or square.
+     * @values circle, square
+     */
+    shape: {
+      type: String,
+      default: "circle",
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
+    },
+    /**
+     * Size of the shape
+     * @values xs, sm, md, lg, xl
+     */
+    shapeSize: {
+      type: String,
+      default: "md"
+    },
+    /**
+     * Object containing quantity of paragraphs to display
+     * and a randomWidth boolean.
+     */
+    paragraphs: {
+      type: Object,
+      default: () => ({ rows: 3, randomWidth: true })
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * Additional class name for the shape.
+     */
+    shapeClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the content.
+     */
+    contentClass: {
+      type: String,
+      default: ""
+    }
+  }
+};
+const _hoisted_1$1 = { class: "d-skeleton-list-item__paragraph-container" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_shape = vue.resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = vue.resolveComponent("dt-skeleton-paragraph");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "skeleton-list-item",
+    class: vue.normalizeClass([
+      "d-skeleton-list-item",
+      {
+        "d-skeleton-list-item--single": $props.paragraphs.rows === 1
+      },
+      $props.contentClass
+    ])
+  }, [
+    vue.createVNode(_component_dt_skeleton_shape, {
+      class: "d-skeleton-list-item__shape",
+      size: $props.shapeSize,
+      shape: $props.shape,
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset,
+      "content-class": $props.shapeClass
+    }, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
+    vue.createElementVNode("div", _hoisted_1$1, [
+      vue.createVNode(_component_dt_skeleton_paragraph, vue.mergeProps($props.paragraphs, {
+        "animation-duration": $props.animationDuration,
+        animate: $props.animate,
+        offset: $props.offset
+      }), null, 16, ["animation-duration", "animate", "offset"])
+    ])
+  ], 2);
+}
+const DtSkeletonListItem = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "DtSkeleton",
+  components: {
+    DtSkeletonText,
+    DtSkeletonShape,
+    DtSkeletonListItem,
+    DtSkeletonParagraph
+  },
+  props: {
+    /**
+     * Set this prop to have the skeleton render as multiple lines of text.
+     * Set only one option prop at a time.
+     */
+    paragraphOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
+     * Set only one option prop at a time.
+     */
+    listItemOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a single line of text.
+     * Set only one option prop at a time.
+     */
+    textOption: {
+      type: Object,
+      default: null
+    },
+    /**
+     * Set this prop to have the skeleton render as a specific shape.
+     * Set only one option prop at a time.
+     */
+    shapeOption: {
+      type: [Object, Boolean],
+      default: null
+    },
+    /**
+     * Duration time of the animation (ms), set -1 for an infinite animation.
+     */
+    animationDuration: {
+      type: Number,
+      default: -1
+    },
+    /**
+     * Descriptive label for the content.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * This property has higher priority than "option.animate"
+     * @values true, false
+     */
+    animate: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * RippleDuration controls how long the delay is for the animation of a
+     * placeholder 1000 pixels from the top of the page. Each placeholder
+     * from the top down will have a delay duration from 0 to this offset.
+     * The delay of each placeholder animation is based on how far down the page
+     * the placeholder is rendered. This is a linear relationship. The unit
+     * is milliseconds.
+     */
+    offset: {
+      type: Number,
+      default: 1
+    }
+  },
+  computed: {
+    validationOptions() {
+      return {
+        paragraphOption: this.paragraphOption,
+        listItemOption: this.listItemOption,
+        textOption: this.textOption,
+        shapeOption: this.shapeOption
+      };
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      handler: "validator"
+    }
+  },
+  methods: {
+    validator() {
+      const filtered = Object.entries(this.validationOptions).filter(([_, option]) => option);
+      if (filtered.length >= 2) {
+        const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(" | ")} options at the same time`;
+        console.error(errorMessage);
+      }
+    }
+  }
+};
+const _hoisted_1 = ["aria-label"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_list_item = vue.resolveComponent("dt-skeleton-list-item");
+  const _component_dt_skeleton_shape = vue.resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = vue.resolveComponent("dt-skeleton-paragraph");
+  const _component_dt_skeleton_text = vue.resolveComponent("dt-skeleton-text");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "aria-busy": "true",
+    role: "status",
+    "aria-label": $props.ariaLabel
+  }, [
+    $props.listItemOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_list_item, vue.mergeProps({ key: 0 }, $props.listItemOption === true ? {} : $props.listItemOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_shape, vue.mergeProps({ key: 1 }, $props.shapeOption === true ? {} : $props.shapeOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (vue.openBlock(), vue.createBlock(_component_dt_skeleton_paragraph, vue.mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : (vue.openBlock(), vue.createBlock(_component_dt_skeleton_text, vue.mergeProps({ key: 3 }, $props.textOption || {}, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"]))
+  ], 8, _hoisted_1);
+}
+const DtSkeleton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtSkeleton = DtSkeleton;
+exports.DtSkeletonListItem = DtSkeletonListItem;
+exports.DtSkeletonParagraph = DtSkeletonParagraph;
+exports.DtSkeletonShape = DtSkeletonShape;
+exports.DtSkeletonText = DtSkeletonText;
+exports.SKELETON_HEADING_HEIGHTS = SKELETON_HEADING_HEIGHTS;
+exports.SKELETON_RIPPLE_DURATION = SKELETON_RIPPLE_DURATION;
+exports.SKELETON_SHAPES = SKELETON_SHAPES;
+exports.SKELETON_SHAPE_SIZES = SKELETON_SHAPE_SIZES;
+exports.SKELETON_TEXT_TYPES = SKELETON_TEXT_TYPES;
 //# sourceMappingURL=skeleton.cjs.map