@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
117 lines (116 loc) • 3.4 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const skeleton_constants = require("./skeleton_constants.cjs");
const skeleton = require("../../common/mixins/skeleton.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtSkeletonText",
mixins: [skeleton.default],
props: {
/**
* Skeleton type
* @values body, heading
*/
type: {
type: String,
default: "body",
validator: (type) => skeleton_constants.SKELETON_TEXT_TYPES.includes(type)
},
/**
* Heading height
* @values sm, md, lg
*/
headingHeight: {
type: String,
default: "md",
validator: (headingHeight) => Object.keys(skeleton_constants.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: skeleton_constants.SKELETON_HEADING_HEIGHTS
};
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return $props.type === "body" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
ref: "skeleton",
"data-qa": "skeleton-text-body",
class: vue.normalizeClass([
"d-skeleton-text",
"d-skeleton-placeholder",
{
"d-skeleton-placeholder--animate": $props.animate
},
$props.contentClass
]),
style: vue.normalizeStyle({
width: $props.width,
..._ctx.skeletonStyle
})
}, null, 6)) : $props.type === "heading" ? (vue.openBlock(), vue.createElementBlock("div", {
key: 1,
ref: "skeleton",
"data-qa": "skeleton-text-heading",
class: vue.normalizeClass([
$data.SKELETON_HEADING_HEIGHTS[$props.headingHeight],
"d-skeleton-text--heading",
"d-skeleton-placeholder",
{
"d-skeleton-placeholder--animate": $props.animate
},
$props.contentClass
]),
style: vue.normalizeStyle({
width: $props.width,
..._ctx.skeletonStyle
})
}, null, 6)) : vue.createCommentVNode("", true);
}
const DtSkeletonText = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtSkeletonText;
//# sourceMappingURL=skeleton-text.vue.cjs.map