@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
150 lines (149 loc) • 4.34 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const skeletonText = require("./skeleton-text.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const validator = (number) => number !== "" && !Number.isNaN(Number(number));
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtSkeletonParagraph",
components: {
DtSkeletonText: skeletonText.default
},
props: {
/**
* Quantity of rows to display
*/
rows: {
type: [Number, String],
default: 3,
validator
},
/**
* This property has higher priority than "option.animate"
* @values true, false
*/
animate: {
type: Boolean,
default: true
},
/**
* Controls the min width of paragraphs
*/
minWidth: {
type: [Number, String],
default: 30,
validator
},
/**
* Controls the max width of paragraphs
*/
maxWidth: {
type: [Number, String],
default: 100,
validator
},
/**
* 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: false
},
/**
* 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 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 _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_skeleton_text = vue.resolveComponent("dt-skeleton-text");
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass([
"d-skeleton-paragraph",
$props.contentClass
]),
contentClass: "",
"data-qa": "skeleton-paragraph"
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.integerRows, (row) => {
return vue.openBlock(), vue.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 DtSkeletonParagraph = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtSkeletonParagraph;
//# sourceMappingURL=skeleton-paragraph.vue.cjs.map