@dialpad/dialtone/dist/vue3/lib/skeleton/skeleton.js

Dialpad's Dialtone design system monorepo

import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import t from "./skeleton-shape.js";
import n from "./skeleton-text.js";
import r from "./skeleton-paragraph.js";
import i from "./skeleton-list-item.js";
import { createBlock as a, createElementBlock as o, mergeProps as s, openBlock as c, resolveComponent as l } from "vue";
//#region components/skeleton/skeleton.vue
var u = {
	compatConfig: { MODE: 3 },
	name: "DtSkeleton",
	components: {
		DtSkeletonText: n,
		DtSkeletonShape: t,
		DtSkeletonListItem: i,
		DtSkeletonParagraph: r
	},
	props: {
		paragraphOption: {
			type: [Object, Boolean],
			default: null
		},
		listItemOption: {
			type: [Object, Boolean],
			default: null
		},
		textOption: {
			type: Object,
			default: null
		},
		shapeOption: {
			type: [Object, Boolean],
			default: null
		},
		animationDuration: {
			type: Number,
			default: -1
		},
		ariaLabel: {
			type: String,
			default: ""
		},
		animate: {
			type: Boolean,
			default: !0
		},
		offset: {
			type: Number,
			default: 1
		}
	},
	computed: { validationOptions() {
		return {
			paragraphOption: this.paragraphOption,
			listItemOption: this.listItemOption,
			textOption: this.textOption,
			shapeOption: this.shapeOption
		};
	} },
	watch: { $props: {
		immediate: !0,
		handler: "validator"
	} },
	methods: { validator() {
		let e = Object.entries(this.validationOptions).filter(([, e]) => e);
		if (e.length >= 2) {
			let t = `Use only one of ${e.map(([e]) => e).join(" | ")} options at the same time`;
			console.error(t);
		}
	} }
}, d = ["aria-label"];
function f(e, t, n, r, i, u) {
	let f = l("dt-skeleton-list-item"), p = l("dt-skeleton-shape"), m = l("dt-skeleton-paragraph"), h = l("dt-skeleton-text");
	return c(), o("div", {
		"aria-busy": "true",
		role: "status",
		"aria-label": n.ariaLabel
	}, [n.listItemOption ? (c(), a(f, s({ key: 0 }, n.listItemOption === !0 ? {} : n.listItemOption, {
		"animation-duration": n.animationDuration,
		animate: n.animate,
		offset: n.offset
	}), null, 16, [
		"animation-duration",
		"animate",
		"offset"
	])) : n.shapeOption ? (c(), a(p, s({ key: 1 }, n.shapeOption === !0 ? {} : n.shapeOption, {
		"animation-duration": n.animationDuration,
		animate: n.animate,
		offset: n.offset
	}), null, 16, [
		"animation-duration",
		"animate",
		"offset"
	])) : n.paragraphOption ? (c(), a(m, s({ key: 2 }, n.paragraphOption === !0 ? {} : n.paragraphOption, {
		"animation-duration": n.animationDuration,
		animate: n.animate,
		offset: n.offset
	}), null, 16, [
		"animation-duration",
		"animate",
		"offset"
	])) : (c(), a(h, s({ key: 3 }, n.textOption || {}, {
		"animation-duration": n.animationDuration,
		animate: n.animate,
		offset: n.offset
	}), null, 16, [
		"animation-duration",
		"animate",
		"offset"
	]))], 8, d);
}
var p = /* @__PURE__ */ e(u, [["render", f]]);
//#endregion
export { p as default };

//# sourceMappingURL=skeleton.js.map