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

Dialpad's Dialtone design system monorepo

import { extractVueListeners as e, getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import i from "../button/button.js";
import a from "./collapsible-lazy-show.js";
import o from "../lazy-show/lazy-show.js";
import { createBlock as s, createElementVNode as c, createVNode as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderSlot as m, resolveComponent as h, resolveDynamicComponent as g, toDisplayString as _, toHandlers as v, withCtx as y } from "vue";
import { DtIconChevronDown as b, DtIconChevronRight as x } from "@dialpad/dialtone-icons/vue3";
//#region components/collapsible/collapsible.vue
var S = {
	compatConfig: { MODE: 3 },
	name: "DtCollapsible",
	components: {
		DtButton: i,
		DtCollapsibleLazyShow: a,
		DtLazyShow: o,
		DtIconChevronDown: b,
		DtIconChevronRight: x
	},
	props: {
		anchorText: {
			type: String,
			default: null
		},
		open: {
			type: Boolean,
			default: null
		},
		id: {
			type: String,
			default() {
				return t();
			}
		},
		elementType: {
			type: String,
			default: "div"
		},
		contentElementType: {
			type: String,
			default: "div"
		},
		anchorClass: {
			type: [
				String,
				Array,
				Object
			],
			default: null
		},
		contentClass: {
			type: [
				String,
				Array,
				Object
			],
			default: null
		},
		maxWidth: {
			type: String,
			default: null
		},
		maxHeight: {
			type: String,
			default: null
		},
		ariaLabel: {
			type: String,
			default: null
		},
		ariaLabelledBy: {
			type: String,
			default: null
		}
	},
	emits: ["update:open", "opened"],
	data() {
		return { isOpen: !0 };
	},
	computed: {
		labelledBy() {
			return this.ariaLabelledBy || !this.ariaLabel && t("DtCollapsible__anchor");
		},
		collapsibleListeners() {
			return e(this.$attrs);
		}
	},
	watch: { open: {
		handler: function(e) {
			e !== null && (this.isOpen = e);
		},
		immediate: !0
	} },
	created() {
		this.validateProperAnchor();
	},
	beforeUnmount() {
		this._isUnmounting = !0;
	},
	methods: {
		onLeaveTransitionComplete() {
			this._isUnmounting || (this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1));
		},
		onEnterTransitionComplete() {
			this._isUnmounting || (this.$emit("opened", !0, this.$refs.content), this.open !== null && this.$emit("update:open", !0));
		},
		defaultToggleOpen() {
			this.open === null && this.toggleOpen();
		},
		toggleOpen() {
			this.isOpen = !this.isOpen;
		},
		validateProperAnchor() {
			!this.anchorText && !n(this.$slots.anchor) && console.error("anchor text and anchor slot content cannot both be falsy");
		}
	}
}, C = ["id"], w = ["title"];
function T(e, t, n, r, i, a) {
	let o = h("dt-icon-chevron-down"), b = h("dt-icon-chevron-right"), x = h("dt-button"), S = h("dt-collapsible-lazy-show");
	return p(), s(g(n.elementType), u({ ref: "collapsible" }, v(a.collapsibleListeners)), {
		default: y(() => [c("div", {
			id: !n.ariaLabelledBy && a.labelledBy,
			ref: "anchor",
			class: d(n.anchorClass)
		}, [m(e.$slots, "anchor", { attrs: {
			"aria-controls": n.id,
			"aria-expanded": i.isOpen.toString(),
			role: "button"
		} }, () => [l(x, {
			importance: "clear",
			kind: "muted",
			"aria-controls": n.id,
			"aria-expanded": `${i.isOpen}`,
			style: f({ width: n.maxWidth }),
			onClick: a.defaultToggleOpen
		}, {
			default: y(() => [i.isOpen ? (p(), s(o, {
				key: 0,
				class: "d-collapsible__icon",
				size: "300"
			})) : (p(), s(b, {
				key: 1,
				class: "d-collapsible__icon",
				size: "300"
			})), c("span", {
				class: "d-collapsible__anchor-text",
				title: n.anchorText
			}, _(n.anchorText), 9, w)]),
			_: 1
		}, 8, [
			"aria-controls",
			"aria-expanded",
			"style",
			"onClick"
		])])], 10, C), l(S, u({
			id: n.id,
			ref: "contentWrapper",
			"aria-hidden": `${!i.isOpen}`,
			"aria-labelledby": a.labelledBy,
			"aria-label": n.ariaLabel,
			show: i.isOpen,
			"element-type": n.contentElementType,
			class: n.contentClass,
			style: {
				"max-height": n.maxHeight,
				"max-width": n.maxWidth
			},
			"data-qa": "dt-collapsible--content",
			tabindex: "-1",
			appear: ""
		}, v(a.collapsibleListeners), {
			onAfterLeave: a.onLeaveTransitionComplete,
			onAfterEnter: a.onEnterTransitionComplete
		}), {
			default: y(() => [m(e.$slots, "content")]),
			_: 3
		}, 16, [
			"id",
			"aria-hidden",
			"aria-labelledby",
			"aria-label",
			"show",
			"element-type",
			"class",
			"style",
			"onAfterLeave",
			"onAfterEnter"
		])]),
		_: 3
	}, 16);
}
var E = /* @__PURE__ */ r(S, [["render", T]]);
//#endregion
export { E as default };

//# sourceMappingURL=collapsible.js.map