@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
422 lines (421 loc) • 9.39 kB
JavaScript
import e, { extractVueListeners as t } from "./common/utils/index.js";
import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
import { ICON_SIZE_MODIFIERS as r } from "./lib/icon/icon-constants.js";
import { NOTICE_KINDS as i } from "./lib/notice/notice-constants.js";
import a from "./lib/notice/notice-icon.js";
import o from "./lib/notice/notice-content.js";
import s from "./lib/notice/notice-action.js";
import { TOAST_ALTERNATE_KINDS as c, TOAST_LAYOUTS as l, TOAST_MIN_DURATION as u, TOAST_ROLES as d } from "./lib/toast/toast-constants.js";
import { createBlock as f, createCommentVNode as p, createElementBlock as m, createElementVNode as h, createTextVNode as g, createVNode as _, mergeProps as v, normalizeClass as y, openBlock as b, renderSlot as x, resolveComponent as S, resolveDynamicComponent as C, toDisplayString as w, withCtx as T } from "vue";
import { DtIconAlertTriangle as E, DtIconBell as D, DtIconInfo as O, DtIconSparkle as k } from "@dialpad/dialtone-icons/vue3";
//#region components/toast/layouts/toast_layout_default.vue
var A = {
name: "ToastLayoutDefault",
components: {
DtNoticeIcon: a,
DtNoticeContent: o,
DtNoticeAction: s
},
inheritAttrs: !1,
props: {
isShown: {
type: Boolean,
default: !1
},
titleId: {
type: String,
default() {
return e.getUniqueString();
}
},
contentId: {
type: String,
default() {
return e.getUniqueString();
}
},
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
role: {
type: String,
default: "status",
validator: (e) => d.includes(e)
},
kind: {
type: String,
default: "base",
validator: (e) => i.includes(e)
},
important: {
type: Boolean,
default: !1
},
hideClose: {
type: Boolean,
default: !1
},
hideIcon: {
type: Boolean,
default: !1
},
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];
},
toastListeners() {
return t(this.$attrs);
}
}
}, j = ["aria-hidden"], M = { class: "d-toast__dialog" };
function N(e, t, n, r, i, a) {
let o = S("dt-notice-icon"), s = S("dt-notice-content"), c = S("dt-notice-action");
return n.isShown ? (b(), m("div", {
key: 0,
class: y([
"d-toast",
a.kindClass,
e.$attrs.class,
{ "d-toast--important": n.important }
]),
"data-qa": "dt-toast",
"aria-hidden": (!n.isShown).toString()
}, [h("div", M, [
n.hideIcon ? p("", !0) : (b(), f(o, v({
key: 0,
kind: n.kind
}, a.toastListeners), {
default: T(() => [x(e.$slots, "icon")]),
_: 3
}, 16, ["kind"])),
_(s, v({
"title-id": n.titleId,
"content-id": n.contentId,
title: n.title,
role: n.role
}, a.toastListeners), {
titleOverride: T(() => [x(e.$slots, "titleOverride")]),
default: T(() => [x(e.$slots, "default", {}, () => [g(w(n.message), 1)])]),
_: 3
}, 16, [
"title-id",
"content-id",
"title",
"role"
]),
_(c, v({
"hide-action": n.hideAction,
"hide-close": n.hideClose
}, a.toastListeners, { onClose: t[0] || (t[0] = (t) => e.$emit("close")) }), {
default: T(() => [x(e.$slots, "action")]),
_: 3
}, 16, ["hide-action", "hide-close"])
])], 10, j)) : p("", !0);
}
var P = /* @__PURE__ */ n(A, [["render", N]]), F = new Map([
["info", O],
["success", O],
["warning", E],
["error", O],
["base", D],
["gradient", k]
]), I = {
compatConfig: { MODE: 3 },
name: "DtToastLayoutAlternateIcon",
components: {
DtIconInfo: O,
DtIconAlertTriangle: E,
DtIconBell: D,
DtIconSparkle: k
},
props: {
kind: {
type: String,
default: "base",
validate(e) {
return c.includes(e);
}
},
size: {
type: String,
default: "400",
validator: (e) => Object.keys(r).includes(e)
}
},
computed: { defaultIcon() {
return F.get(this.kind);
} }
}, L = {
"aria-hidden": "true",
class: "d-toast-layout-alternate__icon"
};
function R(e, t, n, r, i, a) {
return b(), m("div", L, [x(e.$slots, "default", {}, () => [a.defaultIcon ? (b(), f(C(a.defaultIcon), {
key: 0,
size: n.size
}, null, 8, ["size"])) : p("", !0)])]);
}
//#endregion
//#region components/toast/layouts/toast_layout_alternate.vue
var z = {
name: "ToastLayoutAlternate",
components: {
DtNoticeAction: s,
DtNoticeContent: o,
DtToastLayoutAlternateIcon: /* @__PURE__ */ n(I, [["render", R]])
},
inheritAttrs: !1,
props: {
isShown: {
type: Boolean,
default: !1
},
titleId: {
type: String,
default() {
return e.getUniqueString();
}
},
contentId: {
type: String,
default() {
return e.getUniqueString();
}
},
title: {
type: String,
default: ""
},
message: {
type: String,
default: ""
},
role: {
type: String,
default: "status",
validator: (e) => d.includes(e)
},
kind: {
type: String,
default: "base",
validator: (e) => c.includes(e)
},
hideClose: {
type: Boolean,
default: !1
},
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];
},
toastListeners() {
return t(this.$attrs);
}
}
}, B = ["aria-hidden"], V = { class: "d-toast-alternate__dialog" }, H = { class: "d-toast-alternate__header" }, U = { class: "d-toast-alternate__content" };
function W(e, t, n, r, i, a) {
let o = S("dt-toast-layout-alternate-icon"), s = S("dt-notice-content"), c = S("dt-notice-action");
return n.isShown ? (b(), m("div", {
key: 0,
class: y([
"d-toast-alternate",
e.$attrs.class,
a.kindClass
]),
"data-qa": "dt-toast",
"aria-hidden": (!n.isShown).toString()
}, [h("div", V, [h("div", H, [
n.hideIcon ? p("", !0) : (b(), f(o, v({
key: 0,
kind: n.kind,
size: "200"
}, a.toastListeners), {
default: T(() => [x(e.$slots, "icon")]),
_: 3
}, 16, ["kind"])),
_(s, v({
"title-id": n.titleId,
"content-id": n.contentId,
title: n.title,
role: n.role
}, a.toastListeners), {
titleOverride: T(() => [x(e.$slots, "titleOverride")]),
_: 3
}, 16, [
"title-id",
"content-id",
"title",
"role"
]),
_(c, v({
"hide-action": !0,
"hide-close": n.hideClose,
"button-size": "xs"
}, a.toastListeners, { onClose: t[0] || (t[0] = (t) => e.$emit("close")) }), null, 16, ["hide-close"])
]), h("div", U, [x(e.$slots, "default", {}, () => [g(w(n.message), 1)])])])], 10, B)) : p("", !0);
}
var G = /* @__PURE__ */ n(z, [["render", W]]), K = {
compatConfig: { MODE: 3 },
name: "DtToast",
components: {
ToastLayoutDefault: P,
ToastLayoutAlternate: G
},
inheritAttrs: !1,
props: {
titleId: {
type: String,
default: void 0
},
contentId: {
type: String,
default: void 0
},
title: {
type: String,
default: void 0
},
message: {
type: String,
default: void 0
},
role: {
type: String,
default: "status"
},
kind: {
type: String,
default: void 0
},
important: {
type: Boolean,
default: !1
},
show: {
type: Boolean,
default: !1
},
hideClose: {
type: Boolean,
default: void 0
},
hideIcon: {
type: Boolean,
default: void 0
},
hideAction: {
type: Boolean,
default: void 0
},
duration: {
type: Number,
default: null,
validator: (e) => e >= u
},
layout: {
type: String,
default: "default",
validator: (e) => l.includes(e)
}
},
emits: ["close", "update:show"],
data() {
return {
isShown: !1,
minDuration: u
};
},
computed: {
shouldSetTimeout() {
return !!this.duration && this.duration >= this.minDuration;
},
selectedLayout() {
return this.layout === "alternate" ? G : P;
}
},
watch: { show: {
handler: function(e) {
this.isShown = e, e ? this.setTimeout() : clearTimeout(this.displayTimer);
},
immediate: !0
} },
unmounted() {
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("close"), this.$emit("update:show", !1);
}
}
};
function q(e, t, n, r, i, a) {
return b(), f(C(a.selectedLayout), v({
"is-shown": i.isShown,
"title-id": n.titleId,
"content-id": n.contentId,
title: n.title,
message: n.message,
role: n.role,
kind: n.kind,
important: n.important,
"hide-close": n.hideClose,
"hide-icon": n.hideIcon,
"hide-action": n.hideAction
}, e.$attrs, { onClose: a.handleClose }), {
icon: T(() => [x(e.$slots, "icon")]),
titleOverride: T(() => [x(e.$slots, "titleOverride")]),
action: T(() => [x(e.$slots, "action")]),
default: T(() => [x(e.$slots, "default", {}, () => [g(w(n.message), 1)])]),
_: 3
}, 16, [
"is-shown",
"title-id",
"content-id",
"title",
"message",
"role",
"kind",
"important",
"hide-close",
"hide-icon",
"hide-action",
"onClose"
]);
}
var J = /* @__PURE__ */ n(K, [["render", q]]);
//#endregion
export { J as t };
//# sourceMappingURL=toast-DvPN-bCi.js.map