@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
114 lines (113 loc) • 3.63 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const common_utils = require("../../common/utils.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "PopoverHeaderFooter",
components: {
DtButton: button.default,
DtIconClose: vue3.DtIconClose
},
props: {
// eslint-disable-next-line vue/require-default-prop
type: {
type: String,
validator: function(value) {
return ["header", "footer"].includes(value);
}
},
/**
* 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: false
},
/**
* 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: common_utils.hasSlotContent
};
},
methods: {
focusCloseButton() {
var _a;
const closeButton = common_utils.returnFirstEl((_a = this.$refs["popover__close-button"]) == null ? void 0 : _a.$el);
closeButton == null ? void 0 : closeButton.focus();
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
const _component_dt_button = vue.resolveComponent("dt-button");
return vue.openBlock(), vue.createElementBlock("div", {
"data-qa": "dt-popover-header-footer",
class: vue.normalizeClass({
"d-popover__header": $props.type === "header",
"d-popover__footer": $props.type === "footer"
})
}, [
$data.hasSlotContent(_ctx.$slots.content) ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
"data-qa": "dt-popover-header-footer-content",
class: vue.normalizeClass([{
"d-popover__header__content": $props.type === "header",
"d-popover__footer__content": $props.type === "footer"
}, $props.contentClass])
}, [
vue.renderSlot(_ctx.$slots, "content")
], 2)) : vue.createCommentVNode("", true),
$props.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
key: 1,
ref: "popover__close-button",
"data-qa": "dt-popover-close",
class: {
"d-popover__header__close-button": $props.type === "header",
"d-popover__footer__close-button": $props.type === "footer"
},
importance: "outlined",
kind: "muted",
circle: ""
}, $props.closeButtonProps, {
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
}), {
icon: vue.withCtx(() => [
vue.createVNode(_component_dt_icon_close, { size: "300" })
]),
_: 1
}, 16, ["class"])) : vue.createCommentVNode("", true)
], 2);
}
const PopoverHeaderFooter = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = PopoverHeaderFooter;
//# sourceMappingURL=popover_header_footer.vue.cjs.map