@dialpad/dialtone-vue/dist/lib/skeleton/skeleton-paragraph.js

Vue component library for Dialpad's design system Dialtone

import o from "./skeleton-text.js";
import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
const n = (e) => e !== "" && !Number.isNaN(Number(e)), d = {
  name: "DtSkeletonParagraph",
  components: {
    DtSkeletonText: o
  },
  props: {
    /**
     * Quantity of rows to display
     */
    rows: {
      type: [Number, String],
      default: 3,
      validator: n
    },
    /**
     * This property has higher priority than "option.animate"
     * @values true, false
     */
    animate: {
      type: Boolean,
      default: !0
    },
    /**
     * Controls the min width of paragraphs
     */
    minWidth: {
      type: [Number, String],
      default: 30,
      validator: n
    },
    /**
     * Controls the max width of paragraphs
     */
    maxWidth: {
      type: [Number, String],
      default: 100,
      validator: n
    },
    /**
     * 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: !1
    },
    /**
     * 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 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), r = t == null ? void 0 : t[e - 1], i = e === this.rows;
      return this.randomWidth ? this.randomWidthPercentage() : t && !a ? t : t && a && r ? r : i ? "38%" : "100%";
    }
  }
};
var m = function() {
  var t = this, a = t._self._c;
  return a("div", { class: [
    "d-skeleton-paragraph",
    t.contentClass
  ], attrs: { contentClass: "", "data-qa": "skeleton-paragraph" } }, t._l(t.integerRows, function(r) {
    return a("dt-skeleton-text", { key: r, attrs: { "data-qa": "skeleton-paragraph-row", "content-class": t.rowClass, animate: t.animate, offset: t.offset, "animation-duration": t.animationDuration, width: t.getSizeParagraphRow(r) } });
  }), 1);
}, u = [], h = /* @__PURE__ */ s(
  d,
  m,
  u
);
const f = h.exports;
export {
  f as default
};
//# sourceMappingURL=skeleton-paragraph.js.map