@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/skeleton.js

@@ -1,39 +1,50 @@
-import { openBlock as n, createElementBlock as r, normalizeClass as h, normalizeStyle as _, createCommentVNode as E, resolveComponent as l, Fragment as w, renderList as C, createBlock as u, createVNode as k, createElementVNode as v, mergeProps as c } from "vue";
-import { _ as f } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-const T = 3e6, y = {
+import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode, resolveComponent, Fragment, renderList, createBlock, createVNode, createElementVNode, mergeProps } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+const SKELETON_RIPPLE_DURATION = 3e6;
+const SKELETON_SHAPES = {
   circle: "d-bar-circle",
   square: "d-bar2"
-}, I = [
+};
+const SKELETON_TEXT_TYPES = [
   "body",
   "heading"
-], L = {
+];
+const SKELETON_SHAPE_SIZES = {
   sm: "24px",
   md: "32px",
   lg: "48px"
-}, g = {
+};
+const SKELETON_HEADING_HEIGHTS = {
   sm: "d-h16",
   md: "d-h24",
   lg: "d-h32"
-}, S = {
+};
+const SkeletonAnimation = {
   computed: {
     skeletonOffset() {
-      const e = this.$refs.skeleton;
-      if (!e)
+      const skeletonText = this.$refs.skeleton;
+      if (!skeletonText) {
         return this.offset;
-      const { top: a, height: t } = e.getBoundingClientRect();
-      return a + t / 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 a = this.skeletonOffset * T / 1e3, t = this.animationDuration === -1 ? 1e3 : this.animationDuration;
-      return e.animationDelay = `${a}ms`, e.animationDuration = `${t}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;
     }
   }
-}, B = {
+};
+const _sfc_main$4 = {
   name: "DtSkeletonShape",
-  mixins: [S],
+  mixins: [SkeletonAnimation],
   props: {
     /**
      * Defines the shape of the skeleton, accepts circle or square.
@@ -42,7 +53,7 @@ const T = 3e6, y = {
     shape: {
       type: String,
       default: "circle",
-      validator: (e) => Object.keys(y).includes(e)
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
     },
     /**
      * Size of the shape
@@ -65,7 +76,7 @@ const T = 3e6, y = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -89,40 +100,41 @@ const T = 3e6, y = {
   },
   data() {
     return {
-      SKELETON_SHAPES: y
+      SKELETON_SHAPES
     };
   },
   computed: {
     shapeStyles() {
-      const e = L[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
       };
     }
   }
 };
-function P(e, a, t, o, i, s) {
-  return n(), r("div", {
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
     ref: "skeleton",
     "data-qa": "skeleton-shape",
-    class: h([
+    class: normalizeClass([
       "skeleton-placeholder",
-      i.SKELETON_SHAPES[t.shape],
+      $data.SKELETON_SHAPES[$props.shape],
       {
-        "skeleton-placeholder--animate": t.animate
+        "skeleton-placeholder--animate": $props.animate
       },
-      t.contentClass
+      $props.contentClass
     ]),
-    style: _(s.shapeStyles)
+    style: normalizeStyle($options.shapeStyles)
   }, null, 6);
 }
-const O = /* @__PURE__ */ f(B, [["render", P]]), z = {
+const DtSkeletonShape = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
+const _sfc_main$3 = {
   name: "DtSkeletonText",
-  mixins: [S],
+  mixins: [SkeletonAnimation],
   props: {
     /**
      * Skeleton type
@@ -131,7 +143,7 @@ const O = /* @__PURE__ */ f(B, [["render", P]]), z = {
     type: {
       type: String,
       default: "body",
-      validator: (e) => I.includes(e)
+      validator: (type) => SKELETON_TEXT_TYPES.includes(type)
     },
     /**
      * Heading height
@@ -140,7 +152,7 @@ const O = /* @__PURE__ */ f(B, [["render", P]]), z = {
     headingHeight: {
       type: String,
       default: "md",
-      validator: (e) => Object.keys(g).includes(e)
+      validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
     },
     /**
      * Width of the skeleton
@@ -162,7 +174,7 @@ const O = /* @__PURE__ */ f(B, [["render", P]]), z = {
      */
     animate: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -186,50 +198,52 @@ const O = /* @__PURE__ */ f(B, [["render", P]]), z = {
   },
   data() {
     return {
-      SKELETON_HEADING_HEIGHTS: g
+      SKELETON_HEADING_HEIGHTS
     };
   }
 };
-function A(e, a, t, o, i, s) {
-  return t.type === "body" ? (n(), r("div", {
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return $props.type === "body" ? (openBlock(), createElementBlock("div", {
     key: 0,
     ref: "skeleton",
     "data-qa": "skeleton-text-body",
-    class: h([
+    class: normalizeClass([
       "d-skeleton-text",
       "skeleton-placeholder",
       {
-        "skeleton-placeholder--animate": t.animate
+        "skeleton-placeholder--animate": $props.animate
       },
-      t.contentClass
+      $props.contentClass
     ]),
-    style: _({
-      width: t.width,
-      ...e.skeletonStyle
+    style: normalizeStyle({
+      width: $props.width,
+      ..._ctx.skeletonStyle
     })
-  }, null, 6)) : t.type === "heading" ? (n(), r("div", {
+  }, null, 6)) : $props.type === "heading" ? (openBlock(), createElementBlock("div", {
     key: 1,
     ref: "skeleton",
     "data-qa": "skeleton-text-heading",
-    class: h([
-      i.SKELETON_HEADING_HEIGHTS[t.headingHeight],
+    class: normalizeClass([
+      $data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
       "d-skeleton-text--heading",
       "skeleton-placeholder",
       {
-        "skeleton-placeholder--animate": t.animate
+        "skeleton-placeholder--animate": $props.animate
       },
-      t.contentClass
+      $props.contentClass
     ]),
-    style: _({
-      width: t.width,
-      ...e.skeletonStyle
+    style: normalizeStyle({
+      width: $props.width,
+      ..._ctx.skeletonStyle
     })
-  }, null, 6)) : E("", !0);
+  }, null, 6)) : createCommentVNode("", true);
 }
-const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.isNaN(Number(e)), W = {
+const DtSkeletonText = /* @__PURE__ */ _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: b
+    DtSkeletonText
   },
   props: {
     /**
@@ -238,7 +252,7 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
     rows: {
       type: [Number, String],
       default: 3,
-      validator: p
+      validator
     },
     /**
      * This property has higher priority than "option.animate"
@@ -246,7 +260,7 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * Controls the min width of paragraphs
@@ -254,7 +268,7 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
     minWidth: {
       type: [Number, String],
       default: 30,
-      validator: p
+      validator
     },
     /**
      * Controls the max width of paragraphs
@@ -262,7 +276,7 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
     maxWidth: {
       type: [Number, String],
       default: 100,
-      validator: p
+      validator
     },
     /**
      * Controls the width of paragraphs
@@ -277,7 +291,7 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
      */
     randomWidth: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -320,41 +334,57 @@ const b = /* @__PURE__ */ f(z, [["render", A]]), p = (e) => e !== "" && !Number.
   },
   methods: {
     randomWidthPercentage() {
-      const e = Math.min(this.minWidth, this.maxWidth), a = Math.max(this.minWidth, this.maxWidth);
-      return `${Math.round(Math.random() * (a - e)) + e}%`;
-    },
-    getSizeParagraphRow(e) {
-      const a = this.width, t = Array.isArray(a), o = a == null ? void 0 : a[e - 1], i = e === this.rows;
-      return this.randomWidth ? this.randomWidthPercentage() : a && !t ? a : a && t && o ? o : i ? "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%";
     }
   }
 };
-function j(e, a, t, o, i, s) {
-  const m = l("dt-skeleton-text");
-  return n(), r("div", {
-    class: h([
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
       "d-skeleton-paragraph",
-      t.contentClass
+      $props.contentClass
     ]),
     contentClass: "",
     "data-qa": "skeleton-paragraph"
   }, [
-    (n(!0), r(w, null, C(s.integerRows, (d) => (n(), u(m, {
-      key: d,
-      "data-qa": "skeleton-paragraph-row",
-      "content-class": t.rowClass,
-      animate: t.animate,
-      offset: t.offset,
-      "animation-duration": t.animationDuration,
-      width: s.getSizeParagraphRow(d)
-    }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]))), 128))
+    (openBlock(true), createElementBlock(Fragment, null, renderList($options.integerRows, (row) => {
+      return openBlock(), 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 x = /* @__PURE__ */ f(W, [["render", j]]), H = {
+const DtSkeletonParagraph = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
+const _sfc_main$1 = {
   name: "DtSkeletonListItem",
   components: {
-    DtSkeletonShape: O,
-    DtSkeletonParagraph: x
+    DtSkeletonShape,
+    DtSkeletonParagraph
   },
   props: {
     /**
@@ -364,7 +394,7 @@ const x = /* @__PURE__ */ f(W, [["render", j]]), H = {
     shape: {
       type: String,
       default: "circle",
-      validator: (e) => Object.keys(y).includes(e)
+      validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
     },
     /**
      * Size of the shape
@@ -380,7 +410,7 @@ const x = /* @__PURE__ */ f(W, [["render", j]]), H = {
      */
     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.
@@ -395,7 +425,7 @@ const x = /* @__PURE__ */ f(W, [["render", j]]), H = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -424,44 +454,47 @@ const x = /* @__PURE__ */ f(W, [["render", j]]), H = {
       default: ""
     }
   }
-}, R = { class: "d-skeleton-list-item__paragraph-container" };
-function q(e, a, t, o, i, s) {
-  const m = l("dt-skeleton-shape"), d = l("dt-skeleton-paragraph");
-  return n(), r("div", {
+};
+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 = resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
+  return openBlock(), createElementBlock("div", {
     "data-qa": "skeleton-list-item",
-    class: h([
+    class: normalizeClass([
       "d-skeleton-list-item",
       {
-        "d-skeleton-list-item--single": t.paragraphs.rows === 1
+        "d-skeleton-list-item--single": $props.paragraphs.rows === 1
       },
-      t.contentClass
+      $props.contentClass
     ])
   }, [
-    k(m, {
+    createVNode(_component_dt_skeleton_shape, {
       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
+      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"]),
-    v("div", R, [
-      k(d, c(t.paragraphs, {
-        "animation-duration": t.animationDuration,
-        animate: t.animate,
-        offset: t.offset
+    createElementVNode("div", _hoisted_1$1, [
+      createVNode(_component_dt_skeleton_paragraph, mergeProps($props.paragraphs, {
+        "animation-duration": $props.animationDuration,
+        animate: $props.animate,
+        offset: $props.offset
       }), null, 16, ["animation-duration", "animate", "offset"])
     ])
   ], 2);
 }
-const K = /* @__PURE__ */ f(H, [["render", q]]), M = {
+const DtSkeletonListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
   name: "DtSkeleton",
   components: {
-    DtSkeletonText: b,
-    DtSkeletonShape: O,
-    DtSkeletonListItem: K,
-    DtSkeletonParagraph: x
+    DtSkeletonText,
+    DtSkeletonShape,
+    DtSkeletonListItem,
+    DtSkeletonParagraph
   },
   props: {
     /**
@@ -516,7 +549,7 @@ const K = /* @__PURE__ */ f(H, [["render", q]]), M = {
      */
     animate: {
       type: Boolean,
-      default: !0
+      default: true
     },
     /**
      * RippleDuration controls how long the delay is for the animation of a
@@ -543,57 +576,61 @@ const K = /* @__PURE__ */ f(H, [["render", q]]), M = {
   },
   watch: {
     $props: {
-      immediate: !0,
+      immediate: true,
       handler: "validator"
     }
   },
   methods: {
     validator() {
-      const e = Object.entries(this.validationOptions).filter(([a, t]) => t);
-      if (e.length >= 2) {
-        const a = `Use only one of ${e.map(([t]) => t).join(" | ")} options at the same time`;
-        console.error(a);
+      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);
       }
     }
   }
-}, G = ["aria-label"];
-function V(e, a, t, o, i, s) {
-  const m = l("dt-skeleton-list-item"), d = l("dt-skeleton-shape"), D = l("dt-skeleton-paragraph"), N = l("dt-skeleton-text");
-  return n(), r("div", {
+};
+const _hoisted_1 = ["aria-label"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_skeleton_list_item = resolveComponent("dt-skeleton-list-item");
+  const _component_dt_skeleton_shape = resolveComponent("dt-skeleton-shape");
+  const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
+  const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
+  return openBlock(), createElementBlock("div", {
     "aria-busy": "true",
     role: "status",
-    "aria-label": t.ariaLabel
+    "aria-label": $props.ariaLabel
   }, [
-    t.listItemOption ? (n(), u(m, c({ 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 ? (n(), u(d, c({ 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 ? (n(), u(D, c({ key: 2 }, t.paragraphOption === !0 ? {} : t.paragraphOption, {
-      "animation-duration": t.animationDuration,
-      animate: t.animate,
-      offset: t.offset
-    }), null, 16, ["animation-duration", "animate", "offset"])) : (n(), u(N, c({ key: 3 }, t.textOption || {}, {
-      "animation-duration": t.animationDuration,
-      animate: t.animate,
-      offset: t.offset
+    $props.listItemOption ? (openBlock(), createBlock(_component_dt_skeleton_list_item, 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 ? (openBlock(), createBlock(_component_dt_skeleton_shape, 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 ? (openBlock(), createBlock(_component_dt_skeleton_paragraph, mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
+    }), null, 16, ["animation-duration", "animate", "offset"])) : (openBlock(), createBlock(_component_dt_skeleton_text, mergeProps({ key: 3 }, $props.textOption || {}, {
+      "animation-duration": $props.animationDuration,
+      animate: $props.animate,
+      offset: $props.offset
     }), null, 16, ["animation-duration", "animate", "offset"]))
-  ], 8, G);
+  ], 8, _hoisted_1);
 }
-const X = /* @__PURE__ */ f(M, [["render", V]]);
+const DtSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  X as DtSkeleton,
-  K as DtSkeletonListItem,
-  x as DtSkeletonParagraph,
-  O as DtSkeletonShape,
-  b as DtSkeletonText,
-  g as SKELETON_HEADING_HEIGHTS,
-  T as SKELETON_RIPPLE_DURATION,
-  y as SKELETON_SHAPES,
-  L as SKELETON_SHAPE_SIZES,
-  I 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