@dialpad/dialtone-vue 2.126.0 → 2.127.1

package/dist/lib/skeleton.js

@@ -1,38 +1,49 @@
-import { n as s } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
-const f = 3e6, o = {
+import { normalizeComponent } from "../chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
+const SKELETON_RIPPLE_DURATION = 3e6;
+const SKELETON_SHAPES = {
   circle: "d-bar-circle",
   square: "d-bar2"
-}, c = [
+};
+const SKELETON_TEXT_TYPES = [
   "body",
   "heading"
-], h = {
+];
+const SKELETON_SHAPE_SIZES = {
   sm: "24px",
   md: "32px",
   lg: "48px"
-}, r = {
+};
+const SKELETON_HEADING_HEIGHTS = {
   sm: "d-h16",
   md: "d-h24",
   lg: "d-h32"
-}, l = {
+};
+const SkeletonAnimation = {
   computed: {
     skeletonOffset() {
-      const e = this.$refs.skeleton;
-      if (!e)
+      const skeletonText = this.$refs.skeleton;
+      if (!skeletonText) {
         return this.offset;
-      const { top: t, height: a } = e.getBoundingClientRect();
-      return t + a / 2;
+      }
+      const { top, height } = skeletonText.getBoundingClientRect();
+      return top + height / 2;
     },
     skeletonStyle() {
-      const e = {};
-      if (this.skeletonOffset === -1 || !this.animate && this.animationDuration === -1)
-        return e;
-      const t = this.skeletonOffset * f / 1e3, a = this.animationDuration === -1 ? 1e3 : this.animationDuration;
-      return e.animationDelay = `${t}ms`, e.animationDuration = `${a}ms`, e;
+      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: [l],
+  mixins: [SkeletonAnimation],
   props: {
     /**
      * Defines the shape of the skeleton, accepts circle or square.
@@ -41,7 +52,7 @@ const f = 3e6, o = {
     shape: {
       type: String,
       default: "circle",
-      validator: (e) => Object.keys(o).includes(e)
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
     },
     /**
      * Size of the shape
@@ -64,7 +75,7 @@ const f = 3e6, o = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -88,45 +99,48 @@ const f = 3e6, o = {
   },
   data() {
     return {
-      SKELETON_SHAPES: o
+      SKELETON_SHAPES
     };
   },
   computed: {
     shapeStyles() {
-      const e = h[this.size] || this.size;
+      const size = SKELETON_SHAPE_SIZES[this.size] || this.size;
       return {
         ...this.skeletonStyle,
-        "min-width": e,
-        "max-width": e,
-        "min-height": e,
-        "max-height": e
+        "min-width": size,
+        "max-width": size,
+        "min-height": size,
+        "max-height": size
       };
     }
   }
 };
-var y = function() {
-  var t = this, a = t._self._c;
-  return a("div", { ref: "skeleton", class: [
+var _sfc_render$4 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { ref: "skeleton", class: [
     "skeleton-placeholder",
-    t.SKELETON_SHAPES[t.shape],
+    _vm.SKELETON_SHAPES[_vm.shape],
     {
-      "skeleton-placeholder--animate": t.animate
-    },
-    t.contentClass
-  ], style: t.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
-}, g = [], k = /* @__PURE__ */ s(
-  _,
-  y,
-  g,
-  !1,
+      "skeleton-placeholder--animate": _vm.animate
+    },
+    _vm.contentClass
+  ], style: _vm.shapeStyles, attrs: { "data-qa": "skeleton-shape" } });
+};
+var _sfc_staticRenderFns$4 = [];
+var __component__$4 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$4,
+  _sfc_render$4,
+  _sfc_staticRenderFns$4,
+  false,
   null,
   null,
   null,
   null
 );
