@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
112 lines (111 loc) • 3.05 kB
JavaScript
import { DtIconClose as _ } from "@dialpad/dialtone-icons/vue3";
import { returnFirstEl as u, hasSlotContent as f } from "../../common/utils/index.js";
import { DialtoneLocalization as m } from "../../localization/index.js";
import { resolveComponent as l, createElementBlock as s, openBlock as n, normalizeClass as r, createCommentVNode as c, createBlock as v, renderSlot as h, withCtx as C, createVNode as y } from "vue";
import { _ as B } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import b from "../button/button.js";
const k = {
compatConfig: { MODE: 3 },
name: "PopoverHeaderFooter",
components: {
DtButton: b,
DtIconClose: _
},
props: {
// eslint-disable-next-line vue/require-default-prop
type: {
type: String,
validator: function(e) {
return ["header", "footer"].includes(e);
}
},
/**
* Additional class name for the content wrapper element.
*/
contentClass: {
type: [String, Array, Object],
default: ""
},
/**
* Determines visibility for close button
* @values true, false
*/
showCloseButton: {
type: Boolean,
default: !1
}
},
emits: [
/**
* Emitted when popover is closed
*
* @event close
* @type { Boolean }
*/
"close"
],
data() {
return {
hasSlotContent: f,
i18n: new m()
};
},
computed: {
closeButtonTitle() {
return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
}
},
methods: {
focusCloseButton() {
var o;
const e = u((o = this.$refs["popover__close-button"]) == null ? void 0 : o.$el);
e == null || e.focus();
}
}
};
function S(e, o, t, T, d, a) {
const i = l("dt-icon-close"), p = l("dt-button");
return n(), s("div", {
"data-qa": "dt-popover-header-footer",
class: r({
"d-popover__header": t.type === "header",
"d-popover__footer": t.type === "footer"
})
}, [
d.hasSlotContent(e.$slots.content) ? (n(), s("div", {
key: 0,
"data-qa": "dt-popover-header-footer-content",
class: r([{
"d-popover__header__content": t.type === "header",
"d-popover__footer__content": t.type === "footer"
}, t.contentClass])
}, [
h(e.$slots, "content")
], 2)) : c("", !0),
t.showCloseButton ? (n(), v(p, {
key: 1,
ref: "popover__close-button",
"data-qa": "dt-popover-close",
class: r({
"d-popover__header__close-button": t.type === "header",
"d-popover__footer__close-button": t.type === "footer"
}),
importance: "outlined",
kind: "muted",
circle: "",
"aria-label": a.closeButtonTitle,
title: a.closeButtonTitle,
onClick: o[0] || (o[0] = (D) => e.$emit("close"))
}, {
icon: C(() => [
y(i, { size: "300" })
]),
_: 1
}, 8, ["class", "aria-label", "title"])) : c("", !0)
], 2);
}
const z = /* @__PURE__ */ B(k, [["render", S]]);
export {
z as default
};
//# sourceMappingURL=popover-header-footer.js.map