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

Dialpad's Dialtone design system monorepo

import u from "./skeleton-text.js";
import { resolveComponent as c, createElementBlock as m, openBlock as r, normalizeClass as h, Fragment as f, renderList as p, createBlock as g } from "vue";
import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const o = (e) => e !== "" && !Number.isNaN(Number(e)), w = {
  compatConfig: { MODE: 3 },
  name: "DtSkeletonParagraph",
  components: {
    DtSkeletonText: u
  },
  props: {
    /**
     * Quantity of rows to display
     */
    rows: {
      type: [Number, String],
      default: 3,
      validator: o
    },
    /**
     * 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: o
    },
    /**
     * Controls the max width of paragraphs
     */
    maxWidth: {
      type: [Number, String],
      default: 100,
      validator: o
    },
    /**
     * 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), n = t == null ? void 0 : t[e - 1], i = e === this.rows;
      return this.randomWidth ? this.randomWidthPercentage() : t && !a ? t : t && a && n ? n : i ? "38%" : "100%";
    }
  }
};
function _(e, t, a, n, i, s) {
  const l = c("dt-skeleton-text");
  return r(), m("div", {
    class: h([
      "d-skeleton-paragraph",
      a.contentClass
    ]),
    contentClass: "",
    "data-qa": "skeleton-paragraph"
  }, [
    (r(!0), m(f, null, p(s.integerRows, (d) => (r(), g(l, {
      key: d,
      "data-qa": "skeleton-paragraph-row",
      "content-class": a.rowClass,
      animate: a.animate,
      offset: a.offset,
      "animation-duration": a.animationDuration,
      width: s.getSizeParagraphRow(d)
    }, null, 8, ["content-class", "animate", "offset", "animation-duration", "width"]))), 128))
  ], 2);
}
const W = /* @__PURE__ */ y(w, [["render", _]]);
export {
  W as default
};
//# sourceMappingURL=skeleton-paragraph.js.map