@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
88 lines (87 loc) • 2.99 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue2 = require("@dialpad/dialtone-icons/vue2");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const button = require("../button/button.vue.cjs");
const _sfc_main = {
name: "PopoverHeaderFooter",
components: {
DtButton: button.default,
DtIconClose: vue2.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"
],
methods: {
focusCloseButton() {
var _a;
const closeButton = (_a = this.$refs["popover__close-button"]) == null ? void 0 : _a.$el;
closeButton == null ? void 0 : closeButton.focus();
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { class: {
"d-popover__header": _vm.type === "header",
"d-popover__footer": _vm.type === "footer"
}, attrs: { "data-qa": "dt-popover-header-footer" } }, [_vm.$slots.content ? _c("div", { class: [{
"d-popover__header__content": _vm.type === "header",
"d-popover__footer__content": _vm.type === "footer"
}, _vm.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [_vm._t("content")], 2) : _vm._e(), _vm.showCloseButton ? _c("dt-button", _vm._b({ ref: "popover__close-button", class: {
"d-popover__header__close-button": _vm.type === "header",
"d-popover__footer__close-button": _vm.type === "footer"
}, attrs: { "data-qa": "dt-popover-close", "importance": "outlined", "kind": "muted", "circle": "" }, on: { "click": function($event) {
return _vm.$emit("close");
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-close", { attrs: { "size": "300" } })];
}, proxy: true }], null, false, 2465905460) }, "dt-button", _vm.closeButtonProps, false)) : _vm._e()], 1);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const PopoverHeaderFooter = __component__.exports;
exports.default = PopoverHeaderFooter;
//# sourceMappingURL=popover_header_footer.vue.cjs.map