@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
100 lines (99 loc) • 2.73 kB
JavaScript
import SkeletonAnimation from "../../common/mixins/skeleton.js";
import { SKELETON_SHAPES, SKELETON_SHAPE_SIZES } from "./skeleton_constants.js";
import { openBlock, createElementBlock, normalizeClass, normalizeStyle } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtSkeletonShape",
mixins: [SkeletonAnimation],
props: {
/**
* Defines the shape of the skeleton, accepts circle or square.
* @values circle, square
*/
shape: {
type: String,
default: "circle",
validator: (shape) => Object.keys(SKELETON_SHAPES).includes(shape)
},
/**
* Size of the shape
* @values xs, sm, md, lg, xl
*/
size: {
type: String,
default: "md"
},
/**
* 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 content.
*/
contentClass: {
type: [String, Object, Array],
default: ""
}
},
data() {
return {
SKELETON_SHAPES
};
},
computed: {
shapeStyles() {
const size = SKELETON_SHAPE_SIZES[this.size] || this.size;
return {
...this.skeletonStyle,
"min-width": size,
"max-width": size,
"min-height": size,
"max-height": size
};
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
ref: "skeleton",
"data-qa": "skeleton-shape",
class: normalizeClass([
"d-skeleton-placeholder",
$data.SKELETON_SHAPES[$props.shape],
{
"d-skeleton-placeholder--animate": $props.animate
},
$props.contentClass
]),
style: normalizeStyle($options.shapeStyles)
}, null, 6);
}
const DtSkeletonShape = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtSkeletonShape as default
};
//# sourceMappingURL=skeleton-shape.vue.js.map