@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
95 lines (94 loc) • 2.94 kB
JavaScript
import { DtIconClose } from "@dialpad/dialtone-icons/vue2";
import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
name: "DtNoticeAction",
components: {
DtIconClose,
DtButton,
SrOnlyCloseButton
},
mixins: [SrOnlyCloseButtonMixin],
props: {
/**
* Props for the notice close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the notice
* @values true, false
*/
hideClose: {
type: Boolean,
default: false
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: false
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close"
],
computed: {
noticeActionListeners() {
return {
...this.$listeners,
click: (event) => {
this.close();
this.$emit("click", event);
}
};
}
},
created() {
if (!this.hideClose && !this.closeButtonProps.ariaLabel) {
console.error("Invalid props: you must pass in closeButtonProps.ariaLabel if the close button is displayed.");
}
},
mounted() {
if (!this.hideClose) {
this.lastFocusedElement = document.activeElement;
}
},
beforeDestroy() {
var _a;
(_a = this.lastFocusedElement) == null ? void 0 : _a.focus();
},
methods: {
close() {
this.$emit("close");
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "d-notice__actions", attrs: { "data-qa": "notice-content-actions" } }, [!_vm.hideAction ? _vm._t("default") : _vm._e(), !_vm.hideClose ? _c("dt-button", _vm._g(_vm._b({ ref: "closeButton", attrs: { "data-qa": "dt-notice-action-close-button", "size": "sm", "importance": "clear", "circle": "", "aria-label": _vm.closeButtonProps.ariaLabel ? _vm.closeButtonProps.ariaLabel : "Close" }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_c("dt-icon-close", { attrs: { "size": "200" } })];
}, proxy: true }], null, false, 4156074325) }, "dt-button", _vm.closeButtonProps, false), _vm.noticeActionListeners)) : _vm._e(), _vm.showVisuallyHiddenClose ? _c("sr-only-close-button", { attrs: { "visually-hidden-close-label": _vm.visuallyHiddenCloseLabel }, on: { "close": _vm.close } }) : _vm._e()], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const DtNoticeAction = __component__.exports;
export {
DtNoticeAction as default
};
//# sourceMappingURL=notice_action.vue.js.map