@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
159 lines (158 loc) • 3.62 kB
JavaScript
import e from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import n from "../../common/mixins/modal.js";
import { NOTICE_KINDS as r } from "../notice/notice-constants.js";
import i from "../notice/notice-icon.js";
import a from "../notice/notice-content.js";
import o from "../notice/notice-action.js";
import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v } from "vue";
//#region components/banner/banner.vue
var y = {
compatConfig: { MODE: 3 },
name: "DtBanner",
components: {
DtNoticeIcon: i,
DtNoticeContent: a,
DtNoticeAction: o
},
mixins: [n],
props: {
titleId: {
type: String,
default() {
return e.getUniqueString();
}
},
contentId: {
type: String,
default() {
return e.getUniqueString();
}
},
title: {
type: String,
default: ""
},
important: {
type: Boolean,
default: !1
},
pinned: {
type: Boolean,
default: !1
},
kind: {
type: String,
default: "base",
validate(e) {
return r.includes(e);
}
},
hideClose: {
type: Boolean,
default: !1
},
hideIcon: {
type: Boolean,
default: !1
},
hideAction: {
type: Boolean,
default: !1
},
dialogClass: {
type: String,
default: ""
},
backgroundImage: {
type: String,
default: ""
},
backgroundSize: {
type: String,
default: "cover"
}
},
emits: ["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);
} }
}, b = [
"role",
"aria-labelledby",
"aria-describedby"
];
function x(e, t, n, r, i, a) {
let o = g("dt-notice-icon"), y = g("dt-notice-content"), x = g("dt-notice-action");
return m(), l("aside", {
class: f(a.bannerClass),
style: p(a.bannerBackgroundImage),
onKeydown: t[1] || (t[1] = v((...e) => a.trapFocus && a.trapFocus(...e), ["tab"]))
}, [u("div", {
class: f(["d-banner__dialog", n.dialogClass]),
role: a.role,
"aria-labelledby": n.titleId,
"aria-describedby": n.contentId
}, [
n.hideIcon ? c("", !0) : (m(), s(o, {
key: 0,
kind: n.kind
}, {
default: _(() => [h(e.$slots, "icon")]),
_: 3
}, 8, ["kind"])),
d(y, {
"title-id": n.titleId,
"content-id": n.contentId,
title: n.title
}, {
titleOverride: _(() => [h(e.$slots, "titleOverride")]),
default: _(() => [h(e.$slots, "default")]),
_: 3
}, 8, [
"title-id",
"content-id",
"title"
]),
d(x, {
"hide-action": n.hideAction,
"hide-close": n.hideClose,
onClose: t[0] || (t[0] = (t) => e.$emit("close"))
}, {
default: _(() => [h(e.$slots, "action")]),
_: 3
}, 8, ["hide-action", "hide-close"])
], 10, b)], 38);
}
var S = /* @__PURE__ */ t(y, [["render", x]]);
//#endregion
export { S as default };
//# sourceMappingURL=banner.js.map