@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
145 lines (144 loc) • 5.13 kB
JavaScript
import DtSkeletonShape from "./skeleton-shape.vue.js";
import DtSkeletonListItem from "./skeleton-list-item.vue.js";
import DtSkeletonParagraph from "./skeleton-paragraph.vue.js";
import DtSkeletonText from "./skeleton-text.vue.js";
import { resolveComponent, openBlock, createElementBlock, createBlock, mergeProps } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtSkeleton",
components: {
DtSkeletonText,
DtSkeletonShape,
DtSkeletonListItem,
DtSkeletonParagraph
},
props: {
/**
* Set this prop to have the skeleton render as multiple lines of text.
* Set only one option prop at a time.
*/
paragraphOption: {
type: [Object, Boolean],
default: null
},
/**
* Set this prop to have the skeleton render as a list item with an avatar and wrapping text.
* Set only one option prop at a time.
*/
listItemOption: {
type: [Object, Boolean],
default: null
},
/**
* Set this prop to have the skeleton render as a single line of text.
* Set only one option prop at a time.
*/
textOption: {
type: Object,
default: null
},
/**
* Set this prop to have the skeleton render as a specific shape.
* Set only one option prop at a time.
*/
shapeOption: {
type: [Object, Boolean],
default: null
},
/**
* Duration time of the animation (ms), set -1 for an infinite animation.
*/
animationDuration: {
type: Number,
default: -1
},
/**
* Descriptive label for the content.
*/
ariaLabel: {
type: String,
default: ""
},
/**
* 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
}
},
computed: {
validationOptions() {
return {
paragraphOption: this.paragraphOption,
listItemOption: this.listItemOption,
textOption: this.textOption,
shapeOption: this.shapeOption
};
}
},
watch: {
$props: {
immediate: true,
handler: "validator"
}
},
methods: {
validator() {
const filtered = Object.entries(this.validationOptions).filter(([_, option]) => option);
if (filtered.length >= 2) {
const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(" | ")} options at the same time`;
console.error(errorMessage);
}
}
}
};
const _hoisted_1 = ["aria-label"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_skeleton_list_item = resolveComponent("dt-skeleton-list-item");
const _component_dt_skeleton_shape = resolveComponent("dt-skeleton-shape");
const _component_dt_skeleton_paragraph = resolveComponent("dt-skeleton-paragraph");
const _component_dt_skeleton_text = resolveComponent("dt-skeleton-text");
return openBlock(), createElementBlock("div", {
"aria-busy": "true",
role: "status",
"aria-label": $props.ariaLabel
}, [
$props.listItemOption ? (openBlock(), createBlock(_component_dt_skeleton_list_item, mergeProps({ key: 0 }, $props.listItemOption === true ? {} : $props.listItemOption, {
"animation-duration": $props.animationDuration,
animate: $props.animate,
offset: $props.offset
}), null, 16, ["animation-duration", "animate", "offset"])) : $props.shapeOption ? (openBlock(), createBlock(_component_dt_skeleton_shape, mergeProps({ key: 1 }, $props.shapeOption === true ? {} : $props.shapeOption, {
"animation-duration": $props.animationDuration,
animate: $props.animate,
offset: $props.offset
}), null, 16, ["animation-duration", "animate", "offset"])) : $props.paragraphOption ? (openBlock(), createBlock(_component_dt_skeleton_paragraph, mergeProps({ key: 2 }, $props.paragraphOption === true ? {} : $props.paragraphOption, {
"animation-duration": $props.animationDuration,
animate: $props.animate,
offset: $props.offset
}), null, 16, ["animation-duration", "animate", "offset"])) : (openBlock(), createBlock(_component_dt_skeleton_text, mergeProps({ key: 3 }, $props.textOption || {}, {
"animation-duration": $props.animationDuration,
animate: $props.animate,
offset: $props.offset
}), null, 16, ["animation-duration", "animate", "offset"]))
], 8, _hoisted_1);
}
const DtSkeleton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtSkeleton as default
};
//# sourceMappingURL=skeleton.vue.js.map