@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
230 lines (229 loc) • 6.22 kB
JavaScript
import g from "../../common/mixins/modal.js";
import d from "../../common/utils/index.js";
import p from "../../common/mixins/sr-only-close-button.js";
import { resolveComponent as l, openBlock as s, createElementBlock as y, normalizeClass as c, normalizeStyle as h, withKeys as k, createElementVNode as C, createBlock as _, withCtx as i, renderSlot as a, createCommentVNode as I, createVNode as u } from "vue";
import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import B from "../notice/notice-icon.js";
import v from "../notice/notice-content.js";
import N from "../notice/notice-action.js";
import { NOTICE_KINDS as D } from "../notice/notice-constants.js";
const O = {
compatConfig: { MODE: 3 },
name: "DtBanner",
components: {
DtNoticeIcon: B,
DtNoticeContent: v,
DtNoticeAction: N
},
mixins: [g, p],
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 d.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 d.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: !1
},
/**
* Pins the banner to the top of the window and pushes all app content down.
* @values true, false
*/
pinned: {
type: Boolean,
default: !1
},
/**
* Severity level of the notice, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validate(e) {
return D.includes(e);
}
},
/**
* Props for the notice close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the notice
* @values true, false
*/
hideClose: {
type: Boolean,
default: !1
},
/**
* Hides the icon from the notice
* @values true, false
*/
hideIcon: {
type: Boolean,
default: !1
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: !1
},
/**
* 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() {
return [
"d-banner",
{
error: "d-banner--error",
info: "d-banner--info",
success: "d-banner--success",
warning: "d-banner--warning",
base: "d-banner--base"
}[this.kind],
{
"d-banner--important": this.important,
"d-banner--pinned": this.pinned
}
];
},
bannerBackgroundImage() {
return this.backgroundImage === "" ? null : `background-image: url(${this.backgroundImage});
background-size: ${this.backgroundSize};`;
}
},
mounted() {
this.important && this.focusFirstElement();
},
methods: {
trapFocus(e) {
this.important && this.focusTrappedTabPress(e);
}
}
}, w = ["role", "aria-labelledby", "aria-describedby"];
function z(e, o, t, E, F, n) {
const m = l("dt-notice-icon"), f = l("dt-notice-content"), b = l("dt-notice-action");
return s(), y("aside", {
class: c(n.bannerClass),
style: h(n.bannerBackgroundImage),
onKeydown: o[1] || (o[1] = k((...r) => n.trapFocus && n.trapFocus(...r), ["tab"]))
}, [
C("div", {
class: c(["d-banner__dialog", t.dialogClass]),
role: n.role,
"aria-labelledby": t.titleId,
"aria-describedby": t.contentId
}, [
t.hideIcon ? I("", !0) : (s(), _(m, {
key: 0,
kind: t.kind
}, {
default: i(() => [
a(e.$slots, "icon")
]),
_: 3
}, 8, ["kind"])),
u(f, {
"title-id": t.titleId,
"content-id": t.contentId,
title: t.title
}, {
titleOverride: i(() => [
a(e.$slots, "titleOverride")
]),
default: i(() => [
a(e.$slots, "default")
]),
_: 3
}, 8, ["title-id", "content-id", "title"]),
u(b, {
"hide-action": t.hideAction,
"hide-close": t.hideClose,
"close-button-props": t.closeButtonProps,
"visually-hidden-close": e.visuallyHiddenClose,
"visually-hidden-close-label": e.visuallyHiddenCloseLabel,
onClose: o[0] || (o[0] = (r) => e.$emit("close"))
}, {
default: i(() => [
a(e.$slots, "action")
]),
_: 3
}, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
], 10, w)
], 38);
}
const j = /* @__PURE__ */ S(O, [["render", z]]);
export {
j as default
};
//# sourceMappingURL=banner.js.map