@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
113 lines (112 loc) • 3.02 kB
JavaScript
import { DtIconClose as _ } from "@dialpad/dialtone-icons/vue3";
import { hasSlotContent as i, returnFirstEl as f } from "../../common/utils/index.js";
import { resolveComponent as n, openBlock as r, createElementBlock as s, normalizeClass as c, renderSlot as u, createCommentVNode as a, createBlock as m, mergeProps as v, withCtx as h, createVNode as y } from "vue";
import { _ as C } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import B from "../button/button.js";
const b = {
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
},
/**
* A set of props to be passed into the popover's header close button.
* Requires an 'ariaLabel' property.
*/
closeButtonProps: {
type: Object,
default: () => {
}
}
},
emits: [
/**
* Emitted when popover is closed
*
* @event close
* @type { Boolean }
*/
"close"
],
data() {
return {
hasSlotContent: i
};
},
methods: {
focusCloseButton() {
var t;
const e = f((t = this.$refs["popover__close-button"]) == null ? void 0 : t.$el);
e == null || e.focus();
}
}
};
function k(e, t, o, P, d, S) {
const l = n("dt-icon-close"), p = n("dt-button");
return r(), s("div", {
"data-qa": "dt-popover-header-footer",
class: c({
"d-popover__header": o.type === "header",
"d-popover__footer": o.type === "footer"
})
}, [
d.hasSlotContent(e.$slots.content) ? (r(), s("div", {
key: 0,
"data-qa": "dt-popover-header-footer-content",
class: c([{
"d-popover__header__content": o.type === "header",
"d-popover__footer__content": o.type === "footer"
}, o.contentClass])
}, [
u(e.$slots, "content")
], 2)) : a("", !0),
o.showCloseButton ? (r(), m(p, v({
key: 1,
ref: "popover__close-button",
"data-qa": "dt-popover-close",
class: {
"d-popover__header__close-button": o.type === "header",
"d-popover__footer__close-button": o.type === "footer"
},
importance: "outlined",
kind: "muted",
circle: ""
}, o.closeButtonProps, {
onClick: t[0] || (t[0] = (g) => e.$emit("close"))
}), {
icon: h(() => [
y(l, { size: "300" })
]),
_: 1
}, 16, ["class"])) : a("", !0)
], 2);
}
const O = /* @__PURE__ */ C(b, [["render", k]]);
export {
O as default
};
//# sourceMappingURL=popover-header-footer.js.map