@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
101 lines (100 loc) • 3.37 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const skeleton_constants = require("./skeleton_constants.cjs");
const skeletonShape = require("./skeleton-shape.vue.cjs");
const skeletonParagraph = require("./skeleton-paragraph.vue.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const _sfc_main = {
name: "DtSkeletonListItem",
components: {
DtSkeletonShape: skeletonShape.default,
DtSkeletonParagraph: skeletonParagraph.default
},
props: {
/**
* Defines the shape of the skeleton, accepts circle or square.
* @values circle, square
*/
shape: {
type: String,
default: "circle",
validator: (shape) => Object.keys(skeleton_constants.SKELETON_SHAPES).includes(shape)
},
/**
* 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: true })
},
/**
* 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: true
},
/**
* 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: ""
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { class: [
"d-skeleton-list-item",
{
"d-skeleton-list-item--single": _vm.paragraphs.rows === 1
},
_vm.contentClass
], attrs: { "data-qa": "skeleton-list-item" } }, [_c("dt-skeleton-shape", { staticClass: "d-skeleton-list-item__shape", attrs: { "size": _vm.shapeSize, "shape": _vm.shape, "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset, "content-class": _vm.shapeClass } }), _c("div", { staticClass: "d-skeleton-list-item__paragraph-container" }, [_c("dt-skeleton-paragraph", _vm._b({ attrs: { "animation-duration": _vm.animationDuration, "animate": _vm.animate, "offset": _vm.offset } }, "dt-skeleton-paragraph", _vm.paragraphs, false))], 1)], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtSkeletonListItem = __component__.exports;
exports.default = DtSkeletonListItem;
//# sourceMappingURL=skeleton-list-item.vue.cjs.map