@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
94 lines (93 loc) • 2.29 kB
JavaScript
import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "./skeleton-text.js";
import { Fragment as n, createBlock as r, createElementBlock as i, normalizeClass as a, openBlock as o, renderList as s, resolveComponent as c } from "vue";
//#region components/skeleton/skeleton-paragraph.vue
var l = (e) => e !== "" && !Number.isNaN(Number(e)), u = {
compatConfig: { MODE: 3 },
name: "DtSkeletonParagraph",
components: { DtSkeletonText: t },
props: {
rows: {
type: [Number, String],
default: 3,
validator: l
},
animate: {
type: Boolean,
default: !0
},
minWidth: {
type: [Number, String],
default: 30,
validator: l
},
maxWidth: {
type: [Number, String],
default: 100,
validator: l
},
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() {
let e = Math.min(this.minWidth, this.maxWidth), t = Math.max(this.minWidth, this.maxWidth);
return `${Math.round(Math.random() * (t - e)) + e}%`;
},
getSizeParagraphRow(e) {
let t = this.width, n = Array.isArray(t), r = t?.[e - 1], i = e === this.rows;
return this.randomWidth ? this.randomWidthPercentage() : t && !n ? t : t && n && r ? r : i ? "38%" : "100%";
}
}
};
function d(e, t, l, u, d, f) {
let p = c("dt-skeleton-text");
return o(), i("div", {
class: a(["d-skeleton-paragraph", l.contentClass]),
contentClass: "",
"data-qa": "skeleton-paragraph"
}, [(o(!0), i(n, null, s(f.integerRows, (e) => (o(), r(p, {
key: e,
"data-qa": "skeleton-paragraph-row",
"content-class": l.rowClass,
animate: l.animate,
offset: l.offset,
"animation-duration": l.animationDuration,
width: f.getSizeParagraphRow(e)
}, null, 8, [
"content-class",
"animate",
"offset",
"animation-duration",
"width"
]))), 128))], 2);
}
var f = /* @__PURE__ */ e(u, [["render", d]]);
//#endregion
export { f as default };
//# sourceMappingURL=skeleton-paragraph.js.map