@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
117 lines (116 loc) • 3.25 kB
JavaScript
import { SKELETON_SHAPES as i } from "./skeleton-constants.js";
import l from "./skeleton-shape.js";
import r from "./skeleton-paragraph.js";
import { resolveComponent as a, createElementBlock as m, openBlock as c, normalizeClass as d, createVNode as n, createElementVNode as f, mergeProps as p } from "vue";
import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
const _ = {
compatConfig: { MODE: 3 },
name: "DtSkeletonListItem",
components: {
DtSkeletonShape: l,
DtSkeletonParagraph: r
},
props: {
/**
* Defines the shape of the skeleton, accepts circle or square.
* @values circle, square
*/
shape: {
type: String,
default: "circle",
validator: (t) => Object.keys(i).includes(t)
},
/**
* Size of the shape
* @values xs, sm, md, lg, xl
*/
shapeSize: {
type: String,
default: "md"
},
/**
* Object containing quantity of paragraphs to display
* and a randomWidth boolean.
*/
paragraphs: {
type: Object,
default: () => ({ rows: 3, randomWidth: !0 })
},
/**
* Duration time of the animation (ms), set -1 for an infinite animation.
*/
animationDuration: {
type: Number,
default: -1
},
/**
* This property has higher priority than "option.animate"
* @values true, false
*/
animate: {
type: Boolean,
default: !0
},
/**
* 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
},
/**
* Additional class name for the shape.
*/
shapeClass: {
type: String,
default: ""
},
/**
* Additional class name for the content.
*/
contentClass: {
type: String,
default: ""
}
}
}, h = { class: "d-skeleton-list-item__paragraph-container" };
function k(t, g, e, S, y, D) {
const o = a("dt-skeleton-shape"), s = a("dt-skeleton-paragraph");
return c(), m("div", {
"data-qa": "skeleton-list-item",
class: d([
"d-skeleton-list-item",
{
"d-skeleton-list-item--single": e.paragraphs.rows === 1
},
e.contentClass
])
}, [
n(o, {
class: "d-skeleton-list-item__shape",
size: e.shapeSize,
shape: e.shape,
"animation-duration": e.animationDuration,
animate: e.animate,
offset: e.offset,
"content-class": e.shapeClass
}, null, 8, ["size", "shape", "animation-duration", "animate", "offset", "content-class"]),
f("div", h, [
n(s, p(e.paragraphs, {
"animation-duration": e.animationDuration,
animate: e.animate,
offset: e.offset
}), null, 16, ["animation-duration", "animate", "offset"])
])
], 2);
}
const v = /* @__PURE__ */ u(_, [["render", k]]);
export {
v as default
};
//# sourceMappingURL=skeleton-list-item.js.map