@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
239 lines (238 loc) • 7.29 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const modal = require("../../common/mixins/modal.cjs");
const common_utils = require("../../common/utils.cjs");
const sr_only_close_button = require("../../common/mixins/sr_only_close_button.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const notice_icon = require("../notice/notice_icon.vue.cjs");
const notice_content = require("../notice/notice_content.vue.cjs");
const notice_action = require("../notice/notice_action.vue.cjs");
const notice_constants = require("../notice/notice_constants.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
name: "DtBanner",
components: {
DtNoticeIcon: notice_icon.default,
DtNoticeContent: notice_content.default,
DtNoticeAction: notice_action.default
},
mixins: [modal.default, sr_only_close_button.default],
props: {
/**
* Sets an ID on the title element of the component. Useful for aria-describedby
* or aria-labelledby or any other reason you may need an id to refer to the title.
*/
titleId: {
type: String,
default() {
return common_utils.default.getUniqueString();
}
},
/**
* Sets an ID on the content element of the component. Useful for aria-describedby
* or aria-labelledby or any other reason you may need an id to refer to the content.
*/
contentId: {
type: String,
default() {
return common_utils.default.getUniqueString();
}
},
/**
* Title header of the notice. This can be left blank to remove the title from the notice entirely.
*/
title: {
type: String,
default: ""
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* This will also change the aria role from status to alertdialog.
* and will modally trap the keyboard focus in the dialog as soon as it displays.
* @values true, false
*/
important: {
type: Boolean,
default: false
},
/**
* Pins the banner to the top of the window and pushes all app content down.
* @values true, false
*/
pinned: {
type: Boolean,
default: false
},
/**
* Severity level of the notice, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validate(kind) {
return notice_constants.NOTICE_KINDS.includes(kind);
}
},
/**
* 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 icon from the notice
* @values true, false
*/
hideIcon: {
type: Boolean,
default: false
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: false
},
/**
* Inner dialog class
*/
dialogClass: {
type: String,
default: ""
},
/**
* Banner background image
*/
backgroundImage: {
type: String,
default: ""
},
/**
* Background image size, follows the background-size CSS property values
* <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-size" target="_blank">
* CSS background-sizes
* </a>
*/
backgroundSize: {
type: String,
default: "cover"
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close"
],
computed: {
role() {
return this.important ? "alertdialog" : "status";
},
bannerClass() {
const kindClasses = {
error: "d-banner--error",
info: "d-banner--info",
success: "d-banner--success",
warning: "d-banner--warning",
base: "d-banner--base"
};
return [
"d-banner",
kindClasses[this.kind],
{
"d-banner--important": this.important,
"d-banner--pinned": this.pinned
}
];
},
bannerBackgroundImage() {
if (this.backgroundImage === "") return null;
return `background-image: url(${this.backgroundImage});
background-size: ${this.backgroundSize};`;
}
},
mounted() {
if (this.important) {
this.focusFirstElement();
}
},
methods: {
trapFocus(e) {
if (this.important) {
this.focusTrappedTabPress(e);
}
}
}
};
const _hoisted_1 = ["role", "aria-labelledby", "aria-describedby"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_dt_notice_icon = vue.resolveComponent("dt-notice-icon");
const _component_dt_notice_content = vue.resolveComponent("dt-notice-content");
const _component_dt_notice_action = vue.resolveComponent("dt-notice-action");
return vue.openBlock(), vue.createElementBlock("aside", {
class: vue.normalizeClass($options.bannerClass),
style: vue.normalizeStyle($options.bannerBackgroundImage),
onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => $options.trapFocus && $options.trapFocus(...args), ["tab"]))
}, [
vue.createElementVNode("div", {
class: vue.normalizeClass(["d-banner__dialog", $props.dialogClass]),
role: $options.role,
"aria-labelledby": $props.titleId,
"aria-describedby": $props.contentId
}, [
!$props.hideIcon ? (vue.openBlock(), vue.createBlock(_component_dt_notice_icon, {
key: 0,
kind: $props.kind
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "icon")
]),
_: 3
}, 8, ["kind"])) : vue.createCommentVNode("", true),
vue.createVNode(_component_dt_notice_content, {
"title-id": $props.titleId,
"content-id": $props.contentId,
title: $props.title
}, {
titleOverride: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "titleOverride")
]),
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["title-id", "content-id", "title"]),
vue.createVNode(_component_dt_notice_action, {
"hide-action": $props.hideAction,
"hide-close": $props.hideClose,
"close-button-props": $props.closeButtonProps,
"visually-hidden-close": _ctx.visuallyHiddenClose,
"visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
onClose: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
}, {
default: vue.withCtx(() => [
vue.renderSlot(_ctx.$slots, "action")
]),
_: 3
}, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
], 10, _hoisted_1)
], 38);
}
const banner = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = banner;
//# sourceMappingURL=banner.vue.cjs.map