-const d = k.exports, S = {
+const DtSkeletonShape = __component__$4.exports;
+const _sfc_main$3 = {
   name: "DtSkeletonText",
-  mixins: [l],
+  mixins: [SkeletonAnimation],
   props: {
     /**
      * Skeleton type
@@ -135,7 +149,7 @@ const d = k.exports, S = {
     type: {
       type: String,
       default: "body",
-      validator: (e) => c.includes(e)
+      validator: (type) => SKELETON_TEXT_TYPES.includes(type)
     },
     /**
      * Heading height
@@ -144,7 +158,7 @@ const d = k.exports, S = {
     headingHeight: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(r).includes(e)
+      validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
     },
     /**
      * Width of the skeleton
@@ -166,7 +180,7 @@ const d = k.exports, S = {
      */
     animate: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -190,48 +204,52 @@ const d = k.exports, S = {
   },
   data() {
     return {
-      SKELETON_HEADING_HEIGHTS: r
+      SKELETON_HEADING_HEIGHTS
     };
   }
 };
-var O = function() {
-  var t = this, a = t._self._c;
-  return t.type === "body" ? a("div", { ref: "skeleton", class: [
+var _sfc_render$3 = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  return _vm.type === "body" ? _c("div", { ref: "skeleton", class: [
     "d-skeleton-text",
     "skeleton-placeholder",
     {
-      "skeleton-placeholder--animate": t.animate
+      "skeleton-placeholder--animate": _vm.animate
     },
-    t.contentClass
+    _vm.contentClass
   ], style: {
-    width: t.width,
-    ...t.skeletonStyle
-  }, attrs: { "data-qa": "skeleton-text-body" } }) : t.type === "heading" ? a("div", { ref: "skeleton", class: [
-    t.SKELETON_HEADING_HEIGHTS[t.headingHeight],
+    width: _vm.width,
+    ..._vm.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-body" } }) : _vm.type === "heading" ? _c("div", { ref: "skeleton", class: [
+    _vm.SKELETON_HEADING_HEIGHTS[_vm.headingHeight],
     "d-skeleton-text--heading",
     "skeleton-placeholder",
     {
-      "skeleton-placeholder--animate": t.animate
+      "skeleton-placeholder--animate": _vm.animate
     },
-    t.contentClass
+    _vm.contentClass
   ], style: {
-    width: t.width,
-    ...t.skeletonStyle
-  }, attrs: { "data-qa": "skeleton-text-heading" } }) : t._e();
-}, v = [], b = /* @__PURE__ */ s(
-  S,
-  O,
-  v,
-  !1,
+    width: _vm.width,
+    ..._vm.skeletonStyle
+  }, attrs: { "data-qa": "skeleton-text-heading" } }) : _vm._e();
+};
+var _sfc_staticRenderFns$3 = [];
+var __component__$3 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$3,
+  _sfc_render$3,
+  _sfc_staticRenderFns$3,
+  false,
   null,
   null,
   null,
   null
 );
-const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
+const DtSkeletonText = __component__$3.exports;
+const validator = (number) => number !== "" && !Number.isNaN(Number(number));
+const _sfc_main$2 = {
   name: "DtSkeletonParagraph",
   components: {
-    DtSkeletonText: p
+    DtSkeletonText
   },
   props: {
     /**
@@ -240,7 +258,7 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
     rows: {
       type: [Number, String],
       default: 3,
-      validator: i
+      validator
     },
     /**
      * This property has higher priority than "option.animate"
@@ -248,7 +266,7 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Controls the min width of paragraphs
@@ -256,7 +274,7 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
     minWidth: {
       type: [Number, String],
       default: 30,
-      validator: i
+      validator
     },
     /**
      * Controls the max width of paragraphs
@@ -264,7 +282,7 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
     maxWidth: {
       type: [Number, String],
       default: 100,
-      validator: i
+      validator
     },
     /**
      * Controls the width of paragraphs
@@ -279,7 +297,7 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
      */
     randomWidth: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -322,38 +340,54 @@ const p = b.exports, i = (e) => e !== "" && !Number.isNaN(Number(e)), x = {
   },
   methods: {
     randomWidthPercentage() {
-      const e = Math.min(this.minWidth, this.maxWidth), t = Math.max(this.minWidth, this.maxWidth);
-      return `${Math.round(Math.random() * (t - e)) + e}%`;
-    },
-    getSizeParagraphRow(e) {
-      const t = this.width, a = Array.isArray(t), n = t == null ? void 0 : t[e - 1], m = e === this.rows;
-      return this.randomWidth ? this.randomWidthPercentage() : t && !a ? t : t && a && n ? n : m ? "38%" : "100%";
+      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%";
     }
   }
 };
-var D = function() {
-  var t = this, a = t._self._c;
-  return a("div", { class: [
+var _sfc_render$2 = function render3() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
     "d-skeleton-paragraph",
-    t.contentClass
-  ], attrs: { contentClass: "", "data-qa": "skeleton-paragraph" } }, t._l(t.integerRows, function(n) {
-    return a("dt-skeleton-text", { key: n, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": t.rowClass, animate: t.animate, offset: t.offset, "animation-duration": t.animationDuration, width: t.getSizeParagraphRow(n) } });
+    _vm.contentClass
+  ], attrs: { "contentClass": "", "data-qa": "skeleton-paragraph" } }, _vm._l(_vm.integerRows, function(row) {
+    return _c("dt-skeleton-text", { key: row, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": _vm.rowClass, "animate": _vm.animate, "offset": _vm.offset, "animation-duration": _vm.animationDuration, "width": _vm.getSizeParagraphRow(row) } });
   }), 1);
-}, N = [], E = /* @__PURE__ */ s(
-  x,
-  D,
-  N,
-  !1,
+};
+var _sfc_staticRenderFns$2 = [];
+var __component__$2 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$2,
+  _sfc_render$2,
+  _sfc_staticRenderFns$2,
+  false,
   null,
   null,
   null,
   null
 );
-const u = E.exports, w = {
+const DtSkeletonParagraph = __component__$2.exports;
+const _sfc_main$1 = {
   name: "DtSkeletonListItem",
   components: {
-    DtSkeletonShape: d,
-    DtSkeletonParagraph: u
+    DtSkeletonShape,
+    DtSkeletonParagraph
   },
   props: {
     /**
@@ -363,7 +397,7 @@ const u = E.exports, w = {
     shape: {
       type: String,
       default: "circle",
-      validator: (e) => Object.keys(o).includes(e)
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
     },
     /**
      * Size of the shape
@@ -379,7 +413,7 @@ const u = E.exports, w = {
      */
     paragraphs: {
       type: Object,
-      default: () => ({ rows: 3, randomWidth: !0 })
+      default: () => ({ rows: 3, randomWidth: true })
     },
     /**
      * Duration time of the animation (ms), set -1 for an infinite animation.
@@ -394,7 +428,7 @@ const u = E.exports, w = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -424,32 +458,35 @@ const u = E.exports, w = {
     }
   }
 };
-var $ = function() {
-  var t = this, a = t._self._c;
-  return a("div", { class: [
+var _sfc_render$1 = function render4() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { class: [
     "d-skeleton-list-item",
     {
-      "d-skeleton-list-item--single": t.paragraphs.rows === 1
-    },
-    t.contentClass
-  ], attrs: { "data-qa": "skeleton-list-item" } }, [a("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { size: t.shapeSize, shape: t.shape, "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset, "content-class": t.shapeClass } }), a("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [a("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphs, !1))], 1)], 1);
-}, C = [], T = /* @__PURE__ */ s(
-  w,
-  $,
-  C,
-  !1,
+      "d-skeleton-list-item--single": _vm.paragraphs.rows === 1
+    },
+    _vm.contentClass
+  ], attrs: { "data-qa": "skeleton-list-item" } }, [_c("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { "size": _vm.shapeSize, "shape": _vm.shape, "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset, "content-class": _vm.shapeClass } }), _c("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [_c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1,
+  false,
   null,
   null,
   null,
   null
 );
-const I = T.exports, L = {
+const DtSkeletonListItem = __component__$1.exports;
+const _sfc_main = {
   name: "DtSkeleton",
   components: {
-    DtSkeletonText: p,
-    DtSkeletonShape: d,
-    DtSkeletonListItem: I,
-    DtSkeletonParagraph: u
+    DtSkeletonText,
+    DtSkeletonShape,
+    DtSkeletonListItem,
+    DtSkeletonParagraph
   },
   props: {
     /**
@@ -504,7 +541,7 @@ const I = T.exports, L = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -531,44 +568,46 @@ const I = T.exports, L = {
   },
   watch: {
     $props: {
-      immediate: !0,
+      immediate: true,
       handler: "validator"
     }
   },
   methods: {
     validator() {
-      const e = Object.entries(this.validationOptions).filter(([t, a]) => a);
-      if (e.length >= 2) {
-        const t = `Use only one of ${e.map(([a]) => a).join(" | ")} options at the same time`;
-        console.error(t);
+      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);
       }
     }
   }
 };
-var R = function() {
-  var t = this, a = t._self._c;
-  return a("div", { attrs: { "aria-busy": "true", role: "status", "aria-label": t.ariaLabel } }, [t.listItemOption ? a("dt-skeleton-list-item", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-list-item", t.listItemOption === !0 ? {} : t.listItemOption, !1)) : t.shapeOption ? a("dt-skeleton-shape", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-shape", t.shapeOption === !0 ? {} : t.shapeOption, !1)) : t.paragraphOption ? a("dt-skeleton-paragraph", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-paragraph", t.paragraphOption === !0 ? {} : t.paragraphOption, !1)) : a("dt-skeleton-text", t._b({ attrs: { "animation-duration": t.animationDuration, animate: t.animate, offset: t.offset } }, "dt-skeleton-text", t.textOption || {}, !1))], 1);
-}, A = [], P = /* @__PURE__ */ s(
-  L,
-  R,
-  A,
-  !1,
+var _sfc_render = function render5() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("div", { attrs: { "aria-busy": "true", "role": "status", "aria-label": _vm.ariaLabel } }, [_vm.listItemOption ? _c("dt-skeleton-list-item", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-list-item", _vm.listItemOption === true ? {} : _vm.listItemOption, false)) : _vm.shapeOption ? _c("dt-skeleton-shape", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-shape", _vm.shapeOption === true ? {} : _vm.shapeOption, false)) : _vm.paragraphOption ? _c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphOption === true ? {} : _vm.paragraphOption, false)) : _c("dt-skeleton-text", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-text", _vm.textOption || {}, false))], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
   null,
   null,
   null,
   null
 );
-const j = P.exports;
+const DtSkeleton = __component__.exports;
 export {
-  j as DtSkeleton,
-  I as DtSkeletonListItem,
-  u as DtSkeletonParagraph,
-  d as DtSkeletonShape,
-  p as DtSkeletonText,
-  r as SKELETON_HEADING_HEIGHTS,
-  f as SKELETON_RIPPLE_DURATION,
-  o as SKELETON_SHAPES,
-  h as SKELETON_SHAPE_SIZES,
-  c as SKELETON_TEXT_TYPES
+  DtSkeleton,
+  DtSkeletonListItem,
+  DtSkeletonParagraph,
+  DtSkeletonShape,
+  DtSkeletonText,
+  SKELETON_HEADING_HEIGHTS,
+  SKELETON_RIPPLE_DURATION,
+  SKELETON_SHAPES,
+  SKELETON_SHAPE_SIZES,
+  SKELETON_TEXT_TYPES
 };
 //# sourceMappingURL=skeleton.js.map