@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
622 lines (621 loc) • 16.4 kB
JavaScript
import { TOAST_ROLES as O, TOAST_ALTERNATE_KINDS as D, TOAST_MIN_DURATION as w, TOAST_LAYOUTS as M } from "./toast-constants.js";
import v from "../../common/mixins/sr-only-close-button.js";
import m from "../../common/utils/index.js";
import { resolveComponent as d, openBlock as l, createElementBlock as k, normalizeClass as A, createElementVNode as c, createBlock as y, mergeProps as a, withCtx as o, renderSlot as n, createCommentVNode as r, createVNode as h, createTextVNode as C, toDisplayString as T, resolveDynamicComponent as N } from "vue";
import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import U from "../notice/notice-icon.js";
import L from "../notice/notice-content.js";
import E from "../notice/notice-action.js";
import { NOTICE_KINDS as j } from "../notice/notice-constants.js";
import { DtIconInfo as f, DtIconAlertTriangle as $, DtIconBell as z, DtIconSparkle as P } from "@dialpad/dialtone-icons/vue3";
import { ICON_SIZE_MODIFIERS as H } from "../icon/icon-constants.js";
const R = {
name: "ToastLayoutDefault",
components: {
DtNoticeIcon: U,
DtNoticeContent: L,
DtNoticeAction: E
},
mixins: [v],
inheritAttrs: !1,
props: {
isShown: {
type: Boolean,
default: !1
},
/**
* 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 m.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 m.getUniqueString();
}
},
/**
* Title header of the toast. This can be left blank to remove the title from the toast entirely.
*/
title: {
type: String,
default: ""
},
/**
* Message of the toast. Overridden by default slot.
*/
message: {
type: String,
default: ""
},
/**
* Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
* communicate an important message like an error that does not contain any interactive elements.
* @values status, alert
*/
role: {
type: String,
default: "status",
validator: (t) => O.includes(t)
},
/**
* Severity level of the toast, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validator: (t) => j.includes(t)
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* @values true, false
*/
important: {
type: Boolean,
default: !1
},
/**
* Props for the toast close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the toast
* @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
}
},
emits: ["close"],
computed: {
kindClass() {
return {
error: "d-toast--error",
info: "d-toast--info",
success: "d-toast--success",
warning: "d-toast--warning",
base: "d-toast--base"
}[this.kind];
}
}
}, V = ["aria-hidden"], K = { class: "d-toast__dialog" };
function F(t, s, e, g, u, i) {
const S = d("dt-notice-icon"), p = d("dt-notice-content"), I = d("dt-notice-action");
return e.isShown ? (l(), k("div", {
key: 0,
class: A([
"d-toast",
i.kindClass,
{ "d-toast--important": e.important }
]),
"data-qa": "dt-toast",
"aria-hidden": (!e.isShown).toString()
}, [
c("div", K, [
e.hideIcon ? r("", !0) : (l(), y(S, a({
key: 0,
kind: e.kind
}, t.$attrs), {
default: o(() => [
n(t.$slots, "icon")
]),
_: 3
}, 16, ["kind"])),
h(p, a({
"title-id": e.titleId,
"content-id": e.contentId,
title: e.title,
role: e.role
}, t.$attrs), {
titleOverride: o(() => [
n(t.$slots, "titleOverride")
]),
default: o(() => [
n(t.$slots, "default", {}, () => [
C(T(e.message), 1)
])
]),
_: 3
}, 16, ["title-id", "content-id", "title", "role"]),
h(I, a({
"hide-action": e.hideAction,
"hide-close": e.hideClose,
"close-button-props": e.closeButtonProps,
"visually-hidden-close": t.visuallyHiddenClose,
"visually-hidden-close-label": t.visuallyHiddenCloseLabel
}, t.$attrs, {
onClose: s[0] || (s[0] = (q) => t.$emit("close"))
}), {
default: o(() => [
n(t.$slots, "action")
]),
_: 3
}, 16, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
])
], 10, V)) : r("", !0);
}
const B = /* @__PURE__ */ _(R, [["render", F]]), Y = /* @__PURE__ */ new Map([
["info", f],
["success", f],
["warning", $],
["error", f],
["base", z],
["gradient", P]
]), Z = {
compatConfig: { MODE: 3 },
name: "DtToastLayoutAlternateIcon",
components: {
DtIconInfo: f,
DtIconAlertTriangle: $,
DtIconBell: z,
DtIconSparkle: P
},
props: {
/**
* Kind of icon
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validate(t) {
return D.includes(t);
}
},
size: {
type: String,
default: "400",
validator: (t) => Object.keys(H).includes(t)
}
},
computed: {
defaultIcon() {
return Y.get(this.kind);
}
}
}, G = {
"aria-hidden": "true",
class: "d-toast-layout-alternate__icon"
};
function J(t, s, e, g, u, i) {
return l(), k("div", G, [
n(t.$slots, "default", {}, () => [
i.defaultIcon ? (l(), y(N(i.defaultIcon), {
key: 0,
size: e.size
}, null, 8, ["size"])) : r("", !0)
])
]);
}
const Q = /* @__PURE__ */ _(Z, [["render", J]]), W = {
name: "ToastLayoutAlternate",
components: {
DtToastLayoutAlternateIcon: Q,
DtNoticeContent: L,
DtNoticeAction: E
},
mixins: [v],
inheritAttrs: !1,
props: {
isShown: {
type: Boolean,
default: !1
},
/**
* 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 m.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 m.getUniqueString();
}
},
/**
* Title header of the toast. This can be left blank to remove the title from the toast entirely.
*/
title: {
type: String,
default: ""
},
/**
* Message of the toast. Overridden by default slot.
*/
message: {
type: String,
default: ""
},
/**
* Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
* communicate an important message like an error that does not contain any interactive elements.
* @values status, alert
*/
role: {
type: String,
default: "status",
validator: (t) => O.includes(t)
},
/**
* Severity level of the toast, sets the icon and background
* @values base, error, info, success, warning, gradient
*/
kind: {
type: String,
default: "base",
validator: (t) => D.includes(t)
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* @values true, false
*/
important: {
type: Boolean,
default: !1
},
/**
* Props for the toast close button.
*/
closeButtonProps: {
type: Object,
default: () => ({})
},
/**
* Hides the close button from the toast
* @values true, false
*/
hideClose: {
type: Boolean,
default: !1
},
/**
* Hides the icon from the notice
* @values true, false
*/
hideIcon: {
type: Boolean,
default: !1
}
},
emits: ["close"],
computed: {
kindClass() {
return {
error: "d-toast-alternate--error",
info: "d-toast-alternate--info",
success: "d-toast-alternate--success",
warning: "d-toast-alternate--warning",
gradient: "d-toast-alternate--gradient"
}[this.kind];
}
}
}, X = ["aria-hidden"], x = { class: "d-toast-alternate__dialog" }, tt = { class: "d-toast-alternate__header" }, et = { class: "d-toast-alternate__content" };
function nt(t, s, e, g, u, i) {
const S = d("dt-toast-layout-alternate-icon"), p = d("dt-notice-content"), I = d("dt-notice-action");
return e.isShown ? (l(), k("div", {
key: 0,
class: A([
"d-toast-alternate",
i.kindClass
]),
"data-qa": "dt-toast",
"aria-hidden": (!e.isShown).toString()
}, [
c("div", x, [
c("div", tt, [
e.hideIcon ? r("", !0) : (l(), y(S, a({
key: 0,
kind: e.kind,
size: "200"
}, t.$attrs), {
default: o(() => [
n(t.$slots, "icon")
]),
_: 3
}, 16, ["kind"])),
h(p, a({
"title-id": e.titleId,
"content-id": e.contentId,
title: e.title,
role: e.role
}, t.$attrs), {
titleOverride: o(() => [
n(t.$slots, "titleOverride")
]),
_: 3
}, 16, ["title-id", "content-id", "title", "role"]),
h(I, a({
"hide-action": !0,
"hide-close": e.hideClose,
"button-size": "xs",
"close-button-props": e.closeButtonProps,
"visually-hidden-close": t.visuallyHiddenClose,
"visually-hidden-close-label": t.visuallyHiddenCloseLabel
}, t.$attrs, {
onClose: s[0] || (s[0] = (q) => t.$emit("close"))
}), null, 16, ["hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
]),
c("div", et, [
n(t.$slots, "default", {}, () => [
C(T(e.message), 1)
])
])
])
], 10, X)) : r("", !0);
}
const b = /* @__PURE__ */ _(W, [["render", nt]]), ot = {
compatConfig: { MODE: 3 },
name: "DtToast",
components: {
ToastLayoutDefault: B,
ToastLayoutAlternate: b
},
mixins: [v],
inheritAttrs: !1,
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: void 0
},
/**
* 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: void 0
},
/**
* Title header of the toast. This can be left blank to remove the title from the toast entirely.
*/
title: {
type: String,
default: void 0
},
/**
* Message of the toast. Overridden by default slot.
*/
message: {
type: String,
default: void 0
},
/**
* Provides a role for the toast. 'status' is used by default to communicate a message. 'alert' is used to
* communicate an important message like an error that does not contain any interactive elements.
* @values status, alert
*/
role: {
type: String,
default: "status"
},
/**
* Severity level of the toast, could be different depending on which toast layout is used.
* @values base, error, info, success, warning, gradient
*/
kind: {
type: String,
default: void 0
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* @values true, false
*/
important: {
type: Boolean,
default: !1
},
/**
* Controls whether the toast is shown. If a valid duration is provided, the toast will disappear
* after reaching the duration time, so it's convenient to use `v-model` with this prop to update
* the data in your component.
* Supports v-model
* @values true, false
*/
show: {
type: Boolean,
default: !1
},
/**
* Props for the toast close button.
*/
closeButtonProps: {
type: Object,
default: void 0
},
/**
* Hides the close button from the toast
* @values true, false
*/
hideClose: {
type: Boolean,
default: void 0
},
/**
* Hides the icon from the notice
* @values true, false
*/
hideIcon: {
type: Boolean,
default: void 0
},
/**
* Hides the action from the notice
* @values true, false
*/
hideAction: {
type: Boolean,
default: void 0
},
/**
* The duration in ms the toast will display before disappearing.
* The toast won't disappear if the duration is not provided.
* If it's provided, it should be equal to or greater than 6000.
*/
duration: {
type: Number,
default: null,
validator: (t) => t >= w
},
/**
* The layout / styling you wish to use for the toast.
* @values default, alternate
*/
layout: {
type: String,
default: "default",
validator: (t) => M.includes(t)
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close",
/**
* Sync show value
*
* @event update:show
*/
"update:show"
],
data() {
return {
isShown: !1,
minDuration: w
};
},
computed: {
shouldSetTimeout() {
return !!this.duration && this.duration >= this.minDuration;
},
selectedLayout() {
return this.layout === "alternate" ? b : B;
}
},
watch: {
show: {
handler: function(t) {
this.isShown = t, t ? this.setTimeout() : clearTimeout(this.displayTimer);
},
immediate: !0
}
},
unmounted() {
clearTimeout(this.displayTimer);
},
methods: {
closeToast(t) {
this.$emit("update:show", !1), this.$emit("close", t);
},
setTimeout() {
this.shouldSetTimeout && (this.displayTimer = setTimeout(() => {
this.isShown = !1, this.$emit("update:show", !1);
}, this.duration));
},
handleClose() {
this.isShown = !1, this.$emit("close"), this.$emit("update:show", !1);
}
}
};
function it(t, s, e, g, u, i) {
return l(), y(N(i.selectedLayout), a({
"is-shown": u.isShown,
"title-id": e.titleId,
"content-id": e.contentId,
title: e.title,
message: e.message,
role: e.role,
kind: e.kind,
important: e.important,
"close-button-props": e.closeButtonProps,
"hide-close": e.hideClose,
"hide-icon": e.hideIcon,
"hide-action": e.hideAction
}, t.$attrs, { onClose: i.handleClose }), {
icon: o(() => [
n(t.$slots, "icon")
]),
titleOverride: o(() => [
n(t.$slots, "titleOverride")
]),
action: o(() => [
n(t.$slots, "action")
]),
default: o(() => [
n(t.$slots, "default", {}, () => [
C(T(e.message), 1)
])
]),
_: 3
}, 16, ["is-shown", "title-id", "content-id", "title", "message", "role", "kind", "important", "close-button-props", "hide-close", "hide-icon", "hide-action", "onClose"]);
}
const _t = /* @__PURE__ */ _(ot, [["render", it]]);
export {
_t as default
};
//# sourceMappingURL=toast.js.map