@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
91 lines (90 loc) • 2.49 kB
JavaScript
import { hasSlotContent as e, returnFirstEl as t } from "../../common/utils/index.js";
import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { DialtoneLocalization as r } from "../../localization/index.js";
import i from "../button/button.js";
import { createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveComponent as f, withCtx as p } from "vue";
import { DtIconClose as m } from "@dialpad/dialtone-icons/vue3";
//#region components/popover/popover_header_footer.vue
var h = {
compatConfig: { MODE: 3 },
name: "PopoverHeaderFooter",
components: {
DtButton: i,
DtIconClose: m
},
props: {
type: {
type: String,
validator: function(e) {
return ["header", "footer"].includes(e);
}
},
contentClass: {
type: [
String,
Array,
Object
],
default: ""
},
showCloseButton: {
type: Boolean,
default: !1
}
},
emits: ["close"],
data() {
return {
hasSlotContent: e,
i18n: new r()
};
},
computed: { closeButtonTitle() {
return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
} },
methods: { focusCloseButton() {
t(this.$refs["popover__close-button"]?.$el)?.focus();
} }
};
function g(e, t, n, r, i, m) {
let h = f("dt-icon-close"), g = f("dt-button");
return u(), s("div", {
"data-qa": "dt-popover-header-footer",
class: l({
"d-popover__header": n.type === "header",
"d-popover__footer": n.type === "footer"
})
}, [i.hasSlotContent(e.$slots.content) ? (u(), s("div", {
key: 0,
"data-qa": "dt-popover-header-footer-content",
class: l([{
"d-popover__header__content": n.type === "header",
"d-popover__footer__content": n.type === "footer"
}, n.contentClass])
}, [d(e.$slots, "content")], 2)) : o("", !0), n.showCloseButton ? (u(), a(g, {
key: 1,
ref: "popover__close-button",
"data-qa": "dt-popover-close",
class: l({
"d-popover__header__close-button": n.type === "header",
"d-popover__footer__close-button": n.type === "footer"
}),
importance: "outlined",
kind: "muted",
circle: "",
"aria-label": m.closeButtonTitle,
title: m.closeButtonTitle,
onClick: t[0] || (t[0] = (t) => e.$emit("close"))
}, {
icon: p(() => [c(h, { size: "300" })]),
_: 1
}, 8, [
"class",
"aria-label",
"title"
])) : o("", !0)], 2);
}
var _ = /* @__PURE__ */ n(h, [["render", g]]);
//#endregion
export { _ as default };
//# sourceMappingURL=popover-header-footer.js.map