@dialpad/dialtone-vue
Version:
Vue component library for Dialpad's design system Dialtone
482 lines (481 loc) • 13.7 kB
JavaScript
import { TOAST_ROLES as l, TOAST_ALTERNATE_KINDS as u, TOAST_MIN_DURATION as s, TOAST_LAYOUTS as h } from "./toast-constants.js";
import o from "../../common/utils/index.js";
import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../notice/notice-action.js";
import f from "../notice/notice-content.js";
import y from "../notice/notice-icon.js";
import { NOTICE_KINDS as g } from "../notice/notice-constants.js";
import { DtIconSparkle as _, DtIconBell as p, DtIconAlertTriangle as m, DtIconInfo as i } from "@dialpad/dialtone-icons/vue2";
import { ICON_SIZE_MODIFIERS as S } from "../icon/icon-constants.js";
const v = {
name: "ToastLayoutDefault",
components: {
DtNoticeIcon: y,
DtNoticeContent: f,
DtNoticeAction: c
},
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 o.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 o.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: (e) => l.includes(e)
},
/**
* Severity level of the toast, sets the icon and background
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validator: (e) => g.includes(e)
},
/**
* Used in scenarios where the message needs to visually dominate the screen.
* @values true, false
*/
important: {
type: Boolean,
default: !1
},
/**
* 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
}
},
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];
}
}
};
var I = function() {
var t = this, n = t._self._c;
return t.isShown ? n("div", { class: [
"d-toast",
t.kindClass,
{ "d-toast--important": t.important }
], attrs: { "data-qa": "dt-toast", "aria-hidden": (!t.isShown).toString() } }, [n("div", { staticClass: "d-toast__dialog" }, [t.hideIcon ? t._e() : n("dt-notice-icon", t._g({ attrs: { kind: t.kind } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
return [t._t("titleOverride")];
}, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default", function() {
return [t._v(" " + t._s(t.message) + " ")];
})], 2), n("dt-notice-action", t._g({ attrs: { "hide-action": t.hideAction, "hide-close": t.hideClose } }, t.$listeners), [t._t("action")], 2)], 1)]) : t._e();
}, T = [], k = /* @__PURE__ */ a(
v,
I,
T
);
const r = k.exports, C = /* @__PURE__ */ new Map([
["info", i],
["success", i],
["warning", m],
["error", i],
["base", p],
["gradient", _]
]), w = {
name: "DtToastLayoutAlternateIcon",
components: {
DtIconInfo: i,
DtIconAlertTriangle: m,
DtIconBell: p,
DtIconSparkle: _
},
props: {
/**
* Kind of icon
* @values base, error, info, success, warning
*/
kind: {
type: String,
default: "base",
validator(e) {
return u.includes(e);
}
},
size: {
type: String,
default: "400",
validator: (e) => Object.keys(S).includes(e)
}
},
computed: {
defaultIcon() {
return C.get(this.kind);
}
}
};
var $ = function() {
var t = this, n = t._self._c;
return n("div", { staticClass: "d-toast-layout-alternate__icon", attrs: { "aria-hidden": "true" } }, [t._t("default", function() {
return [t.defaultIcon ? n(t.defaultIcon, { tag: "component", attrs: { size: t.size } }) : t._e()];
})], 2);
}, A = [], D = /* @__PURE__ */ a(
w,
$,
A
);
const O = D.exports, B = {
name: "ToastLayoutAlternate",
components: {
DtNoticeAction: c,
DtNoticeContent: f,
DtToastLayoutAlternateIcon: O
},
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 o.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 o.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: (e) => l.includes(e)
},
/**
* Severity level of the toast, sets the icon and background
* @values base, error, info, success, warning, gradient
*/
kind: {
type: String,
default: "base",
validator: (e) => u.includes(e)
},
/**
* 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
}
},
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];
}
}
};
var x = function() {
var t = this, n = t._self._c;
return t.isShown ? n("div", { class: [
"d-toast-alternate",
t.kindClass
], attrs: { "data-qa": "dt-toast", "aria-hidden": (!t.isShown).toString() } }, [n("div", { staticClass: "d-toast-alternate__dialog" }, [n("div", { staticClass: "d-toast-alternate__header" }, [t.hideIcon ? t._e() : n("dt-toast-layout-alternate-icon", t._g({ attrs: { kind: t.kind, size: "200" } }, t.$listeners), [t._t("icon")], 2), n("dt-notice-content", t._g({ attrs: { "title-id": t.titleId, "content-id": t.contentId, title: t.title, role: t.role }, scopedSlots: t._u([{ key: "titleOverride", fn: function() {
return [t._t("titleOverride")];
}, proxy: !0 }], null, !0) }, t.$listeners)), n("dt-notice-action", t._g({ attrs: { "hide-action": !0, "hide-close": t.hideClose, "button-size": "xs" } }, t.$listeners))], 1), n("div", { staticClass: "d-toast-alternate__content" }, [t._t("default", function() {
return [t._v(" " + t._s(t.message) + " ")];
})], 2)])]) : t._e();
}, L = [], N = /* @__PURE__ */ a(
B,
x,
L
);
const d = N.exports, b = {
name: "DtToast",
components: {
ToastLayoutDefault: r,
ToastLayoutAlternate: d
},
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 `.sync` modifier with this prop to update
* the data in your component.
* Supports .sync modifier
* @values true, false
*/
show: {
type: Boolean,
default: !1
},
/**
* 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: (e) => e >= s
},
/**
* The layout / styling you wish to use for the toast.
* @values default, alternate
*/
layout: {
type: String,
default: "default",
validator: (e) => h.includes(e)
}
},
emits: [
/**
* Close button click event
*
* @event close
*/
"close",
/**
* Sync show value
*
* @event update:show
*/
"update:show"
],
data() {
return {
isShown: !1,
minDuration: s
};
},
computed: {
shouldSetTimeout() {
return !!this.duration && this.duration >= this.minDuration;
},
selectedLayout() {
return this.layout === "alternate" ? d : r;
}
},
watch: {
show: {
handler: function(e) {
this.isShown = e, e ? this.setTimeout() : clearTimeout(this.displayTimer);
},
immediate: !0
}
},
destroyed() {
this.shouldSetTimeout && clearTimeout(this.displayTimer);
},
methods: {
setTimeout() {
this.shouldSetTimeout && (this.displayTimer = setTimeout(() => {
this.isShown = !1, this.$emit("update:show", !1);
}, this.duration));
},
handleClose() {
this.isShown = !1, this.$emit("update:show", !1);
}
}
};
var R = function() {
var t = this, n = t._self._c;
return n(t.selectedLayout, t._g({ tag: "component", attrs: { "is-shown": t.isShown, "title-id": t.titleId, "content-id": t.contentId, title: t.title, message: t.message, role: t.role, kind: t.kind, important: t.important, "hide-close": t.hideClose, "hide-icon": t.hideIcon, "hide-action": t.hideAction }, on: { close: t.handleClose }, scopedSlots: t._u([{ key: "icon", fn: function() {
return [t._t("icon")];
}, proxy: !0 }, { key: "titleOverride", fn: function() {
return [t._t("titleOverride")];
}, proxy: !0 }, { key: "action", fn: function() {
return [t._t("action")];
}, proxy: !0 }], null, !0) }, t.$listeners), [t._t("default", function() {
return [t._v(" " + t._s(t.message) + " ")];
})], 2);
}, q = [], z = /* @__PURE__ */ a(
b,
R,
q
);
const H = z.exports;
export {
H as default
};
//# sourceMappingURL=toast.js.map