@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
110 lines (109 loc) • 2.93 kB
JavaScript
import { SKELETON_TEXT_TYPES, SKELETON_HEADING_HEIGHTS } from "./skeleton_constants.js";
import SkeletonAnimation from "../../common/mixins/skeleton.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtSkeletonText",
mixins: [SkeletonAnimation],
props: {
/**
* Skeleton type
* @values body, heading
*/
type: {
type: String,
default: "body",
validator: (type) => SKELETON_TEXT_TYPES.includes(type)
},
/**
* Heading height
* @values sm, md, lg
*/
headingHeight: {
type: String,
default: "md",
validator: (headingHeight) => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight)
},
/**
* Width of the skeleton
*/
width: {
type: String,
default: "100%"
},
/**
* 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: 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
},
/**
* Additional class name for the content.
*/
contentClass: {
type: String,
default: ""
}
},
data() {
return {
SKELETON_HEADING_HEIGHTS
};
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _vm.type === "body" ? _c("div", { ref: "skeleton", class: [
"d-skeleton-text",
"d-skeleton-placeholder",
{
"d-skeleton-placeholder--animate": _vm.animate
},
_vm.contentClass
], style: {
width: _vm.width,
..._vm.skeletonStyle
}, attrs: { "data-qa": "skeleton-text-body" } }) : _vm.type === "heading" ? _c("div", { ref: "skeleton", class: [
_vm.SKELETON_HEADING_HEIGHTS[_vm.headingHeight],
"d-skeleton-text--heading",
"d-skeleton-placeholder",
{
"d-skeleton-placeholder--animate": _vm.animate
},
_vm.contentClass
], style: {
width: _vm.width,
..._vm.skeletonStyle
}, attrs: { "data-qa": "skeleton-text-heading" } }) : _vm._e();
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtSkeletonText = __component__.exports;
export {
DtSkeletonText as default
};
//# sourceMappingURL=skeleton-text.vue.js.map