@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
105 lines (104 loc) • 3.32 kB
JavaScript
import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
import { resolveComponent, openBlock, createElementBlock, renderSlot, createCommentVNode, createBlock, mergeProps, withCtx, createVNode } from "vue";
import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
import DtButton from "../button/button.vue.js";
const _sfc_main = {
compatConfig: { MODE: 3 },
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"
],
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;
}
},
beforeUnmount() {
var _a;
(_a = this.lastFocusedElement) == null ? void 0 : _a.focus();
},
methods: {
close() {
this.$emit("close");
}
}
};
const _hoisted_1 = {
class: "d-notice__actions",
"data-qa": "notice-content-actions"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_icon_close = resolveComponent("dt-icon-close");
const _component_dt_button = resolveComponent("dt-button");
const _component_sr_only_close_button = resolveComponent("sr-only-close-button");
return openBlock(), createElementBlock("div", _hoisted_1, [
!$props.hideAction ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true),
!$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({
key: 1,
ref: "closeButton",
"data-qa": "dt-notice-action-close-button",
size: "sm",
importance: "clear",
circle: "",
"aria-label": $props.closeButtonProps.ariaLabel ? $props.closeButtonProps.ariaLabel : "Close"
}, $props.closeButtonProps, { onClick: $options.close }), {
icon: withCtx(() => [
createVNode(_component_dt_icon_close, { size: "200" })
]),
_: 1
}, 16, ["aria-label", "onClick"])) : createCommentVNode("", true),
_ctx.showVisuallyHiddenClose ? (openBlock(), createBlock(_component_sr_only_close_button, {
key: 2,
"visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
onClose: $options.close
}, null, 8, ["visually-hidden-close-label", "onClose"])) : createCommentVNode("", true)
]);
}
const DtNoticeAction = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
DtNoticeAction as default
};
//# sourceMappingURL=notice_action.vue.js.map